sunlight-chart/index.html at main · BeomHui-Lee/sunlight-chart · 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
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Sunlight Chart demo for rendering sunrise and sunset data as reusable SVG charts."
    />
    <title>Sunlight Chart</title>
  </head>
  <body>
    <main class="demo-shell">
      <header class="topbar">
        <div class="brand">
          <span class="brand-mark">SC</span>
          <div>
            <p class="eyebrow">SVG chart library</p>
            <h1>Sunlight Chart</h1>
          </div>
        </div>
        <div class="topbar-copy">
          <p class="eyebrow">Place detail charts</p>
          <p>API의 일출, 일몰, 자외선 데이터를 장소 상세용 채광 그래프로 렌더링합니다.</p>
        </div>
        <a class="repo-link" href="https://github.com/BeomHui-Lee/sunlight-chart">GitHub</a>
      </header>

      <section class="workspace">
        <aside class="controls" aria-label="Demo controls">
          <div class="panel-section">
            <h2>Input</h2>
            <label class="field" for="jsonInput">
              <span>API rows</span>
              <textarea id="jsonInput" spellcheck="false"></textarea>
            </label>
          </div>

          <div class="panel-section">
            <h2>Columns</h2>
            <div class="field-grid">
              <label class="field" for="labelColumn">
                <span>Label</span>
                <input id="labelColumn" value="label" />
              </label>
              <label class="field" for="sunriseColumn">
                <span>Sunrise</span>
                <input id="sunriseColumn" value="sunrise" />
              </label>
              <label class="field" for="sunsetColumn">
                <span>Sunset</span>
                <input id="sunsetColumn" value="sunset" />
              </label>
              <label class="field" for="markerColumn">
                <span>Marker</span>
                <input id="markerColumn" value="now" />
              </label>
            </div>
          </div>

          <div class="panel-section">
            <h2>Theme</h2>
            <div class="swatches" role="radiogroup" aria-label="Theme">
              <button class="swatch is-active" type="button" data-theme="clear" aria-label="Clear sky">
                <span style="background: #fb7185"></span>
                <span style="background: #93c5fd"></span>
              </button>
              <button class="swatch" type="button" data-theme="city" aria-label="City dusk">
                <span style="background: #60a5fa"></span>
                <span style="background: #5eead4"></span>
              </button>
              <button class="swatch" type="button" data-theme="soft" aria-label="Soft indoor">
                <span style="background: #a78bfa"></span>
                <span style="background: #f0abfc"></span>
              </button>
            </div>
            <label class="checkline" for="durationToggle">
              <input id="durationToggle" type="checkbox" checked />
              Show daylight duration
            </label>
            <label class="checkline" for="ticksToggle">
              <input id="ticksToggle" type="checkbox" checked />
              Show time ticks
            </label>
            <label class="checkline" for="annotationsToggle">
              <input id="annotationsToggle" type="checkbox" checked />
              Show daylight annotations
            </label>
            <label class="checkline" for="valueScaleToggle">
              <input id="valueScaleToggle" type="checkbox" checked />
              Color by UV index
            </label>
            <label class="checkline" for="autoResizeToggle">
              <input id="autoResizeToggle" type="checkbox" checked />
              Auto resize
            </label>
          </div>
        </aside>

        <section class="stage" aria-label="Chart preview">
          <div class="stage-header">
            <div>
              <p class="eyebrow">Place detail preview</p>
              <h2>자연광 스튜디오 채광 정보</h2>
            </div>
            <div class="stage-actions">
              <button id="exportBtn" class="button button-secondary" type="button">Export SVG</button>
              <button id="resetBtn" class="button" type="button">Reset sample</button>
            </div>
          </div>
          <div class="place-summary" aria-label="Sample place summary">
            <div>
              <span class="summary-tag">자연광</span>
              <strong>남동향 메인룸</strong>
              <small>서울 광진구 · 3층 · 통창</small>
            </div>
            <dl>
              <div>
                <dt>추천 촬영</dt>
                <dd>12:00-15:00</dd>
              </div>
              <div>
                <dt>일조</dt>
                <dd>14h 41m</dd>
              </div>
              <div>
                <dt>UV</dt>
                <dd>8.1</dd>
              </div>
            </dl>
          </div>
          <p id="status" class="status" role="status" aria-live="polite"></p>
          <div id="chart" class="chart-target"></div>
          <pre class="code-sample"><code id="codeSample"></code></pre>
        </section>
      </section>
    </main>

    <script type="module" src="/demo/main.ts"></script>
  </body>
</html>