Spaces:

Krydev32
/

tkquest-reflowed

Running

App Files Files Community

Krydev32 commited on Nov 14, 2025

Commit

865f3dd

verified ·

1 Parent(s): 18398fe

If something's missing why it's not showing anything in the preview, check this other code.

Browse files

<!DOCTYPE html>
<html lang="en" class="h-full" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TKQuest</title>

<script src="https://cdn.tailwindcss.com"></script>

<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
body {
font-family: 'Inter', sans-serif;
overflow: hidden; /* Prevent body scroll */
}

/* Ensure main area takes full viewport height and scrolls */
#main-app-view main {
height: 100vh; /* Full viewport height */
overflow-y: auto; /* Allow main area to scroll independently */
/* Add padding-left matching sidebar width */
padding-left: 16rem; /* Initial padding for w-64 sidebar */
transition: padding-left 0.3s ease-in-out; /* Smooth transition for padding */
width: 100%; /* Ensure main takes full width relative to its container */
}

/* Style for collapsed sidebar state - applied to body */
body.sidebar-collapsed #main-app-view main {
padding-left: 4rem; /* Padding for collapsed w-16 sidebar */
}
/* Keep sidebar fixed and full height */
#main-app-view aside {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 30; /* Ensure sidebar is above main content scrollbar but below modals */
}

/* Custom Theme Overrides */
:root[data-theme="light"] {
--p: #436bd9; /* royal-blue-600 */
--pc: #ffffff; /* text on primary buttons */
--s: #9ec2f2; /* royal-blue-300 */
--sc: #1d264e; /* text on secondary buttons */
--a: #70a1ea; /* royal-blue-400 */
--ac: #1d264e; /* text on accent buttons */
--n: #293b7f; /* royal-blue-900 */
--nc: #ffffff;
--b1: #ffffff; /* base-100 (white) */
--b2: #f1f5fd; /* royal-blue-50 (light bg) */
--b3: #dfeafa; /* royal-blue-100 (lighter bg) */
--bc: #000000; /* base-content (black text) */
--in: #70a1ea;
--su: #4ade80; /* Use DaisyUI success color */
--wa: #facc15;
--er: #f43f5e;

/* Custom class for blue text */
.text-primary-blue {
color: var(--p);
}
}

/* Custom style for active sidebar link */
#sidebar-menu li.active > a {
background-color: var(--b2); /* royal-blue-50 */
color: var(--p); /* royal-blue-600 */
}
#sidebar-menu li.active > a svg {
stroke: var(--p); /* royal-blue-600 */
}

/* Ensure dropdowns have high z-index */
.dropdown-content {
z-index: 50 !important;
background-color: var(--b1) !important; /* Force white background */
}

/* Custom class for content cards */
.content-card {
background-color: var(--b1);
border-radius: 0.5rem; /* 8px */
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
transition: all 0.2s ease-in-out;
}

/* Floating User Info Box */
#floating-user-info {
position: fixed;
top: 1.5rem; /* Adjust as needed */
right: 1.5rem; /* Adjust as needed */
z-index: 40; /* Below dropdowns, above most content */
}

/* Ensure modals scroll internally */
.modal-box {
max-height: 85vh;
overflow-y: auto;
}

/* --- Custom Progress Bar Styles --- */
.progress-bar-container {
width: 100%;
background-color: var(--b3); /* Light background for the track */
border-radius: 9999px; /* Fully rounded */
height: 1rem; /* 16px - slightly thicker */
overflow: hidden; /* Ensure fill stays inside */
position: relative; /* For potential future text overlay */
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Inner shadow for depth */
}

.progress-bar-fill {
background: linear-gradient(to right, #4ade80, #16a34a); /* Adjusted green gradient (using DaisyUI success) */
height: 100%;
border-radius: 9999px;
width: 0%; /* Start at 0 */
transition: width 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy animation */
/* Add subtle stripes for visual interest */
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, .15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .15) 50%,
rgba(255, 255, 255, .15) 75%,
transparent 75%,
transparent
);
background-size: 1rem 1rem; /* Stripe size */
}

/* Style for the temporary Dev button */
#dev-switch-role-btn {
/* Positioned relative to the header */
z-index: 100; /* Ensure it's clickable */
}

</style>
</head>
<body class="h-full bg-base-300"> 


<div id="app" class="min-h-full">


<div id="auth-view" class="hidden min-h-screen flex items-center justify-center p-4">
<div class="card w-full max-w-md bg-base-100 shadow-xl">
<div class="card-body">
<div role="tablist" class="tabs tabs-lifted tabs-lg">


