<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aptum × Dune</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=DM+Sans:wght@300;400;500&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --white:   #ffffff;
  --off:     #f7f7f5;
  --black:   #0a0a0a;
  --mid:     #5a5a5a;
  --light:   #c8c8c0;
  --border:  #e0e0d8;
  --accent:  #0a0a0a;
  --mono:    'DM Mono', monospace;
  --sans:    'DM Sans', sans-serif;
}

html, body {
  width:100%; height:100%;
  background: var(--white);
  overflow: hidden;
  font-family: var(--mono);
  color: var(--black);
}

#canvas {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index: 0;
  opacity: 0.06;
}

/* ─── WRAPPER ─── */
#stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ─── SCENE BASE ─── */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 4rem;
}
.scene.active { opacity: 1; }

/* ─────────────────────────────
   SCENE 0 — APTUM COLD OPEN
───────────────────────────── */
#s0 { background: var(--white); }

.s0-eyebrow {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
#s0.active .s0-eyebrow { opacity: 1; transform: translateY(0); }

.s0-logo {
  font-family: var(--mono);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--black);
  line-height: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1) 0.4s,
              transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.4s;
}
#s0.active .s0-logo { opacity: 1; transform: translateY(0); }

.s0-dollar {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 1.2rem;
  opacity: 0;
  transition: opacity 0.6s ease 1.0s;
}
#s0.active .s0-dollar { opacity: 1; }

.s0-line {
  width: 0;
  height: 1px;
  background: var(--black);
  margin-top: 2rem;
  transition: width 0.8s cubic-bezier(0.16,1,0.3,1) 0.8s;
}
#s0.active .s0-line { width: min(320px, 60vw); }

/* ─────────────────────────────
   SCENE 1 — X INTEGRATION
───────────────────────────── */
#s1 { background: var(--white); gap: 0; }

.s1-top {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 2.5rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}
#s1.active .s1-top { opacity: 1; }

.s1-brands {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.s1-name {
  font-family: var(--mono);
  font-size: clamp(2.8rem, 9vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.s1-name.right {
  transform: translateX(30px);
}
#s1.active .s1-name { opacity: 1; transform: translateX(0); }
#s1.active .s1-name:first-child { transition-delay: 0.2s; }
#s1.active .s1-name.right { transition-delay: 0.5s; }

.s1-x {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--light);
  opacity: 0;
  transition: opacity 0.5s ease 0.4s;
  line-height: 1;
}
#s1.active .s1-x { opacity: 1; }

.s1-tags {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: 1.2rem;
  opacity: 0;
  transition: opacity 0.5s ease 1.0s;
}
#s1.active .s1-tags { opacity: 1; }

.s1-tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid);
}
.s1-tag.center { color: var(--black); letter-spacing: 0.15em; }

.s1-rule {
  width: 0;
  height: 1px;
  background: var(--border);
  margin-top: 2.5rem;
  transition: width 0.9s cubic-bezier(0.16,1,0.3,1) 0.7s;
}
#s1.active .s1-rule { width: min(500px, 80vw); }

.s1-caption {
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light);
  opacity: 0;
  transition: opacity 0.5s ease 1.4s;
}
#s1.active .s1-caption { opacity: 1; }

/* ─────────────────────────────
   SCENE 2 — QUERY FLOW
───────────────────────────── */
#s2 { background: var(--black); color: var(--white); align-items: flex-start;
      padding: clamp(2rem, 6vw, 5rem); }

.s2-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}
#s2.active .s2-label { opacity: 1; }

