Mind Codespaces — Solid Git Bridge

// loadingdecoding pod stream
Source
11.8 KB · main
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>Cosmic Clicker</title>
7  <style>
8    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;500&display=swap');
9    
10    * { margin: 0; padding: 0; box-sizing: border-box; }
11    
12    :root {
13      --neon-cyan: #00f7ff;
14      --neon-pink: #ff00aa;
15      --neon-purple: #a855f7;
16      --deep-space: #0a0a1a;
17      --star-glow: rgba(0, 247, 255, 0.4);
18    }
19    
20    body {
21      min-height: 100vh;
22      background: var(--deep-space);
23      font-family: 'Exo 2', sans-serif;
24      overflow: hidden;
25      display: flex;
26      flex-direction: column;
27      align-items: center;
28      justify-content: center;
29      color: white;
30    }
31    
32    /* Animated starfield */
33    .stars {
34      position: fixed;
35      top: 0; left: 0;
36      width: 100%; height: 100%;
37      pointer-events: none;
38      z-index: 0;
39    }
40    
41    .star {
42      position: absolute;
43      width: 2px; height: 2px;
44      background: white;
45      border-radius: 50%;
46      animation: twinkle var(--duration) ease-in-out infinite;
47      opacity: 0;
48    }
49    
50    @keyframes twinkle {
51      0%, 100% { opacity: 0; transform: scale(1); }
52      50% { opacity: 1; transform: scale(1.5); }
53    }
54    
55    /* Main container */
56    .game-container {
57      position: relative;
58      z-index: 1;
59      text-align: center;
60      padding: 2rem;
61    }
62    
63    h1 {
64      font-family: 'Orbitron', sans-serif;
65      font-size: 3rem;
66      font-weight: 900;
67      background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
68      -webkit-background-clip: text;
69      -webkit-text-fill-color: transparent;
70      background-clip: text;
71      text-shadow: 0 0 30px var(--star-glow);
72      margin-bottom: 0.5rem;
73      letter-spacing: 0.1em;
74    }
75    
76    .subtitle {
77      color: rgba(255,255,255,0.5);
78      font-size: 0.9rem;
79      margin-bottom: 2rem;
80      letter-spacing: 0.3em;
81      text-transform: uppercase;
82    }
83    
84    /* Score display */
85    .score-panel {
86      display: flex;
87      justify-content: center;
88      gap: 3rem;
89      margin-bottom: 2rem;
90    }
91    
92    .score-box {
93      background: rgba(255,255,255,0.03);
94      border: 1px solid rgba(255,255,255,0.1);
95      border-radius: 1rem;
96      padding: 1.5rem 2.5rem;
97      backdrop-filter: blur(10px);
98    }
99    
100    .score-label {
101      font-size: 0.75rem;
102      text-transform: uppercase;
103      letter-spacing: 0.2em;
104      color: var(--neon-cyan);
105      margin-bottom: 0.5rem;
106    }
107    
108    .score-value {
109      font-family: 'Orbitron', sans-serif;
110      font-size: 2.5rem;
111      font-weight: 700;
112      color: white;
113    }
114    
115    .score-value.energy { color: var(--neon-pink); }
116    
117    /* Clickable orb */
118    .orb-container {
119      position: relative;
120      margin: 2rem auto;
121    }
122    
123    .orb {
124      width: 200px;
125      height: 200px;
126      border-radius: 50%;
127      background: radial-gradient(circle at 30% 30%, var(--neon-cyan), var(--neon-purple), var(--deep-space));
128      cursor: pointer;
129      position: relative;
130      transition: transform 0.1s ease, box-shadow 0.3s ease;
131      box-shadow: 
132        0 0 60px var(--star-glow),
133        inset 0 0 40px rgba(255,255,255,0.2);
134    }
135    
136    .orb:hover {
137      transform: scale(1.05);
138      box-shadow: 
139        0 0 80px var(--neon-cyan),
140        0 0 120px var(--neon-purple),
141        inset 0 0 60px rgba(255,255,255,0.3);
142    }
143    
144    .orb:active {
145      transform: scale(0.95);
146    }
147    
148    .orb::after {
149      content: '⚡';
150      position: absolute;
151      top: 50%; left: 50%;
152      transform: translate(-50%, -50%);
153      font-size: 4rem;
154      filter: drop-shadow(0 0 10px white);
155    }
156    
157    /* Floating numbers */
158    .floater {
159      position: absolute;
160      font-family: 'Orbitron', sans-serif;
161      font-size: 1.5rem;
162      font-weight: 700;
163      color: var(--neon-cyan);
164      pointer-events: none;
165      animation: floatUp 1s ease-out forwards;
166      text-shadow: 0 0 10px var(--neon-cyan);
167    }
168    
169    @keyframes floatUp {
170      0% { opacity: 1; transform: translateY(0) scale(1); }
171      100% { opacity: 0; transform: translateY(-100px) scale(1.5); }
172    }
173    
174    /* Energy bar */
175    .energy-bar-container {
176      width: 300px;
177      margin: 2rem auto;
178    }
179    
180    .energy-bar-bg {
181      height: 20px;
182      background: rgba(255,255,255,0.1);
183      border-radius: 10px;
184      overflow: hidden;
185      border: 1px solid rgba(255,255,255,0.2);
186    }
187    
188    .energy-bar-fill {
189      height: 100%;
190      background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
191      border-radius: 10px;
192      transition: width 0.3s ease;
193      box-shadow: 0 0 20px var(--neon-pink);
194    }
195    
196    .energy-text {
197      margin-top: 0.5rem;
198      font-size: 0.8rem;
199      color: rgba(255,255,255,0.6);
200    }
201    
202    /* Upgrades */
203    .upgrades {
204      display: flex;
205      gap: 1rem;
206      justify-content: center;
207      flex-wrap: wrap;
208      margin-top: 2rem;
209    }
210    
211    .upgrade-btn {
212      background: rgba(255,255,255,0.05);
213      border: 1px solid rgba(255,255,255,0.15);
214      border-radius: 0.5rem;
215      padding: 1rem 1.5rem;
216      color: white;
217      font-family: 'Exo 2', sans-serif;
218      font-size: 0.85rem;
219      cursor: pointer;
220      transition: all 0.2s ease;
221      min-width: 140px;
222    }
223    
224    .upgrade-btn:hover:not(:disabled) {
225      background: rgba(0, 247, 255, 0.1);
226      border-color: var(--neon-cyan);
227      transform: translateY(-2px);
228    }
229    
230    .upgrade-btn:disabled {
231      opacity: 0.4;
232      cursor: not-allowed;
233    }
234    
235    .upgrade-name {
236      font-weight: 500;
237      margin-bottom: 0.3rem;
238    }
239    
240    .upgrade-cost {
241      color: var(--neon-pink);
242      font-size: 0.75rem;
243    }
244    
245    .upgrade-level {
246      color: var(--neon-cyan);
247      font-size: 0.7rem;
248      margin-top: 0.3rem;
249    }
250    
251    /* Particles */
252    .particle {
253      position: fixed;
254      pointer-events: none;
255      border-radius: 50%;
256      animation: particleFade 1s ease-out forwards;
257    }
258    
259    @keyframes particleFade {
260      0% { opacity: 1; transform: scale(1); }
261      100% { opacity: 0; transform: scale(0); }
262    }
263  </style>
264</head>
265<body>
266  <div class="stars" id="stars"></div>
267  
268  <div class="game-container">
269    <h1>COSMIC CLICKER</h1>
270    <p class="subtitle">Harvest the cosmic energy</p>
271    
272    <div class="score-panel">
273      <div class="score-box">
274        <div class="score-label">Cosmic Power</div>
275        <div class="score-value" id="score">0</div>
276      </div>
277      <div class="score-box">
278        <div class="score-label">Energy</div>
279        <div class="score-value energy" id="energy">0</div>
280      </div>
281    </div>
282    
283    <div class="orb-container">
284      <div class="orb" id="orb"></div>
285    </div>
286    
287    <div class="energy-bar-container">
288      <div class="energy-bar-bg">
289        <div class="energy-bar-fill" id="energyBar" style="width: 0%"></div>
290      </div>
291      <div class="energy-text">Auto-generation: <span id="autoRate">0</span>/sec</div>
292    </div>
293    
294    <div class="upgrades" id="upgrades"></div>
295  </div>
296  
297  <script>
298    // Game state
299    const state = {
300      power: 0,
301      energy: 0,
302      clickPower: 1,
303      autoRate: 0,
304      maxEnergy: 100,
305      energyRegen: 0.5,
306      upgrades: {
307        clicker: { name: 'Click Boost', cost: 10, level: 0, powerPerLevel: 1 },
308        generator: { name: 'Generator', cost: 50, level: 0, powerPerLevel: 2 },
309        capacitor: { name: 'Capacitor', cost: 200, level: 0, powerPerLevel: 5 },
310        reactor: { name: 'Reactor', cost: 1000, level: 0, powerPerLevel: 20 },
311        dyson: { name: 'Dyson Sphere', cost: 5000, level: 0, powerPerLevel: 100 }
312      }
313    };
314    
315    // DOM elements
316    const scoreEl = document.getElementById('score');
317    const energyEl = document.getElementById('energy');
318    const energyBarEl = document.getElementById('energyBar');
319    const autoRateEl = document.getElementById('autoRate');
320    const orbEl = document.getElementById('orb');
321    const upgradesEl = document.getElementById('upgrades');
322    const starsEl = document.getElementById('stars');
323    
324    // Create starfield
325    function createStars() {
326      for (let i = 0; i < 100; i++) {
327        const star = document.createElement('div');
328        star.className = 'star';
329        star.style.left = Math.random() * 100 + '%';
330        star.style.top = Math.random() * 100 + '%';
331        star.style.setProperty('--duration', (2 + Math.random() * 4) + 's');
332        star.style.animationDelay = Math.random() * 5 + 's';
333        starsEl.appendChild(star);
334      }
335    }
336    
337    // Update UI
338    function updateUI() {
339      scoreEl.textContent = Math.floor(state.power).toLocaleString();
340      energyEl.textContent = Math.floor(state.energy);
341      autoRateEl.textContent = state.autoRate;
342      energyBarEl.style.width = (state.energy / state.maxEnergy * 100) + '%';
343      renderUpgrades();
344    }
345    
346    // Click handler
347    function handleClick(e) {
348      state.power += state.clickPower;
349      state.energy = Math.min(state.energy + 5, state.maxEnergy);
350      
351      // Create floating number
352      const floater = document.createElement('div');
353      floater.className = 'floater';
354      floater.textContent = '+' + state.clickPower;
355      floater.style.left = (e.clientX - 20) + 'px';
356      floater.style.top = (e.clientY - 30) + 'px';
357      document.body.appendChild(floater);
358      setTimeout(() => floater.remove(), 1000);
359      
360      // Create particles
361      for (let i = 0; i < 5; i++) {
362        createParticle(e.clientX, e.clientY);
363      }
364      
365      updateUI();
366    }
367    
368    // Particle effect
369    function createParticle(x, y) {
370      const particle = document.createElement('div');
371      particle.className = 'particle';
372      const size = 4 + Math.random() * 8;
373      particle.style.width = size + 'px';
374      particle.style.height = size + 'px';
375      particle.style.left = x + 'px';
376      particle.style.top = y + 'px';
377      particle.style.background = Math.random() > 0.5 ? '#00f7ff' : '#ff00aa';
378      const angle = Math.random() * Math.PI * 2;
379      const velocity = 50 + Math.random() * 100;
380      particle.style.transform = `translate(${Math.cos(angle) * velocity}px, ${Math.sin(angle) * velocity}px)`;
381      document.body.appendChild(particle);
382      setTimeout(() => particle.remove(), 1000);
383    }
384    
385    // Render upgrades
386    function renderUpgrades() {
387      upgradesEl.innerHTML = '';
388      for (const [key, upg] of Object.entries(state.upgrades)) {
389        const btn = document.createElement('button');
390        btn.className = 'upgrade-btn';
391        btn.disabled = state.power < upg.cost;
392        btn.innerHTML = `
393          <div class="upgrade-name">${upg.name}</div>
394          <div class="upgrade-cost">⚡ ${upg.cost.toLocaleString()}</div>
395          <div class="upgrade-level">Level ${upg.level}</div>
396        `;
397        btn.onclick = () => buyUpgrade(key);
398        upgradesEl.appendChild(btn);
399      }
400    }
401    
402    // Buy upgrade
403    function buyUpgrade(key) {
404      const upg = state.upgrades[key];
405      if (state.power >= upg.cost) {
406        state.power -= upg.cost;
407        upg.level++;
408        upg.cost = Math.floor(upg.cost * 1.5);
409        
410        if (key === 'clicker') {
411          state.clickPower += upg.powerPerLevel;
412        } else {
413          state.autoRate += upg.powerPerLevel;
414          state.maxEnergy += 50;
415        }
416        
417        updateUI();
418      }
419    }
420    
421    // Game loop
422    function gameLoop() {
423      if (state.autoRate > 0) {
424        state.power += state.autoRate / 60;
425      }
426      
427      if (state.energy < state.maxEnergy) {
428        state.energy = Math.min(state.energy + state.energyRegen / 60, state.maxEnergy);
429      }
430      
431      updateUI();
432      requestAnimationFrame(gameLoop);
433    }
434    
435    // Initialize
436    orbEl.addEventListener('click', handleClick);
437    createStars();
438    gameLoop();
439  </script>
440</body>
441</html>