Neu: Clicker Game
This commit is contained in:
Akamaru
BIN
clicker/icon.png
Normal file
BIN
clicker/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
263
clicker/index.html
Normal file
263
clicker/index.html
Normal file
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Clicker Game - PonyWave Tools</title>
|
||||
<meta property="og:title" content="Clicker Game | PonyWave Tools">
|
||||
<meta property="og:description" content="Ein einfaches Clicker-Spiel mit Upgrades und Achievements">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://tools.ponywave.de/clicker">
|
||||
<meta property="og:image" content="https://tools.ponywave.de/clicker/icon.png">
|
||||
<link rel="icon" href="icon.png">
|
||||
|
||||
<!-- Umami Tracking -->
|
||||
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="clicker"></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>🎮 Clicker Game</h1>
|
||||
|
||||
<nav>
|
||||
<button class="tab active" onclick="switchTab('game')">Spiel</button>
|
||||
<button class="tab" onclick="switchTab('stats')">Statistiken</button>
|
||||
<button class="tab" onclick="switchTab('upgrades')">Upgrades</button>
|
||||
<button class="tab" onclick="switchTab('achievements')">Achievements</button>
|
||||
<button class="tab" onclick="switchTab('settings')">Einstellungen</button>
|
||||
</nav>
|
||||
|
||||
<!-- Game Tab -->
|
||||
<div class="tab-content active" id="game">
|
||||
<div id="score-container">
|
||||
<div id="score">0</div>
|
||||
</div>
|
||||
<button class="button" onclick="clickScore()" id="clickButton">KLICKEN</button>
|
||||
|
||||
<div class="card" onclick="buyClickPower()" id="clickPowerCard">
|
||||
<strong>Klick-Power erhöhen (+<span id="clickPowerValue">1</span>)</strong><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="clickPowerCost">10</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="clickPowerProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyIdle()" id="idleCard">
|
||||
<strong>Idle-Power erhöhen (+<span id="idleValue">1</span>/s)</strong><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="idleCost">20</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="idleProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyAutoClicker()" id="autoClickerCard">
|
||||
<strong>Auto-Klicker (<span id="autoClickerCount">0</span>)</strong><br>
|
||||
<span style="color: var(--label-color)" id="autoClickerDesc">Klickt automatisch alle 5s</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="autoClickerCost">100</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="autoClickerProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button prestige" id="prestigeBtn" onclick="prestige()" style="display:none;">
|
||||
Prestige (Zurücksetzen für +<span id="prestigeBonus">1</span>x Multiplikator)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="stats">
|
||||
<div class="card">
|
||||
<div class="stats-line"><strong>Gesamte Klicks:</strong> <span id="totalClicks">0</span></div>
|
||||
<div class="stats-line"><strong>Klick-Power:</strong> <span id="clickPowerStat">1</span></div>
|
||||
<div class="stats-line"><strong>Idle-Power:</strong> <span id="idleStat">0/s</span></div>
|
||||
<div class="stats-line"><strong>Auto-Klicker:</strong> <span id="autoClickerStat">0 (0/s)</span></div>
|
||||
<div class="stats-line"><strong>Prestige Level:</strong> <span id="prestigeLevel">0</span></div>
|
||||
<div class="stats-line"><strong>Prestige Bonus:</strong> <span id="prestigeBonusStat">1x</span></div>
|
||||
<div class="stats-line"><strong>Spielzeit:</strong> <span id="timePlayed">0s</span></div>
|
||||
<div class="stats-line"><strong>Gesamtpunktzahl:</strong> <span id="totalScore">0</span></div>
|
||||
<div class="stats-line"><strong>Punkterate:</strong> <span id="scoreRate">0/s</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="upgrades">
|
||||
<div class="card" onclick="buyDoubleClick()" id="doubleClickCard">
|
||||
<strong>Doppelte Klick-Power</strong><br>
|
||||
<span style="color: var(--label-color)">Verdoppelt deine Klick-Power</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="doubleClickCost">500</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="doubleClickProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyIdleMultiplier()" id="idleMultiplierCard">
|
||||
<strong>Idle-Multiplikator</strong><br>
|
||||
<span style="color: var(--label-color)">Macht Idle-Generierung 2x effektiver</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="idleMultiplierCost">1000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="idleMultiplierProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyClickMultiplier()" id="clickMultiplierCard">
|
||||
<strong>Klick-Multiplikator</strong><br>
|
||||
<span style="color: var(--label-color)">Macht alle Klicks 1,5x effektiver</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="clickMultiplierCost">2000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="clickMultiplierProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyFastAutoClicker()" id="fastAutoClickerCard">
|
||||
<strong>Schnelle Auto-Clicker</strong><br>
|
||||
<span style="color: var(--label-color)">Auto-Clicker klicken alle 3s statt 5s</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="fastAutoClickerCost">5000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="fastAutoClickerProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyAutoClickerBoost()" id="autoClickerBoostCard">
|
||||
<strong>Auto-Clicker Boost</strong><br>
|
||||
<span style="color: var(--label-color)">Auto-Clicker sind 2x stärker</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="autoClickerBoostCost">10000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="autoClickerBoostProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyMegaClick()" id="megaClickCard">
|
||||
<strong>Mega-Klick</strong><br>
|
||||
<span style="color: var(--label-color)">Klicks sind 3x stärker</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="megaClickCost">15000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="megaClickProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyHyperIdle()" id="hyperIdleCard">
|
||||
<strong>Hyper Idle</strong><br>
|
||||
<span style="color: var(--label-color)">Idle-Power ist 3x stärker</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="hyperIdleCost">20000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="hyperIdleProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyPrestigeBoost()" id="prestigeBoostCard">
|
||||
<strong>Prestige-Boost</strong><br>
|
||||
<span style="color: var(--label-color)">Prestige gibt doppelten Bonus</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="prestigeBoostCost">25000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="prestigeBoostProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buySuperMultiplier()" id="superMultiplierCard">
|
||||
<strong>Super-Multiplikator</strong><br>
|
||||
<span style="color: var(--label-color)">Alle Einnahmen +50%</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="superMultiplierCost">30000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="superMultiplierProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyTimeBonus()" id="timeBonusCard">
|
||||
<strong>Zeit-Bonus</strong><br>
|
||||
<span style="color: var(--label-color)">+5% zu allem pro Stunde Spielzeit</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="timeBonusCost">35000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="timeBonusProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyGoldenClick()" id="goldenClickCard">
|
||||
<strong>Golden Click</strong><br>
|
||||
<span style="color: var(--label-color)">10% Chance auf kritischen Klick (10x)</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="goldenClickCost">40000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="goldenClickProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyComboSystem()" id="comboSystemCard">
|
||||
<strong>Combo-System</strong><br>
|
||||
<span style="color: var(--label-color)">Schnelle Klicks geben +10% Bonus</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="comboSystemCost">50000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="comboSystemProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="buyUltraPower()" id="ultraPowerCard">
|
||||
<strong>Ultra-Power</strong><br>
|
||||
<span style="color: var(--label-color)">Alle Multiplikatoren +50%</span><br>
|
||||
<span style="color: var(--label-color)">Kosten: <span id="ultraPowerCost">75000</span></span>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="ultraPowerProgress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="achievements">
|
||||
<div id="achievementsList"></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="settings">
|
||||
<div class="toggle" onclick="toggleNotifications()">
|
||||
<span>Benachrichtigungen</span>
|
||||
<span id="notificationStatus">AN</span>
|
||||
</div>
|
||||
<button class="button" onclick="openShareModal()" style="margin-top: 20px;">Erfolge teilen 🎉</button>
|
||||
<button class="button" onclick="resetGame()" style="background: var(--danger); margin-top: 20px;">Spiel zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<div id="notifications"></div>
|
||||
<div id="shareModal" class="modal">
|
||||
<div class="modal-overlay" onclick="closeShareModal()"></div>
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeShareModal()">×</button>
|
||||
<h2 style="color: var(--secondary-color); margin-bottom: 20px;">🎉 Erfolge teilen</h2>
|
||||
|
||||
<div class="share-variants">
|
||||
<button class="share-variant-btn" onclick="selectShareVariant(1)">Variante 1</button>
|
||||
<button class="share-variant-btn" onclick="selectShareVariant(2)">Variante 2</button>
|
||||
<button class="share-variant-btn" onclick="selectShareVariant(3)">Variante 3</button>
|
||||
</div>
|
||||
|
||||
<textarea id="shareText" class="share-textarea"></textarea>
|
||||
|
||||
<div class="share-buttons">
|
||||
<button class="button" onclick="copyShareText()">📋 Text kopieren</button>
|
||||
</div>
|
||||
|
||||
<div class="social-share">
|
||||
<p style="margin-bottom: 10px; color: var(--label-color);">Oder direkt teilen:</p>
|
||||
<div class="social-buttons">
|
||||
<button class="social-btn twitter" onclick="shareToSocial('twitter')">
|
||||
<span style="font-size: 1.2em;">𝕏</span> X
|
||||
</button>
|
||||
<button class="social-btn whatsapp" onclick="shareToSocial('whatsapp')">
|
||||
📱 WhatsApp
|
||||
</button>
|
||||
<button class="social-btn telegram" onclick="shareToSocial('telegram')">
|
||||
✈️ Telegram
|
||||
</button>
|
||||
<button class="social-btn facebook" onclick="shareToSocial('facebook')">
|
||||
👍 Facebook
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="copyFeedback" class="copy-feedback">✓ In Zwischenablage kopiert!</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://tools.ponywave.de/">Zurück zur Startseite</a> |
|
||||
© <span id="currentYear"></span> Akamaru | Made with <span class="heart">❤️</span> by Claude
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
914
clicker/script.js
Normal file
914
clicker/script.js
Normal file
@@ -0,0 +1,914 @@
|
||||
// Jahr aktualisieren
|
||||
document.getElementById('currentYear').textContent = new Date().getFullYear();
|
||||
|
||||
// Game state
|
||||
let score = 0;
|
||||
let totalScore = 0;
|
||||
let clickPower = 1;
|
||||
let idlePower = 0;
|
||||
let autoClickers = 0;
|
||||
let clickPowerCost = 10;
|
||||
let idleCost = 20;
|
||||
let autoClickerCost = 100;
|
||||
let totalClicks = 0;
|
||||
let prestigeLevel = 0;
|
||||
let notificationsOn = true;
|
||||
let secondsPlayed = 0;
|
||||
let lastUpdate = Date.now();
|
||||
|
||||
// Upgrades
|
||||
let doubleClick = false;
|
||||
let idleMultiplier = false;
|
||||
let clickMultiplier = false;
|
||||
let doubleClickCost = 500;
|
||||
let idleMultiplierCost = 1000;
|
||||
let clickMultiplierCost = 2000;
|
||||
|
||||
// Neue Upgrades
|
||||
let fastAutoClicker = false;
|
||||
let autoClickerBoost = false;
|
||||
let megaClick = false;
|
||||
let hyperIdle = false;
|
||||
let superMultiplier = false;
|
||||
let prestigeBoost = false;
|
||||
let goldenClick = false;
|
||||
let comboSystem = false;
|
||||
let timeBonus = false;
|
||||
let ultraPower = false;
|
||||
|
||||
let fastAutoClickerCost = 5000;
|
||||
let autoClickerBoostCost = 10000;
|
||||
let megaClickCost = 15000;
|
||||
let hyperIdleCost = 20000;
|
||||
let superMultiplierCost = 30000;
|
||||
let prestigeBoostCost = 25000;
|
||||
let goldenClickCost = 40000;
|
||||
let comboSystemCost = 50000;
|
||||
let timeBonusCost = 35000;
|
||||
let ultraPowerCost = 75000;
|
||||
|
||||
// Spezial-Feature Variablen
|
||||
let lastClickTime = 0;
|
||||
let comboCount = 0;
|
||||
let startTime = Date.now();
|
||||
|
||||
// Achievements
|
||||
const achievements = [
|
||||
{ id: 'first_click', name: 'Erster Klick', description: 'Mache deinen ersten Klick', earned: false, check: () => totalClicks >= 1 },
|
||||
{ id: 'first_upgrade', name: 'Erstes Upgrade', description: 'Kaufe dein erstes Upgrade', earned: false, check: () => clickPower > 1 || idlePower > 0 },
|
||||
{ id: '100_clicks', name: 'Jahrhundert', description: 'Erreiche 100 Klicks', earned: false, check: () => totalClicks >= 100 },
|
||||
{ id: '1000_score', name: 'Tausender', description: 'Erreiche 1.000 Punkte', earned: false, check: () => totalScore >= 1000 },
|
||||
{ id: 'first_prestige', name: 'Aufstieg', description: 'Führe dein erstes Prestige durch', earned: false, check: () => prestigeLevel >= 1 },
|
||||
{ id: 'auto_clicker', name: 'Automatisierung', description: 'Kaufe deinen ersten Auto-Klicker', earned: false, check: () => autoClickers > 0 },
|
||||
{ id: 'idle_master', name: 'Idle-Meister', description: 'Erreiche 100 Idle-Power', earned: false, check: () => idlePower >= 100 },
|
||||
{ id: 'click_master', name: 'Klick-Meister', description: 'Erreiche 100 Klick-Power', earned: false, check: () => clickPower >= 100 },
|
||||
{ id: 'prestige_5', name: 'Prestige-Profi', description: 'Erreiche Prestige Level 5', earned: false, check: () => prestigeLevel >= 5 },
|
||||
{ id: 'all_upgrades', name: 'Voll aufgerüstet', description: 'Kaufe alle Basis-Upgrades', earned: false, check: () => doubleClick && idleMultiplier && clickMultiplier },
|
||||
|
||||
// Höhere Meilensteine
|
||||
{ id: '10k_score', name: 'Zehntausend', description: 'Erreiche 10.000 Punkte', earned: false, check: () => totalScore >= 10000 },
|
||||
{ id: '100k_score', name: 'Hunderttausend', description: 'Erreiche 100.000 Punkte', earned: false, check: () => totalScore >= 100000 },
|
||||
{ id: '1m_score', name: 'Millionär', description: 'Erreiche 1.000.000 Punkte', earned: false, check: () => totalScore >= 1000000 },
|
||||
{ id: '1k_clicks', name: 'Tausend Klicks', description: 'Erreiche 1.000 Klicks', earned: false, check: () => totalClicks >= 1000 },
|
||||
{ id: '10k_clicks', name: 'Zehntausend Klicks', description: 'Erreiche 10.000 Klicks', earned: false, check: () => totalClicks >= 10000 },
|
||||
{ id: '100k_clicks', name: 'Hunderttausend Klicks', description: 'Erreiche 100.000 Klicks', earned: false, check: () => totalClicks >= 100000 },
|
||||
{ id: '1000_click_power', name: 'Power-Gigant Klick', description: 'Erreiche 1.000 Klick-Power', earned: false, check: () => clickPower >= 1000 },
|
||||
{ id: '1000_idle_power', name: 'Power-Gigant Idle', description: 'Erreiche 1.000 Idle-Power', earned: false, check: () => idlePower >= 1000 },
|
||||
|
||||
// Zeit & Geduld
|
||||
{ id: '1h_played', name: 'Ausdauer', description: 'Spiele 1 Stunde lang', earned: false, check: () => secondsPlayed >= 3600 },
|
||||
{ id: '10h_played', name: 'Hingabe', description: 'Spiele 10 Stunden lang', earned: false, check: () => secondsPlayed >= 36000 },
|
||||
{ id: '100h_played', name: 'Legende', description: 'Spiele 100 Stunden lang', earned: false, check: () => secondsPlayed >= 360000 },
|
||||
|
||||
// Herausforderungen (werden manuell freigeschaltet)
|
||||
{ id: 'fast_clicker', name: 'Schnellschütze', description: 'Klicke 100 Mal in 60 Sekunden', earned: false, check: () => false },
|
||||
{ id: 'minimalist', name: 'Minimalist', description: 'Erreiche 10.000 Punkte ohne Auto-Klicker', earned: false, check: () => false },
|
||||
{ id: 'speed_runner', name: 'Speed Runner', description: 'Erreiche 1.000 Punkte in 5 Minuten', earned: false, check: () => false },
|
||||
|
||||
// Prestige & Sammler
|
||||
{ id: 'prestige_10', name: 'Prestige-Experte', description: 'Erreiche Prestige Level 10', earned: false, check: () => prestigeLevel >= 10 },
|
||||
{ id: 'prestige_20', name: 'Prestige-Meister', description: 'Erreiche Prestige Level 20', earned: false, check: () => prestigeLevel >= 20 },
|
||||
{ id: '10_auto_clickers', name: 'Auto-Armee', description: 'Besitze 10 Auto-Klicker', earned: false, check: () => autoClickers >= 10 },
|
||||
{ id: 'all_upgrades_extended', name: 'Vollständig aufgerüstet', description: 'Kaufe alle Upgrades', earned: false, check: () => doubleClick && idleMultiplier && clickMultiplier && fastAutoClicker && autoClickerBoost && megaClick && hyperIdle && superMultiplier && prestigeBoost && goldenClick && comboSystem && timeBonus && ultraPower }
|
||||
];
|
||||
|
||||
// DOM elements
|
||||
const scoreEl = document.getElementById('score');
|
||||
const clickButton = document.getElementById('clickButton');
|
||||
|
||||
function updateUI() {
|
||||
// Update main display
|
||||
scoreEl.textContent = formatNumber(score);
|
||||
document.getElementById('clickPowerValue').textContent = doubleClick ? 2 : 1;
|
||||
document.getElementById('idleValue').textContent = idleMultiplier ? 2 : 1;
|
||||
document.getElementById('clickPowerCost').textContent = formatNumber(clickPowerCost);
|
||||
document.getElementById('idleCost').textContent = formatNumber(idleCost);
|
||||
document.getElementById('autoClickerCost').textContent = formatNumber(autoClickerCost);
|
||||
document.getElementById('autoClickerCount').textContent = autoClickers;
|
||||
document.getElementById('autoClickerDesc').textContent = `Klickt ${(autoClickers * (doubleClick ? 2 : 1) * (clickMultiplier ? 1.5 : 1)).toFixed(1)} Mal alle 5s`;
|
||||
|
||||
// Update stats tab
|
||||
document.getElementById('totalClicks').textContent = formatNumber(totalClicks);
|
||||
document.getElementById('clickPowerStat').textContent = formatNumber(clickPower * (doubleClick ? 2 : 1) * (clickMultiplier ? 1.5 : 1));
|
||||
document.getElementById('idleStat').textContent = formatNumber(idlePower * (idleMultiplier ? 2 : 1) * (1 + prestigeLevel * 0.5)) + '/s';
|
||||
document.getElementById('autoClickerStat').textContent = autoClickers + ' (' + ((autoClickers * (doubleClick ? 2 : 1) * (clickMultiplier ? 1.5 : 1)) / 5).toFixed(1) + '/s)';
|
||||
document.getElementById('prestigeLevel').textContent = prestigeLevel;
|
||||
document.getElementById('prestigeBonusStat').textContent = (1 + prestigeLevel * 0.5).toFixed(1) + 'x';
|
||||
document.getElementById('timePlayed').textContent = formatTime(secondsPlayed);
|
||||
document.getElementById('totalScore').textContent = formatNumber(totalScore);
|
||||
document.getElementById('scoreRate').textContent = formatNumber((idlePower * (idleMultiplier ? 2 : 1) * (1 + prestigeLevel * 0.5)) + ((autoClickers * (doubleClick ? 2 : 1) * (clickMultiplier ? 1.5 : 1)) / 5)) + '/s';
|
||||
|
||||
// Update upgrades tab
|
||||
document.getElementById('doubleClickCost').textContent = formatNumber(doubleClickCost);
|
||||
document.getElementById('idleMultiplierCost').textContent = formatNumber(idleMultiplierCost);
|
||||
document.getElementById('clickMultiplierCost').textContent = formatNumber(clickMultiplierCost);
|
||||
|
||||
// Neue Upgrades
|
||||
document.getElementById('fastAutoClickerCost').textContent = formatNumber(fastAutoClickerCost);
|
||||
document.getElementById('autoClickerBoostCost').textContent = formatNumber(autoClickerBoostCost);
|
||||
document.getElementById('megaClickCost').textContent = formatNumber(megaClickCost);
|
||||
document.getElementById('hyperIdleCost').textContent = formatNumber(hyperIdleCost);
|
||||
document.getElementById('superMultiplierCost').textContent = formatNumber(superMultiplierCost);
|
||||
document.getElementById('prestigeBoostCost').textContent = formatNumber(prestigeBoostCost);
|
||||
document.getElementById('goldenClickCost').textContent = formatNumber(goldenClickCost);
|
||||
document.getElementById('comboSystemCost').textContent = formatNumber(comboSystemCost);
|
||||
document.getElementById('timeBonusCost').textContent = formatNumber(timeBonusCost);
|
||||
document.getElementById('ultraPowerCost').textContent = formatNumber(ultraPowerCost);
|
||||
|
||||
// Update prestige button
|
||||
const prestigeBtn = document.getElementById('prestigeBtn');
|
||||
if (score >= 1000 * Math.pow(2, prestigeLevel)) {
|
||||
prestigeBtn.style.display = 'block';
|
||||
document.getElementById('prestigeBonus').textContent = (0.5 + prestigeLevel * 0.1).toFixed(1);
|
||||
} else {
|
||||
prestigeBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
// Update progress bars
|
||||
updateProgress('clickPowerProgress', score / clickPowerCost);
|
||||
updateProgress('idleProgress', score / idleCost);
|
||||
updateProgress('autoClickerProgress', score / autoClickerCost);
|
||||
updateProgress('doubleClickProgress', score / doubleClickCost);
|
||||
updateProgress('idleMultiplierProgress', score / idleMultiplierCost);
|
||||
updateProgress('clickMultiplierProgress', score / clickMultiplierCost);
|
||||
|
||||
// Neue Upgrade Progress-Bars
|
||||
updateProgress('fastAutoClickerProgress', score / fastAutoClickerCost);
|
||||
updateProgress('autoClickerBoostProgress', score / autoClickerBoostCost);
|
||||
updateProgress('megaClickProgress', score / megaClickCost);
|
||||
updateProgress('hyperIdleProgress', score / hyperIdleCost);
|
||||
updateProgress('superMultiplierProgress', score / superMultiplierCost);
|
||||
updateProgress('prestigeBoostProgress', score / prestigeBoostCost);
|
||||
updateProgress('goldenClickProgress', score / goldenClickCost);
|
||||
updateProgress('comboSystemProgress', score / comboSystemCost);
|
||||
updateProgress('timeBonusProgress', score / timeBonusCost);
|
||||
updateProgress('ultraPowerProgress', score / ultraPowerCost);
|
||||
|
||||
// Update card states
|
||||
updateCardState('clickPowerCard', score >= clickPowerCost);
|
||||
updateCardState('idleCard', score >= idleCost);
|
||||
updateCardState('autoClickerCard', score >= autoClickerCost);
|
||||
updateCardState('doubleClickCard', !doubleClick && score >= doubleClickCost);
|
||||
updateCardState('idleMultiplierCard', !idleMultiplier && score >= idleMultiplierCost);
|
||||
updateCardState('clickMultiplierCard', !clickMultiplier && score >= clickMultiplierCost);
|
||||
|
||||
// Neue Upgrade Card-States
|
||||
updateCardState('fastAutoClickerCard', !fastAutoClicker && score >= fastAutoClickerCost);
|
||||
updateCardState('autoClickerBoostCard', !autoClickerBoost && score >= autoClickerBoostCost);
|
||||
updateCardState('megaClickCard', !megaClick && score >= megaClickCost);
|
||||
updateCardState('hyperIdleCard', !hyperIdle && score >= hyperIdleCost);
|
||||
updateCardState('superMultiplierCard', !superMultiplier && score >= superMultiplierCost);
|
||||
updateCardState('prestigeBoostCard', !prestigeBoost && score >= prestigeBoostCost);
|
||||
updateCardState('goldenClickCard', !goldenClick && score >= goldenClickCost);
|
||||
updateCardState('comboSystemCard', !comboSystem && score >= comboSystemCost);
|
||||
updateCardState('timeBonusCard', !timeBonus && score >= timeBonusCost);
|
||||
updateCardState('ultraPowerCard', !ultraPower && score >= ultraPowerCost);
|
||||
|
||||
// Update settings
|
||||
document.getElementById('notificationStatus').textContent = notificationsOn ? 'AN' : 'AUS';
|
||||
|
||||
// Check achievements
|
||||
checkAchievements();
|
||||
|
||||
// Save game
|
||||
saveGame();
|
||||
}
|
||||
|
||||
function showScoreChange(amount, isGolden = false) {
|
||||
const container = document.getElementById('score-container');
|
||||
const change = document.createElement('div');
|
||||
change.className = 'score-change';
|
||||
change.textContent = `+${formatNumber(amount)}${isGolden ? ' ⭐' : ''}`;
|
||||
if (isGolden) {
|
||||
change.style.color = '#FFD700';
|
||||
change.style.fontSize = '1.5rem';
|
||||
change.style.fontWeight = '800';
|
||||
}
|
||||
container.appendChild(change);
|
||||
|
||||
setTimeout(() => change.remove(), 1000);
|
||||
}
|
||||
|
||||
function updateProgress(id, ratio) {
|
||||
const progress = document.getElementById(id);
|
||||
progress.style.width = `${Math.min(100, ratio * 100)}%`;
|
||||
}
|
||||
|
||||
function updateCardState(id, enabled) {
|
||||
const card = document.getElementById(id);
|
||||
if (enabled) {
|
||||
card.classList.remove('disabled');
|
||||
} else {
|
||||
card.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
function clickScore() {
|
||||
// Basis-Multiplikatoren
|
||||
let clickMultipliers = (doubleClick ? 2 : 1) * (clickMultiplier ? 1.5 : 1);
|
||||
if (megaClick) clickMultipliers *= 3;
|
||||
|
||||
// Prestige-Bonus
|
||||
let prestigeBonus = 1 + prestigeLevel * 0.5;
|
||||
if (prestigeBoost) prestigeBonus *= 2;
|
||||
|
||||
// Zeit-Bonus
|
||||
let timeMult = 1;
|
||||
if (timeBonus) {
|
||||
const hoursPlayed = secondsPlayed / 3600;
|
||||
timeMult = 1 + (hoursPlayed * 0.05);
|
||||
}
|
||||
|
||||
// Ultra-Power
|
||||
if (ultraPower) {
|
||||
clickMultipliers *= 1.5;
|
||||
timeMult *= 1.5;
|
||||
}
|
||||
|
||||
// Super-Multiplikator
|
||||
if (superMultiplier) {
|
||||
clickMultipliers *= 1.5;
|
||||
}
|
||||
|
||||
// Combo-System
|
||||
const now = Date.now();
|
||||
if (comboSystem && (now - lastClickTime) < 2000) {
|
||||
comboCount++;
|
||||
clickMultipliers *= (1 + comboCount * 0.1);
|
||||
} else {
|
||||
comboCount = 0;
|
||||
}
|
||||
lastClickTime = now;
|
||||
|
||||
// Golden Click
|
||||
let isGolden = false;
|
||||
if (goldenClick && Math.random() < 0.1) {
|
||||
clickMultipliers *= 10;
|
||||
isGolden = true;
|
||||
}
|
||||
|
||||
const power = clickPower * clickMultipliers * prestigeBonus * timeMult;
|
||||
score += power;
|
||||
totalScore += power;
|
||||
totalClicks++;
|
||||
|
||||
// Visual feedback
|
||||
showScoreChange(power, isGolden);
|
||||
|
||||
// Button animation
|
||||
clickButton.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
clickButton.style.transform = 'scale(1)';
|
||||
}, 100);
|
||||
|
||||
updateUI();
|
||||
}
|
||||
|
||||
function buyClickPower() {
|
||||
if (score >= clickPowerCost) {
|
||||
score -= clickPowerCost;
|
||||
clickPower++;
|
||||
clickPowerCost = Math.floor(clickPowerCost * 1.5);
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification(`Klick-Power auf ${clickPower} erhöht!`);
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyIdle() {
|
||||
if (score >= idleCost) {
|
||||
score -= idleCost;
|
||||
idlePower++;
|
||||
idleCost = Math.floor(idleCost * 1.8);
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification(`Idle-Power auf ${idlePower}/s erhöht!`);
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyAutoClicker() {
|
||||
if (score >= autoClickerCost) {
|
||||
score -= autoClickerCost;
|
||||
autoClickers++;
|
||||
autoClickerCost = Math.floor(autoClickerCost * 2.5);
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification(`Auto-Klicker gekauft! Du hast jetzt ${autoClickers} Auto-Klicker.`);
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyDoubleClick() {
|
||||
if (!doubleClick && score >= doubleClickCost) {
|
||||
score -= doubleClickCost;
|
||||
doubleClick = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Doppelte Klick-Power freigeschaltet! Alle Klicks sind jetzt doppelt so stark.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyIdleMultiplier() {
|
||||
if (!idleMultiplier && score >= idleMultiplierCost) {
|
||||
score -= idleMultiplierCost;
|
||||
idleMultiplier = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Idle-Multiplikator freigeschaltet! Idle-Generierung ist jetzt doppelt so effektiv.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyClickMultiplier() {
|
||||
if (!clickMultiplier && score >= clickMultiplierCost) {
|
||||
score -= clickMultiplierCost;
|
||||
clickMultiplier = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Klick-Multiplikator freigeschaltet! Alle Klicks sind jetzt 1,5x effektiver.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
// Neue Upgrade-Funktionen
|
||||
function buyFastAutoClicker() {
|
||||
if (!fastAutoClicker && score >= fastAutoClickerCost) {
|
||||
score -= fastAutoClickerCost;
|
||||
fastAutoClicker = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Schnelle Auto-Clicker freigeschaltet! Auto-Clicker klicken jetzt alle 3s.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyAutoClickerBoost() {
|
||||
if (!autoClickerBoost && score >= autoClickerBoostCost) {
|
||||
score -= autoClickerBoostCost;
|
||||
autoClickerBoost = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Auto-Clicker Boost freigeschaltet! Auto-Clicker sind jetzt 2x stärker.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyMegaClick() {
|
||||
if (!megaClick && score >= megaClickCost) {
|
||||
score -= megaClickCost;
|
||||
megaClick = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Mega-Klick freigeschaltet! Klicks sind jetzt 3x stärker.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyHyperIdle() {
|
||||
if (!hyperIdle && score >= hyperIdleCost) {
|
||||
score -= hyperIdleCost;
|
||||
hyperIdle = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Hyper Idle freigeschaltet! Idle-Power ist jetzt 3x stärker.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buySuperMultiplier() {
|
||||
if (!superMultiplier && score >= superMultiplierCost) {
|
||||
score -= superMultiplierCost;
|
||||
superMultiplier = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Super-Multiplikator freigeschaltet! Alle Einnahmen +50%.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyPrestigeBoost() {
|
||||
if (!prestigeBoost && score >= prestigeBoostCost) {
|
||||
score -= prestigeBoostCost;
|
||||
prestigeBoost = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Prestige-Boost freigeschaltet! Prestige gibt jetzt doppelten Bonus.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyGoldenClick() {
|
||||
if (!goldenClick && score >= goldenClickCost) {
|
||||
score -= goldenClickCost;
|
||||
goldenClick = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Golden Click freigeschaltet! 10% Chance auf kritischen Klick (10x).');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyComboSystem() {
|
||||
if (!comboSystem && score >= comboSystemCost) {
|
||||
score -= comboSystemCost;
|
||||
comboSystem = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Combo-System freigeschaltet! Schnelle Klicks geben +10% Bonus.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyTimeBonus() {
|
||||
if (!timeBonus && score >= timeBonusCost) {
|
||||
score -= timeBonusCost;
|
||||
timeBonus = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Zeit-Bonus freigeschaltet! +5% zu allem pro Stunde Spielzeit.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function buyUltraPower() {
|
||||
if (!ultraPower && score >= ultraPowerCost) {
|
||||
score -= ultraPowerCost;
|
||||
ultraPower = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification('Ultra-Power freigeschaltet! Alle Multiplikatoren +50%.');
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
|
||||
function prestige() {
|
||||
const requiredScore = 1000 * Math.pow(2, prestigeLevel);
|
||||
if (score >= requiredScore) {
|
||||
if (confirm(`Prestige durchführen? Du wirst deinen Fortschritt zurücksetzen, aber erhältst einen permanenten ${(0.5 + prestigeLevel * 0.1).toFixed(1)}x Multiplikator für alle Einkommen.`)) {
|
||||
prestigeLevel++;
|
||||
|
||||
// Reset game state but keep prestige level and upgrades
|
||||
score = 0;
|
||||
clickPower = 1;
|
||||
idlePower = 0;
|
||||
autoClickers = 0;
|
||||
clickPowerCost = 10;
|
||||
idleCost = 20;
|
||||
autoClickerCost = 100;
|
||||
totalClicks = 0;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification(`Prestige auf Level ${prestigeLevel}! ${(0.5 + (prestigeLevel-1)*0.1).toFixed(1)}x Multiplikator erhalten.`);
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleNotifications() {
|
||||
notificationsOn = !notificationsOn;
|
||||
updateUI();
|
||||
}
|
||||
|
||||
function switchTab(id) {
|
||||
document.querySelectorAll('.tab').forEach(btn => btn.classList.remove('active'));
|
||||
document.querySelector(`.tab[onclick="switchTab('${id}')"]`).classList.add('active');
|
||||
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
tab.style.opacity = '0';
|
||||
});
|
||||
|
||||
const activeTab = document.getElementById(id);
|
||||
activeTab.classList.add('active');
|
||||
setTimeout(() => {
|
||||
activeTab.style.opacity = '1';
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function resetGame() {
|
||||
if (confirm("Bist du sicher, dass du ALLE Fortschritte zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden!")) {
|
||||
localStorage.removeItem("clickerSave");
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
function showNotification(message) {
|
||||
if (!notificationsOn) return;
|
||||
|
||||
const notifications = document.getElementById('notifications');
|
||||
const notification = document.createElement('div');
|
||||
notification.className = 'notification';
|
||||
notification.textContent = message;
|
||||
|
||||
notifications.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.opacity = '0';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function checkAchievements() {
|
||||
achievements.forEach(achievement => {
|
||||
if (!achievement.earned && achievement.check()) {
|
||||
achievement.earned = true;
|
||||
|
||||
if (notificationsOn) {
|
||||
showNotification(`Achievement freigeschaltet: ${achievement.name}!`);
|
||||
}
|
||||
|
||||
renderAchievements();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderAchievements() {
|
||||
const container = document.getElementById('achievementsList');
|
||||
container.innerHTML = '';
|
||||
|
||||
achievements.forEach(achievement => {
|
||||
const div = document.createElement('div');
|
||||
div.className = achievement.earned ? 'achievement' : 'achievement locked';
|
||||
div.innerHTML = `
|
||||
<strong>${achievement.name}</strong><br>
|
||||
${achievement.description}<br>
|
||||
${achievement.earned ? '✅ Freigeschaltet' : '🔒 Gesperrt'}
|
||||
`;
|
||||
container.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
function formatNumber(num) {
|
||||
if (num >= 1000000000) {
|
||||
return (num / 1000000000).toFixed(1) + 'Mrd';
|
||||
}
|
||||
if (num >= 1000000) {
|
||||
return (num / 1000000).toFixed(1) + 'Mio';
|
||||
}
|
||||
if (num >= 1000) {
|
||||
return (num / 1000).toFixed(1) + 'K';
|
||||
}
|
||||
return Math.floor(num).toString();
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = seconds % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}h ${minutes}m ${secs}s`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}m ${secs}s`;
|
||||
} else {
|
||||
return `${secs}s`;
|
||||
}
|
||||
}
|
||||
|
||||
function getSaveData() {
|
||||
return {
|
||||
score,
|
||||
totalScore,
|
||||
clickPower,
|
||||
idlePower,
|
||||
autoClickers,
|
||||
clickPowerCost,
|
||||
idleCost,
|
||||
autoClickerCost,
|
||||
totalClicks,
|
||||
prestigeLevel,
|
||||
notificationsOn,
|
||||
secondsPlayed,
|
||||
doubleClick,
|
||||
idleMultiplier,
|
||||
clickMultiplier,
|
||||
doubleClickCost,
|
||||
idleMultiplierCost,
|
||||
clickMultiplierCost,
|
||||
fastAutoClicker,
|
||||
autoClickerBoost,
|
||||
megaClick,
|
||||
hyperIdle,
|
||||
superMultiplier,
|
||||
prestigeBoost,
|
||||
goldenClick,
|
||||
comboSystem,
|
||||
timeBonus,
|
||||
ultraPower,
|
||||
fastAutoClickerCost,
|
||||
autoClickerBoostCost,
|
||||
megaClickCost,
|
||||
hyperIdleCost,
|
||||
superMultiplierCost,
|
||||
prestigeBoostCost,
|
||||
goldenClickCost,
|
||||
comboSystemCost,
|
||||
timeBonusCost,
|
||||
ultraPowerCost,
|
||||
achievements: achievements.map(a => ({ id: a.id, earned: a.earned }))
|
||||
};
|
||||
}
|
||||
|
||||
function loadSaveData(data) {
|
||||
score = data.score || 0;
|
||||
totalScore = data.totalScore || 0;
|
||||
clickPower = data.clickPower || 1;
|
||||
idlePower = data.idlePower || 0;
|
||||
autoClickers = data.autoClickers || 0;
|
||||
clickPowerCost = data.clickPowerCost || 10;
|
||||
idleCost = data.idleCost || 20;
|
||||
autoClickerCost = data.autoClickerCost || 100;
|
||||
totalClicks = data.totalClicks || 0;
|
||||
prestigeLevel = data.prestigeLevel || 0;
|
||||
notificationsOn = data.notificationsOn ?? true;
|
||||
secondsPlayed = data.secondsPlayed || 0;
|
||||
|
||||
// Upgrades
|
||||
doubleClick = data.doubleClick || false;
|
||||
idleMultiplier = data.idleMultiplier || false;
|
||||
clickMultiplier = data.clickMultiplier || false;
|
||||
doubleClickCost = data.doubleClickCost || 500;
|
||||
idleMultiplierCost = data.idleMultiplierCost || 1000;
|
||||
clickMultiplierCost = data.clickMultiplierCost || 2000;
|
||||
fastAutoClicker = data.fastAutoClicker || false;
|
||||
autoClickerBoost = data.autoClickerBoost || false;
|
||||
megaClick = data.megaClick || false;
|
||||
hyperIdle = data.hyperIdle || false;
|
||||
superMultiplier = data.superMultiplier || false;
|
||||
prestigeBoost = data.prestigeBoost || false;
|
||||
goldenClick = data.goldenClick || false;
|
||||
comboSystem = data.comboSystem || false;
|
||||
timeBonus = data.timeBonus || false;
|
||||
ultraPower = data.ultraPower || false;
|
||||
fastAutoClickerCost = data.fastAutoClickerCost || 5000;
|
||||
autoClickerBoostCost = data.autoClickerBoostCost || 10000;
|
||||
megaClickCost = data.megaClickCost || 15000;
|
||||
hyperIdleCost = data.hyperIdleCost || 20000;
|
||||
superMultiplierCost = data.superMultiplierCost || 30000;
|
||||
prestigeBoostCost = data.prestigeBoostCost || 25000;
|
||||
goldenClickCost = data.goldenClickCost || 40000;
|
||||
comboSystemCost = data.comboSystemCost || 50000;
|
||||
timeBonusCost = data.timeBonusCost || 35000;
|
||||
ultraPowerCost = data.ultraPowerCost || 75000;
|
||||
|
||||
// Achievements
|
||||
if (data.achievements) {
|
||||
data.achievements.forEach(savedAchievement => {
|
||||
const achievement = achievements.find(a => a.id === savedAchievement.id);
|
||||
if (achievement) {
|
||||
achievement.earned = savedAchievement.earned;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateUI();
|
||||
renderAchievements();
|
||||
}
|
||||
|
||||
function saveGame() {
|
||||
localStorage.setItem("clickerSave", JSON.stringify(getSaveData()));
|
||||
}
|
||||
|
||||
function loadGame() {
|
||||
const saved = localStorage.getItem("clickerSave");
|
||||
if (saved) {
|
||||
try {
|
||||
loadSaveData(JSON.parse(saved));
|
||||
} catch (e) {
|
||||
console.error("Fehler beim Laden des Spielstands:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Game loop
|
||||
function gameLoop() {
|
||||
const now = Date.now();
|
||||
const delta = (now - lastUpdate) / 1000; // Convert to seconds
|
||||
lastUpdate = now;
|
||||
|
||||
// Berechne Multiplikatoren für Idle
|
||||
let idleMultipliers = (idleMultiplier ? 2 : 1);
|
||||
if (hyperIdle) idleMultipliers *= 3;
|
||||
if (superMultiplier) idleMultipliers *= 1.5;
|
||||
if (ultraPower) idleMultipliers *= 1.5;
|
||||
|
||||
// Prestige-Bonus
|
||||
let prestigeBonus = 1 + prestigeLevel * 0.5;
|
||||
if (prestigeBoost) prestigeBonus *= 2;
|
||||
|
||||
// Zeit-Bonus
|
||||
let timeMult = 1;
|
||||
if (timeBonus) {
|
||||
const hoursPlayed = secondsPlayed / 3600;
|
||||
timeMult = 1 + (hoursPlayed * 0.05);
|
||||
}
|
||||
if (ultraPower) timeMult *= 1.5;
|
||||
|
||||
// Idle generation
|
||||
const idleIncome = idlePower * idleMultipliers * prestigeBonus * timeMult * delta;
|
||||
if (idleIncome > 0) {
|
||||
score += idleIncome;
|
||||
totalScore += idleIncome;
|
||||
}
|
||||
|
||||
updateUI();
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
// Auto clicker interval - Geschwindigkeit abhängig von fastAutoClicker
|
||||
setInterval(() => {
|
||||
if (autoClickers > 0) {
|
||||
// Berechne Multiplikatoren
|
||||
let clickMultipliers = (doubleClick ? 2 : 1) * (clickMultiplier ? 1.5 : 1);
|
||||
if (megaClick) clickMultipliers *= 3;
|
||||
if (autoClickerBoost) clickMultipliers *= 2;
|
||||
if (superMultiplier) clickMultipliers *= 1.5;
|
||||
if (ultraPower) clickMultipliers *= 1.5;
|
||||
|
||||
// Prestige-Bonus
|
||||
let prestigeBonus = 1 + prestigeLevel * 0.5;
|
||||
if (prestigeBoost) prestigeBonus *= 2;
|
||||
|
||||
// Zeit-Bonus
|
||||
let timeMult = 1;
|
||||
if (timeBonus) {
|
||||
const hoursPlayed = secondsPlayed / 3600;
|
||||
timeMult = 1 + (hoursPlayed * 0.05);
|
||||
}
|
||||
if (ultraPower) timeMult *= 1.5;
|
||||
|
||||
const clicks = autoClickers * clickMultipliers * prestigeBonus * timeMult;
|
||||
score += clicks;
|
||||
totalScore += clicks;
|
||||
updateUI();
|
||||
}
|
||||
}, fastAutoClicker ? 3000 : 5000);
|
||||
|
||||
// Time played counter
|
||||
setInterval(() => {
|
||||
secondsPlayed++;
|
||||
updateUI();
|
||||
}, 1000);
|
||||
|
||||
// Initialize
|
||||
loadGame();
|
||||
updateUI();
|
||||
renderAchievements();
|
||||
gameLoop();
|
||||
|
||||
// Share Modal Functions
|
||||
let currentShareVariant = 1;
|
||||
const shareTexts = {};
|
||||
|
||||
function generateShareTexts() {
|
||||
const clicks = formatNumber(totalClicks);
|
||||
const points = formatNumber(totalScore);
|
||||
const timeText = formatTime(secondsPlayed);
|
||||
const earnedAchievements = achievements.filter(a => a.earned).length;
|
||||
const url = 'https://tools.ponywave.de/clicker';
|
||||
|
||||
// Variante 1: Klicks fokussiert
|
||||
shareTexts[1] = `Ich habe beim PonyWave Clicker Game ${clicks} mal in ${timeText} geklickt! Wie viel schaffst du?\n\n#ClickerGame #PonyWave\n${url}`;
|
||||
|
||||
// Variante 2: Punkte fokussiert
|
||||
shareTexts[2] = `Ich habe ${points} Punkte im PonyWave Clicker Game erreicht! 🎮 Beat meinen Score!\n\n#ClickerGame #PonyWave\n${url}`;
|
||||
|
||||
// Variante 3: Vollständige Stats
|
||||
let variant3 = `PonyWave Clicker: ${clicks} Klicks | ${points} Punkte`;
|
||||
if (prestigeLevel > 0) {
|
||||
variant3 += ` | Prestige Level ${prestigeLevel}`;
|
||||
}
|
||||
if (earnedAchievements > 0) {
|
||||
variant3 += ` | ${earnedAchievements} Achievements`;
|
||||
}
|
||||
variant3 += ` 🏆\n\n#ClickerGame #PonyWave\n${url}`;
|
||||
shareTexts[3] = variant3;
|
||||
}
|
||||
|
||||
function openShareModal() {
|
||||
generateShareTexts();
|
||||
const modal = document.getElementById('shareModal');
|
||||
modal.classList.add('active');
|
||||
selectShareVariant(1);
|
||||
}
|
||||
|
||||
function closeShareModal() {
|
||||
const modal = document.getElementById('shareModal');
|
||||
modal.classList.remove('active');
|
||||
}
|
||||
|
||||
function selectShareVariant(variantNum) {
|
||||
currentShareVariant = variantNum;
|
||||
|
||||
// Update button states
|
||||
document.querySelectorAll('.share-variant-btn').forEach((btn, index) => {
|
||||
if (index + 1 === variantNum) {
|
||||
btn.classList.add('active');
|
||||
} else {
|
||||
btn.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Update textarea
|
||||
document.getElementById('shareText').value = shareTexts[variantNum];
|
||||
}
|
||||
|
||||
function copyShareText() {
|
||||
const textarea = document.getElementById('shareText');
|
||||
const text = textarea.value;
|
||||
|
||||
// Copy to clipboard
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
// Show feedback
|
||||
const feedback = document.getElementById('copyFeedback');
|
||||
feedback.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove('show');
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('Fehler beim Kopieren:', err);
|
||||
alert('Fehler beim Kopieren in die Zwischenablage');
|
||||
});
|
||||
}
|
||||
|
||||
function shareToSocial(platform) {
|
||||
const text = document.getElementById('shareText').value;
|
||||
const url = 'https://tools.ponywave.de/clicker';
|
||||
let shareUrl = '';
|
||||
|
||||
switch (platform) {
|
||||
case 'twitter':
|
||||
shareUrl = `https://x.com/intent/post?text=${encodeURIComponent(text)}`;
|
||||
break;
|
||||
case 'whatsapp':
|
||||
shareUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
|
||||
break;
|
||||
case 'telegram':
|
||||
shareUrl = `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
|
||||
break;
|
||||
case 'facebook':
|
||||
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}"e=${encodeURIComponent(text)}`;
|
||||
break;
|
||||
}
|
||||
|
||||
if (shareUrl) {
|
||||
window.open(shareUrl, '_blank', 'width=600,height=400');
|
||||
}
|
||||
}
|
||||
567
clicker/style.css
Normal file
567
clicker/style.css
Normal file
@@ -0,0 +1,567 @@
|
||||
:root {
|
||||
--primary-color: #7F006E;
|
||||
--secondary-color: #FF7FED;
|
||||
--spotify-green: #1DB954;
|
||||
--bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
--text-color: #e0e0e0;
|
||||
--tool-bg: #2a2a2a;
|
||||
--shadow-color: rgba(0, 0, 0, 0.5);
|
||||
--footer-color: rgba(0, 0, 0, 0.8);
|
||||
--border-color: #444;
|
||||
--card-bg: #1e1e1e;
|
||||
--card-header-bg: #252525;
|
||||
--label-color: #888;
|
||||
--button-hover: #CC65B5;
|
||||
--highlight: #333333;
|
||||
--success: #1DB954;
|
||||
--danger: #f44336;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: var(--bg-gradient);
|
||||
background-attachment: fixed;
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 20px 70px 20px;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
touch-action: manipulation;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
color: var(--secondary-color);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
text-shadow: 2px 2px 6px rgba(255, 127, 237, 0.66);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
cursor: pointer;
|
||||
padding: 10px 16px;
|
||||
background: var(--card-bg);
|
||||
color: var(--text-color);
|
||||
font-size: 0.95rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--highlight);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
animation: fadeIn 0.3s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#score-container {
|
||||
position: relative;
|
||||
margin: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#score {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: var(--secondary-color);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.score-change {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--success);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
animation: scoreFloat 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes scoreFloat {
|
||||
0% { opacity: 0; transform: translateY(10px); }
|
||||
20% { opacity: 1; transform: translateY(0); }
|
||||
80% { opacity: 1; }
|
||||
100% { opacity: 0; transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
margin: 15px auto;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
box-shadow: 0 2px 4px var(--shadow-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px var(--shadow-color);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
margin: 12px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 6px var(--shadow-color);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px var(--shadow-color);
|
||||
}
|
||||
|
||||
.card:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.card.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.card.disabled:hover {
|
||||
transform: none !important;
|
||||
box-shadow: 0 4px 6px var(--shadow-color) !important;
|
||||
}
|
||||
|
||||
.stats-line {
|
||||
margin: 10px 0;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stats-line strong {
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.toggle {
|
||||
margin: 15px 0;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggle:hover {
|
||||
background: var(--highlight);
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 15px 0;
|
||||
background-color: var(--footer-color);
|
||||
border-top: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--secondary-color);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.heart {
|
||||
color: #ff0000;
|
||||
animation: heartbeat 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes heartbeat {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.prestige {
|
||||
margin-top: 25px;
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.prestige:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
height: 6px;
|
||||
background: var(--highlight);
|
||||
border-radius: 3px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.achievement {
|
||||
background: var(--card-header-bg);
|
||||
color: var(--text-color);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 4px var(--shadow-color);
|
||||
}
|
||||
|
||||
.achievement.locked {
|
||||
background: var(--card-bg);
|
||||
color: var(--label-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#notifications {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 300px;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: var(--card-header-bg);
|
||||
color: var(--text-color);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
animation: slideIn 0.3s ease forwards;
|
||||
border-left: 4px solid var(--spotify-green);
|
||||
box-shadow: 0 3px 6px var(--shadow-color);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Share Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: var(--tool-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
animation: slideUp 0.3s ease;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--highlight);
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.share-variants {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.share-variant-btn {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
padding: 10px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.share-variant-btn:hover {
|
||||
background: var(--highlight);
|
||||
}
|
||||
|
||||
.share-variant-btn.active {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.share-textarea {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
padding: 15px;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
color: var(--text-color);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.share-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.social-share {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.social-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.social-btn {
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.social-btn.twitter {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.social-btn.whatsapp {
|
||||
background: #25D366;
|
||||
}
|
||||
|
||||
.social-btn.telegram {
|
||||
background: #0088cc;
|
||||
}
|
||||
|
||||
.social-btn.facebook {
|
||||
background: #1877F2;
|
||||
}
|
||||
|
||||
.copy-feedback {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: var(--spotify-green);
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.copy-feedback.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
nav {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0.9rem 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#score {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
#notifications {
|
||||
width: calc(100% - 40px);
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 20px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.social-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user