assets/css/defaults.css

@@ -1,4 +1,3 @@
-/* CSS generated using Claude 3.5 Sonnet since I suck at UI design */
 /* vars & default settings */
 :root {
   --bg-black: #131200;

assets/css/main.css

@@ -1,4 +1,3 @@
-/* CSS generated using Claude 3.5 Sonnet since I suck at UI design */
 /* hero */
 .hero-section {
   min-height: calc(100vh - 74px); /* Subtract navbar height */

assets/css/register.css

@@ -1,4 +1,3 @@
-/* CSS generated using Claude 3.5 Sonnet since I suck at UI design */
 /* register */
 .register-section {
   min-height: calc(100vh - 74px);

assets/css/sign-in.css

@@ -1,4 +1,3 @@
-/* CSS generated using Claude 3.5 Sonnet since I suck at UI design */
 /* sign-in */
 .sign-in-section {
   min-height: calc(100vh - 74px);

assets/css/user.css

@@ -1,163 +0,0 @@
-/* CSS generated using Claude 3.5 Sonnet since I suck at UI design */
-.main-section {
-  min-height: calc(100vh - 74px);
-  padding: 2rem;
-}
-
-.main-grid {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.left-grid,
-.right-grid {
-  background-color: rgba(100, 110, 120, 0.1);
-  backdrop-filter: blur(8px);
-  border-radius: 12px;
-  padding: 2rem;
-}
-
-.left-grid h2,
-.right-grid h2 {
-  color: var(--white);
-  font-size: 1.5rem;
-  margin: 0 0 1.5rem 0;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--gray);
-  text-align: center;
-}
-
-/* Nav logout button styling */
-.nav-logout {
-  background: none;
-  border: 1px solid var(--white);
-  color: var(--white);
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: all 0.2s ease;
-}
-
-.nav-logout:hover {
-  background-color: var(--white);
-  color: var(--bg-black);
-}
-
-/* User management section */
-.left-grid h4 {
-  color: var(--silver);
-  font-size: 1.1rem;
-  margin: 1.5rem 0 0.75rem 0;
-  font-weight: normal;
-}
-
-#change-email-btn,
-#change-password-btn,
-#change-username-btn {
-  width: 100%;
-  padding: 0.75rem;
-  background: none;
-  border: 1px solid var(--gray);
-  border-radius: 4px;
-  color: var(--white);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-#change-email-btn:hover,
-#change-password-btn:hover,
-#change-username-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  border-color: var(--white);
-  transform: translateY(-2px);
-}
-
-/* Modal styling */
-.email-modal {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  z-index: 1000;
-  align-items: center;
-  justify-content: center;
-}
-
-.email-modal.visible {
-  display: flex;
-}
-
-/* Task styling */
-.user-tasks {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.task-item {  /* Generic class for all task items */
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.user-tasks li {
-  list-style: none;
-  color: var(--white);
-  font-size: 1rem;
-}
-
-.user-tasks input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-  accent-color: var(--white);
-}
-
-.add-task-button {
-  width: 100%;
-  padding: 0.75rem;
-  background: none;
-  border: 1px solid var(--gray);
-  border-radius: 4px;
-  color: var(--white);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  margin-top: 1.5rem;
-}
-
-.add-task-button:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  border-color: var(--white);
-  transform: translateY(-2px);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .main-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .main-section {
-    padding: 1rem;
-  }
-
-  .left-grid,
-  .right-grid {
-    padding: 1.5rem;
-  }
-
-  .left-grid h4 {
-    font-size: 1rem;
-    margin: 1rem 0 0.5rem 0;
-  }
-}

assets/js/index.js

@@ -1,30 +0,0 @@
-const getCookie = (returnType) => {
-  let decodedCookie = decodeURIComponent(document.cookie);
-  if (decodedCookie == "") {
-    return;
-  }
-
-  let ca = decodedCookie.split(',');
-
-  const token = ca[0].split("token=")[1];
-  const type = ca[1].split("type=")[1];
-  const expiresDay = ca[2].split("expires=")[1];
-  const expiresDate = ca[3]
-  const expires = `${expiresDay}${expiresDate}`
-  
-  if (returnType == "token") {
-    return token;
-  } else if (returnType == "type") {
-    return type
-  } else if (returnType == "expires") {
-    return expires;
-  }
-
-  return null;
-}
-
-const token = getCookie("token");
-
-if (token != undefined) {
-  console.log("user token");
-}

assets/js/sign-in.js

@@ -110,7 +110,7 @@ const getCookie = (returnType) => {
   return null;
 }
 
-let token = getCookie("token");
+const token = getCookie("token");
 
 if (token != undefined) {
   window.location.href = '/';

assets/js/user.js

@@ -1,34 +0,0 @@
-// Check if the user is logged in
-const getCookie = (returnType) => {
-  let decodedCookie = decodeURIComponent(document.cookie);
-  if (decodedCookie == "") {
-    return;
-  }
-
-  let ca = decodedCookie.split(',');
-
-  const token = ca[0].split("token=")[1];
-  const type = ca[1].split("type=")[1];
-  const expiresDay = ca[2].split("expires=")[1];
-  const expiresDate = ca[3]
-  const expires = `${expiresDay}${expiresDate}`
-  
-  if (returnType == "token") {
-    return token;
-  } else if (returnType == "type") {
-    return type
-  } else if (returnType == "expires") {
-    return expires;
-  }
-
-  return null;
-}
-
-const token = getCookie("token");
-
-if (token == undefined) {
-  // no user
-  window.location.href = '/';
-}
-
-console.log('user token');

assets/pages/user.html

@@ -1,65 +1,40 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="/assets/css/defaults.css" />
+    <link rel="stylesheet" href="/assets/css/styles.css" />
-    <link rel="stylesheet" href="/assets/css/user.css" />
+    <title>Task Manager</title>
-    <title>Task Manager | User Page</title>
   </head>
   <body>
     <section class="nav-section">
       <nav class="nav">
         <a class="nav-home" href="/">Task</a>
-        <button id="nav-logout" class="nav-logout">Logout</a>
+        <a class="nav-signin signed-out" href="/sign-in.html">Sign In</a>
+        <a class="nav-register signed-out" href="/register.html">Register</a>
+        <a class="nav-user signed-in" href="/user.html">Profile</a>
       </nav>
     </section>
 
-    <section class="main-section">
+    <section class="hero-section">
-      <div class="main-grid">
+      <div class="main-screen">
-        <div class="left-grid">
+        <div class="center-screen">
-          <h2>User Management</h2>
+          <h1 class="hero-title">Welcome to your task manager!</h1>
-          <h4>Change Email?</h4>
+          <h4 class="hero-subtext">Keep yourself organized and stay productive.</h4>
-          <button id="change-email-btn">Click here</button>
-          <h4>Change Password?</h4>
-          <button id="change-password-btn">Click here</button>
-          <h4>Change Username?</h4>
-          <button id="change-username-btn">Click here</button>
-
-        </div>
-        <div class="right-grid">
-          <h2>User Tasks</h2>
-
-          <div class="user-tasks">
-            <div class="task-item">
-              <input type="checkbox" />
-              <li>Do Work</li>
-            </div>
-            <div class="task-item">
-              <input type="checkbox" />
-              <li>Finish API</li>
         </div>
 
-            <button id="add-task-button" class="add-task-button">Add a task</button>
+        <!-- If user is registered, show register/login & about. Else, give the user the option to their profile-->
+         <div class="hero-buttons">
+          <a class="signed-out hero-signin" href="/sign-in.html">Sign In</a>
+          <a class="signed-out hero-register" href="/register.html">Register</a>
+          <a class="signed-in hero-profile" href="user.html">Profile</a>
+          <a class="hero-about" href="#about">About us!</a>
          </div>
+
+        </div>
+          <div class="scroll-indicator">
+            <span class="scroll-text">Scroll to explore</span>
+          <div class="scroll-arrow"></div>
         </div>
       </div>
     </section>
-
-    <section class="email-modal">
-
-    </section>
-
-    <section class="password-modal">
-
-    </section>
-
-    <section class="username-modal">
-
-    </section>
-
-    <section class="add-task-modal">
-
-    </section>
-
-    <script src="/assets/js/user.js"></script>
   </body>
 </html>

index.html

@@ -37,7 +37,5 @@
         </div>
       </div>
     </section>
-
-    <script src="/assets/js/index.js"></script>
   </body>
 </html>