Update combined.html

mcgdj · web-flow · commit cc6b36426ad1 · 2025-02-28T13:32:36.000-07:00
Bugfixes
diff --git a/combined.html b/combined.html
@@ -77,6 +77,19 @@
       font-size: 18px;
     }
 
+    .section {
+      display: none;
+      opacity: 0;
+      transform: translateY(20px);
+      transition: opacity var(--transition-speed), transform var(--transition-speed);
+    }
+
+    .section.active {
+      display: block;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
   </style>
 </head>
 <body>
@@ -85,12 +98,12 @@
     <button onclick="showSection('ordering')">Ordering</button>
     <button onclick="showSection('rules')">Rules</button>
     <button onclick="showSection('settings')">Settings</button>
-    <button><a href="https://scratch-coding-hut.github.io/account" id="account-link" style="color: inherit; text-decoration: none;">My Account</a></button>
+    <button onclick="showSection('account')">My Account</button>
   </div>
 
   <div class="auth-status" id="authStatus">Checking login status...</div>
   
-  <div id="home" class="section"> 
+  <div id="home" class="section active"> 
     <h1>Welcome to Coding Hut</h1>
     <p>The best coding shop of Scratch</p> 
   </div>
@@ -103,7 +116,7 @@ <h1>Rules:</h1>
       <li>Be respectful to customers and employees.</li>
     </ol>
   </div>
-  <div id="settings" class="section" style="display:none;">
+  <div id="settings" class="section">
     <h2>Settings</h2>
     <div class="settings">
       <label>
@@ -116,30 +129,42 @@ <h2>Settings</h2>
     </div>
   </div>
 
+  <div id="account" class="section">
+    <h2>My Account</h2>
+    <p>Welcome, <span id="accountUser"></span>!</p>
+  </div>
+
   <script>
     function showSection(sectionId) {
       document.querySelectorAll('.section').forEach(section => {
-        section.style.display = 'none';
+        section.classList.remove('active');
       });
-      document.getElementById(sectionId).style.display = 'block';
+      document.getElementById(sectionId).classList.add('active');
     }
 
     function toggleDarkMode() {
       document.body.classList.toggle('dark-mode');
+      localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
     }
 
     function updateAuthStatus() {
       const storedUser = localStorage.getItem("loggedInUser");
       const authStatus = document.getElementById("authStatus");
       if (storedUser) {
         authStatus.innerText = `Logged in as: ${storedUser}`;
-        document.getElementById("account-link").innerText = `My Account (${storedUser})`;
+        document.getElementById("accountUser").innerText = storedUser;
       } else {
         authStatus.innerText = "Not logged in";
       }
     }
     
-    window.onload = updateAuthStatus;
+    window.onload = function() {
+      updateAuthStatus();
+      if (localStorage.getItem('darkMode') === 'true') {
+        document.body.classList.add('dark-mode');
+        document.getElementById('darkModeToggle').checked = true;
+      }
+    };
   </script>
 </body>
 </html>
