From c0cc36ce127d5d6151a6bff7f01e753f7ec50817 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 7 Mar 2026 16:05:51 +0000
Subject: [PATCH 1/2] Initial plan
From 007a31e833247fa88fb10823af2ed99667da63f8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 7 Mar 2026 16:23:21 +0000
Subject: [PATCH 2/2] Replace CDN Tailwind with npm build-time CSS; fix CSP and
SPA fallback
Co-authored-by: lmangani <1423657+lmangani@users.noreply.github.com>
---
.gitignore | 3 +
index.css | 190 +++++++++
index.html | 245 +-----------
index.tsx | 1 +
package-lock.json | 931 +++++++++++++++++++++++++++++++++++++++++++-
package.json | 3 +
postcss.config.js | 6 +
server/src/index.ts | 7 +-
tailwind.config.ts | 47 +++
9 files changed, 1182 insertions(+), 251 deletions(-)
create mode 100644 index.css
create mode 100644 postcss.config.js
create mode 100644 tailwind.config.ts
diff --git a/.gitignore b/.gitignore
index fd02f4d..682f3c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,9 @@ build/
server/.env
# Database (SQLite)
+data/*.db
+data/*.db-shm
+data/*.db-wal
server/data/*.db
server/data/*.db-shm
server/data/*.db-wal
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..1f623ab
--- /dev/null
+++ b/index.css
@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --breakpoint-mobile: 768px;
+}
+
+body {
+ font-family: 'Inter', sans-serif;
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+::-webkit-scrollbar-thumb {
+ background: #d4d4d8;
+ border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: #a1a1aa;
+}
+
+/* Dark mode scrollbar */
+.dark ::-webkit-scrollbar-thumb {
+ background: #3f3f46;
+}
+.dark ::-webkit-scrollbar-thumb:hover {
+ background: #52525b;
+}
+
+/* Hide scrollbar utility */
+.scrollbar-hide {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+ display: none;
+}
+
+.gradient-text {
+ background: linear-gradient(to right, #f472b6, #a78bfa, #60a5fa);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+@keyframes music-bars {
+ 0% { height: 20%; opacity: 0.5; }
+ 50% { height: 100%; opacity: 1; }
+ 100% { height: 20%; opacity: 0.5; }
+}
+
+.music-bar-anim {
+ animation: music-bars 1s ease-in-out infinite;
+}
+
+.mobile-only {
+ display: none;
+}
+.desktop-only {
+ display: block;
+}
+@media (max-width: 767px) {
+ .mobile-only {
+ display: block;
+ }
+ .desktop-only {
+ display: none;
+ }
+ .mobile-only-flex {
+ display: flex;
+ }
+ .mobile-only-inline {
+ display: inline;
+ }
+ .mobile-only-inline-flex {
+ display: inline-flex;
+ }
+}
+
+@keyframes slide-in-left {
+ from { transform: translateX(-100%); }
+ to { transform: translateX(0); }
+}
+@keyframes slide-out-left {
+ from { transform: translateX(0); }
+ to { transform: translateX(-100%); }
+}
+@keyframes slide-in-right {
+ from { transform: translateX(100%); }
+ to { transform: translateX(0); }
+}
+@keyframes slide-out-right {
+ from { transform: translateX(0); }
+ to { transform: translateX(-100%); }
+}
+@keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+@keyframes fade-out {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+.drawer-slide-in-left {
+ animation: slide-in-left 0.3s ease-out forwards;
+}
+.drawer-slide-out-left {
+ animation: slide-out-left 0.3s ease-in forwards;
+}
+.drawer-slide-in-right {
+ animation: slide-in-right 0.3s ease-out forwards;
+}
+.drawer-slide-out-right {
+ animation: slide-out-right 0.3s ease-in forwards;
+}
+.drawer-backdrop-in {
+ animation: fade-in 0.3s ease-out forwards;
+}
+.drawer-backdrop-out {
+ animation: fade-out 0.3s ease-in forwards;
+}
+
+.backdrop-blur-mobile {
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+}
+.backdrop-blur-mobile-lg {
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+}
+
+.safe-area-inset-top {
+ padding-top: env(safe-area-inset-top, 0px);
+}
+.safe-area-inset-bottom {
+ padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.safe-area-inset-left {
+ padding-left: env(safe-area-inset-left, 0px);
+}
+.safe-area-inset-right {
+ padding-right: env(safe-area-inset-right, 0px);
+}
+.safe-area-inset-x {
+ padding-left: env(safe-area-inset-left, 0px);
+ padding-right: env(safe-area-inset-right, 0px);
+}
+.safe-area-inset-y {
+ padding-top: env(safe-area-inset-top, 0px);
+ padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.safe-area-inset-all {
+ padding-top: env(safe-area-inset-top, 0px);
+ padding-bottom: env(safe-area-inset-bottom, 0px);
+ padding-left: env(safe-area-inset-left, 0px);
+ padding-right: env(safe-area-inset-right, 0px);
+}
+
+.touch-none {
+ -webkit-tap-highlight-color: transparent;
+ touch-action: none;
+}
+.touch-pan-x {
+ touch-action: pan-x;
+}
+.touch-pan-y {
+ touch-action: pan-y;
+}
+.touch-manipulation {
+ touch-action: manipulation;
+}
+.tap-highlight-none {
+ -webkit-tap-highlight-color: transparent;
+}
+.scroll-touch {
+ -webkit-overflow-scrolling: touch;
+}
+.overscroll-none {
+ overscroll-behavior: none;
+}
+.overscroll-contain {
+ overscroll-behavior: contain;
+}
diff --git a/index.html b/index.html
index 6d702fd..a4d5af2 100644
--- a/index.html
+++ b/index.html
@@ -19,248 +19,9 @@
-
-
-
-
-
-
-
+
-
-
+
+