obscurant-game-site/index.html at main · gitosaurus/obscurant-game-site · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Obscurant — The Game of Hide and Seek</title>
  <style>
    :root {
      --jade: #41a372;
      --jade-dark: #2d7a54;
      --bg: #1a1a2e;
      --card-bg: #16213e;
      --text: #e0e0e0;
      --text-muted: #a0a0b0;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    header {
      background: linear-gradient(135deg, var(--card-bg), var(--bg));
      border-bottom: 2px solid var(--jade);
      padding: 2rem 1rem;
      text-align: center;
    }
    header h1 {
      font-size: 2.4rem;
      color: var(--jade);
      letter-spacing: 0.05em;
    }
    header p {
      color: var(--text-muted);
      font-size: 1.1rem;
      margin-top: 0.4rem;
    }
    nav {
      text-align: center;
      padding: 1rem;
      background: var(--card-bg);
    }
    nav a {
      color: var(--jade);
      text-decoration: none;
      margin: 0 1rem;
      font-weight: 500;
    }
    nav a:hover { text-decoration: underline; }
    main {
      max-width: 720px;
      margin: 0 auto;
      padding: 2rem 1.2rem;
    }
    .screenshot-gallery {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      padding: 1.5rem 0;
      justify-content: center;
      flex-wrap: wrap;
    }
    .screenshot-gallery img {
      height: 240px;
      border-radius: 12px;
      border: 1px solid #333;
      image-rendering: auto;
    }
    .placeholder-note {
      text-align: center;
      color: var(--text-muted);
      font-style: italic;
      padding: 2rem;
      border: 1px dashed #444;
      border-radius: 12px;
      margin: 1.5rem 0;
    }
    .app-badge {
      text-align: center;
      margin: 2rem 0;
    }
    .app-badge a img {
      height: 48px;
    }
    footer {
      text-align: center;
      padding: 2rem 1rem;
      color: var(--text-muted);
      font-size: 0.85rem;
      border-top: 1px solid #333;
      margin-top: 3rem;
    }
  </style>
</head>
<body>

<header>
  <h1>Obscurant</h1>
  <p>The game of hide and seek</p>
</header>

<nav>
  <a href="index.html">Home</a>
  <a href="help.html">How to Play</a>
</nav>

<main>
  <div class="screenshot-gallery">
    <img src="images/screenshot1_game.png" alt="Game in progress with ray markers">
    <img src="images/screenshot5_handicap.png" alt="Game with ray trails visible">
    <img src="images/screenshot2_postgame.png" alt="Finished game showing revealed targets">
    <img src="images/screenshot3_settings.png" alt="Settings screen">
    <img src="images/screenshot4_legend.png" alt="Board legend">
  </div>

  <p>
    Obscurant is a puzzle game based on the classic
    <a href="https://en.wikipedia.org/wiki/Black_Box_(game)" style="color: var(--jade);">Black Box</a>
    board game. Fire rays into a hidden grid, watch how they bounce and deflect,
    and deduce where the targets are hiding. The fewer rays you use, the better
    your score.
  </p>

  <p style="margin-top:1rem;">
    Available on iOS.
    <a href="help.html" style="color: var(--jade);">Learn how to play &rarr;</a>
  </p>

  <!-- Uncomment when the App Store listing is live:
  <div class="app-badge">
    <a href="https://apps.apple.com/app/obscurant/idXXXXXXXXXX">
      <img src="images/app-store-badge.svg" alt="Download on the App Store">
    </a>
  </div>
  -->
</main>

<footer>
  &copy; 2025 Derek T. Jones
</footer>

</body>
</html>