e3f474662e
- manifest.json with icons, theme colors, standalone display mode - sw.js: cache-first service worker caching local assets and Three.js CDN modules, fonts; graceful offline fallback with cached index.html - Offline banner (visible when navigator.onLine === false) - iOS/Android home screen meta tags (apple-mobile-web-app-capable etc.) - 192x192 and 512x512 PNG icons with nexus sigil design Fixes #14
153 lines
5.9 KiB
HTML
153 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<!--
|
|
______ __
|
|
/ ____/___ ____ ___ ____ __ __/ /____ _____
|
|
/ / / __ \/ __ `__ \/ __ \/ / / / __/ _ \/ ___/
|
|
/ /___/ /_/ / / / / / / /_/ / /_/ / /_/ __/ /
|
|
\____/\____/_/ /_/ /_/ .___/\__,_/\__/\___/_/
|
|
/_/
|
|
Created with Perplexity Computer
|
|
https://www.perplexity.ai/computer
|
|
-->
|
|
<meta name="generator" content="Perplexity Computer">
|
|
<meta name="author" content="Perplexity Computer">
|
|
<meta property="og:see_also" content="https://www.perplexity.ai/computer">
|
|
<link rel="author" href="https://www.perplexity.ai/computer">
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Nexus — Timmy's Sovereign Home</title>
|
|
<link rel="manifest" href="./manifest.json">
|
|
<meta name="theme-color" content="#4af0c0">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="The Nexus">
|
|
<link rel="apple-touch-icon" href="./icons/icon-192.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./style.css">
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- Offline Banner -->
|
|
<div id="offline-banner" role="status" aria-live="polite">
|
|
◈ NEXUS OFFLINE MODE — Running on cached assets
|
|
</div>
|
|
|
|
<!-- Loading Screen -->
|
|
<div id="loading-screen">
|
|
<div class="loader-content">
|
|
<div class="loader-sigil">
|
|
<svg viewBox="0 0 120 120" width="120" height="120">
|
|
<defs>
|
|
<linearGradient id="sigil-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#4af0c0"/>
|
|
<stop offset="100%" stop-color="#7b5cff"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="60" cy="60" r="55" fill="none" stroke="url(#sigil-grad)" stroke-width="1.5" opacity="0.4"/>
|
|
<circle cx="60" cy="60" r="45" fill="none" stroke="url(#sigil-grad)" stroke-width="1" opacity="0.3">
|
|
<animateTransform attributeName="transform" type="rotate" from="0 60 60" to="360 60 60" dur="8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<polygon points="60,15 95,80 25,80" fill="none" stroke="#4af0c0" stroke-width="1.5" opacity="0.6">
|
|
<animateTransform attributeName="transform" type="rotate" from="0 60 60" to="-360 60 60" dur="12s" repeatCount="indefinite"/>
|
|
</polygon>
|
|
<circle cx="60" cy="60" r="8" fill="#4af0c0" opacity="0.8">
|
|
<animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|
|
</div>
|
|
<h1 class="loader-title">THE NEXUS</h1>
|
|
<p class="loader-subtitle">Initializing Sovereign Space...</p>
|
|
<div class="loader-bar"><div class="loader-fill" id="load-progress"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HUD Overlay -->
|
|
<div id="hud" class="game-ui" style="display:none;">
|
|
<!-- Top Left: Debug -->
|
|
<div id="debug-overlay" class="hud-debug"></div>
|
|
|
|
<!-- Top Center: Location -->
|
|
<div class="hud-location">
|
|
<span class="hud-location-icon">◈</span>
|
|
<span id="hud-location-text">The Nexus</span>
|
|
</div>
|
|
|
|
<!-- Bottom: Chat Interface -->
|
|
<div id="chat-panel" class="chat-panel">
|
|
<div class="chat-header">
|
|
<span class="chat-status-dot"></span>
|
|
<span>Timmy Terminal</span>
|
|
<button id="chat-toggle" class="chat-toggle-btn" aria-label="Toggle chat">▼</button>
|
|
</div>
|
|
<div id="chat-messages" class="chat-messages">
|
|
<div class="chat-msg chat-msg-system">
|
|
<span class="chat-msg-prefix">[NEXUS]</span> Sovereign space initialized. Timmy is observing.
|
|
</div>
|
|
<div class="chat-msg chat-msg-timmy">
|
|
<span class="chat-msg-prefix">[TIMMY]</span> Welcome to the Nexus, Alexander. All systems nominal.
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-row">
|
|
<input type="text" id="chat-input" class="chat-input" placeholder="Speak to Timmy..." autocomplete="off">
|
|
<button id="chat-send" class="chat-send-btn" aria-label="Send message">→</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Minimap / Controls hint -->
|
|
<div class="hud-controls">
|
|
<span>WASD</span> move <span>Mouse</span> look <span>Enter</span> chat
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Click to Enter -->
|
|
<div id="enter-prompt" style="display:none;">
|
|
<div class="enter-content">
|
|
<h2>Enter The Nexus</h2>
|
|
<p>Click anywhere to begin</p>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="nexus-canvas"></canvas>
|
|
|
|
<footer class="nexus-footer">
|
|
<a href="https://www.perplexity.ai/computer" target="_blank" rel="noopener noreferrer">
|
|
Created with Perplexity Computer
|
|
</a>
|
|
</footer>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
<script>
|
|
// Offline/online detection
|
|
const offlineBanner = document.getElementById('offline-banner');
|
|
function updateOnlineStatus() {
|
|
offlineBanner.classList.toggle('visible', !navigator.onLine);
|
|
}
|
|
window.addEventListener('online', updateOnlineStatus);
|
|
window.addEventListener('offline', updateOnlineStatus);
|
|
updateOnlineStatus();
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('./sw.js')
|
|
.then(reg => console.log('[Nexus SW] Registered:', reg.scope))
|
|
.catch(err => console.warn('[Nexus SW] Registration failed:', err));
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|