.s2-title {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
#s2.active .s2-title { opacity: 1; transform: translateY(0); }

.s2-code {
  background: #111;
  border: 1px solid #222;
  padding: 1.4rem 1.8rem;
  width: min(640px, 90vw);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s;
}
#s2.active .s2-code { opacity: 1; transform: translateY(0); }

.code-line {
  font-family: var(--mono);
  font-size: clamp(0.6rem, 1.4vw, 0.78rem);
  line-height: 1.8;
  white-space: nowrap;
  overflow: hidden;
}
.c-comment  { color: #444; }
.c-key      { color: #888; }
.c-val      { color: #e0e0d8; }
.c-accent   { color: #c8c8c0; }
.c-bright   { color: #ffffff; font-weight: 500; }

.s2-metrics {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease 1.2s;
}
#s2.active .s2-metrics { opacity: 1; }

.s2-metric { }
.s2-metric-val {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
}
.s2-metric-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #555;
  margin-top: 0.2rem;
}

/* ─────────────────────────────
   SCENE 3 — EARN LOOP
───────────────────────────── */
#s3 { background: var(--off); }

.s3-num {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  color: var(--light);
  margin-bottom: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}
#s3.active .s3-num { opacity: 1; }

.s3-title {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 5vw, 3.5rem);
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
#s3.active .s3-title { opacity: 1; transform: translateY(0); }

.s3-flow {
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transition: opacity 0.6s ease 0.8s;
}
#s3.active .s3-flow { opacity: 1; }

.flow-box {
  border: 1px solid var(--black);
  padding: 0.9rem 1.4rem;
  text-align: center;
}
.flow-box-top {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.3rem;
}
.flow-box-val {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1.8vw, 1rem);
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0.02em;
}

.flow-arrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--light);
  padding: 0 0.6rem;
  flex-shrink: 0;
}

.s3-rule {
  width: 1px;
  height: 0;
  background: var(--border);
  margin: 2rem 0;
  transition: height 0.7s ease 1.4s;
}
#s3.active .s3-rule { height: 40px; }

.s3-foot {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease 2s;
}
#s3.active .s3-foot { opacity: 1; }

/* ─────────────────────────────
   SCENE 4 — FINALE
───────────────────────────── */
#s4 {
  background: var(--white);
  justify-content: center;
  align-items: center;
  gap: 0;
}

.s4-pre {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 2.5rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
#s4.active .s4-pre { opacity: 1; }

/* Single row: APTUM × DUNE all on one line */
.s4-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s,
              transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s;
}
#s4.active .s4-lockup { opacity: 1; transform: translateY(0); }

.s4-word {
  font-family: var(--mono);
  font-size: clamp(2.8rem, 9.5vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--black);
}

.s4-cross {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 5vw, 4.5rem);
  font-weight: 300;
  color: var(--light);
  line-height: 1;
  /* nudge cross down slightly to optically center with caps */
  margin-top: 0.05em;
}

.s4-divider {
  width: 0;
  height: 1px;
  background: var(--border);
  margin: 1.8rem 0 1.6rem;
  transition: width 0.8s cubic-bezier(0.16,1,0.3,1) 1.0s;
}
#s4.active .s4-divider { width: min(420px, 70vw); }

.s4-tagline {
  font-family: var(--mono);
  font-size: clamp(0.6rem, 1.4vw, 0.78rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--mid);
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease 1.4s;
}
#s4.active .s4-tagline { opacity: 1; }

.s4-url {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: var(--light);
  margin-top: 0.6rem;
  opacity: 0;
  transition: opacity 0.5s ease 1.8s;
}
#s4.active .s4-url { opacity: 1; }

/* ─── GLOBAL UI CHROME ─── */
#hud-tl {
  position: fixed;
  top: 1.5rem; left: 1.8rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--light);
  z-index: 30;
}
#hud-tr {
  position: fixed;
  top: 1.5rem; right: 1.8rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--light);
  z-index: 30;
}

#progress-wrap {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 40;
}
#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--black);
  transition: width 0.08s linear;
}

#replay-btn {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border);
  color: var(--mid);
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: color 0.2s, border-color 0.2s, opacity 0.4s;
}
#replay-btn.show { opacity: 1; pointer-events: all; }
#replay-btn:hover { color: var(--black); border-color: var(--black); }

/* ticker strip */
#ticker {
  position: fixed;
  bottom: 2rem; left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#ticker.show { opacity: 1; }
#ticker-inner {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: tickerMove 12s linear infinite;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--light);
}
@keyframes tickerMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
</style>
</head>
<body>

<canvas id="canvas"></canvas>

<!-- HUD Chrome -->
<div id="hud-tl">APTUM</div>
<div id="hud-tr" id="hud-tr">—</div>

<!-- Progress -->
<div id="progress-wrap"><div id="progress-bar"></div></div>

