2234 lines
296 KiB
HTML
2234 lines
296 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet data-dc-atomics><meta name="design_doc_mode" content="canvas">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet">
|
||
<style>
|
||
body{margin:0;background:#efece6;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
|
||
a{color:#0f6d70;text-decoration:none}a:hover{color:#0a4b4d}
|
||
i[data-i]{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;user-select:none;flex:none}
|
||
i[data-i="1"]{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
|
||
@keyframes pw-bar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
|
||
@keyframes pw-pulse{0%,100%{opacity:.45}50%{opacity:1}}
|
||
@keyframes pw-ring{to{transform:rotate(360deg)}}
|
||
.dv-turn{padding:44px 48px 36px;border-bottom:1px solid rgba(0,0,0,.09);scroll-margin-top:16px}
|
||
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 24px}
|
||
.dv-tid{font:800 10px ui-monospace,Menlo,monospace;padding:4px 8px;background:#14262f;color:#fff;border-radius:5px;text-decoration:none}
|
||
.dv-tname{font:700 13px/1.2 'Plus Jakarta Sans',sans-serif;color:#14262f}
|
||
.dv-opts{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
|
||
.dv-opt{flex:none;display:flex;flex-direction:column;gap:12px;scroll-margin-top:16px}
|
||
.dv-oid{font:800 10.5px ui-monospace,Menlo,monospace;padding:4px 8px;background:rgba(20,38,47,.1);color:#14262f;border-radius:6px;text-decoration:none}
|
||
.dv-olabel{display:flex;align-items:baseline;gap:9px;font:500 12px/1.35 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.6);max-width:640px}
|
||
.dv-opt:target .dv-oid{background:#21D4D9;color:#062126}
|
||
.dv-next{margin:26px 0 0;font:500 12px/1.6 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.55)}
|
||
</style></helmet>
|
||
|
||
<section class="dv-turn" id="t4">
|
||
<div class="dv-thd"><a class="dv-tid" href="#t4">4</a><span class="dv-tname">Todas las pantallas en el formato de <a class="dv-oid" href="#3a">3a</a> · móvil + Android Auto</span></div>
|
||
|
||
<div style="max-width:1040px;margin:0 0 28px;background:#fff;border:1px solid rgba(20,38,47,.1);border-radius:12px;padding:24px 30px">
|
||
<div style="font:500 13.5px/1.65 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.78);text-wrap:pretty"><b>Reglas del sistema, aplicadas a todo.</b> Cuatro raíces con barra globo (Escuchar · Explorar · Alarmas · Ajustes); las pantallas de segundo nivel entran empujadas con cabecera de 56 px, flecha atrás y <b>sin</b> barra de pestañas; lo modal sube como hoja sobre un velo. Superficie de lista opaca <b>#102532</b>, cristal solo en el cromo y en la tarjeta activa. Miniatura de emisora 44–68 px, arte grande solo en reproductor y coche. <b>Android Auto</b> reproduce el árbol real de <code style="font:600 12px ui-monospace,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">ConstructorArbolAuto</code>: Favoritos · Todas las emisoras · Mis emisoras · Música Local, sin carpeta de ecualizador. La barra de <a class="dv-oid" href="#3a">3a</a> sigue siendo la navegable; aquí va estática en su pestaña. <b>Ecualización en dos niveles:</b> el <b>base</b> vive en Ajustes y cubre todas las emisoras; el de <b>una emisora concreta</b> se define desde su propia reproducción (bandeja de herramientas) y manda sobre el base, con «Volver al base» siempre a mano.</div>
|
||
</div>
|
||
|
||
<div class="dv-opts">
|
||
<div class="dv-opt" id="4a">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#4a">4a</a><span>Móvil · raíces y reproductor</span></div>
|
||
<div style="display:flex;gap:20px;align-items:flex-start">
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">1 · Escuchar (raíz)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;left:0;top:0;width:390px;height:400px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;opacity:.5"></div>
|
||
<div style="position:absolute;left:0;top:0;right:0;height:430px;background:linear-gradient(180deg,rgba(7,18,26,.4),rgba(7,18,26,.86) 58%,#07121A)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;height:52px;padding:0 10px 0 20px"><span style="flex:1;font-size:15px;font-weight:800;letter-spacing:.02em;color:rgba(242,247,250,.55)">ESCUCHANDO AHORA</span><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">cast</i></div><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">more_horiz</i></div></div>
|
||
<div style="position:relative;padding:0 20px">
|
||
<div style="display:flex;align-items:flex-end;gap:14px">
|
||
<div style="width:132px;height:132px;border-radius:24px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;flex:none;box-shadow:0 18px 44px rgba(0,0,0,.55)"></div>
|
||
<div style="flex:1;min-width:0;padding-bottom:2px">
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(126,228,194,.15);border:1px solid rgba(126,228,194,.4)"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:10px;font-weight:800;letter-spacing:.07em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:9px"></div>
|
||
<div style="font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.12">Radio Horizonte</div>
|
||
<div style="height:4px"></div>
|
||
<div style="font-size:12.5px;font-weight:600;color:rgba(242,247,250,.62)">Noticias · España · 128 kbps</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;align-items:flex-end;gap:2px;height:26px">
|
||
<sc-for list="{{ bars30 }}" as="b" hint-placeholder-count="30"><span style="flex:1;height:26px;border-radius:2px;background:linear-gradient(180deg,#7EE4C2,rgba(126,228,194,.3));transform-origin:bottom;animation:pw-bar 1.2s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:25px;color:#F4B860">favorite</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:29px;color:rgba(242,247,250,.85)">skip_previous</i></div>
|
||
<div style="width:72px;height:72px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 10px 28px rgba(33,212,217,.42)"><i data-i="1" style="font-size:38px;color:#062126">pause</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:29px;color:rgba(242,247,250,.85)">skip_next</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i style="font-size:25px;color:rgba(242,247,250,.85)">bedtime</i></div>
|
||
</div>
|
||
<div style="height:8px"></div>
|
||
<div style="display:flex;justify-content:center"><div style="display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:700;color:rgba(242,247,250,.78)"><i data-i style="font-size:17px">expand_less</i>Ecualizador, grabar, calidad</div></div>
|
||
<div style="height:22px"></div>
|
||
<div style="display:flex;align-items:center;gap:10px"><span style="font-size:15px;font-weight:800;letter-spacing:-.2px">Tus emisoras</span><span style="padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;font-weight:800;color:rgba(242,247,250,.6)">8</span><span style="flex:1"></span><span style="font-size:12px;font-weight:800;color:#21D4D9">Ver todas</span></div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 -4px;display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<sc-for list="{{ favs8 }}" as="s" hint-placeholder-count="8">
|
||
<div style="display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)">
|
||
<div style="flex:none;width:44px;height:44px;border-radius:11px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11px;color:rgba(242,247,250,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.g }}</div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:10px;right:10px;bottom:10px;height:74px;z-index:3">
|
||
<div style="position:absolute;bottom:-8px;left:0;width:110px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.32),transparent 66%);transform:translateX(-9px)"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -1.5px 0 rgba(255,255,255,.17)) drop-shadow(0 14px 26px rgba(0,0,0,.5))"><div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:#0A1B24;transform:translateX(-9px)"></div><div style="position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:999px;background:#0A1B24"></div></div>
|
||
<div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transform:translateX(-9px)"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;display:flex">
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><div style="display:flex;flex-direction:column;align-items:center;transform:translateY(-15px)"><i data-i="1" style="font-size:25px;color:#21D4D9">graphic_eq</i><span style="font-size:11px;font-weight:800;line-height:1.25;padding-top:3px;color:#21D4D9">Escuchar</span></div></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">travel_explore</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">alarm</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">settings</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">2 · Reproductor completo (empujado)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-40px;top:-70px;width:470px;height:470px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;filter:blur(26px);opacity:.45"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,26,.55),rgba(7,18,26,.9) 46%,#07121A)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;height:56px;padding:0 8px;flex:none"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:30px">keyboard_arrow_down</i></div><div style="flex:1;display:flex;justify-content:center"><div style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(126,228,194,.14);border:1px solid rgba(126,228,194,.4)"><span style="width:7px;height:7px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:800;letter-spacing:.06em;color:#7EE4C2">EN DIRECTO</span></div></div><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">cast</i></div></div>
|
||
<div style="position:relative;flex:1;display:flex;flex-direction:column;padding:6px 20px 20px;box-sizing:border-box">
|
||
<div style="display:flex;justify-content:center"><div style="width:246px;height:246px;border-radius:28px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;box-shadow:0 26px 60px rgba(0,0,0,.55)"></div></div>
|
||
<div style="height:20px"></div>
|
||
<div style="font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.15;text-align:center">Radio Horizonte</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:13px;font-weight:600;color:rgba(242,247,250,.62);text-align:center">Noticias · España · Español</div>
|
||
<div style="height:18px"></div>
|
||
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:2px;height:40px">
|
||
<sc-for list="{{ bars30 }}" as="b" hint-placeholder-count="30"><span style="flex:1;height:40px;border-radius:2px;background:linear-gradient(180deg,#F4B860,rgba(244,184,96,.45));transform-origin:bottom;animation:pw-bar 1.15s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
<div style="height:22px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:26px;color:#F4B860">favorite</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:rgba(242,247,250,.85)">skip_previous</i></div>
|
||
<div style="width:78px;height:78px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 10px 30px rgba(33,212,217,.42)"><i data-i="1" style="font-size:42px;color:#062126">pause</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:rgba(242,247,250,.85)">skip_next</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i style="font-size:26px;color:rgba(242,247,250,.85)">volume_up</i></div>
|
||
</div>
|
||
<div style="flex:1;min-height:18px"></div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
|
||
<div style="border-radius:18px;background:rgba(33,212,217,.16);border:1px solid rgba(33,212,217,.4);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i="1" style="font-size:23px;color:#21D4D9">equalizer</i><span style="font-size:10.5px;font-weight:800;color:#21D4D9">EQ propio</span></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.09);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i style="font-size:23px">mic</i><span style="font-size:10.5px;font-weight:700;color:rgba(242,247,250,.72)">Grabar</span></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.09);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i style="font-size:23px">bedtime</i><span style="font-size:10.5px;font-weight:700;color:rgba(242,247,250,.72)">30 min</span></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.09);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i style="font-size:23px">ios_share</i><span style="font-size:10.5px;font-weight:700;color:rgba(242,247,250,.72)">Compartir</span></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:19px;color:#7EE4C2">hd</i><span style="flex:1;font-size:12.5px;font-weight:600;color:rgba(242,247,250,.75)">MP3 · 128 kbps · conexión estable</span><span style="font-size:12px;font-weight:800;color:#21D4D9">Cambiar</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">3 · Explorar (raíz)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.16),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;height:670px;overflow:hidden">
|
||
<div style="margin:8px 16px 0;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.12);box-sizing:border-box"><i data-i style="font-size:22px;color:rgba(242,247,250,.5)">search</i><span style="flex:1;font-size:15px;color:rgba(242,247,250,.5)">Emisora, país, género…</span><i data-i style="font-size:21px;color:rgba(242,247,250,.5)">mic</i></div>
|
||
<div style="height:18px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Cerca de ti · España</div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:flex;gap:12px;padding:0 20px;overflow:hidden">
|
||
<sc-for list="{{ near3 }}" as="s" hint-placeholder-count="3">
|
||
<div style="flex:none;width:150px;border-radius:18px;overflow:hidden;background:#102532;border:1px solid rgba(255,255,255,.07)">
|
||
<div style="position:relative;height:86px"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,18,26,.7))"></div><div style="position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:#21D4D9;display:grid;place-items:center"><i data-i="1" style="font-size:19px;color:#062126">play_arrow</i></div></div>
|
||
<div style="padding:9px 11px 11px"><div style="font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11px;color:rgba(242,247,250,.55)">{{ s.g }} · {{ s.kbps }} kbps</div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<div style="height:20px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Explorar por</div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#21D4D9">public</i><div><div style="font-size:13.5px;font-weight:800">Países</div><div style="font-size:11px;color:rgba(242,247,250,.55)">238</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#7EE4C2">library_music</i><div><div style="font-size:13.5px;font-weight:800">Géneros</div><div style="font-size:11px;color:rgba(242,247,250,.55)">64</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#F4B860">trending_up</i><div><div style="font-size:13.5px;font-weight:800">Tendencias</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Hoy</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#60A5FA">fiber_new</i><div><div style="font-size:13.5px;font-weight:800">Novedades</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Esta semana</div></div></div>
|
||
</div>
|
||
<div style="height:20px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Populares ahora</div>
|
||
<div style="height:8px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<sc-for list="{{ results4 }}" as="s" hint-placeholder-count="4">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px">
|
||
<div style="flex:none;width:46px;height:46px;border-radius:12px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.55)">{{ s.g }} · {{ s.p }}</div></div>
|
||
<div style="flex:none;width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:21px;color:rgba(242,247,250,.5)">favorite</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:70px;display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07);z-index:2">
|
||
<div style="flex:none;width:42px;height:42px;border-radius:11px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
<div style="position:absolute;left:10px;right:10px;bottom:10px;height:74px;z-index:3">
|
||
<div style="position:absolute;bottom:-8px;left:0;width:110px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.32),transparent 66%);transform:translateX(84px)"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -1.5px 0 rgba(255,255,255,.17)) drop-shadow(0 14px 26px rgba(0,0,0,.5))"><div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:#0A1B24;transform:translateX(84px)"></div><div style="position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:999px;background:#0A1B24"></div></div>
|
||
<div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transform:translateX(84px)"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;display:flex">
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">graphic_eq</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><div style="display:flex;flex-direction:column;align-items:center;transform:translateY(-15px)"><i data-i="1" style="font-size:25px;color:#21D4D9">travel_explore</i><span style="font-size:11px;font-weight:800;line-height:1.25;padding-top:3px;color:#21D4D9">Explorar</span></div></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">alarm</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">settings</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="dv-opt" id="4b">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#4b">4b</a><span>Móvil · segundo nivel de Explorar y toda la rama de alarmas</span></div>
|
||
<div style="display:flex;gap:20px;align-items:flex-start">
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">4 · Tus emisoras · grupos (empujada)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.12),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:2px;height:56px;padding:0 10px 0 6px"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:26px">arrow_back</i></div><span style="flex:1;font-size:19px;font-weight:800;letter-spacing:-.3px">Tus emisoras</span><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:22px">create_new_folder</i></div><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:22px">swap_vert</i></div></div>
|
||
<div style="position:relative;height:670px;overflow:hidden">
|
||
<div style="display:flex;gap:8px;padding:0 20px;overflow:hidden">
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800">Todas · 8</div>
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">Cada mañana · 4</div>
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">Coche · 3</div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<sc-for list="{{ favs8 }}" as="s" hint-placeholder-count="8">
|
||
<div style="display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px">
|
||
<i data-i style="font-size:22px;color:rgba(242,247,250,.28);flex:none">drag_indicator</i>
|
||
<div style="flex:none;width:48px;height:48px;border-radius:12px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.g }} · {{ s.p }}</div></div>
|
||
<div style="flex:none;width:44px;height:44px;border-radius:50%;background:rgba(33,212,217,.14);display:grid;place-items:center"><i data-i="1" style="font-size:22px;color:#21D4D9">play_arrow</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<div style="height:8px"></div>
|
||
<div style="margin:0 16px;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:16px;border:1px dashed rgba(255,255,255,.16);font-size:13.5px;font-weight:800;color:rgba(242,247,250,.6)"><i data-i style="font-size:20px">add</i>Añadir emisora personalizada</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;height:64px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07)">
|
||
<div style="flex:none;width:42px;height:42px;border-radius:11px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
<div style="flex:none;width:36px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">keyboard_arrow_up</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">5 · Explorar › Países (empujada)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.14),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:2px;height:56px;padding:0 10px 0 6px"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:26px">arrow_back</i></div><span style="flex:1;font-size:19px;font-weight:800;letter-spacing:-.3px">Países</span><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:22px">search</i></div></div>
|
||
<div style="position:relative;height:670px;overflow:hidden">
|
||
<div style="padding:0 20px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">TUS IDIOMAS</div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;background:rgba(33,212,217,.1)"><span style="font-size:26px;line-height:1;width:34px;text-align:center">ES</span><div style="flex:1"><div style="font-size:15.5px;font-weight:800">España</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">2.184 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">MX</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">México</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">1.902 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">AR</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Argentina</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">1.140 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="padding:0 20px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">TODOS · 238</div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">DE</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Alemania</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">3.421 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">BR</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Brasil</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">2.760 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">US</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Estados Unidos</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">8.045 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">FR</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Francia</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">1.688 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">IT</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Italia</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">1.412 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">JP</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Japón</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">604 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:14px;padding:12px"><span style="font-size:26px;line-height:1;width:34px;text-align:center">GB</span><div style="flex:1"><div style="font-size:15.5px;font-weight:700">Reino Unido</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">2.058 emisoras</div></div><i data-i style="font-size:20px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;height:64px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07)">
|
||
<div style="flex:none;width:42px;height:42px;border-radius:11px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">6 · Búsqueda con resultados y filtros activos</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:8px;height:60px;padding:0 12px 0 6px">
|
||
<div style="width:44px;height:44px;display:grid;place-items:center;flex:none"><i data-i style="font-size:26px">arrow_back</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:14px;background:#102532;border:1px solid rgba(33,212,217,.4);box-sizing:border-box"><span style="flex:1;font-size:15px;font-weight:600">jazz</span><i data-i style="font-size:20px;color:rgba(242,247,250,.5)">close</i></div>
|
||
</div>
|
||
<div style="position:relative;height:666px;overflow:hidden">
|
||
<div style="display:flex;gap:8px;padding:0 16px;overflow:hidden">
|
||
<div style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 10px 7px 12px;border-radius:10px;background:rgba(33,212,217,.2);border:1px solid rgba(33,212,217,.45);font-size:12px;font-weight:800;white-space:nowrap">España<i data-i style="font-size:15px">close</i></div>
|
||
<div style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 10px 7px 12px;border-radius:10px;background:rgba(33,212,217,.2);border:1px solid rgba(33,212,217,.45);font-size:12px;font-weight:800;white-space:nowrap">≥128 kbps<i data-i style="font-size:15px">close</i></div>
|
||
<div style="flex:none;padding:7px 12px;border-radius:10px;background:#102532;border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:700;white-space:nowrap">Idioma</div>
|
||
<div style="flex:none;padding:7px 12px;border-radius:10px;background:#102532;border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:700;white-space:nowrap">Ordenar</div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="padding:0 20px;font-size:11px;font-weight:800;letter-spacing:.06em;color:rgba(242,247,250,.45)">37 RESULTADOS</div>
|
||
<div style="height:6px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<sc-for list="{{ results }}" as="s" hint-placeholder-count="8">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px">
|
||
<div style="flex:none;width:48px;height:48px;border-radius:12px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.g }} · {{ s.p }} · {{ s.kbps }} kbps</div></div>
|
||
<div style="flex:none;width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:22px;color:rgba(242,247,250,.55)">favorite</i></div>
|
||
<div style="flex:none;width:44px;height:44px;border-radius:50%;background:rgba(33,212,217,.14);display:grid;place-items:center"><i data-i="1" style="font-size:22px;color:#21D4D9">play_arrow</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;height:64px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07)">
|
||
<div style="flex:none;width:42px;height:42px;border-radius:11px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">7 · Alarmas (raíz)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.14),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;height:726px;overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:8px;height:56px;padding:0 12px 0 20px"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Alarmas</span><div style="display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800"><i data-i="1" style="font-size:18px">add</i>Nueva</div></div>
|
||
<div style="margin:0 16px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:rgba(244,184,96,.13);border:1px solid rgba(244,184,96,.34)">
|
||
<i data-i="1" style="font-size:26px;color:#F4B860">alarm_on</i>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:800">Suena en 9 h 12 min</div><div style="margin-top:2px;font-size:12.5px;color:rgba(242,247,250,.7)">Cada mañana · mañana a las 07:30</div></div>
|
||
<div style="padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);font-size:12px;font-weight:800">Saltar</div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="margin:0 16px;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i style="font-size:21px;color:#7EE4C2">beach_access</i><div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:800">Vacaciones</div><div style="margin-top:1px;font-size:11.5px;color:rgba(242,247,250,.55)">2 rangos · el próximo empieza en 1 día</div></div><span style="flex:none;padding:4px 9px;border-radius:999px;background:rgba(126,228,194,.16);border:1px solid rgba(126,228,194,.38);font-size:10.5px;font-weight:800;color:#7EE4C2;white-space:nowrap">4–18 AGO</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:14px"></div>
|
||
<div style="margin:0 16px;display:flex;flex-direction:column;gap:10px">
|
||
<sc-for list="{{ alarms }}" as="a" hint-placeholder-count="4">
|
||
<div style="border-radius:20px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:14px 16px">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:baseline;gap:8px"><span style="font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1;color:{{ a.color }}">{{ a.hora }}</span><span style="font-size:12px;font-weight:700;color:rgba(242,247,250,.5)">{{ a.dias }}</span></div>
|
||
<div style="height:7px"></div>
|
||
<div style="display:flex;align-items:center;gap:7px"><div style="flex:none;width:22px;height:22px;border-radius:6px;background:#0A1B24 url({{ a.art }}) center/cover"></div><span style="font-size:12.5px;font-weight:600;color:rgba(242,247,250,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ a.nombre }}</span></div>
|
||
</div>
|
||
<div style="flex:none;width:52px;height:32px;border-radius:999px;background:{{ a.sw }};display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:{{ a.swPos }}"><span style="width:26px;height:26px;border-radius:50%;background:#fff"></span></div>
|
||
</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:10px;right:10px;bottom:10px;height:74px;z-index:3">
|
||
<div style="position:absolute;bottom:-8px;left:0;width:110px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.32),transparent 66%);transform:translateX(176px)"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -1.5px 0 rgba(255,255,255,.17)) drop-shadow(0 14px 26px rgba(0,0,0,.5))"><div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:#0A1B24;transform:translateX(176px)"></div><div style="position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:999px;background:#0A1B24"></div></div>
|
||
<div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transform:translateX(176px)"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;display:flex">
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">graphic_eq</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">travel_explore</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><div style="display:flex;flex-direction:column;align-items:center;transform:translateY(-15px)"><i data-i="1" style="font-size:25px;color:#21D4D9">alarm</i><span style="font-size:11px;font-weight:800;line-height:1.25;padding-top:3px;color:#21D4D9">Alarmas</span></div></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">settings</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">8 · Editor de alarma (hoja)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;opacity:.4"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:absolute;left:0;right:0;top:44px;height:200px;opacity:.28;padding:0 20px">
|
||
<div style="display:flex;align-items:center;height:56px"><span style="flex:1;font-size:23px;font-weight:800">Alarmas</span></div>
|
||
<div style="border-radius:20px;background:rgba(244,184,96,.13);height:70px"></div>
|
||
</div>
|
||
<div style="position:absolute;inset:0;background:rgba(4,11,16,.68)"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;border-radius:30px 30px 0 0;background:#0D1B24;border-top:1px solid rgba(255,255,255,.11);padding:14px 20px 24px;box-shadow:0 -20px 50px rgba(0,0,0,.5)">
|
||
<div style="display:flex;justify-content:center;padding:2px 0 4px"><span style="width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)"></span></div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:center"><span style="flex:1;font-size:18px;font-weight:800;letter-spacing:-.3px">Nueva alarma</span><span style="font-size:13px;font-weight:800;color:#21D4D9">Guardar</span></div>
|
||
<div style="height:18px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 0;border-radius:22px;background:#102532;border:1px solid rgba(255,255,255,.08)">
|
||
<span style="font-size:56px;font-weight:800;letter-spacing:-2.5px;line-height:1">07</span><span style="font-size:44px;font-weight:800;color:rgba(242,247,250,.35);line-height:1;padding-bottom:5px">:</span><span style="font-size:56px;font-weight:800;letter-spacing:-2.5px;line-height:1;color:#21D4D9">30</span>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="padding:0 4px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">REPETIR</div>
|
||
<div style="display:flex;gap:7px">
|
||
<div style="flex:1;aspect-ratio:1;border-radius:50%;background:#21D4D9;color:#062126;display:grid;place-items:center;font-size:13px;font-weight:800">L</div>
|
||
<div style="flex:1;aspect-ratio:1;border-radius:50%;background:#21D4D9;color:#062126;display:grid;place-items:center;font-size:13px;font-weight:800">M</div>
|
||
<div style="flex:1;aspect-ratio:1;border-radius:50%;background:#21D4D9;color:#062126;display:grid;place-items:center;font-size:13px;font-weight:800">X</div>
|
||
<div style="flex:1;aspect-ratio:1;border-radius:50%;background:#21D4D9;color:#062126;display:grid;place-items:center;font-size:13px;font-weight:800">J</div>
|
||
<div style="flex:1;aspect-ratio:1;border-radius:50%;background:#21D4D9;color:#062126;display:grid;place-items:center;font-size:13px;font-weight:800">V</div>
|
||
<div style="flex:1;aspect-ratio:1;border-radius:50%;background:#102532;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;font-size:13px;font-weight:700;color:rgba(242,247,250,.6)">S</div>
|
||
<div style="flex:1;aspect-ratio:1;border-radius:50%;background:#102532;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;font-size:13px;font-weight:700;color:rgba(242,247,250,.6)">D</div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 14px"><div style="flex:none;width:40px;height:40px;border-radius:11px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div><div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:800">Radio Horizonte</div><div style="font-size:11.5px;color:rgba(242,247,250,.55)">Suena al despertar</div></div><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:66px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:12px 14px"><i data-i style="font-size:20px;color:rgba(242,247,250,.7)">volume_up</i><span style="flex:1;font-size:13.5px;font-weight:700">Volumen</span><div style="flex:none;width:112px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);position:relative"><span style="position:absolute;left:0;top:0;bottom:0;width:80%;border-radius:2px;background:#21D4D9"></span><span style="position:absolute;left:calc(80% - 7px);top:-5px;width:14px;height:14px;border-radius:50%;background:#21D4D9"></span></div><span style="font-size:12px;font-weight:800;color:rgba(242,247,250,.7);width:34px;text-align:right">80%</span></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:46px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:12px 14px"><i data-i style="font-size:20px;color:rgba(242,247,250,.7)">trending_up</i><span style="flex:1;font-size:13.5px;font-weight:700">Subida progresiva</span><span style="font-size:13px;color:rgba(242,247,250,.55)">30 s</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:46px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:10px 14px"><i data-i style="font-size:20px;color:rgba(242,247,250,.7)">beach_access</i><span style="flex:1;font-size:13.5px;font-weight:700">Sonar en vacaciones</span><div style="flex:none;width:48px;height:30px;border-radius:999px;background:rgba(255,255,255,.2);display:flex;align-items:center;padding:3px;box-sizing:border-box"><span style="width:24px;height:24px;border-radius:50%;background:#fff"></span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">9 · Alarma sonando (pantalla completa)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-60px;top:-40px;width:510px;height:510px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;filter:blur(26px);opacity:.5"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,26,.5),rgba(7,18,26,.88) 52%,#07121A)"></div>
|
||
<div style="position:absolute;left:50%;top:150px;width:420px;height:420px;margin-left:-210px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.2),transparent 62%);animation:pw-pulse 2.4s ease-in-out infinite"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>7:30</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;flex:1;display:flex;flex-direction:column;align-items:center;padding:0 24px 28px;box-sizing:border-box">
|
||
<div style="height:26px"></div>
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:rgba(244,184,96,.16);border:1px solid rgba(244,184,96,.45)"><i data-i="1" style="font-size:18px;color:#F4B860">alarm</i><span style="font-size:12px;font-weight:800;letter-spacing:.07em;color:#F4B860">CADA MAÑANA</span></div>
|
||
<div style="height:22px"></div>
|
||
<div style="font-size:88px;font-weight:800;letter-spacing:-4px;line-height:.95">7:30</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:14px;font-weight:600;color:rgba(242,247,250,.6)">Lunes, 3 de agosto</div>
|
||
<div style="height:30px"></div>
|
||
<div style="width:180px;height:180px;border-radius:36px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;box-shadow:0 22px 50px rgba(0,0,0,.55)"></div>
|
||
<div style="height:18px"></div>
|
||
<div style="font-size:20px;font-weight:800;letter-spacing:-.3px">Radio Horizonte</div>
|
||
<div style="height:4px"></div>
|
||
<div style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:12.5px;font-weight:700;color:#7EE4C2">Subiendo volumen · 18 s</span></div>
|
||
<div style="flex:1;min-height:20px"></div>
|
||
<div style="width:100%;display:flex;flex-direction:column;gap:12px">
|
||
<div style="display:flex;align-items:center;gap:8px;padding:0 2px"><i data-i="1" style="font-size:19px;color:#F4B860">snooze</i><span style="font-size:12px;font-weight:800;letter-spacing:.06em;color:rgba(244,184,96,.9)">POSPONER</span></div>
|
||
<div style="display:flex;gap:10px">
|
||
<div style="flex:1;height:76px;border-radius:22px;background:rgba(244,184,96,.16);border:1px solid rgba(244,184,96,.42);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px"><span style="font-size:26px;font-weight:800;letter-spacing:-1px;color:#F4B860">3</span><span style="font-size:11px;font-weight:700;color:rgba(244,184,96,.8)">min</span></div>
|
||
<div style="flex:1;height:76px;border-radius:22px;background:rgba(244,184,96,.16);border:1px solid rgba(244,184,96,.42);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px"><span style="font-size:26px;font-weight:800;letter-spacing:-1px;color:#F4B860">5</span><span style="font-size:11px;font-weight:700;color:rgba(244,184,96,.8)">min</span></div>
|
||
<div style="flex:1.5;height:76px;border-radius:22px;background:#F4B860;color:#2A1A05;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px"><span style="font-size:26px;font-weight:800;letter-spacing:-1px">10</span><span style="font-size:11px;font-weight:800;opacity:.75">min · habitual</span></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:9px;height:76px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:18px;font-weight:800"><i data-i="1" style="font-size:26px">stop_circle</i>Parar</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">9 bis · Alarmas › Vacaciones (gestor de rangos)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(126,228,194,.13),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:2px;height:56px;padding:0 12px 0 6px"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:26px">arrow_back</i></div><span style="flex:1;font-size:19px;font-weight:800;letter-spacing:-.3px">Vacaciones</span><div style="display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:11px;background:#21D4D9;color:#062126;font-size:12.5px;font-weight:800"><i data-i="1" style="font-size:17px">add</i>Añadir</div></div>
|
||
<div style="position:relative;padding:0 16px">
|
||
<div style="display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:16px;background:rgba(126,228,194,.09);border:1px solid rgba(126,228,194,.26)"><i data-i style="font-size:20px;color:#7EE4C2;margin-top:1px">info</i><div style="flex:1;font-size:12px;line-height:1.5;color:rgba(242,247,250,.72);text-wrap:pretty">Durante estos rangos no suenan las alarmas marcadas como <b>«pausar en vacaciones»</b>. Las marcadas como «sonar siempre» no se ven afectadas.</div></div>
|
||
<div style="height:18px"></div>
|
||
<div style="padding:0 4px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">EN CURSO</div>
|
||
<div style="border-radius:20px;background:rgba(33,212,217,.11);border:1px solid rgba(33,212,217,.36);padding:15px 16px">
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span style="width:8px;height:8px;border-radius:50%;background:#21D4D9;animation:pw-pulse 1.8s ease-in-out infinite"></span>
|
||
<span style="flex:1;font-size:11px;font-weight:800;letter-spacing:.07em;color:#21D4D9">ACTIVO AHORA · QUEDAN 3 DÍAS</span>
|
||
<i data-i style="font-size:20px;color:rgba(242,247,250,.45)">more_vert</i>
|
||
</div>
|
||
<div style="height:11px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div><div style="font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1">28 jul</div><div style="margin-top:2px;font-size:11px;font-weight:700;color:rgba(242,247,250,.5)">lunes</div></div>
|
||
<div style="flex:1;height:2px;border-radius:1px;background:linear-gradient(90deg,#21D4D9,rgba(33,212,217,.3))"></div>
|
||
<div style="text-align:right"><div style="font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1">31 jul</div><div style="margin-top:2px;font-size:11px;font-weight:700;color:rgba(242,247,250,.5)">jueves</div></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(242,247,250,.68)"><i data-i style="font-size:17px">alarm_off</i>Pausa 07:30 y 13:45 · <span style="color:#7EE4C2">08:15 sigue</span></div>
|
||
</div>
|
||
<div style="height:18px"></div>
|
||
<div style="padding:0 4px 8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">PROGRAMADOS</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px">
|
||
<div style="border-radius:20px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:15px 16px">
|
||
<div style="display:flex;align-items:center;gap:10px"><span style="flex:1;font-size:11px;font-weight:800;letter-spacing:.07em;color:rgba(242,247,250,.5)">EMPIEZA EN 1 DÍA · 15 DÍAS</span><i data-i style="font-size:20px;color:rgba(242,247,250,.45)">more_vert</i></div>
|
||
<div style="height:11px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div><div style="font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1">4 ago</div><div style="margin-top:2px;font-size:11px;font-weight:700;color:rgba(242,247,250,.5)">lunes</div></div>
|
||
<div style="flex:1;height:2px;border-radius:1px;background:rgba(255,255,255,.14)"></div>
|
||
<div style="text-align:right"><div style="font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1">18 ago</div><div style="margin-top:2px;font-size:11px;font-weight:700;color:rgba(242,247,250,.5)">lunes</div></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(242,247,250,.6)"><i data-i style="font-size:17px">label</i>Verano</div>
|
||
</div>
|
||
<div style="border-radius:20px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:15px 16px">
|
||
<div style="display:flex;align-items:center;gap:10px"><span style="flex:1;font-size:11px;font-weight:800;letter-spacing:.07em;color:rgba(242,247,250,.5)">EN 4 MESES · 3 DÍAS</span><i data-i style="font-size:20px;color:rgba(242,247,250,.45)">more_vert</i></div>
|
||
<div style="height:11px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div><div style="font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1">6 dic</div><div style="margin-top:2px;font-size:11px;font-weight:700;color:rgba(242,247,250,.5)">sábado</div></div>
|
||
<div style="flex:1;height:2px;border-radius:1px;background:rgba(255,255,255,.14)"></div>
|
||
<div style="text-align:right"><div style="font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1">8 dic</div><div style="margin-top:2px;font-size:11px;font-weight:700;color:rgba(242,247,250,.5)">lunes</div></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(242,247,250,.6)"><i data-i style="font-size:17px">label</i>Puente</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:18px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:16px;border:1px dashed rgba(255,255,255,.16);font-size:13.5px;font-weight:800;color:rgba(242,247,250,.6)"><i data-i style="font-size:20px">date_range</i>Añadir rango de vacaciones</div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i style="font-size:20px;color:rgba(242,247,250,.6)">history</i><span style="flex:1;font-size:13.5px;font-weight:700">Rangos pasados</span><span style="font-size:12.5px;color:rgba(242,247,250,.5)">5</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="dv-opt" id="4c">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#4c">4c</a><span>Móvil · ajustes, detalles y estados</span></div>
|
||
<div style="display:flex;gap:20px;align-items:flex-start">
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">10 · Ajustes (raíz) · 12 paneles → 4 grupos</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;height:726px;overflow:hidden">
|
||
<div style="display:flex;align-items:center;height:56px;padding:0 20px"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Ajustes</span><span style="display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(33,212,217,.14);border:1px solid rgba(33,212,217,.36);font-size:11px;font-weight:800;color:#21D4D9">PRO · 11 meses</span></div>
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">AUDIO</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i="1" style="font-size:21px;color:#21D4D9">equalizer</i><div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Ecualizador base</div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.55)">6 emisoras con ajuste propio</div></div><span style="font-size:13px;color:rgba(242,247,250,.55)">Voz clara</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i="1" style="font-size:21px;color:#7EE4C2">hd</i><span style="flex:1;font-size:14px;font-weight:700">Calidad de streaming</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Alta</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">bluetooth_audio</i><span style="flex:1;font-size:14px;font-weight:700">Preset por dispositivo</span><span style="font-size:13px;color:rgba(242,247,250,.55)">3 guardados</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">all_inclusive</i><span style="flex:1;font-size:14px;font-weight:700">Reproducción sin interrupciones</span><div style="flex:none;width:48px;height:30px;border-radius:999px;background:#21D4D9;display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:flex-end"><span style="width:24px;height:24px;border-radius:50%;background:#fff"></span></div></div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">EMISORAS</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i="1" style="font-size:21px;color:#F4B860">folder</i><span style="flex:1;font-size:14px;font-weight:700">Grupos de favoritos</span><span style="font-size:13px;color:rgba(242,247,250,.55)">3</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">sort</i><span style="flex:1;font-size:14px;font-weight:700">Orden de las listas</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Alfabético</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">star</i><span style="flex:1;font-size:14px;font-weight:700">Emisora preferida</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Radio Horizonte</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">radio</i><span style="flex:1;font-size:14px;font-weight:700">Emisoras personalizadas</span><span style="font-size:13px;color:rgba(242,247,250,.55)">2</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">GRABACIONES Y MÚSICA</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">folder_open</i><span style="flex:1;font-size:14px;font-weight:700">Grabaciones</span><span style="font-size:13px;color:rgba(242,247,250,.55)">7 · 84 MB</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">library_music</i><span style="flex:1;font-size:14px;font-weight:700">Música local (Auto)</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Music/</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">APLICACIÓN</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">language</i><span style="flex:1;font-size:14px;font-weight:700">Idioma</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Español</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">cloud_done</i><span style="flex:1;font-size:14px;font-weight:700">Copia de seguridad</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Hoy, 08:12</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:10px;right:10px;bottom:10px;height:74px;z-index:3">
|
||
<div style="position:absolute;bottom:-8px;left:0;width:110px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.32),transparent 66%);transform:translateX(269px)"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -1.5px 0 rgba(255,255,255,.17)) drop-shadow(0 14px 26px rgba(0,0,0,.5))"><div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:#0A1B24;transform:translateX(269px)"></div><div style="position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:999px;background:#0A1B24"></div></div>
|
||
<div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transform:translateX(269px)"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;display:flex">
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">graphic_eq</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">travel_explore</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">alarm</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><div style="display:flex;flex-direction:column;align-items:center;transform:translateY(-15px)"><i data-i="1" style="font-size:25px;color:#21D4D9">settings</i><span style="font-size:11px;font-weight:800;line-height:1.25;padding-top:3px;color:#21D4D9">Ajustes</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">11 · Ajustes › Ecualizador (empujada)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.16),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:2px;height:56px;padding:0 10px 0 6px"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:26px">arrow_back</i></div><span style="flex:1;font-size:19px;font-weight:800;letter-spacing:-.3px">Ecualizador base</span><div style="flex:none;width:48px;height:30px;border-radius:999px;background:#21D4D9;display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:flex-end;margin-right:8px"><span style="width:24px;height:24px;border-radius:50%;background:#fff"></span></div></div>
|
||
<div style="position:relative;padding:0 16px">
|
||
<div style="display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:16px;background:rgba(126,228,194,.09);border:1px solid rgba(126,228,194,.26)"><i data-i style="font-size:20px;color:#7EE4C2;margin-top:1px">info</i><div style="flex:1;font-size:12px;line-height:1.5;color:rgba(242,247,250,.72);text-wrap:pretty">Este es el ecualizador <b>general</b>: se aplica a todas las emisoras que no tengan ajuste propio. El de una emisora concreta se define desde su reproducción y manda sobre este.</div></div>
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;gap:8px;overflow:hidden">
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800">Voz clara</div>
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">Plano</div>
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">Graves +</div>
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">Rock</div>
|
||
</div>
|
||
<div style="height:18px"></div>
|
||
<div style="border-radius:22px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:20px 16px">
|
||
<div style="display:flex;align-items:stretch;justify-content:space-between;gap:8px;height:280px">
|
||
<sc-for list="{{ eqBands }}" as="b" hint-placeholder-count="7">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:10px">
|
||
<span style="font-size:10.5px;font-weight:800;color:rgba(33,212,217,.9)">{{ b.db }}</span>
|
||
<div style="position:relative;width:6px;flex:1;border-radius:3px;background:rgba(255,255,255,.1)"><span style="position:absolute;left:-7px;top:{{ b.top }};width:20px;height:20px;border-radius:50%;background:#21D4D9;box-shadow:0 0 14px rgba(33,212,217,.6)"></span></div>
|
||
<span style="font-size:10.5px;font-weight:700;color:rgba(242,247,250,.5)">{{ b.hz }}</span>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">bluetooth_audio</i><span style="flex:1;font-size:14px;font-weight:700">Salida activa</span><span style="font-size:13px;color:#7EE4C2">Coche · Bluetooth</span></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">save</i><span style="flex:1;font-size:14px;font-weight:700">Guardar como preset</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">restart_alt</i><span style="flex:1;font-size:14px;font-weight:700">Restablecer a plano</span></div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i="1" style="font-size:21px;color:#21D4D9">tune</i><div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Emisoras con ajuste propio</div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.55)">Ignoran este ecualizador base</div></div><span style="font-size:13px;color:rgba(242,247,250,.55)">6</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">12 · Ajustes › Grabaciones (empujada)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:2px;height:56px;padding:0 10px 0 6px"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:26px">arrow_back</i></div><span style="flex:1;font-size:19px;font-weight:800;letter-spacing:-.3px">Grabaciones</span><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:22px">folder_open</i></div></div>
|
||
<div style="position:relative;padding:0 16px">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:1"><div style="font-size:13px;font-weight:800">84 MB de 200 MB</div><div style="height:8px"></div><div style="height:6px;border-radius:3px;background:rgba(255,255,255,.12);position:relative"><span style="position:absolute;left:0;top:0;bottom:0;width:42%;border-radius:3px;background:#21D4D9"></span></div><div style="height:7px"></div><div style="font-size:11.5px;color:rgba(242,247,250,.55)">Music/PluriWave · se borran las más antiguas al llegar al límite</div></div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;flex-direction:column;gap:2px">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:10px 6px"><div style="flex:none;width:44px;height:44px;border-radius:12px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div><div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700">Radio Horizonte</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">Hoy 08:04 · 14:32 · 18,2 MB</div></div><div style="width:42px;height:42px;display:grid;place-items:center"><i data-i="1" style="font-size:24px;color:#21D4D9">play_circle</i></div><div style="width:38px;height:42px;display:grid;place-items:center"><i data-i style="font-size:20px;color:rgba(242,247,250,.45)">more_vert</i></div></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:10px 6px"><div style="flex:none;width:44px;height:44px;border-radius:12px;background:#0A1B24 url(assets/art_pulse.jpg) center/cover"></div><div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700">Los 40 Classic</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">Ayer 19:15 · 05:00 · 6,4 MB</div></div><div style="width:42px;height:42px;display:grid;place-items:center"><i data-i="1" style="font-size:24px;color:#21D4D9">play_circle</i></div><div style="width:38px;height:42px;display:grid;place-items:center"><i data-i style="font-size:20px;color:rgba(242,247,250,.45)">more_vert</i></div></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:10px 6px"><div style="flex:none;width:44px;height:44px;border-radius:12px;background:#0A1B24 url(assets/art_nova.jpg) center/cover"></div><div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700">Onda Clásica</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">1 ago · 30:00 · 41,0 MB</div></div><div style="width:42px;height:42px;display:grid;place-items:center"><i data-i="1" style="font-size:24px;color:#21D4D9">play_circle</i></div><div style="width:38px;height:42px;display:grid;place-items:center"><i data-i style="font-size:20px;color:rgba(242,247,250,.45)">more_vert</i></div></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:10px 6px"><div style="flex:none;width:44px;height:44px;border-radius:12px;background:#0A1B24 url(assets/art_cosmic.jpg) center/cover"></div><div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700">Ibiza Global</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.55)">28 jul · 01:00 · 2,3 MB</div></div><div style="width:42px;height:42px;display:grid;place-items:center"><i data-i="1" style="font-size:24px;color:#21D4D9">play_circle</i></div><div style="width:38px;height:42px;display:grid;place-items:center"><i data-i style="font-size:20px;color:rgba(242,247,250,.45)">more_vert</i></div></div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">drive_folder_upload</i><span style="flex:1;font-size:14px;font-weight:700">Cambiar carpeta</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">save</i><span style="flex:1;font-size:14px;font-weight:700">Tamaño máximo</span><span style="font-size:13px;color:rgba(242,247,250,.55)">200 MB</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">13 · Estados: sin conexión, cargando, reconectando</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_off</i><i data-i="1" style="font-size:15px">wifi_off</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;height:726px;overflow:hidden">
|
||
<div style="display:flex;align-items:center;height:56px;padding:0 20px"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Explorar</span></div>
|
||
<div style="margin:0 16px;display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:16px;background:rgba(207,102,121,.14);border:1px solid rgba(207,102,121,.4)"><i data-i="1" style="font-size:22px;color:#E8879A">wifi_off</i><div style="flex:1;min-width:0"><div style="font-size:13.5px;font-weight:800">Sin conexión</div><div style="margin-top:1px;font-size:11.5px;color:rgba(242,247,250,.65)">Mostrando tus favoritas guardadas</div></div><div style="padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.1);font-size:12px;font-weight:800">Reintentar</div></div>
|
||
<div style="height:16px"></div>
|
||
<div style="margin:0 16px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.09)">
|
||
<div style="position:relative;width:52px;height:52px;flex:none;display:grid;place-items:center"><span style="position:absolute;inset:0;border-radius:50%;border:3px solid rgba(33,212,217,.22);border-top-color:#21D4D9;animation:pw-ring .9s linear infinite"></span><i data-i="1" style="font-size:22px;color:#21D4D9">radio</i></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:800">Radio Horizonte</div><div style="margin-top:3px;font-size:12px;font-weight:700;color:#F4B860">Reconectando · intento 2 de 5</div></div>
|
||
<div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:24px;color:rgba(242,247,250,.6)">stop_circle</i></div>
|
||
</div>
|
||
<div style="height:20px"></div>
|
||
<div style="padding:0 20px;font-size:11px;font-weight:800;letter-spacing:.06em;color:rgba(242,247,250,.42)">BUSCANDO EMISORAS…</div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column;gap:4px">
|
||
<sc-for list="{{ skel6 }}" as="k" hint-placeholder-count="6">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:8px">
|
||
<div style="flex:none;width:48px;height:48px;border-radius:12px;background:#16303c;animation:pw-pulse 1.4s ease-in-out infinite;animation-delay:{{ k }}"></div>
|
||
<div style="flex:1;min-width:0"><div style="height:13px;width:62%;border-radius:5px;background:#16303c;animation:pw-pulse 1.4s ease-in-out infinite;animation-delay:{{ k }}"></div><div style="height:8px"></div><div style="height:11px;width:40%;border-radius:5px;background:#16303c;animation:pw-pulse 1.4s ease-in-out infinite;animation-delay:{{ k }}"></div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="margin:0 16px;padding:26px 20px;border-radius:22px;background:#102532;border:1px solid rgba(255,255,255,.07);text-align:center">
|
||
<i data-i style="font-size:40px;color:rgba(33,212,217,.6)">search_off</i>
|
||
<div style="height:12px"></div>
|
||
<div style="font-size:16px;font-weight:800">Sin resultados para «jazzz»</div>
|
||
<div style="height:5px"></div>
|
||
<div style="font-size:12.5px;color:rgba(242,247,250,.6);line-height:1.5;text-wrap:pretty">Prueba con menos filtros o revisa la ortografía.</div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:12px;background:rgba(33,212,217,.18);border:1px solid rgba(33,212,217,.4);font-size:12.5px;font-weight:800;color:#21D4D9"><i data-i style="font-size:17px">filter_alt_off</i>Quitar los 2 filtros</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:10px;right:10px;bottom:10px;height:74px;z-index:3">
|
||
<div style="position:absolute;bottom:-8px;left:0;width:110px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.32),transparent 66%);transform:translateX(84px)"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -1.5px 0 rgba(255,255,255,.17)) drop-shadow(0 14px 26px rgba(0,0,0,.5))"><div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:#0A1B24;transform:translateX(84px)"></div><div style="position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:999px;background:#0A1B24"></div></div>
|
||
<div style="position:absolute;bottom:0;left:0;width:110px;height:74px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transform:translateX(84px)"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;display:flex">
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">graphic_eq</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><div style="display:flex;flex-direction:column;align-items:center;transform:translateY(-15px)"><i data-i="1" style="font-size:25px;color:#21D4D9">travel_explore</i><span style="font-size:11px;font-weight:800;line-height:1.25;padding-top:3px;color:#21D4D9">Explorar</span></div></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">alarm</i></div>
|
||
<div style="flex:1;display:flex;align-items:center;justify-content:center"><i data-i style="font-size:23px;color:rgba(242,247,250,.46)">settings</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">14 · Bienvenida y PRO (14 días)</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-60px;top:-80px;width:520px;height:520px;background:#0A1B24 url(assets/banner.jpg) center/cover;filter:blur(20px);opacity:.4"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,26,.45),rgba(7,18,26,.9) 46%,#07121A)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;flex:1;display:flex;flex-direction:column;padding:0 24px 28px;box-sizing:border-box">
|
||
<div style="flex:1;min-height:20px"></div>
|
||
<img src="assets/mark.png" alt="" style="width:76px;height:76px;border-radius:20px">
|
||
<div style="height:22px"></div>
|
||
<div style="font-size:34px;font-weight:800;letter-spacing:-1.2px;line-height:1.05;text-wrap:pretty">Tu mundo,<br>en directo</div>
|
||
<div style="height:12px"></div>
|
||
<div style="font-size:14.5px;line-height:1.5;color:rgba(242,247,250,.72);text-wrap:pretty">53.412 emisoras de 238 países. Guarda tus favoritas, ponlas en el coche y despiértate con ellas.</div>
|
||
<div style="height:26px"></div>
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<div style="display:flex;align-items:center;gap:13px"><div style="flex:none;width:38px;height:38px;border-radius:11px;background:rgba(33,212,217,.16);display:grid;place-items:center"><i data-i="1" style="font-size:20px;color:#21D4D9">equalizer</i></div><div><div style="font-size:13.5px;font-weight:800">Ecualizador por emisora</div><div style="font-size:11.5px;color:rgba(242,247,250,.58)">Y un preset por dispositivo de salida</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:13px"><div style="flex:none;width:38px;height:38px;border-radius:11px;background:rgba(126,228,194,.16);display:grid;place-items:center"><i data-i="1" style="font-size:20px;color:#7EE4C2">directions_car</i></div><div><div style="font-size:13.5px;font-weight:800">Android Auto</div><div style="font-size:11.5px;color:rgba(242,247,250,.58)">Tus favoritas y tu música local en el coche</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:13px"><div style="flex:none;width:38px;height:38px;border-radius:11px;background:rgba(244,184,96,.16);display:grid;place-items:center"><i data-i="1" style="font-size:20px;color:#F4B860">alarm</i></div><div><div style="font-size:13.5px;font-weight:800">Alarmas musicales</div><div style="font-size:11.5px;color:rgba(242,247,250,.58)">Con subida progresiva y modo vacaciones</div></div></div>
|
||
</div>
|
||
<div style="flex:1;min-height:24px"></div>
|
||
<div style="padding:14px 16px;border-radius:18px;background:rgba(33,212,217,.1);border:1px solid rgba(33,212,217,.32)"><div style="display:flex;align-items:baseline;gap:8px"><span style="font-size:15px;font-weight:800;color:#21D4D9">14 días PRO gratis</span><span style="flex:1"></span><span style="font-size:12.5px;font-weight:700;color:rgba(242,247,250,.6)">luego 2,99 €/año</span></div><div style="height:5px"></div><div style="font-size:11.5px;color:rgba(242,247,250,.6)">Sin anuncios, ecualizador y reconocimiento ilimitado. Se puede cancelar cuando quieras.</div></div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:center;height:58px;border-radius:18px;background:#21D4D9;color:#062126;font-size:16px;font-weight:800">Empezar a escuchar</div>
|
||
<div style="height:8px"></div>
|
||
<div style="text-align:center;font-size:12.5px;font-weight:700;color:rgba(242,247,250,.5);padding:10px">Seguir con la versión gratuita</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="dv-opt" id="4d">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#4d">4d</a><span>Android Auto · 1360×720 · el árbol real de <code style="font:600 11px ui-monospace,monospace">ConstructorArbolAuto</code>: Favoritos · Todas las emisoras · Mis emisoras · Música Local. Filas de 96 px, texto desde 22 px, dos niveles como máximo y ninguna carpeta de ecualizador (el preset por dispositivo se aplica solo al conectar el coche).</span></div>
|
||
<div style="display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;max-width:2760px">
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">A1 · Raíz</div>
|
||
<div style="position:relative;width:1360px;height:720px;border-radius:18px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex;flex-direction:column">
|
||
<div style="position:absolute;right:-200px;top:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.1),transparent 70%)"></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:18px;height:96px;padding:0 32px;flex:none;border-bottom:1px solid rgba(255,255,255,.07)">
|
||
<img src="assets/mark.png" alt="" style="width:52px;height:52px;border-radius:14px">
|
||
<span style="flex:1;font-size:30px;font-weight:800;letter-spacing:-.6px">PluriWave</span>
|
||
<div style="width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i style="font-size:30px">search</i></div>
|
||
</div>
|
||
<div style="position:relative;flex:1;padding:24px 32px;display:flex;flex-direction:column;gap:14px">
|
||
<div style="display:flex;align-items:center;gap:22px;height:96px;padding:0 26px 0 18px;border-radius:20px;background:rgba(33,212,217,.13);border:1px solid rgba(33,212,217,.4);box-sizing:border-box"><div style="width:64px;height:64px;border-radius:18px;background:rgba(33,212,217,.2);display:grid;place-items:center;flex:none"><i data-i="1" style="font-size:34px;color:#21D4D9">favorite</i></div><div style="flex:1"><div style="font-size:26px;font-weight:700;color:#21D4D9">Favoritos</div><div style="margin-top:3px;font-size:17px;color:rgba(242,247,250,.6)">8 emisoras · 4 grupos</div></div><i data-i style="font-size:32px;color:rgba(242,247,250,.45)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:22px;height:96px;padding:0 26px 0 18px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);box-sizing:border-box"><div style="width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.06);display:grid;place-items:center;flex:none"><i data-i="1" style="font-size:34px;color:#7EE4C2">public</i></div><div style="flex:1"><div style="font-size:26px;font-weight:700">Todas las emisoras</div><div style="margin-top:3px;font-size:17px;color:rgba(242,247,250,.6)">Las 50 más escuchadas cerca de ti</div></div><i data-i style="font-size:32px;color:rgba(242,247,250,.45)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:22px;height:96px;padding:0 26px 0 18px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);box-sizing:border-box"><div style="width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.06);display:grid;place-items:center;flex:none"><i data-i="1" style="font-size:34px;color:#F4B860">radio</i></div><div style="flex:1"><div style="font-size:26px;font-weight:700">Mis emisoras</div><div style="margin-top:3px;font-size:17px;color:rgba(242,247,250,.6)">2 emisoras personalizadas</div></div><i data-i style="font-size:32px;color:rgba(242,247,250,.45)">chevron_right</i></div>
|
||
<div style="display:flex;align-items:center;gap:22px;height:96px;padding:0 26px 0 18px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);box-sizing:border-box"><div style="width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.06);display:grid;place-items:center;flex:none"><i data-i="1" style="font-size:34px;color:#60A5FA">library_music</i></div><div style="flex:1"><div style="font-size:26px;font-weight:700">Música Local</div><div style="margin-top:3px;font-size:17px;color:rgba(242,247,250,.6)">Music/ · 12 carpetas</div></div><i data-i style="font-size:32px;color:rgba(242,247,250,.45)">chevron_right</i></div>
|
||
</div>
|
||
<div style="position:relative;flex:none;display:flex;align-items:center;gap:20px;height:104px;padding:0 26px 0 32px;background:rgba(16,37,50,.96);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:none;width:68px;height:68px;border-radius:16px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:24px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:8px;margin-top:4px"><span style="width:8px;height:8px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:17px;font-weight:700;color:#7EE4C2">En directo · 128 kbps</span></div></div>
|
||
<div style="width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:#F4B860">favorite</i></div>
|
||
<div style="width:76px;height:76px;border-radius:22px;background:#21D4D9;display:grid;place-items:center"><i data-i="1" style="font-size:40px;color:#062126">pause</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">A2 · Favoritos › grupos</div>
|
||
<div style="position:relative;width:1360px;height:720px;border-radius:18px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex">
|
||
<div style="position:relative;flex:none;width:104px;display:flex;flex-direction:column;align-items:center;padding:22px 0;gap:14px;background:rgba(13,27,36,.7);border-right:1px solid rgba(255,255,255,.07)">
|
||
<img src="assets/mark.png" alt="" style="width:52px;height:52px;border-radius:14px">
|
||
<div style="height:6px"></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;background:rgba(33,212,217,.18);border:1px solid rgba(33,212,217,.42);display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:#21D4D9">favorite</i></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;display:grid;place-items:center"><i data-i style="font-size:34px;color:rgba(242,247,250,.55)">public</i></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;display:grid;place-items:center"><i data-i style="font-size:34px;color:rgba(242,247,250,.55)">radio</i></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;display:grid;place-items:center"><i data-i style="font-size:34px;color:rgba(242,247,250,.55)">library_music</i></div>
|
||
</div>
|
||
<div style="position:relative;flex:1;min-width:0;display:flex;flex-direction:column;padding:26px 28px">
|
||
<div style="display:flex;align-items:center;gap:16px"><div style="width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i style="font-size:30px">arrow_back</i></div><span style="font-size:30px;font-weight:800;letter-spacing:-.6px">Favoritos</span></div>
|
||
<div style="height:20px"></div>
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<sc-for list="{{ autoFolders }}" as="f" hint-placeholder-count="4">
|
||
<div style="display:flex;align-items:center;gap:20px;height:96px;padding:0 22px 0 16px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);box-sizing:border-box">
|
||
<div style="width:60px;height:60px;border-radius:16px;background:rgba(244,184,96,.14);display:grid;place-items:center;flex:none"><i data-i="1" style="font-size:30px;color:#F4B860">{{ f.ico }}</i></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:24px;font-weight:700">{{ f.n }}</div><div style="margin-top:3px;font-size:17px;color:rgba(242,247,250,.6)">{{ f.c }}</div></div>
|
||
<i data-i style="font-size:32px;color:rgba(242,247,250,.45)">chevron_right</i>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:relative;flex:none;width:452px;display:flex;flex-direction:column;padding:26px 28px;background:rgba(13,27,36,.72);border-left:1px solid rgba(255,255,255,.07);box-sizing:border-box">
|
||
<div style="width:100%;height:238px;border-radius:22px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;flex:none;box-shadow:0 20px 46px rgba(0,0,0,.5)"></div>
|
||
<div style="height:22px"></div>
|
||
<div style="display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(126,228,194,.15);border:1px solid rgba(126,228,194,.42)"><span style="width:8px;height:8px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:14px;font-weight:800;letter-spacing:.06em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:14px"></div>
|
||
<div style="font-size:32px;font-weight:800;letter-spacing:-.6px;line-height:1.15">Radio Horizonte</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:19px;font-weight:600;color:rgba(242,247,250,.62)">Noticias · España · 128 kbps</div>
|
||
<div style="flex:1;min-height:20px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<div style="width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:38px;color:#F4B860">favorite</i></div>
|
||
<div style="width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:40px;color:rgba(242,247,250,.88)">skip_previous</i></div>
|
||
<div style="width:104px;height:104px;border-radius:32px;background:#21D4D9;display:grid;place-items:center;box-shadow:0 12px 32px rgba(33,212,217,.4)"><i data-i="1" style="font-size:54px;color:#062126">pause</i></div>
|
||
<div style="width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:40px;color:rgba(242,247,250,.88)">skip_next</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">A3 · Todas las emisoras · rejilla (CONTENT_STYLE_PLAYABLE_HINT = 2)</div>
|
||
<div style="position:relative;width:1360px;height:720px;border-radius:18px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex;flex-direction:column">
|
||
<div style="position:relative;display:flex;align-items:center;gap:16px;height:96px;padding:0 32px;flex:none;border-bottom:1px solid rgba(255,255,255,.07)">
|
||
<div style="width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i style="font-size:30px">arrow_back</i></div>
|
||
<span style="flex:1;font-size:30px;font-weight:800;letter-spacing:-.6px">Todas las emisoras</span>
|
||
<span style="font-size:19px;font-weight:700;color:rgba(242,247,250,.55)">50 máx. · España</span>
|
||
</div>
|
||
<div style="position:relative;flex:1;padding:26px 32px;overflow:hidden">
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px">
|
||
<sc-for list="{{ autoGrid8 }}" as="s" hint-placeholder-count="8">
|
||
<div>
|
||
<div style="position:relative;height:172px;border-radius:20px;overflow:hidden;background:#0A1B24"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,18,26,.6))"></div><div style="position:absolute;left:12px;top:12px;width:12px;height:12px;border-radius:50%;background:#7EE4C2;box-shadow:0 0 0 3px rgba(7,18,26,.55)"></div></div>
|
||
<div style="margin-top:12px;font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div>
|
||
<div style="margin-top:3px;font-size:16px;color:rgba(242,247,250,.55)">{{ s.kbps }} kbps</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:relative;flex:none;display:flex;align-items:center;gap:20px;height:104px;padding:0 26px 0 32px;background:rgba(16,37,50,.96);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:none;width:68px;height:68px;border-radius:16px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:24px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:8px;margin-top:4px"><span style="width:8px;height:8px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:17px;font-weight:700;color:#7EE4C2">En directo · 128 kbps</span></div></div>
|
||
<div style="width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:#F4B860">favorite</i></div>
|
||
<div style="width:76px;height:76px;border-radius:22px;background:#21D4D9;display:grid;place-items:center"><i data-i="1" style="font-size:40px;color:#062126">pause</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">A4 · Ahora suena (plantilla de reproducción)</div>
|
||
<div style="position:relative;width:1360px;height:720px;border-radius:18px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex;align-items:center;gap:56px;padding:0 64px;box-sizing:border-box">
|
||
<div style="position:absolute;left:-80px;top:-80px;width:880px;height:880px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;filter:blur(60px);opacity:.4"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,18,26,.86),rgba(7,18,26,.6))"></div>
|
||
<div style="position:relative;flex:none;width:400px;height:400px;border-radius:32px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;box-shadow:0 34px 80px rgba(0,0,0,.6)"></div>
|
||
<div style="position:relative;flex:1;min-width:0">
|
||
<div style="display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;background:rgba(126,228,194,.15);border:1px solid rgba(126,228,194,.42)"><span style="width:10px;height:10px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:16px;font-weight:800;letter-spacing:.06em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:20px"></div>
|
||
<div style="font-size:52px;font-weight:800;letter-spacing:-1.4px;line-height:1.08">Radio Horizonte</div>
|
||
<div style="height:10px"></div>
|
||
<div style="font-size:24px;font-weight:600;color:rgba(242,247,250,.66)">Noticias · España · MP3 128 kbps</div>
|
||
<div style="height:26px"></div>
|
||
<div style="display:flex;align-items:flex-end;gap:4px;height:56px;max-width:620px">
|
||
<sc-for list="{{ bars30 }}" as="b" hint-placeholder-count="30"><span style="flex:1;height:56px;border-radius:3px;background:linear-gradient(180deg,#7EE4C2,rgba(126,228,194,.25));transform-origin:bottom;animation:pw-bar 1.2s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
<div style="height:34px"></div>
|
||
<div style="display:flex;align-items:center;gap:20px">
|
||
<div style="width:96px;height:96px;border-radius:28px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:42px;color:#F4B860">favorite</i></div>
|
||
<div style="width:96px;height:96px;border-radius:28px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:44px;color:rgba(242,247,250,.88)">skip_previous</i></div>
|
||
<div style="width:120px;height:120px;border-radius:36px;background:#21D4D9;display:grid;place-items:center;box-shadow:0 14px 36px rgba(33,212,217,.42)"><i data-i="1" style="font-size:62px;color:#062126">pause</i></div>
|
||
<div style="width:96px;height:96px;border-radius:28px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:44px;color:rgba(242,247,250,.88)">skip_next</i></div>
|
||
<div style="width:96px;height:96px;border-radius:28px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:42px;color:rgba(242,247,250,.88)">queue_music</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">A5 · Música Local › carpeta · acciones de reproducción y paginación</div>
|
||
<div style="position:relative;width:1360px;height:720px;border-radius:18px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.4),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;font-family:'Plus Jakarta Sans',system-ui,sans-serif;display:flex;flex-direction:column">
|
||
<div style="position:relative;display:flex;align-items:center;gap:16px;height:96px;padding:0 32px;flex:none;border-bottom:1px solid rgba(255,255,255,.07)">
|
||
<div style="width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i style="font-size:30px">arrow_back</i></div>
|
||
<span style="flex:1;font-size:30px;font-weight:800;letter-spacing:-.6px">Música Local › Podcasts</span>
|
||
<span style="font-size:19px;font-weight:700;color:rgba(242,247,250,.55)">1–50 de 214</span>
|
||
</div>
|
||
<div style="position:relative;flex:1;padding:24px 32px;overflow:hidden">
|
||
<div style="display:flex;gap:16px">
|
||
<div style="flex:1;display:flex;align-items:center;gap:18px;height:88px;padding:0 22px;border-radius:20px;background:rgba(33,212,217,.13);border:1px solid rgba(33,212,217,.4);box-sizing:border-box"><i data-i="1" style="font-size:34px;color:#21D4D9">play_arrow</i><div><div style="font-size:22px;font-weight:800;color:#21D4D9">Reproducir carpeta</div><div style="margin-top:2px;font-size:16px;color:rgba(242,247,250,.6)">214 pistas en orden</div></div></div>
|
||
<div style="flex:1;display:flex;align-items:center;gap:18px;height:88px;padding:0 22px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);box-sizing:border-box"><i data-i="1" style="font-size:34px;color:#7EE4C2">shuffle</i><div><div style="font-size:22px;font-weight:800">Reproducir aleatorio</div><div style="margin-top:2px;font-size:16px;color:rgba(242,247,250,.6)">Mezcla toda la carpeta</div></div></div>
|
||
<div style="flex:none;width:88px;height:88px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);display:grid;place-items:center"><i data-i style="font-size:32px;color:rgba(242,247,250,.7)">sort_by_alpha</i></div>
|
||
</div>
|
||
<div style="height:18px"></div>
|
||
<div style="display:flex;flex-direction:column;gap:8px">
|
||
<div style="display:flex;align-items:center;gap:20px;height:80px;padding:0 22px 0 18px;border-radius:18px;background:rgba(255,255,255,.035);box-sizing:border-box"><span style="width:44px;font-size:20px;font-weight:800;color:rgba(242,247,250,.4);text-align:center">01</span><div style="flex:1;min-width:0"><div style="font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Amanecer en el puerto · capítulo 12</div><div style="margin-top:2px;font-size:16px;color:rgba(242,247,250,.55)">42:18 · 192 kbps · 48 kHz</div></div><i data-i="1" style="font-size:32px;color:rgba(242,247,250,.5)">play_arrow</i></div>
|
||
<div style="display:flex;align-items:center;gap:20px;height:80px;padding:0 22px 0 18px;border-radius:18px;background:rgba(255,255,255,.035);box-sizing:border-box"><span style="width:44px;font-size:20px;font-weight:800;color:rgba(242,247,250,.4);text-align:center">02</span><div style="flex:1;min-width:0"><div style="font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Ondas cortas · especial verano</div><div style="margin-top:2px;font-size:16px;color:rgba(242,247,250,.55)">28:04 · 160 kbps · 44,1 kHz</div></div><i data-i="1" style="font-size:32px;color:rgba(242,247,250,.5)">play_arrow</i></div>
|
||
<div style="display:flex;align-items:center;gap:20px;height:80px;padding:0 22px 0 18px;border-radius:18px;background:rgba(255,255,255,.035);box-sizing:border-box"><span style="width:44px;font-size:20px;font-weight:800;color:rgba(242,247,250,.4);text-align:center">03</span><div style="flex:1;min-width:0"><div style="font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Voces del norte · entrevista</div><div style="margin-top:2px;font-size:16px;color:rgba(242,247,250,.55)">55:41 · 128 kbps · 44,1 kHz</div></div><i data-i="1" style="font-size:32px;color:rgba(242,247,250,.5)">play_arrow</i></div>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:12px;height:80px;border-radius:18px;border:1px dashed rgba(255,255,255,.16);font-size:21px;font-weight:800;color:rgba(242,247,250,.6);box-sizing:border-box"><i data-i style="font-size:30px">expand_more</i>Cargar 50 más</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:relative;flex:none;display:flex;align-items:center;gap:20px;height:104px;padding:0 26px 0 32px;background:rgba(16,37,50,.96);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:none;width:68px;height:68px;border-radius:16px;background:rgba(96,165,250,.16);display:grid;place-items:center"><i data-i="1" style="font-size:32px;color:#60A5FA">audio_file</i></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:24px;font-weight:700">Amanecer en el puerto · capítulo 12</div><div style="margin-top:6px;display:flex;align-items:center;gap:14px"><div style="flex:1;max-width:420px;height:6px;border-radius:3px;background:rgba(255,255,255,.14);position:relative"><span style="position:absolute;left:0;top:0;bottom:0;width:34%;border-radius:3px;background:#60A5FA"></span></div><span style="font-size:16px;font-weight:700;color:rgba(242,247,250,.6)">14:22 / 42:18</span></div></div>
|
||
<div style="width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:rgba(242,247,250,.85)">skip_previous</i></div>
|
||
<div style="width:76px;height:76px;border-radius:22px;background:#21D4D9;display:grid;place-items:center"><i data-i="1" style="font-size:40px;color:#062126">pause</i></div>
|
||
<div style="width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:rgba(242,247,250,.85)">skip_next</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="dv-next">Set completo: 15 pantallas de móvil (<a class="dv-oid" href="#4a">4a</a> · <a class="dv-oid" href="#4b">4b</a> · <a class="dv-oid" href="#4c">4c</a>) y 5 de Android Auto (<a class="dv-oid" href="#4d">4d</a>). Siguientes pasos: "haz navegable también 4b" · "añade Géneros y Tendencias" · "diseña el widget y la notificación" · "prepara el handoff para desarrollo".</p>
|
||
|
||
</section>
|
||
|
||
<section class="dv-turn" id="t3">
|
||
<div class="dv-thd"><a class="dv-tid" href="#t3">3</a><span class="dv-tname">Comprado: <a class="dv-oid" href="#1c">1c</a> + barra globo de <a class="dv-oid" href="#2a">2a</a> · prototipo navegable</span></div>
|
||
|
||
<div style="max-width:1040px;margin:0 0 28px;background:#fff;border:1px solid rgba(20,38,47,.1);border-radius:12px;padding:24px 30px">
|
||
<div style="font:500 13.5px/1.65 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.78);text-wrap:pretty"><b>Navega de verdad:</b> pincha las cuatro pestañas y la burbuja se desplaza cambiando de pantalla; el chip «Ecualizador, grabar, calidad» abre la bandeja de herramientas y el fondo la cierra. Con cuatro pestañas la celda pasa de 74 a 92 px, así que la burbuja respira más y las etiquetas caben sin recortarse. <b>Ajustes</b> era el pendiente: sus 12 paneles apilados (<code style="font:600 12px ui-monospace,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">_AjustesContent</code>) pasan a cuatro grupos de filas con el valor actual a la derecha, que es lo que se viene a comprobar.</div>
|
||
</div>
|
||
|
||
<div class="dv-opts">
|
||
<div class="dv-opt" id="3a">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#3a">3a</a><span>Escuchar · Explorar · Alarmas · Ajustes, con la barra globo de 4 celdas y la bandeja de herramientas.</span></div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.13),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none;z-index:3"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:64px">
|
||
|
||
<div style="display:{{ dEscuchar }}">
|
||
<div style="position:absolute;left:0;top:-44px;width:390px;height:390px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;opacity:.5"></div>
|
||
<div style="position:absolute;left:0;top:-44px;right:0;height:420px;background:linear-gradient(180deg,rgba(7,18,26,.4),rgba(7,18,26,.86) 58%,#07121A)"></div>
|
||
<div style="position:relative">
|
||
<div style="display:flex;align-items:center;height:52px;padding:0 10px 0 20px"><span style="flex:1;font-size:15px;font-weight:800;letter-spacing:.02em;color:rgba(242,247,250,.55)">ESCUCHANDO AHORA</span><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">cast</i></div><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">more_horiz</i></div></div>
|
||
<div style="padding:0 20px">
|
||
<div style="display:flex;align-items:flex-end;gap:14px">
|
||
<div style="width:132px;height:132px;border-radius:24px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover;flex:none;box-shadow:0 18px 44px rgba(0,0,0,.55)"></div>
|
||
<div style="flex:1;min-width:0;padding-bottom:2px">
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(126,228,194,.15);border:1px solid rgba(126,228,194,.4)"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:10px;font-weight:800;letter-spacing:.07em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:9px"></div>
|
||
<div style="font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.12;text-wrap:pretty">Radio Horizonte</div>
|
||
<div style="height:4px"></div>
|
||
<div style="font-size:12.5px;font-weight:600;color:rgba(242,247,250,.62)">Noticias · España · 128 kbps</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;align-items:flex-end;gap:2px;height:26px">
|
||
<sc-for list="{{ bars30 }}" as="b" hint-placeholder-count="30"><span style="flex:1;height:26px;border-radius:2px;background:linear-gradient(180deg,#7EE4C2,rgba(126,228,194,.3));transform-origin:bottom;animation:pw-bar 1.2s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:25px;color:#F4B860">favorite</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:29px;color:rgba(242,247,250,.85)">skip_previous</i></div>
|
||
<div style="width:72px;height:72px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 10px 28px rgba(33,212,217,.42)"><i data-i="1" style="font-size:38px;color:#062126">pause</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:29px;color:rgba(242,247,250,.85)">skip_next</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i style="font-size:25px;color:rgba(242,247,250,.85)">bedtime</i></div>
|
||
</div>
|
||
<div style="height:8px"></div>
|
||
<div style="display:flex;justify-content:center"><div onClick="{{ openTray }}" style="display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:700;color:rgba(242,247,250,.78);cursor:pointer"><i data-i style="font-size:17px">expand_less</i>Ecualizador, grabar, calidad</div></div>
|
||
</div>
|
||
<div style="height:22px"></div>
|
||
<div style="margin:0 20px;display:flex;align-items:center;gap:10px"><span style="font-size:15px;font-weight:800;letter-spacing:-.2px">Tus emisoras</span><span style="padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;font-weight:800;color:rgba(242,247,250,.6)">8</span><span style="flex:1"></span><i data-i style="font-size:20px;color:rgba(242,247,250,.5)">swap_vert</i></div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<sc-for list="{{ favs8 }}" as="s" hint-placeholder-count="8">
|
||
<div style="display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)">
|
||
<div style="flex:none;width:44px;height:44px;border-radius:11px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11px;color:rgba(242,247,250,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.g }}</div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:{{ dExplorar }}">
|
||
<div style="margin:8px 16px 0;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.12);box-sizing:border-box"><i data-i style="font-size:22px;color:rgba(242,247,250,.5)">search</i><span style="flex:1;font-size:15px;color:rgba(242,247,250,.5)">Emisora, país, género…</span><i data-i style="font-size:21px;color:rgba(242,247,250,.5)">mic</i></div>
|
||
<div style="height:18px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Cerca de ti · España</div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:flex;gap:12px;padding:0 20px;overflow:hidden">
|
||
<sc-for list="{{ near3 }}" as="s" hint-placeholder-count="3">
|
||
<div style="flex:none;width:150px;border-radius:18px;overflow:hidden;background:#102532;border:1px solid rgba(255,255,255,.07)">
|
||
<div style="position:relative;height:86px"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,18,26,.7))"></div><div style="position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:#21D4D9;display:grid;place-items:center"><i data-i="1" style="font-size:19px;color:#062126">play_arrow</i></div></div>
|
||
<div style="padding:9px 11px 11px"><div style="font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11px;color:rgba(242,247,250,.55)">{{ s.g }} · {{ s.kbps }} kbps</div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<div style="height:20px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Explorar por</div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#21D4D9">public</i><div><div style="font-size:13.5px;font-weight:800">Países</div><div style="font-size:11px;color:rgba(242,247,250,.55)">238</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#7EE4C2">library_music</i><div><div style="font-size:13.5px;font-weight:800">Géneros</div><div style="font-size:11px;color:rgba(242,247,250,.55)">64</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#F4B860">trending_up</i><div><div style="font-size:13.5px;font-weight:800">Tendencias</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Hoy</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#60A5FA">fiber_new</i><div><div style="font-size:13.5px;font-weight:800">Novedades</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Esta semana</div></div></div>
|
||
</div>
|
||
<div style="height:20px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Populares ahora</div>
|
||
<div style="height:8px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<sc-for list="{{ results4 }}" as="s" hint-placeholder-count="4">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px">
|
||
<div style="flex:none;width:46px;height:46px;border-radius:12px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.55)">{{ s.g }} · {{ s.p }}</div></div>
|
||
<div style="flex:none;width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:21px;color:rgba(242,247,250,.5)">favorite</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:{{ dAlarmas }}">
|
||
<div style="display:flex;align-items:center;gap:8px;height:56px;padding:0 12px 0 20px"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Alarmas</span><div style="display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800"><i data-i="1" style="font-size:18px">add</i>Nueva</div></div>
|
||
<div style="margin:0 16px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:rgba(244,184,96,.13);border:1px solid rgba(244,184,96,.34)">
|
||
<i data-i="1" style="font-size:26px;color:#F4B860">alarm_on</i>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:800">Suena en 9 h 12 min</div><div style="margin-top:2px;font-size:12.5px;color:rgba(242,247,250,.7)">Cada mañana · mañana a las 07:30</div></div>
|
||
<div style="padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);font-size:12px;font-weight:800">Saltar</div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="margin:0 16px;display:flex;flex-direction:column;gap:10px">
|
||
<sc-for list="{{ alarms }}" as="a" hint-placeholder-count="4">
|
||
<div style="border-radius:20px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:14px 16px">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:baseline;gap:8px"><span style="font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1;color:{{ a.color }}">{{ a.hora }}</span><span style="font-size:12px;font-weight:700;color:rgba(242,247,250,.5)">{{ a.dias }}</span></div>
|
||
<div style="height:7px"></div>
|
||
<div style="display:flex;align-items:center;gap:7px"><div style="flex:none;width:22px;height:22px;border-radius:6px;background:#0A1B24 url({{ a.art }}) center/cover"></div><span style="font-size:12.5px;font-weight:600;color:rgba(242,247,250,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ a.nombre }}</span></div>
|
||
</div>
|
||
<div style="flex:none;width:52px;height:32px;border-radius:999px;background:{{ a.sw }};display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:{{ a.swPos }}"><span style="width:26px;height:26px;border-radius:50%;background:#fff"></span></div>
|
||
</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:{{ dAjustes }}">
|
||
<div style="display:flex;align-items:center;height:56px;padding:0 20px"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Ajustes</span><span style="display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(33,212,217,.14);border:1px solid rgba(33,212,217,.36);font-size:11px;font-weight:800;color:#21D4D9">PRO · 11 meses</span></div>
|
||
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">AUDIO</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i="1" style="font-size:21px;color:#21D4D9">equalizer</i><div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Ecualizador base</div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.55)">6 emisoras con ajuste propio</div></div><span style="font-size:13px;color:rgba(242,247,250,.55)">Voz clara</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i="1" style="font-size:21px;color:#7EE4C2">hd</i><span style="flex:1;font-size:14px;font-weight:700">Calidad de streaming</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Alta</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">all_inclusive</i><span style="flex:1;font-size:14px;font-weight:700">Reproducción sin interrupciones</span><div style="flex:none;width:48px;height:30px;border-radius:999px;background:#21D4D9;display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:flex-end"><span style="width:24px;height:24px;border-radius:50%;background:#fff"></span></div></div>
|
||
</div>
|
||
|
||
<div style="height:16px"></div>
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">EMISORAS</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i="1" style="font-size:21px;color:#F4B860">folder</i><span style="flex:1;font-size:14px;font-weight:700">Grupos de favoritos</span><span style="font-size:13px;color:rgba(242,247,250,.55)">3</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">sort</i><span style="flex:1;font-size:14px;font-weight:700">Orden de las listas</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Alfabético</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">radio</i><span style="flex:1;font-size:14px;font-weight:700">Emisoras personalizadas</span><span style="font-size:13px;color:rgba(242,247,250,.55)">2</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
|
||
<div style="height:16px"></div>
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">GRABACIONES</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">folder_open</i><span style="flex:1;font-size:14px;font-weight:700">Carpeta</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Music/PluriWave</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">save</i><span style="flex:1;font-size:14px;font-weight:700">Tamaño máximo</span><span style="font-size:13px;color:rgba(242,247,250,.55)">200 MB</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
|
||
<div style="height:16px"></div>
|
||
<div style="padding:0 20px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(242,247,250,.42)">APLICACIÓN</div>
|
||
<div style="margin:0 16px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.07);overflow:hidden">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">language</i><span style="flex:1;font-size:14px;font-weight:700">Idioma</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Español</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
<div style="height:1px;background:rgba(255,255,255,.06);margin-left:47px"></div>
|
||
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px"><i data-i style="font-size:21px;color:rgba(242,247,250,.7)">cloud_done</i><span style="flex:1;font-size:14px;font-weight:700">Copia de seguridad</span><span style="font-size:13px;color:rgba(242,247,250,.55)">Hoy, 08:12</span><i data-i style="font-size:19px;color:rgba(242,247,250,.4)">chevron_right</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div onClick="{{ closeTray }}" style="position:absolute;inset:0;background:rgba(4,11,16,.62);opacity:{{ scrimO }};pointer-events:{{ scrimPE }};transition:opacity .32s ease;z-index:4;cursor:pointer"></div>
|
||
|
||
<div style="position:absolute;left:0;right:0;bottom:0;z-index:5;transform:{{ trayY }};transition:transform .46s cubic-bezier(.3,1.06,.4,1)">
|
||
<div style="border-radius:30px 30px 0 0;background:#0D1B24;border-top:1px solid rgba(255,255,255,.11);padding:14px 20px 26px;box-shadow:0 -20px 50px rgba(0,0,0,.5)">
|
||
<div onClick="{{ closeTray }}" style="display:flex;justify-content:center;padding:2px 0 4px;cursor:pointer"><span style="width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)"></span></div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:17px;font-weight:800;letter-spacing:-.3px">Herramientas</span><span style="font-size:12px;font-weight:800;color:#21D4D9">PRO activo</span></div>
|
||
<div style="height:16px"></div>
|
||
<div style="border-radius:20px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:16px">
|
||
<div style="display:flex;align-items:center;gap:11px"><div style="flex:none;width:38px;height:38px;border-radius:11px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div><div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:7px"><span style="font-size:14px;font-weight:800">Ecualizador de esta emisora</span><span style="padding:2px 7px;border-radius:999px;background:rgba(33,212,217,.2);border:1px solid rgba(33,212,217,.42);font-size:9.5px;font-weight:800;letter-spacing:.05em;color:#21D4D9">PROPIO</span></div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.6)">Solo para Radio Horizonte · el base vive en Ajustes</div></div><div style="flex:none;width:48px;height:30px;border-radius:999px;background:#21D4D9;display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:flex-end"><span style="width:24px;height:24px;border-radius:50%;background:#fff"></span></div></div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:stretch;justify-content:space-between;gap:6px;height:70px">
|
||
<sc-for list="{{ eqBands }}" as="b" hint-placeholder-count="7">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:7px">
|
||
<div style="position:relative;width:4px;flex:1;border-radius:2px;background:rgba(255,255,255,.12)"><span style="position:absolute;left:-5px;top:{{ b.top }};width:14px;height:14px;border-radius:50%;background:#21D4D9;box-shadow:0 0 10px rgba(33,212,217,.6)"></span></div>
|
||
<span style="font-size:9.5px;font-weight:700;color:rgba(242,247,250,.5)">{{ b.hz }}</span>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;gap:8px"><div style="flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:11.5px;font-weight:800;color:rgba(242,247,250,.72)"><i data-i style="font-size:16px">undo</i>Volver al base</div><div style="flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:11.5px;font-weight:800;color:rgba(242,247,250,.72)"><i data-i style="font-size:16px">tune</i>Presets</div></div>
|
||
</div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08)"><i data-i="1" style="font-size:22px;color:#F4B860">mic</i><div style="min-width:0"><div style="font-size:13px;font-weight:800">Grabar</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Stream original</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:rgba(33,212,217,.14);border:1px solid rgba(33,212,217,.36)"><i data-i="1" style="font-size:22px;color:#21D4D9">bedtime</i><div style="min-width:0"><div style="font-size:13px;font-weight:800;color:#21D4D9">28:44</div><div style="font-size:11px;color:rgba(33,212,217,.75)">Apagado</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08)"><i data-i="1" style="font-size:22px;color:#7EE4C2">hd</i><div style="min-width:0"><div style="font-size:13px;font-weight:800">128 kbps</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Calidad</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08)"><i data-i="1" style="font-size:22px;color:#60A5FA">alarm_add</i><div style="min-width:0"><div style="font-size:13px;font-weight:800">Alarma</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Con esta emisora</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:10px;right:10px;bottom:10px;height:74px;z-index:3">
|
||
<div style="position:absolute;bottom:-8px;left:0;width:{{ navCW }};height:92px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.32),transparent 66%);transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navCX }};pointer-events:none"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -1.5px 0 rgba(255,255,255,.17)) drop-shadow(0 14px 26px rgba(0,0,0,.5));pointer-events:none">
|
||
<div style="position:absolute;bottom:0;left:0;width:{{ navCW }};height:74px;border-radius:999px;background:#0A1B24;transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navCX }}"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:999px;background:#0A1B24"></div>
|
||
</div>
|
||
<div style="position:absolute;bottom:0;left:0;width:{{ navCW }};height:74px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navCX }};pointer-events:none"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;display:flex">
|
||
<sc-for list="{{ navCItems }}" as="it" hint-placeholder-count="4">
|
||
<div onClick="{{ it.on }}" style="flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer">
|
||
<div style="display:flex;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.32,1.32,.44,1);transform:{{ it.lift }}">
|
||
<i data-i="{{ it.fill }}" style="font-size:{{ it.size }};color:{{ it.color }};transition:color .3s ease,font-size .3s ease">{{ it.icon }}</i>
|
||
<span style="display:block;overflow:hidden;max-height:{{ it.lblH }};opacity:{{ it.lblO }};transition:max-height .45s cubic-bezier(.3,1,.4,1),opacity .28s ease;font-size:{{ it.lblSize }};font-weight:800;line-height:1.25;padding-top:3px;color:#21D4D9;white-space:nowrap">{{ it.label }}</span>
|
||
</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="dv-next">Pincha las pestañas y el chip de herramientas. Siguientes pasos posibles: "añade la pantalla de país/género de Explorar" · "haz la versión de Android Auto con esta jerarquía" · "monta el editor de alarma".</p>
|
||
</section>
|
||
|
||
<section class="dv-turn" id="t2">
|
||
<div class="dv-thd"><a class="dv-tid" href="#t2">2</a><span class="dv-tname">Barra de pestañas «globo» · sobre <a class="dv-oid" href="#1a">1a</a></span></div>
|
||
|
||
<div style="max-width:1040px;margin:0 0 28px;background:#fff;border:1px solid rgba(20,38,47,.1);border-radius:12px;padding:24px 30px">
|
||
<div style="font:500 13.5px/1.65 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.78);text-wrap:pretty"><b>Interactivo: pincha las pestañas</b> para ver moverse la burbuja. La barra plana y la burbuja comparten un mismo color, así que la silueta se lee como un único globo alargado que se infla justo donde está el foco; el contorno sale de una sombra proyectada sobre la unión de las dos formas, no de un borde, para que no aparezca costura. Al cambiar de pestaña la burbuja se desliza con una curva ligeramente elástica: la etiqueta anterior se cierra en vertical y la nueva se abre. <b>Altura de la barra: 74 px → 52 px</b> (el abultamiento se sale por encima y flota sobre el contenido, así que no ocupa maquetación).</div>
|
||
</div>
|
||
|
||
<div class="dv-opts">
|
||
|
||
<div class="dv-opt" id="2a">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#2a">2a</a><span>Globo vertical — la burbuja crece hacia arriba y saca la etiqueta. Iconos legibles a 24 px en vez de las ilustraciones de 512 px.</span></div>
|
||
<div style="display:flex;gap:28px;align-items:flex-start">
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(160deg,#07121A 0%,#0D1B24 42%,#0E3B40 78%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column;font-family:'Plus Jakarta Sans',system-ui,sans-serif">
|
||
<div style="position:absolute;right:-140px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.14),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 10px 0 20px;flex:none"><span style="font-size:23px;font-weight:800;letter-spacing:-.5px">Inicio</span><div style="display:flex"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">search</i></div><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">bedtime</i></div></div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:64px">
|
||
<div style="margin:4px 16px 0;position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);box-shadow:0 18px 34px -16px rgba(33,212,217,.35)">
|
||
<img src="assets/art_aurora.jpg" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4">
|
||
<div style="position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,18,26,.92) 34%,rgba(7,18,26,.3))"></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:14px;padding:14px">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:88px;height:88px;border-radius:20px;object-fit:cover;flex:none">
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:6px"><span style="width:7px;height:7px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:10px;font-weight:800;letter-spacing:.09em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:5px"></div>
|
||
<div style="font-size:20px;font-weight:800;letter-spacing:-.3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Radio Horizonte</div>
|
||
<div style="height:3px"></div>
|
||
<div style="font-size:12px;color:rgba(242,247,250,.68)">Noticias · España · 128 kbps</div>
|
||
<div style="height:9px"></div>
|
||
<div style="display:flex;align-items:flex-end;gap:2px;height:14px">
|
||
<sc-for list="{{ bars18 }}" as="b" hint-placeholder-count="18"><span style="flex:1;height:14px;border-radius:1px;background:#F4B860;transform-origin:bottom;animation:pw-bar 1.1s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="flex:none;width:56px;height:56px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 6px 20px rgba(33,212,217,.4)"><i data-i="1" style="font-size:30px;color:#062126">pause</i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="height:16px"></div>
|
||
<div style="margin:0 20px;display:flex;align-items:baseline;justify-content:space-between"><span style="font-size:15px;font-weight:800;letter-spacing:-.2px">Tus favoritas</span><span style="font-size:12px;font-weight:700;color:#21D4D9">Ver todas</span></div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:flex;gap:12px;padding:0 20px;overflow:hidden">
|
||
<sc-for list="{{ favs5 }}" as="s" hint-placeholder-count="4">
|
||
<div style="flex:none;width:88px">
|
||
<div style="position:relative;width:88px;height:88px;border-radius:20px;overflow:hidden"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,18,26,.6))"></div><div style="position:absolute;right:5px;bottom:5px;width:28px;height:28px;border-radius:50%;background:rgba(7,18,26,.82);display:grid;place-items:center"><i data-i="1" style="font-size:17px;color:#21D4D9">play_arrow</i></div></div>
|
||
<div style="margin-top:7px;font-size:12px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ s.n }}</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;gap:8px;padding:0 20px;overflow:hidden">
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800">Todos</div>
|
||
<sc-for list="{{ generos6 }}" as="g" hint-placeholder-count="5"><div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">{{ g }}</div></sc-for>
|
||
</div>
|
||
|
||
<div style="height:18px"></div>
|
||
<div style="margin:0 20px;display:flex;align-items:baseline;justify-content:space-between"><span style="font-size:15px;font-weight:800;letter-spacing:-.2px">Populares en España</span><span style="font-size:12px;font-weight:700;color:rgba(242,247,250,.5)">53.412</span></div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px">
|
||
<sc-for list="{{ grid9 }}" as="s" hint-placeholder-count="6">
|
||
<div>
|
||
<div style="position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;left:6px;top:6px;width:8px;height:8px;border-radius:50%;background:#7EE4C2;box-shadow:0 0 0 2px rgba(7,18,26,.55)"></div></div>
|
||
<div style="margin-top:7px;font-size:12px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ s.n }}</div>
|
||
<div style="margin-top:2px;font-size:10.5px;font-weight:600;color:rgba(242,247,250,.55)">{{ s.kbps }} kbps</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:10px;right:10px;bottom:10px;height:74px">
|
||
<div style="position:absolute;bottom:-8px;left:0;width:{{ navAW }};height:92px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.32),transparent 66%);transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navAX }};pointer-events:none"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -1.5px 0 rgba(255,255,255,.17)) drop-shadow(0 14px 26px rgba(0,0,0,.5));pointer-events:none">
|
||
<div style="position:absolute;bottom:0;left:0;width:{{ navAW }};height:74px;border-radius:999px;background:#0A1B24;transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navAX }}"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:999px;background:#0A1B24"></div>
|
||
</div>
|
||
<div style="position:absolute;bottom:0;left:0;width:{{ navAW }};height:74px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navAX }};pointer-events:none"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:52px;display:flex">
|
||
<sc-for list="{{ navAItems }}" as="it" hint-placeholder-count="5">
|
||
<div onClick="{{ it.on }}" style="flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer">
|
||
<div style="display:flex;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.32,1.32,.44,1);transform:{{ it.lift }}">
|
||
<i data-i="{{ it.fill }}" style="font-size:{{ it.size }};color:{{ it.color }};transition:color .3s ease,font-size .3s ease">{{ it.icon }}</i>
|
||
<span style="display:block;overflow:hidden;max-height:{{ it.lblH }};opacity:{{ it.lblO }};transition:max-height .45s cubic-bezier(.3,1,.4,1),opacity .28s ease;font-size:11px;font-weight:800;line-height:1.25;padding-top:3px;color:#21D4D9;white-space:nowrap">{{ it.label }}</span>
|
||
</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;flex-direction:column;gap:14px;padding-top:640px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Detalle a 2× · misma barra, mismo estado</div>
|
||
<div style="position:relative;width:780px;height:190px;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,#0B2027,#07121A)">
|
||
<div style="position:absolute;left:20px;right:20px;bottom:22px;height:148px">
|
||
<div style="position:absolute;bottom:-16px;left:0;width:{{ navBW }};height:184px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.3),transparent 66%);transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navBX }};pointer-events:none"></div>
|
||
<div style="position:absolute;inset:0;filter:drop-shadow(0 -3px 0 rgba(255,255,255,.17)) drop-shadow(0 20px 40px rgba(0,0,0,.5));pointer-events:none">
|
||
<div style="position:absolute;bottom:0;left:0;width:{{ navBW }};height:148px;border-radius:999px;background:#0A1B24;transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navBX }}"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:104px;border-radius:999px;background:#0A1B24"></div>
|
||
</div>
|
||
<div style="position:absolute;bottom:0;left:0;width:{{ navBW }};height:148px;border-radius:999px;background:linear-gradient(180deg,rgba(33,212,217,.2),transparent 62%);transition:transform .52s cubic-bezier(.32,1.32,.44,1);transform:{{ navBX }};pointer-events:none"></div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:104px;display:flex">
|
||
<sc-for list="{{ navBItems }}" as="it" hint-placeholder-count="5">
|
||
<div onClick="{{ it.on }}" style="flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer">
|
||
<div style="display:flex;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.32,1.32,.44,1);transform:{{ it.lift }}">
|
||
<i data-i="{{ it.fill }}" style="font-size:{{ it.size }};color:{{ it.color }};transition:color .3s ease,font-size .3s ease">{{ it.icon }}</i>
|
||
<span style="display:block;overflow:hidden;max-height:{{ it.lblH }};opacity:{{ it.lblO }};transition:max-height .45s cubic-bezier(.3,1,.4,1),opacity .28s ease;font-size:{{ it.lblSize }};font-weight:800;line-height:1.25;padding-top:6px;color:#21D4D9;white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif">{{ it.label }}</span>
|
||
</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="max-width:780px;font:500 12.5px/1.6 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.6);text-wrap:pretty">La burbuja mide 1,19 veces el ancho de una celda, así que se ensancha un poco más allá de su pestaña: es lo que hace que la deformación parezca elástica y no un simple rectángulo que se mueve. En Flutter esto es un <code style="font:600 12px ui-monospace,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">AnimatedPositioned</code> para la burbuja + <code style="font:600 12px ui-monospace,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">AnimatedSlide</code> y <code style="font:600 12px ui-monospace,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">AnimatedSize</code> por pestaña, con <code style="font:600 12px ui-monospace,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">Curves.easeOutBack</code>.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<p class="dv-next">Pruébala pinchando las pestañas. Luego puedes pedirme: "aplica la barra globo a <a class="dv-oid" href="#1b">1b</a> y <a class="dv-oid" href="#1c">1c</a>" · "hazla aún más baja" · "que la burbuja rebote un poco más".</p>
|
||
</section>
|
||
|
||
<section class="dv-turn" id="t1">
|
||
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Diagnóstico y primera ronda</span></div>
|
||
|
||
<div style="max-width:1040px;margin:0 0 40px;display:grid;gap:24px">
|
||
<div style="background:#fff;border:1px solid rgba(20,38,47,.1);border-radius:12px;padding:28px 32px">
|
||
<div style="font:800 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#0f6d70;text-transform:uppercase">Supuestos de partida</div>
|
||
<div style="height:14px"></div>
|
||
<div style="font:500 14px/1.65 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.8);max-width:780px;text-wrap:pretty">Leo el código de <code style="font:600 13px ui-monospace,Menlo,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">pluriwave/lib</code>, no de memoria: paleta y radios salen de <code style="font:600 13px ui-monospace,Menlo,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">pluriwave_tokens.dart</code>, la tipografía es Plus Jakarta Sans, y el arte de emisora son los cuatro PNG reales de <code style="font:600 13px ui-monospace,Menlo,monospace;background:rgba(20,38,47,.06);padding:2px 5px;border-radius:4px">assets/images</code>. Mantengo teal <b>#21D4D9</b>, coral <b>#F4B860</b>, menta <b>#7EE4C2</b> y el fondo aurora. Prioridad de uso que asumo, según tu respuesta: <b>volver a lo que ya escuchas</b> > descubrir > alarmas. Y todo lo que decida tiene que sobrevivir a Android Auto: objetivos grandes, favoritos primero, jerarquía de dos niveles.</div>
|
||
</div>
|
||
|
||
<div style="background:#14262f;border-radius:12px;padding:28px 32px;color:#e8f1f4">
|
||
<div style="font:800 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#21D4D9;text-transform:uppercase">Qué mide mal hoy · medido en el código, no a ojo</div>
|
||
<div style="height:20px"></div>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px">
|
||
<div><div style="font:800 13px/1.3 'Plus Jakarta Sans',sans-serif;color:#7EE4C2">1 · La cabecera cuesta 171 px, cinco veces</div><div style="height:5px"></div><div style="font:500 13px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(232,241,244,.7);text-wrap:pretty"><code style="font:600 12px ui-monospace,monospace">PluriScreenHeader</code> repite orbe de 56 px, banner, marca de agua, dos orbes decorativos y dos pastillas de estado en Inicio, Buscar, Favoritos y Alarmas. Ninguno de esos píxeles es accionable.</div></div>
|
||
<div><div style="font:800 13px/1.3 'Plus Jakarta Sans',sans-serif;color:#7EE4C2">2 · En Inicio se ven 0 emisoras completas</div><div style="height:5px"></div><div style="font:500 13px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(232,241,244,.7);text-wrap:pretty">Cabecera + Cerca de ti + Radar + Géneros = 583 px. Con <code style="font:600 12px ui-monospace,monospace">bottomChromeInset: 146</code> y <code style="font:600 12px ui-monospace,monospace">childAspectRatio: 0.78</code>, del grid solo asoma una franja.</div></div>
|
||
<div><div style="font:800 13px/1.3 'Plus Jakarta Sans',sans-serif;color:#7EE4C2">3 · Favoritos es el 80% del uso y la 3.ª pestaña</div><div style="height:5px"></div><div style="font:500 13px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(232,241,244,.7);text-wrap:pretty">Cada fila mide ~100 px: anillo <code style="font:600 12px ui-monospace,monospace">SweepGradient</code> de 58 px, dos <code style="font:600 12px ui-monospace,monospace">IconButton</code> apilados y un contador. Entran 5 favoritas por pantalla.</div></div>
|
||
<div><div style="font:800 13px/1.3 'Plus Jakarta Sans',sans-serif;color:#7EE4C2">4 · Buscar pide 330 px antes del primer resultado</div><div style="height:5px"></div><div style="font:500 13px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(232,241,244,.7);text-wrap:pretty">Tres paneles de filtros (país, idioma, calidad) siempre desplegados, cada uno en su propia tarjeta de cristal, encima de los resultados.</div></div>
|
||
<div><div style="font:800 13px/1.3 'Plus Jakarta Sans',sans-serif;color:#7EE4C2">5 · El reproductor: 62% de adorno, 3 controles</div><div style="height:5px"></div><div style="font:500 13px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(232,241,244,.7);text-wrap:pretty">El círculo ocupa <code style="font:600 12px ui-monospace,monospace">width*0.62+40</code>. Ecualizador y favorito viven escondidos en la <code style="font:600 12px ui-monospace,monospace">AppBar</code>; el temporizador es un <code style="font:600 12px ui-monospace,monospace">TextButton</code> al fondo; grabar ocupa una fila entera.</div></div>
|
||
<div><div style="font:800 13px/1.3 'Plus Jakarta Sans',sans-serif;color:#7EE4C2">6 · Iconos de 512 px dibujados a 34 px</div><div style="height:5px"></div><div style="font:500 13px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(232,241,244,.7);text-wrap:pretty">Las pestañas usan ilustraciones detalladas (<code style="font:600 12px ui-monospace,monospace">pluri_home.png</code> y compañía). A tamaño de pestaña son manchas azules indistinguibles, y solo la activa lleva etiqueta.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#fff;border:1px solid rgba(20,38,47,.1);border-radius:12px;padding:28px 32px">
|
||
<div style="font:800 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#0f6d70;text-transform:uppercase">Sistema que propongo</div>
|
||
<div style="height:16px"></div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:26px">
|
||
<div><div style="font:800 12px/1.3 'Plus Jakarta Sans',sans-serif;color:#14262f">Cristal con presupuesto</div><div style="height:5px"></div><div style="font:500 12.5px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.62);text-wrap:pretty">Un solo elemento translúcido por pantalla, y siempre el cromo (nav + mini-reproductor). Las listas pasan a superficie opaca <b>#102532</b>: mismo color, cero coste de lectura.</div></div>
|
||
<div><div style="font:800 12px/1.3 'Plus Jakarta Sans',sans-serif;color:#14262f">La imagen manda, el adorno no</div><div style="height:5px"></div><div style="font:500 12.5px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.62);text-wrap:pretty">El arte se queda grande donde se mira (reproductor, tarjeta de la emisora activa) y se convierte en miniatura nítida de 56–64 px en listas. Lo que quito son orbes, marcas de agua y anillos de degradado.</div></div>
|
||
<div><div style="font:800 12px/1.3 'Plus Jakarta Sans',sans-serif;color:#14262f">Cabecera de una línea</div><div style="height:5px"></div><div style="font:500 12.5px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.62);text-wrap:pretty">171 px → 56 px. Título + la única acción real de la pantalla. El nombre de la app no se repite en cada pestaña.</div></div>
|
||
<div><div style="font:800 12px/1.3 'Plus Jakarta Sans',sans-serif;color:#14262f">Movimiento con función</div><div style="height:5px"></div><div style="font:500 12.5px/1.55 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.62);text-wrap:pretty">La animación se reserva para estado: la onda solo late si suena, el anillo de conexión gira solo al conectar. Nada se mueve por decorar.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dv-opts">
|
||
|
||
<div class="dv-opt" id="1a" style="display:{{ d1a }}">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#1a">1a</a>Actual · recreación fiel del código para comparar. Los recortes son reales: el contenido se corta donde se corta hoy.</div>
|
||
<div style="display:flex;gap:20px">
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Inicio</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#07121A 0%,#0D1B24 34%,#0E4A4F 68%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-120px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.18),transparent 70%)"></div>
|
||
<div style="position:absolute;right:-150px;top:160px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(126,228,194,.12),transparent 70%)"></div>
|
||
<div style="position:absolute;left:-90px;bottom:80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.1),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.055"></div>
|
||
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 16px;flex:none"><span style="font-size:22px;font-weight:600">PluriWave</span><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">bedtime</i></div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden">
|
||
<div style="margin:8px 16px;position:relative;border-radius:38px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);box-shadow:0 18px 30px -14px rgba(33,212,217,.12)">
|
||
<div style="position:absolute;inset:0;background:url(assets/banner.jpg) center/cover;opacity:.24"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.18))"></div>
|
||
<img src="assets/mark.png" alt="" style="position:absolute;right:10px;top:10px;width:120px;height:120px;opacity:.18">
|
||
<div style="position:absolute;right:-36px;top:-42px;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.38),transparent 70%)"></div>
|
||
<div style="position:absolute;right:44px;bottom:-54px;width:116px;height:116px;border-radius:50%;background:radial-gradient(circle,rgba(32,230,255,.22),transparent 70%)"></div>
|
||
<div style="position:relative;display:flex;gap:14px;padding:24px 20px">
|
||
<div style="flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(32,230,255,.95),#21D4D9,#F4B860);box-shadow:0 0 28px 2px rgba(33,212,217,.4);display:grid;place-items:center;overflow:hidden"><img src="assets/i_home.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:24px;font-weight:900;letter-spacing:-.7px;line-height:1.05">PluriWave</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:14px;line-height:1.28;color:rgba(242,247,250,.78)">Tu mundo en directo, emisora a emisora.</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:20px;background:rgba(33,212,217,.22);font-size:13px;font-weight:700"><i data-i="1" style="font-size:18px">auto_awesome</i>Explorar emisoras</div>
|
||
</div>
|
||
<div style="flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px">
|
||
<div style="display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(126,228,194,.13);border:1px solid rgba(126,228,194,.38);font-size:12px;font-weight:800;white-space:nowrap"><i data-i="1" style="font-size:16px;color:#7EE4C2">public</i>53.412</div>
|
||
<div style="display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(33,212,217,.13);border:1px solid rgba(33,212,217,.38);font-size:12px;font-weight:800;white-space:nowrap"><i data-i="1" style="font-size:16px;color:#21D4D9">hd</i>Calidad HD</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin:8px 16px 0;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:12px">
|
||
<div style="display:flex;align-items:center;gap:8px"><div style="flex:1;font-size:16px;font-weight:900">Cerca de ti · España</div><div style="display:inline-flex;align-items:center;gap:8px;padding:8px 10px;font-size:14px;font-weight:700;color:#21D4D9"><i data-i style="font-size:18px">my_location</i>Detectar</div></div>
|
||
</div>
|
||
|
||
<div style="margin:8px 16px 0;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:12px">
|
||
<div style="font-size:16px;font-weight:500">Radar en directo</div>
|
||
<div style="height:8px"></div>
|
||
<div style="display:flex;gap:8px;height:56px;align-items:center;overflow:hidden">
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap"><i data-i="1" style="font-size:18px">graphic_eq</i>Cadena SER</div>
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap"><i data-i="1" style="font-size:18px">graphic_eq</i>Los 40</div>
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap"><i data-i="1" style="font-size:18px">graphic_eq</i>Rock FM</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin:16px 16px 8px;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:12px">
|
||
<div style="font-size:16px;font-weight:500">Géneros</div>
|
||
<div style="height:8px"></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px 8px">
|
||
<sc-for list="{{ generos }}" as="g" hint-placeholder-count="12"><div style="padding:7px 13px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700">{{ g }}</div></sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||
<sc-for list="{{ grid4 }}" as="s" hint-placeholder-count="2">
|
||
<div style="position:relative;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122)">
|
||
<div style="position:relative;aspect-ratio:1"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.34))"></div>
|
||
<div style="position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(126,228,194,.48);font-size:11px;font-weight:900"><span style="width:10px;height:10px;border-radius:50%;background:#7EE4C2"></span>EN DIRECTO</div>
|
||
<div style="position:absolute;top:8px;right:8px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.122);display:grid;place-items:center"><i data-i style="font-size:18px;color:rgba(255,255,255,.82)">favorite</i></div>
|
||
</div>
|
||
<div style="padding:8px 16px 16px"><div style="font-size:14px;font-weight:700;line-height:1.25">{{ s.n }}</div><div style="margin-top:4px;font-size:12px;color:rgba(242,247,250,.72)">{{ s.p }}</div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:0;right:0;bottom:0">
|
||
<div style="margin:8px 16px;display:flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.72);box-shadow:0 18px 30px -14px rgba(33,212,217,.12)">
|
||
<div style="width:40px;height:40px;display:grid;place-items:center"><i data-i="1" style="font-size:20px;color:#21D4D9">graphic_eq</i></div>
|
||
<div style="flex:1;min-width:0;padding:4px 8px"><div style="font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Radio Horizonte</div><div style="font-size:12px;font-weight:600;color:#F4B860">En directo</div></div>
|
||
<img src="assets/i_player.png" alt="" style="width:18px;height:18px;border-radius:4px;margin-right:6px">
|
||
<div style="width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:28px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
<div style="margin:0 8px 8px;display:flex;padding:7px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.78);box-shadow:0 8px 24px -6px rgba(33,212,217,.36)">
|
||
<div style="flex:15;margin:0 3px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(33,212,217,.32),rgba(244,184,96,.18));box-shadow:0 8px 24px -6px rgba(33,212,217,.36);padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px"><img src="assets/i_home.png" alt="" style="width:42px;height:42px;border-radius:10px"><span style="font-size:11px;font-weight:900;letter-spacing:-.2px">Inicio</span></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_search.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_favorites.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_alarm.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_settings.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Buscar</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#07121A 0%,#0D1B24 34%,#0E4A4F 68%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-120px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.18),transparent 70%)"></div>
|
||
<div style="position:absolute;right:-150px;top:160px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(126,228,194,.12),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.055"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 16px;flex:none"><span style="font-size:22px;font-weight:600">PluriWave</span><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">bedtime</i></div></div>
|
||
<div style="position:relative;flex:1;overflow:hidden">
|
||
<div style="margin:8px 16px;position:relative;border-radius:38px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122)">
|
||
<div style="position:absolute;inset:0;background:url(assets/banner.jpg) center/cover;opacity:.24"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.18))"></div>
|
||
<img src="assets/mark.png" alt="" style="position:absolute;right:10px;top:10px;width:120px;height:120px;opacity:.18">
|
||
<div style="position:absolute;right:-36px;top:-42px;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.38),transparent 70%)"></div>
|
||
<div style="position:relative;display:flex;gap:14px;padding:24px 20px">
|
||
<div style="flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(32,230,255,.95),#21D4D9,#F4B860);box-shadow:0 0 28px 2px rgba(33,212,217,.4);display:grid;place-items:center;overflow:hidden"><img src="assets/i_search.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:24px;font-weight:900;letter-spacing:-.7px;line-height:1.05">Buscar</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:14px;line-height:1.28;color:rgba(242,247,250,.78)">Filtra por país, idioma y calidad de emisión.</div>
|
||
</div>
|
||
<div style="flex:none"><div style="display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(33,212,217,.13);border:1px solid rgba(33,212,217,.38);font-size:12px;font-weight:800;white-space:nowrap"><i data-i="1" style="font-size:16px;color:#21D4D9">tune</i>Filtros</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin:10px 16px 0;padding:10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122)">
|
||
<div style="display:flex;align-items:center;gap:12px;height:44px;padding:0 8px;border-radius:999px;background:rgba(13,27,36,.5)"><img src="assets/i_search.png" alt="" style="width:22px;height:22px;border-radius:6px"><span style="font-size:15px;color:rgba(242,247,250,.55)">Buscar emisoras, géneros, países…</span></div>
|
||
</div>
|
||
<div style="margin:8px 16px 0;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:10px">
|
||
<div style="font-size:14px;font-weight:900">País</div><div style="height:6px"></div>
|
||
<div style="display:flex;gap:8px;height:40px;align-items:center;overflow:hidden"><div style="padding:6px 12px;border-radius:8px;background:rgba(33,212,217,.24);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">España</div><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">EE. UU.</div><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">México</div></div>
|
||
</div>
|
||
<div style="margin:8px 16px 0;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:10px">
|
||
<div style="font-size:14px;font-weight:900">Idioma</div><div style="height:6px"></div>
|
||
<div style="display:flex;gap:8px;height:40px;align-items:center;overflow:hidden"><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">Español</div><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">Inglés</div><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">Francés</div></div>
|
||
</div>
|
||
<div style="margin:8px 16px 0;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:10px">
|
||
<div style="font-size:14px;font-weight:900">Calidad mínima</div><div style="height:6px"></div>
|
||
<div style="display:flex;gap:8px;height:40px;align-items:center;overflow:hidden"><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">64 kbps</div><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">96 kbps</div><div style="padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.122);border:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;white-space:nowrap">128 kbps</div></div>
|
||
</div>
|
||
<div style="margin:16px;display:flex;flex-direction:column;gap:10px">
|
||
<sc-for list="{{ grid2 }}" as="s" hint-placeholder-count="2">
|
||
<div style="border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:4px 8px;display:flex;align-items:center;gap:8px">
|
||
<div style="flex:none;width:58px;height:58px;border-radius:50%;background:conic-gradient(#21D4D9,#20E6FF,#F4B860,#21D4D9);display:grid;place-items:center;box-shadow:0 0 22px rgba(33,212,217,.24)"><div style="width:50px;height:50px;border-radius:18px;background:#0A1B24 url({{ s.art }}) center/cover"></div></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="font-size:12px;color:rgba(242,247,250,.72)">{{ s.sub }}</div></div>
|
||
<span style="width:8px;height:8px;border-radius:50%;background:#7EE4C2;border:1px solid rgba(126,228,194,.48);box-sizing:content-box;padding:4px 6px;background-clip:content-box"></span>
|
||
<div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:20px">favorite</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0">
|
||
<div style="margin:8px 16px;display:flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.72)">
|
||
<div style="width:40px;height:40px;display:grid;place-items:center"><i data-i="1" style="font-size:20px;color:#21D4D9">graphic_eq</i></div>
|
||
<div style="flex:1;min-width:0;padding:4px 8px"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="font-size:12px;font-weight:600;color:#F4B860">En directo</div></div>
|
||
<div style="width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:28px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
<div style="margin:0 8px 8px;display:flex;padding:7px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.78)">
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_home.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:15;margin:0 3px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(33,212,217,.32),rgba(244,184,96,.18));padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px"><img src="assets/i_search.png" alt="" style="width:42px;height:42px;border-radius:10px"><span style="font-size:11px;font-weight:900">Buscar</span></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_favorites.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_alarm.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_settings.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Favoritos</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#07121A 0%,#0D1B24 34%,#0E4A4F 68%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-120px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.18),transparent 70%)"></div>
|
||
<div style="position:absolute;right:-150px;top:160px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(126,228,194,.12),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.055"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 16px;flex:none"><span style="font-size:22px;font-weight:600">PluriWave</span><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">bedtime</i></div></div>
|
||
<div style="position:relative;flex:1;overflow:hidden">
|
||
<div style="margin:8px 16px;position:relative;border-radius:38px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122)">
|
||
<div style="position:absolute;inset:0;background:url(assets/banner.jpg) center/cover;opacity:.24"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.18))"></div>
|
||
<img src="assets/mark.png" alt="" style="position:absolute;right:10px;top:10px;width:120px;height:120px;opacity:.18">
|
||
<div style="position:absolute;right:-36px;top:-42px;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.38),transparent 70%)"></div>
|
||
<div style="position:relative;display:flex;gap:14px;padding:24px 20px">
|
||
<div style="flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(32,230,255,.95),#21D4D9,#F4B860);box-shadow:0 0 28px 2px rgba(33,212,217,.4);display:grid;place-items:center;overflow:hidden"><img src="assets/i_favorites.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:24px;font-weight:900;letter-spacing:-.7px;line-height:1.05">Favoritos</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:14px;line-height:1.28;color:rgba(242,247,250,.78)">Tu colección, agrupada como quieras.</div>
|
||
</div>
|
||
<div style="flex:none"><div style="display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(33,212,217,.13);border:1px solid rgba(33,212,217,.38);font-size:12px;font-weight:800;white-space:nowrap"><i data-i="1" style="font-size:16px;color:#21D4D9">library_music</i>8</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin:4px 16px 0;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:10px">
|
||
<div style="display:flex;align-items:center;gap:8px"><i data-i="1" style="font-size:22px">folder</i><div style="flex:1;font-size:16px;font-weight:900">Cada mañana</div><div style="font-size:14px">4 emisoras</div></div>
|
||
<div style="height:8px"></div>
|
||
<div style="display:flex;flex-direction:column;gap:8px">
|
||
<sc-for list="{{ favs }}" as="s" hint-placeholder-count="4">
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div style="flex:1;min-width:0;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:4px 8px;display:flex;align-items:center;gap:8px">
|
||
<div style="flex:none;width:58px;height:58px;border-radius:50%;background:conic-gradient(#21D4D9,#20E6FF,#F4B860,#21D4D9);display:grid;place-items:center;box-shadow:0 0 22px rgba(33,212,217,.24)"><div style="width:50px;height:50px;border-radius:18px;background:#0A1B24 url({{ s.art }}) center/cover"></div></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="font-size:12px;color:rgba(242,247,250,.72)">{{ s.sub }}</div></div>
|
||
<div style="width:48px;height:48px;display:grid;place-items:center"><img src="assets/i_favorites.png" alt="" style="width:20px;height:20px;border-radius:5px"></div>
|
||
</div>
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:4px"><div style="width:40px;height:40px;border-radius:50%;background:rgba(33,212,217,.16);display:grid;place-items:center"><i data-i="1" style="font-size:20px">drive_file_move</i></div><div style="width:40px;height:40px;border-radius:50%;background:rgba(33,212,217,.16);display:grid;place-items:center"><i data-i style="font-size:20px">delete</i></div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0">
|
||
<div style="margin:8px 16px;display:flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.72)">
|
||
<div style="width:40px;height:40px;display:grid;place-items:center"><i data-i="1" style="font-size:20px;color:#21D4D9">graphic_eq</i></div>
|
||
<div style="flex:1;min-width:0;padding:4px 8px"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="font-size:12px;font-weight:600;color:#F4B860">En directo</div></div>
|
||
<div style="width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:28px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
<div style="margin:0 8px 8px;display:flex;padding:7px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.78)">
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_home.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_search.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:15;margin:0 3px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(33,212,217,.32),rgba(244,184,96,.18));padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px"><img src="assets/i_favorites.png" alt="" style="width:42px;height:42px;border-radius:10px"><span style="font-size:11px;font-weight:900">Favoritos</span></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_alarm.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_settings.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Reproductor</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#07121A 0%,#0D1B24 34%,#0E4A4F 68%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-120px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.18),transparent 70%)"></div>
|
||
<div style="position:absolute;right:-150px;top:160px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(126,228,194,.12),transparent 70%)"></div>
|
||
<div style="position:absolute;left:-90px;bottom:80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.1),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.055"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px;flex:none"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:32px">keyboard_arrow_down</i></div><div style="display:flex"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px;color:#F4B860">equalizer</i></div><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">favorite</i></div></div></div>
|
||
<div style="position:relative;flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 20px 16px;overflow:hidden">
|
||
<div style="position:relative;width:282px;height:282px;flex:none;display:grid;place-items:center">
|
||
<div style="position:absolute;width:276px;height:276px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.35),transparent 70%)"></div>
|
||
<div style="position:absolute;width:254px;height:254px;border-radius:50%;border:1px solid rgba(255,255,255,.2)"></div>
|
||
<div style="position:relative;width:242px;height:242px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.2)"><img src="assets/art_aurora.jpg" alt="" style="width:100%;height:100%;object-fit:cover"></div>
|
||
</div>
|
||
<div style="height:18px"></div>
|
||
<div style="font-size:24px;font-weight:700;text-align:center;line-height:1.2">Radio Horizonte</div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center">
|
||
<div style="padding:5px 11px;border-radius:8px;background:rgba(126,228,194,.8);color:#0a2b25;font-size:12px;font-weight:600">España</div>
|
||
<div style="padding:5px 11px;border-radius:8px;background:rgba(126,228,194,.8);color:#0a2b25;font-size:12px;font-weight:600">Español</div>
|
||
<div style="padding:5px 11px;border-radius:8px;background:rgba(126,228,194,.8);color:#0a2b25;font-size:12px;font-weight:600">128 kbps</div>
|
||
<div style="padding:5px 11px;border-radius:8px;background:rgba(126,228,194,.8);color:#0a2b25;font-size:12px;font-weight:600">MP3</div>
|
||
</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:12px;color:rgba(242,247,250,.72)">Calidad original · MP3 · 128 kbps</div>
|
||
<div style="height:14px"></div>
|
||
<div style="width:100%;border-radius:30px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:12px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:3px;height:70px;box-sizing:border-box">
|
||
<sc-for list="{{ bars26 }}" as="h" hint-placeholder-count="26"><span style="flex:1;background:#F4B860;border-radius:2px;height:{{ h }}"></span></sc-for>
|
||
</div>
|
||
<div style="flex:1;min-height:14px"></div>
|
||
<div style="width:100%;border-radius:28px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:16px;box-sizing:border-box">
|
||
<div style="width:56px;height:56px;display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:rgba(242,247,250,.78)">stop</i></div>
|
||
<div style="width:72px;height:72px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 0 16px 4px rgba(33,212,217,.35)"><i data-i="1" style="font-size:40px;color:#062126">pause</i></div>
|
||
<div style="width:56px;height:56px;display:grid;place-items:center"><span style="width:32px;height:32px;border-radius:50%;background:#CF6679"></span></div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="width:100%;border-radius:24px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:10px 14px;display:flex;align-items:center;gap:10px;box-sizing:border-box">
|
||
<i data-i="1" style="font-size:22px;color:#21D4D9">radio_button_checked</i>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Grabar en directo</div><div style="font-size:12px;color:rgba(242,247,250,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Guarda el stream original</div></div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:20px;background:rgba(33,212,217,.22);font-size:13px;font-weight:700"><i data-i="1" style="font-size:18px">mic</i>Grabar</div>
|
||
<div style="width:40px;height:40px;border-radius:50%;background:rgba(33,212,217,.16);display:grid;place-items:center"><i data-i="1" style="font-size:20px">folder_open</i></div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;font-weight:700;color:#21D4D9"><i data-i style="font-size:18px">bedtime</i>Temporizador de apagado</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Alarmas</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(135deg,#07121A 0%,#0D1B24 34%,#0E4A4F 68%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;left:-120px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.18),transparent 70%)"></div>
|
||
<div style="position:absolute;right:-150px;top:160px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(126,228,194,.12),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.055"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 16px;flex:none"><span style="font-size:22px;font-weight:600">PluriWave</span><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">bedtime</i></div></div>
|
||
<div style="position:relative;flex:1;overflow:hidden">
|
||
<div style="margin:8px 16px;position:relative;border-radius:38px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122)">
|
||
<div style="position:absolute;inset:0;background:url(assets/banner.jpg) center/cover;opacity:.24"></div>
|
||
<div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.18))"></div>
|
||
<img src="assets/mark.png" alt="" style="position:absolute;right:10px;top:10px;width:120px;height:120px;opacity:.18">
|
||
<div style="position:absolute;right:-36px;top:-42px;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.38),transparent 70%)"></div>
|
||
<div style="position:relative;display:flex;gap:14px;padding:24px 20px">
|
||
<div style="flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(32,230,255,.95),#21D4D9,#F4B860);box-shadow:0 0 28px 2px rgba(33,212,217,.4);display:grid;place-items:center;overflow:hidden"><img src="assets/i_alarm.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:24px;font-weight:900;letter-spacing:-.7px;line-height:1.05">Alarmas</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:14px;line-height:1.28;color:rgba(242,247,250,.78)">Despierta con tu emisora favorita.</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:20px;background:rgba(33,212,217,.22);font-size:13px;font-weight:700"><i data-i="1" style="font-size:18px">auto_awesome</i>Crear alarma</div>
|
||
</div>
|
||
<div style="flex:none"><div style="display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(33,212,217,.13);border:1px solid rgba(33,212,217,.38);font-size:12px;font-weight:800;white-space:nowrap"><i data-i="1" style="font-size:16px;color:#21D4D9">alarm_on</i>3</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin:0 16px;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:16px;display:flex;align-items:center;gap:14px;box-shadow:0 18px 30px -14px rgba(244,184,96,.28)">
|
||
<img src="assets/i_alarm.png" alt="" style="width:72px;height:72px;border-radius:18px;flex:none">
|
||
<div style="flex:1;min-width:0"><div style="font-size:16px;font-weight:900">Próxima alarma</div><div style="height:4px"></div><div style="font-size:14px;color:rgba(242,247,250,.86)">Cada mañana · mañana, 07:30</div></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="margin:0 16px;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:16px">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<img src="assets/i_alarm.png" alt="" style="width:64px;height:64px;border-radius:16px;flex:none">
|
||
<div style="flex:1;min-width:0"><div style="font-size:28px;font-weight:900;letter-spacing:-1px;line-height:1.1">07:30</div><div style="font-size:14px">Cada mañana</div></div>
|
||
<div style="width:52px;height:32px;border-radius:999px;background:#21D4D9;display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:flex-end"><span style="width:26px;height:26px;border-radius:50%;background:#fff"></span></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px">
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:600"><i data-i style="font-size:15px">repeat</i>L–V</div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:600"><i data-i style="font-size:15px">beach_access</i>Pausa en vacaciones</div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:600"><i data-i style="font-size:15px">volume_up</i>80%</div>
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:600"><i data-i style="font-size:15px">trending_up</i>Fade 30 s</div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(242,247,250,.8)"><i data-i style="font-size:17px">event_available</i>Próxima ejecución: mañana, 07:30</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;gap:4px"><div style="display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:14px;font-weight:700;color:#21D4D9"><i data-i style="font-size:18px">edit</i>Editar</div><div style="display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:14px;font-weight:700;color:#21D4D9"><i data-i style="font-size:18px">skip_next</i>Saltar</div></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="margin:0 16px;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);padding:16px">
|
||
<div style="display:flex;align-items:center;gap:12px"><img src="assets/i_alarm.png" alt="" style="width:64px;height:64px;border-radius:16px;flex:none"><div style="flex:1;min-width:0"><div style="font-size:28px;font-weight:900;letter-spacing:-1px;line-height:1.1">08:15</div><div style="font-size:14px">Fin de semana</div></div><div style="width:52px;height:32px;border-radius:999px;background:rgba(255,255,255,.24);display:flex;align-items:center;padding:3px;box-sizing:border-box"><span style="width:26px;height:26px;border-radius:50%;background:#fff"></span></div></div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0">
|
||
<div style="margin:8px 16px;display:flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.72)">
|
||
<div style="width:40px;height:40px;display:grid;place-items:center"><i data-i="1" style="font-size:20px;color:#21D4D9">graphic_eq</i></div>
|
||
<div style="flex:1;min-width:0;padding:4px 8px"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="font-size:12px;font-weight:600;color:#F4B860">En directo</div></div>
|
||
<div style="width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:28px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
<div style="margin:0 8px 8px;display:flex;padding:7px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(7,18,26,.78)">
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_home.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_search.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_favorites.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
<div style="flex:15;margin:0 3px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(33,212,217,.32),rgba(244,184,96,.18));padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px"><img src="assets/i_alarm.png" alt="" style="width:42px;height:42px;border-radius:10px"><span style="font-size:11px;font-weight:900">Alarmas</span></div>
|
||
<div style="flex:10;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.06);padding:7px 3px;display:grid;place-items:center"><img src="assets/i_settings.png" alt="" style="width:34px;height:34px;border-radius:8px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dv-opt" id="1b" style="display:{{ d1b }}">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#1b">1b</a><span><b>Evolución — misma piel, la mitad del peso.</b> Cabecera de 56 px, lo que suena arriba y accionable, favoritas a un toque, grid de 3, filtros en una sola barra. El cristal se reserva para el cromo y la tarjeta activa; las listas pasan a superficie opaca. Iconos de pestaña legibles a 24 px. Mini-reproductor y barra de pestañas fusionan sus márgenes: 146 px → 66 px.</span></div>
|
||
<div style="display:flex;gap:20px">
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Inicio · 6 emisoras a la vista + favoritas + géneros</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(160deg,#07121A 0%,#0D1B24 42%,#0E3B40 78%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;right:-140px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.14),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 10px 0 20px;flex:none"><span style="font-size:23px;font-weight:800;letter-spacing:-.5px">Inicio</span><div style="display:flex"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">search</i></div><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">bedtime</i></div></div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:66px">
|
||
<div style="margin:4px 16px 0;position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.122);box-shadow:0 18px 34px -16px rgba(33,212,217,.35)">
|
||
<img src="assets/art_aurora.jpg" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4">
|
||
<div style="position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,18,26,.92) 34%,rgba(7,18,26,.3))"></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:14px;padding:14px">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:88px;height:88px;border-radius:20px;object-fit:cover;flex:none">
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:center;gap:6px"><span style="width:7px;height:7px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:10px;font-weight:800;letter-spacing:.09em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:5px"></div>
|
||
<div style="font-size:20px;font-weight:800;letter-spacing:-.3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Radio Horizonte</div>
|
||
<div style="height:3px"></div>
|
||
<div style="font-size:12px;color:rgba(242,247,250,.68)">Noticias · España · 128 kbps</div>
|
||
<div style="height:9px"></div>
|
||
<div style="display:flex;align-items:flex-end;gap:2px;height:14px">
|
||
<sc-for list="{{ bars18 }}" as="b" hint-placeholder-count="18"><span style="flex:1;height:14px;border-radius:1px;background:#F4B860;transform-origin:bottom;animation:pw-bar 1.1s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="flex:none;width:56px;height:56px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 6px 20px rgba(33,212,217,.4)"><i data-i="1" style="font-size:30px;color:#062126">pause</i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="height:16px"></div>
|
||
<div style="margin:0 20px 0 20px;display:flex;align-items:baseline;justify-content:space-between"><span style="font-size:15px;font-weight:800;letter-spacing:-.2px">Tus favoritas</span><span style="font-size:12px;font-weight:700;color:#21D4D9">Ver todas</span></div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:flex;gap:12px;padding:0 20px;overflow:hidden">
|
||
<sc-for list="{{ favs5 }}" as="s" hint-placeholder-count="4">
|
||
<div style="flex:none;width:88px">
|
||
<div style="position:relative;width:88px;height:88px;border-radius:20px;overflow:hidden"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,18,26,.6))"></div><div style="position:absolute;right:5px;bottom:5px;width:28px;height:28px;border-radius:50%;background:rgba(7,18,26,.82);display:grid;place-items:center"><i data-i="1" style="font-size:17px;color:#21D4D9">play_arrow</i></div></div>
|
||
<div style="margin-top:7px;font-size:12px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ s.n }}</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;gap:8px;padding:0 20px;overflow:hidden">
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800">Todos</div>
|
||
<sc-for list="{{ generos6 }}" as="g" hint-placeholder-count="5"><div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">{{ g }}</div></sc-for>
|
||
</div>
|
||
|
||
<div style="height:18px"></div>
|
||
<div style="margin:0 20px 0 20px;display:flex;align-items:baseline;justify-content:space-between"><span style="font-size:15px;font-weight:800;letter-spacing:-.2px">Populares en España</span><span style="font-size:12px;font-weight:700;color:rgba(242,247,250,.5)">53.412</span></div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px">
|
||
<sc-for list="{{ grid9 }}" as="s" hint-placeholder-count="6">
|
||
<div>
|
||
<div style="position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;left:6px;top:6px;width:8px;height:8px;border-radius:50%;background:#7EE4C2;box-shadow:0 0 0 2px rgba(7,18,26,.55)"></div></div>
|
||
<div style="margin-top:7px;font-size:12px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ s.n }}</div>
|
||
<div style="margin-top:2px;font-size:10.5px;font-weight:600;color:rgba(242,247,250,.55)">{{ s.kbps }} kbps</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;height:66px;background:rgba(7,18,26,.93);border-top:1px solid rgba(255,255,255,.08);">
|
||
<div style="flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><span style="position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:#21D4D9"></span><i data-i="1" style="font-size:24px;color:#21D4D9">home</i><span style="font-size:11px;font-weight:800;color:#21D4D9">Inicio</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">travel_explore</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Buscar</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">favorite</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Favoritos</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">alarm</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Alarmas</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">settings</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Ajustes</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Buscar · resultados desde el píxel 160</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(160deg,#07121A 0%,#0D1B24 42%,#0E3B40 78%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;right:-140px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.14),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:6px;height:56px;padding:0 12px 0 20px;flex:none"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Buscar</span><div style="display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:800"><i data-i style="font-size:17px">tune</i>Filtros · 2</div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:126px">
|
||
<div style="margin:0 16px;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.12);box-sizing:border-box"><i data-i style="font-size:22px;color:rgba(242,247,250,.55)">search</i><span style="flex:1;font-size:15px;font-weight:600">jazz</span><i data-i style="font-size:20px;color:rgba(242,247,250,.5)">close</i></div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:flex;gap:8px;padding:0 16px;overflow:hidden">
|
||
<div style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 10px 7px 12px;border-radius:10px;background:rgba(33,212,217,.2);border:1px solid rgba(33,212,217,.45);font-size:12px;font-weight:800;white-space:nowrap">España<i data-i style="font-size:15px">close</i></div>
|
||
<div style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 10px 7px 12px;border-radius:10px;background:rgba(33,212,217,.2);border:1px solid rgba(33,212,217,.45);font-size:12px;font-weight:800;white-space:nowrap">≥128 kbps<i data-i style="font-size:15px">close</i></div>
|
||
<div style="flex:none;padding:7px 12px;border-radius:10px;background:#102532;border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:700;white-space:nowrap">Idioma</div>
|
||
<div style="flex:none;padding:7px 12px;border-radius:10px;background:#102532;border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:700;white-space:nowrap">Ordenar</div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="padding:0 20px;font-size:11px;font-weight:800;letter-spacing:.06em;color:rgba(242,247,250,.45)">37 RESULTADOS</div>
|
||
<div style="height:8px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<sc-for list="{{ results }}" as="s" hint-placeholder-count="8">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px">
|
||
<div style="flex:none;width:48px;height:48px;border-radius:12px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.g }} · {{ s.p }} · {{ s.kbps }} kbps</div></div>
|
||
<div style="flex:none;width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:22px;color:rgba(242,247,250,.55)">favorite</i></div>
|
||
<div style="flex:none;width:44px;height:44px;border-radius:50%;background:rgba(33,212,217,.14);display:grid;place-items:center"><i data-i="1" style="font-size:22px;color:#21D4D9">play_arrow</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:0;right:0;bottom:66px;display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07)">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none">
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
<div style="flex:none;width:36px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">keyboard_arrow_up</i></div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;height:66px;background:rgba(7,18,26,.93);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">home</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Inicio</span></div>
|
||
<div style="flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><span style="position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:#21D4D9"></span><i data-i="1" style="font-size:24px;color:#21D4D9">travel_explore</i><span style="font-size:11px;font-weight:800;color:#21D4D9">Buscar</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">favorite</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Favoritos</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">alarm</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Alarmas</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">settings</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Ajustes</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Favoritos · 8 filas visibles, grupos como pestañas</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(160deg,#07121A 0%,#0D1B24 42%,#0E3B40 78%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;right:-140px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.12),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:6px;height:56px;padding:0 12px 0 20px;flex:none"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Favoritos</span><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">create_new_folder</i></div><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">swap_vert</i></div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:126px">
|
||
<div style="display:flex;gap:8px;padding:0 20px;overflow:hidden">
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800">Todas · 8</div>
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">Cada mañana · 4</div>
|
||
<div style="flex:none;padding:9px 15px;border-radius:12px;background:#102532;border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700;white-space:nowrap">Coche · 3</div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<sc-for list="{{ favs8 }}" as="s" hint-placeholder-count="8">
|
||
<div style="display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px">
|
||
<i data-i style="font-size:22px;color:rgba(242,247,250,.28);flex:none">drag_indicator</i>
|
||
<div style="flex:none;width:48px;height:48px;border-radius:12px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:12px;color:rgba(242,247,250,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.g }} · {{ s.p }}</div></div>
|
||
<div style="flex:none;width:44px;height:44px;border-radius:50%;background:rgba(33,212,217,.14);display:grid;place-items:center"><i data-i="1" style="font-size:22px;color:#21D4D9">play_arrow</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:0;right:0;bottom:66px;display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07)">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none">
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
<div style="flex:none;width:36px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">keyboard_arrow_up</i></div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;height:66px;background:rgba(7,18,26,.93);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">home</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Inicio</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">travel_explore</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Buscar</span></div>
|
||
<div style="flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><span style="position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:#21D4D9"></span><i data-i="1" style="font-size:24px;color:#21D4D9">favorite</i><span style="font-size:11px;font-weight:800;color:#21D4D9">Favoritos</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">alarm</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Alarmas</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">settings</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Ajustes</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Reproductor · 9 acciones visibles en lugar de 3</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(170deg,#0A1C24 0%,#0D1B24 40%,#0E3B40 74%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<img src="assets/art_aurora.jpg" alt="" style="position:absolute;left:-40px;right:-40px;top:-60px;width:470px;height:470px;object-fit:cover;filter:blur(26px);opacity:.45">
|
||
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,26,.55),rgba(7,18,26,.9) 46%,#07121A)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;height:56px;padding:0 8px;flex:none"><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:30px">keyboard_arrow_down</i></div><div style="flex:1;display:flex;justify-content:center"><div style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(126,228,194,.14);border:1px solid rgba(126,228,194,.4)"><span style="width:7px;height:7px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:800;letter-spacing:.06em;color:#7EE4C2">EN DIRECTO</span></div></div><div style="width:48px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px">cast</i></div></div>
|
||
|
||
<div style="position:relative;flex:1;display:flex;flex-direction:column;padding:6px 20px 20px;box-sizing:border-box">
|
||
<div style="display:flex;justify-content:center"><img src="assets/art_aurora.jpg" alt="" style="width:246px;height:246px;border-radius:28px;object-fit:cover;box-shadow:0 26px 60px rgba(0,0,0,.55)"></div>
|
||
<div style="height:20px"></div>
|
||
<div style="font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.15;text-align:center">Radio Horizonte</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:13px;font-weight:600;color:rgba(242,247,250,.62);text-align:center">Noticias · España · Español</div>
|
||
<div style="height:18px"></div>
|
||
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:2px;height:40px">
|
||
<sc-for list="{{ bars30 }}" as="b" hint-placeholder-count="30"><span style="flex:1;height:40px;border-radius:2px;background:linear-gradient(180deg,#F4B860,rgba(244,184,96,.45));transform-origin:bottom;animation:pw-bar 1.15s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
<div style="height:22px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:26px;color:#F4B860">favorite</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:rgba(242,247,250,.85)">skip_previous</i></div>
|
||
<div style="width:78px;height:78px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 10px 30px rgba(33,212,217,.42)"><i data-i="1" style="font-size:42px;color:#062126">pause</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:rgba(242,247,250,.85)">skip_next</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i style="font-size:26px;color:rgba(242,247,250,.85)">volume_up</i></div>
|
||
</div>
|
||
<div style="flex:1;min-height:18px"></div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
|
||
<div style="border-radius:18px;background:rgba(33,212,217,.16);border:1px solid rgba(33,212,217,.4);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i="1" style="font-size:23px;color:#21D4D9">equalizer</i><span style="font-size:10.5px;font-weight:800;color:#21D4D9">EQ · Rock</span></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.09);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i style="font-size:23px">mic</i><span style="font-size:10.5px;font-weight:700;color:rgba(242,247,250,.72)">Grabar</span></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.09);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i style="font-size:23px">bedtime</i><span style="font-size:10.5px;font-weight:700;color:rgba(242,247,250,.72)">30 min</span></div>
|
||
<div style="border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.09);padding:11px 6px;display:flex;flex-direction:column;align-items:center;gap:5px"><i data-i style="font-size:23px">ios_share</i><span style="font-size:10.5px;font-weight:700;color:rgba(242,247,250,.72)">Compartir</span></div>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:19px;color:#7EE4C2">hd</i><span style="flex:1;font-size:12.5px;font-weight:600;color:rgba(242,247,250,.75)">MP3 · 128 kbps · conexión estable</span><span style="font-size:12px;font-weight:800;color:#21D4D9">Cambiar</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Alarmas · la hora es lo primero que se lee</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:linear-gradient(160deg,#07121A 0%,#0D1B24 42%,#0E3B40 78%,#07121A 100%);box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;right:-140px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.14),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;gap:8px;height:56px;padding:0 12px 0 20px;flex:none"><span style="flex:1;font-size:23px;font-weight:800;letter-spacing:-.5px">Alarmas</span><div style="display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;background:#21D4D9;color:#062126;font-size:13px;font-weight:800"><i data-i="1" style="font-size:18px">add</i>Nueva</div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:126px">
|
||
<div style="margin:0 16px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:rgba(244,184,96,.13);border:1px solid rgba(244,184,96,.34)">
|
||
<i data-i="1" style="font-size:26px;color:#F4B860">alarm_on</i>
|
||
<div style="flex:1;min-width:0"><div style="font-size:15px;font-weight:800">Suena en 9 h 12 min</div><div style="margin-top:2px;font-size:12.5px;color:rgba(242,247,250,.7)">Cada mañana · mañana a las 07:30</div></div>
|
||
<div style="padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);font-size:12px;font-weight:800">Saltar</div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="margin:0 16px;display:flex;flex-direction:column;gap:10px">
|
||
<sc-for list="{{ alarms }}" as="a" hint-placeholder-count="4">
|
||
<div style="border-radius:20px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:14px 16px">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;align-items:baseline;gap:8px"><span style="font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1;color:{{ a.color }}">{{ a.hora }}</span><span style="font-size:12px;font-weight:700;color:rgba(242,247,250,.5)">{{ a.dias }}</span></div>
|
||
<div style="height:7px"></div>
|
||
<div style="display:flex;align-items:center;gap:7px"><div style="flex:none;width:22px;height:22px;border-radius:6px;background:#0A1B24 url({{ a.art }}) center/cover"></div><span style="font-size:12.5px;font-weight:600;color:rgba(242,247,250,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ a.nombre }}</span></div>
|
||
</div>
|
||
<div style="flex:none;width:52px;height:32px;border-radius:999px;background:{{ a.sw }};display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:{{ a.swPos }}"><span style="width:26px;height:26px;border-radius:50%;background:#fff"></span></div>
|
||
</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:0;right:0;bottom:66px;display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07)">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none">
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
<div style="flex:none;width:36px;height:48px;display:grid;place-items:center"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">keyboard_arrow_up</i></div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;height:66px;background:rgba(7,18,26,.93);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">home</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Inicio</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">travel_explore</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Buscar</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">favorite</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Favoritos</span></div>
|
||
<div style="flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><span style="position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:#21D4D9"></span><i data-i="1" style="font-size:24px;color:#21D4D9">alarm</i><span style="font-size:11px;font-weight:800;color:#21D4D9">Alarmas</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:24px;color:rgba(242,247,250,.5)">settings</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Ajustes</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dv-opt" id="1c" style="display:{{ d1c }}">
|
||
<div class="dv-olabel"><a class="dv-oid" href="#1c">1c</a><span><b>Reforma — "Ahora" como pantalla raíz y una sola jerarquía para móvil y coche.</b> Cuatro pestañas (Escuchar · Explorar · Alarmas · Ajustes): favoritos deja de ser un destino y se convierte en el cuerpo de la pantalla de inicio. El reproductor completo pasa a ser opcional — pausar, saltar y cambiar de emisora se hacen sin abrirlo. La misma jerarquía de dos niveles (Favoritas → emisora) es la que Android Auto necesita, así que móvil y coche dejan de divergir.</span></div>
|
||
<div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap">
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Escuchar · reproductor + tus emisoras en una pantalla</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<img src="assets/art_aurora.jpg" alt="" style="position:absolute;left:0;top:0;width:390px;height:390px;object-fit:cover;opacity:.55">
|
||
<div style="position:absolute;left:0;top:0;right:0;height:400px;background:linear-gradient(180deg,rgba(7,18,26,.35),rgba(7,18,26,.82) 55%,#07121A)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;display:flex;align-items:center;height:52px;padding:0 10px 0 20px;flex:none"><span style="flex:1;font-size:15px;font-weight:800;letter-spacing:.02em;color:rgba(242,247,250,.55)">ESCUCHANDO AHORA</span><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">cast</i></div><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:23px">more_horiz</i></div></div>
|
||
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:66px">
|
||
<div style="padding:0 20px">
|
||
<div style="display:flex;align-items:flex-end;gap:14px">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:132px;height:132px;border-radius:24px;object-fit:cover;flex:none;box-shadow:0 18px 44px rgba(0,0,0,.55)">
|
||
<div style="flex:1;min-width:0;padding-bottom:2px">
|
||
<div style="display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(126,228,194,.15);border:1px solid rgba(126,228,194,.4)"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:10px;font-weight:800;letter-spacing:.07em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:9px"></div>
|
||
<div style="font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.12;text-wrap:pretty">Radio Horizonte</div>
|
||
<div style="height:4px"></div>
|
||
<div style="font-size:12.5px;font-weight:600;color:rgba(242,247,250,.62)">Noticias · España · 128 kbps</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;align-items:flex-end;gap:2px;height:26px">
|
||
<sc-for list="{{ bars30 }}" as="b" hint-placeholder-count="30"><span style="flex:1;height:26px;border-radius:2px;background:linear-gradient(180deg,#7EE4C2,rgba(126,228,194,.3));transform-origin:bottom;animation:pw-bar 1.2s ease-in-out infinite;animation-delay:{{ b }}"></span></sc-for>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:25px;color:#F4B860">favorite</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:29px;color:rgba(242,247,250,.85)">skip_previous</i></div>
|
||
<div style="width:72px;height:72px;border-radius:50%;background:#21D4D9;display:grid;place-items:center;box-shadow:0 10px 28px rgba(33,212,217,.42)"><i data-i="1" style="font-size:38px;color:#062126">pause</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i="1" style="font-size:29px;color:rgba(242,247,250,.85)">skip_next</i></div>
|
||
<div style="width:52px;height:52px;display:grid;place-items:center"><i data-i style="font-size:25px;color:rgba(242,247,250,.85)">bedtime</i></div>
|
||
</div>
|
||
<div style="height:8px"></div>
|
||
<div style="display:flex;justify-content:center"><div style="display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);font-size:12px;font-weight:700;color:rgba(242,247,250,.72)"><i data-i style="font-size:17px">expand_less</i>Ecualizador, grabar, calidad</div></div>
|
||
</div>
|
||
|
||
<div style="height:22px"></div>
|
||
<div style="margin:0 20px;display:flex;align-items:center;gap:10px"><span style="font-size:15px;font-weight:800;letter-spacing:-.2px">Tus emisoras</span><span style="padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;font-weight:800;color:rgba(242,247,250,.6)">8</span><span style="flex:1"></span><i data-i style="font-size:20px;color:rgba(242,247,250,.5)">swap_vert</i></div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<sc-for list="{{ favs8 }}" as="s" hint-placeholder-count="8">
|
||
<div style="display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)">
|
||
<div style="flex:none;width:44px;height:44px;border-radius:11px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11px;color:rgba(242,247,250,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.g }}</div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;height:66px;background:rgba(7,18,26,.94);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><span style="position:absolute;top:0;width:30px;height:3px;border-radius:0 0 3px 3px;background:#21D4D9"></span><i data-i="1" style="font-size:25px;color:#21D4D9">graphic_eq</i><span style="font-size:11px;font-weight:800;color:#21D4D9">Escuchar</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:25px;color:rgba(242,247,250,.5)">travel_explore</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Explorar</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:25px;color:rgba(242,247,250,.5)">alarm</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Alarmas</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:25px;color:rgba(242,247,250,.5)">settings</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Ajustes</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Explorar · una superficie para buscar y descubrir</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<div style="position:absolute;right:-150px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.16),transparent 70%)"></div>
|
||
<div style="position:absolute;inset:0;background:url(assets/noise.jpg) center/cover;opacity:.05"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;flex:1;overflow:hidden;padding-bottom:126px">
|
||
<div style="margin:8px 16px 0;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.12);box-sizing:border-box"><i data-i style="font-size:22px;color:rgba(242,247,250,.5)">search</i><span style="flex:1;font-size:15px;color:rgba(242,247,250,.5)">Emisora, país, género…</span><i data-i style="font-size:21px;color:rgba(242,247,250,.5)">mic</i></div>
|
||
<div style="height:18px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Cerca de ti · España</div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:flex;gap:12px;padding:0 20px;overflow:hidden">
|
||
<sc-for list="{{ near3 }}" as="s" hint-placeholder-count="3">
|
||
<div style="flex:none;width:150px;border-radius:18px;overflow:hidden;background:#102532;border:1px solid rgba(255,255,255,.07)">
|
||
<div style="position:relative;height:86px"><div style="position:absolute;inset:0;background:#0A1B24 url({{ s.art }}) center/cover"></div><div style="position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,18,26,.7))"></div><div style="position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:#21D4D9;display:grid;place-items:center"><i data-i="1" style="font-size:19px;color:#062126">play_arrow</i></div></div>
|
||
<div style="padding:9px 11px 11px"><div style="font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11px;color:rgba(242,247,250,.55)">{{ s.g }} · {{ s.kbps }} kbps</div></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<div style="height:20px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Explorar por</div>
|
||
<div style="height:10px"></div>
|
||
<div style="margin:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#21D4D9">public</i><div><div style="font-size:13.5px;font-weight:800">Países</div><div style="font-size:11px;color:rgba(242,247,250,.55)">238</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#7EE4C2">library_music</i><div><div style="font-size:13.5px;font-weight:800">Géneros</div><div style="font-size:11px;color:rgba(242,247,250,.55)">64</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#F4B860">trending_up</i><div><div style="font-size:13.5px;font-weight:800">Tendencias</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Hoy</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#102532;border:1px solid rgba(255,255,255,.07)"><i data-i="1" style="font-size:24px;color:#60A5FA">fiber_new</i><div><div style="font-size:13.5px;font-weight:800">Novedades</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Esta semana</div></div></div>
|
||
</div>
|
||
<div style="height:20px"></div>
|
||
<div style="margin:0 20px;font-size:15px;font-weight:800;letter-spacing:-.2px">Populares ahora</div>
|
||
<div style="height:8px"></div>
|
||
<div style="margin:0 12px;display:flex;flex-direction:column">
|
||
<sc-for list="{{ results4 }}" as="s" hint-placeholder-count="4">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px">
|
||
<div style="flex:none;width:46px;height:46px;border-radius:12px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.n }}</div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.55)">{{ s.g }} · {{ s.p }}</div></div>
|
||
<div style="flex:none;width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:21px;color:rgba(242,247,250,.5)">favorite</i></div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:66px;display:flex;align-items:center;gap:10px;height:60px;padding:0 12px;background:rgba(16,37,50,.97);border-top:1px solid rgba(255,255,255,.07)">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none">
|
||
<div style="flex:1;min-width:0"><div style="font-size:14px;font-weight:700">Radio Horizonte</div><div style="display:flex;align-items:center;gap:5px;margin-top:2px"><span style="width:6px;height:6px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:11px;font-weight:700;color:#7EE4C2">En directo</span></div></div>
|
||
<div style="flex:none;width:48px;height:48px;display:grid;place-items:center"><i data-i="1" style="font-size:30px;color:#21D4D9">pause_circle</i></div>
|
||
</div>
|
||
<div style="position:absolute;left:0;right:0;bottom:0;display:flex;height:66px;background:rgba(7,18,26,.94);border-top:1px solid rgba(255,255,255,.08)">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:25px;color:rgba(242,247,250,.5)">graphic_eq</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Escuchar</span></div>
|
||
<div style="flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><span style="position:absolute;top:0;width:30px;height:3px;border-radius:0 0 3px 3px;background:#21D4D9"></span><i data-i="1" style="font-size:25px;color:#21D4D9">travel_explore</i><span style="font-size:11px;font-weight:800;color:#21D4D9">Explorar</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:25px;color:rgba(242,247,250,.5)">alarm</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Alarmas</span></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><i data-i style="font-size:25px;color:rgba(242,247,250,.5)">settings</i><span style="font-size:11px;font-weight:600;color:rgba(242,247,250,.5)">Ajustes</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Bandeja de herramientas · sube desde el reproductor, no lo tapa</div>
|
||
<div style="position:relative;width:390px;height:844px;border-radius:40px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex;flex-direction:column">
|
||
<img src="assets/art_aurora.jpg" alt="" style="position:absolute;left:0;top:0;width:390px;height:340px;object-fit:cover;opacity:.3">
|
||
<div style="position:absolute;left:0;top:0;right:0;height:360px;background:linear-gradient(180deg,rgba(7,18,26,.6),#07121A)"></div>
|
||
<div style="position:absolute;inset:0;background:rgba(7,18,26,.45)"></div>
|
||
<div style="position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 24px;font-size:13px;font-weight:700;flex:none"><span>9:41</span><div style="display:flex;align-items:center;gap:6px"><i data-i="1" style="font-size:15px">signal_cellular_alt</i><i data-i="1" style="font-size:15px">wifi</i><i data-i="1" style="font-size:15px">battery_full</i></div></div>
|
||
<div style="position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden">
|
||
<div style="padding:0 20px;opacity:.42;filter:saturate(.7)">
|
||
<div style="display:flex;align-items:center;height:44px"><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:28px">keyboard_arrow_down</i></div><div style="flex:1;display:flex;justify-content:center"><div style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(126,228,194,.14);border:1px solid rgba(126,228,194,.4)"><span style="width:7px;height:7px;border-radius:50%;background:#7EE4C2"></span><span style="font-size:11px;font-weight:800;letter-spacing:.06em;color:#7EE4C2">EN DIRECTO</span></div></div><div style="width:44px;height:44px;display:grid;place-items:center"><i data-i style="font-size:22px">cast</i></div></div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;justify-content:center"><img src="assets/art_aurora.jpg" alt="" style="width:176px;height:176px;border-radius:24px;object-fit:cover"></div>
|
||
<div style="height:16px"></div>
|
||
<div style="font-size:22px;font-weight:800;letter-spacing:-.4px;text-align:center">Radio Horizonte</div>
|
||
<div style="height:5px"></div>
|
||
<div style="font-size:12.5px;font-weight:600;color:rgba(242,247,250,.62);text-align:center">Noticias · España · 128 kbps</div>
|
||
<div style="height:16px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:26px"><i data-i="1" style="font-size:26px;color:#F4B860">favorite</i><i data-i="1" style="font-size:28px">skip_previous</i><span style="width:62px;height:62px;border-radius:50%;background:#21D4D9;display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:#062126">pause</i></span><i data-i="1" style="font-size:28px">skip_next</i><i data-i style="font-size:26px">volume_up</i></div>
|
||
</div>
|
||
<div style="flex:1;min-height:10px"></div>
|
||
<div style="border-radius:30px 30px 0 0;background:#0D1B24;border-top:1px solid rgba(255,255,255,.11);padding:14px 20px 26px;box-shadow:0 -20px 50px rgba(0,0,0,.5)">
|
||
<div style="display:flex;justify-content:center"><span style="width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)"></span></div>
|
||
<div style="height:18px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between"><span style="font-size:17px;font-weight:800;letter-spacing:-.3px">Herramientas</span><span style="font-size:12px;font-weight:800;color:#21D4D9">PRO activo</span></div>
|
||
<div style="height:16px"></div>
|
||
<div style="border-radius:20px;background:#102532;border:1px solid rgba(255,255,255,.08);padding:16px">
|
||
<div style="display:flex;align-items:center;gap:11px"><div style="flex:none;width:38px;height:38px;border-radius:11px;background:#0A1B24 url(assets/art_aurora.jpg) center/cover"></div><div style="flex:1;min-width:0"><div style="display:flex;align-items:center;gap:7px"><span style="font-size:14px;font-weight:800">Ecualizador de esta emisora</span><span style="padding:2px 7px;border-radius:999px;background:rgba(33,212,217,.2);border:1px solid rgba(33,212,217,.42);font-size:9.5px;font-weight:800;letter-spacing:.05em;color:#21D4D9">PROPIO</span></div><div style="margin-top:2px;font-size:11.5px;color:rgba(242,247,250,.6)">Solo para Radio Horizonte · el base vive en Ajustes</div></div><div style="flex:none;width:48px;height:30px;border-radius:999px;background:#21D4D9;display:flex;align-items:center;padding:3px;box-sizing:border-box;justify-content:flex-end"><span style="width:24px;height:24px;border-radius:50%;background:#fff"></span></div></div>
|
||
<div style="height:14px"></div>
|
||
<div style="display:flex;align-items:stretch;justify-content:space-between;gap:6px;height:70px">
|
||
<sc-for list="{{ eqBands }}" as="b" hint-placeholder-count="7">
|
||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:7px">
|
||
<div style="position:relative;width:4px;flex:1;border-radius:2px;background:rgba(255,255,255,.12)"><span style="position:absolute;left:-5px;top:{{ b.top }};width:14px;height:14px;border-radius:50%;background:#21D4D9;box-shadow:0 0 10px rgba(33,212,217,.6)"></span></div>
|
||
<span style="font-size:9.5px;font-weight:700;color:rgba(242,247,250,.5)">{{ b.hz }}</span>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<div style="height:12px"></div>
|
||
<div style="display:flex;gap:8px"><div style="flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:11.5px;font-weight:800;color:rgba(242,247,250,.72)"><i data-i style="font-size:16px">undo</i>Volver al base</div><div style="flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:11.5px;font-weight:800;color:rgba(242,247,250,.72)"><i data-i style="font-size:16px">tune</i>Presets</div></div>
|
||
</div>
|
||
<div style="height:10px"></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08)"><i data-i="1" style="font-size:22px;color:#F4B860">mic</i><div style="min-width:0"><div style="font-size:13px;font-weight:800">Grabar</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Stream original</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:rgba(33,212,217,.14);border:1px solid rgba(33,212,217,.36)"><i data-i="1" style="font-size:22px;color:#21D4D9">bedtime</i><div style="min-width:0"><div style="font-size:13px;font-weight:800;color:#21D4D9">28:44</div><div style="font-size:11px;color:rgba(33,212,217,.75)">Apagado</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08)"><i data-i="1" style="font-size:22px;color:#7EE4C2">hd</i><div style="min-width:0"><div style="font-size:13px;font-weight:800">128 kbps</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Calidad</div></div></div>
|
||
<div style="display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;background:#102532;border:1px solid rgba(255,255,255,.08)"><i data-i="1" style="font-size:22px;color:#60A5FA">alarm_add</i><div style="min-width:0"><div style="font-size:13px;font-weight:800">Alarma</div><div style="font-size:11px;color:rgba(242,247,250,.55)">Con esta emisora</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="flex:none;display:flex;flex-direction:column;gap:8px">
|
||
<div style="font:700 11px/1 'Plus Jakarta Sans',sans-serif;color:rgba(20,38,47,.5)">Android Auto · 1360×720 · misma jerarquía, objetivos de 96 px</div>
|
||
<div style="position:relative;width:1360px;height:720px;border-radius:18px;overflow:hidden;background:#07121A;box-shadow:0 30px 70px rgba(7,18,26,.45),0 0 0 1px rgba(255,255,255,.09);color:#F2F7FA;display:flex">
|
||
<div style="position:absolute;right:-200px;top:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(33,212,217,.1),transparent 70%)"></div>
|
||
|
||
<div style="position:relative;flex:none;width:104px;display:flex;flex-direction:column;align-items:center;padding:22px 0;gap:14px;background:rgba(13,27,36,.7);border-right:1px solid rgba(255,255,255,.07)">
|
||
<img src="assets/mark.png" alt="" style="width:52px;height:52px;border-radius:14px">
|
||
<div style="height:6px"></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;background:rgba(33,212,217,.18);border:1px solid rgba(33,212,217,.42);display:grid;place-items:center"><i data-i="1" style="font-size:34px;color:#21D4D9">favorite</i></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;display:grid;place-items:center"><i data-i style="font-size:34px;color:rgba(242,247,250,.55)">history</i></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;display:grid;place-items:center"><i data-i style="font-size:34px;color:rgba(242,247,250,.55)">travel_explore</i></div>
|
||
<div style="width:72px;height:72px;border-radius:20px;display:grid;place-items:center"><i data-i style="font-size:34px;color:rgba(242,247,250,.55)">folder</i></div>
|
||
</div>
|
||
|
||
<div style="position:relative;flex:1;min-width:0;display:flex;flex-direction:column;padding:26px 28px 0">
|
||
<div style="display:flex;align-items:center;gap:14px"><span style="font-size:30px;font-weight:800;letter-spacing:-.6px">Favoritas</span><span style="padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:16px;font-weight:800;color:rgba(242,247,250,.6)">8</span></div>
|
||
<div style="height:20px"></div>
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<sc-for list="{{ auto4 }}" as="s" hint-placeholder-count="4">
|
||
<div style="display:flex;align-items:center;gap:20px;height:96px;padding:0 22px 0 14px;border-radius:20px;background:{{ s.bg }};border:1px solid {{ s.bd }};box-sizing:border-box">
|
||
<div style="flex:none;width:68px;height:68px;border-radius:16px;background:#0A1B24 url({{ s.art }}) center/cover"></div>
|
||
<div style="flex:1;min-width:0"><div style="font-size:24px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:{{ s.fg }}">{{ s.n }}</div><div style="margin-top:3px;font-size:17px;color:rgba(242,247,250,.6)">{{ s.g }} · {{ s.kbps }} kbps</div></div>
|
||
<i data-i="1" style="font-size:34px;color:{{ s.icoColor }}">{{ s.ico }}</i>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:relative;flex:none;width:452px;display:flex;flex-direction:column;padding:26px 28px;background:rgba(13,27,36,.72);border-left:1px solid rgba(255,255,255,.07);box-sizing:border-box">
|
||
<img src="assets/art_aurora.jpg" alt="" style="width:100%;height:238px;border-radius:22px;object-fit:cover;flex:none;box-shadow:0 20px 46px rgba(0,0,0,.5)">
|
||
<div style="height:22px"></div>
|
||
<div style="display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(126,228,194,.15);border:1px solid rgba(126,228,194,.42)"><span style="width:8px;height:8px;border-radius:50%;background:#7EE4C2;animation:pw-pulse 1.6s ease-in-out infinite"></span><span style="font-size:14px;font-weight:800;letter-spacing:.06em;color:#7EE4C2">EN DIRECTO</span></div>
|
||
<div style="height:14px"></div>
|
||
<div style="font-size:32px;font-weight:800;letter-spacing:-.6px;line-height:1.15">Radio Horizonte</div>
|
||
<div style="height:6px"></div>
|
||
<div style="font-size:19px;font-weight:600;color:rgba(242,247,250,.62)">Noticias · España · 128 kbps</div>
|
||
<div style="flex:1;min-height:20px"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||
<div style="width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:38px;color:#F4B860">favorite</i></div>
|
||
<div style="width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:40px;color:rgba(242,247,250,.88)">skip_previous</i></div>
|
||
<div style="width:104px;height:104px;border-radius:32px;background:#21D4D9;display:grid;place-items:center;box-shadow:0 12px 32px rgba(33,212,217,.4)"><i data-i="1" style="font-size:54px;color:#062126">pause</i></div>
|
||
<div style="width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.06);display:grid;place-items:center"><i data-i="1" style="font-size:40px;color:rgba(242,247,250,.88)">skip_next</i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<p class="dv-next">Esto es el punto de partida y el diagnóstico. Dime si te cuadra y sigo con las propuestas, o pídeme ya: "enséñame la evolución" · "quiero ver la versión más radical" · "añade la pantalla de Android Auto".</p>
|
||
</section>
|
||
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{"foco":{"editor":"enum","options":["todo","actual","evolucion","reforma"],"default":"todo","tsType":"string","section":"Vista"}}">
|
||
const A = {
|
||
aurora: 'assets/art_aurora.jpg',
|
||
cosmic: 'assets/art_cosmic.jpg',
|
||
pulse: 'assets/art_pulse.jpg',
|
||
nova: 'assets/art_nova.jpg',
|
||
};
|
||
|
||
const STATIONS = [
|
||
{ n: 'Radio Horizonte', p: 'España', sub: 'España · Español', art: A.aurora, g: 'Noticias', kbps: 128 },
|
||
{ n: 'Onda Cero', p: 'España', sub: 'España · Español', art: A.cosmic, g: 'Noticias', kbps: 96 },
|
||
{ n: 'Los 40 Classic', p: 'España', sub: 'España · Español', art: A.pulse, g: 'Pop', kbps: 128 },
|
||
{ n: 'Rock FM', p: 'España', sub: 'España · Español', art: A.nova, g: 'Rock', kbps: 192 },
|
||
{ n: 'Radio 3', p: 'España', sub: 'España · Español', art: A.aurora, g: 'Cultura', kbps: 128 },
|
||
{ n: 'Kiss FM', p: 'Internacional', sub: 'Internacional · Español', art: A.cosmic, g: 'Rock', kbps: 96 },
|
||
{ n: 'Cadena SER', p: 'España', sub: 'España · Español', art: A.pulse, g: 'Noticias', kbps: 128 },
|
||
{ n: 'Onda Clásica', p: 'España', sub: 'España · Español', art: A.nova, g: 'Clásica', kbps: 192 },
|
||
{ n: 'Radio Sol', p: 'México', sub: 'México · Español', art: A.aurora, g: 'Pop latino', kbps: 96 },
|
||
{ n: 'Beat 90s', p: 'Reino Unido', sub: 'Reino Unido · Inglés', art: A.cosmic, g: "90's Hits", kbps: 128 },
|
||
{ n: 'Ibiza Global', p: 'España', sub: 'España · Español', art: A.pulse, g: 'Electrónica', kbps: 320 },
|
||
{ n: 'Radio Nacional', p: 'Argentina', sub: 'Argentina · Español', art: A.nova, g: 'Charla', kbps: 64 },
|
||
];
|
||
|
||
const BAR_SEED = [18, 34, 26, 44, 30, 46, 22, 38, 28, 46, 20, 32, 42, 24, 36, 46, 28, 40, 22, 34, 44, 26, 38, 30, 20, 42];
|
||
|
||
const NAV5 = [
|
||
{ icon: 'home', label: 'Inicio' },
|
||
{ icon: 'travel_explore', label: 'Buscar' },
|
||
{ icon: 'favorite', label: 'Favoritos' },
|
||
{ icon: 'alarm', label: 'Alarmas' },
|
||
{ icon: 'settings', label: 'Ajustes' },
|
||
];
|
||
|
||
const NAV4 = [
|
||
{ icon: 'graphic_eq', label: 'Escuchar' },
|
||
{ icon: 'travel_explore', label: 'Explorar' },
|
||
{ icon: 'alarm', label: 'Alarmas' },
|
||
{ icon: 'settings', label: 'Ajustes' },
|
||
];
|
||
|
||
class Component extends DCLogic {
|
||
state = { navA: 0, navB: 2, tab: 0, tray: false };
|
||
|
||
// Balloon bar: the bubble is a taller capsule that slides to the active
|
||
// cell; the flat bar and the bubble share one colour so the union reads as
|
||
// a single inflated shape (outline comes from a drop-shadow on the union).
|
||
balloon(key, barW, k, list) {
|
||
const NAV = list || NAV5;
|
||
const active = this.state[key];
|
||
const cell = barW / NAV.length;
|
||
const bubbleW = Math.round(cell * 1.19);
|
||
const x = Math.round(cell * active + cell / 2 - bubbleW / 2);
|
||
return {
|
||
bubbleW: bubbleW + 'px',
|
||
bubbleX: 'translateX(' + x + 'px)',
|
||
items: NAV.map((it, i) => ({
|
||
icon: it.icon,
|
||
label: it.label,
|
||
fill: i === active ? '1' : '0',
|
||
size: (i === active ? 25 * k : 23 * k) + 'px',
|
||
lblSize: 11 * k + 'px',
|
||
color: i === active ? '#21D4D9' : 'rgba(242,247,250,.46)',
|
||
lift: 'translateY(' + (i === active ? -15 * k : 0) + 'px)',
|
||
lblH: i === active ? 17 * k + 'px' : '0px',
|
||
lblO: i === active ? '1' : '0',
|
||
on: () => this.setState({ [key]: i }),
|
||
})),
|
||
};
|
||
}
|
||
|
||
renderVals() {
|
||
const foco = this.props.foco ?? 'todo';
|
||
const balloonA = this.balloon('navA', 370, 1);
|
||
const balloonB = this.balloon('navB', 740, 2);
|
||
const balloonC = this.balloon('tab', 370, 1, NAV4);
|
||
const tab = this.state.tab;
|
||
const tray = this.state.tray;
|
||
return {
|
||
generos: ['Pop', 'Rock', 'Jazz', 'Clásica', 'Electrónica', 'Noticias', 'Charla', 'Hip-hop', 'Country', 'Metal', 'Reggae', 'Latina'],
|
||
stations: STATIONS,
|
||
grid4: STATIONS.slice(0, 4),
|
||
grid2: STATIONS.slice(0, 2),
|
||
favs: STATIONS.slice(0, 4),
|
||
bars26: BAR_SEED.map((h) => h + 'px'),
|
||
navAX: balloonA.bubbleX,
|
||
navAW: balloonA.bubbleW,
|
||
navAItems: balloonA.items,
|
||
navBX: balloonB.bubbleX,
|
||
navBW: balloonB.bubbleW,
|
||
navBItems: balloonB.items,
|
||
navCX: balloonC.bubbleX,
|
||
navCW: balloonC.bubbleW,
|
||
navCItems: balloonC.items,
|
||
dEscuchar: tab === 0 ? 'block' : 'none',
|
||
dExplorar: tab === 1 ? 'block' : 'none',
|
||
dAlarmas: tab === 2 ? 'block' : 'none',
|
||
dAjustes: tab === 3 ? 'block' : 'none',
|
||
trayY: tray ? 'translateY(0)' : 'translateY(102%)',
|
||
scrimO: tray ? '1' : '0',
|
||
scrimPE: tray ? 'auto' : 'none',
|
||
openTray: () => this.setState({ tray: true }),
|
||
closeTray: () => this.setState({ tray: false }),
|
||
bars18: Array.from({ length: 18 }, (_, i) => (-(i * 97 % 900) / 1000).toFixed(2) + 's'),
|
||
bars30: Array.from({ length: 30 }, (_, i) => (-(i * 131 % 1000) / 1000).toFixed(2) + 's'),
|
||
favs5: STATIONS.slice(0, 5),
|
||
favs8: STATIONS.slice(0, 8),
|
||
generos6: ['Noticias', 'Pop', 'Rock', 'Clásica', 'Electrónica', 'Latina'],
|
||
grid9: STATIONS.slice(2, 11),
|
||
results: STATIONS.slice(0, 8),
|
||
results4: STATIONS.slice(4, 8),
|
||
near3: STATIONS.slice(0, 3),
|
||
alarms: [
|
||
{ hora: '07:30', dias: 'L–V', nombre: 'Radio Horizonte · Fade 30 s', art: A.aurora, color: '#F2F7FA', sw: '#21D4D9', swPos: 'flex-end' },
|
||
{ hora: '08:15', dias: 'S · D', nombre: 'Onda Clásica · Fade 60 s', art: A.nova, color: 'rgba(242,247,250,.45)', sw: 'rgba(255,255,255,.2)', swPos: 'flex-start' },
|
||
{ hora: '13:45', dias: 'L–V', nombre: 'Cadena SER · Informativo', art: A.pulse, color: '#F2F7FA', sw: '#21D4D9', swPos: 'flex-end' },
|
||
{ hora: '22:30', dias: 'Todos', nombre: 'Ibiza Global · Fade 90 s', art: A.cosmic, color: 'rgba(242,247,250,.45)', sw: 'rgba(255,255,255,.2)', swPos: 'flex-start' },
|
||
],
|
||
eqBands: [
|
||
{ hz: '60', top: '52%', db: '−1' }, { hz: '150', top: '34%', db: '+3' }, { hz: '400', top: '20%', db: '+5' },
|
||
{ hz: '1K', top: '30%', db: '+4' }, { hz: '2.5K', top: '46%', db: '0' }, { hz: '6K', top: '24%', db: '+4' }, { hz: '15K', top: '38%', db: '+2' },
|
||
],
|
||
skel6: Array.from({ length: 6 }, (_, i) => (-(i * 190) / 1000).toFixed(2) + 's'),
|
||
autoGrid8: STATIONS.slice(0, 8),
|
||
autoFolders: [
|
||
{ n: 'Cada mañana', c: '4 emisoras', ico: 'folder' },
|
||
{ n: 'Coche', c: '3 emisoras', ico: 'folder' },
|
||
{ n: 'Noche', c: '2 emisoras', ico: 'folder' },
|
||
{ n: 'Sin asignar', c: '1 emisora', ico: 'lock' },
|
||
],
|
||
auto4: STATIONS.slice(0, 4).map((s, i) => ({
|
||
...s,
|
||
bg: i === 0 ? 'rgba(33,212,217,.13)' : 'rgba(255,255,255,.045)',
|
||
bd: i === 0 ? 'rgba(33,212,217,.4)' : 'rgba(255,255,255,.07)',
|
||
fg: i === 0 ? '#21D4D9' : '#F2F7FA',
|
||
ico: i === 0 ? 'graphic_eq' : 'play_arrow',
|
||
icoColor: i === 0 ? '#21D4D9' : 'rgba(242,247,250,.5)',
|
||
})),
|
||
d1a: (foco === 'todo' || foco === 'actual') ? 'flex' : 'none',
|
||
d1b: (foco === 'todo' || foco === 'evolucion') ? 'flex' : 'none',
|
||
d1c: (foco === 'todo' || foco === 'reforma') ? 'flex' : 'none',
|
||
};
|
||
}
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|