roulette/recap_2025.html at main · lazygyu/roulette · 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
<!doctype html>
<html lang='ko'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no'>
  <title>Marble Roulette 2025 Recap</title>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-5899C1DJM0"></script>
  <link rel='stylesheet' href='/assets/2025_recap/style.scss' />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/galmuri/dist/galmuri.css"
  />
  <script>
    function gtag() {
      dataLayer.push(arguments);
    }

    gtag('js', new Date());
    gtag('config', 'G-5899C1DJM0');
  </script>
</head>
<body>
<div id='smooth-wrapper'>
  <div id='smooth-content'>
    <section id='title-page'>
      <video class='header-bg' muted autoplay loop playsinline src='/assets/2025_recap/header-bg2.mp4'></video>
      <div class='content'>
        <h1>Marble R<span id='marble-start'>o</span>ulette</h1>
        <h2>Recap 2025</h2>
        <p>올 한 해 마블 룰렛의 기록</p>
      </div>
      <div class='info'>
        👇 스크롤을 아래로 내려보세요 👇
      </div>
    </section>

    <section id='people-page'>
      <div class='text' data-speed='0.5'>
        <div>
          <h3>룰렛을 돌린 사람</h3>
          <h2>약 <span data-prop='people'>0</span>명<sup>*</sup></h2>
          <p>대한민국 국민의 3.6%</p>
        </div>
        <div>
          <h3>룰렛을 사용한 나라</h3>
          <h2><span data-prop='country'>0</span>개국<sup>*</sup></h2>
        </div>
      </div>
      <div class='video'>
        <video id='people-video' muted src='/assets/2025_recap/people.mp4' playsinline></video>
      </div>
    </section>

    <section id='execution-page'>
      <div class='video'>
        <video id='execution-video' preload='auto' muted playsinline autoplay loop>
          <source src='/assets/2025_recap/pour2.mp4' type='video/mp4' />
        </video>
      </div>
      <div class='text' data-speed='0.5'>
        <h3>룰렛을 돌린 횟수</h3>
        <h2>약 <span data-prop='startCount'>0</span>회<sup>*</sup></h2>
        <p>약 3초에 한 번씩 누군가가 룰렛을 돌리고 있어요!</p>
      </div>
    </section>

    <section id='date-hours-page'>
      <div id="hour-content" class='content' data-speed='0.5'>
        <h3>가장 많이 사용하는 시간대</h3>
        <h2><span data-prop="busiestTimeFrom">0</span>시- <span data-prop="busiestTimeTo">0</span>시<sup>*</sup></h2>
        <h3>가장 룰렛을 많이 돌린 날</h3>
        <h2><span data-prop="busiestDateMonth">0</span>월 <span data-prop="busiestDateDate">0</span>일<sup>*</sup></h2>
      </div>

      <div class="clock">
        <div class="clock-inner">
          <div class="hour hand"></div>
          <div class="minute hand"></div>
          <div class="second hand"></div>
        </div>
      </div>
    </section>

    <section id='marble-count-page'>
      <div class='content'>
        <h3>올해 굴러내려간 구슬 개수</h3>
        <h2>약 <span data-prop='marbleCount'>0</span>개 <sup>*</sup></h2>
        <div class='showcase'>
          <p>대형 컨테이너 34개를 채울 수 있는 양이에요!<sup>**</sup></p>
          <div id='containers'>
          </div>
        </div>
        <div class='showcase'>
          <p>구슬을 일렬로 늘어놓으면 서울-부산을 24번 왕복할 수 있는 길이에요!<sup>**</sup></p>
          <div id='trains'>

          </div>
        </div>
      </div>
    </section>

    <section id='coffee-page'>
      <img src='assets/2025_recap/buymeacoffee.gif' />
      <div class='content' data-speed='0.8'>
        <h3>커피 사준 사람 수</h3>
        <h2><span data-prop='coffeeBuyer'>0</span>명<sup>*</sup></h2>
        <p>나도 한 잔 보태주고 싶다면?<br /><br />👇👇👇👇</p>
        <a href="https://www.buymeacoffee.com/lazygyu" target="_blank"><img
          src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee"
          style="height: 60px !important;width: 217px !important;"></a>
      </div>
    </section>

    <section id='thanks-page' class='end-pin'>
      <div class='content'>
        <h2>감사합니다!</h2>
      </div>
      <p class='info'>
        * 모든 데이터는 2025년 1월 1일 - <span id='statDate'>2025년 12월 10일</span> 기준<br />
        ** 일반적인 유리구슬과 동일한 직경이라고 가정(16mm)
      </p>
    </section>
  </div>
</div>

<div class='filter'></div>
<script type='module' src='src/misc/recap.ts'>
</script>
</body>
</html>