Get started on the user page v.0.0.5

assets/css/defaults.css

@@ -1,3 +1,4 @@
+/* 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,3 +1,4 @@
+/* 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,3 +1,4 @@
+/* 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,3 +1,4 @@
+/* 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

@@ -0,0 +1,163 @@
+/* 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

@@ -0,0 +1,30 @@
+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;
 }
 
-const token = getCookie("token");
+let token = getCookie("token");
 
 if (token != undefined) {
   window.location.href = '/';

assets/js/user.js

@@ -0,0 +1,34 @@
+// 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,40 +1,65 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="/assets/css/styles.css" />
+    <link rel="stylesheet" href="/assets/css/defaults.css" />
-    <title>Task Manager</title>
+    <link rel="stylesheet" href="/assets/css/user.css" />
+    <title>Task Manager | User Page</title>
   </head>
   <body>
     <section class="nav-section">
       <nav class="nav">
         <a class="nav-home" href="/">Task</a>
-        <a class="nav-signin signed-out" href="/sign-in.html">Sign In</a>
+        <button id="nav-logout" class="nav-logout">Logout</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="hero-section">
+    <section class="main-section">
-      <div class="main-screen">
+      <div class="main-grid">
-        <div class="center-screen">
+        <div class="left-grid">
-          <h1 class="hero-title">Welcome to your task manager!</h1>
+          <h2>User Management</h2>
-          <h4 class="hero-subtext">Keep yourself organized and stay productive.</h4>
+          <h4>Change Email?</h4>
-        </div>
+          <button id="change-email-btn">Click here</button>
-
+          <h4>Change Password?</h4>
-        <!-- If user is registered, show register/login & about. Else, give the user the option to their profile-->
+          <button id="change-password-btn">Click here</button>
-         <div class="hero-buttons">
+          <h4>Change Username?</h4>
-          <a class="signed-out hero-signin" href="/sign-in.html">Sign In</a>
+          <button id="change-username-btn">Click here</button>
-          <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">
+        <div class="right-grid">
-            <span class="scroll-text">Scroll to explore</span>
+          <h2>User Tasks</h2>
-          <div class="scroll-arrow"></div>
+
+          <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>
+          </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,5 +37,7 @@
         </div>
       </div>
     </section>
+
+    <script src="/assets/js/index.js"></script>
   </body>
 </html>