🐳 04/03 - 15:45 - now implement that you can prestige after you hit your first 10% of investors. it gives a slight boost, but if you have only 10% investors you get a smaller boost, but with 100% you
0d9858e verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Computer Evolution - Idle Game</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f3f4f6; | |
| } | |
| .mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .component-card { | |
| transition: all 0.2s ease; | |
| } | |
| .component-card:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .upgrade-btn { | |
| transition: all 0.2s; | |
| } | |
| .upgrade-btn:hover:not(:disabled) { | |
| transform: scale(1.05); | |
| } | |
| .upgrade-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .app-card { | |
| transition: all 0.2s; | |
| } | |
| .app-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| .money-animation { | |
| animation: floatUp 1s ease-out forwards; | |
| } | |
| @keyframes floatUp { | |
| 0% { opacity: 1; transform: translateY(0); } | |
| 100% { opacity: 0; transform: translateY(-20px); } | |
| } | |
| .pulse-green { | |
| animation: pulseGreen 2s infinite; | |
| } | |
| @keyframes pulseGreen { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-emerald-500 text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-4"> | |
| <div class="flex items-center gap-6 flex-wrap"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="wallet" class="w-5 h-5"></i> | |
| <span class="font-bold text-lg mono" id="balance-display">$0.00</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-emerald-100"> | |
| <i data-lucide="trending-up" class="w-4 h-4"></i> | |
| <span class="text-sm">On average <span class="font-semibold mono" id="income-display">$0.00</span> per second</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="flex items-center gap-2 text-emerald-100"> | |
| <i data-lucide="users" class="w-4 h-4"></i> | |
| <span class="text-sm">Investors: <span class="mono" id="investors-display">0.0%</span></span> | |
| </div> | |
| <div class="flex items-center gap-2 text-emerald-100 bg-emerald-600 bg-opacity-50 px-3 py-1 rounded"> | |
| <i data-lucide="sparkles" class="w-4 h-4"></i> | |
| <span class="text-sm">Boost: <span class="mono font-bold" id="prestige-display">1.00x</span></span> | |
| </div> | |
| <button onclick="game.toggleSettings()" class="bg-emerald-600 hover:bg-emerald-700 px-3 py-1 rounded text-sm font-medium transition flex items-center gap-2"> | |
| <i data-lucide="settings" class="w-4 h-4"></i> | |
| Settings | |
| </button> | |
| <button onclick="game.toggleSound()" class="bg-emerald-600 hover:bg-emerald-700 px-3 py-1 rounded text-sm font-medium transition flex items-center gap-2" id="sound-btn"> | |
| <i data-lucide="volume-2" class="w-4 h-4"></i> | |
| <span id="sound-text">Sound</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Left Column: Hardware --> | |
| <div class="space-y-4"> | |
| <!-- Hard Drive --> | |
| <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden"> | |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="hard-drive" class="w-5 h-5 text-gray-600"></i> | |
| <h3 class="font-bold text-gray-800">Hard Drive</h3> | |
| <button onclick="game.showInfo('hdd')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-lucide="info" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-gray-600 mb-1"> | |
| <span class="mono" id="hdd-usage-text">0MB free of 12MB</span> | |
| <span class="text-red-600 font-semibold" id="hdd-percent">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden"> | |
| <div id="hdd-bar" class="progress-bar bg-red-500 h-full rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <span class="text-blue-600 font-semibold text-sm">Quantity</span> | |
| <span class="mono font-bold" id="hdd-quantity">1</span> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <span class="mono text-sm text-gray-600" id="hdd-quantity-cost">2.50B$</span> | |
| <button onclick="game.upgrade('hdd', 'quantity')" id="btn-hdd-quantity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold"> | |
| Upgrade | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <span class="text-blue-600 font-semibold text-sm">Capacity</span> | |
| <span class="mono font-bold" id="hdd-capacity">12MB</span> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <span class="mono text-sm text-gray-600" id="hdd-capacity-cost">1.90K$</span> | |
| <button onclick="game.upgrade('hdd', 'capacity')" id="btn-hdd-capacity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold"> | |
| Upgrade | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Motherboard --> | |
| <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden"> | |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="cpu" class="w-5 h-5 text-gray-600"></i> | |
| <h3 class="font-bold text-gray-800">Motherboard</h3> | |
| <button onclick="game.showInfo('motherboard')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-lucide="info" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <span class="text-blue-600 font-semibold text-sm">Supported OS</span> | |
| <span class="font-bold text-gray-800" id="supported-os">Sixtem 2.0</span> | |
| </div> | |
| <div class="flex justify-between items-center py-2 mt-2"> | |
| <span class="mono text-sm text-gray-600" id="motherboard-cost">11.50K$</span> | |
| <button onclick="game.upgradeMotherboard()" id="btn-motherboard" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold"> | |
| Upgrade | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CPU --> | |
| <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden"> | |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="microchip" class="w-5 h-5 text-gray-600"></i> | |
| <h3 class="font-bold text-gray-800">CPU</h3> | |
| <button onclick="game.showInfo('cpu')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-lucide="info" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-gray-600 mb-1"> | |
| <span class="mono" id="cpu-usage-text">0MHz free of 38.70MHz</span> | |
| <span class="text-green-600 font-semibold" id="cpu-percent">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden"> | |
| <div id="cpu-bar" class="progress-bar bg-green-500 h-full rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <span class="text-blue-600 font-semibold text-sm">Cores</span> | |
| <span class="mono font-bold" id="cpu-cores">1</span> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <span class="mono text-sm text-gray-600" id="cpu-cores-cost">50.0M$</span> | |
| <button onclick="game.upgrade('cpu', 'cores')" id="btn-cpu-cores" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold"> | |
| Upgrade | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <span class="text-blue-600 font-semibold text-sm">Speed</span> | |
| <span class="mono font-bold" id="cpu-speed">38.70MHz</span> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <span class="mono text-sm text-gray-600" id="cpu-speed-cost">23.0K$</span> | |
| <button onclick="game.upgrade('cpu', 'speed')" id="btn-cpu-speed" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold"> | |
| Upgrade | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RAM --> | |
| <div class="component-card bg-white rounded-lg shadow border border-gray-200 overflow-hidden"> | |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <i data-lucide="memory-stick" class="w-5 h-5 text-gray-600"></i> | |
| <h3 class="font-bold text-gray-800">RAM</h3> | |
| <button onclick="game.showInfo('ram')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-lucide="info" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-gray-600 mb-1"> | |
| <span class="mono" id="ram-usage-text">0MB free of 31.30MB</span> | |
| <span class="text-green-600 font-semibold" id="ram-percent">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden"> | |
| <div id="ram-bar" class="progress-bar bg-green-500 h-full rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <span class="text-blue-600 font-semibold text-sm">Quantity</span> | |
| <span class="mono font-bold" id="ram-quantity">1</span> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-100"> | |
| <span class="mono text-sm text-gray-600" id="ram-quantity-cost">50.0M$</span> | |
| <button onclick="game.upgrade('ram', 'quantity')" id="btn-ram-quantity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold"> | |
| Upgrade | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <span class="text-blue-600 font-semibold text-sm">Capacity</span> | |
| <span class="mono font-bold" id="ram-capacity">31.30MB</span> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <span class="mono text-sm text-gray-600" id="ram-capacity-cost">23.0K$</span> | |
| <button onclick="game.upgrade('ram', 'capacity')" id="btn-ram-capacity" class="upgrade-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold"> | |
| Upgrade | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: OS & Apps --> | |
| <div class="space-y-4"> | |
| <!-- OS Info --> | |
| <div class="bg-emerald-400 rounded-lg shadow-lg p-6 text-white relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-300 rounded-full -mr-10 -mt-10 opacity-50"></div> | |
| <div class="relative z-10"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-16 h-16 bg-emerald-500 rounded-lg flex items-center justify-center shadow-inner"> | |
| <i data-lucide="shield" class="w-8 h-8 text-emerald-100"></i> | |
| </div> | |
| <div class="text-right"> | |
| <h2 class="text-2xl font-bold" id="os-name">Sixtem 2.0</h2> | |
| <p class="text-emerald-100 text-sm">Current Operating System</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mt-4 text-sm"> | |
| <div class="bg-emerald-500 bg-opacity-50 rounded p-2"> | |
| <span class="text-emerald-100 block text-xs">Per second:</span> | |
| <span class="font-bold mono text-lg" id="os-income">1.60$</span> | |
| </div> | |
| <div class="bg-emerald-500 bg-opacity-50 rounded p-2"> | |
| <span class="text-emerald-100 block text-xs">Storage used:</span> | |
| <span class="font-bold mono" id="os-storage">516kB</span> | |
| </div> | |
| <div class="bg-emerald-500 bg-opacity-50 rounded p-2"> | |
| <span class="text-emerald-100 block text-xs">CPU Speed:</span> | |
| <span class="font-bold mono" id="os-cpu">787.60kHz</span> | |
| </div> | |
| <div class="bg-emerald-500 bg-opacity-50 rounded p-2"> | |
| <span class="text-emerald-100 block text-xs">RAM used:</span> | |
| <span class="font-bold mono" id="os-ram">1.73MB</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Apps Section --> | |
| <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden"> | |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200"> | |
| <h3 class="font-bold text-gray-800 flex items-center gap-2"> | |
| <i data-lucide="layout-grid" class="w-5 h-5 text-gray-600"></i> | |
| Apps | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3" id="apps-grid"> | |
| <!-- Apps will be generated by JS --> | |
| </div> | |
| <button onclick="game.openAppStore()" class="w-full mt-4 bg-gray-100 hover:bg-gray-200 border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center gap-2 text-gray-600 transition hover:text-gray-800"> | |
| <i data-lucide="plus" class="w-6 h-6"></i> | |
| <span class="font-semibold text-sm">Install Apps</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Manual Click Area (Bonus) --> | |
| <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white text-center cursor-pointer active:scale-95 transition-transform" onclick="game.manualClick(event)"> | |
| <i data-lucide="mouse-pointer-2" class="w-8 h-8 mx-auto mb-2 pulse-green"></i> | |
| <h3 class="font-bold text-lg">Click to Code</h3> | |
| <p class="text-blue-100 text-sm">Generate extra money manually!</p> | |
| <p class="text-xs text-blue-200 mt-1">+<span id="click-value">$1.00</span> per click</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- App Store Modal --> | |
| <div id="app-store-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col"> | |
| <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-xl font-bold text-gray-800">App Store</h2> | |
| <button onclick="game.closeAppStore()" class="text-gray-400 hover:text-gray-600"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="p-6 overflow-y-auto flex-1" id="app-store-content"> | |
| <!-- App store items generated by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full"> | |
| <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-xl font-bold text-gray-800">Settings</h2> | |
| <button onclick="game.toggleSettings()" class="text-gray-400 hover:text-gray-600"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="p-6 space-y-4"> | |
| <!-- Prestige Section --> | |
| <div id="prestige-section" class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4 text-white mb-4"> | |
| <h3 class="font-bold text-lg mb-2 flex items-center gap-2"> | |
| <i data-lucide="sparkles" class="w-5 h-5"></i> | |
| Prestige System | |
| </h3> | |
| <p class="text-sm opacity-90 mb-3">Reset your progress for a permanent income boost based on your investor percentage!</p> | |
| <div class="text-xs mb-3 bg-white bg-opacity-20 rounded p-2"> | |
| <div>Current Multiplier: <span class="font-bold" id="current-prestige-multiplier">1.00x</span></div> | |
| <div>Total Prestiges: <span class="font-bold" id="total-prestiges">0</span></div> | |
| </div> | |
| <button onclick="if(game.canPrestige()) game.prestige()" id="prestige-btn" class="w-full bg-white text-purple-600 hover:bg-gray-100 py-3 rounded font-bold transition shadow-lg"> | |
| <div class="flex flex-col items-center"> | |
| <span class="font-bold">PRESTIGE LOCKED</span> | |
| <span class="text-xs opacity-75">Need 10% investors</span> | |
| </div> | |
| </button> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 space-y-2"> | |
| <button onclick="game.saveGame()" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded font-semibold transition"> | |
| Save Game | |
| </button> | |
| <button onclick="game.loadGame()" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded font-semibold transition"> | |
| Load Game | |
| </button> | |
| <button onclick="game.resetGame()" class="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded font-semibold transition"> | |
| Reset Game | |
| </button> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <p class="text-sm text-gray-600">Game auto-saves every 30 seconds</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Toast --> | |
| <div id="info-toast" class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 max-w-sm"> | |
| <div class="flex items-start gap-3"> | |
| <i data-lucide="info" class="w-5 h-5 text-blue-400 mt-0.5"></i> | |
| <div> | |
| <h4 class="font-semibold text-sm" id="info-title">Info</h4> | |
| <p class="text-sm text-gray-300 mt-1" id="info-text">Description here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| lucide.createIcons(); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |