| <!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> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div id="game-interface" class="screen"> |
| <div class="game-layout"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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"> |
| |
| </div> |
| <button class="btn btn--primary" id="continue-game">Continuar</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
