111 lines
4.3 KiB
HTML
111 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>LARP - OASIS</title>
|
||
<link rel="stylesheet" href="larp.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Sección principal con botón -->
|
||
<section class="screen screen-1">
|
||
<div class="content">
|
||
<img src="../images/larp.png" alt="larp" class="logo-larp" />
|
||
<a href="https://en.wikipedia.org/wiki/Live_action_role-playing_game" class="btn" style="display:inline-block;margin-top:2rem;padding:1rem 2rem;font-size:1.5rem;">L.A.R.P</a>
|
||
<a href="forms.html" class="btn" style="display:inline-block;margin-top:2rem;padding:1rem 2rem;font-size:1.5rem;">START</a>
|
||
<a href="https://wiki.solarnethub.com/socialnet/roleplaying" class="btn" style="display:inline-block;margin-top:2rem;padding:1rem 2rem;font-size:1.5rem;">MORE..</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Sección de Casas -->
|
||
<section class="screen screen-2">
|
||
<div class="content">
|
||
<h2>THE HOUSES</h2>
|
||
<p>Select each house to view its description and essence.</p>
|
||
<div class="card-group">
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3>SolarIS</h3>
|
||
<p class="summary">Diplomacy, language, governance</p>
|
||
<div class="extra-info">
|
||
<p><strong>"The word makes us human. Violence, beasts."</strong> — Mediation, translation, community rules.</p>
|
||
<img src="../images/solaris_logo.jpg" alt="SolarIS" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3> ARRakis</h3>
|
||
<p class="summary">Engineering, infrastructure, backend</p>
|
||
<div class="extra-info">
|
||
<p><strong>"How long do you say it must be resolved?"</strong> — Coding, servers, system architecture.</p>
|
||
<img src="../images/arrakis_logo.jpg" alt="ARRakis" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3> TERRA.VErDE</h3>
|
||
<p class="summary">Ecology, sustainability, health</p>
|
||
<div class="extra-info">
|
||
<p><strong>"Love nature, the universe and being, because we are all one."</strong> — Renewable energy, eco-protocols.</p>
|
||
<img src="../images/terra_verde_logo.jpg" alt="TERRA.VErDE" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3>UNSYSTem</h3>
|
||
<p class="summary">Chaos, tactics, disruption</p>
|
||
<div class="extra-info">
|
||
<p><strong>"We do not make statements!"</strong> — Cryptography, tactical interventions.</p>
|
||
<img src="../images/unsistem_logo.jpg" alt="UNSYSTem" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3>DogmA</h3>
|
||
<p class="summary">Critical thinking, memory, strategy</p>
|
||
<div class="extra-info">
|
||
<p><strong>"The question is not when to do it, the question is how to do it."</strong> — Debate, memory, strategy and ideology.</p>
|
||
<img src="../images/dogma_logo.jpg" alt="DogmA" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3>HeliX</h3>
|
||
<p class="summary">Art, culture, celebration</p>
|
||
<div class="extra-info">
|
||
<p><strong>"If you do not smile, it’s not my revolution."</strong> — Memes, visual culture, expression.</p>
|
||
<img src="../images/helix_logo.jpg" alt="HeliX" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3>QuarK</h3>
|
||
<p class="summary">Security, continuity, defense</p>
|
||
<div class="extra-info">
|
||
<p><strong>"Without security, there is no freedom!"</strong> — Backups, security training, threat modeling.</p>
|
||
<img src="../images/quark_logo.jpg" alt="QuarK" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="toggleInfo(this)">
|
||
<h3>HERmanDAD</h3>
|
||
<p class="summary">Production, economy, coordination</p>
|
||
<div class="extra-info">
|
||
<p><strong>"Grow. Build. Expand!"</strong> — Infrastructure, barter, logistics, production cells.</p>
|
||
<img src="../images/hermandad_logo.jpg" alt="HERmanDAD" />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
function toggleInfo(card) {
|
||
card.classList.toggle("expanded");
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|