ALL NEW
This commit is contained in:
Flatlogic Bot
parent
2fad95a89a
commit
a783045d8a
@ -1,607 +1,455 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--primary-color: #3498db;
|
||||
--accent-color: #2ecc71;
|
||||
--light-bg: #ecf0f1;
|
||||
--light-surface: #ffffff;
|
||||
--light-text: #2c3e50;
|
||||
--dark-bg: #2c3e50;
|
||||
--dark-surface: #34495e;
|
||||
--dark-text: #ecf0f1;
|
||||
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
--primary-color: #FF8C00; /* Vibrant Orange */
|
||||
--dark-bg-1: #121212;
|
||||
--dark-bg-2: #1E1E1E;
|
||||
--dark-bg-3: #282828;
|
||||
--dark-text-1: #FFFFFF;
|
||||
--dark-text-2: #B3B3B3;
|
||||
--dark-border: #404040;
|
||||
|
||||
--light-bg-1: #FFFFFF;
|
||||
--light-bg-2: #F0F0F0;
|
||||
--light-bg-3: #E0E0E0;
|
||||
--light-text-1: #000000;
|
||||
--light-text-2: #555555;
|
||||
--light-border: #D1D1D1;
|
||||
|
||||
--font-family: 'Inter', sans-serif;
|
||||
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
body.light-theme {
|
||||
background-color: var(--light-bg);
|
||||
color: var(--light-text);
|
||||
--bg-color: var(--light-bg);
|
||||
--surface-color: var(--light-surface);
|
||||
--text-color: var(--light-text);
|
||||
}
|
||||
|
||||
body.dark-theme {
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--dark-text);
|
||||
--bg-color: var(--dark-bg);
|
||||
--surface-color: var(--dark-surface);
|
||||
--text-color: var(--dark-text);
|
||||
}
|
||||
|
||||
#app-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* --- Sidebar --- */
|
||||
#sidebar {
|
||||
width: 350px;
|
||||
background-color: var(--surface-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid rgba(0,0,0,0.1);
|
||||
transition: background-color 0.3s;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sidebar-header {
|
||||
padding: 20px;
|
||||
/* Dark Theme (Default) */
|
||||
body.dark-theme {
|
||||
background-color: var(--dark-bg-1);
|
||||
color: var(--dark-text-1);
|
||||
}
|
||||
|
||||
.dark-theme #main-header, .dark-theme .modal-content {
|
||||
background-color: var(--dark-bg-2);
|
||||
border-bottom: 1px solid var(--dark-border);
|
||||
}
|
||||
|
||||
.dark-theme #player-column, .dark-theme #stations-column {
|
||||
background-color: var(--dark-bg-2);
|
||||
}
|
||||
|
||||
.dark-theme .tab-content, .dark-theme #now-playing-card {
|
||||
background-color: var(--dark-bg-1);
|
||||
}
|
||||
|
||||
.dark-theme .control-button, .dark-theme input, .dark-theme select {
|
||||
background-color: var(--dark-bg-3);
|
||||
color: var(--dark-text-1);
|
||||
border: 1px solid var(--dark-border);
|
||||
}
|
||||
|
||||
.dark-theme .control-button:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--dark-text-1);
|
||||
}
|
||||
|
||||
.dark-theme .tab-link {
|
||||
color: var(--dark-text-2);
|
||||
}
|
||||
|
||||
.dark-theme .tab-link.active {
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.dark-theme #station-list li:hover {
|
||||
background-color: var(--dark-bg-3);
|
||||
}
|
||||
|
||||
.dark-theme #station-list li.active {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--dark-text-1);
|
||||
}
|
||||
|
||||
/* Light Theme */
|
||||
body.light-theme {
|
||||
background-color: var(--light-bg-2);
|
||||
color: var(--light-text-1);
|
||||
}
|
||||
|
||||
.light-theme #main-header, .light-theme .modal-content {
|
||||
background-color: var(--light-bg-1);
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
}
|
||||
|
||||
.light-theme #player-column, .light-theme #stations-column {
|
||||
background-color: var(--light-bg-1);
|
||||
}
|
||||
|
||||
.light-theme .tab-content, .light-theme #now-playing-card {
|
||||
background-color: var(--light-bg-2);
|
||||
}
|
||||
|
||||
.light-theme .control-button, .light-theme input, .light-theme select {
|
||||
background-color: var(--light-bg-3);
|
||||
color: var(--light-text-1);
|
||||
border: 1px solid var(--light-border);
|
||||
}
|
||||
|
||||
.light-theme .control-button:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--light-bg-1);
|
||||
}
|
||||
|
||||
.light-theme .tab-link {
|
||||
color: var(--light-text-2);
|
||||
}
|
||||
|
||||
.light-theme .tab-link.active {
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.light-theme #station-list li:hover {
|
||||
background-color: var(--light-bg-3);
|
||||
}
|
||||
|
||||
.light-theme #station-list li.active {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--light-bg-1);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
#main-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
#sidebar-header h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Theme Switcher */
|
||||
.theme-switcher {
|
||||
.logo h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
.switch input { display: none; }
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#sidebar-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s, border-bottom 0.2s;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.tab-link.active {
|
||||
opacity: 1;
|
||||
border-bottom: 3px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 35px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-bar .fa-search {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#genre-filter {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#station-list, #discover-list {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.station-item, .discover-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.station-item:hover, .discover-item:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.station-item.playing {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.station-item-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.station-item-info h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.station-item-info p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.station-item-controls button, .discover-item-controls button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.station-item.playing .station-item-controls button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.station-item-controls button:hover, .discover-item-controls button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-btn {
|
||||
padding: 15px;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* --- Main Content --- */
|
||||
/* Main Content */
|
||||
#main-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-color);
|
||||
flex-grow: 1;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#visualizer-container {
|
||||
flex-grow: 1;
|
||||
#player-column, #stations-column {
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
#player-column {
|
||||
flex-basis: 35%;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
#stations-column {
|
||||
flex-basis: 65%;
|
||||
}
|
||||
|
||||
/* Player Column */
|
||||
#now-playing-card {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#album-art-container {
|
||||
position: relative;
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
padding-top: 100%; /* 1:1 Aspect Ratio */
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#station-logo, #visualizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#visualizer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#player-container {
|
||||
padding: 30px;
|
||||
background-color: var(--surface-color);
|
||||
border-top: 1px solid rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#now-playing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#now-playing img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#now-playing h2 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#now-playing p {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
z-index: 2;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#station-info h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
#station-info p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#live-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#live-indicator .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 var(--primary-color); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(255, 140, 0, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
|
||||
}
|
||||
|
||||
#player-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#player-controls button {
|
||||
background: none;
|
||||
border: 1px solid var(--text-color);
|
||||
color: var(--text-color);
|
||||
.control-button {
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#player-controls button#play-pause-btn {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
.main-button {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 2rem;
|
||||
background-color: var(--primary-color) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#player-controls button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
#volume-and-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.volume-control input[type="range"] {
|
||||
#volume-control {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#volume-slider {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#volume-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#record-button.recording {
|
||||
color: red;
|
||||
animation: pulse-record 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-record {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Stations Column */
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.station-list-header {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
flex-grow: 1;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#station-list, #discover-list, #genre-list {
|
||||
list-style: none;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#recommendations-container {
|
||||
padding: 20px;
|
||||
background-color: var(--bg-color);
|
||||
border-top: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#recommendations-container h3 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#recommendations-list {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rec-item {
|
||||
background-color: var(--surface-color);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
#station-list li, #discover-list li, #genre-list li {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.rec-item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/* --- App Controls --- */
|
||||
#app-controls {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#app-controls button {
|
||||
background-color: var(--surface-color);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
#station-list li img, #discover-list li img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
transition: all 0.2s;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#app-controls button:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* --- Modals --- */
|
||||
/* Modals */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--surface-color);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
.close-button {
|
||||
float: right;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#station-form label, .color-picker-section h3, #import-export-modal h3 {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
.setting-item, #add-station-form > * {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
#station-form input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#station-form button, .modal-content button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: filter 0.2s;
|
||||
}
|
||||
|
||||
#station-form button:hover, .modal-content button:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.color-picker-section .color-input {
|
||||
/* Equalizer */
|
||||
#eq-bands-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.color-picker-section input[type="color"] {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#reset-colors-btn {
|
||||
background-color: #95a5a6;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#timer-options {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#timer-options button {
|
||||
width: auto;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#timer-display {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#cancel-timer-btn {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
#import-export-modal .import-section, #import-export-modal .export-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#import-export-modal input[type="file"] {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* --- Equalizer --- */
|
||||
#equalizer-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.eq-presets {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#eq-presets-select {
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#eq-bands {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
height: 200px;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.eq-band {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.eq-band input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 150px;
|
||||
height: 8px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 75px 75px;
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
transition: opacity .2s;
|
||||
.eq-band input[type=range] {
|
||||
-webkit-appearance: slider-vertical;
|
||||
width: 8px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.eq-band input[type="range"]:hover {
|
||||
opacity: 1;
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.eq-band label {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#reset-eq-btn {
|
||||
background-color: #95a5a6;
|
||||
}
|
||||
|
||||
#player-controls button#record-btn {
|
||||
color: #e74c3c;
|
||||
border-color: #e74c3c;
|
||||
}
|
||||
|
||||
#player-controls button#record-btn.recording {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--dark-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.light-theme ::-webkit-scrollbar-thumb {
|
||||
background: var(--light-border);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
270
index.php
270
index.php
@ -4,195 +4,148 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Radio Wave</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="assets/css/style.css?v=<?php echo time(); ?>">
|
||||
<meta name="description" content="Radio Wave - The ultimate web radio experience.">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
</head>
|
||||
<body>
|
||||
<body class="dark-theme">
|
||||
|
||||
<div id="app-container">
|
||||
<!-- Sidebar with station lists -->
|
||||
<div id="sidebar">
|
||||
<div id="sidebar-header">
|
||||
<!-- Header -->
|
||||
<header id="main-header">
|
||||
<div class="logo">
|
||||
<i class="fas fa-broadcast-tower"></i>
|
||||
<h1>Radio Wave</h1>
|
||||
<div class="theme-switcher">
|
||||
<i class="fas fa-sun"></i>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="theme-toggle">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<i class="fas fa-moon"></i>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<button id="theme-switcher" class="control-button"><i class="fas fa-sun"></i></button>
|
||||
<button id="equalizer-button" class="control-button"><i class="fas fa-sliders-h"></i></button>
|
||||
<button id="settings-button" class="control-button"><i class="fas fa-cog"></i></button>
|
||||
</div>
|
||||
<div id="sidebar-tabs">
|
||||
<button class="tab-link active" data-tab="my-stations-tab">My Stations</button>
|
||||
<button class="tab-link" data-tab="discover-tab">Discover</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- My Stations Tab -->
|
||||
<div id="my-stations-tab" class="tab-content active">
|
||||
<div class="toolbar">
|
||||
<div class="search-bar">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" id="search-input" placeholder="Search stations...">
|
||||
</div>
|
||||
<div class="filter-bar">
|
||||
<select id="genre-filter">
|
||||
<option value="all">All Genres</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="station-list">
|
||||
<!-- Stations will be dynamically loaded here -->
|
||||
</div>
|
||||
<button id="add-station-btn" class="sidebar-btn"><i class="fas fa-plus"></i> Add New Station</button>
|
||||
</div>
|
||||
|
||||
<!-- Discover Tab -->
|
||||
<div id="discover-tab" class="tab-content">
|
||||
<div class="toolbar">
|
||||
<div class="search-bar">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" id="discover-search-input" placeholder="Search global library...">
|
||||
</div>
|
||||
</div>
|
||||
<div id="discover-list">
|
||||
<!-- Global stations will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content with player and visualizer -->
|
||||
<div id="main-content">
|
||||
<div id="visualizer-container">
|
||||
<!-- Main Content -->
|
||||
<main id="main-content">
|
||||
<!-- Left Column: Player -->
|
||||
<div id="player-column">
|
||||
<div id="now-playing-card">
|
||||
<div id="album-art-container">
|
||||
<img src="https://picsum.photos/seed/radiowave/600" alt="Album Art" id="station-logo">
|
||||
<canvas id="visualizer"></canvas>
|
||||
</div>
|
||||
<div id="player-container">
|
||||
<div id="now-playing">
|
||||
<img id="station-art" src="assets/images/default-art.png" alt="Station Art">
|
||||
<div id="station-info">
|
||||
<h2 id="player-station-name">Select a Station</h2>
|
||||
<p id="player-station-genre">---</p>
|
||||
<h2 id="station-name">Select a Station</h2>
|
||||
<p id="station-genre">Welcome to Radio Wave</p>
|
||||
<p id="live-indicator"><span class="dot"></span> Live</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="player-controls">
|
||||
<button id="prev-station-btn" title="Previous Station"><i class="fas fa-backward"></i></button>
|
||||
<button id="play-pause-btn" class="play-btn" title="Play/Pause"><i class="fas fa-play"></i></button>
|
||||
<button id="next-station-btn" title="Next Station"><i class="fas fa-forward"></i></button>
|
||||
<button id="record-btn" title="Start Recording"><i class="fas fa-circle"></i></button>
|
||||
<button id="prev-station" class="control-button"><i class="fas fa-backward"></i></button>
|
||||
<button id="play-pause-button" class="control-button main-button">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
<button id="next-station" class="control-button"><i class="fas fa-forward"></i></button>
|
||||
</div>
|
||||
<div class="volume-control">
|
||||
|
||||
<div id="volume-and-more">
|
||||
<div id="volume-control">
|
||||
<i class="fas fa-volume-down"></i>
|
||||
<input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.8">
|
||||
<i class="fas fa-volume-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recommendations-container">
|
||||
<h3>You might also like...</h3>
|
||||
<div id="recommendations-list">
|
||||
<!-- AI recommendations will appear here -->
|
||||
</div>
|
||||
<button id="record-button" class="control-button"><i class="fas fa-circle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App-wide controls -->
|
||||
<div id="app-controls">
|
||||
<button id="settings-btn" title="Settings"><i class="fas fa-cog"></i></button>
|
||||
<button id="equalizer-btn" title="Equalizer"><i class="fas fa-sliders-h"></i></button>
|
||||
<button id="sleep-timer-btn" title="Sleep Timer"><i class="fas fa-clock"></i></button>
|
||||
<button id="import-export-btn" title="Import/Export"><i class="fas fa-file-import"></i></button>
|
||||
<!-- Right Column: Stations -->
|
||||
<div id="stations-column">
|
||||
<div class="tabs">
|
||||
<button class="tab-link active" data-tab="my-stations-tab">My Stations</button>
|
||||
<button class="tab-link" data-tab="discover-tab">Discover</button>
|
||||
<button class="tab-link" data-tab="genres-tab">Genres</button>
|
||||
</div>
|
||||
|
||||
<div id="my-stations-tab" class="tab-content active">
|
||||
<div class="station-list-header">
|
||||
<input type="text" id="search-input" placeholder="Search your stations...">
|
||||
<button id="add-station-button" class="control-button"><i class="fas fa-plus"></i></button>
|
||||
</div>
|
||||
<ul id="station-list">
|
||||
<!-- Stations will be dynamically added here -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="discover-tab" class="tab-content">
|
||||
<div id="ai-recommendations">
|
||||
<h3>Recommended For You</h3>
|
||||
<div id="recommendations-container"></div>
|
||||
</div>
|
||||
<h3>Global Stations</h3>
|
||||
<ul id="discover-list">
|
||||
<!-- Discover stations will be added here -->
|
||||
</ul>
|
||||
</div>
|
||||
<div id="genres-tab" class="tab-content">
|
||||
<ul id="genre-list">
|
||||
<!-- Genres will be dynamically added here -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Modals -->
|
||||
<!-- Add/Edit Station Modal -->
|
||||
<div id="station-modal" class="modal">
|
||||
<div id="settings-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn">×</span>
|
||||
<h2 id="modal-title">Add Station</h2>
|
||||
<form id="station-form">
|
||||
<input type="hidden" id="station-id">
|
||||
<label for="station-name">Name:</label>
|
||||
<input type="text" id="station-name" required>
|
||||
<label for="station-url">Stream URL:</label>
|
||||
<input type="url" id="station-url" required>
|
||||
<label for="station-genre">Genre:</label>
|
||||
<input type="text" id="station-genre" placeholder="e.g., Rock, Pop, News">
|
||||
<button type="submit" id="save-station-btn">Save Station</button>
|
||||
<span class="close-button">×</span>
|
||||
<h2>Settings</h2>
|
||||
<div class="setting-item">
|
||||
<label for="color-picker">Accent Color:</label>
|
||||
<input type="color" id="color-picker" value="#FF8C00">
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label for="sleep-timer-select">Sleep Timer:</label>
|
||||
<select id="sleep-timer-select">
|
||||
<option value="0">Off</option>
|
||||
<option value="15">15 Minutes</option>
|
||||
<option value="30">30 Minutes</option>
|
||||
<option value="60">1 Hour</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h3><i class="fas fa-cogs"></i> Manage Data</h3>
|
||||
<div class="data-buttons">
|
||||
<button id="import-button" class="control-button"><i class="fas fa-upload"></i> Import Stations</button>
|
||||
<button id="export-button" class="control-button"><i class="fas fa-download"></i> Export Stations</button>
|
||||
</div>
|
||||
<input type="file" id="import-file-input" style="display: none;" accept=".json">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="add-station-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button">×</span>
|
||||
<h2>Add New Station</h2>
|
||||
<form id="add-station-form">
|
||||
<input type="text" id="new-station-name" placeholder="Station Name" required>
|
||||
<input type="url" id="new-station-url" placeholder="Stream URL" required>
|
||||
<input type="url" id="new-station-logo" placeholder="Logo URL (Optional)">
|
||||
<input type="text" id="new-station-genre" placeholder="Genre (Optional)">
|
||||
<button type="submit" class="control-button">Save Station</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div id="settings-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn">×</span>
|
||||
<h2>Settings</h2>
|
||||
<div class="color-picker-section">
|
||||
<h3>Customize Colors</h3>
|
||||
<div class="color-input">
|
||||
<label for="primary-color">Primary:</label>
|
||||
<input type="color" id="primary-color" value="#3498db">
|
||||
</div>
|
||||
<div class="color-input">
|
||||
<label for="accent-color">Accent:</label>
|
||||
<input type="color" id="accent-color" value="#2ecc71">
|
||||
</div>
|
||||
<div class="color-input">
|
||||
<label for="text-color-light">Text (Light):</label>
|
||||
<input type="color" id="text-color-light" value="#2c3e50">
|
||||
</div>
|
||||
<div class="color-input">
|
||||
<label for="text-color-dark">Text (Dark):</label>
|
||||
<input type="color" id="text-color-dark" value="#ecf0f1">
|
||||
</div>
|
||||
<button id="reset-colors-btn">Reset to Default</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sleep Timer Modal -->
|
||||
<div id="sleep-timer-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn">×</span>
|
||||
<h2>Sleep Timer</h2>
|
||||
<p>Stop playback after:</p>
|
||||
<div id="timer-options">
|
||||
<button class="timer-option" data-minutes="15">15 min</button>
|
||||
<button class="timer-option" data-minutes="30">30 min</button>
|
||||
<button class="timer-option" data-minutes="60">60 min</button>
|
||||
</div>
|
||||
<p id="timer-display">Timer not set</p>
|
||||
<button id="cancel-timer-btn">Cancel Timer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import/Export Modal -->
|
||||
<div id="import-export-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn">×</span>
|
||||
<h2>Import / Export</h2>
|
||||
<div class="import-section">
|
||||
<h3>Import Stations</h3>
|
||||
<p>Load stations from a `.json` file.</p>
|
||||
<input type="file" id="import-file-input" accept=".json">
|
||||
<button id="import-btn">Import</button>
|
||||
</div>
|
||||
<div class="export-section">
|
||||
<h3>Export Stations</h3>
|
||||
<p>Save your current station list to a file.</p>
|
||||
<button id="export-btn">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Equalizer Modal -->
|
||||
<div id="equalizer-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn">×</span>
|
||||
<h2>Graphic Equalizer</h2>
|
||||
<span class="close-button">×</span>
|
||||
<h2>10-Band Graphic Equalizer</h2>
|
||||
<div id="equalizer-controls">
|
||||
<div class="eq-presets">
|
||||
<label for="eq-presets-select">Presets:</label>
|
||||
<select id="eq-presets-select">
|
||||
<select id="eq-preset-select">
|
||||
<option value="custom">Custom</option>
|
||||
<option value="flat">Flat</option>
|
||||
<option value="bass-boost">Bass Boost</option>
|
||||
@ -200,16 +153,15 @@
|
||||
<option value="pop">Pop</option>
|
||||
<option value="vocal-booster">Vocal Booster</option>
|
||||
</select>
|
||||
<button id="eq-reset-button" class="control-button">Reset</button>
|
||||
</div>
|
||||
<div id="eq-bands">
|
||||
<!-- EQ sliders will be generated by JS -->
|
||||
<div id="eq-bands-container">
|
||||
<!-- EQ bands will be generated by JS -->
|
||||
</div>
|
||||
<button id="reset-eq-btn">Reset EQ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<audio id="audio-player" crossOrigin="anonymous"></audio>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user