<!-- Ticker (shown during scene 1) -->
<div id="ticker">
  <div id="ticker-inner">
    <span>$A · BUILT ON BASE</span>
    <span>·</span>
    <span>DUNE ANALYTICS</span>
    <span>·</span>
    <span>100+ CHAINS</span>
    <span>·</span>
    <span>ONCHAIN DATA</span>
    <span>·</span>
    <span>SKILL CREATION</span>
    <span>·</span>
    <span>REAL REVENUE</span>
    <span>·</span>
    <span>$A · BUILT ON BASE</span>
    <span>·</span>
    <span>DUNE ANALYTICS</span>
    <span>·</span>
    <span>100+ CHAINS</span>
    <span>·</span>
    <span>ONCHAIN DATA</span>
    <span>·</span>
    <span>SKILL CREATION</span>
    <span>·</span>
    <span>REAL REVENUE</span>
    <span>·</span>
  </div>
</div>

<!-- STAGE -->
<div id="stage">

  <!-- S0: APTUM -->
  <div class="scene" id="s0">
    <div class="s0-eyebrow">Autonomous AI Agent · Built on Base</div>
    <div class="s0-logo">APTUM</div>
    <div class="s0-dollar">$A — The agent that earns.</div>
    <div class="s0-line"></div>
  </div>

  <!-- S1: × DUNE -->
  <div class="scene" id="s1">
    <div class="s1-top">01 — Integration</div>
    <div class="s1-brands">
      <div class="s1-name">APTUM</div>
      <div class="s1-x">×</div>
      <div class="s1-name right">DUNE</div>
    </div>
    <div class="s1-tags">
      <div class="s1-tag">AI Agent · $A</div>
      <div class="s1-tag center">Onchain Intelligence</div>
      <div class="s1-tag">Analytics · 100+ chains</div>
    </div>
    <div class="s1-rule"></div>
    <div class="s1-caption">The agent now reads the chain.</div>
  </div>

  <!-- S2: QUERY -->
  <div class="scene" id="s2">
    <div class="s2-label">02 — Capability</div>
    <div class="s2-title">Query any chain.<br>Act on the data.</div>
    <div class="s2-code">
      <div class="code-line c-comment">// aptum queries dune in real time</div>
      <div class="code-line"><span class="c-key">GET </span><span class="c-val">/api/v1/dex/pairs/ethereum</span></div>
      <div class="code-line"><span class="c-key">X-Dune-API-Key: </span><span class="c-accent">••••••••••••</span></div>
      <div class="code-line">&nbsp;</div>
      <div class="code-line c-comment">// response → agent decision</div>
      <div class="code-line"><span class="c-key">volume_24h: </span><span class="c-bright">$2.1B</span></div>
      <div class="code-line"><span class="c-key">top_pair:   </span><span class="c-bright">WETH / USDC</span></div>
      <div class="code-line"><span class="c-key">action:     </span><span class="c-bright">→ analyze · earn · burn $A</span></div>
    </div>
    <div class="s2-metrics">
      <div class="s2-metric">
        <div class="s2-metric-val">100+</div>
        <div class="s2-metric-label">Chains indexed</div>
      </div>
      <div class="s2-metric">
        <div class="s2-metric-val">3PB</div>
        <div class="s2-metric-label">Data available</div>
      </div>
      <div class="s2-metric">
        <div class="s2-metric-val">&lt;200ms</div>
        <div class="s2-metric-label">Avg response</div>
      </div>
    </div>
  </div>

  <!-- S3: LOOP -->
  <div class="scene" id="s3">
    <div class="s3-num">03 — Mechanism</div>
    <div class="s3-title">The earn loop.</div>
    <div class="s3-flow">
      <div class="flow-box">
        <div class="flow-box-top">Dune</div>
        <div class="flow-box-val">Query</div>
      </div>
      <div class="flow-arrow">→</div>
      <div class="flow-box">
        <div class="flow-box-top">Aptum</div>
        <div class="flow-box-val">Analyze</div>
      </div>
      <div class="flow-arrow">→</div>
      <div class="flow-box">
        <div class="flow-box-top">Revenue</div>
        <div class="flow-box-val">Earn</div>
      </div>
      <div class="flow-arrow">→</div>
      <div class="flow-box">
        <div class="flow-box-top">$A Token</div>
        <div class="flow-box-val">Burn</div>
      </div>
    </div>
    <div class="s3-rule"></div>
    <div class="s3-foot">Every query compounds the deflationary loop.</div>
  </div>

  <!-- S4: FINALE -->
  <div class="scene" id="s4">
    <div class="s4-pre">The agent that reads the chain.</div>
    <div class="s4-lockup">
      <span class="s4-word">APTUM</span>
      <span class="s4-cross">×</span>
      <span class="s4-word">DUNE</span>
    </div>
    <div class="s4-divider"></div>
    <div class="s4-tagline">Real revenue. Deflationary by design. Now onchain-aware.</div>
    <div class="s4-url">aptum.fun</div>
  </div>

