MEDUSYS/index.html at main · httpsalejandro/MEDUSYS · GitHub

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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MEDUSYS — Órganos y prótesis inteligentes | 2050</title>
  <meta name="description" content="Biotecnología entre lo biológico y lo sintético. Órganos y prótesis inteligentes con conectividad, funcionalidad y estética." />
  <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=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>

<div id="intro">
    <div class="intro-background"></div>
    <div class="logo-container">
        <img src="logo.png" alt="MEDUSYS" class="logo-pulse">
        <div class="pulse-glow"></div>
    </div>
</div>
<audio id="transitionSound" preload="auto">
    <source src="swish.wav" type="audio/wav">
</audio>

  <!-- Audio Ambiental -->
  <div class="audio-control">
    <button id="audioToggle" class="audio-btn" aria-label="Controlar audio ambiental">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 3.75v16.5m-4.5-13.5h9a2.25 2.25 0 0 1 0 4.5h-9a2.25 2.25 0 0 1 0-4.5Z"/>
      </svg>
    </button>
    <audio id="ambientAudio" loop>
      <source src="ambiente.wav" type="audio/mpeg">
    </audio>
  </div>

  <!-- Navegación Principal Neuronal -->
  <main class="neuron-main">
    <canvas id="neuronCanvas"></canvas>

    <!-- Nodos de Navegación -->
    <div class="neuron-node main-node" data-section="hero" style="--x:50%; --y:50%">
      <div class="node-core"></div>
      <div class="node-label">MEDUSYS</div>
      <div class="node-subtitle">Inicio</div>
    </div>

    <div class="neuron-node" data-section="contexto" style="--x:25%; --y:30%">
      <div class="node-core"></div>
      <div class="node-label">Contexto 2040</div>
      <div class="node-subtitle">Orígenes</div>
    </div>

    <div class="neuron-node" data-section="tecnologia" style="--x:75%; --y:30%">
      <div class="node-core"></div>
      <div class="node-label">Tecnología</div>
      <div class="node-subtitle">Innovación</div>
    </div>

    <div class="neuron-node" data-section="historias" style="--x:20%; --y:70%">
      <div class="node-core"></div>
      <div class="node-label">Historias</div>
      <div class="node-subtitle">Testimonios</div>
    </div>

    <div class="neuron-node" data-section="corazon" style="--x:50%; --y:80%">
      <div class="node-core"></div>
      <div class="node-label">Corazón 3D</div>
      <div class="node-subtitle">Interactivo</div>
    </div>

    <div class="neuron-node" data-section="scanner" style="--x:80%; --y:70%">
      <div class="node-core"></div>
      <div class="node-label">Scanner</div>
      <div class="node-subtitle">Compatibilidad</div>
    </div>

    <!-- Secciones de Contenido -->
    <div class="content-section active" id="hero-content">
      <div class="section-background"></div>
      <div class="content-wrapper">
        <div class="hero-text-container">
          <h1 class="hero-title">Tocar el cielo es posible</h1>
          <p class="hero-subtitle">Órganos y prótesis inteligentes entre lo biológico y lo sintético.</p>
          <div class="hero-actions">
            <button class="btn primary" data-node="tecnologia">Explorar Tecnología</button>
            <button class="btn ghost" data-node="historias">Ver Historias</button>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section" id="contexto-content">
      <div class="section-background"></div>
      <div class="content-wrapper">
        <h2>Contexto 2040</h2>
        <p class="section-intro">Corporación mexicana de biotecnología dedicada a crear órganos y prótesis inteligentes. Respuesta a una realidad post-2040, donde la vida exige nuevas formas de cuidado y reconstrucción.</p>

        <div class="timeline">
          <div class="timeline-item active" data-year="2040">
            <div class="timeline-marker"></div>
            <h3>2040 - Colapso Sanitario</h3>
            <p>Pérdida masiva de órganos tras la guerra biotecnológica</p>
          </div>
          <div class="timeline-item" data-year="2042">
            <div class="timeline-marker"></div>
            <h3>2042 - Necesidad Médica</h3>
            <p>Millones requieren reconstrucción orgánica inmediata</p>
          </div>
          <div class="timeline-item" data-year="2045">
            <div class="timeline-marker"></div>
            <h3>2045 - Fundación MEDUSYS</h3>
            <p>Nace la respuesta mexicana a la crisis global</p>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section" id="tecnologia-content">
      <div class="section-background"></div>
      <div class="content-wrapper">
        <h2>Tecnología Avanzada</h2>
        <p class="section-intro">Líderes en biotecnología y evolución</p>


        <div class="tech-grid">
          <div class="tech-item connectivity">
            <h3>Conectividad</h3>
            <p>Ecosistema de sensores, datos y alertas que se adaptan a cada usuario.</p>
          </div>
          <div class="tech-item functionality">
            <h3>Funcionalidad</h3>
            <p>Control de alta precisión con respuesta a impulsos neuronales.</p>
          </div>
          <div class="tech-item aesthetic">
            <h3>Estética</h3>
            <p>Diseño fluido que respira con el cuerpo y el movimiento.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section" id="historias-content">
      <div class="section-background"></div>
      <div class="content-wrapper">
        <h2>Historias de Vida</h2>

        <div class="stories-grid">
          <div class="story-card" data-person="valeria">
            <h3>Valeria Fanning — 19 años</h3>
            <p class="story-role">Bailarina</p>
            <blockquote>"Pensé que jamás volvería a danzar... pero MEDUSYS me devolvió mis alas."</blockquote>
            <p>Pierna biónica de alta sensibilidad, sincronizada con su sistema nervioso.</p>
          </div>
          <div class="story-card" data-person="guadalupe">
            <h3>Guadalupe del Rey — 33 años</h3>
            <p class="story-role">Cardióloga</p>
            <blockquote>"Vi morir a mis pacientes esperando un trasplante. Con MEDUSYS, eso cambió."</blockquote>
            <p>Órganos que se adaptan con el mismo ADN del portador.</p>
          </div>
          <div class="story-card" data-person="fermin">
            <h3>Fermín Gutierrez — 63 años</h3>
            <p class="story-role">Trabajador de Obra</p>
            <blockquote>"Perdí la posibilidad de solventar a mi familia, MEDUSYS me reconectó con la vida."</blockquote>
            <p>Brazo inteligente, adaptable y conectado, capaz de responder a impulsos neuronales.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section" id="corazon-content">
      <div class="section-background"></div>
      <div class="content-wrapper">
        <h2>Corazón Artificial Inteligente</h2>

        <div class="heart-section">
          <div class="heart-model-container">
            <div class="heart-3d">
              <div class="heart-part" data-part="camara-izquierda" data-info="ventriculo"></div>
              <div class="heart-part" data-part="tejido-externo" data-info="exterior"></div>
              <div class="heart-part" data-part="sistema-flujo" data-info="flujo"></div>
            </div>
            <div class="model-controls">
              <button class="control-btn" data-action="rotate">⟳ Rotar</button>
              <button class="control-btn" data-action="zoom-in">+ Zoom</button>
              <button class="control-btn" data-action="reset">↺ Reset</button>
            </div>
          </div>

          <div class="heart-info">
            <div class="info-panel active" data-info="general">
              <h3>Visión General</h3>
              <p>Corazón sintético con inteligencia adaptativa y biocompatibilidad total</p>
              <ul>
                <li>Mayor control y precisión</li>
                <li>Inteligencia Artificial integrada</li>
                <li>Dispersión automática de medicamentos</li>
                <li>Sistema de alertas de salud</li>
                <li>Iluminación dinámica según modo de uso</li>
              </ul>
            </div>
            <div class="info-panel" data-info="ventriculo">
              <h3>Cámara Izquierda</h3>
              <p>Sistema de bombeo principal con sensores de presión integrados</p>
            </div>
            <div class="info-panel" data-info="exterior">
              <h3>Tejido Externo</h3>
              <p>Material biocompatible que se integra perfectamente con el cuerpo</p>
            </div>
            <div class="info-panel" data-info="flujo">
              <h3>Sistema de Flujo</h3>
              <p>Control inteligente del flujo sanguíneo con ajuste automático</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section" id="scanner-content">
      <div class="section-background"></div>
      <div class="content-wrapper">
        <h2>Simulador de Compatibilidad</h2>
        <p class="section-intro">Escanea tu perfil biológico para encontrar la solución perfecta</p>

        <div class="scanner-container">
          <div class="body-outline">
            <div class="organ-marker" data-organ="heart" title="Corazón"></div>
            <div class="organ-marker" data-organ="arm" title="Brazo"></div>
            <div class="organ-marker" data-organ="leg" title="Pierna"></div>
            <div class="scan-progress"></div>
          </div>
          <div class="scanner-controls">
            <button class="btn primary" id="startScan">Iniciar Escaneo</button>
            <div class="scan-results" id="scanResults"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Botón de Regreso -->
    <button class="back-btn" id="backButton">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
        <path d="M19 12H5m0 0l6-6m-6 6l6 6"/>
      </svg>
      Volver a la red
    </button>

    <!-- Efecto Glitch -->
    <div class="glitch-overlay"></div>
  </main>

  <script src="app.js"></script>
</body>
</html>