mimug/pixel-faebits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine Pixel Landing Page with Tír na nÓg spatial architecture

Browse Source 
- 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>
This commit is contained in:
google-labs-jules[bot]
2026-04-11 17:44:06 +00:00
parent 822cd22dee
commit 80d96cff75
3 changed files with 269 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+63
View File
@@ -0,0 +1,63 @@
<!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 &rarr;</button>
<button class="door door-south" data-target="0,1">Down the Alleys &darr;</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">&larr; Back to the Gate</button>
<button class="door door-south" data-target="1,1">To the Portal &darr;</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">&uarr; Up to the Gate</button>
<button class="door door-east" data-target="1,1">To the Portal &rarr;</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">&uarr; Up to the Meadow</button>
<button class="door door-west" data-target="0,1">&larr; Back to the Alleys</button>
</div>
</section>
</div>
</div>
<script src="script.js"></script>
</body>
</html>