slopes/index.html at master · hletrd/slopes · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html data-theme="dark" lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slopes cam - 전국 스키장 실시간 웹캠 모음</title>
  <script src="https://www.google.com/recaptcha/api.js?render=6LdnzyUsAAAAAKh6eSEaERifPRTh51qnRnpmX6S0" async defer></script>
  <script src="/i18n.js"></script>
  <meta name="description" content="전국 스키장 실시간 웹캠 및 날씨">
  <meta name="keywords" content="스키장, 웹캠, 실시간, 날씨">
  <meta name="author" content="hletrd">

  <meta property="og:title" content="Slopes cam - 전국 스키장 실시간 웹캠 모음">
  <meta property="og:description" content="전국 스키장 실시간 웹캠 및 날씨">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://ski.atik.kr">
  <meta property="og:locale" content="ko_KR">
  <meta property="og:image" content="http://ski.atik.kr/preview.png">
  <meta property="og:image:width" content="2400">
  <meta property="og:image:height" content="1260">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:alt" content="Weather of ski resorts">
  <meta property="og:site_name" content="Slopes cam - 전국 스키장 실시간 웹캠 모음">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Slopes cam - 전국 스키장 실시간 웹캠 모음">
  <meta name="twitter:description" content="전국 스키장 실시간 웹캠 및 날씨">
  <meta name="twitter:image" content="http://ski.atik.kr/preview.png">

  <meta name="theme-color" content="#121212">

  <meta name="application-name" content="Slopes cam">
  <meta name="msapplication-TileColor" content="#121212">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Slopes cam">

  <link rel="icon" type="image/png" sizes="16x16" href="icons/skiing-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="icons/skiing-32x32.png">
  <link rel="icon" type="image/png" sizes="64x64" href="icons/skiing-64x64.png">
  <link rel="icon" type="image/png" sizes="128x128" href="icons/skiing-128x128.png">
  <link rel="icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="icons/skiing-180x180.png">
  <link rel="manifest" href="manifest.json">
  <link rel="sitemap" type="application/xml" href="sitemap.xml">

  <meta name="mobile-web-app-capable" content="yes">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/video.js@8.23.3/dist/video-js.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/@videojs/themes@1/dist/forest/index.css" rel="stylesheet" />
  <link
    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
    rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

  <link rel="stylesheet" href="/main.css?v=2025041700">
</head>

<body>
  <script>
    (function () {
      try {
        const saved = localStorage.getItem('webcamSettings');
        if (saved) {
          const settings = JSON.parse(saved);
          if (settings && settings.darkMode === false) {
            document.body.classList.add('light-mode');
            document.documentElement.setAttribute('data-theme', 'light');
          }
        }
      } catch (e) {
        console.error('Theme init error:', e);
      }
    })();
  </script>
  <div class="mobile-nav">
    <div class="mobile-nav-inner">
      <button class="toggle-menu btn">☰</button>
      <div class="mobile-title"><a href="./">Slopes cam</a></div>
      <div style="width: 24px;"></div>
    </div>
  </div>

  <button id="infoButton" class="info-button">
    <i class="bi bi-file-earmark-text"></i>
  </button>

  <div class="floating-button-group">
    <button id="addToHomeButton" class="add-to-home" data-i18n-title="buttons.addToHome" title="홈 화면에 추가">
      <i class="bi bi-house-add"></i>
    </button>
    <button id="settingsButton" class="settings-button">
      <i class="bi bi-gear"></i>
    </button>
    <button id="quadViewButton" class="quad-view-button" data-i18n-title="buttons.quadView" title="4분할 모드" aria-label="4분할 모드">
      <i class="bi bi-border-all"></i>
    </button>
  </div>
  <div id="infoModal" class="info-modal">
    <div class="info-content">
      <button class="info-close" id="closeInfoModal"><i class="bi bi-x"></i></button>
      <h4 class="info-title" data-i18n="site.title">Slopes cam</h4>
      <div class="info-text">
        <p data-i18n="info.q1">Q. 일부 영상이 재생되지 않거나 오류가 있습니다.</p>
        <p data-i18n="info.a1">A. 각 영상은 스키장에서 제공하는 실시간 웹캠 영상으로, 본 웹사이트는 영상을 저장하거나 재전송하지 않고 단순히 원본 영상의 링크만을 연결합니다.</p>
        <ul>
          <li data-i18n="info.a1_1">스키장에 따라 영상 제공 방식이 상이하므로 재생 방식이 다를 수 있습니다.</li>
          <li data-i18n="info.a1_2">스키장의 사정에 따라 영상이 제공되지 않거나 변경될 수 있습니다.</li>
          <li data-i18n="info.a1_3">스키장의 사정에 의해 영상이 일시적으로, 또는 영구적으로 서비스 중단될 수 있습니다.</li>
          <li data-i18n="info.a1_4">모바일에서는 동시에 재생 가능한 영상의 수에 제한이 있을 수 있으며, 전체보기가 되지 않을 수 있습니다.</li>
          <li data-i18n="info.a1_5" data-i18n-html>에덴밸리는 영상 중계 서비스에 <s>결제를 하지 않은 것 같습니다.</s>25-26시즌에 결제했습니다.</li>
          <li data-i18n="info.a1_6" data-i18n-html>지산은 24/25시즌 영상 서비스를 <s>중단했습니다.</s>다시 시작했습니다.</li>
        </ul>
        <p data-i18n="info.q2">Q. 날씨 정보가 정확하지 않습니다.</p>
        <p data-i18n="info.a2" data-i18n-html>A. 날씨 정보는 실시간 관측 정보를 바탕으로 3차원 모델을 통해 계산된 정보입니다. 날씨 정보는 <a href="https://apihub.kma.go.kr/" target="_blank">기상청 API허브</a>에서 제공하는 융합기상 데이터를 공공누리 제1유형 라이센스로 사용하고 있습니다.</p>
        <ul>
          <li data-i18n="info.a2_1">날씨 정보는 국지적인 정보를 정확히 반영하지 않을 수 있으며, 부정확한 정보를 포함할 수 있습니다.</li>
          <li data-i18n="info.a2_2">풍속은 10분 풍속, 강수량은 1시간 강수량이며, 적설량은 3시간 적설량입니다.</li>
        </ul>
        <p data-i18n="info.q3">Q. 왜 만든 건가요?</p>
        <p data-i18n="info.a3">A. 스키장 영상과 날씨를 바로 모아볼 수 있는 페이지가 없어서 만들었습니다.</p>
        <ul>
          <li data-i18n="info.a3_1">스키장 공식 홈페이지에서 제공하는 영상은 모바일에서 보기가 불편했습니다. 스키를 타면서 노트북을 들고 다니지는 않잖아요?</li>
          <li data-i18n="info.a3_2" data-i18n-html><a target="_blank" href="https://ski-resort.kr/">ski-resort.kr</a>와 <a target="_blank" href="https://paulkim-xr.github.io/SkiWatch/">SkiWatch</a>도 참고했습니다만, 원하는 영상을 모아볼 수 있는 기능이 없고 비발디파크를 제대로 지원하지 않아 직접 만들었습니다.</li>
        </ul>
      </div>
    </div>
  </div>

  <div id="settingsModal" class="settings-modal">
    <div class="settings-content">
      <button class="settings-close" id="closeSettingsModal"><i class="bi bi-x"></i></button>
      <h4 class="settings-title" data-i18n="settings.title">설정</h4>
      <div class="settings-options">
        <div class="setting-item">
          <label for="autoplayToggle" data-i18n="settings.autoplay">동영상 자동 재생</label>
          <div class="toggle-switch">
            <input type="checkbox" id="autoplayToggle">
            <span class="toggle-slider"></span>
          </div>
        </div>
        <div class="setting-item">
          <label for="themeToggle" data-i18n="settings.darkMode">다크 모드</label>
          <div class="toggle-switch">
            <input type="checkbox" id="themeToggle">
            <span class="toggle-slider"></span>
          </div>
        </div>
        <div class="setting-item">
          <label for="languageSelect" data-i18n="settings.language">언어</label>
          <select id="languageSelect" class="language-select">
            <option value="ko">한국어</option>
            <option value="en">English</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <div id="bugReportModal" class="bug-report-modal">
    <div class="bug-report-content">
      <button class="bug-report-close" id="closeBugReportModal"><i class="bi bi-x"></i></button>
      <h4 class="bug-report-title" data-i18n="bugReport.title">문의</h4>
      <form id="bugReportForm">
        <div class="form-group">
          <label for="reportType" data-i18n="bugReport.type">유형</label>
          <select id="reportType" required>
            <option value="bug" data-i18n="bugReport.typeBug">버그 신고</option>
            <option value="feature" data-i18n="bugReport.typeFeature">기능 제안</option>
            <option value="other" data-i18n="bugReport.typeOther">기타</option>
          </select>
        </div>
        <div class="form-group">
          <label for="reportTitle" data-i18n="bugReport.titleLabel">제목</label>
          <input type="text" id="reportTitle" required maxlength="100" data-i18n-placeholder="bugReport.titlePlaceholder" placeholder="제목을 입력해주세요. (최대 100자)">
        </div>
        <div class="form-group">
          <label for="reportContent" data-i18n="bugReport.content">내용</label>
          <textarea id="reportContent" rows="5" required maxlength="1000" data-i18n-placeholder="bugReport.contentPlaceholder"
            placeholder="내용을 입력해주세요. (최대 1000자)"></textarea>
        </div>
        <button type="submit" class="submit-button" data-i18n="buttons.submit">보내기</button>
      </form>
    </div>
  </div>

  <div id="quadViewContainer" class="quad-view-container">
    <div id="quadViewPage" class="quad-page">
      <button id="quadBackButton" class="quad-page-back" data-i18n-title="buttons.back" title="돌아가기">
        <i class="bi bi-arrow-left"></i>
      </button>
      <button id="quadAddToHomeButton" class="quad-page-add-home" data-i18n-title="buttons.addToHome" title="홈 화면에 추가">
        <i class="bi bi-house-add"></i>
      </button>
      <div class="quad-grid">
        <div class="quad-slot">
          <div class="custom-dropdown" id="quadSelect1-dropdown" data-slot="0">
            <div class="dropdown-trigger" tabindex="0" data-i18n="camera.select">카메라 선택</div>
            <div class="dropdown-menu">
              <div class="dropdown-search-container">
                <input type="text" class="dropdown-search" data-i18n-placeholder="camera.searchPlaceholder" placeholder="리조트 또는 카메라 검색...">
              </div>
              <div class="dropdown-list"></div>
            </div>
          </div>
          <div class="quad-video" id="quadVideo1"></div>
        </div>
        <div class="quad-slot">
          <div class="custom-dropdown" id="quadSelect2-dropdown" data-slot="1">
            <div class="dropdown-trigger" tabindex="0" data-i18n="camera.select">카메라 선택</div>
            <div class="dropdown-menu">
              <div class="dropdown-search-container">
                <input type="text" class="dropdown-search" data-i18n-placeholder="camera.searchPlaceholder" placeholder="리조트 또는 카메라 검색...">
              </div>
              <div class="dropdown-list"></div>
            </div>
          </div>
          <div class="quad-video" id="quadVideo2"></div>
        </div>
        <div class="quad-slot">
          <div class="custom-dropdown" id="quadSelect3-dropdown" data-slot="2">
            <div class="dropdown-trigger" tabindex="0" data-i18n="camera.select">카메라 선택</div>
            <div class="dropdown-menu">
              <div class="dropdown-search-container">
                <input type="text" class="dropdown-search" data-i18n-placeholder="camera.searchPlaceholder" placeholder="리조트 또는 카메라 검색...">
              </div>
              <div class="dropdown-list"></div>
            </div>
          </div>
          <div class="quad-video" id="quadVideo3"></div>
        </div>
        <div class="quad-slot">
          <div class="custom-dropdown" id="quadSelect4-dropdown" data-slot="3">
            <div class="dropdown-trigger" tabindex="0" data-i18n="camera.select">카메라 선택</div>
            <div class="dropdown-menu">
              <div class="dropdown-search-container">
                <input type="text" class="dropdown-search" data-i18n-placeholder="camera.searchPlaceholder" placeholder="리조트 또는 카메라 검색...">
              </div>
              <div class="dropdown-list"></div>
            </div>
          </div>
          <div class="quad-video" id="quadVideo4"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sidebar-backdrop"></div>

  <div class="sidebar">
    <div class="site-title"><a href="./">Slopes cam</a></div>
  </div>

  <div class="main-content">
    <div id="default-message" class="content-section content-section-default">
      <div class="text-center p-4">
        <h2 data-i18n="home.title">전국 스키장 실시간 웹캠 모음</h2>
        <p class="lead" style="font-size: 1.1rem;" data-i18n="nav.selectResort">왼쪽 메뉴에서 스키장 또는 카메라를 선택하세요.</p>
        <p class="disclaimer mt-2" style="font-size: 0.8rem;">
          <span data-i18n="home.issueReport">사이트 오류 제보, 문의 및 기능 제안</span>
          <button id="bugReportButton" class="bug-report-link" data-i18n="buttons.bugReport">버그 제보</button>
          <span class="github-button-issue"><a class="github-button github-button-issue"
              href="https://github.com/hletrd/slopes/issues"
              data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-icon="octicon-issue-opened"
              aria-label="Issue hletrd/slopes on GitHub">Issue</a></span>
        </p>
        <p class="lead github-buttons">
          <a class="github-button" href="https://github.com/hletrd/slopes"
            data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-icon="octicon-star"
            data-show-count="true" aria-label="Star hletrd/slopes on GitHub">Star</a>
          <a class="github-button" href="https://github.com/hletrd"
            data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true"
            aria-label="Follow @hletrd on GitHub">Follow @hletrd</a>
        </p>
        <p class="lead" style="font-size: 0.8rem; margin-top: 1rem;">
          Current version: <a target="_blank" href="https://github.com/hletrd/slopes/commit/{commit}"></a>
          ({date})<br>Special
          thanks to <a target="_blank" href="https://github.com/paulkim-xr">Paul Kim</a> and the <a target="_blank"
            href="https://paulkim-xr.github.io/SkiWatch/">SkiWatch</a> project.
        </p>
      </div>
      <div id="favorites-container" class="favorites-section" style="display: none;">
        <h3 class="bookmarks-title" data-i18n="bookmarks.title">북마크한 영상</h3>
        <div id="favorites-grid" class="favorites-grid"></div>
      </div>
    </div>
  </div>

  <div class="footer" data-i18n="footer.disclaimer">
    이 서비스는 스키장에서 공식적으로 제공하는 서비스가 아닙니다. 관련하여 스키장에 문의하지 마세요.
  </div>

  <!--
  <button id="addToHomeButton" class="add-to-home">
    <i class="bi bi-plus-square"></i>
  </button>
  -->

  <div id="installationModal" class="installation-modal">
    <button class="modal-close" id="closeModal"><i class="bi bi-x"></i></button>
    <h4 data-i18n="installation.title">홈 화면에 추가</h4>
    <div class="installation-steps">
      <div id="iOSInstructions">
        <p><strong data-i18n="installation.iphone">iPhone</strong></p>
        <ol>
          <li data-i18n="installation.iphoneStep1" data-i18n-html>Safari 브라우저에서 공유 버튼 <i class="bi bi-box-arrow-up"></i> 탭</li>
          <li data-i18n="installation.iphoneStep2">"홈 화면에 추가" 선택</li>
          <li data-i18n="installation.iphoneStep3">"추가" 버튼 탭</li>
        </ol>
      </div>
      <div id="androidInstructions">
        <p><strong data-i18n="installation.android">Android</strong></p>
        <ol>
          <li data-i18n="installation.androidStep1" data-i18n-html>Chrome 메뉴 <i class="bi bi-three-dots-vertical"></i> 탭</li>
          <li data-i18n="installation.androidStep2">"앱 설치" 또는 "홈 화면에 추가" 선택</li>
        </ol>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/video.js@8.23.3/dist/alt/video.novtt.min.js"></script>
  <script src="/main.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css">
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <script src="/pwa.js"></script>
  <script
    type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Slopes cam - 전국 스키장 실시간 웹캠 모음","alternateName":["Slopes cam"],"url":"http://ski.atik.kr"}</script>
  <script type="application/ld+json" src="/videos+ld.json"></script>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-TDF3M6JH2R"></script>
  <script async src="/analytics.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
</body>

</html>