Update index.html

index.html

@@ -1,19 +1,113 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Google Sheets CoreUI App</title>
+  <link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0/dist/css/coreui.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-body-tertiary">
+  
+  <!-- LOGIN VIEW -->
+  <div id="login-view" class="container d-flex align-items-center justify-content-center min-vh-100">
+    <div class="card p-4 shadow" style="width: 350px;">
+      <h3 class="text-center mb-4">System Login</h3>
+      <div class="mb-3">
+        <label class="form-label">Username</label>
+        <input type="text" id="username" class="form-control">
+      </div>
+      <div class="mb-4">
+        <label class="form-label">Password</label>
+        <input type="password" id="password" class="form-control">
+      </div>
+      <button class="btn btn-primary w-100" onclick="login()">Login</button>
+      <div id="login-error" class="text-danger mt-2 text-center d-none">Invalid credentials</div>
+    </div>
+  </div>
+
+  <!-- MAIN APP VIEW -->
+  <div id="app-view" class="d-none">
+    <header class="header header-sticky mb-4 p-3 shadow-sm bg-white d-flex justify-content-between align-items-center">
+      <h4 class="mb-0">Data Dashboard</h4>
+      <div>
+        <span class="badge text-bg-secondary me-3" id="user-role-badge"></span>
+        <button id="btn-admin" class="btn btn-warning btn-sm d-none me-2" onclick="openAdminModal()">Admin Config</button>
+        <button class="btn btn-outline-danger btn-sm" onclick="logout()">Logout</button>
+      </div>
+    </header>
+
+    <div class="container-fluid px-4">
+      <div class="d-flex justify-content-between mb-3">
+        <input type="text" id="searchInput" class="form-control w-25" placeholder="Search data..." onkeyup="renderTable()">
+        <button class="btn btn-success" onclick="openDataModal()">+ Add New Record</button>
+      </div>
+      <div class="card shadow-sm">
+        <div class="card-body overflow-auto">
+          <table class="table table-striped table-hover" id="dataTable">
+            <!-- Rendered via JS -->
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- DATA MODAL (Create/Update) -->
+  <div class="modal fade" id="dataModal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Record Form</h5>
+          <button type="button" class="btn-close" onclick="closeModal('dataModal')"></button>
+        </div>
+        <div class="modal-body" id="dataFormContainer">
+          <!-- Dynamic form fields injected here -->
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" onclick="closeModal('dataModal')">Close</button>
+          <button type="button" class="btn btn-primary" onclick="saveData()">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ADMIN CONFIG MODAL -->
+  <div class="modal fade" id="adminModal" tabindex="-1" data-coreui-backdrop="static">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Admin Configuration</h5>
+          <button type="button" class="btn-close" onclick="closeModal('adminModal')"></button>
+        </div>
+        <div class="modal-body">
+          <div class="mb-3">
+            <label class="form-label">Target Google Sheet URL</label>
+            <div class="input-group">
+              <input type="text" id="adminSheetUrl" class="form-control" placeholder="https://docs.google.com/spreadsheets/d/...">
+              <button class="btn btn-outline-secondary" onclick="fetchSheets()">Load Sheets</button>
+            </div>
+          </div>
+          <div class="mb-3 d-none" id="adminSheetSelectGroup">
+            <label class="form-label">Select Sheet</label>
+            <div class="input-group">
+              <select id="adminSheetSelect" class="form-select"></select>
+              <button class="btn btn-outline-secondary" onclick="fetchColumns()">Load Columns</button>
+            </div>
+          </div>
+          <table class="table mt-3 d-none" id="adminColumnsTable">
+            <thead>
+              <tr><th>Column Header</th><th>Input Type</th><th>Options (Comma separated)</th></tr>
+            </thead>
+            <tbody id="adminColumnsBody"></tbody>
+          </table>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" onclick="saveAdminConfig()">Save Configuration</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0/dist/js/coreui.bundle.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>