File size: 13,798 Bytes
aaffe69 | 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 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 | <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resonancia Rioplatense - Simulador de Vida</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="Un simulador de vida revolucionario ambientado en la zona norte de Buenos Aires">
</head>
<body>
<!-- Landing Page -->
<div id="landing-page" class="screen active">
<div class="intro-container">
<div class="resonance-visual">
<div class="wave wave1"></div>
<div class="wave wave2"></div>
<div class="wave wave3"></div>
</div>
<h1 class="game-title">Resonancia Rioplatense</h1>
<p class="game-subtitle">Cada decisión genera ondas que transforman tu futuro</p>
<div class="intro-text">
<p>En la zona norte de Buenos Aires, donde la innovación tech se encuentra con la cultura indie, cada elección que tomás crea ondas de resonancia que se propagan en el tiempo.</p>
<p>¿Estás listo para descubrir cómo tus decisiones moldean tu destino?</p>
</div>
<button class="btn btn--primary btn--lg" id="start-game">Comenzar Experiencia</button>
</div>
</div>
<!-- Character Creation -->
<div id="character-creation" class="screen">
<div class="container">
<h2>Creá tu Perfil</h2>
<p>Definí tu trasfondo tech y preferencias culturales en la zona norte de Buenos Aires</p>
<div class="creation-form">
<div class="form-group">
<label class="form-label">Nombre</label>
<input type="text" class="form-control" id="player-name" placeholder="Tu nombre">
</div>
<div class="form-group">
<label class="form-label">Especialización Tech</label>
<select class="form-control" id="tech-background">
<option value="frontend">Frontend Developer - React/Vue specialist</option>
<option value="backend">Backend Developer - Node.js/Python expert</option>
<option value="fullstack">Full Stack Developer - Versatilidad total</option>
<option value="product">Product Manager - Strategy & growth</option>
<option value="design">UX/UI Designer - User experience focus</option>
<option value="data">Data Scientist - AI & analytics</option>
</select>
</div>
<div class="form-group">
<label class="form-label">¿Qué te mueve más en la cultura rioplatense?</label>
<div class="preference-grid">
<label class="preference-item">
<input type="radio" name="cultural-preference" value="music">
<span>Música indie (Mi Amigo Invencible, El Mató)</span>
</label>
<label class="preference-item">
<input type="radio" name="cultural-preference" value="art">
<span>Arte digital y nuevos medios</span>
</label>
<label class="preference-item">
<input type="radio" name="cultural-preference" value="literature">
<span>Literatura contemporánea</span>
</label>
<label class="preference-item">
<input type="radio" name="cultural-preference" value="mixed">
<span>Un mix de todo</span>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Tu approach social</label>
<select class="form-control" id="social-style">
<option value="networking">Super networker - Conocés a todo el mundo</option>
<option value="selective">Selectivo - Círculo íntimo de confianza</option>
<option value="adaptable">Adaptable - Según el contexto</option>
<option value="introvert">Introvertido - Más observador que protagonista</option>
</select>
</div>
<button class="btn btn--primary btn--lg btn--full-width" id="create-character">Comenzar Aventura</button>
</div>
</div>
</div>
<!-- Game Interface -->
<div id="game-interface" class="screen">
<div class="game-layout">
<!-- Stats Panel -->
<div class="stats-panel">
<div class="player-info">
<h3 id="player-display-name">Jugador</h3>
<p id="player-role">Desarrollador</p>
</div>
<div class="stats-container">
<div class="stat-item">
<label>Carrera</label>
<div class="stat-bar">
<div class="stat-fill" id="carrera-fill"></div>
<span class="stat-value" id="carrera-value">50</span>
</div>
</div>
<div class="stat-item">
<label>Cultura</label>
<div class="stat-bar">
<div class="stat-fill" id="cultura-fill"></div>
<span class="stat-value" id="cultura-value">30</span>
</div>
</div>
<div class="stat-item">
<label>Social</label>
<div class="stat-bar">
<div class="stat-fill" id="social-fill"></div>
<span class="stat-value" id="social-value">40</span>
</div>
</div>
<div class="stat-item">
<label>Bienestar</label>
<div class="stat-bar">
<div class="stat-fill" id="bienestar-fill"></div>
<span class="stat-value" id="bienestar-value">60</span>
</div>
</div>
</div>
<div class="resonance-indicator">
<h4>Ondas de Resonancia</h4>
<div class="resonance-waves" id="resonance-display">
<div class="resonance-wave active"></div>
<div class="resonance-wave"></div>
<div class="resonance-wave"></div>
</div>
<p class="resonance-text">Tus decisiones están creando ondas...</p>
</div>
</div>
<!-- Main Game Area -->
<div class="game-content">
<div class="location-header">
<h2 id="current-location">Vicente López</h2>
<p id="location-description">Hub tech moderno con startups y coworking spaces</p>
</div>
<div class="narrative-section">
<div class="story-text" id="story-content">
<p>Llegás a tu primer día en la nueva startup en Vicente López. El coworking space está lleno de energía, pantallas con código y el aroma de café de especialidad. Tu decisión de mudarte a la zona norte ya está generando las primeras ondas de resonancia...</p>
</div>
</div>
<div class="decisions-container" id="decisions-container">
<div class="decision-prompt">
<p>Sofía, la frontend lead, se acerca durante el coffee break. Te comenta sobre un proyecto React que está armando y menciona que buscan alguien para el equipo.</p>
</div>
<div class="decisions-list">
<button class="decision-btn" data-decision="collaborate">
<span class="decision-text">"Me copa la propuesta, ¿cuándo arrancamos?"</span>
<span class="decision-impact">+Carrera +Social</span>
</button>
<button class="decision-btn" data-decision="cautious">
<span class="decision-text">"Suena interesante, ¿me contás más detalles?"</span>
<span class="decision-impact">+Bienestar</span>
</button>
<button class="decision-btn" data-decision="independent">
<span class="decision-text">"Estoy enfocado en mi proyecto actual, pero gracias"</span>
<span class="decision-impact">+Carrera -Social</span>
</button>
</div>
</div>
<div class="npc-panel">
<h4>Personas Importantes</h4>
<div class="npc-list">
<div class="npc-item" data-npc="sofia">
<div class="npc-avatar">S</div>
<div class="npc-info">
<span class="npc-name">Sofía</span>
<span class="npc-role">Frontend Developer</span>
<div class="relationship-bar">
<div class="relationship-fill" style="width: 50%"></div>
</div>
</div>
</div>
<div class="npc-item" data-npc="mateo">
<div class="npc-avatar">M</div>
<div class="npc-info">
<span class="npc-name">Mateo</span>
<span class="npc-role">Product Manager</span>
<div class="relationship-bar">
<div class="relationship-fill" style="width: 40%"></div>
</div>
</div>
</div>
<div class="npc-item" data-npc="luna">
<div class="npc-avatar">L</div>
<div class="npc-info">
<span class="npc-name">Luna</span>
<span class="npc-role">Digital Artist</span>
<div class="relationship-bar">
<div class="relationship-fill" style="width: 30%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Event Panel -->
<div class="events-panel">
<h4>Próximos Eventos</h4>
<div class="events-list" id="events-list">
<div class="event-item available">
<h5>North Valley Meetup</h5>
<p>Networking tech en Vicente López</p>
<span class="event-date">Viernes 18:30</span>
<button class="btn btn--sm btn--secondary event-join">Asistir</button>
</div>
<div class="event-item locked">
<h5>Innovation Tech Week</h5>
<p>Semana tech más importante de BA</p>
<span class="event-requirement">Requiere Carrera: 40</span>
</div>
<div class="event-item available">
<h5>Showcase Indie</h5>
<p>Show en venue de San Isidro</p>
<span class="event-date">Sábado 21:00</span>
<button class="btn btn--sm btn--secondary event-join">Asistir</button>
</div>
</div>
</div>
</div>
</div>
<!-- Resonance Visualization Modal -->
<div id="resonance-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Ondas de Resonancia</h3>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<div class="resonance-visualization">
<canvas id="resonance-canvas" width="400" height="300"></canvas>
</div>
<div class="resonance-explanation">
<p>Tu decisión ha generado ondas que se propagan en el tiempo. Observá cómo pueden afectar eventos futuros de maneras inesperadas.</p>
</div>
</div>
</div>
</div>
<!-- Event Result Modal -->
<div id="event-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="event-title">Resultado del Evento</h3>
</div>
<div class="modal-body">
<div id="event-result-content">
<!-- Event results will be populated here -->
</div>
<button class="btn btn--primary" id="continue-game">Continuar</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html> |