schedule-popup/index.html at master · nodejun/schedule-popup · 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
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShortScheduler — YouTube Shorts를 일정표로</title>
  <style>
    @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.8;
      color: #1a1a1a;
      background: #fafafa;
      word-break: keep-all;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 64px 24px;
    }

    .badge {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      background: #fce4ec;
      color: #c62828;
      margin-bottom: 24px;
    }

    h1 {
      font-size: 36px;
      font-weight: 700;
      color: #111;
      line-height: 1.3;
      margin-bottom: 16px;
    }

    .subtitle {
      font-size: 17px;
      color: #555;
      margin-bottom: 48px;
      line-height: 1.7;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-bottom: 56px;
    }

    .feature-card {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 16px;
      padding: 24px;
    }

    .feature-icon {
      font-size: 28px;
      margin-bottom: 12px;
    }

    .feature-card h3 {
      font-size: 15px;
      font-weight: 600;
      color: #222;
      margin-bottom: 6px;
    }

    .feature-card p {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
    }

    .cta {
      text-align: center;
      margin-bottom: 64px;
    }

    .cta a {
      display: inline-block;
      padding: 14px 32px;
      border-radius: 100px;
      background: #e53935;
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      transition: background 0.2s;
    }

    .cta a:hover { background: #c62828; }

    .divider {
      border: none;
      border-top: 1px solid #e0e0e0;
      margin: 48px 0;
    }

    .en-section h2 {
      font-size: 26px;
      font-weight: 700;
      color: #111;
      margin-bottom: 12px;
    }

    .en-section p {
      font-size: 15px;
      color: #555;
      margin-bottom: 20px;
    }

    .en-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 40px;
    }

    .en-feature {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 20px;
    }

    .en-feature h3 {
      font-size: 14px;
      font-weight: 600;
      color: #222;
      margin-bottom: 4px;
    }

    .en-feature p {
      font-size: 13px;
      color: #666;
      margin-bottom: 0;
    }

    .footer {
      margin-top: 48px;
      padding-top: 24px;
      border-top: 1px solid #eee;
      font-size: 13px;
      color: #999;
      text-align: center;
    }

    .footer a {
      color: #1a73e8;
      text-decoration: none;
    }

    .footer a:hover { text-decoration: underline; }

    @media (max-width: 600px) {
      .container { padding: 40px 16px; }
      h1 { font-size: 26px; }
    }
  </style>
</head>
<body>
  <div class="container">

    <!-- 한국어 -->
    <span class="badge">Chrome 확장프로그램</span>
    <h1>YouTube Shorts를<br>개인 일정표로 교체하세요</h1>
    <p class="subtitle">
      ShortScheduler는 YouTube Shorts 피드를 주간/월간 캘린더로 대체합니다.<br>
      Google Calendar 연동으로 모든 일정을 한 곳에서 관리하세요.
    </p>

    <div class="features">
      <div class="feature-card">
        <div class="feature-icon">📅</div>
        <h3>주간 &amp; 월간 캘린더</h3>
        <p>YouTube 홈에서 바로 일정 확인. Shorts 대신 생산적인 하루를 시작하세요.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">🔗</div>
        <h3>Google Calendar 연동</h3>
        <p>기존 구글 캘린더 일정을 가져오고, 새 일정을 직접 추가할 수 있습니다.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">🔒</div>
        <h3>프라이버시 우선</h3>
        <p>모든 데이터는 브라우저 내에서만 처리됩니다. 외부 서버로 전송되지 않습니다.</p>
      </div>
    </div>

    <div class="cta">
      <a href="https://chrome.google.com/webstore" target="_blank">Chrome 웹 스토어에서 설치</a>
    </div>

    <hr class="divider">

    <!-- English -->
    <div class="en-section">
      <span class="badge" style="background:#e3f2fd;color:#1565c0;">Chrome Extension</span>
      <h2>Replace YouTube Shorts<br>with Your Personal Planner</h2>
      <p>
        ShortScheduler replaces the YouTube Shorts feed with a weekly/monthly calendar.<br>
        Sync with Google Calendar and manage all your events in one place.
      </p>

      <div class="en-features">
        <div class="en-feature">
          <h3>📅 Weekly &amp; Monthly View</h3>
          <p>Check your schedule right from YouTube home.</p>
        </div>
        <div class="en-feature">
          <h3>🔗 Google Calendar Sync</h3>
          <p>Import existing events and create new ones instantly.</p>
        </div>
        <div class="en-feature">
          <h3>🔒 Privacy First</h3>
          <p>All data stays in your browser. No external servers.</p>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>
        &copy; 2026 ShortScheduler &nbsp;|&nbsp;
        <a href="./privacy-policy">개인정보처리방침 / Privacy Policy</a> &nbsp;|&nbsp;
        <a href="mailto:wnscjfrla12@gmail.com">wnscjfrla12@gmail.com</a>
      </p>
    </div>

  </div>
</body>
</html>