HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
340x244
6.79 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TGC Token Pro Demo</title>
<link href="https://cdn.jsdelivr.net/npm/chart.js" rel="stylesheet">
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0e0e2c, #1a1a4a);
    color: #fff;
    margin: 0;
    padding: 0;
  }
  header {
    background: #14144a;
    padding: 25px;
    text-align: center;
    border-bottom: 2px solid #ffd700;
  }
  header h1 {
    margin: 0;
    color: #ffd700;
    font-size: 2.5rem;
  }
  nav {
    display: flex;
    justify-content: center;
    background: #1f1f4b;
  }
  nav a {
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    display: block;
    font-weight: bold;
  }
  nav a:hover {
    background: #14144a;
    border-radius: 5px;
  }
  section {
    padding: 50px 20px;
    text-align: center;
  }
  .card {
    background: #1f1f4b;
    padding: 25px;
    margin: 20px auto;
    border-radius: 15px;
    width: 340px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    position: relative;
  }
  button {
    background: #ffd700;
    color: #000;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
    transition: 0.3s;
  }
  button:hover {
    background: #e6c200;
  }
  canvas {
    margin-top: 20px;
  }
  #presaleBar {
    background: #333366;
    border-radius: 10px;
    width: 80%;
    height: 25px;
    margin: 15px auto;
    overflow: hidden;
  }
  #presaleProgress {
    background: #ffd700;
    height: 100%;
    width: 0%;
    border-radius: 10px;
    text-align: right;
    padding-right: 10px;
    color: #000;
    font-weight: bold;
    line-height: 25px;
  }
  #walletButton {
    background: #00ffcc;
    color: #000;
  }
  #walletButton:hover {
    background: #00e6b8;
  }
  .spark {
    position: absolute;
    width: 10px; height: 10px;
    background: #ffd700;
    border-radius: 50%;
    animation: sparkAnim 1s linear forwards;
  }
  @keyframes sparkAnim {
    0% { opacity: 1; transform: translateY(0) scale(1);}
    100% { opacity: 0; transform: translateY(-50px) scale(0.5);}
  }
</style>
</head>
<body>

<header>
  <h1>TGC Token Pro Demo</h1>
</header>

<nav>
  <a href="#wallet">Wallet</a>
  <a href="#mining">Mining</a>
  <a href="#staking">Staking</a>
  <a href="#buy-sell">Buy/Sell</a>
  <a href="#pre-sale">Pre-Sale</a>
</nav>

<section id="wallet">
  <h2>Connect Wallet</h2>
  <div class="card">
    <button id="walletButton" onclick="connectWallet()">Connect Wallet</button>
    <p>Your Balance: <span id="walletBalance">0</span> TGC</p>
  </div>
</section>

<section id="mining">
  <h2>Mining Dashboard</h2>
  <div class="card" id="miningCard">
    <p>Your Tokens Mined: <span id="minedTokens">0</span> TGC</p>
    <button onclick="mineTokens()">Mine Tokens</button>
    <canvas id="miningChart" width="280" height="200"></canvas>
  </div>
</section>

<section id="staking">
  <h2>Staking</h2>
  <div class="card">
    <p>Your Staked Tokens: <span id="stakedTokens">0</span> TGC</p>
    <button onclick="stakeTokens()">Stake 10 TGC</button>
    <canvas id="stakingChart" width="280" height="200"></canvas>
  </div>
</section>

<section id="buy-sell">
  <h2>Buy/Sell Tokens</h2>
  <div class="card">
    <button onclick="buyTokens()">Buy 50 TGC</button>
    <button onclick="sellTokens()">Sell 50 TGC</button>
    <p>Your Balance: <span id="balance">0</span> TGC</p>
  </div>
</section>

