batman

templates/index.templ

@@ -0,0 +1,136 @@
+package templates
+
+// IndexProps contains the properties for the Index component
+type IndexProps struct {
+	Title string
+}
+
+// Index is the main page component
+templ Index(props IndexProps) {
+	@Layout(props.Title) {
+		<div class="container">
+			<div class="row justify-content-center">
+				<div class="col-md-10">
+					<div class="d-flex justify-content-between align-items-center mb-4">
+						<h1>{ props.Title }</h1>
+						<div class="current-ip d-flex align-items-center">
+							<span class="me-2">Current IP:</span>
+							<span id="current-ip" class="fw-bold"></span>
+							<button
+								id="refresh-ip"
+								class="btn btn-sm btn-outline-secondary ms-2"
+								title="Refresh current IP"
+							>
+								<i class="bi bi-arrow-clockwise"></i>
+							</button>
+						</div>
+					</div>
+					<!-- Configuration Warning -->
+					<div
+						id="config-warning"
+						class="alert alert-warning config-warning"
+						style="display: none"
+					>
+						<h4>Configuration Required</h4>
+						<p>
+							Please configure your Cloudflare API credentials to manage your
+							DNS records.
+						</p>
+						<button
+							class="btn btn-primary"
+							data-bs-toggle="modal"
+							data-bs-target="#configModal"
+						>
+							Configure Now
+						</button>
+					</div>
+					<!-- Configuration Status -->
+					<div id="config-status" class="card mb-4" style="display: none">
+						<div
+							class="card-header d-flex justify-content-between align-items-center"
+						>
+							<h5 class="mb-0">Configuration</h5>
+							<button
+								class="btn btn-sm btn-outline-primary"
+								data-bs-toggle="modal"
+								data-bs-target="#configModal"
+							>
+								Edit
+							</button>
+						</div>
+						<div class="card-body">
+							<div class="row">
+								<div class="col-md-4">
+									<strong>Domain:</strong> <span id="domain-name">mz.uy</span>
+								</div>
+								<div class="col-md-4">
+									<strong>Zone ID:</strong> <span id="zone-id"></span>
+								</div>
+								<div class="col-md-4">
+									<strong>IP Update Schedule:</strong>
+									<span id="update-schedule"></span>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- DNS Records Section -->
+					<div id="dns-records-section" style="display: none">
+						<div class="card">
+							<div
+								class="card-header d-flex justify-content-between align-items-center"
+							>
+								<h5 class="mb-0">DNS Records</h5>
+								<div>
+									<button
+										id="update-all-records"
+										class="btn btn-sm btn-success me-2"
+									>
+										<i class="bi bi-arrow-repeat"></i> Update All to Current IP
+									</button>
+									<button
+										class="btn btn-sm btn-primary"
+										data-bs-toggle="modal"
+										data-bs-target="#recordModal"
+									>
+										<i class="bi bi-plus-lg"></i> Add Record
+									</button>
+								</div>
+							</div>
+							<div class="card-body p-0">
+								<div class="table-responsive">
+									<table class="table table-striped table-hover mb-0">
+										<thead>
+											<tr>
+												<th>Type</th>
+												<th>Name</th>
+												<th>Content</th>
+												<th>TTL</th>
+												<th>Proxied</th>
+												<th>Actions</th>
+											</tr>
+										</thead>
+										<tbody id="dns-records">
+											<!-- DNS records will be inserted here -->
+										</tbody>
+									</table>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Loading Indicator -->
+					<div id="loading" class="text-center my-5">
+						<div class="spinner-border" role="status">
+							<span class="visually-hidden">Loading...</span>
+						</div>
+						<p class="mt-2">Loading...</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		@ConfigModal()
+		@RecordModal()
+		<!-- Toast container for notifications -->
+		<div class="toast-container"></div>
+		<script src="/assets/js/app.js"></script>
+	}
+}