web/crib/index.html


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 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta id="theme-color" name="theme-color" content="#f8f6f2" />
    <title>cribd</title>
    <link rel="stylesheet" href="app.css?v=20260818" />
    <script>
      const savedTheme = document.cookie.match(
        /(?:^|;\s*)cribd_theme=(dark|light)(?:;|$)/,
      )?.[1];
      document.documentElement.dataset.theme = savedTheme ?? "light";
      document.getElementById("theme-color").content = getComputedStyle(
        document.documentElement,
      )
        .getPropertyValue("--canvas")
        .trim();
    </script>
  </head>
  <body data-state="connecting">
    <header class="viewer-header">
      <h1 class="room-title">Baby TV</h1>
 
      <button
        class="theme-toggle"
        id="theme-toggle"
        type="button"
        aria-label="Dark appearance"
        aria-pressed="false"
      >
        <svg
          class="line-icon theme-icon theme-icon-sun"
          aria-hidden="true"
          viewBox="0 0 24 24"
        >
          <circle cx="12" cy="12" r="3.25"></circle>
          <path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4"></path>
        </svg>
        <svg
          class="line-icon theme-icon theme-icon-moon"
          aria-hidden="true"
          viewBox="0 0 24 24"
        >
          <path d="M20 15.1A8.25 8.25 0 0 1 8.9 4a8.25 8.25 0 1 0 11.1 11.1Z"></path>
        </svg>
      </button>
 
      <div
        class="status"
        id="status-label"
        role="status"
        aria-live="polite"
        aria-atomic="true"
      >
        Connecting
      </div>
    </header>
 
    <main class="monitor">
      <video
        id="video"
        aria-label="Crib camera live stream"
        autoplay
        muted
        playsinline
      ></video>
 
      <section class="empty-state" aria-hidden="true">
        <svg
          class="line-icon offline-icon"
          aria-hidden="true"
          viewBox="0 0 24 24"
        >
          <path d="M15.75 9.5 20.5 7v10l-4.75-2.5"></path>
          <path d="M5.75 6.5h7.5a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5h-7.5a2.5 2.5 0 0 1-2.5-2.5V9a2.5 2.5 0 0 1 2.5-2.5Z"></path>
          <path d="m3 3 18 18"></path>
        </svg>
        <div class="connection-copy">
          <p class="eyebrow">Crib camera</p>
          <h2 class="state-title">Connecting</h2>
          <p class="detail">Waiting for the camera stream</p>
        </div>
      </section>
    </main>
 
    <section
      class="sound-meter"
      id="sound-meter"
      data-level="0"
      role="meter"
      aria-label="Room sound"
      aria-valuemin="0"
      aria-valuemax="5"
      aria-valuenow="0"
      aria-valuetext="Quiet"
      hidden
    >
      <span class="sound-meter-heading">
        <span class="sound-meter-icon" aria-hidden="true">
          <svg class="line-icon" viewBox="0 0 24 24">
            <path d="M4 10v4M8 8v8M12 5v14M16 8v8M20 10v4"></path>
          </svg>
        </span>
        <span class="sound-meter-label">Room sound</span>
      </span>
      <span class="sound-bars" aria-hidden="true">
        <span class="sound-bar"></span>
        <span class="sound-bar"></span>
        <span class="sound-bar"></span>
        <span class="sound-bar"></span>
        <span class="sound-bar"></span>
      </span>
    </section>
 
    <script type="module" src="app.js?v=20260818"></script>
  </body>
</html>