Single-session-login-Layout: :

-

 Single-session-login-Layout: 

Layout:

Output:



Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Kitchen King - Session Modal</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

    body { background: #f4f4f4; }

    aside { background: #fff; padding: 20px; }

    aside h5 {
      background: #eee;
      margin-bottom: 5px;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    aside ul {
      list-style: none;
      margin-bottom: 15px;
      display: none;
    }

    .customer-aside-list { display: block; }

    aside ul li {
      margin-left: 15px;
      padding: 5px 0;
    }

    .open + ul { display: block; }

    /* Overlay */
    #overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      height: 100%; width: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 998;
    }

    #modalOverlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    .modal-box {
      display: none;
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      width: 90%;
      max-width: 400px;
    }

    .modal-box h4 { margin-bottom: 10px; text-align: center; }

    .modal-box select, .modal-box input, .modal-box button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border-radius: 5px;
    }

    .modal-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal-actions button {
      background: #0F5E05;
      color: white;
      border: none;
      cursor: pointer;
    }

    .modal-actions button:hover { background: #0c4704; }

    .modal-closebtn {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal-closebtn button {
      background: #FF0606;
      color: white;
      border: none;
      padding: 10px 16px;
      font-size: 16px;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .modal-closebtn button:hover { background-color: #d00000; }

    .custom-message-outer {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }

    .custom-message {
      position: fixed;
      top: 12%;
      left: 50%;
      transform: translateX(-50%);
      background-color: white;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 16px;
      display: none;
      z-index: 10009;
      text-align: center;
      width: 200px;
      height: 100px;
      line-height: 40px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    #sessionTimerDisplay {
      margin-top: 20px;
      padding: 10px;
      background: #ffecec;
      color: red;
      font-weight: bold;
      border: 1px solid #f99;
      text-align: center;
      border-radius: 6px;
    }

    #logoutBtn {
      display: block;
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      background-color: #ff6600;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    #logoutBtn:hover { background-color: #cc5200; }
  </style>
</head>
<body>

<aside>
  <h3>📋 Menu</h3>

  <h5>Customer Section:</h5>
  <ul class="customer-aside-list">
    <li>Home</li>
    <li>Your Details</li>
    <li>Select Items</li>
    <li>Your Selected Items</li>
    <li>Your Order</li>
    <li>Your Order Status</li>
    <li>Your Bill & Payment</li>
  </ul>

  <h5 class="section-header" data-section="operator">Operator Section:<br/>(Click to Login)</h5>
  <ul>
    <h5 class="section-header" data-section="service">Service Section:<br/>(Logout Then Login)</h5>
    <ul>
      <li>Menu Page</li>
      <li>Order Page</li>
      <li>Customer Order Status</li>
      <li>Order Items List</li>
    </ul>
    <h5 class="section-header" data-section="accounting">Accounting Section:<br/>(Logout Then Login):</h5>
    <ul>
      <li>Orders & Billing Page</li>
      <li>Received Payment Page</li>
      <li>Stock Page</li>
    </ul>
  </ul>

  <div id="sessionTimerDisplay">Session: Not started</div>
  <button id="logoutBtn" onclick="logoutSession()">🔓 Log Out</button>
</aside>

<!-- 🔲 Modal Overlay -->
<div id="modalOverlay"></div>

<!-- Modals: Session Time / Login / Reset / Set New -->
<div id="timeSessionModal" class="modal-box">
  <h4>⏳ Set Session Time</h4>
  <select id="sessionTimeSelect">
    <option value="">-- Select --</option>
    <option value="0.0833333335">5 minutes</option>
    <option value="0.5">30 minutes</option>
    <option value="1">1 Hour</option>
    <option value="2">2 Hours</option>
    <option value="5">5 Hours</option>
    <option value="9">9 Hours</option>
    <option value="12">12 Hours</option>
    <option value="16">16 Hours</option>
    <option value="20">20 Hours</option>
  </select>
  <div class="modal-actions">
    <button onclick="confirmSessionTime()">Set</button>
  </div>
  <div class="modal-closebtn"><button onclick="closeAllModals()">Cancel</button></div>
</div>

<div id="loginModal" class="modal-box">
  <h4>🔐 Login</h4>
  <input type="text" id="loginInput" placeholder="Mobile Number or Password">
  <div class="modal-actions">
    <button onclick="submitLogin()">Login</button>
    <button onclick="openResetModal()">Reset Password</button>
  </div>
  <div class="modal-closebtn"><button onclick="closeAllModals()">Cancel</button></div>
</div>

<div id="resetPModal" class="modal-box">
  <h4>📱 Reset Password</h4>
  <input type="text" id="resetMobileInput" placeholder="Enter Registered Mobile Number">
  <div class="modal-actions"><button onclick="verifyMobileForReset()">Verify Mobile</button></div>
  <div class="modal-closebtn"><button onclick="closeAllModals()">Cancel</button></div>
</div>

<div id="newPasswordModal" class="modal-box">
  <h4>🔑 Set New Password</h4>
  <input type="password" id="newPassword" placeholder="New Password">
  <input type="password" id="confirmPassword" placeholder="Confirm Password">
  <div class="modal-actions"><button onclick="submitNewPassword()">Submit</button></div>
  <div class="modal-closebtn"><button onclick="closeAllModals()">Cancel</button></div>
</div>

<!-- Message Display -->
<div class="custom-message-outer"><div id="customMessage" class="custom-message"></div></div>

<script>
  let selectedSection = "";
  let sessionTimer = null;
  let sessionDuration = 0;

  document.querySelectorAll(".section-header").forEach(header => {
  header.addEventListener("click", () => {
    const active = localStorage.getItem("activeSection");
    const end = parseInt(localStorage.getItem("sessionEndTime"), 10);
    
    if (active && end && Date.now() < end) {
      showMessage("⚠️ Session already running for: " + active.toUpperCase());
      return;
    }
    
    selectedSection = header.dataset.section;
    openSessionModal();
  });
});

  function openSessionModal() {
    document.getElementById("modalOverlay").style.display = "block";
    document.getElementById("timeSessionModal").style.display = "block";
  }

  function confirmSessionTime() {
    const value = document.getElementById("sessionTimeSelect").value;
    if (!value) return showMessage("⚠️ Please select a session time.");
    sessionDuration = parseFloat(value) * 60 * 60 * 1000;
    closeAllModals();
    document.getElementById("loginModal").style.display = "block";
    document.getElementById("modalOverlay").style.display = "block";
  }

  function submitLogin() {
    const input = document.getElementById("loginInput").value.trim();
    const allowedMobiles = ["6294584775", "8926417628"];
    const allowedPassword = "o123pa456retor789";

    if (allowedMobiles.includes(input) || input === allowedPassword) {
      unlockSection(selectedSection);
      const endTime = Date.now() + sessionDuration;
      localStorage.setItem("activeSection", selectedSection);
      localStorage.setItem("sessionEndTime", endTime);
      runTimer(endTime);
      closeAllModals();
      showMessage("✅ Access granted");
    } else {
      showMessage("❌ Invalid credentials");
    }
  }

  function unlockSection(section) {
    const headers = document.querySelectorAll(`.section-header[data-section='${section}']`);
    headers.forEach(h => {
      h.classList.add("open");
      const ul = h.nextElementSibling;
      if (ul && ul.tagName.toLowerCase() === 'ul') ul.style.display = "block";
    });
  }

  function closeAllModals() {
    document.getElementById("modalOverlay").style.display = "none";
    document.querySelectorAll(".modal-box").forEach(m => m.style.display = "none");
  }

  function openResetModal() {
    closeAllModals();
    document.getElementById("resetPModal").style.display = "block";
    document.getElementById("modalOverlay").style.display = "block";
  }

  function verifyMobileForReset() {
    const mobile = document.getElementById("resetMobileInput").value.trim();
    const allowedMobiles = ["6294584775", "8926417628"];
    if (allowedMobiles.includes(mobile)) {
      closeAllModals();
      document.getElementById("newPasswordModal").style.display = "block";
      document.getElementById("modalOverlay").style.display = "block";
    } else {
      showMessage("❌ Mobile number not recognized.");
    }
  }

  function submitNewPassword() {
    const newPass = document.getElementById("newPassword").value;
    const confirmPass = document.getElementById("confirmPassword").value;
    if (!newPass || !confirmPass) return;
    if (newPass !== confirmPass) return showMessage("❌ Passwords do not match.");
    showMessage("✅ Password reset successful.");
    closeAllModals();
  }

  function showMessage(msg) {
    const box = document.getElementById("customMessage");
    box.innerText = msg;
    box.style.display = "block";
    setTimeout(() => box.style.display = "none", 3000);
  }

  function runTimer(endTime) {
    const display = document.getElementById("sessionTimerDisplay");
    if (sessionTimer) clearInterval(sessionTimer);

    sessionTimer = setInterval(() => {
      const remaining = endTime - Date.now();
      if (remaining <= 0) {
        clearInterval(sessionTimer);
        display.innerText = "Session expired";
        localStorage.clear();
      } else {
        const mins = Math.floor(remaining / 60000);
        const secs = Math.floor((remaining % 60000) / 1000);
        display.innerText = `Session Time Left: ${mins}m ${secs}s`;
      }
    }, 1000);
  }

  function logoutSession() {
    clearInterval(sessionTimer);
    localStorage.clear();
    document.getElementById("sessionTimerDisplay").innerText = "Session: Not started";
    showMessage("❌ Session Ended");
  }

  window.addEventListener("DOMContentLoaded", () => {
    const section = localStorage.getItem("activeSection");
    const endTime = parseInt(localStorage.getItem("sessionEndTime"), 10);
    if (section && endTime && Date.now() < endTime) {
      unlockSection(section);
      runTimer(endTime);
    } else {
      localStorage.clear();
    }
  });
</script>

</body>
</html>

Css:

Html:

JS:

<script>
  // 🔹 Global Variables
  let selectedSection = "";            // Stores the clicked section (operator, service, accounting)
  let sessionTimer = null;            // Stores the timer interval for session countdown
  let sessionDuration = 0;           // Duration of session in milliseconds

  // 🔸 [1] SECTION CLICK HANDLER
  // Handles click on section headers → shows session modal (only if no active session)
  document.querySelectorAll(".section-header").forEach(header => {
    header.addEventListener("click", () => {
      const active = localStorage.getItem("activeSection");
      const end = parseInt(localStorage.getItem("sessionEndTime"), 10);

      // ❌ Block if session already running
      if (active && end && Date.now() < end) {
        showMessage("⚠️ Session already running for: " + active.toUpperCase());
        return;
      }

      // ✅ Proceed to open session time modal
      selectedSection = header.dataset.section;
      openSessionModal();
    });
  });

  // 🔸 [2] SESSION TIME MODAL → Show
  function openSessionModal() {
    document.getElementById("modalOverlay").style.display = "block";
    document.getElementById("timeSessionModal").style.display = "block";
  }

  // 🔸 [3] CONFIRM SESSION TIME → Go to Login
  function confirmSessionTime() {
    const value = document.getElementById("sessionTimeSelect").value;
    if (!value) return showMessage("⚠️ Please select a session time.");
    
    sessionDuration = parseFloat(value) * 60 * 60 * 1000; // Convert hours to ms
    closeAllModals();
    document.getElementById("loginModal").style.display = "block";
    document.getElementById("modalOverlay").style.display = "block";
  }

  // 🔸 [4] LOGIN → Validate and Start Session
  function submitLogin() {
    const input = document.getElementById("loginInput").value.trim();
    const allowedMobiles = ["6294584775", "8926417628"];
    const allowedPassword = "o123pa456retor789";

    if (allowedMobiles.includes(input) || input === allowedPassword) {
      unlockSection(selectedSection); // ✅ Show section
      const endTime = Date.now() + sessionDuration;
      
      // 🔐 Save session info
      localStorage.setItem("activeSection", selectedSection);
      localStorage.setItem("sessionEndTime", endTime);

      runTimer(endTime); // ⏳ Start countdown
      closeAllModals();
      showMessage("✅ Access granted");
    } else {
      showMessage("❌ Invalid credentials");
    }
  }

  // 🔸 [5] SECTION EXPANSION → Display UL below section
  function unlockSection(section) {
    const headers = document.querySelectorAll(`.section-header[data-section='${section}']`);
    headers.forEach(h => {
      h.classList.add("open");
      const ul = h.nextElementSibling;
      if (ul && ul.tagName.toLowerCase() === 'ul') ul.style.display = "block";
    });
  }

  // 🔸 [6] MODAL CONTROL → Close All Modals
  function closeAllModals() {
    document.getElementById("modalOverlay").style.display = "none";
    document.querySelectorAll(".modal-box").forEach(m => m.style.display = "none");
  }

  // 🔸 [7] RESET PASSWORD → Open Reset Modal
  function openResetModal() {
    closeAllModals();
    document.getElementById("resetPModal").style.display = "block";
    document.getElementById("modalOverlay").style.display = "block";
  }

  // 🔸 [8] VERIFY MOBILE → Before Password Reset
  function verifyMobileForReset() {
    const mobile = document.getElementById("resetMobileInput").value.trim();
    const allowedMobiles = ["6294584775", "8926417628"];
    
    if (allowedMobiles.includes(mobile)) {
      closeAllModals();
      document.getElementById("newPasswordModal").style.display = "block";
      document.getElementById("modalOverlay").style.display = "block";
    } else {
      showMessage("❌ Mobile number not recognized.");
    }
  }

  // 🔸 [9] SUBMIT NEW PASSWORD
  function submitNewPassword() {
    const newPass = document.getElementById("newPassword").value;
    const confirmPass = document.getElementById("confirmPassword").value;
    
    if (!newPass || !confirmPass) return;
    if (newPass !== confirmPass) return showMessage("❌ Passwords do not match.");

    showMessage("✅ Password reset successful.");
    closeAllModals();
  }

  // 🔸 [10] SHOW CUSTOM MESSAGE BOX
  function showMessage(msg) {
    const box = document.getElementById("customMessage");
    box.innerText = msg;
    box.style.display = "block";
    setTimeout(() => box.style.display = "none", 3000);
  }

  // 🔸 [11] SESSION TIMER → Countdown Display
  function runTimer(endTime) {
    const display = document.getElementById("sessionTimerDisplay");
    if (sessionTimer) clearInterval(sessionTimer);

    sessionTimer = setInterval(() => {
      const remaining = endTime - Date.now();
      if (remaining <= 0) {
        clearInterval(sessionTimer);
        display.innerText = "Session expired";
        localStorage.clear(); // 🔐 Clear session data
      } else {
        const mins = Math.floor(remaining / 60000);
        const secs = Math.floor((remaining % 60000) / 1000);
        display.innerText = `Session Time Left: ${mins}m ${secs}s`;
      }
    }, 1000);
  }

  // 🔸 [12] LOGOUT BUTTON FUNCTION
  function logoutSession() {
    clearInterval(sessionTimer);
    localStorage.clear();
    document.getElementById("sessionTimerDisplay").innerText = "Session: Not started";
    showMessage("❌ Session Ended");
  }

  // 🔸 [13] ON PAGE LOAD → Restore session if still valid
  window.addEventListener("DOMContentLoaded", () => {
    const section = localStorage.getItem("activeSection");
    const endTime = parseInt(localStorage.getItem("sessionEndTime"), 10);
    
    if (section && endTime && Date.now() < endTime) {
      unlockSection(section); // ✅ Show the section
      runTimer(endTime);      // ⏳ Resume timer
    } else {
      localStorage.clear();   // 🧹 Clean old session
    }
  });
</script>



Comments

Post a Comment

Popular posts from this blog

Assets: Image

-
Image
Assets: Image  Images: Owner: Link -  Banner: Link -  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZbocGeCvw08UGXpPVsDYGx_-HqORd48N-UCsgWvc4D0eA81XXL4h31KdrXYUe5H-xv7HKiQK9l5mmU2idmpbx2vxD3ncLF-0dontRf3UeLMrXRSuC0Ofc3oEuRQpu83LVJH06tD5wWdwE0BAgj6uW8egrCPoz-cOs-_Oq9owL9V9BeSuhX1hLmZg3FXA/s320/Kitchen%20Kingwallpaper.png" A. Starter: 1. Green Salad: Link -  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIag_w9Ls2d56xRpexgZzV2zLroOeJRKgDuTVWjiycYnyw9JvhrXN-pkjOuw22MuKcOSmtiDqkhqGowaAV_AwOO7ak02rIKUhI8C8RCQ8a1m-ICl-BcgSQBJIwz57NVrl0sQtlTunlnaC__ewkwrChxdmoBVrp7r7lQYbAnehiOo8ftHLot7l-kTkGIk/s320/Green%20Salad.jpg" 2. Onion Salad: Link -  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZLXqTfpDxZacmqfZnlmleY3hAOuXlcpAUsDBxwWTdfhWvCLgA0p0iQzxxREHz0w7dn1lleg72_e3j35suQ8r0quw8Hr9xdDKUEmV8Tn-kYgFyeQgVPNbAfGOI3m8JBiUpzdNXwemZAZVvXZubF4rqe4BHNjjXciB7dqsROW30mkxPN0ni0oNps3tBBk/s320/OnionSalad.jpg" 3. ChickenPokor...
Read more

Image Post

-
Image
Code to insert the Image: <div class="separator" style="clear: both; text-align: center;"><a href="" style="margin-left: 1em; margin-right: 1em;" target="_blank" > <img alt="Green Salad" border="0" data-original-height="400" data-original-width="473" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5tYHx30ZkQe5NJ9lcMTnHMXFd-wvSsL2JHCI0xALeaiFyTXnNGvQTe0fZPWPziBqGp8a73e9_ykrMNGdCZ0aJI7mtRs4EY2wlCyCni0V0fYViTHdxC2Ja_CtZajqAnUCkHnc8i2_1BjFXdmUmgLE5S88Ax7dP5ajhLImn3Pf07e6kZo3mqywi9mNbyA/s320/ChickenPokora.jpg" style="border-radius: 20px; display: block; margin: 10px auto;" width="320" /></a></div><br /><div><br /></div><div><br /></div> Alternative: Code: <div class="separator" style="clear: both; text-align: center;">   <a href=...
Read more