index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DEAD SIGNAL</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ============================================================
       INTRO SCREEN
       ============================================================ -->
  <div id="intro">
    <div class="intro-logo">DEAD SIGNAL</div>
    <div class="intro-sub">EMERGENCY BROADCAST SYSTEM — UPTIME: 14 MONTHS</div>
    <div class="intro-desc">
      Fourteen months ago, people stopped gathering.<br>
      Cities emptied. Governments fell quiet.<br>
      A few voices remain on the dial.<br><br>
      You are alone in a radio station.<br>
      Find out what happened.
    </div>
    <div class="intro-buttons">
      <button class="btn" onclick="startGame(false)"
        style="font-size:14px;padding:10px 28px;letter-spacing:3px;">
        POWER ON
      </button>
      <button class="btn danger" id="continue-btn" onclick="startGame(true)"
        style="display:none;font-size:14px;padding:10px 28px;letter-spacing:3px;">
        CONTINUE
      </button>
    </div>
    <div id="intro-save-note" style="margin-top:14px;font-size:10px;color:var(--text-dim);"></div>
  </div>

  <!-- ============================================================
       NEW GAME+ CONFIRMATION MODAL
       ============================================================ -->
  <div id="ng-confirm">
    <div class="ng-box">
      <h3>NEW GAME+</h3>
      <p>
        Your current run will be saved to the Journal.<br>
        A new playthrough begins. Signals carry deeper lore.<br>
        Some frequencies reveal what was hidden before.<br><br>
        Nothing is lost. Everything changes.
      </p>
      <div class="btn-row">
        <button class="btn danger" onclick="confirmNewGame()">[ BEGIN ]</button>
        <button class="btn" onclick="document.getElementById('ng-confirm').classList.remove('show')">[ CANCEL ]</button>
      </div>
    </div>
  </div>

  <!-- ============================================================
       MAIN GAME CONTENT
       ============================================================ -->
  <div id="main-content">
    <div id="app">

      <!-- Header -->
      <div class="header">
        <div class="logo">DEAD SIGNAL</div>
        <div class="header-right">
          <span class="ng-badge" id="ng-badge">NG+</span>
          <div class="day-counter">
            IN-GAME DAY
            <span id="day-display">1</span>
          </div>
        </div>
      </div>

      <!-- Tabs -->
      <div class="tabs">
        <button class="tab active"  onclick="switchTab('radio')">[ RADIO ]</button>
        <button class="tab"         onclick="switchTab('archive')">
          [ ARCHIVE ] <span id="archive-count" style="color:var(--green-dim)"></span>
        </button>
        <button class="tab"         onclick="switchTab('ending')">[ CONCLUSIONS ]</button>
        <button class="tab"         onclick="switchTab('journal')">
          [ JOURNAL ] <span id="journal-count" style="color:var(--text-dim)"></span>
        </button>
      </div>

      <!-- ======================================================
           RADIO SCREEN
           ====================================================== -->
      <div class="screen active" id="screen-radio">
        <div class="radio-layout">

          <!-- Left column: tuner + transmission -->
          <div>
            <div class="panel">
              <div class="panel-title">// FREQUENCY TUNER</div>

              <div class="freq-display" id="freq-display">88.0</div>

              <div class="signal-meter" id="signal-meter">
                <div class="sig-bar" id="bar0"></div>
                <div class="sig-bar" id="bar1"></div>
                <div class="sig-bar" id="bar2"></div>
                <div class="sig-bar" id="bar3"></div>
                <div class="sig-bar" id="bar4"></div>
                <div class="sig-bar" id="bar5"></div>
                <div class="sig-bar" id="bar6"></div>
              </div>

              <div class="dial-container">
                <div class="dial-track">
                  <input
                    type="range"
                    id="dial"
                    min="880"
                    max="1220"
                    value="880"
                    step="1"
                    oninput="onDialMove(this.value)"
                  >
                </div>
                <div class="dial-labels">
                  <span>88.0</span>
                  <span>94.0</span>
                  <span>100.0</span>
                  <span>107.0</span>
                  <span>114.0</span>
                  <span>122.0</span>
                </div>
              </div>

              <div class="audio-row">
                <button class="btn" id="static-btn" onclick="toggleStatic()">
                  [ STATIC: ON ]
                </button>
              </div>
            </div>

            <div class="panel" style="margin-top:12px;">
              <div class="panel-title">// INCOMING TRANSMISSION</div>
              <div class="transmission" id="transmission-box">
                <span class="static-text">... scanning ... no signal detected ... adjust frequency ...</span>
              </div>
              <div class="log-btn-row" id="log-row" style="display:none;">
                <button class="btn" id="log-btn" onclick="logCurrentFragment()">
                  [ LOG TO ARCHIVE ]
                </button>
                <span class="logged-badge" id="logged-indicator"></span>
              </div>
            </div>

            <div class="next-day-row">
              <button class="btn danger" onclick="advanceDay()">[ NEXT DAY &#8594; ]</button>
              <div class="next-day-note">
                Advance time to unlock new transmissions.<br>
                Some signals go silent. Some appear.
              </div>
            </div>

            <!-- NG+ button removed from here, only managed in Conclusions -->
          </div>

          <!-- Right column: known frequencies + session stats -->
          <div>
            <div class="panel">
              <div class="panel-title">// KNOWN FREQUENCIES</div>
              <div class="known-signals" id="known-signals-list">
                <div style="font-size:11px;color:var(--text-dim);">
                  Scan the dial to discover signals.
                </div>
              </div>
            </div>

            <div class="panel" style="margin-top:12px;">
              <div class="panel-title">// SESSION</div>
              <div style="font-size:11px;color:var(--text-dim);line-height:2.2;">
                Fragments: <span id="stat-logged"  style="color:var(--green)">0</span><br>
                Sources:   <span id="stat-sources" style="color:var(--green)">0</span>/6<br>
                Days:      <span id="stat-days"    style="color:var(--amber)">1</span><br>
                Run:       <span id="stat-run"     style="color:var(--amber)">1</span>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- ======================================================
           ARCHIVE SCREEN
           ====================================================== -->
      <div class="screen" id="screen-archive">
        <div class="archive-header">
          <div style="font-size:11px;color:var(--text-dim);letter-spacing:1px;">
            LOGGED TRANSMISSIONS
          </div>
          <div style="display:flex;gap:6px;">
            <button class="view-btn active" id="vg" onclick="setView('grid')">GRID</button>
            <button class="view-btn"        id="vt" onclick="setView('timeline')">TIMELINE</button>
          </div>
        </div>

        <div class="archive-filter" id="filter-bar">
          <button class="filter-btn active" onclick="filterArchive('all')">ALL</button>
        </div>

        <div id="archive-grid"     class="archive-grid"></div>
        <div id="archive-timeline" class="timeline" style="display:none;"></div>
      </div>

      <!-- ======================================================
           CONCLUSIONS (ENDINGS) SCREEN
           ====================================================== -->
      <div class="screen" id="screen-ending">
        <div id="ending-content"></div>
      </div>

      <!-- ======================================================
           JOURNAL SCREEN
           ====================================================== -->
      <div class="screen" id="screen-journal">
        <div style="font-size:11px;color:var(--text-dim);letter-spacing:1px;margin-bottom:16px;">
          PREVIOUS PLAYTHROUGHS — ARCHIVED PERMANENTLY
        </div>
        <div id="journal-grid" class="journal-grid"></div>
      </div>

    </div>
  </div>

  <!-- ============================================================
       STATUS BAR
       ============================================================ -->
  <div class="status-bar">
    <div>
      <span class="status-dot" id="status-dot"></span>
      <span id="status-text">STANDBY — NO SIGNAL</span>
    </div>
    <div>
      DAY <span id="status-day">1</span> //
      <span id="status-freq">88.0</span> MHz //
      RUN <span id="status-run">1</span>
    </div>
  </div>

  <!-- ============================================================
       RESET PROGRESS CONFIRMATION MODAL
       ============================================================ -->
  <div id="reset-confirm" class="modal-overlay">
    <div class="ng-box">
      <h3>RESET ALL PROGRESS</h3>
      <p>
        WARNING: This will permanently delete all your progress, archived runs in the Journal, unlocked endings, and your current save.<br><br>
        This action cannot be undone. Are you sure you want to proceed?
      </p>
      <div class="btn-row">
        <button class="btn danger" onclick="resetAllProgress()">[ RESET ]</button>
        <button class="btn" onclick="document.getElementById('reset-confirm').classList.remove('show')">[ CANCEL ]</button>
      </div>
    </div>
  </div>

  <!-- ============================================================
       RETURN TO BASE GAME CONFIRMATION MODAL
       ============================================================ -->
  <div id="base-game-confirm" class="modal-overlay">
    <div class="ng-box">
      <h3>RETURN TO BASE GAME</h3>
      <p>
        Your current NG+ run will be saved to the Journal.<br>
        You will return to the base game dial settings.<br><br>
        Proceed back to the base game?
      </p>
      <div class="btn-row">
        <button class="btn danger" onclick="confirmBaseGame()">[ RETURN ]</button>
        <button class="btn" onclick="document.getElementById('base-game-confirm').classList.remove('show')">[ CANCEL ]</button>
      </div>
    </div>
  </div>

  <!-- ============================================================
       NEXT PLAYTHROUGH CONFIRMATION MODAL
       ============================================================ -->
  <div id="next-run-confirm" class="modal-overlay">
    <div class="ng-box">
      <h3>BEGIN NEXT PLAYTHROUGH</h3>
      <p>
        Your current run will be saved to the Journal.<br>
        A new playthrough in the base game will begin, allowing you to seek other endings.<br><br>
        Nothing is lost. Continue search?
      </p>
      <div class="btn-row">
        <button class="btn danger" onclick="confirmNextRun()">[ BEGIN ]</button>
        <button class="btn" onclick="document.getElementById('next-run-confirm').classList.remove('show')">[ CANCEL ]</button>
      </div>
    </div>
  </div>

  <!-- ============================================================
       LOG VIEWER MODAL
       ============================================================ -->
  <div id="log-viewer-modal" class="modal-overlay">
    <div class="log-viewer-box">
      <div class="log-viewer-header">
        <span id="log-viewer-title">// ARCHIVED TRANSMISSION</span>
        <button class="close-btn" onclick="document.getElementById('log-viewer-modal').classList.remove('show')">&times;</button>
      </div>
      <div id="log-viewer-content" class="log-viewer-body"></div>
      <div class="log-viewer-footer">
        <button class="btn" onclick="document.getElementById('log-viewer-modal').classList.remove('show')">[ CLOSE ]</button>
      </div>
    </div>
  </div>

  <script src="data.js"></script>
  <script src="script.js"></script>
</body>
</html>