splitflap/index.html at main · qrion25/splitflap · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="A web-based split-flap display inspired by classic Solari airport boards. Features multiple themes and a real-time clock." />
  <title>Split-Flap Display</title>

  <!-- Google Fonts for Split-Flap Themes -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=IBM+Plex+Mono&family=VT323&family=Space+Mono:wght@700&family=Bebas+Neue&family=Russo+One&family=Chakra+Petch:wght@700&family=Share+Tech+Mono&display=swap" rel="stylesheet">

  <!-- Splitflap CSS (your styles + themes live here) -->
  <link rel="stylesheet" href="css/splitflap.css" />

  <!-- jQuery + jQuery UI (needed for the splitflap widget factory) -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>

  <!-- Splitflap plugin (keep ONLY the widget code here) -->
  <script src="js/splitflap.js"></script>

  <!-- Your page behavior (theme picker, dark/light, marquee, clock) -->
  <script src="js/app.js" defer></script>
</head>

<!-- We attach a theme class to <body>. The CSS switches look/feel by theme. -->
<body class="theme-classic">

  <!-- Top-right Dark/Light toggle -->
  <button id="mode-toggle" class="mode-toggle" aria-label="Toggle dark / light">
    <span class="icon">🌙</span><span class="label">Dark</span>
  </button>

  <!-- Theme picker (fixed bottom-left) -->
  <div id="theme-picker" aria-label="Theme settings">
    <label for="theme-select">Theme</label>
    <select id="theme-select">
      <option value="theme-classic">Classic</option>
      <option value="theme-retro">Retro</option>
      <option value="theme-hacker">Hacker</option>
      <!-- New themes -->
      <option value="theme-azula">Azula</option>
      <option value="theme-meyer">Meyer Pink</option>
    </select>
  </div>

  <!-- Demo marquee (the big word) -->
  <div id="splitflap" class="splitflap"></div>

  <!-- Friendlier input (lowercase to match glyph set) -->
  <form id="print" class="flap-input" action="javascript:">
    <label for="flapText">Type a flap:</label>
    <input id="flapText" name="text" type="text" autocomplete="off" placeholder="type here…" />
    <button type="submit">Show</button>
  </form>

  <!-- Clock (center bottom: HH:MM:SS + AM/PM) -->
  <div id="clock" class="splitflap clock" role="timer" aria-live="off">
    <div class="segment hours"></div>
    <span class="colon">:</span>
    <div class="segment minutes"></div>
    <span class="colon">:</span>
    <div class="segment seconds"></div>
    <div class="segment ampm"></div>
  </div>
</body>
</html>