From 3b98f11b701df215b8b2be65b2e593b141288d94 Mon Sep 17 00:00:00 2001 From: Izan Gil <66965250+SrIzan10@users.noreply.github.com> Date: Fri, 18 Apr 2025 20:28:05 +0200 Subject: [PATCH] feat: background analysis and disclaimer --- components.json | 30 +++++----- package.json | 7 ++- src/app.css | 19 ++++++- .../components/app/background-analyzer.svelte | 56 +++++++++++++++++++ src/lib/components/app/bg-image.svelte | 4 +- src/lib/components/app/bottom-bar.svelte | 13 +++-- src/lib/components/app/disclaimer.svelte | 27 +++++++++ src/lib/components/app/now-playing.svelte | 29 +++++----- .../ui/dialog/dialog-content.svelte | 39 +++++++++++++ .../ui/dialog/dialog-description.svelte | 16 ++++++ .../components/ui/dialog/dialog-footer.svelte | 20 +++++++ .../components/ui/dialog/dialog-header.svelte | 20 +++++++ .../ui/dialog/dialog-overlay.svelte | 19 +++++++ .../components/ui/dialog/dialog-title.svelte | 16 ++++++ src/lib/components/ui/dialog/index.ts | 37 ++++++++++++ src/routes/+layout.svelte | 2 + src/routes/+page.svelte | 2 + yarn.lock | 13 +++-- 18 files changed, 327 insertions(+), 42 deletions(-) create mode 100644 src/lib/components/app/background-analyzer.svelte create mode 100644 src/lib/components/app/disclaimer.svelte create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte create mode 100644 src/lib/components/ui/dialog/index.ts diff --git a/components.json b/components.json index 22be117..260ea62 100644 --- a/components.json +++ b/components.json @@ -1,17 +1,17 @@ { - "$schema": "https://next.shadcn-svelte.com/schema.json", - "style": "new-york", - "tailwind": { - "config": "tailwind.config.ts", - "css": "src/app.css", - "baseColor": "neutral" - }, - "aliases": { - "components": "$lib/components", - "utils": "$lib/utils", - "ui": "$lib/components/ui", - "hooks": "$lib/hooks" - }, - "typescript": true, - "registry": "https://next.shadcn-svelte.com/registry" + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app.css", + "baseColor": "neutral" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" } diff --git a/package.json b/package.json index 3a49974..06720dd 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "format": "prettier --write ." }, "devDependencies": { - "@lucide/svelte": "^0.488.0", + "@lucide/svelte": "^0.492.0", "@sveltejs/adapter-auto": "^6.0.0", "@sveltejs/adapter-cloudflare": "^5.0.1", "@sveltejs/kit": "^2.16.0", @@ -34,5 +34,8 @@ "vite": "^6.0.0", "wrangler": "^4.12.0" }, - "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e", + "dependencies": { + "mode-watcher": "0.5.1" + } } diff --git a/src/app.css b/src/app.css index 72b0ea6..249248f 100644 --- a/src/app.css +++ b/src/app.css @@ -32,6 +32,12 @@ --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; + + --text-color: rgba(0, 0, 0, 0.85); + --text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2); + --glass-bg: rgba(0, 0, 0, 0.1); + --glass-hover: rgba(0, 0, 0, 0.2); + --glass-border: rgba(0, 0, 0, 0.2); } .dark { @@ -62,14 +68,23 @@ --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; + --text-color: rgba(255, 255, 255, 0.95); + --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + --glass-bg: rgba(255, 255, 255, 0.1); + --glass-hover: rgba(255, 255, 255, 0.2); + --glass-border: rgba(255, 255, 255, 0.2); } } @layer base { * { - @apply border-border; + @apply border-border text-dynamic; } body { - @apply bg-background text-foreground m-0 p-0 overflow-hidden; + @apply bg-background text-dynamic m-0 p-0 overflow-hidden; } } +.text-dynamic { + color: var(--text-color); + text-shadow: var(--text-shadow); +} diff --git a/src/lib/components/app/background-analyzer.svelte b/src/lib/components/app/background-analyzer.svelte new file mode 100644 index 0000000..4f8b658 --- /dev/null +++ b/src/lib/components/app/background-analyzer.svelte @@ -0,0 +1,56 @@ + \ No newline at end of file diff --git a/src/lib/components/app/bg-image.svelte b/src/lib/components/app/bg-image.svelte index 21e2041..0a96c0d 100644 --- a/src/lib/components/app/bg-image.svelte +++ b/src/lib/components/app/bg-image.svelte @@ -1,8 +1,10 @@ diff --git a/src/lib/components/app/bottom-bar.svelte b/src/lib/components/app/bottom-bar.svelte index c5cf217..67c2e39 100644 --- a/src/lib/components/app/bottom-bar.svelte +++ b/src/lib/components/app/bottom-bar.svelte @@ -1,12 +1,17 @@
+ This project was created as an alternative to Chillhop Radio's web player, by implementing a + better, glassmorphic user interface paired with other utilities like Pomodoro timers and such, + which will be added soon. +
++ I do not have the right to the songs played on this radio station, nor do I have any + affiliation with Chillhop Music. This project is open source and not intended for + commercial use. The source code is available on GitHub. +
++ 🄯 GNU GPL, Sr Izan. +
+{state.currentSong?.artists}
-{state.currentSong?.artists}
+