Files
the-nexus/index.html
Alexander Whitestone c5391b4488
Some checks failed
CI / validate (pull_request) Failing after 21s
feat: beacon system — click to place glowing markers in 3D world
- Click anywhere on canvas to place a cyan glowing beacon at depth 15
- Beacons pulse and rotate with animated glow sphere + orbiting ring
- Each beacon has a PointLight for environment illumination
- Right-click canvas to clear all beacons
- Max 10 beacons (oldest removed automatically)
- HUD shows active beacon count with glow styling

Fixes #138

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 00:04:43 -04:00

50 lines
2.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>Timmy's Nexus</title>
<meta name="description" content="A sovereign 3D world">
<meta property="og:title" content="Timmy's Nexus">
<meta property="og:description" content="A sovereign 3D world">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Timmy's Nexus">
<meta name="twitter:description" content="A sovereign 3D world">
<meta name="twitter:image" content="https://example.com/og-image.png">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="style.css">
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.183.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.183.0/examples/jsm/"
}
}
</script>
</head>
<body>
<!-- Top Right: Audio Toggle -->
<div id="audio-control" class="hud-controls" style="position: absolute; top: 8px; right: 8px;">
<button id="audio-toggle" class="chat-toggle-btn" aria-label="Toggle ambient sound" style="background-color: var(--color-primary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
🔊
</button>
<button id="debug-toggle" class="chat-toggle-btn" aria-label="Toggle debug mode" style="background-color: var(--color-secondary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
🔍
</button>
<audio id="ambient-sound" src="ambient.mp3" loop></audio>
</div>
<!-- Beacon HUD -->
<div id="beacon-hud" class="hud-controls" style="position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); pointer-events: none;">
<span id="beacon-count" class="beacon-count-label"></span>
</div>
<div id="beacon-hint" class="hud-controls" style="position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); pointer-events: none; opacity: 0.35; font-size: 10px; color: var(--color-text-muted);">
click to place beacon &nbsp;·&nbsp; right-click to clear
</div>
<script type="module" src="app.js"></script>
</body>
</html>