429 lines
19 KiB
HTML
429 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>radiOLA — Wireframe Options</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: #0a0a0a;
|
||
color: #fff;
|
||
padding: 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 60px;
|
||
}
|
||
h1 { font-size: 32px; margin-bottom: 10px; text-align: center; }
|
||
p.subtitle { color: #888; margin-bottom: 40px; text-align: center; }
|
||
.options { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
|
||
.option { display: flex; flex-direction: column; align-items: center; gap: 16px; }
|
||
.option-label {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #ccc;
|
||
text-align: center;
|
||
}
|
||
.phone {
|
||
width: 320px;
|
||
height: 640px;
|
||
border: 12px solid #333;
|
||
border-radius: 40px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: #121212;
|
||
}
|
||
.phone-notch {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 120px;
|
||
height: 28px;
|
||
background: #333;
|
||
border-radius: 0 0 16px 16px;
|
||
z-index: 10;
|
||
}
|
||
.screen { padding: 40px 16px 80px; height: 100%; overflow-y: auto; }
|
||
|
||
/* Variant A: Spotify Dark */
|
||
.vA .screen { background: linear-gradient(180deg, #1a1a2e 0%, #121212 40%); }
|
||
.vA .header { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
|
||
.vA .search { background: #2a2a2a; border-radius: 8px; padding: 10px 14px; color: #888; font-size: 14px; margin-bottom: 16px; }
|
||
.vA .chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
||
.vA .chip { background: #2a2a2a; padding: 6px 14px; border-radius: 16px; font-size: 12px; color: #ccc; }
|
||
.vA .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.vA .card { background: #1e1e1e; border-radius: 12px; padding: 12px; aspect-ratio: 1; display: flex; flex-direction: column; gap: 8px; }
|
||
.vA .cover { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; flex: 1; }
|
||
.vA .name { font-size: 13px; font-weight: 500; }
|
||
.vA .miniplayer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 56px;
|
||
background: #1e1e1e;
|
||
border-top: 1px solid #333;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
gap: 12px;
|
||
}
|
||
.vA .mini-cover { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 6px; }
|
||
.vA .mini-info { flex: 1; }
|
||
.vA .mini-title { font-size: 13px; font-weight: 500; }
|
||
.vA .mini-artist { font-size: 11px; color: #888; }
|
||
.vA .mini-btn { width: 32px; height: 32px; background: #fff; border-radius: 50%; }
|
||
.vA .nav {
|
||
position: absolute;
|
||
bottom: 56px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 56px;
|
||
background: #121212;
|
||
border-top: 1px solid #222;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: #888;
|
||
}
|
||
.vA .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
||
.vA .nav-icon { width: 24px; height: 24px; background: #444; border-radius: 4px; }
|
||
|
||
/* Variant B: Apple Music Vibrant */
|
||
.vB .screen { background: #000; }
|
||
.vB .header { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
|
||
.vB .search { background: #1c1c1e; border-radius: 10px; padding: 10px 14px; color: #888; font-size: 14px; margin-bottom: 16px; }
|
||
.vB .section-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
|
||
.vB .horizontal { display: flex; gap: 12px; overflow-x: hidden; margin-bottom: 16px; }
|
||
.vB .h-card { min-width: 140px; }
|
||
.vB .h-cover { width: 140px; height: 140px; background: linear-gradient(135deg, #ff6b6b, #feca57); border-radius: 12px; margin-bottom: 8px; }
|
||
.vB .h-name { font-size: 13px; font-weight: 500; }
|
||
.vB .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.vB .card { background: #1c1c1e; border-radius: 16px; padding: 12px; aspect-ratio: 1; display: flex; flex-direction: column; gap: 8px; }
|
||
.vB .cover { background: linear-gradient(135deg, #48dbfb, #0abde3); border-radius: 12px; flex: 1; }
|
||
.vB .name { font-size: 13px; font-weight: 500; }
|
||
.vB .miniplayer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 8px;
|
||
right: 8px;
|
||
height: 64px;
|
||
background: rgba(28,28,30,0.9);
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 16px 16px 0 0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
gap: 12px;
|
||
}
|
||
.vB .mini-cover { width: 44px; height: 44px; background: linear-gradient(135deg, #ff6b6b, #feca57); border-radius: 10px; }
|
||
.vB .mini-info { flex: 1; }
|
||
.vB .mini-title { font-size: 13px; font-weight: 500; }
|
||
.vB .mini-artist { font-size: 11px; color: #888; }
|
||
.vB .mini-btn { width: 32px; height: 32px; background: #fff; border-radius: 50%; }
|
||
.vB .nav {
|
||
position: absolute;
|
||
bottom: 64px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 56px;
|
||
background: #000;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: #888;
|
||
}
|
||
.vB .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
||
.vB .nav-icon { width: 24px; height: 24px; background: #444; border-radius: 4px; }
|
||
|
||
/* Variant C: Radio Record Neon */
|
||
.vC .screen { background: #0d0d0d; }
|
||
.vC .header { font-size: 22px; font-weight: 700; margin-bottom: 12px; color: #ff0055; }
|
||
.vC .search { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 10px 14px; color: #888; font-size: 14px; margin-bottom: 12px; }
|
||
.vC .chips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
|
||
.vC .chip { background: #1a1a1a; border: 1px solid #ff0055; padding: 6px 14px; border-radius: 16px; font-size: 12px; color: #ff0055; }
|
||
.vC .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
|
||
.vC .card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||
.vC .cover { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, #ff0055, #ff5500); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
||
.vC .name { font-size: 11px; text-align: center; }
|
||
.vC .miniplayer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 52px;
|
||
background: #1a1a1a;
|
||
border-top: 2px solid #ff0055;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
gap: 12px;
|
||
}
|
||
.vC .mini-cover { width: 36px; height: 36px; background: linear-gradient(135deg, #ff0055, #ff5500); border-radius: 6px; }
|
||
.vC .mini-info { flex: 1; }
|
||
.vC .mini-title { font-size: 13px; font-weight: 500; }
|
||
.vC .mini-artist { font-size: 11px; color: #888; }
|
||
.vC .mini-btn { width: 28px; height: 28px; background: #ff0055; border-radius: 50%; }
|
||
.vC .nav {
|
||
position: absolute;
|
||
bottom: 52px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 52px;
|
||
background: #0d0d0d;
|
||
border-top: 1px solid #222;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: #888;
|
||
}
|
||
.vC .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
||
.vC .nav-icon { width: 22px; height: 22px; background: #444; border-radius: 4px; }
|
||
|
||
.player-screen {
|
||
display: none;
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: #121212;
|
||
z-index: 20;
|
||
padding: 60px 24px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.player-screen.active { display: flex; }
|
||
.player-big-cover {
|
||
width: 240px; height: 240px;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-radius: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
.player-station { font-size: 14px; color: #888; }
|
||
.player-track { font-size: 22px; font-weight: 700; text-align: center; }
|
||
.player-artist { font-size: 16px; color: #888; }
|
||
.deeplink-row { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
|
||
.dl-btn { width: 48px; height: 48px; background: #2a2a2a; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #888; }
|
||
.controls { display: flex; gap: 24px; margin-top: 30px; }
|
||
.ctrl-btn { width: 56px; height: 56px; background: #fff; border-radius: 50%; }
|
||
.ctrl-btn.play { width: 72px; height: 72px; }
|
||
.close-player {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
width: 32px; height: 32px;
|
||
background: #333;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.legend {
|
||
margin-top: 20px;
|
||
background: #1a1a1a;
|
||
padding: 20px;
|
||
border-radius: 16px;
|
||
max-width: 900px;
|
||
width: 100%;
|
||
}
|
||
.legend h3 { margin-bottom: 12px; color: #fff; }
|
||
.legend ul { color: #aaa; line-height: 1.8; padding-left: 20px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>📱 radiOLA — Wireframe Options</h1>
|
||
<p class="subtitle">Выбери стиль, который ближе. Нажми на экран, чтобы увидеть Player-экран.</p>
|
||
|
||
<div class="options">
|
||
|
||
<!-- Variant A -->
|
||
<div class="option vA">
|
||
<div class="option-label">A. Spotify Dark<br><span style="font-size:13px;color:#888;font-weight:400">Тёмный минимализм, градиенты, крупные карточки</span></div>
|
||
<div class="phone" onclick="togglePlayer('pA')">
|
||
<div class="phone-notch"></div>
|
||
<div class="screen">
|
||
<div class="header">Радио</div>
|
||
<div class="search">Поиск станции...</div>
|
||
<div class="chips">
|
||
<div class="chip">Все</div>
|
||
<div class="chip">Транс</div>
|
||
<div class="chip">Хаус</div>
|
||
<div class="chip">Басс</div>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="card"><div class="cover"></div><div class="name">Record</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div><div class="name">Trance</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div><div class="name">Deep</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div><div class="name">Bass</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="nav">
|
||
<div class="nav-item"><div class="nav-icon"></div>Радио</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>Избранное</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>История</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>Настройки</div>
|
||
</div>
|
||
<div class="miniplayer">
|
||
<div class="mini-cover"></div>
|
||
<div class="mini-info"><div class="mini-title">Record</div><div class="mini-artist">Armin van Buuren — Blah Blah</div></div>
|
||
<div class="mini-btn"></div>
|
||
</div>
|
||
<div id="pA" class="player-screen">
|
||
<div class="close-player" onclick="event.stopPropagation();togglePlayer('pA')"></div>
|
||
<div class="player-big-cover"></div>
|
||
<div class="player-station">Record</div>
|
||
<div class="player-track">Blah Blah</div>
|
||
<div class="player-artist">Armin van Buuren</div>
|
||
<div class="deeplink-row">
|
||
<div class="dl-btn">Яндекс</div>
|
||
<div class="dl-btn">VK</div>
|
||
<div class="dl-btn">Spotify</div>
|
||
<div class="dl-btn">Apple</div>
|
||
</div>
|
||
<div class="controls">
|
||
<div class="ctrl-btn"></div>
|
||
<div class="ctrl-btn play"></div>
|
||
<div class="ctrl-btn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Variant B -->
|
||
<div class="option vB">
|
||
<div class="option-label">B. Apple Music Vibrant<br><span style="font-size:13px;color:#888;font-weight:400">Яркие цвета, горизонтальный скролл, glassmorphism</span></div>
|
||
<div class="phone" onclick="togglePlayer('pB')">
|
||
<div class="phone-notch"></div>
|
||
<div class="screen">
|
||
<div class="header">Радио</div>
|
||
<div class="search">Поиск станции...</div>
|
||
<div class="section-title">Популярное</div>
|
||
<div class="horizontal">
|
||
<div class="h-card"><div class="h-cover"></div><div class="h-name">Record</div></div>
|
||
<div class="h-card"><div class="h-cover" style="background:linear-gradient(135deg,#48dbfb,#0abde3)"></div><div class="h-name">Trance</div></div>
|
||
<div class="h-card"><div class="h-cover" style="background:linear-gradient(135deg,#ff9ff3,#f368e0)"></div><div class="h-name">Deep</div></div>
|
||
</div>
|
||
<div class="section-title">Все станции</div>
|
||
<div class="grid">
|
||
<div class="card"><div class="cover"></div><div class="name">Record</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#ff6b6b,#feca57)"></div><div class="name">Trance</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#48dbfb,#0abde3)"></div><div class="name">Deep</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#1dd1a1,#10ac84)"></div><div class="name">Bass</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="nav">
|
||
<div class="nav-item"><div class="nav-icon"></div>Радио</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>Избранное</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>История</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>Настройки</div>
|
||
</div>
|
||
<div class="miniplayer">
|
||
<div class="mini-cover"></div>
|
||
<div class="mini-info"><div class="mini-title">Record</div><div class="mini-artist">Blah Blah — Armin</div></div>
|
||
<div class="mini-btn"></div>
|
||
</div>
|
||
<div id="pB" class="player-screen">
|
||
<div class="close-player" onclick="event.stopPropagation();togglePlayer('pB')"></div>
|
||
<div class="player-big-cover" style="background:linear-gradient(135deg,#ff6b6b,#feca57)"></div>
|
||
<div class="player-station">Record</div>
|
||
<div class="player-track">Blah Blah</div>
|
||
<div class="player-artist">Armin van Buuren</div>
|
||
<div class="deeplink-row">
|
||
<div class="dl-btn">Яндекс</div>
|
||
<div class="dl-btn">VK</div>
|
||
<div class="dl-btn">Spotify</div>
|
||
<div class="dl-btn">Apple</div>
|
||
</div>
|
||
<div class="controls">
|
||
<div class="ctrl-btn"></div>
|
||
<div class="ctrl-btn play"></div>
|
||
<div class="ctrl-btn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Variant C -->
|
||
<div class="option vC">
|
||
<div class="option-label">C. Radio Record Neon<br><span style="font-size:13px;color:#888;font-weight:400">Брендовый розовый, сетка 3×3, компактный плеер</span></div>
|
||
<div class="phone" onclick="togglePlayer('pC')">
|
||
<div class="phone-notch"></div>
|
||
<div class="screen">
|
||
<div class="header">RADIO RECORD</div>
|
||
<div class="search">Поиск...</div>
|
||
<div class="chips">
|
||
<div class="chip">Все</div>
|
||
<div class="chip">Транс</div>
|
||
<div class="chip">Хаус</div>
|
||
</div>
|
||
<div class="grid">
|
||
<div class="card"><div class="cover">R</div><div class="name">Record</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#ff5500,#ffaa00)">T</div><div class="name">Trance</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#00d2ff,#3a7bd5)">D</div><div class="name">Deep</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#00ff88,#00cc66)">B</div><div class="name">Bass</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#ff0055,#ff5588)">P</div><div class="name">Pirate</div></div>
|
||
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#aa00ff,#ff00ff)">G</div><div class="name">GOA</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="nav">
|
||
<div class="nav-item"><div class="nav-icon"></div>Радио</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>Избранное</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>История</div>
|
||
<div class="nav-item"><div class="nav-icon"></div>Настройки</div>
|
||
</div>
|
||
<div class="miniplayer">
|
||
<div class="mini-cover"></div>
|
||
<div class="mini-info"><div class="mini-title">Record</div><div class="mini-artist">Blah Blah — Armin</div></div>
|
||
<div class="mini-btn"></div>
|
||
</div>
|
||
<div id="pC" class="player-screen">
|
||
<div class="close-player" onclick="event.stopPropagation();togglePlayer('pC')"></div>
|
||
<div class="player-big-cover" style="background:linear-gradient(135deg,#ff0055,#ff5500)"></div>
|
||
<div class="player-station">Record</div>
|
||
<div class="player-track">Blah Blah</div>
|
||
<div class="player-artist">Armin van Buuren</div>
|
||
<div class="deeplink-row">
|
||
<div class="dl-btn">Яндекс</div>
|
||
<div class="dl-btn">VK</div>
|
||
<div class="dl-btn">Spotify</div>
|
||
<div class="dl-btn">Apple</div>
|
||
</div>
|
||
<div class="controls">
|
||
<div class="ctrl-btn"></div>
|
||
<div class="ctrl-btn play"></div>
|
||
<div class="ctrl-btn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<h3>📋 Общие элементы для всех вариантов</h3>
|
||
<ul>
|
||
<li><strong>StationsScreen</strong> — поисковая строка, чипы фильтров по жанрам, сетка/список станций с обложками</li>
|
||
<li><strong>Player (expanded)</strong> — большая обложка, название станции, трек, исполнитель, ряд кнопок deep link (Яндекс, VK, Spotify, Apple, и т.д.), play/pause</li>
|
||
<li><strong>Mini-player (collapsed)</strong> — обложка 40-48dp, название станции, текущий трек, play/pause</li>
|
||
<li><strong>Bottom Nav</strong> — 4 таба: Радио, Избранное, История, Настройки</li>
|
||
<li><strong>FavoritesScreen</strong> — сетка избранных станций с ⭐ и drag-sort</li>
|
||
<li><strong>HistoryScreen</strong> — список последних 200 треков с timestamp, поиском, swipe-to-delete</li>
|
||
<li><strong>SettingsScreen</strong> — таймер сна, эквалайзер, настройка deep links, переключатель записи</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<script>
|
||
function togglePlayer(id) {
|
||
const el = document.getElementById(id);
|
||
el.classList.toggle('active');
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|