From 7ff2aaef6717b97278d97e40143e0dec22924fa5 Mon Sep 17 00:00:00 2001 From: heqnx Date: Sat, 5 Jul 2025 13:47:40 +0300 Subject: improvements, added metadata to script convertor, added spinnet, added track info to html --- templates/var/www/html/index.html | 88 ++++++++++++++++++++++++++++++++ templates/var/www/html/style.css | 105 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 193 insertions(+) create mode 100644 templates/var/www/html/index.html create mode 100644 templates/var/www/html/style.css (limited to 'templates/var') diff --git a/templates/var/www/html/index.html b/templates/var/www/html/index.html new file mode 100644 index 0000000..14ed148 --- /dev/null +++ b/templates/var/www/html/index.html @@ -0,0 +1,88 @@ + + + + + + + + {{ radio_name }} + + +

+ Play +

+ + + + diff --git a/templates/var/www/html/style.css b/templates/var/www/html/style.css new file mode 100644 index 0000000..542b59c --- /dev/null +++ b/templates/var/www/html/style.css @@ -0,0 +1,105 @@ +:root { + --color-black: #000000; + --color-dark-cyan: #008080; + --color-light-gray: #C0C0C0; + --color-dark-gray: #808080; +} + +@font-face { + font-family: 'MorePerfectDOSVGA'; + src: url('MorePerfectDOSVGA.ttf') format('truetype'); +} + +::-webkit-scrollbar { + display: none; +} + +* { + -ms-overflow-style: none; + scrollbar-width: none; +} + +body { + background-color: var(--color-black); + color: var(--color-light-gray); + font-family: 'MorePerfectDOSVGA', monospace; + font-size: 14px; + line-height: 1.6; + margin: 0 auto; + padding: 0; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + text-align: center; +} + +.index-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: 100%; + padding: 0 10px; + box-sizing: border-box; +} + +.player-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + max-width: 100%; + width: 320px; +} + +.btn { + color: var(--color-black); + background-color: var(--color-light-gray); + padding: 8px 16px; + text-decoration: none; + font-size: 16px; + font-weight: bold; + position: relative; + display: inline-block; + cursor: pointer; + user-select: none; +} + +.btn::before { + content: ''; + background-color: var(--color-dark-gray); + position: absolute; + top: 4px; + left: 4px; + width: 100%; + height: 100%; + z-index: -1; +} + +.btn:hover::before { + background-color: var(--color-dark-cyan); +} + +#info { + font-size: 14px; + color: var(--color-light-gray); + min-height: 18px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media (max-width: 400px) { + .btn { + font-size: 14px; + padding: 6px 12px; + } + #info { + font-size: 12px; + } + .player-wrapper { + width: 90vw; + } +} -- cgit v1.2.3