Hugging Face's logo

Spaces:
Javiai
/
radionicapp
Running

App Files Community
radionicapp
File size: 9,649 Bytes
4255d2e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
06bd355
 
4255d2e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
06bd355
 
 
 
 
 
 
 
 
 
 
 
d01b9eb
 
 
 
06bd355
 
 
 
4255d2e
 
 
 
 
 
 
 
d01b9eb
4255d2e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f747c64
4255d2e
 
 
 
 
 
 
06bd355
 
 
 
 
 
 
 
 
 
 
 
 
d01b9eb
 
 
 
06bd355
 
 
 
 
4255d2e
 
 
06bd355
 
4255d2e
06bd355
4255d2e
 
06bd355
 
 
 
 
 
 
 
 
 
4255d2e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
06bd355
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4255d2e
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!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>