A-Fair-Made-Twice/unfinished.html at main · TadejPogacar1/A-Fair-Made-Twice · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unfinished World · Paris 1867</title>
<link rel="stylesheet" href="./assets/css/unfinished.css">
</head>
<body>

  <canvas id="star-canvas" aria-hidden="true"></canvas>

  <!-- ── Header ──────────────────────────────────────────────────── -->
  <header id="uw-header">
    <a href="./initial.html" class="uw-back" aria-label="Return to constellation">← constellation</a>
    <div class="uw-title-group">
      <div class="uw-kicker">Paris · 1867</div>
      <h1 class="uw-title">The Unfinished World</h1>
      <p class="uw-sub">Every visitor carried away something the catalogue never recorded.</p>
    </div>
    <div class="uw-live-count" id="live-count" aria-live="polite"></div>
  </header>

  <!-- ── Main layout ─────────────────────────────────────────────── -->
  <main id="uw-main">

    <!-- Left: exhibit picker + write form -->
    <section id="uw-write" aria-label="Leave an impression">

      <div class="write-step" id="step-pick">
        <label class="step-label" for="exhibit-search">
          <span class="step-num">01</span> Choose an exhibit
        </label>
        <div class="search-wrap">
          <input id="exhibit-search" type="text" placeholder="Search by name or type…"
                 autocomplete="off" aria-autocomplete="list" aria-controls="exhibit-list">
          <div id="exhibit-list" role="listbox" aria-label="Exhibit suggestions"></div>
        </div>
        <div id="selected-exhibit" class="selected-exhibit" aria-live="polite"></div>
      </div>

      <div class="write-step" id="step-voice">
        <label class="step-label">
          <span class="step-num">02</span> Pick a voice
        </label>
        <div class="voice-grid" role="radiogroup" aria-label="Perspective">
          <button class="voice-btn" data-world="official"  aria-pressed="false">
            <span class="v-dot"></span>Official
          </button>
          <button class="voice-btn" data-world="staged"    aria-pressed="false">
            <span class="v-dot"></span>Staged
          </button>
          <button class="voice-btn" data-world="lived"     aria-pressed="false">
            <span class="v-dot"></span>Lived
          </button>
          <button class="voice-btn active" data-world="visitor" aria-pressed="true">
            <span class="v-dot"></span>Visitor
          </button>
        </div>
      </div>

      <div class="write-step" id="step-compose">
        <label class="step-label" for="comment-name">
          <span class="step-num">03</span> Write your impression
        </label>
        <input id="comment-name" type="text" placeholder="Your name (optional)"
               maxlength="80" autocomplete="off">
        <textarea id="comment-body" placeholder="What did you see? What did you feel?"
                  maxlength="2000" rows="5" aria-describedby="char-count"></textarea>
        <div class="compose-footer">
          <span id="char-count" aria-live="polite">0 / 2000</span>
          <button id="submit-btn" class="submit-btn" disabled>Leave impression</button>
        </div>
        <div id="submit-msg" class="submit-msg" aria-live="polite"></div>
      </div>

    </section>

    <!-- Right: comment feed -->
    <section id="uw-feed" aria-label="Visitor impressions">
      <div class="feed-header">
        <h2 class="feed-title">Impressions</h2>
        <div class="feed-tabs" role="tablist">
          <button class="ftab active" data-feed="exhibit" role="tab" aria-selected="true" id="tab-exhibit">
            This exhibit
          </button>
          <button class="ftab" data-feed="recent" role="tab" aria-selected="false" id="tab-recent">
            All recent
          </button>
        </div>
      </div>
      <div id="feed-list" role="tabpanel" aria-labelledby="tab-exhibit">
        <div class="feed-empty" id="feed-placeholder">
          Select an exhibit to see what others wrote.
        </div>
      </div>
    </section>

  </main>

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