Hugging Face's logo

Spaces:
Javiai
/
radionicapp
Running

App Files Community
radionicapp / index.html
Javier Villarroel
feat: la aurora sustituye a la nebulosa en el cielo
f747c64
Raw History Blame Contribute Delete
9.65 kB
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Radiónica</title>
<meta name="description" content="Carga tus imágenes con tu intención.">
<meta name="color-scheme" content="dark">
<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=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/componentes/cielo.css">
<link rel="stylesheet" href="css/componentes/umbral.css">
<link rel="stylesheet" href="css/componentes/carta.css?v=circulos-fluidos">
<link rel="stylesheet" href="css/componentes/simbolos.css?v=circulos-fluidos">
<link rel="stylesheet" href="css/componentes/controles.css">
</head>
<body>
<!-- Símbolos de las energías. Dibujos propios, un solo sistema de trazo.
Para cambiar un símbolo se edita aquí; el color lo pone el CSS. -->
<!-- El trazo, el grosor y el color los pone el CSS (se heredan a través de <use>).
Por eso aquí no hay ni un color escrito. -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="simbolo-limpiar" viewBox="0 0 44 44">
<circle cx="22" cy="22" r="16.6"/>
<path d="M10.4 28.6c5.3-6.1 8.7-9.2 11.6-9.2 2.4 0 3.8 2.8 6 2.8 1.7 0 3.2-1.4 4.9-3.9"/>
<circle cx="15" cy="14.6" r="1.4" fill="currentColor" stroke="none" opacity=".5"/>
<circle cx="29.6" cy="13.2" r="1" fill="currentColor" stroke="none" opacity=".35"/>
</symbol>
<symbol id="simbolo-proteger" viewBox="0 0 44 44">
<circle cx="22" cy="22" r="16.6"/>
<path d="M22 11.4c4.6 1.6 7.4 2.2 7.4 2.2s.6 9.4-2.2 13.4c-1.9 2.7-5.2 4.6-5.2 4.6s-3.3-1.9-5.2-4.6c-2.8-4-2.2-13.4-2.2-13.4s2.8-.6 7.4-2.2z"/>
</symbol>
<symbol id="simbolo-calmar" viewBox="0 0 44 44">
<circle cx="22" cy="22" r="16.6"/>
<path d="M8.8 19.2c2.6 0 2.6 2 5.3 2s2.6-2 5.3-2 2.6 2 5.3 2 2.6-2 5.3-2 2.6 2 5.2 2"/>
<path d="M11.6 26.4c2.3 0 2.3 1.8 4.6 1.8s2.3-1.8 4.6-1.8 2.3 1.8 4.6 1.8 2.3-1.8 4.6-1.8" opacity=".45"/>
</symbol>
<symbol id="icono-imagen" viewBox="0 0 24 24">
<rect x="3.5" y="4.5" width="17" height="15" rx="2"/>
<circle cx="8.5" cy="9" r="1.4"/>
<path d="m4 17 5.1-5 3.6 3.2 2.2-2 5.5 4.8"/>
</symbol>
<symbol id="icono-girar" viewBox="0 0 24 24">
<path d="M7.2 8.2A7.2 7.2 0 1 1 5.8 14"/>
<path d="M7.2 4.4v3.8H3.4"/>
</symbol>
<symbol id="icono-ampliar" viewBox="0 0 24 24">
<path d="M8.8 4.5H4.5v4.3M15.2 4.5h4.3v4.3M19.5 15.2v4.3h-4.3M4.5 15.2v4.3h4.3"/>
</symbol>
<symbol id="icono-comparar" viewBox="0 0 24 24">
<rect x="3.2" y="4.5" width="7.6" height="15" rx="1.6"/>
<rect x="13.2" y="4.5" width="7.6" height="15" rx="1.6"/>
</symbol>
<symbol id="icono-intencion" viewBox="0 0 24 24">
<path d="m5.2 18.8 3.7-.8L19 7.9a2.1 2.1 0 0 0-3-3L5.9 15z"/>
<path d="m14.5 6.4 3.1 3.1M5.2 18.8l.8-3.8"/>
</symbol>
</svg>
<div class="app" id="app" data-pantalla="umbral" data-fase="eligiendo">
<!-- El cielo no se va: queda detrás de la carta -->
<div class="cielo" aria-hidden="true">
<span class="cielo__capa cielo__capa--lejana" id="estrellas-lejanas"></span>
<span class="cielo__capa cielo__capa--cercana" id="estrellas-cercanas"></span>
<span class="cielo__capa cielo__capa--destellos" id="estrellas-destello"></span>
<span class="cielo__horizonte"></span>
</div>
<!-- ── Umbral ──────────────────────────────────────────────────────── -->
<section class="umbral" id="umbral">
<h1 class="umbral__frase entra-2">Vamos a cargar tus imágenes<br>con tu intención.</h1>
<p class="umbral__apunte entra-2">
Elige una imagen, elige qué quieres darle, y quédate un momento con ello.
</p>
<button class="accion accion--umbral entra-3" id="entrar" type="button">Seguir</button>
</section>
<!-- ── Taller ──────────────────────────────────────────────────────── -->
<main class="taller" id="taller" hidden>
<div class="carta entra">
<section class="escenario" id="escenario" aria-label="Tu imagen">
<span class="anillo" id="anillo-a" hidden></span>
<span class="anillo anillo--tarde" id="anillo-b" hidden></span>
<div class="escenario__lienzo">
<div class="pila" id="pila" hidden>
<img class="escenario__imagen pila__antes" id="imagen-antes" alt="">
<img class="escenario__imagen pila__despues" id="imagen-despues" alt="" aria-hidden="true">
<span class="pila__frente" id="frente"></span>
<span class="pila__velo-magia" id="velo-magia" aria-hidden="true"></span>
</div>
<div class="escenario__hueco" id="hueco">
<span>Aquí va tu imagen</span>
<button class="enlace" type="button" data-abrir-archivo>Elegir del ordenador</button>
</div>
</div>
<div class="herramientas-imagen" id="herramientas-imagen">
<button class="icono icono--herramienta" id="abrir-herramientas" type="button"
aria-label="Cambiar imagen"
aria-expanded="false" aria-haspopup="true"
aria-controls="menu-imagen">
<svg aria-hidden="true"><use href="#icono-imagen"></use></svg>
</button>
<button class="icono icono--herramienta" id="girar-imagen" type="button" aria-label="Girar vista">
<svg aria-hidden="true"><use href="#icono-girar"></use></svg>
</button>
<button class="icono icono--herramienta" id="ver-grande" type="button" aria-label="Ver imagen grande">
<svg aria-hidden="true"><use href="#icono-ampliar"></use></svg>
</button>
<button class="icono icono--herramienta" id="comparar-imagenes" type="button"
aria-label="Comparar antes y después" aria-pressed="false" disabled>
<svg aria-hidden="true"><use href="#icono-comparar"></use></svg>
</button>
<div class="menu-imagen" id="menu-imagen" hidden>
<button class="menu-imagen__accion" type="button" data-abrir-archivo>
Elegir imagen
</button>
<span class="menu-imagen__titulo">O elige una de prueba</span>
<div class="miniaturas" id="miniaturas"></div>
</div>
</div>
<span class="escenario__sello entra" id="sello" hidden></span>
</section>
<section class="panel" aria-label="Pasos">
<div class="panel__paso paso">
<span class="paso__titulo"><span class="paso__numero">1</span>Elige qué quieres darle</span>
<div class="energias energias--proceso" id="energias" data-disponible="no">
<button class="energia energia--intencion" id="abrir-intencion" type="button"
aria-label="Añadir intención" aria-pressed="false">
<span class="energia__circulo energia__circulo--intencion">
<svg aria-hidden="true"><use href="#icono-intencion"></use></svg>
</span>
<span class="energia__nombre">Intención</span>
</button>
</div>
</div>
<div class="panel__cierre">
<p class="panel__nota" id="nota"></p>
<button class="accion" id="aplicar" type="button" disabled>Aplicar</button>
<div class="panel__grupo" id="despues" hidden>
<button class="accion" id="guardar" type="button">Guardar imagen</button>
<button class="accion accion--secundaria" id="otra-vez" type="button">Hacer otra</button>
</div>
</div>
</section>
</div>
</main>
<input type="file" id="archivo" accept="image/*" hidden>
<dialog class="visor" id="visor" aria-labelledby="visor-titulo">
<div class="visor__cabecera">
<span id="visor-titulo">Tu imagen</span>
<button class="icono icono--claro" id="cerrar-visor" type="button" aria-label="Cerrar imagen ampliada">×</button>
</div>
<img class="visor__imagen" id="imagen-visor" alt="Imagen ampliada">
</dialog>
<dialog class="modal-intencion" id="modal-intencion" aria-labelledby="titulo-intencion">
<div class="modal-intencion__cabecera">
<div>
<span class="modal-intencion__sobrelinea">Tu intención</span>
<h2 id="titulo-intencion">¿Qué quieres acompañar?</h2>
</div>
<button class="icono" id="cerrar-intencion" type="button" aria-label="Cerrar intención">×</button>
</div>
<p class="modal-intencion__apunte">Escríbelo con tus palabras. Si no quieres añadir nada, puedes dejarlo vacío.</p>
<label class="solo-lectores" for="intencion">Tu intención</label>
<textarea class="campo campo--intencion" id="intencion" rows="7"
placeholder="Escríbelo aquí…" autocomplete="off"></textarea>
<div class="modal-intencion__acciones">
<button class="accion accion--secundaria" id="cancelar-intencion" type="button">Cerrar</button>
<button class="accion" id="guardar-intencion" type="button">Guardar intención</button>
</div>
</dialog>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>