https://acmevideogames.com/spaceforce/galaxy/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Galactic Atlas v1.0 STABLE - Local Stellar Neighborhood</title>
7    

7<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

7
8    

8<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

8
9    

9<script src="../sfxr-synth.js"></script>

9
10    <style>
11        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');
12        
13        * {
14            margin: 0;
15            padding: 0;
16            box-sizing: border-box;
17        }
18        
19        body {
20            font-family: 'Rajdhani', monospace;
21            background: #000;
22            color: #0ff;
23            overflow: hidden;
24        }
25        
26        #canvas-container {
27            width: 100vw;
28            height: 100vh;
29            position: relative;
30        }
31        
32        #hud {
33            position: absolute;
34            top: 20px;
35            left: 20px;
36            background: rgba(0, 20, 30, 0.95);
37            padding: 20px;
38            border: 2px solid #0ff;
39            border-radius: 5px;
40            font-size: 13px;
41            max-width: 350px;
42            z-index: 100;
43            box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
44        }
45        
46        #hud h1 {
47            font-family: 'Orbitron', monospace;
48            font-size: 20px;
49            font-weight: 900;
50            margin-bottom: 10px;
51            color: #0ff;
52            text-shadow: 0 0 10px #0ff;
53            letter-spacing: 2px;
54        }
55        
56        #hud .version {
57            display: inline-block;
58            background: rgba(0, 255, 0, 0.2);
59            border: 1px solid #0f0;
60            color: #0f0;
61            padding: 2px 8px;
62            font-size: 10px;
63            border-radius: 3px;
64            margin-left: 10px;
65            font-weight: 700;
66        }
67        
68        #hud .stat {
69            margin: 5px 0;
70        }
71        
72        #star-info {
73            position: absolute;
74            top: 20px;
75            right: 20px;
76            background: rgba(0, 0, 0, 0.9);
77            padding: 15px;
78            border: 1px solid #f80;
79            font-size: 11px;
80            max-width: 250px;
81            display: none;
82            z-index: 100;
83        }
84        
85        #star-info h2 {
86            color: #f80;
87            font-size: 14px;
88            margin-bottom: 8px;
89        }
90        
91        #controls {
92            position: absolute;
93            bottom: 20px;
94            left: 20px;
95            background: rgba(0, 0, 0, 0.8);
96            padding: 15px;
97            border: 1px solid #0f0;
98            font-size: 11px;
99            z-index: 100;
100        }
101        
102        #controls button {
103            background: rgba(0, 255, 255, 0.2);
104            color: #0ff;
105            border: 2px solid #0ff;
106            padding: 10px 15px;
107            margin: 5px;
108            cursor: pointer;
109            font-family: 'Orbitron', monospace;
110            font-size: 11px;
111            font-weight: 700;
112            border-radius: 3px;
113            transition: all 0.2s;
114            letter-spacing: 1px;
115        }
116        
117        #controls button:hover {
118            background: rgba(255, 255, 0, 0.2);
119            border-color: #ff0;
120            color: #ff0;
121            box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
122        }
123        
124        #controls button.active {
125            background: rgba(255, 255, 0, 0.3);
126            border-color: #ff0;
127            color: #ff0;
128        }
129        
130        .loading {
131            position: absolute;
132            top: 50%;
133            left: 50%;
134            transform: translate(-50%, -50%);
135            font-size: 20px;
136            color: #0ff;
137            z-index: 1000;
138        }
139    </style>
140</head>
141<body>
142    <div id="canvas-container"></div>
143    
144    <div id="hud">
145        <h1>⭐ GALACTIC ATLAS <span class="version">v1.0 STABLE</span></h1>
146        <div class="stat">Stars: <span id="star-count">0</span></div>
147        <div class="stat">Range: <span id="range">100</span> ly</div>
148        <div class="stat">Camera: <span id="camera-pos">0, 0, 0</span></div>
149        <div class="stat">FPS: <span id="fps">0</span></div>
150        <div class="stat" style="margin-top: 10px; color: #888;">
151            Mouse: Rotate | Scroll: Zoom<br>
152            Click star for details
153        </div>
154    </div>
155    
156    <div id="star-info">
157        <h2 id="star-name">Star Name</h2>
158        <div id="star-details"></div>
159    </div>
160    
161    <div id="controls">
162        <div><strong>FILTERS:</strong></div>
163        <button id="btn-all" class="active">All Stars</button>
164        <button id="btn-nearby">Nearest 50</button>
165        <button id="btn-habitable">Habitable Zone</button>
166        <button id="btn-exoplanets">Has Exoplanets</button>
167        <br>
168        <div style="margin-top: 10px;"><strong>VIEW:</strong></div>
169        <button id="btn-wireframe">🔲 Wireframe Grid</button>
170        <button id="btn-reset">Reset Camera</button>
171        <button id="btn-sun">Focus: Sol</button>
172        <button id="btn-alpha">Focus: α Centauri</button>
173        <button id="btn-zeta" style="background: rgba(255, 221, 0, 0.15); border-color: #fdd; color: #fdd;">Focus: ζ Reticuli</button>
174    </div>
175    
176    <div class="loading" id="loading">INITIALIZING STELLAR DATABASE...</div>
177    
178    

178<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

178
179    

179<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

179
180    
181    

181<script src="stars.js"></script>

181
182    

182<script src="galaxy.js"></script>

182
183</body>
184</html>