Update: 2026-07-24 23:23:54

dashboard/siro-admin/index.html

@@ -28,10 +28,19 @@
       </div>
 
       <form id="loginForm">
+        <div style="display:flex; background:rgba(15, 23, 42, 0.6); padding:4px; border-radius:var(--radius-md); border:1px solid var(--border-color); margin-bottom:1.5rem;">
+          <button type="button" id="modeLiveBtn" class="btn" style="flex:1; justify-center:center; padding:0.5rem; font-size:0.82rem; border-radius:var(--radius-sm); background:var(--primary); color:#fff;">
+            <i class="ph-bold ph-database"></i> Live Backend API
+          </button>
+          <button type="button" id="modeDemoBtn" class="btn" style="flex:1; justify-center:center; padding:0.5rem; font-size:0.82rem; border-radius:var(--radius-sm); color:var(--text-muted); background:transparent;">
+            <i class="ph-bold ph-flask"></i> Interactive Demo
+          </button>
+        </div>
+
         <div class="form-group">
-          <label class="form-label" for="loginEmail">Admin Email</label>
+          <label class="form-label" for="loginEmail">Admin Email / Phone</label>
           <div class="form-input-group">
-            <input type="email" id="loginEmail" class="form-input" placeholder="admin@siromove.com" value="admin@siromove.com" required>
+            <input type="text" id="loginEmail" class="form-input" placeholder="admin@siromove.com or +962..." value="admin@siromove.com" required>
             <i class="ph ph-envelope"></i>
           </div>
         </div>
@@ -500,6 +509,31 @@
     </div>
   </div>
 
+  <!-- OTP Verification Modal -->
+  <div class="modal-overlay" id="otpModal">
+    <div class="modal-content" style="max-width: 400px; text-align: center;">
+      <div style="width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem;">
+        <i class="ph ph-whatsapp-logo"></i>
+      </div>
+      <h3 style="color: #fff; margin-bottom: 0.5rem;">WhatsApp Verification Code</h3>
+      <p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.5rem;" id="otpPhoneText">
+        A 3-digit verification code was sent to your WhatsApp.
+      </p>
+
+      <div style="display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem;">
+        <input type="text" maxlength="3" id="otpInput" class="form-input" style="text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: 700; width: 140px;" placeholder="123">
+      </div>
+
+      <button type="button" class="btn-primary" id="submitOtpBtn">
+        <i class="ph-bold ph-check"></i> Verify & Sign In
+      </button>
+
+      <button type="button" class="btn btn-secondary" onclick="closeOtpModal()" style="width: 100%; margin-top: 0.75rem; justify-content: center;">
+        Cancel
+      </button>
+    </div>
+  </div>
+
   <script src="js/app.js"></script>
 </body>
 </html>