Initial commit: Spotify to Lidarr frontend with Docker and Unraid script

2026-02-27 23:07:13 +01:00 · 2026-02-27 23:07:13 +01:00 · 87a680326e
commit 87a680326e
12 changed files with 996 additions and 0 deletions
--- a/public/styles.css
+++ b/public/styles.css
@ -0,0 +1,171 @@
+:root {
+  --bg: #0f172a;
+  --bg-soft: #1e293b;
+  --card: #111827;
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+  --accent: #22d3ee;
+  --accent-2: #f59e0b;
+  --danger: #fb7185;
+  --border: #334155;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Space Grotesk', sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 10% 10%, #0ea5e9 0%, transparent 30%),
+    radial-gradient(circle at 80% 0%, #f97316 0%, transparent 25%),
+    var(--bg);
+  min-height: 100vh;
+}
+
+.layout {
+  width: min(1100px, 92vw);
+  margin: 2rem auto 3rem;
+  display: grid;
+  gap: 1rem;
+}
+
+.hero h1 {
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
+}
+
+.hero p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.panel {
+  background: color-mix(in srgb, var(--card) 88%, black);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 1rem;
+}
+
+.settings .hint {
+  color: var(--muted);
+  margin: 0.4rem 0 0;
+}
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.search-row {
+  display: flex;
+  gap: 0.8rem;
+}
+
+input,
+button {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0.7rem 0.9rem;
+  font-family: inherit;
+  font-size: 1rem;
+}
+
+input {
+  background: #0b1220;
+  color: var(--text);
+  flex: 1;
+}
+
+button {
+  background: linear-gradient(120deg, var(--accent), var(--accent-2));
+  color: #001018;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+button:hover {
+  filter: brightness(1.07);
+}
+
+.results {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 0.9rem;
+}
+
+.album-card {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--bg-soft);
+  display: grid;
+}
+
+.album-cover {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+.album-body {
+  padding: 0.8rem;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.album-body h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.album-body p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+dialog {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: #0b1220;
+  color: var(--text);
+  width: min(620px, 95vw);
+}
+
+.dialog-content {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.track-list {
+  max-height: 45vh;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.5rem;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.track-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dialog-actions {
+  margin-top: 0.7rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+@media (max-width: 680px) {
+  .search-row {
+    flex-direction: column;
+  }
+}