chrono.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="CHRONO — a free GTA V mod: superpowers, a real wanted-star HUD, and a mood system. Open source, 526 automated tests. By Firdaus (FIRDAUS BUILDS).">
  <meta property="og:title" content="CHRONO · FIRDAUS BUILDS — Superpower Justice System">
  <meta property="og:description" content="Free GTA V mod. Superpowers, wanted-star HUD, mood system. Open source, 526 tests. Free forever.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://fdfrontdev.github.io/web-profile-deploy/chrono.html">
  <meta property="og:image" content="https://fdfrontdev.github.io/web-profile-deploy/chrono-shots/shot-v2-1.jpg">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
  <title>CHRONO · FIRDAUS BUILDS — Superpower Justice System</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --bg: #0a0a0a; --bg-card: #141414; --bg-card-hover: #1c1c1c;
      --text: #e8e8e8; --text-secondary: #888888; --text-muted: #555555;
      --accent: #FFD700; --accent-hover: #ccb400; --accent-glow: rgba(255,215,0,0.14);
      --border: #222222; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --max-width: 900px;
    }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; }
    a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
    a:hover { color: var(--accent-hover); }
    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10,10,10,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
    .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 56px; }
    .nav-logo { font-weight: 600; font-size: 0.9rem; letter-spacing: -0.02em; color: var(--text); }
    .nav-logo span { color: var(--accent); }
    .nav-links { display: flex; gap: 22px; list-style: none; }
    .nav-links a { font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); }
    .nav-links a:hover { color: var(--text); }
    main { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
    .hero { padding: 120px 0 60px; text-align: center; }
    .hero h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
    .hero h1 span { color: var(--accent); }
    .hero .tagline { margin-top: 16px; font-size: 1.25rem; color: var(--text); font-weight: 500; max-width: 660px; margin-left: auto; margin-right: auto; }
    .hero .proof { margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }
    .hero-shot { margin-top: 36px; }
    .hero-shot img { width: 100%; max-width: 760px; margin: 0 auto; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
    .hero-shot .proof { margin-top: 12px; }
    .cta-row { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn { display: inline-block; padding: 12px 26px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; transition: all 0.2s; }
    .btn-primary { background: var(--accent); color: #0a0a0a; }
    .btn-primary:hover { background: var(--accent-hover); color: #0a0a0a; }
    .btn-ghost { border: 1px solid var(--border); color: var(--text); }
    .btn-ghost:hover { border-color: var(--text-muted); color: var(--text); }
    section { padding: 48px 0; border-top: 1px solid var(--border); }
    section h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
    section .sub { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 28px; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
    .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 22px; transition: background 0.2s; }
    .card:hover { background: var(--bg-card-hover); }
    .card h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; }
    .card p { font-size: 0.9rem; color: var(--text-secondary); }
    .card .kbd { display: inline-block; background: #1f1f1f; border: 1px solid var(--border); border-radius: 5px; padding: 1px 8px; font-family: monospace; font-size: 0.82rem; color: var(--accent); margin: 0 2px; }
    .story { background: var(--bg-card); border-left: 3px solid var(--accent); border-radius: 8px; padding: 22px 26px; }
    .story p { color: var(--text-secondary); font-size: 0.95rem; }
    .story strong { color: var(--text); }
    .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
    .shots img { width: 100%; border-radius: 8px; border: 1px solid var(--border); aspect-ratio: 16/9; object-fit: cover; }
    table.keys { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    table.keys td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
    table.keys td:first-child { width: 140px; color: var(--accent); font-family: monospace; font-size: 0.85rem; }
    ol.steps { list-style: none; counter-reset: step; }
    ol.steps li { counter-increment: step; padding: 10px 0 10px 44px; position: relative; color: var(--text-secondary); font-size: 0.95rem; }
    ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-glow); border: 1px solid var(--accent); color: var(--accent); font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
    .support-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 22px; }
    .tier { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
    .tier h4 { font-size: 1rem; margin-bottom: 4px; }
    .tier .price { color: var(--accent); font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; }
    .tier p { font-size: 0.82rem; color: var(--text-secondary); }
    footer { border-top: 1px solid var(--border); padding: 32px 0 48px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
    footer a { color: var(--text-secondary); }
    footer a:hover { color: var(--text); }
    @media (max-width: 640px) {
      .nav-links { display: none; }
      .hero { padding-top: 100px; }
      .hero h1 { font-size: 2rem; }
    }
  </style>
</head>
<body>
  <nav>
    <div class="nav-inner">
      <div class="nav-logo">CHRONO <span>·</span> FIRDAUS BUILDS</div>
      <ul class="nav-links">
        <li><a href="#features">Features</a></li>
        <li><a href="#shots">Screenshots</a></li>
        <li><a href="#install">Install</a></li>
        <li><a href="#support">Support</a></li>
      </ul>
    </div>
  </nav>

  <main>
    <header class="hero">
      <h1>CHRONO — <span>Justice System for GTA V</span></h1>
      <p class="tagline">Most mods hand you powers. CHRONO gives you consequences: witnesses, news reports, notoriety, and a police force that remembers your face.</p>
      <p class="proof">Free forever · open source · 526 automated tests · zero warnings</p>
      <div class="cta-row">
        <a class="btn btn-primary" href="https://github.com/fdfrontdev/gtav-chrono/releases/download/v1.0.2/Chrono-v1.0.2.zip">Download (zip, 2.7 MB)</a>
        <a class="btn btn-ghost" href="https://github.com/fdfrontdev/gtav-chrono/releases/download/v1.0.2/Chrono-Setup-1.0.2.exe">One-click installer</a>
        <a class="btn btn-ghost" href="https://github.com/fdfrontdev/gtav-chrono">Source code</a>
      </div>
      <div class="hero-shot">
        <video controls playsinline preload="metadata" poster="chrono-shots/chrono-poster.jpg" style="width:100%;max-width:520px;margin:0 auto;display:block;border-radius:12px;border:1px solid var(--border);box-shadow:0 24px 70px rgba(0,0,0,0.55);background:#000;">
          <source src="chrono-shots/chrono-short-001.mp4" type="video/mp4">
        </video>
        <p class="proof">The dash, cut from real gameplay. Watch with sound.</p>
      </div>
    </header>

    <section id="features">
      <h2>What's in it</h2>
      <p class="sub">Six systems, tested the boring professional way. Powers are the vehicle; consequences are the product.</p>
      <div class="grid">
        <div class="card">
          <h3>WEBNET live feed</h3>
          <p>The city reacts. Freeze time in Baytree and the news reports it: "witnesses baffled by a frozen moment." Every power leaves a paper trail.</p>
        </div>
        <div class="card">
          <h3>Notoriety &amp; Fame</h3>
          <p>Commit crimes and notoriety climbs. Stay clean and fame builds. Two currencies, two paths through the same city.</p>
        </div>
        <div class="card">
          <h3>Face on File</h3>
          <p>Caught on camera and your identity is burned. Clean Identity resets it — if you can get out clean. The wanted-star HUD renders properly too (took three tries).</p>
        </div>
        <div class="card">
          <h3>Custody &amp; escort</h3>
          <p>Arrested? Cops stop chasing during custody. Escort rides re-seat a bailer and flush the chase at ride start.</p>
        </div>
        <div class="card">
          <h3>Superpowers</h3>
          <p>The vehicle: dash, time stop, invisibility, force push, from the <span class="kbd">Shift+0</span> menu.</p>
        </div>
        <div class="card">
          <h3>Mood system</h3>
          <p>Walking outdoors recovers you. Cruising holds steady. Watching TV gives a boost. Parked in a car does nothing, because that's not rest.</p>
        </div>
      </div>
    </section>

    <section>
      <h2>The honest part</h2>
      <div class="story">
        <p><strong>Why a justice system at all:</strong> I got bored of god-mode mods. Powers without consequences are just a cheat menu — so I built the paper trail.</p>
        <p style="margin-top:12px"><strong>Why this mod has tests at all:</strong> my first public build crashed the game at every launch. I blamed another mod — it was my own code. My AI pair programmer had invented a native function that doesn't exist in the game, and I shipped it without auditing the hash. One hash, one audit, one 4:33am deploy later, it was fixed. 526 tests now cover it.</p>
      </div>
    </section>

    <section id="shots">
      <h2>Screenshots</h2>
      <p class="sub">Real gameplay, captured in-game. No renders, no mockups.</p>
      <div class="shots">
        <img src="chrono-shots/shot-v2-1.jpg" alt="The dash — caught mid-stride, the live feed logs every move" loading="lazy">
        <img src="chrono-shots/shot-v2-2.jpg" alt="Chrono ready — press Shift+0: wanted, notoriety, energy" loading="lazy">
        <img src="chrono-shots/shot-v2-3.jpg" alt="Aftermath — the street remembers what happened" loading="lazy">
        <img src="chrono-shots/shot-v2-4.jpg" alt="Arrested — court in seven seconds, face on file" loading="lazy">
        <img src="chrono-shots/shot-v2-5.jpg" alt="Bolingbroke — day 2 of 30, warrant active" loading="lazy">
        <img src="chrono-shots/shot-v2-6.jpg" alt="Prison Break 4 — no stamina, no mercy" loading="lazy">
      </div>
    </section>

    <section id="install">
      <h2>Install</h2>
      <p class="sub">Two ways in — the installer handles dependencies, the zip is for manual setups.</p>
      <ol class="steps">
        <li>Install <a href="http://www.dev-c.com/gta4/scripthookv/">Script Hook V</a> and <a href="https://github.com/scripthookvdotnet/scripthookvdotnet/releases">Script Hook V .NET</a> (skip if using the installer).</li>
        <li>Copy the <code>Chrono</code> folder into <code>GTA V\scripts\</code>.</li>
        <li>Launch the game. <span class="kbd">Shift+0</span> for the menu.</li>
      </ol>
      <table class="keys" style="margin-top:20px">
        <tr><td>Shift+0</td><td>Power menu</td></tr>
        <tr><td>X</td><td>Dash</td></tr>
        <tr><td>Z</td><td>Time stop</td></tr>
        <tr><td>B</td><td>Invisibility</td></tr>
        <tr><td>G</td><td>Interact</td></tr>
      </table>
    </section>

    <section id="support">
      <h2>Support the build</h2>
      <p class="sub">The mod stays free. If it made your game better, a small pledge keeps a solo builder building full-time.</p>
      <div class="support-cards">
        <div class="tier">
          <h4>Supporter</h4>
          <div class="price">$3/mo</div>
          <p>Credits in the README + early dev-logs.</p>
        </div>
        <div class="tier">
          <h4>Builder</h4>
          <div class="price">$7/mo</div>
          <p>Feature voting + monthly dev-log.</p>
        </div>
        <div class="tier">
          <h4>Patron</h4>
          <div class="price">$15/mo</div>
          <p>Name in the mod's credits + direct line to the roadmap.</p>
        </div>
      </div>
      <div class="cta-row" style="margin-top:24px">
        <a class="btn btn-primary" href="https://patreon.com/FirdausBuilds">Join on Patreon</a>
      </div>
    </section>
  </main>

  <footer>
    Made by Firdaus — <a href="https://fdfrontdev.github.io/web-profile-deploy/">FIRDAUS BUILDS</a> · <a href="https://www.youtube.com/@firdausbuilds">YouTube</a> · <a href="https://github.com/fdfrontdev/gtav-chrono">GitHub</a><br>
    CHRONO is a fan-made mod. Not affiliated with Rockstar Games or Take-Two Interactive.
  </footer>
</body>
</html>