pac-fpom/index.html at dev · massivedev0/pac-fpom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="icon" type="image/png" href="./assets/fpom/fpom-logo-transparent.png" />
    <title>FPOM Meme Hunt</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=Bungee&family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>
  <body>
    <main class="layout">
      <section id="game-shell" class="game-shell" aria-label="FPOM game shell">
        <canvas id="game-canvas" width="960" height="640"></canvas>
        <button id="mobile-pause-btn" class="mobile-pause-btn" type="button" hidden>Pause</button>
        <button id="top-wallet-btn" class="top-wallet-btn" type="button">Connect Wallet</button>
        <button id="dev-win-btn" class="dev-win-btn" type="button" hidden>Victory</button>
        <div id="wallet-modal" class="wallet-modal" hidden>
          <div class="wallet-modal-card" role="dialog" aria-modal="true" aria-label="Connect wallet">
            <div class="wallet-modal-header">
              <h2>Connect Wallet</h2>
              <button id="wallet-modal-close" class="wallet-modal-close" type="button" aria-label="Close wallet modal">
                x
              </button>
            </div>
            <p id="wallet-modal-subtitle" class="wallet-modal-subtitle" hidden></p>
            <div id="wallet-options" class="wallet-options"></div>
          </div>
        </div>
        <div class="menu-overlay" id="menu-overlay" data-overlay-mode="title">
          <img class="overlay-logo" src="./assets/fpom/fpom-logo-transparent.png" alt="FPOM logo" />
          <h1>FPOM Meme Hunt</h1>
          <p class="subtitle">No more scams. Gimme a serious fake.</p>
          <div id="reward-panel" class="reward-panel" hidden>
            <p id="reward-summary" class="reward-summary">Round reward: 0 FPOM</p>
            <div id="wallet-connect-row" class="reward-row">
              <p id="wallet-status" class="wallet-status">Use the Connect Wallet button in the top-right corner</p>
            </div>
            <p class="reward-note">
              To claim rewards, complete Like + Retweet of
              <a id="promo-tweet-link" href="#" target="_blank" rel="noopener noreferrer">X_PROMO_TWEET</a>
            </p>
            <div id="x-profile-row" class="reward-row">
              <label class="reward-label" for="x-profile">X profile URL</label>
              <input
                id="x-profile"
                class="reward-input"
                type="url"
                inputmode="url"
                autocomplete="off"
                placeholder="https://x.com/account"
                maxlength="200"
              />
            </div>
            <button id="claim-btn" class="claim-btn" type="button">Claim FPOM</button>
            <p id="claim-status" class="claim-status" role="status" aria-live="polite"></p>
          </div>
          <button id="start-btn" type="button">Start Hunt</button>
          <p class="hint">Move: WASD / Arrows · Power hunt: eat red orbs<br />F: fullscreen · P: pause</p>
          <nav class="menu-links" aria-label="FPOM links">
            <a id="menu-link-web" href="#" target="_blank" rel="noopener noreferrer">Web</a>
            <a id="menu-link-git" href="#" target="_blank" rel="noopener noreferrer">Git</a>
            <a id="menu-link-x" href="#" target="_blank" rel="noopener noreferrer">X</a>
            <a id="menu-link-dusa" href="#" target="_blank" rel="noopener noreferrer">Dusa</a>
            <a id="menu-link-eaglefi" href="#" target="_blank" rel="noopener noreferrer">EagleFi</a>
            <a id="menu-link-duser-pump" href="#" target="_blank" rel="noopener noreferrer">Duser-Pump</a>
          </nav>
        </div>
      </section>
    </main>
    <div id="mobile-rotate-overlay" class="mobile-rotate-overlay" hidden>
      <div class="mobile-rotate-card" role="status" aria-live="polite">
        <h2>Rotate to Landscape</h2>
        <p>FPOM Meme Hunt is tuned for landscape on mobile. Turn your phone sideways, then swipe to move.</p>
      </div>
    </div>

    <script type="module" src="./src/game.js"></script>
  </body>
</html>