<input type="radio" name="auth_tabs" role="tab" class="tab" aria-label="Login" checked />
<div role="tabpanel" class="tab-content bg-base-100 rounded-box p-6">
<h2 class="text-2xl font-bold mb-6 text-center text-primary-blue">Log In to TKQuest</h2>
<form id="login-form-element" class="space-y-4">
<div class="form-control">
<label class="label"><span class="label-text">Email</span></label>
<input type="email" id="login-email" required class="input input-bordered w-full">
</div>
<div class="form-control">
<label class="label"><span class="label-text">Password</span></label>
<input type="password" id="login-password" required class="input input-bordered w-full">
</div>
<p id="login-error" class="text-error text-sm hidden"></p>
<button type="submit" class="btn btn-primary w-full">Log In</button>
</form>
</div>


<input type="radio" name="auth_tabs" role="tab" class="tab" aria-label="Register" />
<div role="tabpanel" class="tab-content bg-base-100 rounded-box p-6">
<h2 class="text-2xl font-bold mb-6 text-center text-primary-blue">Create Student Account</h2>
<form id="register-form-element" class="space-y-4">
<div class="form-control">
<label class="label"><span class="label-text">Full Name</span></label>
<input type="text" id="register-name" required class="input input-bordered w-full">
</div>
<div class="form-control">
<label class="label"><span class="label-text">Email</span></label>
<input type="email" id="register-email" required class="input input-bordered w-full">
</div>
<div class="form-control">
<label class="label"><span class="label-text">Password (min. 6 characters)</span></label>
<input type="password" id="register-password" required minlength="6" class="input input-bordered w-full">
</div>

<input type="hidden" id="register-role" value="student">

<div class="form-control" id="belt-level-field">
<label class="label"><span class="label-text">Current Belt Level</span></label>
<select id="register-belt" class="select select-bordered w-full">
<option value="White" selected>White</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Brown">Brown</option>
</select>
</div>
<p id="register-error" class="text-error text-sm hidden"></p>
<button type="submit" class="btn btn-primary w-full">Register</button>
</form>
</div>

</div>
</div>
</div>
</div>


<div id="main-app-view" class="hidden h-scr

Files changed (4) hide show

components/footer.js +23 -0
components/navbar.js +43 -0
index.html +2 -2
script.js +4 -5

components/footer.js ADDED Viewed

	@@ -0,0 +1,23 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: #f1f5fd;
+          padding: 1rem;
+          text-align: center;
+          margin-top: 2rem;
+        }
+        p {
+          margin: 0;
+          color: #436bd9;
+        }
+      </style>
+      <footer>
+        <p>&copy; 2023 TKQuest. All rights reserved.</p>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,43 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background-color: #436bd9;
+          color: white;
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: bold;
+        }
+        ul {
+          display: flex;
+          list-style: none;
+          gap: 1rem;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+          padding: 0.5rem;
+          border-radius: 4px;
+        }
+        a:hover {
+          background-color: rgba(255,255,255,0.2);
+        }
+      </style>
+      <nav>
+        <div class="logo">TKQuest</div>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -514,9 +514,9 @@
         /* Firebase imports and initialization remain the same */
         /* ... */
     </script>
     <!-- Main Application Script -->
     <script src="script.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

         /* Firebase imports and initialization remain the same */
         /* ... */
     </script>
     <!-- Main Application Script -->
     <script src="script.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,14 +1,13 @@
-// Initialize Firebase (same config as before)
 const firebaseConfig = {
     apiKey: "AIzaSyDKL-6WhEMKBEeWepYlYEMf3QiHwFNgkSk",
     authDomain: "yonggi-students.firebaseapp.com",
     projectId: "yonggi-students",
-    storageBucket: "yonggi-students.firebasestorage.app",
     messagingSenderId: "140729683331",
-    appId: "1:140729683331:web:4c644c61c01eea78e2bab6",
-    measurementId: "G-91792F11MH"
 };
 // Initialize Firebase
 const app = firebase.initializeApp(firebaseConfig);
 const auth = firebase.auth();

+// Initialize Firebase
 const firebaseConfig = {
     apiKey: "AIzaSyDKL-6WhEMKBEeWepYlYEMf3QiHwFNgkSk",
     authDomain: "yonggi-students.firebaseapp.com",
     projectId: "yonggi-students",
+    storageBucket: "yonggi-students.appspot.com",
     messagingSenderId: "140729683331",
+    appId: "1:140729683331:web:4c644c61c01eea78e2bab6"
 };
 // Initialize Firebase
 const app = firebase.initializeApp(firebaseConfig);
 const auth = firebase.auth();