smpl-new-tab/smpl.html at develop · kylechadha/smpl-new-tab · 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
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <title>New Tab | Smpl</title>
  </head>
  <body class="hidden" tabindex="0" role="application" aria-label="Smpl clock interface. Use left and right arrow keys to change themes.">
    <div id="smpl">
      <div id="clock">
        <svg viewBox="0 0 600 600" transform='rotate(-90)' role="img" aria-label="Clock with seconds sweep animation">
          <circle id="seconds" class="dial" />
          <circle id="sweep" class="dial" />
        </svg>
      </div>
      <div id="dateTime" role="timer" aria-live="polite" aria-label="Current time and date">
        <h1 id="time" aria-label="Current time"></h1>
        <h2 id="date" aria-label="Current date"></h2>
      </div>
      <div id="viz-indicator" aria-live="polite" aria-label="Current visualization"></div>
    </div>

    <!-- Settings UI -->
    <button id="settings-gear" aria-label="Open settings">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
        <path d="M12 15.5A3.5 3.5 0 1 0 12 8.5a3.5 3.5 0 0 0 0 7ZM19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.32-.07.65-.07.98s.03.66.07.98L2.46 14.61c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64L19.43 12.98Z" fill="currentColor"/>
      </svg>
    </button>

    <div id="settings-modal" class="settings-modal" role="dialog" aria-modal="true" aria-labelledby="settings-title">
      <div class="settings-content">
        <div class="settings-header">
          <h2 id="settings-title">Settings</h2>
          <button id="settings-close" aria-label="Close settings">✕</button>
        </div>


        <div class="settings-section">
          <h3>Clock Style
            <span class="key-hint">
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 64 69" class="key-icon">
                <rect x="4" y="4" width="56" height="61" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <rect x="4" y="4" width="56" height="52" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <path d="M32 41 L32 15 M32 41 L24 33 M32 41 L40 33"
                      stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 64 69" class="key-icon">
                <rect x="4" y="4" width="56" height="61" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <rect x="4" y="4" width="56" height="52" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <path d="M32 15 L32 41 M32 15 L24 27 M32 15 L40 27"
                      stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </h3>
          <div id="visualization-options" class="option-grid" role="radiogroup" aria-labelledby="viz-label">
            <!-- Visualization options will be populated by JavaScript -->
          </div>
        </div>

        <div class="settings-section">
          <h3>Theme
            <span class="key-hint">
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 64 69" class="key-icon">
                <rect x="4" y="4" width="56" height="61" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <rect x="4" y="4" width="56" height="52" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <path d="M19 32 L45 32 M19 32 L27 24 M19 32 L27 40"
                      stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 64 69" class="key-icon">
                <rect x="4" y="4" width="56" height="61" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <rect x="4" y="4" width="56" height="52" rx="8"
                      fill="transparent" stroke="#fff" stroke-width="4"/>
                <path d="M45 32 L19 32 M45 32 L37 24 M45 32 L37 40"
                      stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </h3>
          <div id="theme-options" class="option-grid" role="radiogroup" aria-labelledby="theme-label">
            <!-- Theme options will be populated by JavaScript -->
          </div>
        </div>

        <div class="settings-footer">
          Made with ❤️ by <a href="http://x.com/kylechadha" target="_blank" rel="noopener">Kyle Chadha</a>
        </div>
      </div>
    </div>

    <script src="js/main.js"></script>
  </body>
</html>