From 9fa0fdc9dc7d64837beaafef84309853e3a5b732 Mon Sep 17 00:00:00 2001 From: TropiiDev Date: Thu, 24 Apr 2025 23:48:02 -0400 Subject: [PATCH] Get started on the user page v.0.0.5 --- assets/css/defaults.css | 1 + assets/css/main.css | 1 + assets/css/register.css | 1 + assets/css/sign-in.css | 1 + assets/css/user.css | 163 ++++++++++++++++++++++++++++++++++++++++ assets/js/index.js | 30 ++++++++ assets/js/sign-in.js | 2 +- assets/js/user.js | 34 +++++++++ assets/pages/user.html | 69 +++++++++++------ index.html | 2 + 10 files changed, 281 insertions(+), 23 deletions(-) create mode 100644 assets/css/user.css create mode 100644 assets/js/index.js create mode 100644 assets/js/user.js diff --git a/assets/css/defaults.css b/assets/css/defaults.css index 8b1718f..ee5e89d 100644 --- a/assets/css/defaults.css +++ b/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; diff --git a/assets/css/main.css b/assets/css/main.css index b623307..440e6d1 100644 --- a/assets/css/main.css +++ b/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 */ diff --git a/assets/css/register.css b/assets/css/register.css index 388b35b..5017d5e 100644 --- a/assets/css/register.css +++ b/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); diff --git a/assets/css/sign-in.css b/assets/css/sign-in.css index 24aa9d5..8f6d23e 100644 --- a/assets/css/sign-in.css +++ b/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); diff --git a/assets/css/user.css b/assets/css/user.css new file mode 100644 index 0000000..032c25f --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/assets/js/index.js b/assets/js/index.js new file mode 100644 index 0000000..a5e9002 --- /dev/null +++ b/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"); +} \ No newline at end of file diff --git a/assets/js/sign-in.js b/assets/js/sign-in.js index 8857e81..2d21e93 100644 --- a/assets/js/sign-in.js +++ b/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 = '/'; diff --git a/assets/js/user.js b/assets/js/user.js new file mode 100644 index 0000000..8765a58 --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/assets/pages/user.html b/assets/pages/user.html index 7bd208f..f9b95f9 100644 --- a/assets/pages/user.html +++ b/assets/pages/user.html @@ -1,40 +1,65 @@ - - Task Manager + + + Task Manager | User Page
-
-
-
-

Welcome to your task manager!

-

Keep yourself organized and stay productive.

-
- - -
- - Register - Profile - About us! -
+
+
+
+

User Management

+

Change Email?

+ +

Change Password?

+ +

Change Username?

+
-
- Scroll to explore -
+
+

User Tasks

+ +
+
+ +
  • Do Work
    • +
    +
    + +
  • Finish API
    • +
    + + +
    + + + +
    + +
    + +
    + +
    + +
    + +
    + + \ No newline at end of file diff --git a/index.html b/index.html index d9c851b..7636b60 100644 --- a/index.html +++ b/index.html @@ -37,5 +37,7 @@
    + + \ No newline at end of file