DocsLog in

A dark, mysterious five-act ARG built around hidden archives and forgotten witnesses.

Viewing files at commit 8b219ea0dd7aCommit detailsView latest

assets/js/pages/landing.js 90 lines · 3.3 KB · javascript
1
// Landing page and intro sequences
2
3
const LandingPage = {
4
  render() {
5
    return `
6
      <section class="hero landing-hero">
7
        <div class="glitch-text" data-text="THE HOLLOW ARCHIVE">
8
          THE HOLLOW ARCHIVE
9
        </div>
10
        <p class="lead">An interactive experience about forgotten names, hidden ledgers, and the witness who remembers.</p>
11
        <p class="subtitle">Completion: ${GameState.getCompletion()}%</p>
12
      </section>
13
14
      <section class="panel intro-panel">
15
        <p class="panel-title">CLASSIFIED TRANSMISSION</p>
16
        <blockquote>
17
          "The archive does not keep records. It keeps what was never meant to be remembered. Some names are erased from history. Others fade into silence. But they are not gone—they are *hidden*. And hidden things wait for those patient enough to seek them."
18
        </blockquote>
19
      </section>
20
21
      <section class="panel action-panel">
22
        <p class="panel-title">ARCHIVE ACCESS PROTOCOLS</p>
23
24
        <div class="action-grid">
25
          <button class="action-btn" data-action="begin">
26
            <span class="action-icon">►</span>
27
            BEGIN ACT I
28
          </button>
29
30
          ${GameState.unlockedSections.has('secrets') ? `
31
            <button class="action-btn secret-btn" data-action="secrets">
32
              <span class="action-icon">⚡</span>
33
              HIDDEN SECTIONS
34
            </button>
35
          ` : ''}
36
37
          ${GameState.completedActs.size > 0 ? `
38
            <button class="action-btn" data-action="continue">
39
              <span class="action-icon">⟳</span>
40
              CONTINUE (ACT ${GameState.currentAct + 1})
41
            </button>
42
          ` : ''}
43
        </div>
44
      </section>
45
46
      <section class="panel info-panel">
47
        <p class="panel-title">REQUIRED READING</p>
48
        <ul class="info-list">
49
          <li>📖 Five acts of discovery await.</li>
50
          <li>🔐 Cipher knowledge will be tested.</li>
51
          <li>📝 Collect evidence as you progress.</li>
52
          <li>🔗 Everything is connected. Nothing is coincidence.</li>
53
          <li>⚠️ Some secrets are meant to stay hidden.</li>
54
        </ul>
55
      </section>
56
57
      <section class="panel social-panel">
58
        <p class="panel-title">TRANSMISSION FREQUENCY</p>
59
        <p>Found something? Share your discoveries.</p>
60
        <div class="social-buttons">
61
          <button onclick="navigator.clipboard.writeText(window.location.href)">Copy Link</button>
62
          <button onclick="window.open('https://twitter.com/intent/tweet?text=I%27m%20exploring%20The%20Hollow%20Archive%20%23ARG')">Share on Twitter</button>
63
        </div>
64
      </section>
65
    `;
66
  },
67
68
  attach() {
69
    document.querySelectorAll('.action-btn').forEach(btn => {
70
      btn.addEventListener('click', (e) => {
71
        const action = e.currentTarget.dataset.action;
72
        if (action === 'begin') {
73
          this.startGame();
74
        } else if (action === 'continue') {
75
          UIRouter.navigate('act' + GameState.currentAct);
76
        } else if (action === 'secrets') {
77
          UIRouter.navigate('secrets');
78
        }
79
      });
80
    });
81
  },
82
83
  startGame() {
84
    GameState.unlockSection('act1');
85
    GameState.currentAct = 0;
86
    GameState.currentPage = 'act1';
87
    GameState.save();
88
    UIRouter.navigate('act1');
89
  }
90
};