google-labs-jules[bot]
80d96cff75
- Implement Doors and Alleys spatial navigation system - Add Tír na nÓg pixel-art aesthetic and smooth transitions - Support keyboard (WASD/Arrows) and mouse-based navigation - Restructure HTML into a navigable 2D grid of rooms Co-authored-by: micmug <185775013+micmug@users.noreply.github.com>
64 lines
2.5 KiB
HTML
64 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>faebits | Tír na nÓg</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="viewport">
|
|
<div id="world">
|
|
<!-- Room (0,0): The Gate -->
|
|
<section id="room-0-0" class="room active">
|
|
<div class="content">
|
|
<h1>Tír na nÓg</h1>
|
|
<p>Welcome to the Land of Eternal Youth.</p>
|
|
</div>
|
|
<div class="doors">
|
|
<button class="door door-east" data-target="1,0">To the Meadow →</button>
|
|
<button class="door door-south" data-target="0,1">Down the Alleys ↓</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Room (1,0): The Meadow -->
|
|
<section id="room-1-0" class="room">
|
|
<div class="content">
|
|
<h2>The Meadow</h2>
|
|
<p>Where pixels bloom and legends grow.</p>
|
|
</div>
|
|
<div class="doors">
|
|
<button class="door door-west" data-target="0,0">← Back to the Gate</button>
|
|
<button class="door door-south" data-target="1,1">To the Portal ↓</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Room (0,1): The Alleys -->
|
|
<section id="room-0-1" class="room">
|
|
<div class="content">
|
|
<h2>The Alleys</h2>
|
|
<p>Navigating the narrow paths of creation.</p>
|
|
</div>
|
|
<div class="doors">
|
|
<button class="door door-north" data-target="0,0">↑ Up to the Gate</button>
|
|
<button class="door door-east" data-target="1,1">To the Portal →</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Room (1,1): The Portal -->
|
|
<section id="room-1-1" class="room">
|
|
<div class="content">
|
|
<h2>The Portal</h2>
|
|
<p>Step through to join the faebits.</p>
|
|
</div>
|
|
<div class="doors">
|
|
<button class="door door-north" data-target="1,0">↑ Up to the Meadow</button>
|
|
<button class="door door-west" data-target="0,1">← Back to the Alleys</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|