Upload 16 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/favicon.ico filter=lfs diff=lfs merge=lfs -text

css/main.css

@@ -0,0 +1,2158 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');
+
+*, ::before, ::after{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: Inter, sans-serif;
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: JetBrains Mono, monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+*{
+  border-color: rgba(148, 163, 184, 0.2);
+}
+
+body{
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
+  font-family: Inter, sans-serif;
+  --tw-text-opacity: 1;
+  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+h1, h2, h3, h4, h5, h6{
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+}
+
+p, span, div{
+  font-family: Inter, sans-serif;
+}
+
+/* Reduced motion preferences */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.card{
+  border-radius: 12px;
+  border-width: 1px;
+  border-color: rgba(148, 163, 184, 0.2);
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+  --tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition: all 150ms ease-out;
+}
+
+.card:hover{
+  --tw-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transform: translateY(-1px);
+}
+
+.btn{
+  border-radius: 8px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 500;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  min-height: 44px;
+  min-width: 44px;
+}
+
+.btn:hover {
+  transform: scale(0.98);
+}
+
+.btn-primary{
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.btn-primary:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
+}
+
+.btn-secondary{
+  --tw-bg-opacity: 1;
+  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.btn-secondary:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
+}
+
+.btn-accent{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.btn-accent:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.progress-bar{
+  overflow: hidden;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+
+.progress-fill{
+  height: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.pointer-events-none{
+  pointer-events: none;
+}
+
+.visible{
+  visibility: visible;
+}
+
+.static{
+  position: static;
+}
+
+.fixed{
+  position: fixed;
+}
+
+.absolute{
+  position: absolute;
+}
+
+.relative{
+  position: relative;
+}
+
+.sticky{
+  position: sticky;
+}
+
+.inset-0{
+  inset: 0px;
+}
+
+.inset-y-0{
+  top: 0px;
+  bottom: 0px;
+}
+
+.left-0{
+  left: 0px;
+}
+
+.right-0{
+  right: 0px;
+}
+
+.right-4{
+  right: 1rem;
+}
+
+.top-0{
+  top: 0px;
+}
+
+.top-4{
+  top: 1rem;
+}
+
+.top-6{
+  top: 1.5rem;
+}
+
+.z-30{
+  z-index: 30;
+}
+
+.z-40{
+  z-index: 40;
+}
+
+.z-50{
+  z-index: 50;
+}
+
+.mx-auto{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-1{
+  margin-bottom: 0.25rem;
+}
+
+.mb-2{
+  margin-bottom: 0.5rem;
+}
+
+.mb-3{
+  margin-bottom: 0.75rem;
+}
+
+.mb-4{
+  margin-bottom: 1rem;
+}
+
+.mb-6{
+  margin-bottom: 1.5rem;
+}
+
+.ml-1{
+  margin-left: 0.25rem;
+}
+
+.ml-2{
+  margin-left: 0.5rem;
+}
+
+.mr-1{
+  margin-right: 0.25rem;
+}
+
+.mr-2{
+  margin-right: 0.5rem;
+}
+
+.mr-3{
+  margin-right: 0.75rem;
+}
+
+.mr-4{
+  margin-right: 1rem;
+}
+
+.mt-1{
+  margin-top: 0.25rem;
+}
+
+.mt-2{
+  margin-top: 0.5rem;
+}
+
+.mt-4{
+  margin-top: 1rem;
+}
+
+.mt-6{
+  margin-top: 1.5rem;
+}
+
+.mt-8{
+  margin-top: 2rem;
+}
+
+.block{
+  display: block;
+}
+
+.inline-block{
+  display: inline-block;
+}
+
+.flex{
+  display: flex;
+}
+
+.inline-flex{
+  display: inline-flex;
+}
+
+.grid{
+  display: grid;
+}
+
+.hidden{
+  display: none;
+}
+
+.h-10{
+  height: 2.5rem;
+}
+
+.h-12{
+  height: 3rem;
+}
+
+.h-16{
+  height: 4rem;
+}
+
+.h-18{
+  height: 4.5rem;
+}
+
+.h-2{
+  height: 0.5rem;
+}
+
+.h-20{
+  height: 5rem;
+}
+
+.h-24{
+  height: 6rem;
+}
+
+.h-28{
+  height: 7rem;
+}
+
+.h-3{
+  height: 0.75rem;
+}
+
+.h-32{
+  height: 8rem;
+}
+
+.h-4{
+  height: 1rem;
+}
+
+.h-6{
+  height: 1.5rem;
+}
+
+.h-8{
+  height: 2rem;
+}
+
+.h-full{
+  height: 100%;
+}
+
+.max-h-60{
+  max-height: 15rem;
+}
+
+.max-h-96{
+  max-height: 24rem;
+}
+
+.min-h-screen{
+  min-height: 100vh;
+}
+
+.w-1\/3{
+  width: 33.333333%;
+}
+
+.w-10{
+  width: 2.5rem;
+}
+
+.w-11{
+  width: 2.75rem;
+}
+
+.w-12{
+  width: 3rem;
+}
+
+.w-16{
+  width: 4rem;
+}
+
+.w-20{
+  width: 5rem;
+}
+
+.w-32{
+  width: 8rem;
+}
+
+.w-4{
+  width: 1rem;
+}
+
+.w-6{
+  width: 1.5rem;
+}
+
+.w-72{
+  width: 18rem;
+}
+
+.w-8{
+  width: 2rem;
+}
+
+.w-80{
+  width: 20rem;
+}
+
+.w-full{
+  width: 100%;
+}
+
+.max-w-2xl{
+  max-width: 42rem;
+}
+
+.max-w-3xl{
+  max-width: 48rem;
+}
+
+.max-w-4xl{
+  max-width: 56rem;
+}
+
+.max-w-md{
+  max-width: 28rem;
+}
+
+.flex-1{
+  flex: 1 1 0%;
+}
+
+.flex-shrink-0{
+  flex-shrink: 0;
+}
+
+.-translate-x-full{
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-1{
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-6{
+  --tw-translate-x: 1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-90{
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-180{
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform{
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes scaleIn{
+  0%{
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  100%{
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-scale-in{
+  animation: scaleIn 150ms ease-out;
+}
+
+.cursor-not-allowed{
+  cursor: not-allowed;
+}
+
+.cursor-pointer{
+  cursor: pointer;
+}
+
+.appearance-none{
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.grid-cols-1{
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2{
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3{
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flex-col{
+  flex-direction: column;
+}
+
+.items-start{
+  align-items: flex-start;
+}
+
+.items-end{
+  align-items: flex-end;
+}
+
+.items-center{
+  align-items: center;
+}
+
+.justify-center{
+  justify-content: center;
+}
+
+.justify-between{
+  justify-content: space-between;
+}
+
+.gap-3{
+  gap: 0.75rem;
+}
+
+.gap-4{
+  gap: 1rem;
+}
+
+.gap-6{
+  gap: 1.5rem;
+}
+
+.space-x-1 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.overflow-x-auto{
+  overflow-x: auto;
+}
+
+.overflow-y-auto{
+  overflow-y: auto;
+}
+
+.rounded{
+  border-radius: 0.25rem;
+}
+
+.rounded-full{
+  border-radius: 9999px;
+}
+
+.rounded-lg{
+  border-radius: 12px;
+}
+
+.rounded-xl{
+  border-radius: 16px;
+}
+
+.rounded-t{
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.border{
+  border-width: 1px;
+}
+
+.border-2{
+  border-width: 2px;
+}
+
+.border-b{
+  border-bottom-width: 1px;
+}
+
+.border-l-4{
+  border-left-width: 4px;
+}
+
+.border-r{
+  border-right-width: 1px;
+}
+
+.border-t{
+  border-top-width: 1px;
+}
+
+.border-accent{
+  --tw-border-opacity: 1;
+  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
+}
+
+.border-border{
+  border-color: rgba(148, 163, 184, 0.2);
+}
+
+.border-error{
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+
+.border-error-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
+}
+
+.border-primary{
+  --tw-border-opacity: 1;
+  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
+}
+
+.border-primary-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
+}
+
+.border-secondary{
+  --tw-border-opacity: 1;
+  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
+}
+
+.border-success-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
+}
+
+.border-transparent{
+  border-color: transparent;
+}
+
+.border-warning{
+  --tw-border-opacity: 1;
+  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
+}
+
+.border-warning-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
+}
+
+.border-white{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
+
+.bg-accent{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
+}
+
+.bg-accent-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
+}
+
+.bg-accent-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+
+.bg-background{
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
+}
+
+.bg-black{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-600{
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-800{
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
+}
+
+.bg-error{
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
+.bg-error-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
+.bg-error-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-300{
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-600{
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-600{
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
+.bg-primary{
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
+}
+
+.bg-primary-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-primary-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-secondary{
+  --tw-bg-opacity: 1;
+  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
+}
+
+.bg-secondary-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
+}
+
+.bg-secondary-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-success{
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
+}
+
+.bg-success-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
+}
+
+.bg-success-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
+}
+
+.bg-surface{
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+
+.bg-warning{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
+}
+
+.bg-warning-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
+}
+
+.bg-warning-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+
+.bg-white{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.bg-opacity-50{
+  --tw-bg-opacity: 0.5;
+}
+
+.bg-gradient-to-br{
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-r{
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-accent-50{
+  --tw-gradient-from: #FFFBEB var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-primary{
+  --tw-gradient-from: #4F46E5 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-primary-50{
+  --tw-gradient-from: #EEF2FF var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-secondary{
+  --tw-gradient-to: #06B6D4 var(--tw-gradient-to-position);
+}
+
+.to-secondary-50{
+  --tw-gradient-to: #ECFEFF var(--tw-gradient-to-position);
+}
+
+.to-warning-50{
+  --tw-gradient-to: #FFFBEB var(--tw-gradient-to-position);
+}
+
+.object-cover{
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.p-3{
+  padding: 0.75rem;
+}
+
+.p-4{
+  padding: 1rem;
+}
+
+.p-6{
+  padding: 1.5rem;
+}
+
+.p-8{
+  padding: 2rem;
+}
+
+.px-2{
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3{
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4{
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6{
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-8{
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-1{
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-2{
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3{
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-4{
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.pb-4{
+  padding-bottom: 1rem;
+}
+
+.pl-12{
+  padding-left: 3rem;
+}
+
+.pl-4{
+  padding-left: 1rem;
+}
+
+.pr-4{
+  padding-right: 1rem;
+}
+
+.pt-16{
+  padding-top: 4rem;
+}
+
+.pt-4{
+  padding-top: 1rem;
+}
+
+.text-left{
+  text-align: left;
+}
+
+.text-center{
+  text-align: center;
+}
+
+.text-2xl{
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl{
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-4xl{
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-lg{
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm{
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl{
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs{
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold{
+  font-weight: 700;
+}
+
+.font-medium{
+  font-weight: 500;
+}
+
+.font-semibold{
+  font-weight: 600;
+}
+
+.leading-relaxed{
+  line-height: 1.625;
+}
+
+.text-accent{
+  --tw-text-opacity: 1;
+  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
+}
+
+.text-accent-100{
+  --tw-text-opacity: 1;
+  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
+}
+
+.text-border{
+  color: rgba(148, 163, 184, 0.2);
+}
+
+.text-error{
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-700{
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
+.text-primary{
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
+}
+
+.text-secondary{
+  --tw-text-opacity: 1;
+  color: rgb(6 182 212 / var(--tw-text-opacity, 1));
+}
+
+.text-success{
+  --tw-text-opacity: 1;
+  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
+}
+
+.text-success-700{
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
+}
+
+.text-text-primary{
+  --tw-text-opacity: 1;
+  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+}
+
+.text-text-secondary{
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+}
+
+.text-warning{
+  --tw-text-opacity: 1;
+  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
+}
+
+.text-white{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.placeholder-text-secondary::-moz-placeholder{
+  --tw-placeholder-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
+}
+
+.placeholder-text-secondary::placeholder{
+  --tw-placeholder-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
+}
+
+.opacity-20{
+  opacity: 0.2;
+}
+
+.opacity-50{
+  opacity: 0.5;
+}
+
+.opacity-90{
+  opacity: 0.9;
+}
+
+.shadow-lg{
+  --tw-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 10px 15px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md{
+  --tw-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ring{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.filter{
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all{
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform{
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-1000{
+  transition-duration: 1000ms;
+}
+
+.duration-200{
+  transition-duration: 200ms;
+}
+
+.duration-300{
+  transition-duration: 300ms;
+}
+
+.transition-theme{
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), 
+                color 300ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:root {
+  /* Primary Colors */
+  --color-primary: #4F46E5;
+  /* indigo-600 */
+  --color-primary-50: #EEF2FF;
+  /* indigo-50 */
+  --color-primary-100: #E0E7FF;
+  /* indigo-100 */
+  --color-primary-500: #6366F1;
+  /* indigo-500 */
+  --color-primary-600: #4F46E5;
+  /* indigo-600 */
+  --color-primary-700: #4338CA;
+  /* indigo-700 */
+  --color-primary-900: #312E81;
+  /* indigo-900 */
+  /* Secondary Colors */
+  --color-secondary: #06B6D4;
+  /* cyan-500 */
+  --color-secondary-50: #ECFEFF;
+  /* cyan-50 */
+  --color-secondary-100: #CFFAFE;
+  /* cyan-100 */
+  --color-secondary-400: #22D3EE;
+  /* cyan-400 */
+  --color-secondary-500: #06B6D4;
+  /* cyan-500 */
+  --color-secondary-600: #0891B2;
+  /* cyan-600 */
+  --color-secondary-700: #0E7490;
+  /* cyan-700 */
+  /* Accent Colors */
+  --color-accent: #F59E0B;
+  /* amber-500 */
+  --color-accent-50: #FFFBEB;
+  /* amber-50 */
+  --color-accent-100: #FEF3C7;
+  /* amber-100 */
+  --color-accent-400: #FBBF24;
+  /* amber-400 */
+  --color-accent-500: #F59E0B;
+  /* amber-500 */
+  --color-accent-600: #D97706;
+  /* amber-600 */
+  --color-accent-700: #B45309;
+  /* amber-700 */
+  /* Background Colors */
+  --color-background: #0F172A;
+  /* slate-900 */
+  --color-background-light: #F8FAFC;
+  /* slate-50 */
+  --color-surface: #1E293B;
+  /* slate-800 */
+  --color-surface-light: #FFFFFF;
+  /* white */
+  --color-surface-hover: #334155;
+  /* slate-700 */
+  /* Text Colors */
+  --color-text-primary: #F8FAFC;
+  /* slate-50 */
+  --color-text-primary-light: #0F172A;
+  /* slate-900 */
+  --color-text-secondary: #94A3B8;
+  /* slate-400 */
+  --color-text-secondary-light: #64748B;
+  /* slate-500 */
+  --color-text-muted: #64748B;
+  /* slate-500 */
+  --color-text-muted-light: #94A3B8;
+  /* slate-400 */
+  /* Status Colors */
+  --color-success: #10B981;
+  /* emerald-500 */
+  --color-success-50: #ECFDF5;
+  /* emerald-50 */
+  --color-success-100: #D1FAE5;
+  /* emerald-100 */
+  --color-success-600: #059669;
+  /* emerald-600 */
+  --color-success-700: #047857;
+  /* emerald-700 */
+  --color-warning: #F59E0B;
+  /* amber-500 */
+  --color-warning-50: #FFFBEB;
+  /* amber-50 */
+  --color-warning-100: #FEF3C7;
+  /* amber-100 */
+  --color-warning-600: #D97706;
+  /* amber-600 */
+  --color-error: #EF4444;
+  /* red-500 */
+  --color-error-50: #FEF2F2;
+  /* red-50 */
+  --color-error-100: #FEE2E2;
+  /* red-100 */
+  --color-error-600: #DC2626;
+  /* red-600 */
+  --color-error-700: #B91C1C;
+  /* red-700 */
+  /* Border Colors */
+  --color-border: rgba(148, 163, 184, 0.2);
+  /* slate-400 with opacity */
+  --color-border-light: rgba(148, 163, 184, 0.3);
+  /* slate-400 with opacity */
+  /* Shadow Colors */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Light theme overrides */
+
+.light {
+  --color-background: #F8FAFC;
+  /* slate-50 */
+  --color-surface: #FFFFFF;
+  /* white */
+  --color-surface-hover: #F1F5F9;
+  /* slate-100 */
+  --color-text-primary: #0F172A;
+  /* slate-900 */
+  --color-text-secondary: #64748B;
+  /* slate-500 */
+  --color-text-muted: #94A3B8;
+  /* slate-400 */
+  --color-border: rgba(148, 163, 184, 0.3);
+  /* slate-400 with opacity */
+}
+
+/* Base styles */
+
+/* Component styles */
+
+/* Utility classes */
+
+.last\:border-b-0:last-child{
+  border-bottom-width: 0px;
+}
+
+.hover\:scale-105:hover{
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:border-accent:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
+}
+
+.hover\:border-error:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+
+.hover\:border-primary:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
+}
+
+.hover\:border-secondary:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
+}
+
+.hover\:border-success:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
+}
+
+.hover\:border-white:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
+
+.hover\:bg-accent-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-700:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-900:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-error:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-error-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-400:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-green-700:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-primary-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-secondary-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-surface-hover:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-warning-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-warning-600:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:text-accent-600:hover{
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-error:hover{
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-primary:hover{
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-primary-600:hover{
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-primary-700:hover{
+  --tw-text-opacity: 1;
+  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-secondary-600:hover{
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-success-600:hover{
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-text-primary:hover{
+  --tw-text-opacity: 1;
+  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+}
+
+.hover\:shadow-lg:hover{
+  --tw-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 10px 15px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-xl:hover{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus\:border-transparent:focus{
+  border-color: transparent;
+}
+
+.focus\:outline-none:focus{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-primary:focus{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
+}
+
+@media (min-width: 640px){
+  .sm\:block{
+    display: block;
+  }
+
+  .sm\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sm\:flex-row{
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 768px){
+  .md\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-3{
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px){
+  .lg\:z-auto{
+    z-index: auto;
+  }
+
+  .lg\:ml-80{
+    margin-left: 20rem;
+  }
+
+  .lg\:flex{
+    display: flex;
+  }
+
+  .lg\:hidden{
+    display: none;
+  }
+
+  .lg\:flex-none{
+    flex: none;
+  }
+
+  .lg\:-translate-x-full{
+    --tw-translate-x: -100%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
+  .lg\:translate-x-0{
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
+  .lg\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-3{
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:p-4{
+    padding: 1rem;
+  }
+
+  .lg\:p-6{
+    padding: 1.5rem;
+  }
+
+  .lg\:p-8{
+    padding: 2rem;
+  }
+
+  .lg\:pt-20{
+    padding-top: 5rem;
+  }
+
+  .lg\:text-2xl{
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .lg\:text-xl{
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}

css/tailwind.css

@@ -0,0 +1,205 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Primary Colors */
+  --color-primary: #4F46E5; /* indigo-600 */
+  --color-primary-50: #EEF2FF; /* indigo-50 */
+  --color-primary-100: #E0E7FF; /* indigo-100 */
+  --color-primary-500: #6366F1; /* indigo-500 */
+  --color-primary-600: #4F46E5; /* indigo-600 */
+  --color-primary-700: #4338CA; /* indigo-700 */
+  --color-primary-900: #312E81; /* indigo-900 */
+
+  /* Secondary Colors */
+  --color-secondary: #06B6D4; /* cyan-500 */
+  --color-secondary-50: #ECFEFF; /* cyan-50 */
+  --color-secondary-100: #CFFAFE; /* cyan-100 */
+  --color-secondary-400: #22D3EE; /* cyan-400 */
+  --color-secondary-500: #06B6D4; /* cyan-500 */
+  --color-secondary-600: #0891B2; /* cyan-600 */
+  --color-secondary-700: #0E7490; /* cyan-700 */
+
+  /* Accent Colors */
+  --color-accent: #F59E0B; /* amber-500 */
+  --color-accent-50: #FFFBEB; /* amber-50 */
+  --color-accent-100: #FEF3C7; /* amber-100 */
+  --color-accent-400: #FBBF24; /* amber-400 */
+  --color-accent-500: #F59E0B; /* amber-500 */
+  --color-accent-600: #D97706; /* amber-600 */
+  --color-accent-700: #B45309; /* amber-700 */
+
+  /* Background Colors */
+  --color-background: #0F172A; /* slate-900 */
+  --color-background-light: #F8FAFC; /* slate-50 */
+  --color-surface: #1E293B; /* slate-800 */
+  --color-surface-light: #FFFFFF; /* white */
+  --color-surface-hover: #334155; /* slate-700 */
+
+  /* Text Colors */
+  --color-text-primary: #F8FAFC; /* slate-50 */
+  --color-text-primary-light: #0F172A; /* slate-900 */
+  --color-text-secondary: #94A3B8; /* slate-400 */
+  --color-text-secondary-light: #64748B; /* slate-500 */
+  --color-text-muted: #64748B; /* slate-500 */
+  --color-text-muted-light: #94A3B8; /* slate-400 */
+
+  /* Status Colors */
+  --color-success: #10B981; /* emerald-500 */
+  --color-success-50: #ECFDF5; /* emerald-50 */
+  --color-success-100: #D1FAE5; /* emerald-100 */
+  --color-success-600: #059669; /* emerald-600 */
+  --color-success-700: #047857; /* emerald-700 */
+
+  --color-warning: #F59E0B; /* amber-500 */
+  --color-warning-50: #FFFBEB; /* amber-50 */
+  --color-warning-100: #FEF3C7; /* amber-100 */
+  --color-warning-600: #D97706; /* amber-600 */
+
+  --color-error: #EF4444; /* red-500 */
+  --color-error-50: #FEF2F2; /* red-50 */
+  --color-error-100: #FEE2E2; /* red-100 */
+  --color-error-600: #DC2626; /* red-600 */
+  --color-error-700: #B91C1C; /* red-700 */
+
+  /* Border Colors */
+  --color-border: rgba(148, 163, 184, 0.2); /* slate-400 with opacity */
+  --color-border-light: rgba(148, 163, 184, 0.3); /* slate-400 with opacity */
+
+  /* Shadow Colors */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Light theme overrides */
+.light {
+  --color-background: #F8FAFC; /* slate-50 */
+  --color-surface: #FFFFFF; /* white */
+  --color-surface-hover: #F1F5F9; /* slate-100 */
+  --color-text-primary: #0F172A; /* slate-900 */
+  --color-text-secondary: #64748B; /* slate-500 */
+  --color-text-muted: #94A3B8; /* slate-400 */
+  --color-border: rgba(148, 163, 184, 0.3); /* slate-400 with opacity */
+}
+
+/* Base styles */
+@layer base {
+  * {
+    @apply border-border;
+  }
+  
+  body {
+    @apply bg-background text-text-primary font-sans;
+    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-inter font-semibold;
+  }
+
+  p, span, div {
+    @apply font-inter;
+  }
+
+  /* Reduced motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* Component styles */
+@layer components {
+  .card {
+    @apply bg-surface border border-border rounded-lg shadow-sm;
+    transition: all 150ms ease-out;
+  }
+
+  .card:hover {
+    @apply shadow-md;
+    transform: translateY(-1px);
+  }
+
+  .btn {
+    @apply px-4 py-2 rounded-md font-medium transition-all duration-150 ease-out;
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  .btn:hover {
+    transform: scale(0.98);
+  }
+
+  .btn-primary {
+    @apply bg-primary text-white hover:bg-primary-700;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-white hover:bg-secondary-600;
+  }
+
+  .btn-accent {
+    @apply bg-accent text-white hover:bg-accent-600;
+  }
+
+  .toast {
+    @apply bg-surface border border-border rounded-lg shadow-lg p-4;
+    animation: slideIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .skeleton {
+    @apply bg-surface animate-pulse rounded;
+  }
+
+  .progress-bar {
+    @apply bg-surface rounded-full overflow-hidden;
+  }
+
+  .progress-fill {
+    @apply bg-primary h-full transition-all duration-300 ease-out;
+  }
+}
+
+/* Utility classes */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .transition-theme {
+    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), 
+                color 300ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .micro-interaction {
+    transition: all 150ms ease-out;
+  }
+
+  .micro-interaction:hover {
+    transform: scale(0.98);
+  }
+
+  .touch-target {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}

index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quiz App - Redirecting...</title>
+    <link rel="stylesheet" href="css/main.css" />
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .loading-container {
+            text-align: center;
+        }
+        .spinner {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 4px solid white;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        h1 {
+            margin: 0;
+            font-size: 24px;
+        }
+        p {
+            margin: 10px 0 0;
+            opacity: 0.8;
+        }
+    </style>
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body>
+    <div class="loading-container">
+        <div class="spinner"></div>
+        <h1>Quiz App</h1>
+        <p>Loading your dashboard...</p>
+    </div>
+
+    <script>
+        // Redirect to quiz dashboard after a brief loading animation
+        setTimeout(function() {
+            window.location.href = 'pages/quiz_dashboard.html';
+        }, 1500);
+    </script>
+</body>
+</html>

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "triviaverse_quiz",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "dependencies": {
+    "@dhiwise/component-tagger": "^1.0.9",
+    "@tailwindcss/forms": "^0.5.7",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-elevation": "^2.0.0",
+    "tailwindcss-fluid-type": "^2.0.7"
+  },
+  "scripts": {
+    "build:css": "npx @dhiwise/component-tagger && npx tailwindcss -i ./css/tailwind.css -o ./css/main.css",
+    "watch:css": "npx @dhiwise/component-tagger && npx tailwindcss -i ./css/tailwind.css -o ./css/main.css --watch",
+    "dev": "npm run watch:css"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "tailwindcss": "^3.4.17",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/line-clamp": "^0.1.0",
+    "@tailwindcss/typography": "^0.5.16"
+  }
+}

pages/active_quiz_interface.html

@@ -0,0 +1,544 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Active Quiz - TriviaVerse Quiz</title>
+    <link rel="stylesheet" href="../css/main.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body class="bg-background text-text-primary transition-theme">
+    <!-- Mobile Menu Overlay -->
+    <div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"></div>
+    
+    <!-- Minimized Header for Quiz Mode -->
+    <header class="bg-surface border-b border-border p-3 lg:p-4 fixed top-0 left-0 right-0 z-30">
+        <div class="flex items-center justify-between">
+            <!-- Mobile Menu & Logo -->
+            <div class="flex items-center space-x-3">
+                <button id="mobileMenuBtn" class="lg:hidden text-text-primary hover:text-primary">
+                    <i class="fas fa-bars text-lg"></i>
+                </button>
+                <div class="flex items-center space-x-2">
+                    <div class="w-8 h-8 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                        <i class="fas fa-brain text-white text-sm"></i>
+                    </div>
+                    <span class="text-lg font-bold text-text-primary hidden sm:block">TriviaVerse</span>
+                </div>
+            </div>
+            
+            <!-- Quiz Progress & Score -->
+            <div class="flex items-center space-x-4">
+                <!-- Current Score -->
+                <div class="text-center">
+                    <p class="text-xs text-text-secondary">Score</p>
+                    <p id="currentScore" class="text-lg font-bold text-primary">0</p>
+                </div>
+                
+                <!-- Current Streak -->
+                <div class="text-center">
+                    <p class="text-xs text-text-secondary">Streak</p>
+                    <p id="currentStreak" class="text-lg font-bold text-accent">0</p>
+                </div>
+                
+                <!-- Exit Quiz -->
+                <button id="exitQuizBtn" class="text-text-secondary hover:text-error transition-colors">
+                    <i class="fas fa-times text-lg"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    
+    <!-- Sidebar (Hidden in Quiz Mode, Accessible via Menu) -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-full w-80 bg-surface border-r border-border transform -translate-x-full lg:-translate-x-full transition-transform duration-300 z-50">
+        <div class="p-6 border-b border-border">
+            <!-- Logo -->
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                    <i class="fas fa-brain text-white text-lg"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-text-primary">TriviaVerse</h1>
+                    <p class="text-sm text-text-secondary">Quiz Platform</p>
+                </div>
+            </div>
+            
+            <!-- Close button for mobile -->
+            <button id="closeSidebar" class="absolute top-4 right-4 text-text-secondary hover:text-text-primary">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Navigation -->
+        <nav class="p-6 space-y-2">
+            <a href="quiz_dashboard.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="active_quiz_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary text-white">
+                <i class="fas fa-play-circle"></i>
+                <span>Active Quiz</span>
+            </a>
+            <a href="quiz_results_statistics.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-chart-bar"></i>
+                <span>Statistics</span>
+            </a>
+            <a href="topic_selection_browse.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-book"></i>
+                <span>Browse Topics</span>
+            </a>
+            <a href="settings_preferences.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+        </nav>
+    </aside>
+    
+    <!-- Main Quiz Content -->
+    <main class="pt-16 lg:pt-20 min-h-screen">
+        <div class="max-w-4xl mx-auto p-4 lg:p-6">
+            <!-- Quiz Progress Bar -->
+            <div class="mb-6">
+                <div class="flex items-center justify-between mb-2">
+                    <span class="text-sm text-text-secondary">Question <span id="currentQuestion">1</span> of <span id="totalQuestions">10</span></span>
+                    <span class="text-sm text-text-secondary">Topic: <span id="currentTopic" class="text-primary font-medium">Python Programming</span></span>
+                </div>
+                <div class="progress-bar h-3">
+                    <div id="quizProgress" class="progress-fill" style="width: 10%"></div>
+                </div>
+            </div>
+            
+            <!-- Timer Section -->
+            <div class="card p-4 mb-6 bg-gradient-to-r from-accent-50 to-warning-50 border-accent-200">
+                <div class="flex items-center justify-center space-x-4">
+                    <div class="w-12 h-12 bg-accent rounded-full flex items-center justify-center">
+                        <i class="fas fa-clock text-white text-lg"></i>
+                    </div>
+                    <div class="text-center">
+                        <p class="text-sm text-text-secondary mb-1">Time Remaining</p>
+                        <div class="flex items-center space-x-1">
+                            <span id="timerMinutes" class="text-2xl font-bold text-accent">01</span>
+                            <span class="text-2xl font-bold text-accent">:</span>
+                            <span id="timerSeconds" class="text-2xl font-bold text-accent">30</span>
+                        </div>
+                    </div>
+                    <div class="w-16 h-16 relative">
+                        <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
+                            <circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="4" fill="none" class="text-accent-100"/>
+                            <circle id="timerCircle" cx="32" cy="32" r="28" stroke="currentColor" stroke-width="4" fill="none" class="text-accent transition-all duration-1000" stroke-dasharray="175.93" stroke-dashoffset="0"/>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Question Display Area -->
+            <div class="card p-6 lg:p-8 mb-6">
+                <div class="text-center mb-6">
+                    <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-question text-primary text-2xl"></i>
+                    </div>
+                    <h2 class="text-xl lg:text-2xl font-semibold text-text-primary mb-2">Question</h2>
+                </div>
+                
+                <div class="max-w-3xl mx-auto">
+                    <p id="questionText" class="text-lg lg:text-xl text-text-primary text-center leading-relaxed mb-6">
+                        Which of the following is the correct way to create a list in Python?
+                    </p>
+                    
+                    <!-- Question Image (if applicable) -->
+                    <div id="questionImage" class="hidden mb-6">
+                        <img src alt="Question illustration" class="w-full max-w-md mx-auto rounded-lg shadow-md" />
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Answer Options -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
+                <button class="answer-option card p-4 lg:p-6 text-left hover:border-primary hover:bg-primary-50 transition-all duration-200 transform hover:scale-105" data-answer="A">
+                    <div class="flex items-center space-x-4">
+                        <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
+                            <span class="text-primary font-bold">A</span>
+                        </div>
+                        <p class="text-text-primary font-medium">list = [1, 2, 3, 4]</p>
+                    </div>
+                </button>
+                
+                <button class="answer-option card p-4 lg:p-6 text-left hover:border-secondary hover:bg-secondary-50 transition-all duration-200 transform hover:scale-105" data-answer="B">
+                    <div class="flex items-center space-x-4">
+                        <div class="w-10 h-10 bg-secondary-100 rounded-full flex items-center justify-center flex-shrink-0">
+                            <span class="text-secondary font-bold">B</span>
+                        </div>
+                        <p class="text-text-primary font-medium">list = (1, 2, 3, 4)</p>
+                    </div>
+                </button>
+                
+                <button class="answer-option card p-4 lg:p-6 text-left hover:border-accent hover:bg-accent-50 transition-all duration-200 transform hover:scale-105" data-answer="C">
+                    <div class="flex items-center space-x-4">
+                        <div class="w-10 h-10 bg-accent-100 rounded-full flex items-center justify-center flex-shrink-0">
+                            <span class="text-accent font-bold">C</span>
+                        </div>
+                        <p class="text-text-primary font-medium">list = {1, 2, 3, 4}</p>
+                    </div>
+                </button>
+                
+                <button class="answer-option card p-4 lg:p-6 text-left hover:border-error hover:bg-error-50 transition-all duration-200 transform hover:scale-105" data-answer="D">
+                    <div class="flex items-center space-x-4">
+                        <div class="w-10 h-10 bg-error-100 rounded-full flex items-center justify-center flex-shrink-0">
+                            <span class="text-error font-bold">D</span>
+                        </div>
+                        <p class="text-text-primary font-medium">list = "1, 2, 3, 4"</p>
+                    </div>
+                </button>
+            </div>
+            
+            <!-- Hints Section -->
+            <div class="card p-4 mb-6" id="hintsSection">
+                <button id="hintsToggle" class="flex items-center justify-between w-full text-left">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-8 h-8 bg-warning-100 rounded-full flex items-center justify-center">
+                            <i class="fas fa-lightbulb text-warning text-sm"></i>
+                        </div>
+                        <span class="text-text-primary font-medium">Need a hint?</span>
+                        <span class="text-xs bg-warning-100 text-warning px-2 py-1 rounded-full">Available: 3</span>
+                    </div>
+                    <i class="fas fa-chevron-down text-text-secondary transition-transform duration-200" id="hintsChevron"></i>
+                </button>
+                
+                <div id="hintsContent" class="hidden mt-4 pt-4 border-t border-border">
+                    <div class="space-y-3">
+                        <div class="p-3 bg-warning-50 rounded-lg border border-warning-200">
+                            <p class="text-sm text-text-primary">💡 <strong>Hint 1:</strong> Think about the syntax used for creating collections in Python.</p>
+                        </div>
+                        <div class="p-3 bg-info-50 rounded-lg border border-info-200 opacity-50">
+                            <p class="text-sm text-text-secondary">🔒 <strong>Hint 2:</strong> Unlock by using Hint 1</p>
+                        </div>
+                        <div class="p-3 bg-success-50 rounded-lg border border-success-200 opacity-50">
+                            <p class="text-sm text-text-secondary">🔒 <strong>Hint 3:</strong> Unlock by using Hint 2</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Action Buttons -->
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button id="generateQuestionBtn" class="btn btn-secondary px-6 py-3 text-lg">
+                    <i class="fas fa-sync-alt mr-2"></i>
+                    Generate New Question
+                </button>
+                
+                <button id="nextQuestionBtn" class="btn btn-primary px-8 py-3 text-lg" disabled>
+                    <i class="fas fa-arrow-right mr-2"></i>
+                    Next Question
+                </button>
+            </div>
+            
+            <!-- Answer Feedback Modal -->
+            <div id="feedbackModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
+                <div class="card max-w-md w-full p-6 animate-scale-in">
+                    <div class="text-center">
+                        <div id="feedbackIcon" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center">
+                            <i class="text-2xl"></i>
+                        </div>
+                        <h3 id="feedbackTitle" class="text-xl font-bold mb-2"></h3>
+                        <p id="feedbackMessage" class="text-text-secondary mb-4"></p>
+                        <div id="correctAnswer" class="hidden p-3 bg-success-50 rounded-lg border border-success-200 mb-4">
+                            <p class="text-sm text-success-700"><strong>Correct Answer:</strong> <span id="correctAnswerText"></span></p>
+                        </div>
+                        <button id="continueFeedback" class="btn btn-primary w-full">Continue</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <script>
+        // Quiz state management
+        let quizState = {
+            currentQuestion: 1,
+            totalQuestions: 10,
+            score: 0,
+            streak: 0,
+            timeRemaining: 90, // seconds
+            selectedAnswer: null,
+            correctAnswer: 'A',
+            hintsUsed: 0,
+            maxHints: 3,
+            topic: 'Python Programming'
+        };
+        
+        // Timer functionality
+        let timerInterval;
+        
+        function startTimer() {
+            timerInterval = setInterval(() => {
+                quizState.timeRemaining--;
+                updateTimerDisplay();
+                
+                if (quizState.timeRemaining <= 0) {
+                    clearInterval(timerInterval);
+                    handleTimeUp();
+                }
+            }, 1000);
+        }
+        
+        function updateTimerDisplay() {
+            const minutes = Math.floor(quizState.timeRemaining / 60);
+            const seconds = quizState.timeRemaining % 60;
+            
+            document.getElementById('timerMinutes').textContent = minutes.toString().padStart(2, '0');
+            document.getElementById('timerSeconds').textContent = seconds.toString().padStart(2, '0');
+            
+            // Update circular progress
+            const totalTime = 90; // Initial time
+            const progress = (quizState.timeRemaining / totalTime) * 175.93;
+            document.getElementById('timerCircle').style.strokeDashoffset = 175.93 - progress;
+            
+            // Change color based on time remaining
+            const timerCircle = document.getElementById('timerCircle');
+            if (quizState.timeRemaining <= 10) {
+                timerCircle.classList.remove('text-accent');
+                timerCircle.classList.add('text-error');
+            } else if (quizState.timeRemaining <= 30) {
+                timerCircle.classList.remove('text-accent');
+                timerCircle.classList.add('text-warning');
+            }
+        }
+        
+        function handleTimeUp() {
+            showFeedback(false, 'Time\'s up!', 'Don\'t worry, keep practicing to improve your speed.');
+        }
+        
+        // Mobile menu functionality
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.getElementById('sidebar');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+        const closeSidebar = document.getElementById('closeSidebar');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+        });
+        
+        closeSidebar.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        mobileMenuOverlay.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        // Answer selection functionality
+        document.querySelectorAll('.answer-option').forEach(button => {
+            button.addEventListener('click', (e) => {
+                // Remove previous selections
+                document.querySelectorAll('.answer-option').forEach(btn => {
+                    btn.classList.remove('border-primary', 'bg-primary-50', 'border-secondary', 'bg-secondary-50', 
+                                        'border-accent', 'bg-accent-50', 'border-error', 'bg-error-50');
+                });
+                
+                // Add selection styling
+                const answer = e.currentTarget.dataset.answer;
+                quizState.selectedAnswer = answer;
+                
+                // Add selected styling based on option
+                if (answer === 'A') {
+                    e.currentTarget.classList.add('border-primary', 'bg-primary-50');
+                } else if (answer === 'B') {
+                    e.currentTarget.classList.add('border-secondary', 'bg-secondary-50');
+                } else if (answer === 'C') {
+                    e.currentTarget.classList.add('border-accent', 'bg-accent-50');
+                } else if (answer === 'D') {
+                    e.currentTarget.classList.add('border-error', 'bg-error-50');
+                }
+                
+                // Enable next button and show feedback
+                document.getElementById('nextQuestionBtn').disabled = false;
+                document.getElementById('nextQuestionBtn').classList.remove('opacity-50', 'cursor-not-allowed');
+                
+                // Stop timer and show feedback
+                clearInterval(timerInterval);
+                setTimeout(() => {
+                    checkAnswer();
+                }, 500);
+            });
+        });
+        
+        function checkAnswer() {
+            const isCorrect = quizState.selectedAnswer === quizState.correctAnswer;
+            
+            if (isCorrect) {
+                quizState.score += 10;
+                quizState.streak++;
+                showFeedback(true, 'Correct!', 'Great job! You\'re on a roll.');
+            } else {
+                quizState.streak = 0;
+                showFeedback(false, 'Incorrect', 'Don\'t worry, learning from mistakes makes you stronger!');
+            }
+            
+            updateScoreDisplay();
+        }
+        
+        function showFeedback(isCorrect, title, message) {
+            const modal = document.getElementById('feedbackModal');
+            const icon = document.getElementById('feedbackIcon');
+            const titleEl = document.getElementById('feedbackTitle');
+            const messageEl = document.getElementById('feedbackMessage');
+            const correctAnswerEl = document.getElementById('correctAnswer');
+            const correctAnswerText = document.getElementById('correctAnswerText');
+            
+            // Set feedback content
+            titleEl.textContent = title;
+            messageEl.textContent = message;
+            
+            if (isCorrect) {
+                icon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-success-100';
+                icon.innerHTML = '<i class="fas fa-check text-2xl text-success"></i>';
+                titleEl.className = 'text-xl font-bold mb-2 text-success';
+                correctAnswerEl.classList.add('hidden');
+            } else {
+                icon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-error-100';
+                icon.innerHTML = '<i class="fas fa-times text-2xl text-error"></i>';
+                titleEl.className = 'text-xl font-bold mb-2 text-error';
+                correctAnswerEl.classList.remove('hidden');
+                correctAnswerText.textContent = 'A - list = [1, 2, 3, 4]';
+            }
+            
+            modal.classList.remove('hidden');
+        }
+        
+        function updateScoreDisplay() {
+            document.getElementById('currentScore').textContent = quizState.score;
+            document.getElementById('currentStreak').textContent = quizState.streak;
+        }
+        
+        // Hints functionality
+        const hintsToggle = document.getElementById('hintsToggle');
+        const hintsContent = document.getElementById('hintsContent');
+        const hintsChevron = document.getElementById('hintsChevron');
+        
+        hintsToggle.addEventListener('click', () => {
+            hintsContent.classList.toggle('hidden');
+            hintsChevron.classList.toggle('rotate-180');
+        });
+        
+        // Continue feedback
+        document.getElementById('continueFeedback').addEventListener('click', () => {
+            document.getElementById('feedbackModal').classList.add('hidden');
+        });
+        
+        // Next question functionality
+        document.getElementById('nextQuestionBtn').addEventListener('click', () => {
+            if (quizState.currentQuestion < quizState.totalQuestions) {
+                nextQuestion();
+            } else {
+                finishQuiz();
+            }
+        });
+        
+        function nextQuestion() {
+            quizState.currentQuestion++;
+            quizState.timeRemaining = 90;
+            quizState.selectedAnswer = null;
+            
+            // Update progress
+            const progress = (quizState.currentQuestion / quizState.totalQuestions) * 100;
+            document.getElementById('quizProgress').style.width = progress + '%';
+            document.getElementById('currentQuestion').textContent = quizState.currentQuestion;
+            
+            // Reset answer options
+            document.querySelectorAll('.answer-option').forEach(btn => {
+                btn.classList.remove('border-primary', 'bg-primary-50', 'border-secondary', 'bg-secondary-50', 
+                                    'border-accent', 'bg-accent-50', 'border-error', 'bg-error-50');
+            });
+            
+            // Disable next button
+            document.getElementById('nextQuestionBtn').disabled = true;
+            document.getElementById('nextQuestionBtn').classList.add('opacity-50', 'cursor-not-allowed');
+            
+            // Start new timer
+            startTimer();
+            
+            // Load new question (mock)
+            loadNewQuestion();
+        }
+        
+        function loadNewQuestion() {
+            const questions = [
+                {
+                    text: "Which Python keyword is used to create a function?",
+                    options: ["def", "function", "create", "make"],
+                    correct: "A"
+                },
+                {
+                    text: "What is the output of print(type([]))?",
+                    options: ["<class 'array'>", "<class 'list'>", "<class 'tuple'>", "<class 'dict'>"],
+                    correct: "B"
+                },
+                {
+                    text: "Which operator is used for exponentiation in Python?",
+                    options: ["^", "**", "exp", "pow"],
+                    correct: "B"
+                }
+            ];
+            
+            const randomQuestion = questions[Math.floor(Math.random() * questions.length)];
+            document.getElementById('questionText').textContent = randomQuestion.text;
+            
+            const options = document.querySelectorAll('.answer-option p');
+            options.forEach((option, index) => {
+                option.textContent = randomQuestion.options[index];
+            });
+            
+            quizState.correctAnswer = randomQuestion.correct;
+        }
+        
+        // Generate new question
+        document.getElementById('generateQuestionBtn').addEventListener('click', () => {
+            loadNewQuestion();
+            // Reset timer
+            clearInterval(timerInterval);
+            quizState.timeRemaining = 90;
+            updateTimerDisplay();
+            startTimer();
+        });
+        
+        function finishQuiz() {
+            localStorage.setItem('quizResults', JSON.stringify({
+                score: quizState.score,
+                totalQuestions: quizState.totalQuestions,
+                topic: quizState.topic,
+                date: new Date().toISOString()
+            }));
+            window.location.href = 'quiz_results_statistics.html';
+        }
+        
+        // Exit quiz
+        document.getElementById('exitQuizBtn').addEventListener('click', () => {
+            if (confirm('Are you sure you want to exit the quiz? Your progress will be lost.')) {
+                window.location.href = 'quiz_dashboard.html';
+            }
+        });
+        
+        // Initialize quiz
+        document.addEventListener('DOMContentLoaded', () => {
+            // Load saved topic
+            const savedTopic = localStorage.getItem('selectedTopic');
+            if (savedTopic) {
+                quizState.topic = savedTopic;
+                document.getElementById('currentTopic').textContent = savedTopic;
+            }
+            
+            // Start timer
+            startTimer();
+            updateScoreDisplay();
+            
+            // Set initial button state
+            document.getElementById('nextQuestionBtn').disabled = true;
+            document.getElementById('nextQuestionBtn').classList.add('opacity-50', 'cursor-not-allowed');
+        });
+    </script>
+</body>
+</html>

pages/fact_game_challenge.html

@@ -0,0 +1,936 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fact Game Challenge - TriviaVerse Quiz</title>
+    <link rel="stylesheet" href="../css/main.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+    <style>
+        .fact-card {
+            min-height: 200px;
+            transition: all 0.3s ease;
+        }
+        
+        .fact-card.shake {
+            animation: shake 0.5s ease-in-out;
+        }
+        
+        @keyframes shake {
+            0%, 20%, 40%, 60%, 80% { transform: translateX(0); }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
+        }
+        
+        .timer-circle {
+            position: relative;
+            width: 60px;
+            height: 60px;
+        }
+        
+        .timer-circle svg {
+            width: 100%;
+            height: 100%;
+            transform: rotate(-90deg);
+        }
+        
+        .timer-circle circle {
+            fill: none;
+            stroke-width: 4;
+            stroke-linecap: round;
+        }
+        
+        .timer-bg {
+            stroke: rgba(148, 163, 184, 0.2);
+        }
+        
+        .timer-progress {
+            stroke: #F59E0B;
+            stroke-dasharray: 188.5;
+            stroke-dashoffset: 0;
+            transition: stroke-dashoffset 0.1s linear;
+        }
+        
+        .timer-progress.warning {
+            stroke: #EF4444;
+        }
+        
+        .choice-btn {
+            transition: all 0.2s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .choice-btn:hover {
+            transform: translateY(-2px);
+        }
+        
+        .choice-btn.correct {
+            animation: correctPulse 0.6s ease;
+        }
+        
+        .choice-btn.incorrect {
+            animation: incorrectShake 0.6s ease;
+        }
+        
+        @keyframes correctPulse {
+            0% { transform: scale(1); background-color: #10B981; }
+            50% { transform: scale(1.05); background-color: #059669; }
+            100% { transform: scale(1); background-color: #10B981; }
+        }
+        
+        @keyframes incorrectShake {
+            0%, 20%, 40%, 60%, 80% { transform: translateX(0); background-color: #EF4444; }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); background-color: #DC2626; }
+        }
+        
+        .streak-counter {
+            background: linear-gradient(45deg, #F59E0B, #EF4444);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: bold;
+        }
+        
+        .fact-reveal {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        
+        .fact-reveal.show {
+            max-height: 200px;
+        }
+        
+        .achievement-badge {
+            animation: bounceIn 0.6s ease;
+        }
+        
+        @keyframes bounceIn {
+            0% { transform: scale(0); opacity: 0; }
+            50% { transform: scale(1.2); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        
+        .rapid-fire-indicator {
+            animation: pulse 1s infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+    </style>
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body class="bg-background text-text-primary transition-theme">
+    <!-- Mobile Menu Overlay -->
+    <div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"></div>
+    
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-full w-80 bg-surface border-r border-border transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-50 lg:z-auto">
+        <div class="p-6 border-b border-border">
+            <!-- Logo -->
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                    <i class="fas fa-brain text-white text-lg"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-text-primary">TriviaVerse</h1>
+                    <p class="text-sm text-text-secondary">Quiz Platform</p>
+                </div>
+            </div>
+            
+            <!-- Close button for mobile -->
+            <button id="closeSidebar" class="absolute top-4 right-4 lg:hidden text-text-secondary hover:text-text-primary">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Navigation -->
+        <nav class="p-6 space-y-2">
+            <a href="quiz_dashboard.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="active_quiz_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-play-circle"></i>
+                <span>Active Quiz</span>
+            </a>
+            <a href="flashcards_learning_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-layer-group"></i>
+                <span>Flashcards</span>
+            </a>
+            <a href="fact_game_challenge.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary text-white">
+                <i class="fas fa-gamepad"></i>
+                <span>Fact Game</span>
+            </a>
+            <a href="quiz_results_statistics.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-chart-bar"></i>
+                <span>Statistics</span>
+            </a>
+            <a href="topic_selection_browse.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-book"></i>
+                <span>Browse Topics</span>
+            </a>
+            <a href="settings_preferences.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+        </nav>
+        
+        <!-- Game Settings -->
+        <div class="p-6 border-t border-border">
+            <h3 class="text-sm font-semibold text-text-primary mb-4">Game Settings</h3>
+            
+            <!-- Language Switcher -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Language</label>
+                <select id="languageSelect" class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                    <option value="en">English</option>
+                    <option value="te">తెలుగు (Telugu)</option>
+                    <option value="hi">हिंदी (Hindi)</option>
+                    <option value="kn">ಕನ್ನಡ (Kannada)</option>
+                </select>
+            </div>
+            
+            <!-- Rapid Fire Toggle -->
+            <div class="flex items-center justify-between mb-4">
+                <span class="text-sm text-text-secondary">Rapid Fire Mode</span>
+                <button id="rapidFireToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors">
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                </button>
+            </div>
+            
+            <!-- Theme Toggle -->
+            <div class="flex items-center justify-between">
+                <span class="text-sm text-text-secondary">Dark Theme</span>
+                <button id="themeToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                </button>
+            </div>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="lg:ml-80 min-h-screen">
+        <!-- Header -->
+        <header class="bg-surface border-b border-border p-4 lg:p-6">
+            <div class="flex items-center justify-between">
+                <!-- Mobile Menu Button -->
+                <button id="mobileMenuBtn" class="lg:hidden text-text-primary hover:text-primary">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                
+                <!-- Title -->
+                <div class="flex-1 lg:flex-none">
+                    <h2 class="text-2xl font-bold text-text-primary">Fact Game Challenge</h2>
+                    <p class="text-text-secondary mt-1">Test your knowledge with rapid-fire facts</p>
+                </div>
+                
+                <!-- Game Stats -->
+                <div class="hidden lg:flex items-center space-x-6">
+                    <!-- Timer -->
+                    <div class="timer-circle">
+                        <svg>
+                            <circle class="timer-bg" cx="30" cy="30" r="26"/>
+                            <circle class="timer-progress" cx="30" cy="30" r="26" style="stroke-dashoffset: 0;"/>
+                        </svg>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-sm font-bold text-accent" id="timerText">15</span>
+                        </div>
+                    </div>
+                    
+                    <!-- Streak -->
+                    <div class="text-center">
+                        <p class="text-sm font-medium text-text-primary">Streak</p>
+                        <p class="text-2xl font-bold streak-counter" id="streakCounter">0</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Game Interface -->
+        <div class="p-4 lg:p-6 max-w-4xl mx-auto">
+            <!-- Game Stats Mobile -->
+            <div class="lg:hidden grid grid-cols-3 gap-4 mb-6">
+                <div class="card p-4 text-center">
+                    <p class="text-text-secondary text-sm">Score</p>
+                    <p class="text-xl font-bold text-primary" id="scoreDisplay">0</p>
+                </div>
+                <div class="card p-4 text-center">
+                    <p class="text-text-secondary text-sm">Streak</p>
+                    <p class="text-xl font-bold streak-counter" id="streakDisplayMobile">0</p>
+                </div>
+                <div class="card p-4 text-center">
+                    <p class="text-text-secondary text-sm">Time</p>
+                    <p class="text-xl font-bold text-accent" id="timerDisplayMobile">15</p>
+                </div>
+            </div>
+            
+            <!-- Game Progress -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div class="card p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Total Score</p>
+                            <p class="text-2xl font-bold text-primary" id="totalScore">0</p>
+                        </div>
+                        <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-star text-primary"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="card p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Best Streak</p>
+                            <p class="text-2xl font-bold text-accent" id="bestStreak">0</p>
+                        </div>
+                        <div class="w-10 h-10 bg-accent-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-fire text-accent"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="card p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Accuracy</p>
+                            <p class="text-2xl font-bold text-success" id="accuracy">100%</p>
+                        </div>
+                        <div class="w-10 h-10 bg-success-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-bullseye text-success"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Fact Card -->
+            <div class="card p-8 mb-6 fact-card" id="factCard">
+                <div class="text-center">
+                    <!-- Topic Badge -->
+                    <span class="inline-block bg-secondary-100 text-secondary text-sm px-3 py-1 rounded-full mb-4" id="topicBadge">
+                        General Knowledge
+                    </span>
+                    
+                    <!-- Fact Statement -->
+                    <h3 class="text-xl lg:text-2xl font-semibold text-text-primary mb-6 leading-relaxed" id="factStatement">
+                        The Great Wall of China is visible from space with the naked eye.
+                    </h3>
+                    
+                    <!-- Game Mode Indicator -->
+                    <div class="mb-6">
+                        <div id="normalModeIndicator" class="flex items-center justify-center space-x-2">
+                            <i class="fas fa-clock text-text-secondary"></i>
+                            <span class="text-text-secondary text-sm">Take your time to think</span>
+                        </div>
+                        <div id="rapidFireIndicator" class="hidden items-center justify-center space-x-2 rapid-fire-indicator">
+                            <i class="fas fa-bolt text-accent"></i>
+                            <span class="text-accent text-sm font-semibold">RAPID FIRE MODE ACTIVE!</span>
+                        </div>
+                    </div>
+                    
+                    <!-- True/False Choices -->
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6" id="choiceButtons">
+                        <button class="choice-btn btn bg-success text-white py-4 px-8 rounded-xl text-lg font-semibold hover:bg-green-700" data-choice="true">
+                            <i class="fas fa-check mr-3"></i>
+                            TRUE
+                        </button>
+                        <button class="choice-btn btn bg-error text-white py-4 px-8 rounded-xl text-lg font-semibold" data-choice="false">
+                            <i class="fas fa-times mr-3"></i>
+                            FALSE
+                        </button>
+                    </div>
+                    
+                    <!-- Fact Revelation -->
+                    <div class="fact-reveal" id="factReveal">
+                        <div class="border-t border-border pt-4 mt-4">
+                            <div class="text-left space-y-3">
+                                <div class="flex items-start space-x-3">
+                                    <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+                                        <i class="fas fa-lightbulb text-primary text-sm"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-semibold text-text-primary mb-2">Did You Know?</h4>
+                                        <p class="text-text-secondary leading-relaxed" id="factExplanation">
+                                            This is actually FALSE! The Great Wall of China is not visible from space with the naked eye. 
+                                            This is a common misconception. While the wall is massive, it's only about 6 meters wide on average, 
+                                            making it impossible to see from the Moon or even low Earth orbit without aid.
+                                        </p>
+                                    </div>
+                                </div>
+                                
+                                <!-- Social Share -->
+                                <div class="mt-4 pt-4 border-t border-border">
+                                    <p class="text-sm text-text-secondary mb-3">Found this fact interesting?</p>
+                                    <div class="flex space-x-2">
+                                        <button class="btn bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700">
+                                            <i class="fab fa-twitter mr-2"></i>Share
+                                        </button>
+                                        <button class="btn bg-blue-800 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-900">
+                                            <i class="fab fa-facebook mr-2"></i>Share
+                                        </button>
+                                        <button id="bookmarkFact" class="btn bg-accent-100 text-accent px-4 py-2 rounded-lg text-sm hover:bg-accent-50">
+                                            <i class="far fa-bookmark mr-2"></i>Save
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Next Question Button -->
+            <div class="text-center mb-6">
+                <button id="nextQuestionBtn" class="btn btn-primary px-8 py-4 rounded-xl text-lg font-semibold hidden">
+                    <i class="fas fa-arrow-right mr-2"></i>
+                    Next Fact
+                </button>
+            </div>
+            
+            <!-- Achievement Notifications -->
+            <div id="achievementNotification" class="hidden fixed top-4 right-4 bg-gradient-to-r from-accent-50 to-warning-50 border border-accent p-4 rounded-lg shadow-lg z-50 achievement-badge">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-accent rounded-full flex items-center justify-center">
+                        <i class="fas fa-trophy text-white"></i>
+                    </div>
+                    <div>
+                        <p class="font-semibold text-text-primary">Achievement Unlocked!</p>
+                        <p class="text-sm text-text-secondary" id="achievementText">Fact Explorer - Answered 10 facts correctly!</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Quick Actions -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Game Controls -->
+                <div class="card p-6">
+                    <h4 class="text-lg font-semibold text-text-primary mb-4">Game Controls</h4>
+                    <div class="space-y-3">
+                        <button id="pauseGame" class="w-full text-left px-4 py-3 rounded bg-warning-100 text-warning hover:bg-warning-50 transition-colors">
+                            <i class="fas fa-pause mr-3"></i>
+                            Pause Game
+                        </button>
+                        <button id="newGame" class="w-full text-left px-4 py-3 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-redo mr-3"></i>
+                            New Game
+                        </button>
+                        <button id="viewStats" class="w-full text-left px-4 py-3 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-chart-line mr-3"></i>
+                            View Detailed Stats
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Quick Navigation -->
+                <div class="card p-6">
+                    <h4 class="text-lg font-semibold text-text-primary mb-4">Continue Learning</h4>
+                    <div class="space-y-3">
+                        <a href="flashcards_learning_interface.html" class="block px-4 py-3 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-layer-group mr-3"></i>
+                            Study with Flashcards
+                        </a>
+                        <a href="active_quiz_interface.html" class="block px-4 py-3 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-play-circle mr-3"></i>
+                            Take a Quiz
+                        </a>
+                        <a href="quiz_results_statistics.html" class="block px-4 py-3 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-chart-bar mr-3"></i>
+                            View Learning Analytics
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <script>
+        // Sample fact data
+        const facts = [
+            {
+                id: 1,
+                topic: "General Knowledge",
+                statement: "The Great Wall of China is visible from space with the naked eye.",
+                isTrue: false,
+                explanation: "This is actually FALSE! The Great Wall of China is not visible from space with the naked eye. This is a common misconception. While the wall is massive, it's only about 6 meters wide on average, making it impossible to see from the Moon or even low Earth orbit without aid."
+            },
+            {
+                id: 2,
+                topic: "Science",
+                statement: "Lightning never strikes the same place twice.",
+                isTrue: false,
+                explanation: "This is FALSE! Lightning can and does strike the same place multiple times. The Empire State Building, for example, is struck by lightning about 25 times per year. Tall structures are particularly likely to be struck repeatedly."
+            },
+            {
+                id: 3,
+                topic: "Biology",
+                statement: "Goldfish have a memory span of only 3 seconds.",
+                isTrue: false,
+                explanation: "This is FALSE! Goldfish actually have much better memories than commonly believed. Studies have shown that goldfish can remember things for months, not seconds. They can be trained to respond to different colors, sounds, and cues."
+            },
+            {
+                id: 4,
+                topic: "Space",
+                statement: "There are more stars in the observable universe than grains of sand on all Earth's beaches.",
+                isTrue: true,
+                explanation: "This is TRUE! Scientists estimate there are about 10^24 stars in the observable universe, while there are roughly 7.5 × 10^18 grains of sand on all the world's beaches. That means there are more than 100 stars for every grain of sand!"
+            },
+            {
+                id: 5,
+                topic: "History",
+                statement: "Cleopatra lived closer in time to the Moon landing than to the construction of the Great Pyramid.",
+                isTrue: true,
+                explanation: "This is TRUE! Cleopatra VII lived around 69-30 BCE. The Great Pyramid was built around 2580-2560 BCE, while the Moon landing occurred in 1969 CE. Cleopatra lived about 2,500 years after the pyramid but only about 2,000 years before the Moon landing."
+            },
+            {
+                id: 6,
+                topic: "Geography",
+                statement: "Australia is wider than the Moon.",
+                isTrue: true,
+                explanation: "This is TRUE! Australia's diameter from east to west is approximately 4,000 km, while the Moon's diameter is about 3,474 km. So Australia is indeed wider than the Moon!"
+            },
+            {
+                id: 7,
+                topic: "Technology",
+                statement: "The first computer bug was an actual insect.",
+                isTrue: true,
+                explanation: "This is TRUE! In 1947, Grace Hopper found an actual moth stuck in a Harvard Mark II computer, causing a malfunction. She taped the moth in her logbook with the note 'First actual case of bug being found.' This is the origin of the term 'computer bug.'"
+            },
+            {
+                id: 8,
+                topic: "Nature",
+                statement: "Bananas are berries, but strawberries are not.",
+                isTrue: true,
+                explanation: "This is TRUE! Botanically speaking, bananas are indeed berries because they develop from a single flower with one ovary. Strawberries, however, are not true berries - they're aggregate fruits. True berries include grapes, blueberries, and even eggplants!"
+            }
+        ];
+
+        // Game state
+        let currentFactIndex = 0;
+        let score = 0;
+        let streak = 0;
+        let bestStreak = 0;
+        let totalAnswered = 0;
+        let correctAnswers = 0;
+        let timeLeft = 15;
+        let timerInterval = null;
+        let isRapidFire = false;
+        let gameActive = true;
+        let isAnswered = false;
+
+        // DOM elements
+        const factCard = document.getElementById('factCard');
+        const topicBadge = document.getElementById('topicBadge');
+        const factStatement = document.getElementById('factStatement');
+        const factReveal = document.getElementById('factReveal');
+        const factExplanation = document.getElementById('factExplanation');
+        const choiceButtons = document.getElementById('choiceButtons');
+        const nextQuestionBtn = document.getElementById('nextQuestionBtn');
+        const timerText = document.getElementById('timerText');
+        const timerDisplayMobile = document.getElementById('timerDisplayMobile');
+        const streakCounter = document.getElementById('streakCounter');
+        const streakDisplayMobile = document.getElementById('streakDisplayMobile');
+        const totalScore = document.getElementById('totalScore');
+        const bestStreakDisplay = document.getElementById('bestStreak');
+        const accuracy = document.getElementById('accuracy');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const rapidFireToggle = document.getElementById('rapidFireToggle');
+        const normalModeIndicator = document.getElementById('normalModeIndicator');
+        const rapidFireIndicator = document.getElementById('rapidFireIndicator');
+        const achievementNotification = document.getElementById('achievementNotification');
+        const achievementText = document.getElementById('achievementText');
+
+        // Mobile menu functionality
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.getElementById('sidebar');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+        const closeSidebar = document.getElementById('closeSidebar');
+
+        // Initialize game
+        function init() {
+            loadFact();
+            startTimer();
+            updateUI();
+        }
+
+        // Load current fact
+        function loadFact() {
+            if (currentFactIndex >= facts.length) {
+                currentFactIndex = 0; // Loop back to start
+            }
+            
+            const fact = facts[currentFactIndex];
+            topicBadge.textContent = fact.topic;
+            factStatement.textContent = fact.statement;
+            factExplanation.textContent = fact.explanation;
+            
+            // Reset UI state
+            factReveal.classList.remove('show');
+            nextQuestionBtn.classList.add('hidden');
+            isAnswered = false;
+            
+            // Enable choice buttons
+            const buttons = choiceButtons.querySelectorAll('.choice-btn');
+            buttons.forEach(btn => {
+                btn.disabled = false;
+                btn.classList.remove('correct', 'incorrect');
+            });
+            
+            // Reset timer
+            timeLeft = isRapidFire ? 10 : 15;
+            updateTimer();
+            startTimer();
+        }
+
+        // Timer functionality
+        function startTimer() {
+            if (timerInterval) clearInterval(timerInterval);
+            
+            timerInterval = setInterval(() => {
+                if (!gameActive || isAnswered) return;
+                
+                timeLeft--;
+                updateTimer();
+                
+                if (timeLeft <= 0) {
+                    handleTimeout();
+                }
+            }, 1000);
+        }
+
+        function updateTimer() {
+            const timerProgress = document.querySelector('.timer-progress');
+            const maxTime = isRapidFire ? 10 : 15;
+            const progress = (timeLeft / maxTime) * 188.5;
+            
+            timerProgress.style.strokeDashoffset = 188.5 - progress;
+            
+            if (timeLeft <= 5) {
+                timerProgress.classList.add('warning');
+            } else {
+                timerProgress.classList.remove('warning');
+            }
+            
+            if (timerText) timerText.textContent = timeLeft;
+            if (timerDisplayMobile) timerDisplayMobile.textContent = timeLeft;
+        }
+
+        function handleTimeout() {
+            clearInterval(timerInterval);
+            isAnswered = true;
+            
+            // Mark as incorrect
+            handleAnswer(null, false);
+            factCard.classList.add('shake');
+            setTimeout(() => factCard.classList.remove('shake'), 500);
+        }
+
+        // Handle answer selection
+        function handleAnswer(selectedChoice, isCorrect) {
+            if (isAnswered) return;
+            
+            isAnswered = true;
+            clearInterval(timerInterval);
+            totalAnswered++;
+            
+            const fact = facts[currentFactIndex];
+            const buttons = choiceButtons.querySelectorAll('.choice-btn');
+            
+            // Disable all buttons
+            buttons.forEach(btn => btn.disabled = true);
+            
+            if (isCorrect) {
+                // Correct answer
+                correctAnswers++;
+                score += isRapidFire ? 20 : 10;
+                streak++;
+                
+                if (streak > bestStreak) {
+                    bestStreak = streak;
+                }
+                
+                // Animate correct button
+                if (selectedChoice !== null) {
+                    const selectedBtn = Array.from(buttons).find(btn => 
+                        btn.dataset.choice === selectedChoice.toString()
+                    );
+                    if (selectedBtn) {
+                        selectedBtn.classList.add('correct');
+                    }
+                }
+                
+                // Check for achievements
+                checkAchievements();
+                
+            } else {
+                // Incorrect answer
+                streak = 0;
+                
+                // Animate incorrect button if one was selected
+                if (selectedChoice !== null) {
+                    const selectedBtn = Array.from(buttons).find(btn => 
+                        btn.dataset.choice === selectedChoice.toString()
+                    );
+                    if (selectedBtn) {
+                        selectedBtn.classList.add('incorrect');
+                    }
+                }
+                
+                // Highlight correct answer
+                const correctBtn = Array.from(buttons).find(btn => 
+                    btn.dataset.choice === fact.isTrue.toString()
+                );
+                if (correctBtn) {
+                    setTimeout(() => correctBtn.classList.add('correct'), 300);
+                }
+            }
+            
+            // Show explanation and next button
+            setTimeout(() => {
+                factReveal.classList.add('show');
+                nextQuestionBtn.classList.remove('hidden');
+            }, 800);
+            
+            updateUI();
+        }
+
+        // Check for achievements
+        function checkAchievements() {
+            let achievement = null;
+            
+            if (streak === 5) {
+                achievement = "Fact Streak - 5 correct answers in a row!";
+            } else if (streak === 10) {
+                achievement = "Fact Master - 10 correct answers in a row!";
+            } else if (correctAnswers === 10) {
+                achievement = "Fact Explorer - Answered 10 facts correctly!";
+            } else if (correctAnswers === 25) {
+                achievement = "Fact Enthusiast - Answered 25 facts correctly!";
+            } else if (score >= 100) {
+                achievement = "Century Club - Scored 100 points!";
+            }
+            
+            if (achievement) {
+                showAchievement(achievement);
+            }
+        }
+
+        // Show achievement notification
+        function showAchievement(text) {
+            achievementText.textContent = text;
+            achievementNotification.classList.remove('hidden');
+            
+            setTimeout(() => {
+                achievementNotification.classList.add('hidden');
+            }, 4000);
+        }
+
+        // Update UI elements
+        function updateUI() {
+            if (totalScore) totalScore.textContent = score;
+            if (scoreDisplay) scoreDisplay.textContent = score;
+            if (streakCounter) streakCounter.textContent = streak;
+            if (streakDisplayMobile) streakDisplayMobile.textContent = streak;
+            if (bestStreakDisplay) bestStreakDisplay.textContent = bestStreak;
+            
+            const accuracyPercent = totalAnswered > 0 ? Math.round((correctAnswers / totalAnswered) * 100) : 100;
+            if (accuracy) accuracy.textContent = `${accuracyPercent}%`;
+        }
+
+        // Next question
+        function nextQuestion() {
+            currentFactIndex++;
+            loadFact();
+        }
+
+        // Rapid fire mode toggle
+        function toggleRapidFire() {
+            isRapidFire = !isRapidFire;
+            const toggleSpan = rapidFireToggle.querySelector('span');
+            
+            if (isRapidFire) {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+                rapidFireToggle.classList.add('bg-accent');
+                rapidFireToggle.classList.remove('bg-gray-300');
+                normalModeIndicator.classList.add('hidden');
+                rapidFireIndicator.classList.remove('hidden');
+                rapidFireIndicator.classList.add('flex');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+                rapidFireToggle.classList.remove('bg-accent');
+                rapidFireToggle.classList.add('bg-gray-300');
+                normalModeIndicator.classList.remove('hidden');
+                rapidFireIndicator.classList.add('hidden');
+                rapidFireIndicator.classList.remove('flex');
+            }
+            
+            // Restart current question with new timing
+            if (gameActive && !isAnswered) {
+                loadFact();
+            }
+        }
+
+        // Event listeners
+        choiceButtons.addEventListener('click', (e) => {
+            if (!e.target.classList.contains('choice-btn') || isAnswered) return;
+            
+            const choice = e.target.dataset.choice === 'true';
+            const fact = facts[currentFactIndex];
+            const isCorrect = choice === fact.isTrue;
+            
+            handleAnswer(choice, isCorrect);
+        });
+
+        nextQuestionBtn.addEventListener('click', nextQuestion);
+        rapidFireToggle.addEventListener('click', toggleRapidFire);
+
+        // Game control buttons
+        document.getElementById('pauseGame').addEventListener('click', () => {
+            gameActive = !gameActive;
+            const btn = document.getElementById('pauseGame');
+            
+            if (gameActive) {
+                btn.innerHTML = '<i class="fas fa-pause mr-3"></i>Pause Game';
+                startTimer();
+            } else {
+                btn.innerHTML = '<i class="fas fa-play mr-3"></i>Resume Game';
+                clearInterval(timerInterval);
+            }
+        });
+
+        document.getElementById('newGame').addEventListener('click', () => {
+            // Reset game state
+            currentFactIndex = 0;
+            score = 0;
+            streak = 0;
+            totalAnswered = 0;
+            correctAnswers = 0;
+            gameActive = true;
+            isAnswered = false;
+            
+            // Shuffle facts
+            for (let i = facts.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [facts[i], facts[j]] = [facts[j], facts[i]];
+            }
+            
+            updateUI();
+            loadFact();
+        });
+
+        document.getElementById('bookmarkFact').addEventListener('click', (e) => {
+            e.target.innerHTML = '<i class="fas fa-bookmark mr-2"></i>Saved!';
+            e.target.classList.add('bg-accent', 'text-white');
+            setTimeout(() => {
+                e.target.innerHTML = '<i class="far fa-bookmark mr-2"></i>Save';
+                e.target.classList.remove('bg-accent', 'text-white');
+            }, 1000);
+        });
+
+        // Mobile menu events
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+        });
+
+        closeSidebar.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+
+        mobileMenuOverlay.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            
+            const toggleSpan = themeToggle.querySelector('span');
+            if (isDark) {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+            
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+
+        // Language selection
+        const languageSelect = document.getElementById('languageSelect');
+        languageSelect.addEventListener('change', (e) => {
+            localStorage.setItem('selectedLanguage', e.target.value);
+            console.log('Language changed to:', e.target.value);
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (isAnswered) {
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    nextQuestion();
+                }
+                return;
+            }
+            
+            switch(e.key) {
+                case 'ArrowLeft':
+                case '1':
+                case 't':
+                case 'T':
+                    e.preventDefault();
+                    const trueBtn = choiceButtons.querySelector('[data-choice="true"]');
+                    if (trueBtn && !trueBtn.disabled) {
+                        trueBtn.click();
+                    }
+                    break;
+                case 'ArrowRight':
+                case '2':
+                case 'f':
+                case 'F':
+                    e.preventDefault();
+                    const falseBtn = choiceButtons.querySelector('[data-choice="false"]');
+                    if (falseBtn && !falseBtn.disabled) {
+                        falseBtn.click();
+                    }
+                    break;
+                case 'r':
+                case 'R':
+                    e.preventDefault();
+                    toggleRapidFire();
+                    break;
+            }
+        });
+
+        // Load saved preferences
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            html.classList.toggle('dark', savedTheme === 'dark');
+            const toggleSpan = themeToggle.querySelector('span');
+            if (savedTheme === 'dark') {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            }
+        }
+
+        const savedLanguage = localStorage.getItem('selectedLanguage');
+        if (savedLanguage) {
+            languageSelect.value = savedLanguage;
+        }
+
+        // Initialize the game
+        init();
+    </script>
+</body>
+</html>

pages/flashcards_learning_interface.html

@@ -0,0 +1,735 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flashcards Learning - TriviaVerse Quiz</title>
+    <link rel="stylesheet" href="../css/main.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+    <style>
+        .flashcard {
+            perspective: 1000px;
+            min-height: 300px;
+        }
+        
+        .flashcard-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+            cursor: pointer;
+        }
+        
+        .flashcard.flipped .flashcard-inner {
+            transform: rotateY(180deg);
+        }
+        
+        .flashcard-front, .flashcard-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            border-radius: 12px;
+            padding: 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+        }
+        
+        .flashcard-back {
+            transform: rotateY(180deg);
+            background: linear-gradient(135deg, #4F46E5, #06B6D4);
+        }
+        
+        .difficulty-btn {
+            transition: all 0.2s ease;
+        }
+        
+        .difficulty-btn:hover {
+            transform: translateY(-2px);
+        }
+        
+        .progress-circle {
+            position: relative;
+            width: 80px;
+            height: 80px;
+        }
+        
+        .progress-circle svg {
+            width: 100%;
+            height: 100%;
+            transform: rotate(-90deg);
+        }
+        
+        .progress-circle circle {
+            fill: none;
+            stroke-width: 6;
+            stroke-linecap: round;
+        }
+        
+        .progress-bg {
+            stroke: rgba(148, 163, 184, 0.2);
+        }
+        
+        .progress-bar-circle {
+            stroke: #4F46E5;
+            stroke-dasharray: 251.2;
+            stroke-dashoffset: 251.2;
+            transition: stroke-dashoffset 0.3s ease;
+        }
+        
+        @keyframes cardFlip {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        
+        .card-animate {
+            animation: cardFlip 0.3s ease;
+        }
+    </style>
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body class="bg-background text-text-primary transition-theme">
+    <!-- Mobile Menu Overlay -->
+    <div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"></div>
+    
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-full w-80 bg-surface border-r border-border transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-50 lg:z-auto">
+        <div class="p-6 border-b border-border">
+            <!-- Logo -->
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                    <i class="fas fa-brain text-white text-lg"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-text-primary">TriviaVerse</h1>
+                    <p class="text-sm text-text-secondary">Quiz Platform</p>
+                </div>
+            </div>
+            
+            <!-- Close button for mobile -->
+            <button id="closeSidebar" class="absolute top-4 right-4 lg:hidden text-text-secondary hover:text-text-primary">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Navigation -->
+        <nav class="p-6 space-y-2">
+            <a href="quiz_dashboard.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="active_quiz_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-play-circle"></i>
+                <span>Active Quiz</span>
+            </a>
+            <a href="flashcards_learning_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary text-white">
+                <i class="fas fa-layer-group"></i>
+                <span>Flashcards</span>
+            </a>
+            <a href="fact_game_challenge.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-gamepad"></i>
+                <span>Fact Game</span>
+            </a>
+            <a href="quiz_results_statistics.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-chart-bar"></i>
+                <span>Statistics</span>
+            </a>
+            <a href="topic_selection_browse.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-book"></i>
+                <span>Browse Topics</span>
+            </a>
+            <a href="settings_preferences.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+        </nav>
+        
+        <!-- Game Settings -->
+        <div class="p-6 border-t border-border">
+            <h3 class="text-sm font-semibold text-text-primary mb-4">Study Settings</h3>
+            
+            <!-- Language Switcher -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Language</label>
+                <select id="languageSelect" class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                    <option value="en">English</option>
+                    <option value="te">తెలుగు (Telugu)</option>
+                    <option value="hi">हिंदी (Hindi)</option>
+                    <option value="kn">ಕನ್ನಡ (Kannada)</option>
+                </select>
+            </div>
+            
+            <!-- Audio Toggle -->
+            <div class="flex items-center justify-between mb-4">
+                <span class="text-sm text-text-secondary">Audio Pronunciation</span>
+                <button id="audioToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                </button>
+            </div>
+            
+            <!-- Theme Toggle -->
+            <div class="flex items-center justify-between">
+                <span class="text-sm text-text-secondary">Dark Theme</span>
+                <button id="themeToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                </button>
+            </div>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="lg:ml-80 min-h-screen">
+        <!-- Header -->
+        <header class="bg-surface border-b border-border p-4 lg:p-6">
+            <div class="flex items-center justify-between">
+                <!-- Mobile Menu Button -->
+                <button id="mobileMenuBtn" class="lg:hidden text-text-primary hover:text-primary">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                
+                <!-- Title -->
+                <div class="flex-1 lg:flex-none">
+                    <h2 class="text-2xl font-bold text-text-primary">Flashcards Learning</h2>
+                    <p class="text-text-secondary mt-1">Master topics through spaced repetition</p>
+                </div>
+                
+                <!-- Session Progress -->
+                <div class="hidden lg:flex items-center space-x-4">
+                    <div class="progress-circle">
+                        <svg>
+                            <circle class="progress-bg" cx="40" cy="40" r="36"/>
+                            <circle class="progress-bar-circle" cx="40" cy="40" r="36" style="stroke-dashoffset: 125.6;"/>
+                        </svg>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-sm font-semibold text-text-primary" id="progressText">5/10</span>
+                        </div>
+                    </div>
+                    <div>
+                        <p class="text-sm font-medium text-text-primary">Session Progress</p>
+                        <p class="text-xs text-text-secondary">50% Complete</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Study Interface -->
+        <div class="p-4 lg:p-6 max-w-4xl mx-auto">
+            <!-- Study Stats -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div class="card p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Cards Remaining</p>
+                            <p class="text-2xl font-bold text-primary" id="cardsRemaining">5</p>
+                        </div>
+                        <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-layer-group text-primary"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="card p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Mastery Level</p>
+                            <p class="text-2xl font-bold text-success" id="masteryLevel">85%</p>
+                        </div>
+                        <div class="w-10 h-10 bg-success-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-brain text-success"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="card p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Study Streak</p>
+                            <p class="text-2xl font-bold text-accent" id="studyStreak">7</p>
+                        </div>
+                        <div class="w-10 h-10 bg-accent-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-fire text-accent"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Flashcard -->
+            <div class="card p-8 mb-6 flashcard" id="flashcard">
+                <div class="flashcard-inner">
+                    <!-- Front of card -->
+                    <div class="flashcard-front bg-surface border border-border">
+                        <div class="mb-4">
+                            <span class="inline-block bg-primary-100 text-primary text-xs px-3 py-1 rounded-full mb-4">Python Programming</span>
+                        </div>
+                        <h3 class="text-xl lg:text-2xl font-semibold text-text-primary mb-4 text-center" id="cardQuestion">
+                            What is the difference between a list and a tuple in Python?
+                        </h3>
+                        <p class="text-text-secondary text-center mb-6">
+                            <i class="fas fa-mouse-pointer mr-2"></i>
+                            Click to reveal answer
+                        </p>
+                        <div class="flex items-center justify-center space-x-4">
+                            <button id="audioBtn" class="btn bg-secondary-100 text-secondary px-4 py-2 rounded-lg hover:bg-secondary-50">
+                                <i class="fas fa-volume-up mr-2"></i>
+                                Pronounce
+                            </button>
+                            <button id="bookmarkBtn" class="btn bg-accent-100 text-accent px-4 py-2 rounded-lg hover:bg-accent-50">
+                                <i class="far fa-bookmark mr-2"></i>
+                                Bookmark
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Back of card -->
+                    <div class="flashcard-back text-white">
+                        <h3 class="text-xl font-semibold mb-4 text-center">Answer</h3>
+                        <div class="text-left space-y-3" id="cardAnswer">
+                            <p class="leading-relaxed">
+                                <strong>Lists:</strong> Mutable, ordered collections that can be modified after creation. 
+                                Use square brackets []. Example: my_list = [1, 2, 3]
+                            </p>
+                            <p class="leading-relaxed">
+                                <strong>Tuples:</strong> Immutable, ordered collections that cannot be modified after creation. 
+                                Use parentheses (). Example: my_tuple = (1, 2, 3)
+                            </p>
+                            <p class="text-sm opacity-90 mt-4">
+                                <i class="fas fa-lightbulb mr-2"></i>
+                                <strong>Memory tip:</strong> Think "T" for Tuple = "T" for immutable (can't change)
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Difficulty Rating -->
+            <div class="text-center mb-6">
+                <p class="text-text-secondary mb-4">How difficult was this card?</p>
+                <div class="flex justify-center space-x-4">
+                    <button class="difficulty-btn btn bg-success text-white px-6 py-3 rounded-lg hover:bg-green-700" data-difficulty="easy">
+                        <i class="fas fa-smile mr-2"></i>
+                        Easy
+                    </button>
+                    <button class="difficulty-btn btn bg-warning text-white px-6 py-3 rounded-lg hover:bg-warning-600" data-difficulty="medium">
+                        <i class="fas fa-meh mr-2"></i>
+                        Medium
+                    </button>
+                    <button class="difficulty-btn btn bg-error text-white px-6 py-3 rounded-lg hover:bg-error" data-difficulty="hard">
+                        <i class="fas fa-frown mr-2"></i>
+                        Hard
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Navigation Controls -->
+            <div class="flex justify-between items-center">
+                <button id="prevCard" class="btn btn-secondary px-6 py-3 rounded-lg" disabled>
+                    <i class="fas fa-arrow-left mr-2"></i>
+                    Previous
+                </button>
+                
+                <div class="flex space-x-3">
+                    <button id="flipCard" class="btn btn-primary px-6 py-3 rounded-lg">
+                        <i class="fas fa-sync-alt mr-2"></i>
+                        Flip Card
+                    </button>
+                    <button id="resetCard" class="btn bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-400">
+                        <i class="fas fa-redo mr-2"></i>
+                        Reset
+                    </button>
+                </div>
+                
+                <button id="nextCard" class="btn btn-primary px-6 py-3 rounded-lg">
+                    Next
+                    <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div>
+            
+            <!-- Quick Actions -->
+            <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="card p-4">
+                    <h4 class="text-lg font-semibold text-text-primary mb-3">Study Options</h4>
+                    <div class="space-y-2">
+                        <button class="w-full text-left px-3 py-2 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-random mr-2"></i>
+                            Shuffle Deck
+                        </button>
+                        <button class="w-full text-left px-3 py-2 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-bookmark mr-2"></i>
+                            Review Bookmarked
+                        </button>
+                        <button class="w-full text-left px-3 py-2 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-clock mr-2"></i>
+                            Timed Practice
+                        </button>
+                    </div>
+                </div>
+                
+                <div class="card p-4">
+                    <h4 class="text-lg font-semibold text-text-primary mb-3">Quick Switch</h4>
+                    <div class="space-y-2">
+                        <a href="active_quiz_interface.html" class="block px-3 py-2 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-play-circle mr-2"></i>
+                            Switch to Quiz Mode
+                        </a>
+                        <a href="fact_game_challenge.html" class="block px-3 py-2 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-gamepad mr-2"></i>
+                            Try Fact Game
+                        </a>
+                        <a href="quiz_results_statistics.html" class="block px-3 py-2 rounded text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                            <i class="fas fa-chart-bar mr-2"></i>
+                            View Analytics
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <script>
+        // Sample flashcard data
+        const flashcards = [
+            {
+                id: 1,
+                topic: "Python Programming",
+                question: "What is the difference between a list and a tuple in Python?",
+                answer: `<p class="leading-relaxed"><strong>Lists:</strong> Mutable, ordered collections that can be modified after creation. Use square brackets []. Example: my_list = [1, 2, 3]</p><p class="leading-relaxed"><strong>Tuples:</strong> Immutable, ordered collections that cannot be modified after creation. Use parentheses (). Example: my_tuple = (1, 2, 3)</p><p class="text-sm opacity-90 mt-4"><i class="fas fa-lightbulb mr-2"></i><strong>Memory tip:</strong> Think "T" for Tuple = "T" for immutable (can't change)</p>`,
+                difficulty: null,
+                bookmarked: false
+            },
+            {
+                id: 2,
+                topic: "JavaScript",
+                question: "What is the difference between 'let', 'const', and 'var' in JavaScript?",
+                answer: `<p class="leading-relaxed"><strong>var:</strong> Function-scoped, can be redeclared and updated. Hoisted to the top.</p><p class="leading-relaxed"><strong>let:</strong> Block-scoped, can be updated but not redeclared in the same scope.</p><p class="leading-relaxed"><strong>const:</strong> Block-scoped, cannot be updated or redeclared. Must be initialized.</p><p class="text-sm opacity-90 mt-4"><i class="fas fa-lightbulb mr-2"></i><strong>Best practice:</strong> Use const by default, let when you need to reassign, avoid var.</p>`,
+                difficulty: null,
+                bookmarked: false
+            },
+            {
+                id: 3,
+                topic: "General Science",
+                question: "What is photosynthesis and why is it important?",
+                answer: `<p class="leading-relaxed"><strong>Definition:</strong> The process by which plants convert sunlight, carbon dioxide, and water into glucose and oxygen.</p><p class="leading-relaxed"><strong>Formula:</strong> 6CO₂ + 6H₂O + light energy → C₆H₁₂O₆ + 6O₂</p><p class="leading-relaxed"><strong>Importance:</strong> Produces oxygen for life on Earth and forms the base of most food chains.</p><p class="text-sm opacity-90 mt-4"><i class="fas fa-lightbulb mr-2"></i><strong>Fun fact:</strong> Photosynthesis occurs in chloroplasts, the "green engines" of plants!</p>`,
+                difficulty: null,
+                bookmarked: false
+            },
+            {
+                id: 4,
+                topic: "World History",
+                question: "What were the main causes of World War I?",
+                answer: `<p class="leading-relaxed"><strong>M.A.I.N. Causes:</strong></p><p class="leading-relaxed"><strong>Militarism:</strong> Arms race between European powers</p><p class="leading-relaxed"><strong>Alliances:</strong> Complex web of treaties (Triple Alliance vs Triple Entente)</p><p class="leading-relaxed"><strong>Imperialism:</strong> Competition for colonies and resources</p><p class="leading-relaxed"><strong>Nationalism:</strong> Ethnic tensions, especially in the Balkans</p><p class="text-sm opacity-90 mt-4"><i class="fas fa-lightbulb mr-2"></i><strong>Trigger:</strong> Assassination of Archduke Franz Ferdinand in 1914</p>`,
+                difficulty: null,
+                bookmarked: false
+            },
+            {
+                id: 5,
+                topic: "Mathematics",
+                question: "What is the Pythagorean Theorem and how is it used?",
+                answer: `<p class="leading-relaxed"><strong>Theorem:</strong> In a right triangle, a² + b² = c² (where c is the hypotenuse)</p><p class="leading-relaxed"><strong>Applications:</strong> Finding distances, navigation, construction, computer graphics</p><p class="leading-relaxed"><strong>Example:</strong> If sides are 3 and 4, hypotenuse = √(3² + 4²) = √25 = 5</p><p class="text-sm opacity-90 mt-4"><i class="fas fa-lightbulb mr-2"></i><strong>Memory trick:</strong> 3-4-5 and 5-12-13 are common Pythagorean triples!</p>`,
+                difficulty: null,
+                bookmarked: false
+            }
+        ];
+
+        let currentCardIndex = 0;
+        let isFlipped = false;
+        let cardsStudied = 0;
+        let correctAnswers = 0;
+
+        // DOM elements
+        const flashcard = document.getElementById('flashcard');
+        const cardQuestion = document.getElementById('cardQuestion');
+        const cardAnswer = document.getElementById('cardAnswer');
+        const flipCard = document.getElementById('flipCard');
+        const resetCard = document.getElementById('resetCard');
+        const nextCard = document.getElementById('nextCard');
+        const prevCard = document.getElementById('prevCard');
+        const difficultyBtns = document.querySelectorAll('.difficulty-btn');
+        const audioBtn = document.getElementById('audioBtn');
+        const bookmarkBtn = document.getElementById('bookmarkBtn');
+        const cardsRemaining = document.getElementById('cardsRemaining');
+        const masteryLevel = document.getElementById('masteryLevel');
+        const studyStreak = document.getElementById('studyStreak');
+        const progressText = document.getElementById('progressText');
+
+        // Mobile menu functionality
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.getElementById('sidebar');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+        const closeSidebar = document.getElementById('closeSidebar');
+
+        // Initialize
+        function init() {
+            loadCard();
+            updateProgress();
+            updateStats();
+        }
+
+        // Load current card
+        function loadCard() {
+            const card = flashcards[currentCardIndex];
+            const topicBadge = flashcard.querySelector('.flashcard-front span');
+            
+            topicBadge.textContent = card.topic;
+            cardQuestion.textContent = card.question;
+            cardAnswer.innerHTML = card.answer;
+            
+            // Update bookmark button
+            bookmarkBtn.innerHTML = card.bookmarked 
+                ? '<i class="fas fa-bookmark mr-2"></i>Bookmarked'
+                : '<i class="far fa-bookmark mr-2"></i>Bookmark';
+            
+            // Reset flip state
+            isFlipped = false;
+            flashcard.classList.remove('flipped');
+            
+            // Update navigation buttons
+            prevCard.disabled = currentCardIndex === 0;
+            nextCard.disabled = currentCardIndex === flashcards.length - 1;
+            
+            // Add animation
+            flashcard.classList.add('card-animate');
+            setTimeout(() => flashcard.classList.remove('card-animate'), 300);
+        }
+
+        // Update progress indicators
+        function updateProgress() {
+            const progress = ((currentCardIndex + 1) / flashcards.length) * 100;
+            const circumference = 2 * Math.PI * 36;
+            const offset = circumference - (progress / 100) * circumference;
+            
+            document.querySelector('.progress-bar-circle').style.strokeDashoffset = offset;
+            progressText.textContent = `${currentCardIndex + 1}/${flashcards.length}`;
+            cardsRemaining.textContent = flashcards.length - currentCardIndex - 1;
+        }
+
+        // Update statistics
+        function updateStats() {
+            const completedCards = flashcards.filter(card => card.difficulty !== null).length;
+            const mastery = completedCards > 0 ? Math.round((correctAnswers / completedCards) * 100) : 85;
+            
+            masteryLevel.textContent = `${mastery}%`;
+            studyStreak.textContent = Math.floor(Math.random() * 10) + 5; // Simulated streak
+        }
+
+        // Flip card functionality
+        function handleFlip() {
+            isFlipped = !isFlipped;
+            flashcard.classList.toggle('flipped');
+        }
+
+        // Handle difficulty rating
+        function handleDifficulty(difficulty) {
+            flashcards[currentCardIndex].difficulty = difficulty;
+            
+            if (difficulty === 'easy') {
+                correctAnswers++;
+            }
+            
+            cardsStudied++;
+            updateStats();
+            
+            // Auto-advance to next card
+            setTimeout(() => {
+                if (currentCardIndex < flashcards.length - 1) {
+                    currentCardIndex++;
+                    loadCard();
+                    updateProgress();
+                }
+            }, 500);
+        }
+
+        // Handle navigation
+        function handleNext() {
+            if (currentCardIndex < flashcards.length - 1) {
+                currentCardIndex++;
+                loadCard();
+                updateProgress();
+            }
+        }
+
+        function handlePrev() {
+            if (currentCardIndex > 0) {
+                currentCardIndex--;
+                loadCard();
+                updateProgress();
+            }
+        }
+
+        // Handle bookmark
+        function handleBookmark() {
+            flashcards[currentCardIndex].bookmarked = !flashcards[currentCardIndex].bookmarked;
+            const card = flashcards[currentCardIndex];
+            
+            bookmarkBtn.innerHTML = card.bookmarked 
+                ? '<i class="fas fa-bookmark mr-2"></i>Bookmarked'
+                : '<i class="far fa-bookmark mr-2"></i>Bookmark';
+            
+            bookmarkBtn.classList.add('bg-accent', 'text-white');
+            setTimeout(() => {
+                bookmarkBtn.classList.remove('bg-accent', 'text-white');
+            }, 200);
+        }
+
+        // Handle audio (simulated)
+        function handleAudio() {
+            audioBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i>Playing...';
+            audioBtn.disabled = true;
+            
+            // Simulate audio playback
+            setTimeout(() => {
+                audioBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i>Pronounce';
+                audioBtn.disabled = false;
+            }, 2000);
+        }
+
+        // Event listeners
+        flashcard.addEventListener('click', handleFlip);
+        flipCard.addEventListener('click', handleFlip);
+        resetCard.addEventListener('click', () => {
+            isFlipped = false;
+            flashcard.classList.remove('flipped');
+        });
+        nextCard.addEventListener('click', handleNext);
+        prevCard.addEventListener('click', handlePrev);
+        bookmarkBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            handleBookmark();
+        });
+        audioBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            handleAudio();
+        });
+
+        // Difficulty button events
+        difficultyBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const difficulty = btn.dataset.difficulty;
+                handleDifficulty(difficulty);
+            });
+        });
+
+        // Mobile menu events
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+        });
+
+        closeSidebar.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+
+        mobileMenuOverlay.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            
+            const toggleSpan = themeToggle.querySelector('span');
+            if (isDark) {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+            
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+
+        // Audio toggle functionality
+        const audioToggle = document.getElementById('audioToggle');
+        let audioEnabled = true;
+
+        audioToggle.addEventListener('click', () => {
+            audioEnabled = !audioEnabled;
+            const toggleSpan = audioToggle.querySelector('span');
+            
+            if (audioEnabled) {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+                audioToggle.classList.add('bg-primary');
+                audioToggle.classList.remove('bg-gray-300');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+                audioToggle.classList.remove('bg-primary');
+                audioToggle.classList.add('bg-gray-300');
+            }
+        });
+
+        // Language selection
+        const languageSelect = document.getElementById('languageSelect');
+        languageSelect.addEventListener('change', (e) => {
+            localStorage.setItem('selectedLanguage', e.target.value);
+            console.log('Language changed to:', e.target.value);
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            switch(e.key) {
+                case ' ':
+                case 'Enter':
+                    e.preventDefault();
+                    handleFlip();
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    handlePrev();
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    handleNext();
+                    break;
+                case '1':
+                    e.preventDefault();
+                    handleDifficulty('easy');
+                    break;
+                case '2':
+                    e.preventDefault();
+                    handleDifficulty('medium');
+                    break;
+                case '3':
+                    e.preventDefault();
+                    handleDifficulty('hard');
+                    break;
+                case 'b':
+                    e.preventDefault();
+                    handleBookmark();
+                    break;
+            }
+        });
+
+        // Load saved preferences
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            html.classList.toggle('dark', savedTheme === 'dark');
+            const toggleSpan = themeToggle.querySelector('span');
+            if (savedTheme === 'dark') {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            }
+        }
+
+        const savedLanguage = localStorage.getItem('selectedLanguage');
+        if (savedLanguage) {
+            languageSelect.value = savedLanguage;
+        }
+
+        // Initialize the app
+        init();
+    </script>
+</body>
+</html>

pages/quiz_dashboard.html

@@ -0,0 +1,409 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quiz Dashboard - TriviaVerse Quiz</title>
+    <link rel="stylesheet" href="../css/main.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body class="bg-background text-text-primary transition-theme">
+    <!-- Mobile Menu Overlay -->
+    <div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"></div>
+    
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-full w-80 bg-surface border-r border-border transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-50 lg:z-auto">
+        <div class="p-6 border-b border-border">
+            <!-- Logo -->
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                    <i class="fas fa-brain text-white text-lg"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-text-primary">TriviaVerse</h1>
+                    <p class="text-sm text-text-secondary">Quiz Platform</p>
+                </div>
+            </div>
+            
+            <!-- Close button for mobile -->
+            <button id="closeSidebar" class="absolute top-4 right-4 lg:hidden text-text-secondary hover:text-text-primary">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Navigation -->
+        <nav class="p-6 space-y-2">
+            <a href="quiz_dashboard.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary text-white">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="active_quiz_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-play-circle"></i>
+                <span>Active Quiz</span>
+            </a>
+            <a href="quiz_results_statistics.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-chart-bar"></i>
+                <span>Statistics</span>
+            </a>
+            <a href="topic_selection_browse.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-book"></i>
+                <span>Browse Topics</span>
+            </a>
+            <a href="settings_preferences.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+        </nav>
+        
+        <!-- Game Settings -->
+        <div class="p-6 border-t border-border">
+            <h3 class="text-sm font-semibold text-text-primary mb-4">Game Settings</h3>
+            
+            <!-- Language Switcher -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Language</label>
+                <select id="languageSelect" class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                    <option value="en">English</option>
+                    <option value="te">తెలుగు (Telugu)</option>
+                    <option value="hi">हिंदी (Hindi)</option>
+                    <option value="kn">ಕನ್ನಡ (Kannada)</option>
+                </select>
+            </div>
+            
+            <!-- Theme Toggle -->
+            <div class="flex items-center justify-between">
+                <span class="text-sm text-text-secondary">Dark Theme</span>
+                <button id="themeToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                </button>
+            </div>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="lg:ml-80 min-h-screen">
+        <!-- Header -->
+        <header class="bg-surface border-b border-border p-4 lg:p-6">
+            <div class="flex items-center justify-between">
+                <!-- Mobile Menu Button -->
+                <button id="mobileMenuBtn" class="lg:hidden text-text-primary hover:text-primary">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                
+                <!-- Welcome Message -->
+                <div class="flex-1 lg:flex-none">
+                    <h2 class="text-2xl font-bold text-text-primary">Welcome back, Quiz Master!</h2>
+                    <p class="text-text-secondary mt-1">Ready to challenge your knowledge today?</p>
+                </div>
+                
+                <!-- User Avatar -->
+                <div class="hidden lg:flex items-center space-x-3">
+                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="User Avatar" class="w-10 h-10 rounded-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;" />
+                    <div>
+                        <p class="text-sm font-medium text-text-primary">John Doe</p>
+                        <p class="text-xs text-text-secondary">Level 5 Quizzer</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Dashboard Content -->
+        <div class="p-4 lg:p-6 space-y-6">
+            <!-- Quick Stats -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <!-- Current Streak -->
+                <div class="card p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Current Streak</p>
+                            <p class="text-3xl font-bold text-primary">12</p>
+                        </div>
+                        <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-fire text-primary text-xl"></i>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="progress-bar h-2">
+                            <div class="progress-fill" style="width: 80%"></div>
+                        </div>
+                        <p class="text-xs text-text-secondary mt-1">8 more to beat your record!</p>
+                    </div>
+                </div>
+                
+                <!-- Best Streak -->
+                <div class="card p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Best Streak</p>
+                            <p class="text-3xl font-bold text-accent">20</p>
+                        </div>
+                        <div class="w-12 h-12 bg-accent-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-trophy text-accent text-xl"></i>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-xs text-success">Personal Best!</p>
+                    </div>
+                </div>
+                
+                <!-- Recent Performance -->
+                <div class="card p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-text-secondary text-sm">Avg. Score</p>
+                            <p class="text-3xl font-bold text-secondary">85%</p>
+                        </div>
+                        <div class="w-12 h-12 bg-secondary-100 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-chart-line text-secondary text-xl"></i>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-xs text-success">+5% from last week</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Game Mode Selection -->
+            <div class="card p-6">
+                <h3 class="text-xl font-semibold text-text-primary mb-4">Choose Your Game Mode</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <!-- Multiple Choice Quiz -->
+                    <div class="border-2 border-primary bg-primary-50 rounded-lg p-6 cursor-pointer hover:shadow-lg transition-all">
+                        <div class="text-center">
+                            <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
+                                <i class="fas fa-list-ul text-white text-2xl"></i>
+                            </div>
+                            <h4 class="text-lg font-semibold text-primary mb-2">Multiple Choice</h4>
+                            <p class="text-sm text-text-secondary">Classic quiz format with 4 options</p>
+                            <div class="mt-4">
+                                <span class="inline-block bg-primary text-white text-xs px-2 py-1 rounded-full">Most Popular</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- True/False -->
+                    <div class="border border-border rounded-lg p-6 cursor-pointer hover:shadow-lg transition-all hover:border-secondary">
+                        <div class="text-center">
+                            <div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                <i class="fas fa-check-double text-secondary text-2xl"></i>
+                            </div>
+                            <h4 class="text-lg font-semibold text-text-primary mb-2">True/False</h4>
+                            <p class="text-sm text-text-secondary">Quick binary choice questions</p>
+                            <div class="mt-4">
+                                <span class="inline-block bg-secondary-100 text-secondary text-xs px-2 py-1 rounded-full">Coming Soon</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Timed Challenge -->
+                    <div class="border border-border rounded-lg p-6 cursor-pointer hover:shadow-lg transition-all hover:border-accent">
+                        <div class="text-center">
+                            <div class="w-16 h-16 bg-accent-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                <i class="fas fa-stopwatch text-accent text-2xl"></i>
+                            </div>
+                            <h4 class="text-lg font-semibold text-text-primary mb-2">Timed Challenge</h4>
+                            <p class="text-sm text-text-secondary">Race against the clock</p>
+                            <div class="mt-4">
+                                <span class="inline-block bg-accent-100 text-accent text-xs px-2 py-1 rounded-full">Coming Soon</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Topic Selection -->
+            <div class="card p-6">
+                <h3 class="text-xl font-semibold text-text-primary mb-4">Select Your Topic</h3>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <!-- Topic Dropdown -->
+                    <div>
+                        <label class="block text-sm font-medium text-text-secondary mb-2">Choose Topic</label>
+                        <select id="topicSelect" class="w-full bg-background border border-border rounded-lg px-4 py-3 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                            <option value>Select a topic...</option>
+                            <option value="python">🐍 Python Programming</option>
+                            <option value="javascript">⚡ JavaScript</option>
+                            <option value="science">🔬 General Science</option>
+                            <option value="history">📚 World History</option>
+                            <option value="geography">🌍 Geography</option>
+                            <option value="literature">📖 Literature</option>
+                            <option value="mathematics">🔢 Mathematics</option>
+                            <option value="technology">💻 Technology</option>
+                        </select>
+                    </div>
+                    
+                    <!-- Trending Topics -->
+                    <div>
+                        <h4 class="text-sm font-medium text-text-secondary mb-3">🔥 Trending Topics</h4>
+                        <div class="space-y-2">
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg border border-border hover:border-primary cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
+                                        <i class="fab fa-python text-primary text-sm"></i>
+                                    </div>
+                                    <div>
+                                        <p class="text-sm font-medium text-text-primary">Python Programming</p>
+                                        <p class="text-xs text-text-secondary">Featured Topic</p>
+                                    </div>
+                                </div>
+                                <span class="text-xs bg-primary text-white px-2 py-1 rounded-full">Hot</span>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg border border-border hover:border-secondary cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-8 h-8 bg-secondary-100 rounded-full flex items-center justify-center">
+                                        <i class="fas fa-atom text-secondary text-sm"></i>
+                                    </div>
+                                    <div>
+                                        <p class="text-sm font-medium text-text-primary">Quantum Physics</p>
+                                        <p class="text-xs text-text-secondary">Advanced Science</p>
+                                    </div>
+                                </div>
+                                <span class="text-xs bg-secondary text-white px-2 py-1 rounded-full">New</span>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg border border-border hover:border-accent cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-8 h-8 bg-accent-100 rounded-full flex items-center justify-center">
+                                        <i class="fas fa-globe text-accent text-sm"></i>
+                                    </div>
+                                    <div>
+                                        <p class="text-sm font-medium text-text-primary">World Geography</p>
+                                        <p class="text-xs text-text-secondary">Popular Choice</p>
+                                    </div>
+                                </div>
+                                <span class="text-xs bg-accent text-white px-2 py-1 rounded-full">Top</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Start Quiz Button -->
+            <div class="text-center">
+                <button id="startQuizBtn" class="btn btn-primary text-lg px-8 py-4 rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
+                    <i class="fas fa-play mr-2"></i>
+                    Start Quiz Adventure
+                </button>
+                <p class="text-sm text-text-secondary mt-2">Select a topic above to begin your quiz journey</p>
+            </div>
+        </div>
+    </main>
+    
+    <script>
+        // Mobile menu functionality
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.getElementById('sidebar');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+        const closeSidebar = document.getElementById('closeSidebar');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+        });
+        
+        closeSidebar.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        mobileMenuOverlay.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            
+            // Update toggle button
+            const toggleSpan = themeToggle.querySelector('span');
+            if (isDark) {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+            
+            // Save preference
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+        
+        // Load saved theme
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            html.classList.toggle('dark', savedTheme === 'dark');
+            const toggleSpan = themeToggle.querySelector('span');
+            if (savedTheme === 'dark') {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+        }
+        
+        // Language selection
+        const languageSelect = document.getElementById('languageSelect');
+        languageSelect.addEventListener('change', (e) => {
+            localStorage.setItem('selectedLanguage', e.target.value);
+            // Here you would implement language switching logic
+            console.log('Language changed to:', e.target.value);
+        });
+        
+        // Load saved language
+        const savedLanguage = localStorage.getItem('selectedLanguage');
+        if (savedLanguage) {
+            languageSelect.value = savedLanguage;
+        }
+        
+        // Topic selection
+        const topicSelect = document.getElementById('topicSelect');
+        const startQuizBtn = document.getElementById('startQuizBtn');
+        
+        topicSelect.addEventListener('change', (e) => {
+            if (e.target.value) {
+                startQuizBtn.disabled = false;
+                startQuizBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+            } else {
+                startQuizBtn.disabled = true;
+                startQuizBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            }
+        });
+        
+        // Start quiz functionality
+        startQuizBtn.addEventListener('click', () => {
+            const selectedTopic = topicSelect.value;
+            if (selectedTopic) {
+                localStorage.setItem('selectedTopic', selectedTopic);
+                window.location.href = 'active_quiz_interface.html';
+            } else {
+                alert('Please select a topic first!');
+            }
+        });
+        
+        // Trending topic clicks
+        document.querySelectorAll('[data-topic]').forEach(topic => {
+            topic.addEventListener('click', (e) => {
+                const topicValue = e.currentTarget.dataset.topic;
+                topicSelect.value = topicValue;
+                topicSelect.dispatchEvent(new Event('change'));
+            });
+        });
+        
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            // Set initial state of start button
+            if (!topicSelect.value) {
+                startQuizBtn.disabled = true;
+                startQuizBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            }
+        });
+    </script>
+</body>
+</html>

pages/quiz_results_statistics.html

@@ -0,0 +1,543 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quiz Results & Statistics - TriviaVerse Quiz</title>
+    <link rel="stylesheet" href="../css/main.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body class="bg-background text-text-primary transition-theme">
+    <!-- Mobile Menu Overlay -->
+    <div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"></div>
+    
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-full w-80 bg-surface border-r border-border transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-50 lg:z-auto">
+        <div class="p-6 border-b border-border">
+            <!-- Logo -->
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                    <i class="fas fa-brain text-white text-lg"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-text-primary">TriviaVerse</h1>
+                    <p class="text-sm text-text-secondary">Quiz Platform</p>
+                </div>
+            </div>
+            
+            <!-- Close button for mobile -->
+            <button id="closeSidebar" class="absolute top-4 right-4 lg:hidden text-text-secondary hover:text-text-primary">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Navigation -->
+        <nav class="p-6 space-y-2">
+            <a href="quiz_dashboard.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="active_quiz_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-play-circle"></i>
+                <span>Active Quiz</span>
+            </a>
+            <a href="quiz_results_statistics.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary text-white">
+                <i class="fas fa-chart-bar"></i>
+                <span>Statistics</span>
+            </a>
+            <a href="topic_selection_browse.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-book"></i>
+                <span>Browse Topics</span>
+            </a>
+            <a href="settings_preferences.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+        </nav>
+        
+        <!-- Game Settings -->
+        <div class="p-6 border-t border-border">
+            <h3 class="text-sm font-semibold text-text-primary mb-4">Game Settings</h3>
+            
+            <!-- Language Switcher -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Language</label>
+                <select id="languageSelect" class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                    <option value="en">English</option>
+                    <option value="te">తెలుగు (Telugu)</option>
+                    <option value="hi">हिंदी (Hindi)</option>
+                    <option value="kn">ಕನ್ನಡ (Kannada)</option>
+                </select>
+            </div>
+            
+            <!-- Theme Toggle -->
+            <div class="flex items-center justify-between">
+                <span class="text-sm text-text-secondary">Dark Theme</span>
+                <button id="themeToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                </button>
+            </div>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="lg:ml-80 min-h-screen">
+        <!-- Header -->
+        <header class="bg-surface border-b border-border p-4 lg:p-6">
+            <div class="flex items-center justify-between">
+                <!-- Mobile Menu Button -->
+                <button id="mobileMenuBtn" class="lg:hidden text-text-primary hover:text-primary">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                
+                <!-- Page Title -->
+                <div class="flex-1 lg:flex-none">
+                    <h2 class="text-2xl font-bold text-text-primary">Quiz Results & Statistics</h2>
+                    <p class="text-text-secondary mt-1">Your performance analysis and progress tracking</p>
+                </div>
+                
+                <!-- User Avatar -->
+                <div class="hidden lg:flex items-center space-x-3">
+                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="User Avatar" class="w-10 h-10 rounded-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;" />
+                    <div>
+                        <p class="text-sm font-medium text-text-primary">John Doe</p>
+                        <p class="text-xs text-text-secondary">Level 5 Quizzer</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Results Content -->
+        <div class="p-4 lg:p-6 space-y-6">
+            <!-- Completion Celebration -->
+            <div class="card p-6 lg:p-8 text-center bg-gradient-to-br from-primary-50 to-secondary-50 border-primary-100">
+                <div class="mb-6">
+                    <div class="w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-trophy text-white text-3xl"></i>
+                    </div>
+                    <h3 class="text-3xl font-bold text-primary mb-2">Quiz Completed!</h3>
+                    <p class="text-text-secondary">Congratulations on finishing the Python Programming quiz</p>
+                </div>
+                
+                <!-- Final Score Display -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    <div class="text-center">
+                        <div class="text-4xl font-bold text-primary mb-2">85%</div>
+                        <p class="text-sm text-text-secondary">Final Score</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-4xl font-bold text-secondary mb-2">17/20</div>
+                        <p class="text-sm text-text-secondary">Correct Answers</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-4xl font-bold text-accent mb-2">8:45</div>
+                        <p class="text-sm text-text-secondary">Time Taken</p>
+                    </div>
+                </div>
+                
+                <!-- Progress Ring -->
+                <div class="relative w-32 h-32 mx-auto mb-6">
+                    <svg class="w-32 h-32 transform -rotate-90" viewBox="0 0 120 120">
+                        <circle cx="60" cy="60" r="50" stroke="currentColor" stroke-width="8" fill="none" class="text-border opacity-20"/>
+                        <circle cx="60" cy="60" r="50" stroke="currentColor" stroke-width="8" fill="none" class="text-primary" stroke-dasharray="314" stroke-dashoffset="47" stroke-linecap="round"/>
+                    </svg>
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <span class="text-2xl font-bold text-primary">85%</span>
+                    </div>
+                </div>
+                
+                <!-- Social Sharing -->
+                <div class="flex justify-center space-x-3 mb-6">
+                    <button class="btn bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-lg">
+                        <i class="fab fa-twitter mr-2"></i>Share
+                    </button>
+                    <button class="btn bg-blue-800 text-white hover:bg-blue-900 px-4 py-2 rounded-lg">
+                        <i class="fab fa-facebook mr-2"></i>Share
+                    </button>
+                    <button class="btn bg-green-600 text-white hover:bg-green-700 px-4 py-2 rounded-lg">
+                        <i class="fab fa-whatsapp mr-2"></i>Share
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Desktop Two-Column Layout -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Left Column - Summary Metrics -->
+                <div class="space-y-6">
+                    <!-- Current Session Stats -->
+                    <div class="card p-6">
+                        <h3 class="text-lg font-semibold text-text-primary mb-4 flex items-center">
+                            <i class="fas fa-chart-line text-primary mr-2"></i>
+                            Session Summary
+                        </h3>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Questions Attempted</span>
+                                <span class="font-semibold text-text-primary">20/20</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Correct Answers</span>
+                                <span class="font-semibold text-success">17</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Incorrect Answers</span>
+                                <span class="font-semibold text-error">3</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Accuracy Rate</span>
+                                <span class="font-semibold text-primary">85%</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Average Time per Question</span>
+                                <span class="font-semibold text-text-primary">26s</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Historical Performance -->
+                    <div class="card p-6">
+                        <h3 class="text-lg font-semibold text-text-primary mb-4 flex items-center">
+                            <i class="fas fa-history text-secondary mr-2"></i>
+                            Historical Performance
+                        </h3>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Total Quizzes Taken</span>
+                                <span class="font-semibold text-text-primary">47</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Average Score</span>
+                                <span class="font-semibold text-primary">78%</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Best Score</span>
+                                <span class="font-semibold text-success">95%</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Current Streak</span>
+                                <span class="font-semibold text-accent">12 quizzes</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-text-secondary">Best Streak</span>
+                                <span class="font-semibold text-accent">20 quizzes</span>
+                            </div>
+                        </div>
+                        
+                        <!-- Improvement Trend -->
+                        <div class="mt-6">
+                            <h4 class="text-sm font-medium text-text-secondary mb-3">Performance Trend (Last 7 Days)</h4>
+                            <div class="h-32 bg-background rounded-lg p-4 flex items-end justify-between space-x-1">
+                                <div class="bg-primary h-16 w-6 rounded-t"></div>
+                                <div class="bg-primary h-20 w-6 rounded-t"></div>
+                                <div class="bg-primary h-12 w-6 rounded-t"></div>
+                                <div class="bg-primary h-24 w-6 rounded-t"></div>
+                                <div class="bg-primary h-18 w-6 rounded-t"></div>
+                                <div class="bg-primary h-22 w-6 rounded-t"></div>
+                                <div class="bg-primary h-28 w-6 rounded-t"></div>
+                            </div>
+                            <div class="flex justify-between text-xs text-text-secondary mt-2">
+                                <span>Mon</span>
+                                <span>Tue</span>
+                                <span>Wed</span>
+                                <span>Thu</span>
+                                <span>Fri</span>
+                                <span>Sat</span>
+                                <span>Sun</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Topic Performance -->
+                    <div class="card p-6">
+                        <h3 class="text-lg font-semibold text-text-primary mb-4 flex items-center">
+                            <i class="fas fa-book text-accent mr-2"></i>
+                            Topic Performance
+                        </h3>
+                        <div class="space-y-4">
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-sm text-text-secondary">Python Basics</span>
+                                    <span class="text-sm font-semibold text-success">90%</span>
+                                </div>
+                                <div class="progress-bar h-2">
+                                    <div class="progress-fill bg-success" style="width: 90%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-sm text-text-secondary">Data Structures</span>
+                                    <span class="text-sm font-semibold text-primary">85%</span>
+                                </div>
+                                <div class="progress-bar h-2">
+                                    <div class="progress-fill" style="width: 85%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-sm text-text-secondary">Object-Oriented Programming</span>
+                                    <span class="text-sm font-semibold text-warning">75%</span>
+                                </div>
+                                <div class="progress-bar h-2">
+                                    <div class="progress-fill bg-warning" style="width: 75%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-sm text-text-secondary">Advanced Concepts</span>
+                                    <span class="text-sm font-semibold text-error">65%</span>
+                                </div>
+                                <div class="progress-bar h-2">
+                                    <div class="progress-fill bg-error" style="width: 65%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Right Column - Detailed Breakdown -->
+                <div class="space-y-6">
+                    <!-- Question-by-Question Analysis -->
+                    <div class="card p-6">
+                        <h3 class="text-lg font-semibold text-text-primary mb-4 flex items-center">
+                            <i class="fas fa-list-check text-primary mr-2"></i>
+                            Question Analysis
+                        </h3>
+                        <div class="space-y-4 max-h-96 overflow-y-auto">
+                            <!-- Correct Answer -->
+                            <div class="border border-success-100 bg-success-50 rounded-lg p-4">
+                                <div class="flex items-start space-x-3">
+                                    <div class="w-8 h-8 bg-success rounded-full flex items-center justify-center flex-shrink-0">
+                                        <i class="fas fa-check text-white text-sm"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <p class="text-sm font-medium text-text-primary mb-1">Question 1</p>
+                                        <p class="text-sm text-text-secondary mb-2">What is the output of print(type([]))?</p>
+                                        <p class="text-xs text-success font-medium">Correct: &lt;class 'list'&gt;</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- Incorrect Answer -->
+                            <div class="border border-error-100 bg-error-50 rounded-lg p-4">
+                                <div class="flex items-start space-x-3">
+                                    <div class="w-8 h-8 bg-error rounded-full flex items-center justify-center flex-shrink-0">
+                                        <i class="fas fa-times text-white text-sm"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <p class="text-sm font-medium text-text-primary mb-1">Question 5</p>
+                                        <p class="text-sm text-text-secondary mb-2">Which method is used to add an element to a set?</p>
+                                        <p class="text-xs text-error font-medium mb-1">Your answer: append()</p>
+                                        <p class="text-xs text-success font-medium mb-2">Correct: add()</p>
+                                        <p class="text-xs text-text-secondary">Explanation: Sets use the add() method to insert elements, while lists use append().</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- More questions... -->
+                            <div class="border border-success-100 bg-success-50 rounded-lg p-4">
+                                <div class="flex items-start space-x-3">
+                                    <div class="w-8 h-8 bg-success rounded-full flex items-center justify-center flex-shrink-0">
+                                        <i class="fas fa-check text-white text-sm"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <p class="text-sm font-medium text-text-primary mb-1">Question 8</p>
+                                        <p class="text-sm text-text-secondary mb-2">What does the len() function return?</p>
+                                        <p class="text-xs text-success font-medium">Correct: The number of items in an object</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="border border-error-100 bg-error-50 rounded-lg p-4">
+                                <div class="flex items-start space-x-3">
+                                    <div class="w-8 h-8 bg-error rounded-full flex items-center justify-center flex-shrink-0">
+                                        <i class="fas fa-times text-white text-sm"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <p class="text-sm font-medium text-text-primary mb-1">Question 12</p>
+                                        <p class="text-sm text-text-secondary mb-2">Which keyword is used to define a function in Python?</p>
+                                        <p class="text-xs text-error font-medium mb-1">Your answer: function</p>
+                                        <p class="text-xs text-success font-medium mb-2">Correct: def</p>
+                                        <p class="text-xs text-text-secondary">Explanation: Python uses 'def' keyword to define functions, not 'function'.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Knowledge Gaps -->
+                    <div class="card p-6">
+                        <h3 class="text-lg font-semibold text-text-primary mb-4 flex items-center">
+                            <i class="fas fa-lightbulb text-warning mr-2"></i>
+                            Areas for Improvement
+                        </h3>
+                        <div class="space-y-3">
+                            <div class="flex items-center space-x-3 p-3 bg-warning-50 border border-warning-100 rounded-lg">
+                                <i class="fas fa-exclamation-triangle text-warning"></i>
+                                <div>
+                                    <p class="text-sm font-medium text-text-primary">Set Operations</p>
+                                    <p class="text-xs text-text-secondary">Review add(), remove(), and discard() methods</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-3 p-3 bg-warning-50 border border-warning-100 rounded-lg">
+                                <i class="fas fa-exclamation-triangle text-warning"></i>
+                                <div>
+                                    <p class="text-sm font-medium text-text-primary">Function Definition</p>
+                                    <p class="text-xs text-text-secondary">Practice function syntax and parameters</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-3 p-3 bg-warning-50 border border-warning-100 rounded-lg">
+                                <i class="fas fa-exclamation-triangle text-warning"></i>
+                                <div>
+                                    <p class="text-sm font-medium text-text-primary">Exception Handling</p>
+                                    <p class="text-xs text-text-secondary">Study try-except blocks and error types</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Action Buttons -->
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button onclick="window.location.href='active_quiz_interface.html'" class="btn btn-primary px-6 py-3 rounded-lg text-lg">
+                    <i class="fas fa-redo mr-2"></i>
+                    Retake Quiz
+                </button>
+                <button onclick="window.location.href='topic_selection_browse.html'" class="btn btn-secondary px-6 py-3 rounded-lg text-lg">
+                    <i class="fas fa-book mr-2"></i>
+                    Try New Topic
+                </button>
+                <button onclick="window.location.href='quiz_dashboard.html'" class="btn bg-surface border border-border text-text-primary hover:bg-surface-hover px-6 py-3 rounded-lg text-lg">
+                    <i class="fas fa-home mr-2"></i>
+                    Return to Dashboard
+                </button>
+            </div>
+        </div>
+    </main>
+    
+    <script>
+        // Mobile menu functionality
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.getElementById('sidebar');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+        const closeSidebar = document.getElementById('closeSidebar');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+        });
+        
+        closeSidebar.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        mobileMenuOverlay.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            
+            // Update toggle button
+            const toggleSpan = themeToggle.querySelector('span');
+            if (isDark) {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+            
+            // Save preference
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+        
+        // Load saved theme
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            html.classList.toggle('dark', savedTheme === 'dark');
+            const toggleSpan = themeToggle.querySelector('span');
+            if (savedTheme === 'dark') {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+        }
+        
+        // Language selection
+        const languageSelect = document.getElementById('languageSelect');
+        languageSelect.addEventListener('change', (e) => {
+            localStorage.setItem('selectedLanguage', e.target.value);
+            console.log('Language changed to:', e.target.value);
+        });
+        
+        // Load saved language
+        const savedLanguage = localStorage.getItem('selectedLanguage');
+        if (savedLanguage) {
+            languageSelect.value = savedLanguage;
+        }
+        
+        // Load quiz results from localStorage
+        document.addEventListener('DOMContentLoaded', () => {
+            const quizResults = JSON.parse(localStorage.getItem('quizResults') || '{}');
+            
+            // Update results if available
+            if (quizResults.score) {
+                // Update score displays
+                document.querySelectorAll('.score-display').forEach(el => {
+                    el.textContent = quizResults.score + '%';
+                });
+            }
+            
+            // Animate progress ring
+            setTimeout(() => {
+                const progressRing = document.querySelector('circle[stroke-dashoffset]');
+                if (progressRing) {
+                    const score = 85; // Current score
+                    const circumference = 314;
+                    const offset = circumference - (score / 100) * circumference;
+                    progressRing.style.strokeDashoffset = offset;
+                }
+            }, 500);
+        });
+        
+        // Social sharing functionality
+        document.querySelectorAll('[class*="fa-twitter"], [class*="fa-facebook"], [class*="fa-whatsapp"]').forEach(btn => {
+            btn.closest('button').addEventListener('click', (e) => {
+                const platform = e.currentTarget.querySelector('i').classList.contains('fa-twitter') ? 'twitter' :
+                                e.currentTarget.querySelector('i').classList.contains('fa-facebook') ? 'facebook' : 'whatsapp';
+                
+                const shareText = "I just scored 85% on a Python Programming quiz on TriviaVerse! 🎉";
+                const shareUrl = window.location.origin;
+                
+                let url = '';
+                switch(platform) {
+                    case 'twitter':
+                        url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`;
+                        break;
+                    case 'facebook':
+                        url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}&quote=${encodeURIComponent(shareText)}`;
+                        break;
+                    case 'whatsapp':
+                        url = `https://wa.me/?text=${encodeURIComponent(shareText + ' ' + shareUrl)}`;
+                        break;
+                }
+                
+                if (url) {
+                    window.open(url, '_blank', 'width=600,height=400');
+                }
+            });
+        });
+    </script>
+</body>
+</html>

pages/settings_preferences.html

@@ -0,0 +1,1015 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Settings & Preferences - TriviaVerse Quiz</title>
+    <link rel="stylesheet" href="../css/main.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body class="bg-background text-text-primary transition-theme">
+    <!-- Mobile Menu Overlay -->
+    <div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"></div>
+    
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-full w-80 bg-surface border-r border-border transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-50 lg:z-auto">
+        <div class="p-6 border-b border-border">
+            <!-- Logo -->
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                    <i class="fas fa-brain text-white text-lg"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-text-primary">TriviaVerse</h1>
+                    <p class="text-sm text-text-secondary">Quiz Platform</p>
+                </div>
+            </div>
+            
+            <!-- Close button for mobile -->
+            <button id="closeSidebar" class="absolute top-4 right-4 lg:hidden text-text-secondary hover:text-text-primary">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Navigation -->
+        <nav class="p-6 space-y-2">
+            <a href="quiz_dashboard.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="active_quiz_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-play-circle"></i>
+                <span>Active Quiz</span>
+            </a>
+            <a href="quiz_results_statistics.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-chart-bar"></i>
+                <span>Statistics</span>
+            </a>
+            <a href="topic_selection_browse.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-book"></i>
+                <span>Browse Topics</span>
+            </a>
+            <a href="settings_preferences.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary text-white">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+        </nav>
+        
+        <!-- Game Settings -->
+        <div class="p-6 border-t border-border">
+            <h3 class="text-sm font-semibold text-text-primary mb-4">Game Settings</h3>
+            
+            <!-- Language Switcher -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Language</label>
+                <select id="languageSelect" class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                    <option value="en">English</option>
+                    <option value="te">తెలుగు (Telugu)</option>
+                    <option value="hi">हिंदी (Hindi)</option>
+                    <option value="kn">ಕನ್ನಡ (Kannada)</option>
+                </select>
+            </div>
+            
+            <!-- Theme Toggle -->
+            <div class="flex items-center justify-between">
+                <span class="text-sm text-text-secondary">Dark Theme</span>
+                <button id="themeToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                </button>
+            </div>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="lg:ml-80 min-h-screen">
+        <!-- Header -->
+        <header class="bg-surface border-b border-border p-4 lg:p-6">
+            <div class="flex items-center justify-between">
+                <!-- Mobile Menu Button -->
+                <button id="mobileMenuBtn" class="lg:hidden text-text-primary hover:text-primary">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                
+                <!-- Page Title -->
+                <div class="flex-1 lg:flex-none">
+                    <h2 class="text-2xl font-bold text-text-primary">Settings & Preferences</h2>
+                    <p class="text-text-secondary mt-1">Customize your quiz experience</p>
+                </div>
+                
+                <!-- User Avatar -->
+                <div class="hidden lg:flex items-center space-x-3">
+                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="User Avatar" class="w-10 h-10 rounded-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;" />
+                    <div>
+                        <p class="text-sm font-medium text-text-primary">John Doe</p>
+                        <p class="text-xs text-text-secondary">Level 5 Quizzer</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Settings Content -->
+        <div class="p-4 lg:p-6">
+            <!-- Desktop Layout: Two Panel -->
+            <div class="hidden lg:flex gap-6">
+                <!-- Settings Categories Sidebar -->
+                <div class="w-1/3">
+                    <div class="card p-6 sticky top-6">
+                        <h3 class="text-lg font-semibold text-text-primary mb-4">Settings Categories</h3>
+                        <nav class="space-y-2">
+                            <button class="settings-nav-btn active w-full text-left px-4 py-3 rounded-lg bg-primary text-white" data-section="language">
+                                <i class="fas fa-language mr-3"></i>
+                                Language Settings
+                            </button>
+                            <button class="settings-nav-btn w-full text-left px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors" data-section="theme">
+                                <i class="fas fa-palette mr-3"></i>
+                                Theme Preferences
+                            </button>
+                            <button class="settings-nav-btn w-full text-left px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors" data-section="quiz">
+                                <i class="fas fa-gamepad mr-3"></i>
+                                Quiz Configuration
+                            </button>
+                            <button class="settings-nav-btn w-full text-left px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors" data-section="notifications">
+                                <i class="fas fa-bell mr-3"></i>
+                                Notifications
+                            </button>
+                            <button class="settings-nav-btn w-full text-left px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors" data-section="data">
+                                <i class="fas fa-database mr-3"></i>
+                                Data Management
+                            </button>
+                            <button class="settings-nav-btn w-full text-left px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors" data-section="accessibility">
+                                <i class="fas fa-universal-access mr-3"></i>
+                                Accessibility
+                            </button>
+                        </nav>
+                    </div>
+                </div>
+                
+                <!-- Settings Content Area -->
+                <div class="flex-1">
+                    <div id="settingsContent" class="space-y-6">
+                        <!-- Language Settings Section -->
+                        <div id="languageSection" class="settings-section">
+                            <div class="card p-6">
+                                <div class="flex items-center mb-6">
+                                    <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
+                                        <i class="fas fa-language text-primary text-xl"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-semibold text-text-primary">Language Settings</h3>
+                                        <p class="text-text-secondary">Configure your preferred language and regional settings</p>
+                                    </div>
+                                </div>
+                                
+                                <div class="space-y-6">
+                                    <!-- Interface Language -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Interface Language</label>
+                                        <div class="grid grid-cols-2 gap-3">
+                                            <div class="language-option border-2 border-primary bg-primary-50 rounded-lg p-4 cursor-pointer">
+                                                <div class="flex items-center space-x-3">
+                                                    <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
+                                                        <span class="text-white text-sm font-bold">EN</span>
+                                                    </div>
+                                                    <div>
+                                                        <p class="font-medium text-primary">English</p>
+                                                        <p class="text-xs text-text-secondary">Default</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="language-option border border-border rounded-lg p-4 cursor-pointer hover:border-secondary">
+                                                <div class="flex items-center space-x-3">
+                                                    <div class="w-8 h-8 bg-secondary-100 rounded-full flex items-center justify-center">
+                                                        <span class="text-secondary text-sm font-bold">తె</span>
+                                                    </div>
+                                                    <div>
+                                                        <p class="font-medium text-text-primary">తెలుగు</p>
+                                                        <p class="text-xs text-text-secondary">Telugu</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="language-option border border-border rounded-lg p-4 cursor-pointer hover:border-accent">
+                                                <div class="flex items-center space-x-3">
+                                                    <div class="w-8 h-8 bg-accent-100 rounded-full flex items-center justify-center">
+                                                        <span class="text-accent text-sm font-bold">हि</span>
+                                                    </div>
+                                                    <div>
+                                                        <p class="font-medium text-text-primary">हिंदी</p>
+                                                        <p class="text-xs text-text-secondary">Hindi</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="language-option border border-border rounded-lg p-4 cursor-pointer hover:border-secondary">
+                                                <div class="flex items-center space-x-3">
+                                                    <div class="w-8 h-8 bg-secondary-100 rounded-full flex items-center justify-center">
+                                                        <span class="text-secondary text-sm font-bold">ಕ</span>
+                                                    </div>
+                                                    <div>
+                                                        <p class="font-medium text-text-primary">ಕನ್ನಡ</p>
+                                                        <p class="text-xs text-text-secondary">Kannada</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Font Settings -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Font Preferences</label>
+                                        <div class="space-y-4">
+                                            <div class="flex items-center justify-between">
+                                                <span class="text-text-secondary">Auto-load regional fonts</span>
+                                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                                </button>
+                                            </div>
+                                            <div class="flex items-center justify-between">
+                                                <span class="text-text-secondary">Unicode text rendering</span>
+                                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Theme Preferences Section -->
+                        <div id="themeSection" class="settings-section hidden">
+                            <div class="card p-6">
+                                <div class="flex items-center mb-6">
+                                    <div class="w-12 h-12 bg-accent-100 rounded-lg flex items-center justify-center mr-4">
+                                        <i class="fas fa-palette text-accent text-xl"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-semibold text-text-primary">Theme Preferences</h3>
+                                        <p class="text-text-secondary">Customize the visual appearance of your interface</p>
+                                    </div>
+                                </div>
+                                
+                                <div class="space-y-6">
+                                    <!-- Theme Selection -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Theme Mode</label>
+                                        <div class="grid grid-cols-2 gap-4">
+                                            <div class="theme-option border-2 border-primary bg-primary-50 rounded-lg p-4 cursor-pointer">
+                                                <div class="text-center">
+                                                    <div class="w-16 h-12 bg-background rounded-lg mx-auto mb-3 border border-border"></div>
+                                                    <p class="font-medium text-primary">Dark Theme</p>
+                                                    <p class="text-xs text-text-secondary">Current</p>
+                                                </div>
+                                            </div>
+                                            <div class="theme-option border border-border rounded-lg p-4 cursor-pointer hover:border-secondary">
+                                                <div class="text-center">
+                                                    <div class="w-16 h-12 bg-white rounded-lg mx-auto mb-3 border border-border"></div>
+                                                    <p class="font-medium text-text-primary">Light Theme</p>
+                                                    <p class="text-xs text-text-secondary">Alternative</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Color Customization -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Accent Color</label>
+                                        <div class="flex space-x-3">
+                                            <div class="w-8 h-8 bg-primary rounded-full cursor-pointer border-2 border-white shadow-md"></div>
+                                            <div class="w-8 h-8 bg-secondary rounded-full cursor-pointer border-2 border-transparent hover:border-white shadow-md"></div>
+                                            <div class="w-8 h-8 bg-accent rounded-full cursor-pointer border-2 border-transparent hover:border-white shadow-md"></div>
+                                            <div class="w-8 h-8 bg-success rounded-full cursor-pointer border-2 border-transparent hover:border-white shadow-md"></div>
+                                            <div class="w-8 h-8 bg-error rounded-full cursor-pointer border-2 border-transparent hover:border-white shadow-md"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Auto Theme -->
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <span class="text-text-primary">Auto theme switching</span>
+                                            <p class="text-xs text-text-secondary">Follow system preference</p>
+                                        </div>
+                                        <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors">
+                                            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Quiz Configuration Section -->
+                        <div id="quizSection" class="settings-section hidden">
+                            <div class="card p-6">
+                                <div class="flex items-center mb-6">
+                                    <div class="w-12 h-12 bg-secondary-100 rounded-lg flex items-center justify-center mr-4">
+                                        <i class="fas fa-gamepad text-secondary text-xl"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-semibold text-text-primary">Quiz Configuration</h3>
+                                        <p class="text-text-secondary">Set your default quiz preferences and difficulty</p>
+                                    </div>
+                                </div>
+                                
+                                <div class="space-y-6">
+                                    <!-- Timer Settings -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Default Timer (seconds)</label>
+                                        <div class="flex items-center space-x-4">
+                                            <input type="range" min="10" max="120" value="30" class="flex-1 h-2 bg-surface rounded-lg appearance-none cursor-pointer" />
+                                            <span class="text-text-primary font-medium w-12">30s</span>
+                                        </div>
+                                        <div class="flex justify-between text-xs text-text-secondary mt-1">
+                                            <span>10s</span>
+                                            <span>120s</span>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Difficulty Preference -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Default Difficulty</label>
+                                        <div class="grid grid-cols-3 gap-3">
+                                            <div class="difficulty-option border border-border rounded-lg p-3 cursor-pointer hover:border-success text-center">
+                                                <i class="fas fa-seedling text-success text-lg mb-2"></i>
+                                                <p class="text-sm font-medium text-text-primary">Easy</p>
+                                            </div>
+                                            <div class="difficulty-option border-2 border-accent bg-accent-50 rounded-lg p-3 cursor-pointer text-center">
+                                                <i class="fas fa-fire text-accent text-lg mb-2"></i>
+                                                <p class="text-sm font-medium text-accent">Medium</p>
+                                            </div>
+                                            <div class="difficulty-option border border-border rounded-lg p-3 cursor-pointer hover:border-error text-center">
+                                                <i class="fas fa-skull text-error text-lg mb-2"></i>
+                                                <p class="text-sm font-medium text-text-primary">Hard</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Quiz Features -->
+                                    <div class="space-y-4">
+                                        <div class="flex items-center justify-between">
+                                            <div>
+                                                <span class="text-text-primary">Enable hints</span>
+                                                <p class="text-xs text-text-secondary">Show helpful hints during quiz</p>
+                                            </div>
+                                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                            </button>
+                                        </div>
+                                        <div class="flex items-center justify-between">
+                                            <div>
+                                                <span class="text-text-primary">Auto-advance questions</span>
+                                                <p class="text-xs text-text-secondary">Move to next question automatically</p>
+                                            </div>
+                                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors">
+                                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                                            </button>
+                                        </div>
+                                        <div class="flex items-center justify-between">
+                                            <div>
+                                                <span class="text-text-primary">Sound effects</span>
+                                                <p class="text-xs text-text-secondary">Play sounds for correct/incorrect answers</p>
+                                            </div>
+                                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Notifications Section -->
+                        <div id="notificationsSection" class="settings-section hidden">
+                            <div class="card p-6">
+                                <div class="flex items-center mb-6">
+                                    <div class="w-12 h-12 bg-warning-100 rounded-lg flex items-center justify-center mr-4">
+                                        <i class="fas fa-bell text-warning text-xl"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-semibold text-text-primary">Notification Preferences</h3>
+                                        <p class="text-text-secondary">Manage your notification settings and reminders</p>
+                                    </div>
+                                </div>
+                                
+                                <div class="space-y-4">
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <span class="text-text-primary">Streak reminders</span>
+                                            <p class="text-xs text-text-secondary">Daily reminders to maintain your streak</p>
+                                        </div>
+                                        <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                        </button>
+                                    </div>
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <span class="text-text-primary">Achievement celebrations</span>
+                                            <p class="text-xs text-text-secondary">Notifications for milestones and achievements</p>
+                                        </div>
+                                        <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                        </button>
+                                    </div>
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <span class="text-text-primary">New topic alerts</span>
+                                            <p class="text-xs text-text-secondary">Notify when new quiz topics are available</p>
+                                        </div>
+                                        <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors">
+                                            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                                        </button>
+                                    </div>
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <span class="text-text-primary">Weekly progress reports</span>
+                                            <p class="text-xs text-text-secondary">Summary of your weekly quiz performance</p>
+                                        </div>
+                                        <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Data Management Section -->
+                        <div id="dataSection" class="settings-section hidden">
+                            <div class="card p-6">
+                                <div class="flex items-center mb-6">
+                                    <div class="w-12 h-12 bg-error-100 rounded-lg flex items-center justify-center mr-4">
+                                        <i class="fas fa-database text-error text-xl"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-semibold text-text-primary">Data Management</h3>
+                                        <p class="text-text-secondary">Manage your quiz data, statistics, and backups</p>
+                                    </div>
+                                </div>
+                                
+                                <div class="space-y-6">
+                                    <!-- Export Options -->
+                                    <div>
+                                        <h4 class="text-sm font-medium text-text-primary mb-3">Export Data</h4>
+                                        <div class="space-y-3">
+                                            <button class="w-full flex items-center justify-between p-4 border border-border rounded-lg hover:border-primary transition-colors">
+                                                <div class="flex items-center space-x-3">
+                                                    <i class="fas fa-chart-bar text-primary"></i>
+                                                    <div class="text-left">
+                                                        <p class="text-sm font-medium text-text-primary">Export Statistics</p>
+                                                        <p class="text-xs text-text-secondary">Download your quiz performance data</p>
+                                                    </div>
+                                                </div>
+                                                <i class="fas fa-download text-text-secondary"></i>
+                                            </button>
+                                            <button class="w-full flex items-center justify-between p-4 border border-border rounded-lg hover:border-secondary transition-colors">
+                                                <div class="flex items-center space-x-3">
+                                                    <i class="fas fa-history text-secondary"></i>
+                                                    <div class="text-left">
+                                                        <p class="text-sm font-medium text-text-primary">Export Progress</p>
+                                                        <p class="text-xs text-text-secondary">Backup your learning progress</p>
+                                                    </div>
+                                                </div>
+                                                <i class="fas fa-download text-text-secondary"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Reset Options -->
+                                    <div>
+                                        <h4 class="text-sm font-medium text-text-primary mb-3">Reset Data</h4>
+                                        <div class="space-y-3">
+                                            <button class="w-full flex items-center justify-between p-4 border border-warning rounded-lg hover:bg-warning-50 transition-colors">
+                                                <div class="flex items-center space-x-3">
+                                                    <i class="fas fa-undo text-warning"></i>
+                                                    <div class="text-left">
+                                                        <p class="text-sm font-medium text-warning">Reset Statistics</p>
+                                                        <p class="text-xs text-text-secondary">Clear all quiz statistics and scores</p>
+                                                    </div>
+                                                </div>
+                                                <i class="fas fa-exclamation-triangle text-warning"></i>
+                                            </button>
+                                            <button class="w-full flex items-center justify-between p-4 border border-error rounded-lg hover:bg-error-50 transition-colors">
+                                                <div class="flex items-center space-x-3">
+                                                    <i class="fas fa-trash text-error"></i>
+                                                    <div class="text-left">
+                                                        <p class="text-sm font-medium text-error">Reset All Data</p>
+                                                        <p class="text-xs text-text-secondary">Delete all data and start fresh</p>
+                                                    </div>
+                                                </div>
+                                                <i class="fas fa-exclamation-triangle text-error"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Accessibility Section -->
+                        <div id="accessibilitySection" class="settings-section hidden">
+                            <div class="card p-6">
+                                <div class="flex items-center mb-6">
+                                    <div class="w-12 h-12 bg-success-100 rounded-lg flex items-center justify-center mr-4">
+                                        <i class="fas fa-universal-access text-success text-xl"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="text-xl font-semibold text-text-primary">Accessibility Settings</h3>
+                                        <p class="text-text-secondary">Customize accessibility features for better usability</p>
+                                    </div>
+                                </div>
+                                
+                                <div class="space-y-6">
+                                    <!-- Font Size -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Font Size</label>
+                                        <div class="flex items-center space-x-4">
+                                            <span class="text-sm text-text-secondary">A</span>
+                                            <input type="range" min="12" max="24" value="16" class="flex-1 h-2 bg-surface rounded-lg appearance-none cursor-pointer" />
+                                            <span class="text-lg text-text-secondary">A</span>
+                                        </div>
+                                        <div class="flex justify-between text-xs text-text-secondary mt-1">
+                                            <span>Small</span>
+                                            <span>Large</span>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Contrast Options -->
+                                    <div>
+                                        <label class="block text-sm font-medium text-text-primary mb-3">Contrast Level</label>
+                                        <div class="grid grid-cols-3 gap-3">
+                                            <div class="contrast-option border border-border rounded-lg p-3 cursor-pointer hover:border-primary text-center">
+                                                <div class="w-8 h-8 bg-gray-300 rounded mx-auto mb-2"></div>
+                                                <p class="text-xs text-text-primary">Normal</p>
+                                            </div>
+                                            <div class="contrast-option border-2 border-primary bg-primary-50 rounded-lg p-3 cursor-pointer text-center">
+                                                <div class="w-8 h-8 bg-gray-600 rounded mx-auto mb-2"></div>
+                                                <p class="text-xs text-primary">High</p>
+                                            </div>
+                                            <div class="contrast-option border border-border rounded-lg p-3 cursor-pointer hover:border-primary text-center">
+                                                <div class="w-8 h-8 bg-black rounded mx-auto mb-2"></div>
+                                                <p class="text-xs text-text-primary">Maximum</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Accessibility Features -->
+                                    <div class="space-y-4">
+                                        <div class="flex items-center justify-between">
+                                            <div>
+                                                <span class="text-text-primary">Reduce motion</span>
+                                                <p class="text-xs text-text-secondary">Minimize animations and transitions</p>
+                                            </div>
+                                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors">
+                                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                                            </button>
+                                        </div>
+                                        <div class="flex items-center justify-between">
+                                            <div>
+                                                <span class="text-text-primary">Screen reader support</span>
+                                                <p class="text-xs text-text-secondary">Enhanced compatibility with screen readers</p>
+                                            </div>
+                                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                            </button>
+                                        </div>
+                                        <div class="flex items-center justify-between">
+                                            <div>
+                                                <span class="text-text-primary">Keyboard navigation</span>
+                                                <p class="text-xs text-text-secondary">Enhanced keyboard shortcuts and navigation</p>
+                                            </div>
+                                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Mobile Layout: Accordion Style -->
+            <div class="lg:hidden space-y-4">
+                <!-- Language Settings Accordion -->
+                <div class="card">
+                    <button class="accordion-btn w-full flex items-center justify-between p-4 text-left" data-target="mobileLanguage">
+                        <div class="flex items-center space-x-3">
+                            <i class="fas fa-language text-primary"></i>
+                            <span class="font-medium text-text-primary">Language Settings</span>
+                        </div>
+                        <i class="fas fa-chevron-down text-text-secondary transition-transform"></i>
+                    </button>
+                    <div id="mobileLanguage" class="accordion-content hidden p-4 border-t border-border">
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-text-primary mb-2">Interface Language</label>
+                                <select class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary">
+                                    <option value="en">English</option>
+                                    <option value="te">తెలుగు (Telugu)</option>
+                                    <option value="hi">हिंदी (Hindi)</option>
+                                    <option value="kn">ಕನ್ನಡ (Kannada)</option>
+                                </select>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-text-secondary">Auto-load regional fonts</span>
+                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Theme Preferences Accordion -->
+                <div class="card">
+                    <button class="accordion-btn w-full flex items-center justify-between p-4 text-left" data-target="mobileTheme">
+                        <div class="flex items-center space-x-3">
+                            <i class="fas fa-palette text-accent"></i>
+                            <span class="font-medium text-text-primary">Theme Preferences</span>
+                        </div>
+                        <i class="fas fa-chevron-down text-text-secondary transition-transform"></i>
+                    </button>
+                    <div id="mobileTheme" class="accordion-content hidden p-4 border-t border-border">
+                        <div class="space-y-4">
+                            <div class="flex items-center justify-between">
+                                <span class="text-text-primary">Dark Theme</span>
+                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                </button>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-text-secondary">Auto theme switching</span>
+                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Quiz Configuration Accordion -->
+                <div class="card">
+                    <button class="accordion-btn w-full flex items-center justify-between p-4 text-left" data-target="mobileQuiz">
+                        <div class="flex items-center space-x-3">
+                            <i class="fas fa-gamepad text-secondary"></i>
+                            <span class="font-medium text-text-primary">Quiz Configuration</span>
+                        </div>
+                        <i class="fas fa-chevron-down text-text-secondary transition-transform"></i>
+                    </button>
+                    <div id="mobileQuiz" class="accordion-content hidden p-4 border-t border-border">
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-text-primary mb-2">Default Timer</label>
+                                <input type="range" min="10" max="120" value="30" class="w-full h-2 bg-surface rounded-lg appearance-none cursor-pointer" />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-text-secondary">Enable hints</span>
+                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Notifications Accordion -->
+                <div class="card">
+                    <button class="accordion-btn w-full flex items-center justify-between p-4 text-left" data-target="mobileNotifications">
+                        <div class="flex items-center space-x-3">
+                            <i class="fas fa-bell text-warning"></i>
+                            <span class="font-medium text-text-primary">Notifications</span>
+                        </div>
+                        <i class="fas fa-chevron-down text-text-secondary transition-transform"></i>
+                    </button>
+                    <div id="mobileNotifications" class="accordion-content hidden p-4 border-t border-border">
+                        <div class="space-y-4">
+                            <div class="flex items-center justify-between">
+                                <span class="text-text-secondary">Streak reminders</span>
+                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                </button>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-text-secondary">Achievement celebrations</span>
+                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Data Management Accordion -->
+                <div class="card">
+                    <button class="accordion-btn w-full flex items-center justify-between p-4 text-left" data-target="mobileData">
+                        <div class="flex items-center space-x-3">
+                            <i class="fas fa-database text-error"></i>
+                            <span class="font-medium text-text-primary">Data Management</span>
+                        </div>
+                        <i class="fas fa-chevron-down text-text-secondary transition-transform"></i>
+                    </button>
+                    <div id="mobileData" class="accordion-content hidden p-4 border-t border-border">
+                        <div class="space-y-3">
+                            <button class="w-full btn btn-primary">
+                                <i class="fas fa-download mr-2"></i>
+                                Export Data
+                            </button>
+                            <button class="w-full btn bg-warning text-white hover:bg-warning-600">
+                                <i class="fas fa-undo mr-2"></i>
+                                Reset Statistics
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Accessibility Accordion -->
+                <div class="card">
+                    <button class="accordion-btn w-full flex items-center justify-between p-4 text-left" data-target="mobileAccessibility">
+                        <div class="flex items-center space-x-3">
+                            <i class="fas fa-universal-access text-success"></i>
+                            <span class="font-medium text-text-primary">Accessibility</span>
+                        </div>
+                        <i class="fas fa-chevron-down text-text-secondary transition-transform"></i>
+                    </button>
+                    <div id="mobileAccessibility" class="accordion-content hidden p-4 border-t border-border">
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-text-primary mb-2">Font Size</label>
+                                <input type="range" min="12" max="24" value="16" class="w-full h-2 bg-surface rounded-lg appearance-none cursor-pointer" />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-text-secondary">Reduce motion</span>
+                                <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors">
+                                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Action Buttons -->
+            <div class="mt-8 flex flex-col sm:flex-row gap-4">
+                <button id="saveChangesBtn" class="btn btn-primary flex-1">
+                    <i class="fas fa-save mr-2"></i>
+                    Save Changes
+                </button>
+                <button id="resetDefaultsBtn" class="btn bg-warning text-white hover:bg-warning-600 flex-1">
+                    <i class="fas fa-undo mr-2"></i>
+                    Reset to Defaults
+                </button>
+                <button id="exportDataBtn" class="btn btn-secondary flex-1">
+                    <i class="fas fa-download mr-2"></i>
+                    Export Data
+                </button>
+            </div>
+        </div>
+    </main>
+    
+    <!-- Confirmation Modal -->
+    <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
+        <div class="bg-surface rounded-lg p-6 max-w-md w-full">
+            <div class="text-center">
+                <div class="w-16 h-16 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i class="fas fa-exclamation-triangle text-warning text-2xl"></i>
+                </div>
+                <h3 class="text-lg font-semibold text-text-primary mb-2">Confirm Action</h3>
+                <p id="confirmationMessage" class="text-text-secondary mb-6">Are you sure you want to proceed with this action?</p>
+                <div class="flex space-x-3">
+                    <button id="cancelBtn" class="btn bg-gray-300 text-gray-700 hover:bg-gray-400 flex-1">Cancel</button>
+                    <button id="confirmBtn" class="btn btn-primary flex-1">Confirm</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        // Mobile menu functionality
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.getElementById('sidebar');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+        const closeSidebar = document.getElementById('closeSidebar');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+        });
+        
+        closeSidebar.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        mobileMenuOverlay.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            
+            // Update toggle button
+            const toggleSpan = themeToggle.querySelector('span');
+            if (isDark) {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+            
+            // Save preference
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+        
+        // Load saved theme
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            html.classList.toggle('dark', savedTheme === 'dark');
+            const toggleSpan = themeToggle.querySelector('span');
+            if (savedTheme === 'dark') {
+                toggleSpan.classList.add('translate-x-6');
+                toggleSpan.classList.remove('translate-x-1');
+            } else {
+                toggleSpan.classList.add('translate-x-1');
+                toggleSpan.classList.remove('translate-x-6');
+            }
+        }
+        
+        // Desktop settings navigation
+        const settingsNavBtns = document.querySelectorAll('.settings-nav-btn');
+        const settingsSections = document.querySelectorAll('.settings-section');
+        
+        settingsNavBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const targetSection = btn.dataset.section;
+                
+                // Update active nav button
+                settingsNavBtns.forEach(navBtn => {
+                    navBtn.classList.remove('active', 'bg-primary', 'text-white');
+                    navBtn.classList.add('text-text-secondary', 'hover:text-text-primary', 'hover:bg-surface-hover');
+                });
+                btn.classList.add('active', 'bg-primary', 'text-white');
+                btn.classList.remove('text-text-secondary', 'hover:text-text-primary', 'hover:bg-surface-hover');
+                
+                // Show target section
+                settingsSections.forEach(section => {
+                    section.classList.add('hidden');
+                });
+                document.getElementById(targetSection + 'Section').classList.remove('hidden');
+            });
+        });
+        
+        // Mobile accordion functionality
+        const accordionBtns = document.querySelectorAll('.accordion-btn');
+        
+        accordionBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const targetId = btn.dataset.target;
+                const targetContent = document.getElementById(targetId);
+                const chevron = btn.querySelector('.fa-chevron-down');
+                
+                // Toggle content
+                targetContent.classList.toggle('hidden');
+                
+                // Rotate chevron
+                if (targetContent.classList.contains('hidden')) {
+                    chevron.style.transform = 'rotate(0deg)';
+                } else {
+                    chevron.style.transform = 'rotate(180deg)';
+                }
+            });
+        });
+        
+        // Language selection
+        const languageSelect = document.getElementById('languageSelect');
+        languageSelect.addEventListener('change', (e) => {
+            localStorage.setItem('selectedLanguage', e.target.value);
+            console.log('Language changed to:', e.target.value);
+        });
+        
+        // Load saved language
+        const savedLanguage = localStorage.getItem('selectedLanguage');
+        if (savedLanguage) {
+            languageSelect.value = savedLanguage;
+        }
+        
+        // Toggle switches functionality
+        document.querySelectorAll('button[class*="inline-flex"]').forEach(toggle => {
+            toggle.addEventListener('click', () => {
+                const span = toggle.querySelector('span');
+                const isActive = span.classList.contains('translate-x-6');
+                
+                if (isActive) {
+                    span.classList.remove('translate-x-6');
+                    span.classList.add('translate-x-1');
+                    toggle.classList.remove('bg-primary');
+                    toggle.classList.add('bg-gray-300');
+                } else {
+                    span.classList.remove('translate-x-1');
+                    span.classList.add('translate-x-6');
+                    toggle.classList.remove('bg-gray-300');
+                    toggle.classList.add('bg-primary');
+                }
+            });
+        });
+        
+        // Range sliders
+        document.querySelectorAll('input[type="range"]').forEach(slider => {
+            slider.addEventListener('input', (e) => {
+                const value = e.target.value;
+                const nextSibling = e.target.nextElementSibling;
+                if (nextSibling && nextSibling.tagName === 'SPAN') {
+                    if (e.target.min === '10' && e.target.max === '120') {
+                        nextSibling.textContent = value + 's';
+                    } else {
+                        nextSibling.textContent = value + 'px';
+                    }
+                }
+            });
+        });
+        
+        // Confirmation modal
+        const confirmationModal = document.getElementById('confirmationModal');
+        const confirmationMessage = document.getElementById('confirmationMessage');
+        const cancelBtn = document.getElementById('cancelBtn');
+        const confirmBtn = document.getElementById('confirmBtn');
+        
+        function showConfirmation(message, onConfirm) {
+            confirmationMessage.textContent = message;
+            confirmationModal.classList.remove('hidden');
+            
+            confirmBtn.onclick = () => {
+                confirmationModal.classList.add('hidden');
+                onConfirm();
+            };
+        }
+        
+        cancelBtn.addEventListener('click', () => {
+            confirmationModal.classList.add('hidden');
+        });
+        
+        // Action buttons
+        const saveChangesBtn = document.getElementById('saveChangesBtn');
+        const resetDefaultsBtn = document.getElementById('resetDefaultsBtn');
+        const exportDataBtn = document.getElementById('exportDataBtn');
+        
+        saveChangesBtn.addEventListener('click', () => {
+            // Save all settings to localStorage
+            const settings = {
+                language: languageSelect.value,
+                theme: html.classList.contains('dark') ? 'dark' : 'light',
+                // Add other settings here
+            };
+            localStorage.setItem('userSettings', JSON.stringify(settings));
+            
+            // Show success feedback
+            saveChangesBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Saved!';
+            saveChangesBtn.classList.add('bg-success');
+            setTimeout(() => {
+                saveChangesBtn.innerHTML = '<i class="fas fa-save mr-2"></i>Save Changes';
+                saveChangesBtn.classList.remove('bg-success');
+            }, 2000);
+        });
+        
+        resetDefaultsBtn.addEventListener('click', () => {
+            showConfirmation('This will reset all settings to their default values. Are you sure?', () => {
+                localStorage.removeItem('userSettings');
+                localStorage.removeItem('selectedLanguage');
+                localStorage.removeItem('theme');
+                location.reload();
+            });
+        });
+        
+        exportDataBtn.addEventListener('click', () => {
+            const data = {
+                settings: JSON.parse(localStorage.getItem('userSettings') || '{}'),
+                language: localStorage.getItem('selectedLanguage'),
+                theme: localStorage.getItem('theme'),
+                // Add other data here
+            };
+            
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'triviaverse-settings.json';
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+        
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            // Load saved settings
+            const savedSettings = localStorage.getItem('userSettings');
+            if (savedSettings) {
+                const settings = JSON.parse(savedSettings);
+                // Apply saved settings
+                console.log('Loaded settings:', settings);
+            }
+        });
+    </script>
+</body>
+</html>

pages/topic_selection_browse.html

@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Topic Selection & Browse - TriviaVerse Quiz</title>
+    <link rel="stylesheet" href="../css/main.css" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+<script type="module" src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Ftriviavers2501back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.5"></script>
+</head>
+<body class="bg-background text-text-primary transition-theme">
+    <!-- Mobile Menu Overlay -->
+    <div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"></div>
+    
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-full w-80 bg-surface border-r border-border transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-50 lg:z-auto">
+        <div class="p-6 border-b border-border">
+            <!-- Logo -->
+            <div class="flex items-center space-x-3 mb-6">
+                <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
+                    <i class="fas fa-brain text-white text-lg"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-text-primary">TriviaVerse</h1>
+                    <p class="text-sm text-text-secondary">Quiz Platform</p>
+                </div>
+            </div>
+            
+            <!-- Close button for mobile -->
+            <button id="closeSidebar" class="absolute top-4 right-4 lg:hidden text-text-secondary hover:text-text-primary">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Navigation -->
+        <nav class="p-6 space-y-2">
+            <a href="quiz_dashboard.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="active_quiz_interface.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-play-circle"></i>
+                <span>Active Quiz</span>
+            </a>
+            <a href="quiz_results_statistics.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-chart-bar"></i>
+                <span>Statistics</span>
+            </a>
+            <a href="topic_selection_browse.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary text-white">
+                <i class="fas fa-book"></i>
+                <span>Browse Topics</span>
+            </a>
+            <a href="settings_preferences.html" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-hover transition-colors">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+        </nav>
+        
+        <!-- Advanced Filters -->
+        <div class="p-6 border-t border-border">
+            <h3 class="text-sm font-semibold text-text-primary mb-4">Advanced Filters</h3>
+            
+            <!-- Difficulty Level -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Difficulty Level</label>
+                <select id="difficultyFilter" class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                    <option value>All Levels</option>
+                    <option value="beginner">🟢 Beginner</option>
+                    <option value="intermediate">🟡 Intermediate</option>
+                    <option value="advanced">🔴 Advanced</option>
+                    <option value="expert">🟣 Expert</option>
+                </select>
+            </div>
+            
+            <!-- Content Source -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Content Source</label>
+                <div class="space-y-2">
+                    <label class="flex items-center">
+                        <input type="checkbox" class="mr-2 text-primary" checked />
+                        <span class="text-sm text-text-primary">Wikipedia</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="mr-2 text-primary" checked />
+                        <span class="text-sm text-text-primary">Wikidata</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="mr-2 text-primary" />
+                        <span class="text-sm text-text-primary">Wikibooks</span>
+                    </label>
+                </div>
+            </div>
+            
+            <!-- Language Availability -->
+            <div class="mb-4">
+                <label class="block text-sm text-text-secondary mb-2">Language</label>
+                <select id="languageFilter" class="w-full bg-background border border-border rounded-lg px-3 py-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-primary">
+                    <option value>All Languages</option>
+                    <option value="en">English</option>
+                    <option value="te">తెలుగు (Telugu)</option>
+                    <option value="hi">हिंदी (Hindi)</option>
+                    <option value="kn">ಕನ್ನಡ (Kannada)</option>
+                </select>
+            </div>
+            
+            <!-- Reset Filters -->
+            <button id="resetFilters" class="w-full btn btn-secondary text-sm">
+                <i class="fas fa-refresh mr-2"></i>
+                Reset Filters
+            </button>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="lg:ml-80 min-h-screen">
+        <!-- Header -->
+        <header class="bg-surface border-b border-border p-4 lg:p-6">
+            <div class="flex items-center justify-between">
+                <!-- Mobile Menu Button -->
+                <button id="mobileMenuBtn" class="lg:hidden text-text-primary hover:text-primary">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                
+                <!-- Page Title -->
+                <div class="flex-1 lg:flex-none">
+                    <h2 class="text-2xl font-bold text-text-primary">Browse Topics</h2>
+                    <p class="text-text-secondary mt-1">Discover and explore quiz topics from Wikipedia</p>
+                </div>
+                
+                <!-- User Avatar -->
+                <div class="hidden lg:flex items-center space-x-3">
+                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="User Avatar" class="w-10 h-10 rounded-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;" />
+                    <div>
+                        <p class="text-sm font-medium text-text-primary">John Doe</p>
+                        <p class="text-xs text-text-secondary">Level 5 Quizzer</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Search Section -->
+        <div class="p-4 lg:p-6 border-b border-border bg-surface">
+            <div class="max-w-4xl mx-auto">
+                <div class="relative">
+                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                        <i class="fas fa-search text-text-secondary"></i>
+                    </div>
+                    <input type="text" id="topicSearch" placeholder="Search topics from Wikipedia..." class="w-full pl-12 pr-4 py-4 bg-background border border-border rounded-xl text-text-primary placeholder-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" />
+                    <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
+                        <button id="clearSearch" class="text-text-secondary hover:text-text-primary hidden">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Search Suggestions -->
+                <div id="searchSuggestions" class="hidden mt-2 bg-background border border-border rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                    <!-- Dynamic suggestions will be populated here -->
+                </div>
+            </div>
+        </div>
+        
+        <!-- Content Area -->
+        <div class="p-4 lg:p-6 space-y-8">
+            <!-- Trending Topics -->
+            <section>
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-xl font-semibold text-text-primary">🔥 Trending Topics</h3>
+                    <button class="text-primary hover:text-primary-700 text-sm font-medium">
+                        View All <i class="fas fa-arrow-right ml-1"></i>
+                    </button>
+                </div>
+                
+                <div class="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide">
+                    <!-- Python Programming - Featured -->
+                    <div class="flex-shrink-0 w-72 card p-6 border-2 border-primary bg-primary-50 cursor-pointer hover:shadow-lg transition-all">
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
+                                <i class="fab fa-python text-white text-xl"></i>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <span class="bg-primary text-white text-xs px-2 py-1 rounded-full">Featured</span>
+                                <span class="bg-accent text-white text-xs px-2 py-1 rounded-full">Hot</span>
+                            </div>
+                        </div>
+                        <h4 class="text-lg font-semibold text-primary mb-2">Python Programming</h4>
+                        <p class="text-sm text-text-secondary mb-4">Master Python concepts with interactive quizzes</p>
+                        <div class="flex items-center justify-between text-xs text-text-secondary mb-4">
+                            <span><i class="fas fa-question-circle mr-1"></i>250+ Questions</span>
+                            <span><i class="fas fa-signal mr-1"></i>Intermediate</span>
+                            <span><i class="fas fa-users mr-1"></i>1.2k Active</span>
+                        </div>
+                        <button class="w-full btn btn-primary text-sm">
+                            <i class="fas fa-play mr-2"></i>Start Quiz
+                        </button>
+                    </div>
+                    
+                    <!-- Quantum Physics -->
+                    <div class="flex-shrink-0 w-72 card p-6 cursor-pointer hover:shadow-lg transition-all">
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 bg-secondary-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-atom text-secondary text-xl"></i>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <span class="bg-secondary text-white text-xs px-2 py-1 rounded-full">New</span>
+                                <span class="bg-error text-white text-xs px-2 py-1 rounded-full">🔴 Advanced</span>
+                            </div>
+                        </div>
+                        <h4 class="text-lg font-semibold text-text-primary mb-2">Quantum Physics</h4>
+                        <p class="text-sm text-text-secondary mb-4">Explore the fascinating world of quantum mechanics</p>
+                        <div class="flex items-center justify-between text-xs text-text-secondary mb-4">
+                            <span><i class="fas fa-question-circle mr-1"></i>180+ Questions</span>
+                            <span><i class="fas fa-signal mr-1"></i>Advanced</span>
+                            <span><i class="fas fa-users mr-1"></i>890 Active</span>
+                        </div>
+                        <button class="w-full btn btn-secondary text-sm">
+                            <i class="fas fa-play mr-2"></i>Start Quiz
+                        </button>
+                    </div>
+                    
+                    <!-- World History -->
+                    <div class="flex-shrink-0 w-72 card p-6 cursor-pointer hover:shadow-lg transition-all">
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 bg-accent-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-globe-americas text-accent text-xl"></i>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <span class="bg-accent text-white text-xs px-2 py-1 rounded-full">Popular</span>
+                                <span class="bg-warning text-white text-xs px-2 py-1 rounded-full">🟡 Intermediate</span>
+                            </div>
+                        </div>
+                        <h4 class="text-lg font-semibold text-text-primary mb-2">World History</h4>
+                        <p class="text-sm text-text-secondary mb-4">Journey through major historical events</p>
+                        <div class="flex items-center justify-between text-xs text-text-secondary mb-4">
+                            <span><i class="fas fa-question-circle mr-1"></i>320+ Questions</span>
+                            <span><i class="fas fa-signal mr-1"></i>Intermediate</span>
+                            <span><i class="fas fa-users mr-1"></i>2.1k Active</span>
+                        </div>
+                        <button class="w-full btn btn-accent text-sm">
+                            <i class="fas fa-play mr-2"></i>Start Quiz
+                        </button>
+                    </div>
+                    
+                    <!-- Machine Learning -->
+                    <div class="flex-shrink-0 w-72 card p-6 cursor-pointer hover:shadow-lg transition-all">
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-robot text-primary text-xl"></i>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <span class="bg-success text-white text-xs px-2 py-1 rounded-full">Trending</span>
+                                <span class="bg-error text-white text-xs px-2 py-1 rounded-full">🔴 Advanced</span>
+                            </div>
+                        </div>
+                        <h4 class="text-lg font-semibold text-text-primary mb-2">Machine Learning</h4>
+                        <p class="text-sm text-text-secondary mb-4">Test your AI and ML knowledge</p>
+                        <div class="flex items-center justify-between text-xs text-text-secondary mb-4">
+                            <span><i class="fas fa-question-circle mr-1"></i>200+ Questions</span>
+                            <span><i class="fas fa-signal mr-1"></i>Advanced</span>
+                            <span><i class="fas fa-users mr-1"></i>1.5k Active</span>
+                        </div>
+                        <button class="w-full btn btn-primary text-sm">
+                            <i class="fas fa-play mr-2"></i>Start Quiz
+                        </button>
+                    </div>
+                </div>
+            </section>
+            
+            <!-- Featured Categories -->
+            <section>
+                <h3 class="text-xl font-semibold text-text-primary mb-6">📚 Featured Categories</h3>
+                
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <!-- Sciences Category -->
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-12 h-12 bg-secondary-100 rounded-lg flex items-center justify-center">
+                                    <i class="fas fa-flask text-secondary text-xl"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-lg font-semibold text-text-primary">Sciences</h4>
+                                    <p class="text-sm text-text-secondary">Physics, Chemistry, Biology & More</p>
+                                </div>
+                            </div>
+                            <button class="text-secondary hover:text-secondary-600">
+                                <i class="fas fa-chevron-down"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="space-y-3">
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-atom text-secondary text-sm"></i>
+                                    <span class="text-sm text-text-primary">Physics</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">150+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-vial text-secondary text-sm"></i>
+                                    <span class="text-sm text-text-primary">Chemistry</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">120+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-dna text-secondary text-sm"></i>
+                                    <span class="text-sm text-text-primary">Biology</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">200+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div></div></section>
+                    
+                    <!-- Technology Category -->
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
+                                    <i class="fas fa-laptop-code text-primary text-xl"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-lg font-semibold text-text-primary">Technology</h4>
+                                    <p class="text-sm text-text-secondary">Programming, AI, Web Development</p>
+                                </div>
+                            </div>
+                            <button class="text-primary hover:text-primary-600">
+                                <i class="fas fa-chevron-down"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="space-y-3">
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors border-l-4 border-primary">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fab fa-python text-primary text-sm"></i>
+                                    <span class="text-sm text-text-primary font-medium">Python Programming</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs bg-primary text-white px-2 py-1 rounded-full">Featured</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fab fa-js-square text-primary text-sm"></i>
+                                    <span class="text-sm text-text-primary">JavaScript</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">180+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-robot text-primary text-sm"></i>
+                                    <span class="text-sm text-text-primary">Artificial Intelligence</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">160+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- History Category -->
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-12 h-12 bg-accent-100 rounded-lg flex items-center justify-center">
+                                    <i class="fas fa-landmark text-accent text-xl"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-lg font-semibold text-text-primary">History</h4>
+                                    <p class="text-sm text-text-secondary">Ancient, Medieval, Modern History</p>
+                                </div>
+                            </div>
+                            <button class="text-accent hover:text-accent-600">
+                                <i class="fas fa-chevron-down"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="space-y-3">
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-crown text-accent text-sm"></i>
+                                    <span class="text-sm text-text-primary">Ancient Civilizations</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">140+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-globe-americas text-accent text-sm"></i>
+                                    <span class="text-sm text-text-primary">World Wars</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">190+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-flag text-accent text-sm"></i>
+                                    <span class="text-sm text-text-primary">Indian History</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">220+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Literature Category -->
+                    <div class="card p-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-12 h-12 bg-success-100 rounded-lg flex items-center justify-center">
+                                    <i class="fas fa-book-open text-success text-xl"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-lg font-semibold text-text-primary">Literature</h4>
+                                    <p class="text-sm text-text-secondary">Classic & Modern Literature</p>
+                                </div>
+                            </div>
+                            <button class="text-success hover:text-success-600">
+                                <i class="fas fa-chevron-down"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="space-y-3">
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-feather text-success text-sm"></i>
+                                    <span class="text-sm text-text-primary">Shakespeare</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">100+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-scroll text-success text-sm"></i>
+                                    <span class="text-sm text-text-primary">Poetry</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">80+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                            
+                            <div class="flex items-center justify-between p-3 bg-background rounded-lg hover:bg-surface-hover cursor-pointer transition-colors">
+                                <div class="flex items-center space-x-3">
+                                    <i class="fas fa-book text-success text-sm"></i>
+                                    <span class="text-sm text-text-primary">Modern Fiction</span>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-xs text-text-secondary">120+ questions</span>
+                                    <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            
+            
+            <!-- Quick Start Section -->
+            <section class="card p-8 text-center bg-gradient-to-r from-primary-50 to-secondary-50 border-2 border-primary">
+                <div class="max-w-2xl mx-auto">
+                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-rocket text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-text-primary mb-2">Ready to Start Your Quiz Journey?</h3>
+                    <p class="text-text-secondary mb-6">Select any topic above or use our intelligent topic matching to find the perfect quiz for you.</p>
+                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                        <button id="randomTopicBtn" class="btn btn-primary px-6 py-3">
+                            <i class="fas fa-random mr-2"></i>
+                            Surprise Me with a Topic
+                        </button>
+                        <button id="continueLastBtn" class="btn btn-secondary px-6 py-3">
+                            <i class="fas fa-play mr-2"></i>
+                            Continue Last Quiz
+                        </button>
+                    </div>
+                </div>
+            </section>
+        
+    </main>
+    
+    <script>
+        // Mobile menu functionality
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.getElementById('sidebar');
+        const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
+        const closeSidebar = document.getElementById('closeSidebar');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+            mobileMenuOverlay.classList.remove('hidden');
+        });
+        
+        closeSidebar.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        mobileMenuOverlay.addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+            mobileMenuOverlay.classList.add('hidden');
+        });
+        
+        // Search functionality
+        const topicSearch = document.getElementById('topicSearch');
+        const clearSearch = document.getElementById('clearSearch');
+        const searchSuggestions = document.getElementById('searchSuggestions');
+        
+        // Mock search suggestions
+        const mockSuggestions = [
+            { title: 'Python Programming', category: 'Technology', questions: 250 },
+            { title: 'Quantum Physics', category: 'Science', questions: 180 },
+            { title: 'World History', category: 'History', questions: 320 },
+            { title: 'Machine Learning', category: 'Technology', questions: 200 },
+            { title: 'Shakespeare', category: 'Literature', questions: 100 },
+            { title: 'Chemistry Basics', category: 'Science', questions: 150 },
+            { title: 'Ancient Rome', category: 'History', questions: 140 },
+            { title: 'JavaScript', category: 'Technology', questions: 180 }
+        ];
+        
+        topicSearch.addEventListener('input', (e) => {
+            const query = e.target.value.toLowerCase();
+            
+            if (query.length > 0) {
+                clearSearch.classList.remove('hidden');
+                
+                const filteredSuggestions = mockSuggestions.filter(item => 
+                    item.title.toLowerCase().includes(query) || 
+                    item.category.toLowerCase().includes(query)
+                );
+                
+                if (filteredSuggestions.length > 0) {
+                    searchSuggestions.innerHTML = filteredSuggestions.map(item => `
+                        <div class="p-3 hover:bg-surface-hover cursor-pointer border-b border-border last:border-b-0" data-topic="${item.title}">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <p class="text-sm font-medium text-text-primary">${item.title}</p>
+                                    <p class="text-xs text-text-secondary">${item.category} • ${item.questions}+ questions</p>
+                                </div>
+                                <i class="fas fa-arrow-right text-text-secondary text-xs"></i>
+                            </div>
+                        </div>
+                    `).join('');
+                    searchSuggestions.classList.remove('hidden');
+                } else {
+                    searchSuggestions.innerHTML = `
+                        <div class="p-4 text-center text-text-secondary">
+                            <i class="fas fa-search mb-2"></i>
+                            <p class="text-sm">No topics found for "${query}"</p>
+                        </div>
+                    `;
+                    searchSuggestions.classList.remove('hidden');
+                }
+            } else {
+                clearSearch.classList.add('hidden');
+                searchSuggestions.classList.add('hidden');
+            }
+        });
+        
+        clearSearch.addEventListener('click', () => {
+            topicSearch.value = '';
+            clearSearch.classList.add('hidden');
+            searchSuggestions.classList.add('hidden');
+        });
+        
+        // Handle suggestion clicks
+        searchSuggestions.addEventListener('click', (e) => {
+            const suggestionItem = e.target.closest('[data-topic]');
+            if (suggestionItem) {
+                const topicName = suggestionItem.dataset.topic;
+                localStorage.setItem('selectedTopic', topicName.toLowerCase().replace(/\s+/g, '_'));
+                window.location.href = 'active_quiz_interface.html';
+            }
+        });
+        
+        // Filter functionality
+        const difficultyFilter = document.getElementById('difficultyFilter');
+        const languageFilter = document.getElementById('languageFilter');
+        const resetFilters = document.getElementById('resetFilters');
+        
+        difficultyFilter.addEventListener('change', applyFilters);
+        languageFilter.addEventListener('change', applyFilters);
+        
+        function applyFilters() {
+            const difficulty = difficultyFilter.value;
+            const language = languageFilter.value;
+            
+            // Here you would implement actual filtering logic
+            console.log('Applying filters:', { difficulty, language });
+        }
+        
+        resetFilters.addEventListener('click', () => {
+            difficultyFilter.value = '';
+            languageFilter.value = '';
+            document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
+            document.querySelectorAll('input[type="checkbox"]')[0].checked = true; // Wikipedia
+            document.querySelectorAll('input[type="checkbox"]')[1].checked = true; // Wikidata
+            applyFilters();
+        });
+        
+        // Topic card clicks
+        document.addEventListener('click', (e) => {
+            const topicCard = e.target.closest('.card');
+            if (topicCard && topicCard.querySelector('button')) {
+                const button = topicCard.querySelector('button');
+                if (e.target === button || button.contains(e.target)) {
+                    // Get topic from card title
+                    const topicTitle = topicCard.querySelector('h4');
+                    if (topicTitle) {
+                        const topicName = topicTitle.textContent.toLowerCase().replace(/\s+/g, '_');
+                        localStorage.setItem('selectedTopic', topicName);
+                        window.location.href = 'active_quiz_interface.html';
+                    }
+                }
+            }
+        });
+        
+        // Category item clicks
+        document.addEventListener('click', (e) => {
+            const categoryItem = e.target.closest('.cursor-pointer');
+            if (categoryItem && categoryItem.querySelector('span')) {
+                const topicSpan = categoryItem.querySelector('span');
+                const topicName = topicSpan.textContent.toLowerCase().replace(/\s+/g, '_');
+                localStorage.setItem('selectedTopic', topicName);
+                window.location.href = 'active_quiz_interface.html';
+            }
+        });
+        
+        // Quick start buttons
+        const randomTopicBtn = document.getElementById('randomTopicBtn');
+        const continueLastBtn = document.getElementById('continueLastBtn');
+        
+        randomTopicBtn.addEventListener('click', () => {
+            const randomTopics = ['python_programming', 'quantum_physics', 'world_history', 'machine_learning', 'chemistry', 'javascript'];
+            const randomTopic = randomTopics[Math.floor(Math.random() * randomTopics.length)];
+            localStorage.setItem('selectedTopic', randomTopic);
+            window.location.href = 'active_quiz_interface.html';
+        });
+        
+        continueLastBtn.addEventListener('click', () => {
+            const lastTopic = localStorage.getItem('selectedTopic') || 'python_programming';
+            localStorage.setItem('selectedTopic', lastTopic);
+            window.location.href = 'active_quiz_interface.html';
+        });
+        
+        // Hide search suggestions when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!topicSearch.contains(e.target) && !searchSuggestions.contains(e.target)) {
+                searchSuggestions.classList.add('hidden');
+            }
+        });
+        
+        // Category expand/collapse
+        document.querySelectorAll('.fa-chevron-down').forEach(chevron => {
+            chevron.addEventListener('click', (e) => {
+                e.preventDefault();
+                const card = e.target.closest('.card');
+                const content = card.querySelector('.space-y-3');
+                
+                if (content.style.display === 'none') {
+                    content.style.display = 'block';
+                    e.target.classList.remove('fa-chevron-down');
+                    e.target.classList.add('fa-chevron-up');
+                } else {
+                    content.style.display = 'none';
+                    e.target.classList.remove('fa-chevron-up');
+                    e.target.classList.add('fa-chevron-down');
+                }
+            });
+        });
+    </script>
+</body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "triviaverse_quiz",
+  "name": "triviaverse_quiz",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

streamlit_web_interface.html

@@ -0,0 +1,1431 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TriviaVerse - Streamlit Web Interface</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        /* Streamlit-inspired design system */
+        :root {
+            --primary-color: #FF6B6B;
+            --secondary-color: #4ECDC4;
+            --accent-color: #45B7D1;
+            --success-color: #96CEB4;
+            --warning-color: #FFEAA7;
+            --error-color: #D63031;
+            --background-color: #0E1117;
+            --surface-color: #1F2937;
+            --text-primary: #FFFFFF;
+            --text-secondary: #94A3B8;
+            --border-color: #374151;
+            --sidebar-width: 21rem;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-primary);
+            line-height: 1.6;
+        }
+
+        /* Streamlit-style sidebar */
+        .sidebar {
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: var(--sidebar-width);
+            height: 100vh;
+            background-color: var(--surface-color);
+            border-right: 1px solid var(--border-color);
+            padding: 1.5rem;
+            overflow-y: auto;
+            z-index: 1000;
+            transition: transform 0.3s ease;
+        }
+
+        .sidebar.hidden {
+            transform: translateX(-100%);
+        }
+
+        .sidebar-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .sidebar-logo {
+            width: 2.5rem;
+            height: 2.5rem;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            border-radius: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+
+        .sidebar-title {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .sidebar-subtitle {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+
+        /* Main content area */
+        .main-content {
+            margin-left: var(--sidebar-width);
+            padding: 2rem;
+            transition: margin-left 0.3s ease;
+        }
+
+        .main-content.full-width {
+            margin-left: 0;
+        }
+
+        /* Streamlit-style components */
+        .st-container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .st-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .st-title {
+            font-size: 3rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 1rem;
+        }
+
+        .st-subtitle {
+            font-size: 1.25rem;
+            color: var(--text-secondary);
+            margin-bottom: 2rem;
+        }
+
+        /* Streamlit metrics */
+        .st-metrics {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 3rem;
+        }
+
+        .st-metric {
+            background: var(--surface-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            text-align: center;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .st-metric:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+        }
+
+        .st-metric-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+
+        .st-metric-label {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        /* Streamlit columns */
+        .st-columns {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+
+        .st-column {
+            background: var(--surface-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 2rem;
+        }
+
+        /* Streamlit form elements */
+        .st-selectbox, .st-radio-group, .st-slider {
+            margin-bottom: 1.5rem;
+        }
+
+        .st-label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+        }
+
+        .st-select {
+            width: 100%;
+            padding: 0.75rem;
+            background: var(--background-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            color: var(--text-primary);
+            font-size: 1rem;
+            transition: border-color 0.2s ease;
+        }
+
+        .st-select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+        }
+
+        .st-radio-options {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+
+        .st-radio-option {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.75rem;
+            background: var(--background-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .st-radio-option:hover {
+            border-color: var(--primary-color);
+            background: rgba(255, 107, 107, 0.1);
+        }
+
+        .st-radio-option.selected {
+            border-color: var(--primary-color);
+            background: rgba(255, 107, 107, 0.2);
+        }
+
+        .st-radio-input {
+            width: 1rem;
+            height: 1rem;
+            margin-right: 0.5rem;
+        }
+
+        /* Streamlit buttons */
+        .st-button {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border: none;
+            border-radius: 0.5rem;
+            padding: 0.75rem 1.5rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .st-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
+        }
+
+        .st-button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .st-button-secondary {
+            background: var(--surface-color);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+
+        .st-button-secondary:hover {
+            background: var(--border-color);
+            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+        }
+
+        /* Streamlit progress bar */
+        .st-progress {
+            width: 100%;
+            height: 0.5rem;
+            background: var(--border-color);
+            border-radius: 0.25rem;
+            overflow: hidden;
+            margin-bottom: 1rem;
+        }
+
+        .st-progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+            transition: width 0.3s ease;
+            border-radius: 0.25rem;
+        }
+
+        /* Quiz interface */
+        .quiz-container {
+            display: none;
+            background: var(--surface-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .quiz-container.active {
+            display: block;
+        }
+
+        .quiz-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .quiz-timer {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--accent-color);
+        }
+
+        .quiz-question {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 2rem;
+            line-height: 1.4;
+        }
+
+        .quiz-options {
+            display: grid;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .quiz-option {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: var(--background-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .quiz-option:hover {
+            border-color: var(--primary-color);
+            background: rgba(255, 107, 107, 0.1);
+        }
+
+        .quiz-option.selected {
+            border-color: var(--primary-color);
+            background: rgba(255, 107, 107, 0.2);
+        }
+
+        .quiz-option.correct {
+            border-color: var(--success-color);
+            background: rgba(150, 206, 180, 0.2);
+        }
+
+        .quiz-option.incorrect {
+            border-color: var(--error-color);
+            background: rgba(214, 48, 49, 0.2);
+        }
+
+        .option-letter {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 2rem;
+            height: 2rem;
+            background: var(--primary-color);
+            color: white;
+            border-radius: 50%;
+            font-weight: 700;
+            flex-shrink: 0;
+        }
+
+        /* Results display */
+        .results-container {
+            display: none;
+            text-align: center;
+        }
+
+        .results-container.active {
+            display: block;
+        }
+
+        .results-score {
+            font-size: 4rem;
+            font-weight: 800;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+
+        .results-message {
+            font-size: 1.25rem;
+            color: var(--text-secondary);
+            margin-bottom: 2rem;
+        }
+
+        /* Expandable sections */
+        .st-expander {
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            margin-bottom: 1rem;
+            overflow: hidden;
+        }
+
+        .st-expander-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            background: var(--surface-color);
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+        }
+
+        .st-expander-header:hover {
+            background: var(--border-color);
+        }
+
+        .st-expander-content {
+            padding: 1rem;
+            background: var(--background-color);
+            border-top: 1px solid var(--border-color);
+            display: none;
+        }
+
+        .st-expander-content.expanded {
+            display: block;
+        }
+
+        .st-expander-arrow {
+            transition: transform 0.2s ease;
+        }
+
+        .st-expander-arrow.expanded {
+            transform: rotate(180deg);
+        }
+
+        /* Language switcher */
+        .language-switcher {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .language-option {
+            padding: 0.5rem 1rem;
+            background: var(--background-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.25rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .language-option:hover {
+            border-color: var(--primary-color);
+        }
+
+        .language-option.active {
+            background: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+
+        /* Theme toggle */
+        .theme-toggle {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .toggle-switch {
+            position: relative;
+            width: 3rem;
+            height: 1.5rem;
+            background: var(--border-color);
+            border-radius: 0.75rem;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+        }
+
+        .toggle-switch.active {
+            background: var(--primary-color);
+        }
+
+        .toggle-slider {
+            position: absolute;
+            top: 0.125rem;
+            left: 0.125rem;
+            width: 1.25rem;
+            height: 1.25rem;
+            background: white;
+            border-radius: 50%;
+            transition: transform 0.2s ease;
+        }
+
+        .toggle-switch.active .toggle-slider {
+            transform: translateX(1.5rem);
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .sidebar {
+                transform: translateX(-100%);
+            }
+            
+            .main-content {
+                margin-left: 0;
+            }
+            
+            .st-title {
+                font-size: 2rem;
+            }
+            
+            .st-metrics {
+                grid-template-columns: 1fr;
+            }
+            
+            .st-columns {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.5s ease;
+        }
+
+        /* Chart styles */
+        .chart-container {
+            background: var(--surface-color);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .chart-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+
+        /* Success/Error messages */
+        .st-success, .st-error, .st-warning, .st-info {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .st-success {
+            background: rgba(150, 206, 180, 0.2);
+            border: 1px solid var(--success-color);
+            color: var(--success-color);
+        }
+
+        .st-error {
+            background: rgba(214, 48, 49, 0.2);
+            border: 1px solid var(--error-color);
+            color: var(--error-color);
+        }
+
+        .st-warning {
+            background: rgba(255, 234, 167, 0.2);
+            border: 1px solid var(--warning-color);
+            color: var(--warning-color);
+        }
+
+        .st-info {
+            background: rgba(69, 183, 209, 0.2);
+            border: 1px solid var(--accent-color);
+            color: var(--accent-color);
+        }
+    </style>
+</head>
+<body>
+    <!-- Streamlit-style sidebar -->
+    <div class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <div class="sidebar-logo">
+                <i class="fas fa-brain"></i>
+            </div>
+            <div>
+                <div class="sidebar-title">TriviaVerse</div>
+                <div class="sidebar-subtitle">Quiz Platform</div>
+            </div>
+        </div>
+
+        <!-- Theme toggle -->
+        <div class="theme-toggle">
+            <span class="st-label">Dark Theme</span>
+            <div class="toggle-switch active" id="themeToggle">
+                <div class="toggle-slider"></div>
+            </div>
+        </div>
+
+        <!-- Language switcher -->
+        <div class="st-label">Language</div>
+        <div class="language-switcher">
+            <div class="language-option active" data-lang="en">EN</div>
+            <div class="language-option" data-lang="te">తె</div>
+            <div class="language-option" data-lang="hi">हि</div>
+            <div class="language-option" data-lang="kn">ಕನ್</div>
+        </div>
+
+        <!-- Quiz History -->
+        <div class="st-expander">
+            <div class="st-expander-header">
+                <span><i class="fas fa-history"></i> Quiz History</span>
+                <i class="fas fa-chevron-down st-expander-arrow"></i>
+            </div>
+            <div class="st-expander-content">
+                <div class="st-info">
+                    <i class="fas fa-info-circle"></i>
+                    <span>No quiz history available yet.</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Settings -->
+        <div class="st-expander">
+            <div class="st-expander-header">
+                <span><i class="fas fa-cog"></i> Settings</span>
+                <i class="fas fa-chevron-down st-expander-arrow"></i>
+            </div>
+            <div class="st-expander-content">
+                <div class="st-selectbox">
+                    <label class="st-label">Sound Effects</label>
+                    <select class="st-select">
+                        <option value="on">On</option>
+                        <option value="off">Off</option>
+                    </select>
+                </div>
+                <div class="st-selectbox">
+                    <label class="st-label">Difficulty Level</label>
+                    <select class="st-select" id="difficultySelect">
+                        <option value="easy">Easy</option>
+                        <option value="medium">Medium</option>
+                        <option value="hard">Hard</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main content area -->
+    <div class="main-content" id="mainContent">
+        <div class="st-container">
+            <!-- Welcome section -->
+            <div class="st-header">
+                <h1 class="st-title">TriviaVerse</h1>
+                <p class="st-subtitle">Welcome to the ultimate quiz experience on Hugging Face Spaces!</p>
+            </div>
+
+            <!-- User statistics -->
+            <div class="st-metrics">
+                <div class="st-metric">
+                    <div class="st-metric-value" style="color: var(--primary-color);" id="totalQuizzes">0</div>
+                    <div class="st-metric-label">Total Quizzes</div>
+                </div>
+                <div class="st-metric">
+                    <div class="st-metric-value" style="color: var(--success-color);" id="averageScore">0%</div>
+                    <div class="st-metric-label">Average Score</div>
+                </div>
+                <div class="st-metric">
+                    <div class="st-metric-value" style="color: var(--accent-color);" id="bestStreak">0</div>
+                    <div class="st-metric-label">Best Streak</div>
+                </div>
+                <div class="st-metric">
+                    <div class="st-metric-value" style="color: var(--secondary-color);" id="favoriteTopicDisplay">None</div>
+                    <div class="st-metric-label">Favorite Topic</div>
+                </div>
+            </div>
+
+            <!-- Quiz configuration -->
+            <div class="st-columns">
+                <div class="st-column">
+                    <h3 style="margin-bottom: 1.5rem; color: var(--text-primary);">
+                        <i class="fas fa-play-circle"></i> Start New Quiz
+                    </h3>
+                    
+                    <div class="st-selectbox">
+                        <label class="st-label">Select Topic</label>
+                        <select class="st-select" id="topicSelect">
+                            <option value="">Choose a topic...</option>
+                            <option value="python">🐍 Python Programming</option>
+                            <option value="javascript">⚡ JavaScript</option>
+                            <option value="science">🔬 General Science</option>
+                            <option value="history">📚 World History</option>
+                            <option value="geography">🌍 Geography</option>
+                            <option value="literature">📖 Literature</option>
+                            <option value="mathematics">🔢 Mathematics</option>
+                            <option value="technology">💻 Technology</option>
+                        </select>
+                    </div>
+
+                    <div class="st-radio-group">
+                        <label class="st-label">Number of Questions</label>
+                        <div class="st-radio-options">
+                            <div class="st-radio-option selected" data-questions="5">
+                                <input type="radio" class="st-radio-input" name="questions" value="5" checked>
+                                <span>5 Questions (Quick)</span>
+                            </div>
+                            <div class="st-radio-option" data-questions="10">
+                                <input type="radio" class="st-radio-input" name="questions" value="10">
+                                <span>10 Questions (Standard)</span>
+                            </div>
+                            <div class="st-radio-option" data-questions="15">
+                                <input type="radio" class="st-radio-input" name="questions" value="15">
+                                <span>15 Questions (Extended)</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button class="st-button" id="startQuizBtn" disabled>
+                        <i class="fas fa-play"></i>
+                        Start Quiz
+                    </button>
+                </div>
+
+                <div class="st-column">
+                    <h3 style="margin-bottom: 1.5rem; color: var(--text-primary);">
+                        <i class="fas fa-fire"></i> Trending Topics
+                    </h3>
+                    
+                    <div class="quiz-option" data-topic="python" style="margin-bottom: 1rem;">
+                        <div class="option-letter">🐍</div>
+                        <div>
+                            <div style="font-weight: 600;">Python Programming</div>
+                            <div style="font-size: 0.875rem; color: var(--text-secondary);">Most Popular</div>
+                        </div>
+                    </div>
+
+                    <div class="quiz-option" data-topic="science" style="margin-bottom: 1rem;">
+                        <div class="option-letter">🔬</div>
+                        <div>
+                            <div style="font-weight: 600;">General Science</div>
+                            <div style="font-size: 0.875rem; color: var(--text-secondary);">High Engagement</div>
+                        </div>
+                    </div>
+
+                    <div class="quiz-option" data-topic="history" style="margin-bottom: 1rem;">
+                        <div class="option-letter">📚</div>
+                        <div>
+                            <div style="font-weight: 600;">World History</div>
+                            <div style="font-size: 0.875rem; color: var(--text-secondary);">Trending Now</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Active quiz interface -->
+            <div class="quiz-container" id="quizContainer">
+                <div class="quiz-header">
+                    <div>
+                        <h3 style="color: var(--text-primary);">Question <span id="currentQuestionNum">1</span> of <span id="totalQuestions">10</span></h3>
+                        <div class="st-progress">
+                            <div class="st-progress-bar" id="quizProgress" style="width: 10%;"></div>
+                        </div>
+                    </div>
+                    <div class="quiz-timer">
+                        <i class="fas fa-clock"></i>
+                        <span id="timeRemaining">30</span>s
+                    </div>
+                </div>
+
+                <div class="quiz-question" id="questionText">
+                    Loading question...
+                </div>
+
+                <div class="quiz-options" id="quizOptions">
+                    <!-- Options will be populated by JavaScript -->
+                </div>
+
+                <div style="display: flex; gap: 1rem; justify-content: center;">
+                    <button class="st-button-secondary" id="hintBtn">
+                        <i class="fas fa-lightbulb"></i>
+                        Hint
+                    </button>
+                    <button class="st-button" id="nextQuestionBtn" disabled>
+                        <i class="fas fa-arrow-right"></i>
+                        Next Question
+                    </button>
+                </div>
+            </div>
+
+            <!-- Results section -->
+            <div class="results-container" id="resultsContainer">
+                <div class="results-score" id="finalScore">0%</div>
+                <div class="results-message" id="resultsMessage">Great job!</div>
+                
+                <div class="chart-container">
+                    <div class="chart-title">Performance Overview</div>
+                    <div class="st-metrics">
+                        <div class="st-metric">
+                            <div class="st-metric-value" style="color: var(--success-color);" id="correctAnswers">0</div>
+                            <div class="st-metric-label">Correct Answers</div>
+                        </div>
+                        <div class="st-metric">
+                            <div class="st-metric-value" style="color: var(--error-color);" id="incorrectAnswers">0</div>
+                            <div class="st-metric-label">Incorrect Answers</div>
+                        </div>
+                        <div class="st-metric">
+                            <div class="st-metric-value" style="color: var(--accent-color);" id="timeTaken">0</div>
+                            <div class="st-metric-label">Time Taken (min)</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="display: flex; gap: 1rem; justify-content: center;">
+                    <button class="st-button-secondary" id="reviewAnswersBtn">
+                        <i class="fas fa-eye"></i>
+                        Review Answers
+                    </button>
+                    <button class="st-button" id="newQuizBtn">
+                        <i class="fas fa-refresh"></i>
+                        New Quiz
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Application state
+        let appState = {
+            currentView: 'home',
+            selectedTopic: '',
+            selectedQuestions: 5,
+            currentQuestionIndex: 0,
+            questions: [],
+            userAnswers: [],
+            score: 0,
+            timeRemaining: 30,
+            timerInterval: null,
+            language: 'en',
+            theme: 'dark',
+            userStats: {
+                totalQuizzes: 0,
+                averageScore: 0,
+                bestStreak: 0,
+                favoriteTopic: 'None'
+            }
+        };
+
+        // Language translations
+        const translations = {
+            en: {
+                welcome: "Welcome to TriviaVerse!",
+                selectTopic: "Select Topic",
+                startQuiz: "Start Quiz",
+                nextQuestion: "Next Question",
+                hint: "Hint",
+                timeRemaining: "Time Remaining",
+                correctAnswers: "Correct Answers",
+                incorrectAnswers: "Incorrect Answers",
+                timeTaken: "Time Taken (min)",
+                reviewAnswers: "Review Answers",
+                newQuiz: "New Quiz"
+            },
+            te: {
+                welcome: "ట్రివియావర్స్‌కు స్వాగతం!",
+                selectTopic: "విషయం ఎంచుకోండి",
+                startQuiz: "క్విజ్ ప్రారంభించండి",
+                nextQuestion: "తదుపరి ప్రశ్న",
+                hint: "సూచన",
+                timeRemaining: "మిగిలిన సమయం",
+                correctAnswers: "సరైన సమాధానాలు",
+                incorrectAnswers: "తప్పు సమాధానాలు",
+                timeTaken: "తీసుకున్న సమయం (నిమిషాలు)",
+                reviewAnswers: "సమాధానాలను సమీక్షించండి",
+                newQuiz: "కొత్త క���విజ్"
+            },
+            hi: {
+                welcome: "TriviaVerse में आपका स्वागत है!",
+                selectTopic: "विषय चुनें",
+                startQuiz: "क्विज़ शुरू करें",
+                nextQuestion: "अगला प्रश्न",
+                hint: "संकेत",
+                timeRemaining: "शेष समय",
+                correctAnswers: "सही उत्तर",
+                incorrectAnswers: "गलत उत्तर",
+                timeTaken: "लिया गया समय (मिनट)",
+                reviewAnswers: "उत्तरों की समीक्षा करें",
+                newQuiz: "नया क्विज़"
+            },
+            kn: {
+                welcome: "ಟ್ರಿವಿಯಾವರ್ಸ್‌ಗೆ ಸ್ವಾಗತ!",
+                selectTopic: "ವಿಷಯ ಆಯ್ಕೆಮಾಡಿ",
+                startQuiz: "ಕ್ವಿಜ್ ಪ್ರಾರಂಭಿಸಿ",
+                nextQuestion: "ಮುಂದಿನ ಪ್ರಶ್ನೆ",
+                hint: "ಸುಳಿವು",
+                timeRemaining: "ಉಳಿದಿರುವ ಸಮಯ",
+                correctAnswers: "ಸರಿಯಾದ ಉತ್ತರಗಳು",
+                incorrectAnswers: "ತಪ್ಪಾದ ಉತ್ತರಗಳು",
+                timeTaken: "ತೆಗೆದುಕೊಂಡ ಸಮಯ (ನಿಮಿಷಗಳು)",
+                reviewAnswers: "ಉತ್ತರಗಳನ್ನು ಪರಿಶೀಲಿಸಿ",
+                newQuiz: "ಹೊಸ ಕ್ವಿಜ್"
+            }
+        };
+
+        // Sample questions database
+        const questionsDB = {
+            python: [
+                {
+                    question: "Which of the following is the correct way to create a list in Python?",
+                    options: ["list = [1, 2, 3, 4]", "list = (1, 2, 3, 4)", "list = {1, 2, 3, 4}", "list = \"1, 2, 3, 4\""],
+                    correct: 0,
+                    hint: "Think about the syntax used for creating collections in Python."
+                },
+                {
+                    question: "What is the output of print(type([]))?",
+                    options: ["<class 'array'>", "<class 'list'>", "<class 'tuple'>", "<class 'dict'>"],
+                    correct: 1,
+                    hint: "Consider what type of object [] creates in Python."
+                },
+                {
+                    question: "Which operator is used for exponentiation in Python?",
+                    options: ["^", "**", "exp", "pow"],
+                    correct: 1,
+                    hint: "This operator uses two of the same symbols."
+                }
+            ],
+            science: [
+                {
+                    question: "What is the chemical symbol for gold?",
+                    options: ["Go", "Gd", "Au", "Ag"],
+                    correct: 2,
+                    hint: "It comes from the Latin word 'aurum'."
+                },
+                {
+                    question: "How many bones are in an adult human body?",
+                    options: ["206", "196", "216", "186"],
+                    correct: 0,
+                    hint: "It's just over 200."
+                }
+            ],
+            history: [
+                {
+                    question: "In which year did World War II end?",
+                    options: ["1944", "1945", "1946", "1947"],
+                    correct: 1,
+                    hint: "It ended in the mid-1940s."
+                },
+                {
+                    question: "Who was the first President of the United States?",
+                    options: ["Thomas Jefferson", "John Adams", "George Washington", "Benjamin Franklin"],
+                    correct: 2,
+                    hint: "He is known as the 'Father of His Country'."
+                }
+            ]
+        };
+
+        // Initialize application
+        function initializeApp() {
+            loadUserStats();
+            setupEventListeners();
+            updateLanguage();
+            updateTheme();
+        }
+
+        // Load user statistics from localStorage
+        function loadUserStats() {
+            const saved = localStorage.getItem('triviaverse_stats');
+            if (saved) {
+                appState.userStats = JSON.parse(saved);
+            }
+            updateStatsDisplay();
+        }
+
+        // Save user statistics to localStorage
+        function saveUserStats() {
+            localStorage.setItem('triviaverse_stats', JSON.stringify(appState.userStats));
+        }
+
+        // Update statistics display
+        function updateStatsDisplay() {
+            document.getElementById('totalQuizzes').textContent = appState.userStats.totalQuizzes;
+            document.getElementById('averageScore').textContent = appState.userStats.averageScore + '%';
+            document.getElementById('bestStreak').textContent = appState.userStats.bestStreak;
+            document.getElementById('favoriteTopicDisplay').textContent = appState.userStats.favoriteTopic;
+        }
+
+        // Setup event listeners
+        function setupEventListeners() {
+            // Topic selection
+            document.getElementById('topicSelect').addEventListener('change', (e) => {
+                appState.selectedTopic = e.target.value;
+                updateStartButton();
+            });
+
+            // Question count selection
+            document.querySelectorAll('.st-radio-option').forEach(option => {
+                option.addEventListener('click', (e) => {
+                    document.querySelectorAll('.st-radio-option').forEach(opt => opt.classList.remove('selected'));
+                    e.currentTarget.classList.add('selected');
+                    appState.selectedQuestions = parseInt(e.currentTarget.dataset.questions);
+                    const radio = e.currentTarget.querySelector('input[type="radio"]');
+                    if (radio) radio.checked = true;
+                });
+            });
+
+            // Start quiz button
+            document.getElementById('startQuizBtn').addEventListener('click', startQuiz);
+
+            // Next question button
+            document.getElementById('nextQuestionBtn').addEventListener('click', nextQuestion);
+
+            // Hint button
+            document.getElementById('hintBtn').addEventListener('click', showHint);
+
+            // New quiz button
+            document.getElementById('newQuizBtn').addEventListener('click', resetToHome);
+
+            // Review answers button
+            document.getElementById('reviewAnswersBtn').addEventListener('click', reviewAnswers);
+
+            // Theme toggle
+            document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+
+            // Language switcher
+            document.querySelectorAll('.language-option').forEach(option => {
+                option.addEventListener('click', (e) => {
+                    document.querySelectorAll('.language-option').forEach(opt => opt.classList.remove('active'));
+                    e.currentTarget.classList.add('active');
+                    appState.language = e.currentTarget.dataset.lang;
+                    updateLanguage();
+                });
+            });
+
+            // Trending topics
+            document.querySelectorAll('[data-topic]').forEach(topic => {
+                topic.addEventListener('click', (e) => {
+                    const topicValue = e.currentTarget.dataset.topic;
+                    document.getElementById('topicSelect').value = topicValue;
+                    appState.selectedTopic = topicValue;
+                    updateStartButton();
+                });
+            });
+
+            // Expandable sections
+            document.querySelectorAll('.st-expander-header').forEach(header => {
+                header.addEventListener('click', (e) => {
+                    const content = header.nextElementSibling;
+                    const arrow = header.querySelector('.st-expander-arrow');
+                    
+                    content.classList.toggle('expanded');
+                    arrow.classList.toggle('expanded');
+                });
+            });
+        }
+
+        // Update start button state
+        function updateStartButton() {
+            const startBtn = document.getElementById('startQuizBtn');
+            if (appState.selectedTopic) {
+                startBtn.disabled = false;
+                startBtn.style.opacity = '1';
+            } else {
+                startBtn.disabled = true;
+                startBtn.style.opacity = '0.5';
+            }
+        }
+
+        // Start quiz
+        function startQuiz() {
+            if (!appState.selectedTopic) {
+                showMessage('Please select a topic first!', 'error');
+                return;
+            }
+
+            // Generate questions
+            const availableQuestions = questionsDB[appState.selectedTopic] || [];
+            if (availableQuestions.length === 0) {
+                showMessage('No questions available for this topic yet!', 'error');
+                return;
+            }
+
+            // Select random questions
+            appState.questions = [];
+            for (let i = 0; i < Math.min(appState.selectedQuestions, availableQuestions.length); i++) {
+                const randomIndex = Math.floor(Math.random() * availableQuestions.length);
+                appState.questions.push(availableQuestions[randomIndex]);
+            }
+
+            // Reset quiz state
+            appState.currentQuestionIndex = 0;
+            appState.userAnswers = [];
+            appState.score = 0;
+            appState.timeRemaining = 30;
+
+            // Show quiz interface
+            showQuizInterface();
+            loadCurrentQuestion();
+            startTimer();
+        }
+
+        // Show quiz interface
+        function showQuizInterface() {
+            document.getElementById('quizContainer').classList.add('active');
+            document.querySelector('.st-header').style.display = 'none';
+            document.querySelector('.st-metrics').style.display = 'none';
+            document.querySelector('.st-columns').style.display = 'none';
+            document.getElementById('resultsContainer').classList.remove('active');
+        }
+
+        // Load current question
+        function loadCurrentQuestion() {
+            const question = appState.questions[appState.currentQuestionIndex];
+            if (!question) return;
+
+            // Update question number and progress
+            document.getElementById('currentQuestionNum').textContent = appState.currentQuestionIndex + 1;
+            document.getElementById('totalQuestions').textContent = appState.questions.length;
+            
+            const progress = ((appState.currentQuestionIndex + 1) / appState.questions.length) * 100;
+            document.getElementById('quizProgress').style.width = progress + '%';
+
+            // Update question text
+            document.getElementById('questionText').textContent = question.question;
+
+            // Update options
+            const optionsContainer = document.getElementById('quizOptions');
+            optionsContainer.innerHTML = '';
+            
+            question.options.forEach((option, index) => {
+                const optionElement = document.createElement('div');
+                optionElement.className = 'quiz-option';
+                optionElement.dataset.answer = index;
+                optionElement.innerHTML = `
+                    <div class="option-letter">${String.fromCharCode(65 + index)}</div>
+                    <span>${option}</span>
+                `;
+                optionElement.addEventListener('click', selectAnswer);
+                optionsContainer.appendChild(optionElement);
+            });
+
+            // Reset timer
+            appState.timeRemaining = 30;
+            document.getElementById('nextQuestionBtn').disabled = true;
+            document.getElementById('nextQuestionBtn').style.opacity = '0.5';
+        }
+
+        // Select answer
+        function selectAnswer(e) {
+            const selectedOption = e.currentTarget;
+            const answerIndex = parseInt(selectedOption.dataset.answer);
+            
+            // Remove previous selections
+            document.querySelectorAll('.quiz-option').forEach(opt => {
+                opt.classList.remove('selected');
+            });
+            
+            // Add selection
+            selectedOption.classList.add('selected');
+            
+            // Store answer
+            appState.userAnswers[appState.currentQuestionIndex] = answerIndex;
+            
+            // Enable next button
+            document.getElementById('nextQuestionBtn').disabled = false;
+            document.getElementById('nextQuestionBtn').style.opacity = '1';
+            
+            // Stop timer
+            clearInterval(appState.timerInterval);
+            
+            // Check answer
+            setTimeout(() => checkAnswer(), 500);
+        }
+
+        // Check answer
+        function checkAnswer() {
+            const question = appState.questions[appState.currentQuestionIndex];
+            const userAnswer = appState.userAnswers[appState.currentQuestionIndex];
+            const isCorrect = userAnswer === question.correct;
+            
+            // Update score
+            if (isCorrect) {
+                appState.score++;
+            }
+            
+            // Show correct/incorrect styling
+            document.querySelectorAll('.quiz-option').forEach((opt, index) => {
+                if (index === question.correct) {
+                    opt.classList.add('correct');
+                } else if (index === userAnswer && !isCorrect) {
+                    opt.classList.add('incorrect');
+                }
+            });
+            
+            // Show feedback message
+            const message = isCorrect ? 'Correct!' : 'Incorrect!';
+            const messageType = isCorrect ? 'success' : 'error';
+            showMessage(message, messageType);
+        }
+
+        // Next question
+        function nextQuestion() {
+            if (appState.currentQuestionIndex < appState.questions.length - 1) {
+                appState.currentQuestionIndex++;
+                loadCurrentQuestion();
+                startTimer();
+            } else {
+                finishQuiz();
+            }
+        }
+
+        // Finish quiz
+        function finishQuiz() {
+            clearInterval(appState.timerInterval);
+            
+            // Calculate results
+            const percentage = Math.round((appState.score / appState.questions.length) * 100);
+            const correctAnswers = appState.score;
+            const incorrectAnswers = appState.questions.length - appState.score;
+            
+            // Update user stats
+            appState.userStats.totalQuizzes++;
+            appState.userStats.averageScore = Math.round(
+                (appState.userStats.averageScore * (appState.userStats.totalQuizzes - 1) + percentage) / appState.userStats.totalQuizzes
+            );
+            if (appState.score > appState.userStats.bestStreak) {
+                appState.userStats.bestStreak = appState.score;
+            }
+            appState.userStats.favoriteTopic = appState.selectedTopic;
+            
+            saveUserStats();
+            updateStatsDisplay();
+            
+            // Show results
+            showResults(percentage, correctAnswers, incorrectAnswers);
+        }
+
+        // Show results
+        function showResults(percentage, correctAnswers, incorrectAnswers) {
+            document.getElementById('quizContainer').classList.remove('active');
+            document.getElementById('resultsContainer').classList.add('active');
+            
+            // Update results display
+            document.getElementById('finalScore').textContent = percentage + '%';
+            document.getElementById('correctAnswers').textContent = correctAnswers;
+            document.getElementById('incorrectAnswers').textContent = incorrectAnswers;
+            document.getElementById('timeTaken').textContent = Math.round((appState.questions.length * 30 - appState.timeRemaining) / 60);
+            
+            // Update results message
+            let message = '';
+            if (percentage >= 90) {
+                message = 'Outstanding! You\'re a quiz master!';
+            } else if (percentage >= 70) {
+                message = 'Great job! Well done!';
+            } else if (percentage >= 50) {
+                message = 'Good effort! Keep practicing!';
+            } else {
+                message = 'Don\'t give up! Practice makes perfect!';
+            }
+            document.getElementById('resultsMessage').textContent = message;
+        }
+
+        // Start timer
+        function startTimer() {
+            clearInterval(appState.timerInterval);
+            appState.timerInterval = setInterval(() => {
+                appState.timeRemaining--;
+                document.getElementById('timeRemaining').textContent = appState.timeRemaining;
+                
+                if (appState.timeRemaining <= 0) {
+                    clearInterval(appState.timerInterval);
+                    showMessage('Time\'s up!', 'warning');
+                    setTimeout(() => {
+                        if (appState.currentQuestionIndex < appState.questions.length - 1) {
+                            nextQuestion();
+                        } else {
+                            finishQuiz();
+                        }
+                    }, 1000);
+                }
+            }, 1000);
+        }
+
+        // Show hint
+        function showHint() {
+            const question = appState.questions[appState.currentQuestionIndex];
+            if (question && question.hint) {
+                showMessage(question.hint, 'info');
+            } else {
+                showMessage('No hint available for this question.', 'info');
+            }
+        }
+
+        // Reset to home
+        function resetToHome() {
+            document.getElementById('quizContainer').classList.remove('active');
+            document.getElementById('resultsContainer').classList.remove('active');
+            document.querySelector('.st-header').style.display = 'block';
+            document.querySelector('.st-metrics').style.display = 'grid';
+            document.querySelector('.st-columns').style.display = 'grid';
+            
+            // Reset selections
+            document.getElementById('topicSelect').value = '';
+            appState.selectedTopic = '';
+            updateStartButton();
+        }
+
+        // Review answers
+        function reviewAnswers() {
+            let reviewHTML = '<div class="chart-container"><div class="chart-title">Answer Review</div>';
+            
+            appState.questions.forEach((question, index) => {
+                const userAnswer = appState.userAnswers[index];
+                const isCorrect = userAnswer === question.correct;
+                const status = isCorrect ? 'Correct' : 'Incorrect';
+                const statusClass = isCorrect ? 'st-success' : 'st-error';
+                
+                reviewHTML += `
+                    <div class="${statusClass}" style="margin-bottom: 1rem;">
+                        <div>
+                            <strong>Q${index + 1}:</strong> ${question.question}<br>
+                            <strong>Your Answer:</strong> ${question.options[userAnswer] || 'Not answered'}<br>
+                            <strong>Correct Answer:</strong> ${question.options[question.correct]}<br>
+                            <strong>Status:</strong> ${status}
+                        </div>
+                    </div>
+                `;
+            });
+            
+            reviewHTML += '</div>';
+            
+            // Create modal or show in new section
+            showMessage('Review feature coming soon!', 'info');
+        }
+
+        // Show message
+        function showMessage(text, type = 'info') {
+            const messageElement = document.createElement('div');
+            messageElement.className = `st-${type}`;
+            messageElement.innerHTML = `
+                <i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
+                <span>${text}</span>
+            `;
+            
+            // Insert at top of main content
+            const mainContent = document.querySelector('.st-container');
+            mainContent.insertBefore(messageElement, mainContent.firstChild);
+            
+            // Remove after 3 seconds
+            setTimeout(() => {
+                messageElement.remove();
+            }, 3000);
+        }
+
+        // Toggle theme
+        function toggleTheme() {
+            const toggle = document.getElementById('themeToggle');
+            toggle.classList.toggle('active');
+            
+            // Here you would implement theme switching logic
+            // For now, we'll just toggle the visual state
+            appState.theme = appState.theme === 'dark' ? 'light' : 'dark';
+        }
+
+        // Update language
+        function updateLanguage() {
+            const lang = appState.language;
+            const t = translations[lang];
+            
+            if (t) {
+                // Update translatable elements
+                // This is a simplified implementation
+                // In a real app, you'd have data attributes or IDs for each translatable element
+                console.log('Language updated to:', lang);
+            }
+        }
+
+        // Update theme
+        function updateTheme() {
+            document.body.className = appState.theme;
+        }
+
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', initializeApp);
+
+        // Mobile responsiveness
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            const mainContent = document.getElementById('mainContent');
+            
+            if (window.innerWidth <= 768) {
+                sidebar.classList.toggle('hidden');
+                mainContent.classList.toggle('full-width');
+            }
+        }
+
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                document.getElementById('sidebar').classList.remove('hidden');
+                document.getElementById('mainContent').classList.remove('full-width');
+            } else {
+                document.getElementById('sidebar').classList.add('hidden');
+                document.getElementById('mainContent').classList.add('full-width');
+            }
+        });
+
+        // Initialize mobile view
+        if (window.innerWidth <= 768) {
+            document.getElementById('sidebar').classList.add('hidden');
+            document.getElementById('mainContent').classList.add('full-width');
+        }
+    </script>
+<script id="dhws-dataInjector" src="/public/dhws-data-injector.js"></script>
+</body>
+</html>

tailwind.config.js

@@ -0,0 +1,184 @@
+module.exports = {
+  content: [
+    "./pages/*.{html,js}",
+    "./index.html",
+    "./src/**/*.{html,js,jsx,ts,tsx}",
+    "./components/**/*.{html,js,jsx,ts,tsx}"
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Primary Colors
+        primary: {
+          DEFAULT: "#4F46E5", // indigo-600
+          50: "#EEF2FF", // indigo-50
+          100: "#E0E7FF", // indigo-100
+          500: "#6366F1", // indigo-500
+          600: "#4F46E5", // indigo-600
+          700: "#4338CA", // indigo-700
+          900: "#312E81", // indigo-900
+        },
+        // Secondary Colors
+        secondary: {
+          DEFAULT: "#06B6D4", // cyan-500
+          50: "#ECFEFF", // cyan-50
+          100: "#CFFAFE", // cyan-100
+          400: "#22D3EE", // cyan-400
+          500: "#06B6D4", // cyan-500
+          600: "#0891B2", // cyan-600
+          700: "#0E7490", // cyan-700
+        },
+        // Accent Colors
+        accent: {
+          DEFAULT: "#F59E0B", // amber-500
+          50: "#FFFBEB", // amber-50
+          100: "#FEF3C7", // amber-100
+          400: "#FBBF24", // amber-400
+          500: "#F59E0B", // amber-500
+          600: "#D97706", // amber-600
+          700: "#B45309", // amber-700
+        },
+        // Background Colors
+        background: {
+          DEFAULT: "#0F172A", // slate-900
+          light: "#F8FAFC", // slate-50
+        },
+        surface: {
+          DEFAULT: "#1E293B", // slate-800
+          light: "#FFFFFF", // white
+          hover: "#334155", // slate-700
+        },
+        // Text Colors
+        'text-primary': {
+          DEFAULT: "#F8FAFC", // slate-50
+          light: "#0F172A", // slate-900
+        },
+        'text-secondary': {
+          DEFAULT: "#94A3B8", // slate-400
+          light: "#64748B", // slate-500
+        },
+        'text-muted': {
+          DEFAULT: "#64748B", // slate-500
+          light: "#94A3B8", // slate-400
+        },
+        // Status Colors
+        success: {
+          DEFAULT: "#10B981", // emerald-500
+          50: "#ECFDF5", // emerald-50
+          100: "#D1FAE5", // emerald-100
+          600: "#059669", // emerald-600
+          700: "#047857", // emerald-700
+        },
+        warning: {
+          DEFAULT: "#F59E0B", // amber-500
+          50: "#FFFBEB", // amber-50
+          100: "#FEF3C7", // amber-100
+          600: "#D97706", // amber-600
+        },
+        error: {
+          DEFAULT: "#EF4444", // red-500
+          50: "#FEF2F2", // red-50
+          100: "#FEE2E2", // red-100
+          600: "#DC2626", // red-600
+          700: "#B91C1C", // red-700
+        },
+        // Border Colors
+        border: "rgba(148, 163, 184, 0.2)", // slate-400 with opacity
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+        inter: ['Inter', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+        'jetbrains': ['JetBrains Mono', 'monospace'],
+      },
+      fontSize: {
+        'xs': ['0.75rem', { lineHeight: '1rem' }],
+        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
+        'base': ['1rem', { lineHeight: '1.5rem' }],
+        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
+        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
+        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+      },
+      borderRadius: {
+        'sm': '4px',
+        'md': '8px',
+        'lg': '12px',
+        'xl': '16px',
+      },
+      boxShadow: {
+        'sm': '0 1px 3px rgba(0, 0, 0, 0.1)',
+        'md': '0 4px 6px rgba(0, 0, 0, 0.1)',
+        'lg': '0 10px 15px rgba(0, 0, 0, 0.1)',
+        'card': '0 1px 3px rgba(0, 0, 0, 0.1)',
+        'modal': '0 4px 6px rgba(0, 0, 0, 0.1)',
+      },
+      animation: {
+        'slide-in': 'slideIn 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+        'fade-in': 'fadeIn 150ms ease-out',
+        'scale-in': 'scaleIn 150ms ease-out',
+      },
+      keyframes: {
+        slideIn: {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        scaleIn: {
+          '0%': { transform: 'scale(0.95)', opacity: '0' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+      },
+      transitionDuration: {
+        '150': '150ms',
+        '300': '300ms',
+      },
+      transitionTimingFunction: {
+        'ease-out': 'ease-out',
+        'custom': 'cubic-bezier(0.4, 0, 0.2, 1)',
+      },
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+        '128': '32rem',
+      },
+      minHeight: {
+        'touch': '44px',
+      },
+      minWidth: {
+        'touch': '44px',
+      },
+    },
+  },
+  plugins: [
+    function({ addUtilities }) {
+      const newUtilities = {
+        '.touch-target': {
+          minHeight: '44px',
+          minWidth: '44px',
+        },
+        '.micro-interaction': {
+          transition: 'all 150ms ease-out',
+        },
+        '.micro-interaction:hover': {
+          transform: 'scale(0.98)',
+        },
+        '.transition-theme': {
+          transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+      }
+      addUtilities(newUtilities)
+    }
+  ],
+}