Update index.html

index.html

@@ -19,19 +19,41 @@
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <h1 class="text-xl font-bold text-primary flex items-center"><i class="fas fa-satellite-dish mr-2 text-accent-blue"></i>Win Super Power - Factory Dashboard</h1>
             <div class="flex items-center gap-4">
-                <button id="show-reports-modal-btn" class="btn btn-secondary text-sm">
+                <div id="user-info" class="text-sm text-secondary hidden">
+                    Logged in as: <span id="user-email" class="font-semibold text-primary"></span>
+                </div>
+                <button id="logout-btn" class="btn btn-secondary text-sm hidden">Logout</button>
+                <button id="show-reports-modal-btn" class="btn btn-secondary text-sm hidden">
                     <i class="fas fa-file-alt mr-1"></i> Reports
                 </button>
             </div>
         </div>
     </header>
 
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 pt-20 pb-8 flex-grow">
+    <!-- Login Screen -->
+    <div id="login-screen" class="fixed inset-0 bg-bg-dark flex items-center justify-center z-50">
+        <div class="dashboard-card p-8 w-full max-w-sm">
+            <h2 class="text-2xl font-bold text-center mb-6">Login</h2>
+            <form id="login-form">
+                <div class="mb-4">
+                    <label for="email" class="block text-sm font-medium text-secondary mb-1">Email</label>
+                    <input type="email" id="email" class="input-field w-full" required>
+                </div>
+                <div class="mb-6">
+                    <label for="password" class="block text-sm font-medium text-secondary mb-1">Password</label>
+                    <input type="password" id="password" class="input-field w-full" required>
+                </div>
+                <button type="submit" class="btn btn-primary w-full">Sign In</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Main Content (Initially Hidden) -->
+    <main id="main-content" class="container mx-auto px-4 pt-20 pb-8 opacity-0 transition-opacity duration-500 hidden">
         <!-- KPI Row -->
         <div id="kpi-row" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"></div>
 
-        <!-- Chart Row (FIXED) -->
+        <!-- Chart Row -->
         <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6">
             <div class="lg:col-span-3 dashboard-card p-6">
                 <h2 class="text-lg font-semibold mb-4">Production History (Last 7 Days)</h2>
@@ -96,6 +118,7 @@
     <div id="custom-po-modal" class="modal-backdrop fixed inset-0 flex items-center justify-center z-50 hidden"></div>
     
     <div id="toast-container"></div>
+    <!-- Load main.js as module, it will import others -->
     <script src="main.js" type="module"></script>
 </body>
 </html>