</div>

<button id="replay-btn">↺ Replay</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// ─────────────────────────────────────────
// SUBTLE THREE.JS BG — just a faint noise/grid
// ─────────────────────────────────────────
const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xffffff, 0);

const scene3 = new THREE.Scene();
const cam3 = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100);
cam3.position.z = 5;

// particle grid — very light, just texture
const N = 600;
const pos = new Float32Array(N * 3);
for (let i = 0; i < N; i++) {
  pos[i*3]   = (Math.random() - 0.5) * 16;
  pos[i*3+1] = (Math.random() - 0.5) * 10;
  pos[i*3+2] = (Math.random() - 0.5) * 4;
}
const pgeo = new THREE.BufferGeometry();
pgeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));

const pmat = new THREE.ShaderMaterial({
  uniforms: { uT: { value: 0 } },
  vertexShader: `
    uniform float uT;
    void main() {
      vec3 p = position;
      p.y += sin(uT * 0.4 + position.x * 0.5) * 0.05;
      vec4 mv = modelViewMatrix * vec4(p, 1.0);
      gl_PointSize = 1.5 * (200.0 / -mv.z);
      gl_Position = projectionMatrix * mv;
    }
  `,
  fragmentShader: `
    void main() {
      float d = length(gl_PointCoord - 0.5);
      if (d > 0.5) discard;
      gl_FragColor = vec4(0.0, 0.0, 0.0, 0.25 * (1.0 - d * 2.0));
    }
  `,
  transparent: true, depthWrite: false,
  blending: THREE.NormalBlending,
});
scene3.add(new THREE.Points(pgeo, pmat));

window.addEventListener('resize', () => {
  cam3.aspect = innerWidth / innerHeight;
  cam3.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

// ─────────────────────────────────────────
// SEQUENCER
// ─────────────────────────────────────────
const TOTAL = 16000; // ms

// [id, inMs, outMs]
const SCENES_DEF = [
  ['s0', 0,     3000 ],
  ['s1', 3200,  6500 ],
  ['s2', 6700,  10200],
  ['s3', 10400, 13200],
  ['s4', 13400, 99999],
];

const hudTr  = document.getElementById('hud-tr');
const pbar   = document.getElementById('progress-bar');
const ticker = document.getElementById('ticker');
const replay = document.getElementById('replay-btn');

let t0 = null;
let raf;

function setActive(id, yes) {
  const el = document.getElementById(id);
  if (!el) return;
  if (yes) el.classList.add('active');
  else el.classList.remove('active');
}

function tick(ts) {
  if (!t0) t0 = ts;
  const e = ts - t0;
  const prog = Math.min(e / TOTAL, 1);

  // progress bar
  pbar.style.width = (prog * 100).toFixed(2) + '%';

  // HUD clock
  hudTr.textContent = (e / 1000).toFixed(1) + 's';

  // scene switching
  SCENES_DEF.forEach(([id, inT, outT]) => {
    setActive(id, e >= inT && e < outT);
  });

  // ticker during s1 and s2
  if (e > 3200 && e < 10200) ticker.classList.add('show');
  else ticker.classList.remove('show');

  // replay button at end
  if (e > 15000) replay.classList.add('show');

  // THREE anim
  const t = e * 0.001;
  pmat.uniforms.uT.value = t;
  scene3.rotation.y = t * 0.015;
  renderer.render(scene3, cam3);

  if (prog < 1) raf = requestAnimationFrame(tick);
  else {
    renderer.render(scene3, cam3);
  }
}

function start() {
  if (raf) cancelAnimationFrame(raf);
  t0 = null;
  pbar.style.width = '0%';
  replay.classList.remove('show');
  ticker.classList.remove('show');
  SCENES_DEF.forEach(([id]) => setActive(id, false));
  raf = requestAnimationFrame(tick);
}

replay.addEventListener('click', start);
start();
</script>
</body>
</html>