From ca021cc3f78ec2f762e28714dd5b20fff2aeceaa Mon Sep 17 00:00:00 2001 From: David Inostroza Date: Thu, 23 Apr 2026 18:20:08 -0400 Subject: [PATCH] agrega toggle de modo claro/oscuro con persistencia en localStorage Co-Authored-By: Claude Sonnet 4.6 --- app/templates/admin/playlists.html | 4 +-- app/templates/admin/voting.html | 2 +- app/templates/base.html | 18 ++++++++++- app/templates/index.html | 14 ++++----- static/style.css | 48 +++++++++++++++++++++++++----- 5 files changed, 67 insertions(+), 19 deletions(-) diff --git a/app/templates/admin/playlists.html b/app/templates/admin/playlists.html index c4696b1..84448ce 100644 --- a/app/templates/admin/playlists.html +++ b/app/templates/admin/playlists.html @@ -197,7 +197,7 @@ function clearEmoji(id) { .emoji-picker { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; } .emoji-opt { background: var(--surface); - border: 1px solid #333; + border: 1px solid var(--border2); border-radius: 6px; font-size: 1.15rem; width: 34px; height: 34px; @@ -205,7 +205,7 @@ function clearEmoji(id) { display: flex; align-items: center; justify-content: center; transition: background .12s, transform .1s; } -.emoji-opt:hover { background: #333; transform: scale(1.15); } +.emoji-opt:hover { background: var(--surface3); transform: scale(1.15); } .emoji-thumb { font-size: 1.6rem; } diff --git a/app/templates/admin/voting.html b/app/templates/admin/voting.html index ff10838..8766965 100644 --- a/app/templates/admin/voting.html +++ b/app/templates/admin/voting.html @@ -162,7 +162,7 @@ .result-info { flex: 1; display: flex; flex-direction: column; gap: .3rem; } .result-name { font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: .5rem; } .winner-badge { background: rgba(255,215,0,.15); color: gold; font-size: .75rem; padding: 1px 6px; border-radius: 10px; border: 1px solid rgba(255,215,0,.3); } -.result-bar-wrap { height: 6px; background: #333; border-radius: 3px; overflow: hidden; } +.result-bar-wrap { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; } .result-bar { height: 100%; background: var(--green); border-radius: 3px; transition: width .4s; } .result-count { display: flex; flex-direction: column; align-items: flex-end; min-width: 50px; } .result-count strong { font-size: 1.1rem; } diff --git a/app/templates/base.html b/app/templates/base.html index c7e5e69..f7b1441 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -1,9 +1,10 @@ - + {% block title %}Spotify Cantina{% endblock %} + @@ -13,6 +14,7 @@ Reproductor Estadísticas Admin +
{% block content %}{% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index 573a9d5..75d2969 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -456,7 +456,7 @@ setInterval(fetchVotingStatus, 5000); .vote-bar-wrap { width: 100%; height: 4px; - background: #333; + background: var(--surface3); border-radius: 2px; overflow: hidden; margin-top: 4px; @@ -498,7 +498,7 @@ setInterval(fetchVotingStatus, 5000); } .vote-btn:hover:not(:disabled) { background: var(--green-dark); } .vote-btn:disabled { - background: #333; + background: var(--surface3); color: var(--text-muted); cursor: not-allowed; opacity: .8; @@ -516,8 +516,8 @@ setInterval(fetchVotingStatus, 5000); padding: 1rem; } .modal-box { - background: #1a1a1a; - border: 1px solid #333; + background: var(--modal-bg); + border: 1px solid var(--border2); border-radius: 12px; width: 100%; max-width: 520px; @@ -531,7 +531,7 @@ setInterval(fetchVotingStatus, 5000); align-items: center; justify-content: space-between; padding: 1rem 1.2rem; - border-bottom: 1px solid #2a2a2a; + border-bottom: 1px solid var(--surface2); gap: .8rem; } .modal-title-wrap { @@ -574,7 +574,7 @@ setInterval(fetchVotingStatus, 5000); border-radius: 4px; flex-shrink: 0; } -.modal-close:hover { color: #fff; background: #2a2a2a; } +.modal-close:hover { color: var(--text); background: var(--surface2); } .modal-track-list { overflow-y: auto; padding: .4rem 0; @@ -587,7 +587,7 @@ setInterval(fetchVotingStatus, 5000); cursor: pointer; transition: background .12s; } -.modal-track-row:hover { background: #2a2a2a; } +.modal-track-row:hover { background: var(--surface2); } .modal-track-num { font-size: .8rem; color: var(--text-muted); diff --git a/static/style.css b/static/style.css index 82d7db9..dc92409 100644 --- a/static/style.css +++ b/static/style.css @@ -5,12 +5,30 @@ --bg: #121212; --surface: #1e1e1e; --surface2: #2a2a2a; + --surface3: #333333; --green: #1db954; --green-dark: #17a349; --text: #e0e0e0; --text-muted: #888; --red: #e74c3c; --radius: 10px; + --nav-bg: #000000; + --border: #444444; + --border2: #333333; + --modal-bg: #1a1a1a; +} + +[data-theme="light"] { + --bg: #f4f4f4; + --surface: #ffffff; + --surface2: #f0f0f0; + --surface3: #e4e4e4; + --text: #111111; + --text-muted: #666666; + --nav-bg: #f8f8f8; + --border: #d8d8d8; + --border2: #cccccc; + --modal-bg: #ffffff; } body { @@ -28,12 +46,12 @@ a:hover { text-decoration: underline; } display: flex; align-items: center; justify-content: space-between; - background: #000; + background: var(--nav-bg); padding: 0.75rem 1.5rem; position: sticky; top: 0; z-index: 100; - border-bottom: 1px solid #333; + border-bottom: 1px solid var(--border2); } .brand { font-size: 1.1rem; font-weight: 700; color: var(--green); letter-spacing: 1px; } .nav-links { display: flex; gap: 1.5rem; } @@ -154,7 +172,7 @@ a:hover { text-decoration: underline; } flex: 1; background: var(--surface2); color: var(--text); - border: 1px solid #444; + border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.6rem; font-size: 0.875rem; @@ -246,7 +264,7 @@ a:hover { text-decoration: underline; } .input { background: var(--surface2); color: var(--text); - border: 1px solid #444; + border: 1px solid var(--border); border-radius: 6px; padding: 0.55rem 0.75rem; font-size: 0.9rem; @@ -265,9 +283,9 @@ a:hover { text-decoration: underline; } text-transform: uppercase; letter-spacing: 0.4px; padding: 0.5rem 0.6rem; - border-bottom: 1px solid #333; + border-bottom: 1px solid var(--border2); } -.table td { padding: 0.6rem; border-bottom: 1px solid #2a2a2a; vertical-align: middle; } +.table td { padding: 0.6rem; border-bottom: 1px solid var(--surface2); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table-thumb { @@ -308,14 +326,14 @@ a:hover { text-decoration: underline; } .btn-sm { background: var(--surface2); color: var(--text); - border: 1px solid #444; + border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.7rem; cursor: pointer; font-size: 0.82rem; transition: background 0.15s; } -.btn-sm:hover { background: #333; } +.btn-sm:hover { background: var(--surface3); } .btn-danger { background: transparent; color: var(--red); border-color: var(--red); } .btn-danger:hover { background: var(--red); color: #fff; } @@ -346,3 +364,17 @@ a:hover { text-decoration: underline; } /* Misc */ .empty-msg { color: var(--text-muted); font-size: 0.9rem; } + +/* ── Theme toggle ── */ +.theme-toggle { + background: none; + border: none; + cursor: pointer; + font-size: 1.1rem; + padding: 0.3rem 0.4rem; + border-radius: 6px; + line-height: 1; + transition: background 0.15s; + color: var(--text-muted); +} +.theme-toggle:hover { background: var(--surface2); }