Webleb - UI Elements - Clicker Game with Upgrades and Rebirth System

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ultimate Clicker Game (Escalating Rebirth)</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Arial, sans-serif;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      min-height: 100vh;
      color: #fff;
      overflow-x: hidden;
    }
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 32px auto;
      background: rgba(0,0,0,0.25);
      border-radius: 18px;
      box-shadow: 0 4px 32px rgba(30,30,80,0.14);
      padding: 32px 24px;
    }
    .stats {
      font-size: 1.25em;
      margin-bottom: 20px;
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
    }
    .click-btn {
      transition: 0.2s;
      margin: 20px 0;
      padding: 32px 56px;
      font-size: 2.5em;
      border-radius: 50px;
      box-shadow: 0 8px 24px #0004;
      border: none;
      color: #fff;
      background: linear-gradient(90deg, #ff6a00 0%, #ee0979 100%);
      cursor: pointer;
      font-weight: bold;
      outline: none;
      will-change: transform;
      user-select: none;
      position: relative;
      overflow: hidden;
    }
    .click-btn:active {
      transform: scale(0.96) rotate(-1deg);
      filter: brightness(1.07);
    }
    .tabs {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
    }
    .tab-btn {
      background: #fff2;
      border: none;
      padding: 10px 26px;
      font-size: 1.15em;
      border-radius: 8px 8px 0 0;
      color: #fff;
      cursor: pointer;
      outline: none;
      transition: 0.12s;
      font-weight: 500;
    }
    .tab-btn.active {
      background: #fff9;
      color: #2575fc;
      font-weight: bold;
    }
    .upgrades, .rebirth-upgrades {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 18px;
      margin-bottom: 24px;
    }
    .upgrade, .rebirth-upgrade {
      background: #fff1;
      border-radius: 10px;
      padding: 13px 17px 10px 17px;
      box-shadow: 0 2px 12px #0002;
      position: relative;
      min-height: 85px;
      transition: box-shadow 0.2s, background 0.15s;
      border: 2px solid transparent;
      opacity: 0.92;
      overflow: hidden;
    }
    .upgrade.owned, .rebirth-upgrade.owned {
      border-color: #5fffa3;
      background: rgba(90,255,163,0.13);
      opacity: 1;
    }
    .upgrade .buy-btn, .rebirth-upgrade .buy-btn {
      margin-top: 6px;
      background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);
      color: #222;
      border: none;
      padding: 7px 18px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1em;
      font-weight: 600;
      box-shadow: 0 2px 12px #0002;
      transition: 0.13s;
    }
    .upgrade .buy-btn:disabled, .rebirth-upgrade .buy-btn:disabled {
      background: #bbb;
      color: #666;
      cursor: not-allowed;
    }
    .rebirth-section {
      background: #fff2;
      border-radius: 10px;
      padding: 16px 18px 12px 18px;
      margin-bottom: 24px;
      box-shadow: 0 2px 12px #0002;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .rebirth-btn {
      background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
      color: #222;
      border: none;
      padding: 13px 32px;
      border-radius: 8px;
      font-size: 1.4em;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 2px 12px #0003;
      transition: 0.15s;
      outline: none;
    }
    .rebirth-btn:disabled {
      background: #bbb;
      color: #666;
      cursor: not-allowed;
    }
    .rebirth-tokens {
      font-size: 1.2em;
      font-weight: bold;
      color: #f7f78a;
      margin-left: 18px;
    }
    .shine {
      position: absolute;
      top: -60px;
      left: -60px;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle at 70% 30%, #fff8 0%, #fff0 70%);
      transform: rotate(18deg);
      opacity: 0.3;
      pointer-events: none;
      transition: opacity 0.5s;
      z-index: 0;
      will-change: opacity;
    }
    .upgrade.owned .shine, .rebirth-upgrade.owned .shine {
      opacity: 0.7;
      transition: opacity 0.5s;
      filter: blur(1px);
    }
    @media (max-width: 800px) {
      .container { padding: 10px; }
      .upgrades, .rebirth-upgrades { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="stats">
      <div>Clicks: <span id="clicks">0</span></div>
      <div>Clicks per Click: <span id="cpc">1</span></div>
      <div>Clicks per Second: <span id="cps">0</span></div>
      <div>Rebirth Tokens: <span id="rebirthTokens">0</span></div>
      <div>Rebirths: <span id="rebirths">0</span></div>
    </div>
    <button class="click-btn" id="clickBtn">
      <span id="clickBtnText">CLICK!</span>
    </button>
    <div class="tabs">
      <button class="tab-btn active" data-tab="upgrades">Normal Upgrades</button>
      <button class="tab-btn" data-tab="rebirth">Rebirth Upgrades</button>
    </div>
    <div id="upgradesTab">
      <div class="upgrades" id="upgrades"></div>
    </div>
    <div id="rebirthTab" style="display:none">
      <div class="rebirth-section">
        <span style="font-size:1.1em;">Rebirth resets your clicks and upgrades, but gives you <b>rebirth tokens</b>! The more clicks you have, the more tokens you get at once!</span>
        <button class="rebirth-btn" id="rebirthBtn">Rebirth</button>
        <span class="rebirth-tokens">
          Next Rebirth: <span id="rebirthCost">100000</span> Clicks 
          (<span id="potentialTokens">0</span> tokens if rebirth now)
        </span>
      </div>
      <div class="rebirth-upgrades" id="rebirthUpgrades"></div>
    </div>
  </div>
  <script>
    // Parameters for scaling
    const NUM_NORMAL_UPGRADES = 670;
    const NUM_REBIRTH_UPGRADES = 670;
    const BASE_UPGRADE_COST = 10;
    const UPGRADE_COST_MULT = 1.15;
    const BASE_UPGRADE_POWER = 1;
    const UPGRADE_POWER_MULT = 1.10;

const BASE_REBIRTH_COST = 100000;
    const REBIRTH_COST_MULT = 2.3;
    const BASE_REBIRTH_UPGRADE_COST = 5;
    const REBIRTH_UPGRADE_COST_MULT = 1.17;
    const BASE_REBIRTH_UPGRADE_POWER = 1.5;
    const REBIRTH_UPGRADE_POWER_MULT = 1.08;

// Game state
    let clicks = 0;
    let cpc = 1;
    let cps = 0;
    let rebirthTokens = 0;
    let rebirths = 0;
    let nextRebirthCost = BASE_REBIRTH_COST;
    let upgradesOwned = Array(NUM_NORMAL_UPGRADES).fill(0);
    let rebirthUpgradesOwned = Array(NUM_REBIRTH_UPGRADES).fill(0);

// DOM references
    const clicksSpan = document.getElementById('clicks');
    const cpcSpan = document.getElementById('cpc');
    const cpsSpan = document.getElementById('cps');
    const rebirthTokensSpan = document.getElementById('rebirthTokens');
    const rebirthsSpan = document.getElementById('rebirths');
    const clickBtn = document.getElementById('clickBtn');
    const clickBtnText = document.getElementById('clickBtnText');
    const upgradesDiv = document.getElementById('upgrades');
    const rebirthUpgradesDiv = document.getElementById('rebirthUpgrades');
    const rebirthBtn = document.getElementById('rebirthBtn');
    const rebirthCostSpan = document.getElementById('rebirthCost');
    const potentialTokensSpan = document.getElementById('potentialTokens');
    const tabs = document.querySelectorAll('.tab-btn');
    const upgradesTab = document.getElementById('upgradesTab');
    const rebirthTab = document.getElementById('rebirthTab');

// Effects
    function animateClick() {
      clickBtnText.style.transform = 'scale(1.15)';
      setTimeout(() => {
        clickBtnText.style.transform = '';
      }, 120);
    }

// Upgrade creation
    function createUpgrades() {
      upgradesDiv.innerHTML = '';
      for(let i=0;i<NUM_NORMAL_UPGRADES;i++) {
        const cost = Math.floor(BASE_UPGRADE_COST * Math.pow(UPGRADE_COST_MULT, i));
        const power = Math.floor(BASE_UPGRADE_POWER * Math.pow(UPGRADE_POWER_MULT, i));
        const isCps = i % 2 === 1; // Odd: CPS, Even: CPC
        const upgrade = document.createElement('div');
        upgrade.className = 'upgrade';
        upgrade.innerHTML = `
          <div class="shine"></div>
          <b>${isCps ? 'Auto Clicker' : 'Click Power'} #${i+1}</b><br/>
          +${power} ${isCps ? 'Clicks/sec' : 'Clicks/click'}<br/>
          <span>Cost: <b>${cost}</b> Clicks</span><br/>
          <button class="buy-btn" id="buyUpgrade${i}">Buy</button>
        `;
        upgradesDiv.appendChild(upgrade);
        document.getElementById(`buyUpgrade${i}`).onclick = () => buyUpgrade(i, cost, power, isCps);
      }
    }
    function createRebirthUpgrades() {
      rebirthUpgradesDiv.innerHTML = '';
      for(let i=0;i<NUM_REBIRTH_UPGRADES;i++) {
        const cost = Math.floor(BASE_REBIRTH_UPGRADE_COST * Math.pow(REBIRTH_UPGRADE_COST_MULT, i));
        const power = (BASE_REBIRTH_UPGRADE_POWER * Math.pow(REBIRTH_UPGRADE_POWER_MULT, i)).toFixed(2);
        const isCps = i % 2 === 1;
        const upgrade = document.createElement('div');
        upgrade.className = 'rebirth-upgrade';
        upgrade.innerHTML = `
          <div class="shine"></div>
          <b>${isCps ? 'Auto Clicker Multiplier' : 'Click Power Multiplier'} #${i+1}</b><br/>
          x${power} ${isCps ? 'CPS' : 'CPC'}<br/>
          <span>Cost: <b>${cost}</b> Tokens</span><br/>
          <button class="buy-btn" id="buyRebirthUpgrade${i}">Buy</button>
        `;
        rebirthUpgradesDiv.appendChild(upgrade);
        document.getElementById(`buyRebirthUpgrade${i}`).onclick = () => buyRebirthUpgrade(i, cost, power, isCps);
      }
    }

// Tab switching
    tabs.forEach(tab=>{
      tab.onclick = function() {
        tabs.forEach(t=>t.classList.remove('active'));
        this.classList.add('active');
        if(this.dataset.tab==="upgrades") {
          upgradesTab.style.display = '';
          rebirthTab.style.display = 'none';
        } else {
          upgradesTab.style.display = 'none';
          rebirthTab.style.display = '';
        }
      }
    });

// Buying upgrades
    function buyUpgrade(i, cost, power, isCps) {
      if(clicks >= cost) {
        clicks -= cost;
        upgradesOwned[i]++;
        document.getElementsByClassName('upgrade')[i].classList.add('owned');
        if(isCps) cps += power;
        else cpc += power;
        updateStats();
      }
    }
    function buyRebirthUpgrade(i, cost, power, isCps) {
      if(rebirthTokens >= cost) {
        rebirthTokens -= cost;
        rebirthUpgradesOwned[i]++;
        document.getElementsByClassName('rebirth-upgrade')[i].classList.add('owned');
        updateStats();
      }
    }

// Click handler
    clickBtn.onclick = () => {
      clicks += getTotalCpc();
      animateClick();
      updateStats();
    };

// Rebirth handler
    rebirthBtn.onclick = () => {
      const tokensEarned = Math.floor(clicks / nextRebirthCost);
      if(tokensEarned >= 1) {
        rebirths++;
        rebirthTokens += tokensEarned;
        clicks = 0;
        cpc = 1;
        cps = 0;
        upgradesOwned = Array(NUM_NORMAL_UPGRADES).fill(0);
        nextRebirthCost = Math.floor(BASE_REBIRTH_COST * Math.pow(REBIRTH_COST_MULT, rebirths));
        createUpgrades();
        updateStats();
      }
    };

// Autoclicking
    setInterval(() => {
      clicks += getTotalCps() / 10;
      updateStats();
    }, 100);

// Update all stats
    function updateStats() {
      clicks = Math.floor(clicks);
      clicksSpan.textContent = clicks;
      cpcSpan.textContent = getTotalCpc();
      cpsSpan.textContent = getTotalCps();
      rebirthTokensSpan.textContent = rebirthTokens;
      rebirthsSpan.textContent = rebirths;
      rebirthCostSpan.textContent = nextRebirthCost;
      // Show how many tokens you'd get if you rebirth now
      const tokens = Math.floor(clicks / nextRebirthCost);
      potentialTokensSpan.textContent = tokens;
      // Enable/disable rebirth button
      rebirthBtn.disabled = tokens < 1;
      // Enable/disable upgrade buttons
      document.querySelectorAll('.upgrade').forEach((div,i)=>{
        const cost = Math.floor(BASE_UPGRADE_COST * Math.pow(UPGRADE_COST_MULT, i));
        div.querySelector('.buy-btn').disabled = clicks < cost;
        if(upgradesOwned[i]) div.classList.add('owned');
      });
      document.querySelectorAll('.rebirth-upgrade').forEach((div,i)=>{
        const cost = Math.floor(BASE_REBIRTH_UPGRADE_COST * Math.pow(REBIRTH_UPGRADE_COST_MULT, i));
        div.querySelector('.buy-btn').disabled = rebirthTokens < cost;
        if(rebirthUpgradesOwned[i]) div.classList.add('owned');
      });
    }

// Calculate total click power (base + upgrades + rebirth multipliers)
    function getTotalCpc() {
      let base = 1;
      for(let i=0;i<NUM_NORMAL_UPGRADES;i++) {
        if(i%2===0) base += upgradesOwned[i] * Math.floor(BASE_UPGRADE_POWER * Math.pow(UPGRADE_POWER_MULT, i));
      }
      let mult = 1;
      for(let i=0;i<NUM_REBIRTH_UPGRADES;i++) {
        if(i%2===0) mult *= Math.pow((BASE_REBIRTH_UPGRADE_POWER * Math.pow(REBIRTH_UPGRADE_POWER_MULT, i)), rebirthUpgradesOwned[i]);
      }
      return Math.floor(base * mult);
    }
    function getTotalCps() {
      let base = 0;
      for(let i=0;i<NUM_NORMAL_UPGRADES;i++) {
        if(i%2===1) base += upgradesOwned[i] * Math.floor(BASE_UPGRADE_POWER * Math.pow(UPGRADE_POWER_MULT, i));
      }
      let mult = 1;
      for(let i=0;i<NUM_REBIRTH_UPGRADES;i++) {
        if(i%2===1) mult *= Math.pow((BASE_REBIRTH_UPGRADE_POWER * Math.pow(REBIRTH_UPGRADE_POWER_MULT, i)), rebirthUpgradesOwned[i]);
      }
      return Math.floor(base * mult);
    }

// Initial population
    createUpgrades();
    createRebirthUpgrades();
    updateStats();
  </script>
</body>
</html>

Validating your code, please wait...

HTML

CSS

// Effects
    function animateClick() {
      clickBtnText.style.transform = 'scale(1.15)';
      setTimeout(() => {
        clickBtnText.style.transform = '';
      }, 120);
    }

// Click handler
    clickBtn.onclick = () => {
      clicks += getTotalCpc();
      animateClick();
      updateStats();
    };

// Autoclicking
    setInterval(() => {
      clicks += getTotalCps() / 10;
      updateStats();
    }, 100);

// Initial population
    createUpgrades();
    createRebirthUpgrades();
    updateStats();
  </script>
</body>
</html>