<section id="pre-sale">
  <h2>Pre-Sale Market</h2>
  <div class="card">
    <p>TGC Pre-Sale Price: 0.01 ETH</p>
    <button onclick="buyPresale()">Buy TGC</button>
    <div id="presaleBar">
      <div id="presaleProgress">0%</div>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Wallet & balances
  let walletConnected = false;
  let balance = 0, mined = 0, staked = 0, presale = 0;

  function connectWallet() {
    if(!walletConnected){
      walletConnected = true;
      balance = 100;
      document.getElementById('walletBalance').innerText = balance;
      document.getElementById('balance').innerText = balance;
      alert('Wallet Connected! Balance: 100 TGC');
      document.getElementById('walletButton').innerText = 'Wallet Connected';
      document.getElementById('walletButton').disabled = true;
    }
  }

  // Mining with spark animation
  const miningCard = document.getElementById('miningCard');
  function mineTokens() {
    if(!walletConnected){ alert('Connect Wallet First!'); return; }
    mined += 5; balance +=5;
    document.getElementById('minedTokens').innerText = mined;
    document.getElementById('walletBalance').innerText = balance;
    document.getElementById('balance').innerText = balance;
    createSpark();
    updateChart(miningChart, mined);
  }

  function createSpark(){
    let spark = document.createElement('div');
    spark.className = 'spark';
    spark.style.left = Math.random()*300+'px';
    spark.style.top = '150px';
    miningCard.appendChild(spark);
    setTimeout(()=>{ miningCard.removeChild(spark); }, 1000);
  }

  function stakeTokens() {
    if(!walletConnected){ alert('Connect Wallet First!'); return; }
    if(balance >= 10){
      staked += 10; balance -= 10;
      document.getElementById('stakedTokens').innerText = staked;
      document.getElementById('walletBalance').innerText = balance;
      document.getElementById('balance').innerText = balance;
      updateChart(stakingChart, staked);
    } else alert('Not enough tokens!');
  }

  function buyTokens(){
    if(!walletConnected){ alert('Connect Wallet First!'); return; }
    balance += 50;
    document.getElementById('walletBalance').innerText = balance;
    document.getElementById('balance').innerText = balance;
  }

  function sellTokens(){
    if(!walletConnected){ alert('Connect Wallet First!'); return; }
    if(balance >= 50){ balance -= 50; document.getElementById('walletBalance').innerText = balance; document.getElementById('balance').innerText = balance; }
    else alert('Not enough tokens to sell!');
  }

  function buyPresale(){
    if(!walletConnected){ alert('Connect Wallet First!'); return; }
    if(balance >= 50){
      balance -= 50; presale += 5;
      let progressPercent = Math.min((presale/100)*100, 100);
      document.getElementById('presaleProgress').style.width = progressPercent + '%';
      document.getElementById('presaleProgress').innerText = Math.floor(progressPercent) + '%';
      document.getElementById('walletBalance').innerText = balance;
      document.getElementById('balance').innerText = balance;
      alert('TGC Pre-Sale Purchase Successful!');
    } else alert('Not enough tokens!');
  }

  // Chart.js setup
  const ctxMining = document.getElementById('miningChart').getContext('2d');
  const ctxStaking = document.getElementById('stakingChart').getContext('2d');

  const miningChart = new Chart(ctxMining, {
    type: 'line',
    data: { labels: [0], datasets: [{ label: 'Mined Tokens', data: [0], borderColor: '#ffd700', borderWidth: 2, fill: false }] },
    options: { responsive: true, animation: { duration: 500 } }
  });

  const stakingChart = new Chart(ctxStaking, {
    type: 'line',
    data: { labels: [0], datasets: [{ label: 'Staked Tokens', data: [0], borderColor: '#00ffcc', borderWidth: 2, fill: false }] },
    options: { responsive: true, animation: { duration: 500 } }
  });

  function updateChart(chart, value){
    chart.data.labels.push(chart.data.labels.length);
    chart.data.datasets[0].data.push(value);
    chart.update();
  }

</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
7KB
Transfer Size
212KB
Content Size
379.0ms
Dom Content Loaded
292.0ms
First Paint
379.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests