root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(frontend): index.html vorbereitet (Tailwind CDN + Google Fonts)

Browse source
This commit is contained in:
vibe-bot 2025-08-08 21:14:41 +02:00
parent 0a95746d04
commit a8602700b3
2 changed files with 18 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

15
web/index.html
View file

@ -1,13 +1,16 @@
<!doctype html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Discord Soundboard</title> <title>Soundboard</title>
</head> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<body> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<div id="root"></div> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</head>
<body class="p-4 sm:p-8">
<div id="root"></div>
</body> </body>
</html> </html>

18
web/src/styles.css
View file

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root { color-scheme: dark; } :root { color-scheme: dark; }
* { box-sizing: border-box; } * { box-sizing: border-box; }
[data-theme="dark"] body, [data-theme="dark"] body,
@ -19,21 +21,19 @@ body {
radial-gradient(1200px 800px at 110% 10%, rgba(99,102,241,.16), transparent 60%), radial-gradient(1200px 800px at 110% 10%, rgba(99,102,241,.16), transparent 60%),
linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%); linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
color: #0f172a; color: #0f172a;
font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
} }
[data-theme="light"] .controls.glass, [data-theme="light"] .controls.glass,
[data-theme="light"] .tabs.glass, [data-theme="light"] .tabs.glass { background: #ffffff; border: 1px solid #e8e8ed; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
[data-theme="light"] .select-trigger, [data-theme="light"] .select-trigger,
[data-theme="light"] .control input, [data-theme="light"] .control input,
[data-theme="light"] .control select, [data-theme="light"] .control select { background: #f2f2f6; border: 1px solid #dcdce1; color: #1d1d1f; box-shadow: none; }
[data-theme="light"] .sound { [data-theme="light"] .control input::placeholder { color: #6e6e73; }
background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); [data-theme="light"] .sound { background: #ffffff; border: 1px solid #e8e8ed; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
color: #0f172a; [data-theme="light"] .sound:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; }
border-color: rgba(0,0,0,.08);
box-shadow: 0 8px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme="light"] .select-menu { background: #ffffff; color: #0f172a; } [data-theme="light"] .select-menu { background: #ffffff; color: #0f172a; }
[data-theme="light"] .select-item:hover { background: rgba(15,23,42,.06); } [data-theme="light"] .select-item:hover { background: rgba(15,23,42,.06); }
[data-theme="light"] .tab { color: #0f172a; border-color: rgba(0,0,0,.1); background: rgba(255,255,255,.95); } [data-theme="light"] .tab { color: #1d1d1f; background: #e8e8ed; border: 1px solid transparent; }
[data-theme="light"] .tab:hover { background: rgba(15,23,42,.06); } [data-theme="light"] .tab:hover { background: rgba(15,23,42,.06); }
[data-theme="light"] .tab.active { background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(99,102,241,.25)); } [data-theme="light"] .tab.active { background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(99,102,241,.25)); }
[data-theme="light"] .badge { background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.1); color: #0f172a; } [data-theme="light"] .badge { background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.1); color: #0f172a; }