modeli-mundi-3d/demo.html at master · bgruszka/modeli-mundi-3d · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Historical Universe Models - Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.8);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        h1 {
            text-align: center;
            color: #ffd700;
            font-size: 2.5em;
            margin-bottom: 30px;
        }
        .launch-btn {
            display: block;
            width: 300px;
            margin: 30px auto;
            padding: 15px 30px;
            background: linear-gradient(45deg, #ffd700, #ffed4e);
            color: #000;
            text-decoration: none;
            text-align: center;
            font-size: 1.2em;
            font-weight: bold;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }
        .launch-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
        }
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        .feature {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .feature h3 {
            color: #87ceeb;
            margin-bottom: 15px;
        }
        .models {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        .model {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .model h4 {
            color: #ffd700;
            margin-bottom: 10px;
        }
        .controls {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        .controls h3 {
            color: #87ceeb;
            margin-bottom: 15px;
        }
        .controls ul {
            list-style-type: none;
            padding: 0;
        }
        .controls li {
            margin: 10px 0;
            padding: 5px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .tech-stack {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        .tech-stack h3 {
            color: #87ceeb;
            margin-bottom: 15px;
        }
        .tech-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tech-item {
            background: linear-gradient(45deg, #1e3c72, #2a5298);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌌 Historical Models of the Universe</h1>
        <p style="text-align: center; font-size: 1.2em; margin-bottom: 30px;">
            An interactive 3D exploration of how humanity understood the cosmos throughout history
        </p>

        <a href="index.html" class="launch-btn">🚀 Launch Application</a>

        <div class="features">
            <div class="feature">
                <h3>🎮 Interactive 3D Navigation</h3>
                <p>Rotate, zoom, and pan around each cosmic model with intuitive mouse and touch controls. Experience the universe as our ancestors imagined it.</p>
            </div>
            <div class="feature">
                <h3>🌍 Realistic Planet Textures</h3>
                <p>Marvel at high-quality NASA imagery applied to all planets and moons. Each celestial body features authentic surface details and rotates realistically.</p>
            </div>
            <div class="feature">
                <h3>🪐 Saturn's Ring System</h3>
                <p>Witness Saturn's magnificent rings with multiple layers and realistic tilt. The ring system adds spectacular visual depth to the cosmic models.</p>
            </div>
            <div class="feature">
                <h3>✨ Enhanced Star Field</h3>
                <p>Explore under a canopy of 3,000+ stars with realistic colors and sizes. Blue giants, red dwarfs, and white stars create an immersive cosmic backdrop.</p>
            </div>
            <div class="feature">
                <h3>📚 Educational Content</h3>
                <p>Learn about each historical model with detailed descriptions and historical context. Understand the scientific revolution that transformed our worldview.</p>
            </div>
            <div class="feature">
                <h3>🎛️ Advanced Controls</h3>
                <p>Fine-tune lighting with ambient, sun, and rim light controls. Pause animations, apply lighting presets, and adjust brightness to see every detail of the planet textures.</p>
            </div>
            <div class="feature">
                <h3>📱 Responsive Design</h3>
                <p>Works seamlessly across desktop, tablet, and mobile devices. Explore the universe anywhere, anytime with smooth texture loading.</p>
            </div>
        </div>

        <h2 style="color: #ffd700; text-align: center;">Historical Models Included</h2>
        <div class="models">
            <div class="model">
                <h4>Aristotle's Model (384-322 BC)</h4>
                <p>Earth-centered universe with crystalline spheres carrying celestial bodies.</p>
            </div>
            <div class="model">
                <h4>Ptolemaic Model (150 AD)</h4>
                <p>Sophisticated geocentric system using epicycles to explain planetary motion.</p>
            </div>
            <div class="model">
                <h4>Copernican Model (1543)</h4>
                <p>Revolutionary heliocentric model with the Sun at the center.</p>
            </div>
            <div class="model">
                <h4>Galilean Model (1610)</h4>
                <p>Enhanced heliocentric model featuring Jupiter's four largest moons.</p>
            </div>
            <div class="model">
                <h4>Kepler's Model (1609)</h4>
                <p>Most accurate historical model with elliptical planetary orbits.</p>
            </div>
        </div>

        <div class="controls">
            <h3>🎮 How to Use</h3>
            <ul>
                <li><strong>Mouse:</strong> Click and drag to rotate the view</li>
                <li><strong>Mouse Wheel:</strong> Scroll to zoom in and out</li>
                <li><strong>Right-click + Drag:</strong> Pan the view</li>
                <li><strong>Touch Devices:</strong> Pinch to zoom, swipe to rotate</li>
                <li><strong>Model Buttons:</strong> Click to switch between different universe models</li>
                <li><strong>Lighting Controls:</strong> Adjust brightness and pause animations with the top-right panel</li>
                <li><strong>Visual Toggles:</strong> Hide/show orbit lines and geometric elements for cleaner viewing</li>
            </ul>
        </div>

        <div class="tech-stack">
            <h3>💻 Built With</h3>
            <div class="tech-list">
                <span class="tech-item">HTML5</span>
                <span class="tech-item">CSS3</span>
                <span class="tech-item">JavaScript ES6+</span>
                <span class="tech-item">Three.js</span>
                <span class="tech-item">WebGL</span>
                <span class="tech-item">Canvas API</span>
            </div>
        </div>

        <div style="text-align: center; margin-top: 40px;">
            <a href="index.html" class="launch-btn">🌟 Start Exploring</a>
            <p style="margin-top: 20px; opacity: 0.8;">
                Experience the evolution of human understanding about our place in the cosmos
            </p>
        </div>
    </div>
</body>
</html>