baue mir ein browser game was genau so ist wie das hier: https://www.kongregate.com/en/games/joao8991/computer-evolution
ea4d09b verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Computer Evolution - Idle Clicker Game</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: #0a0a0f; | |
| color: #e2e8f0; | |
| } | |
| .mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .computer-glow { | |
| box-shadow: 0 0 60px rgba(59, 130, 246, 0.3); | |
| animation: pulse-glow 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 60px rgba(59, 130, 246, 0.3); } | |
| 50% { box-shadow: 0 0 80px rgba(59, 130, 246, 0.5); } | |
| } | |
| .click-effect { | |
| animation: click-pulse 0.2s ease-out; | |
| } | |
| @keyframes click-pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(0.95); } | |
| 100% { transform: scale(1); } | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .floating-text { | |
| animation: float-up 1s ease-out forwards; | |
| pointer-events: none; | |
| } | |
| @keyframes float-up { | |
| 0% { opacity: 1; transform: translateY(0); } | |
| 100% { opacity: 0; transform: translateY(-30px); } | |
| } | |
| .glass-panel { | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| } | |
| .app-card { | |
| transition: all 0.2s; | |
| } | |
| .app-card:hover:not(.disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .app-card.disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .stat-bar { | |
| background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); | |
| } | |
| .money-glow { | |
| text-shadow: 0 0 20px rgba(34, 197, 94, 0.5); | |
| } | |
| .scroll-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scroll-hidden { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen overflow-x-hidden"> | |
| <!-- Header --> | |
| <header class="fixed top-0 w-full z-50 glass-panel border-b border-blue-500/20"> | |
| <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <i data-lucide="cpu" class="w-8 h-8 text-blue-500"></i> | |
| <div> | |
| <h1 class="font-bold text-xl tracking-tight">Computer Evolution</h1> | |
| <p class="text-xs text-gray-400">by joao8991</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button onclick="game.reset()" class="px-3 py-1.5 text-sm bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg border border-red-500/30 transition"> | |
| Reset Game | |
| </button> | |
| <button onclick="game.save()" class="px-3 py-1.5 text-sm bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 rounded-lg border border-blue-500/30 transition"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-8 px-4 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6"> | |
| <!-- Left Column: Computer & Stats --> | |
| <div class="lg:col-span-4 space-y-6"> | |
| <!-- Money Display --> | |
| <div class="glass-panel rounded-2xl p-6 text-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-blue-500/10 to-transparent"></div> | |
| <p class="text-sm text-gray-400 mb-1 relative z-10">Computing Power</p> | |
| <div class="text-4xl font-bold mono money-glow text-green-400 relative z-10" id="moneyDisplay">$0</div> | |
| <div class="text-sm text-gray-400 mt-2 relative z-10"> | |
| <span id="perSecond">$0</span>/sec | |
| </div> | |
| </div> | |
| <!-- Computer Visual --> | |
| <div class="glass-panel rounded-2xl p-8 flex flex-col items-center justify-center min-h-[300px] relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-blue-500/5 to-purple-500/5"></div> | |
| <!-- Evolution Stage Indicator --> | |
| <div class="absolute top-4 left-4 px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30" id="evolutionStage"> | |
| Stage 1: Vintage PC | |
| </div> | |
| <!-- Clickable Computer --> | |
| <button onclick="game.click()" id="computerBtn" class="relative z-10 w-48 h-48 rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 border-2 border-blue-500/30 computer-glow flex flex-col items-center justify-center group transition-all hover:scale-105 active:scale-95"> | |
| <i data-lucide="monitor" class="w-24 h-24 text-blue-400 group-hover:text-blue-300 transition-colors" id="computerIcon"></i> | |
| <div class="mt-4 text-xs text-gray-400 font-mono" id="osName">MS-DOS 1.0</div> | |
| </button> | |
| <p class="text-sm text-gray-400 mt-6 text-center relative z-10">Click to generate power</p> | |
| <!-- Evolution Progress --> | |
| <div class="w-full mt-6 relative z-10"> | |
| <div class="flex justify-between text-xs text-gray-400 mb-2"> | |
| <span>Evolution Progress</span> | |
| <span id="evolutionPercent">0%</span> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div id="evolutionBar" class="h-full bg-gradient-to-r from-blue-500 to-purple-500 progress-bar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Resources --> | |
| <div class="glass-panel rounded-2xl p-6 space-y-4"> | |
| <h3 class="font-bold text-lg flex items-center gap-2"> | |
| <i data-lucide="server" class="w-5 h-5 text-blue-500"></i> | |
| System Resources | |
| </h3> | |
| <!-- CPU --> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-400">CPU</span> | |
| <span class="mono text-blue-400" id="cpuText">1 MHz / 1 MHz</span> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div id="cpuBar" class="h-full stat-bar progress-bar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- RAM --> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-400">RAM</span> | |
| <span class="mono text-purple-400" id="ramText">64 KB / 64 KB</span> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div id="ramBar" class="h-full bg-gradient-to-r from-purple-500 to-pink-500 progress-bar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Storage --> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-400">Storage</span> | |
| <span class="mono text-orange-400" id="storageText">10 MB / 10 MB</span> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div id="storageBar" class="h-full bg-gradient-to-r from-orange-500 to-red-500 progress-bar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hardware Upgrades --> | |
| <div class="glass-panel rounded-2xl p-6"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center gap-2"> | |
| <i data-lucide="wrench" class="w-5 h-5 text-blue-500"></i> | |
| Hardware | |
| </h3> | |
| <div class="space-y-3" id="hardwareList"> | |
| <!-- Generated by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column: Running Apps --> | |
| <div class="lg:col-span-4 space-y-6"> | |
| <div class="glass-panel rounded-2xl p-6 h-full"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center gap-2"> | |
| <i data-lucide="layout-grid" class="w-5 h-5 text-green-500"></i> | |
| Running Applications | |
| <span class="ml-auto text-xs bg-gray-800 px-2 py-1 rounded-full" id="appCount">0/3</span> | |
| </h3> | |
| <div id="runningApps" class="space-y-3 max-h-[600px] overflow-y-auto scroll-hidden pr-2"> | |
| <div class="text-center text-gray-500 py-12"> | |
| <i data-lucide="app-window" class="w-12 h-12 mx-auto mb-3 opacity-50"></i> | |
| <p>No apps running</p> | |
| <p class="text-sm mt-2">Install apps from the store below</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: App Store & Evolution --> | |
| <div class="lg:col-span-4 space-y-6"> | |
| <!-- Evolution Button --> | |
| <div class="glass-panel rounded-2xl p-6 border-2 border-yellow-500/30 bg-yellow-500/5" id="evolutionPanel" style="display: none;"> | |
| <h3 class="font-bold text-lg mb-2 text-yellow-400 flex items-center gap-2"> | |
| <i data-lucide="sparkles" class="w-5 h-5"></i> | |
| System Evolution Available! | |
| </h3> | |
| <p class="text-sm text-gray-400 mb-4">Upgrade to <span class="text-white font-bold" id="nextEvolution">Windows 95</span></p> | |
| <button onclick="game.evolve()" class="w-full py-3 bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-500 hover:to-orange-500 rounded-xl font-bold text-white transition shadow-lg shadow-yellow-500/20"> | |
| Evolve System | |
| </button> | |
| </div> | |
| <!-- App Store --> | |
| <div class="glass-panel rounded-2xl p-6"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center gap-2"> | |
| <i data-lucide="shopping-cart" class="w-5 h-5 text-purple-500"></i> | |
| App Store | |
| </h3> | |
| <div class="space-y-3 max-h-[500px] overflow-y-auto scroll-hidden pr-2" id="appStore"> | |
| <!-- Generated by JS --> | |
| </div> | |
| </div> | |
| <!-- Investors (Prestige) --> | |
| <div class="glass-panel rounded-2xl p-6 border border-purple-500/30"> | |
| <h3 class="font-bold text-lg mb-2 flex items-center gap-2 text-purple-400"> | |
| <i data-lucide="trending-up" class="w-5 h-5"></i> | |
| Investors | |
| </h3> | |
| <p class="text-sm text-gray-400 mb-4"> | |
| Current Bonus: <span class="text-purple-400 font-bold" id="investorBonus">0%</span> | |
| </p> | |
| <div class="text-xs text-gray-500 mb-4"> | |
| Attract investors by reaching evolution milestones. Each investor gives +10% to all production. | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> | |
| <span class="text-sm">Investors:</span> | |
| <span class="text-xl font-bold text-purple-400 mono" id="investorCount">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Achievement Toast --> | |
| <div id="toast" class="fixed bottom-8 right-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4 rounded-xl shadow-2xl transform translate-x-full transition-transform duration-300 z-50 flex items-center gap-3"> | |
| <i data-lucide="trophy" class="w-6 h-6"></i> | |
| <div> | |
| <div class="font-bold">Achievement Unlocked!</div> | |
| <div class="text-sm opacity-90" id="toastText">Description</div> | |
| </div> | |
| </div> | |
| <script> | |
| lucide.createIcons(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |