-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·285 lines (264 loc) · 13.3 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta property="og:title" content="新年2023">
<meta property="og:description" content="年賀状代わり、お年玉としてアマギフ1000円先着であげます">
<meta property="og:image" content="https://ishida-shunya.github.io/NewYear-2023/newyear.jpg">
<title>新年2023</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import { getFirestore , collection, doc, getDoc } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyDzstE53M6OkBi7p9LSe7u2tp7lDXw1Pc8",
authDomain: "newyear2023-2cb0a.firebaseapp.com",
projectId: "newyear2023-2cb0a",
storageBucket: "newyear2023-2cb0a.appspot.com",
messagingSenderId: "230233730605",
appId: "1:230233730605:web:94c2f4eae9dfa22dacd2a4"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const docRef = doc(db, "data", "2023");
const docSnap = await getDoc(docRef);
//Show data on page
if (docSnap.exists()) {
var sample = document.getElementById('Number');
var disc = document.querySelector(".description");
var main = document.querySelector(".main_back");
var talk = document.querySelector(".news");
var nmain = document.querySelector(".news_main");
var ct = document.querySelector(".countdown");
sample.insertAdjacentHTML('beforeend', docSnap.data().Number);
const gift = document.querySelector(".gift");
window.addEventListener("copy",function(e){
e.clipboardData.setData("text/plain","コピペでズルすんな！卑怯者！");
window.location.href = 'https://www.xvideos.com/video52101549/_18_ver.';
e.preventDefault();
});
gift.className += '-show';
disc.style.display = "none";
main.style.display = "block";
nmain.style.display = "none";
ct.style.display = "none";
} else {
var sample = document.getElementById('Number');
sample.insertAdjacentHTML('beforeend', '?????');
}
</script>
</head>
<body onContextmenu="return false;">
<div class="preload"><div class="spinner"></div></div>
<div id="Database">
<div class="main_back">
<div class="title_wrapper">
<div class = "title"><h1>Happy New Year!!!</h1><h2>今年もよろしくお願いいたします</h2></div>
</div>
<div class="aisatu_wrapper">
<div class="aisatu">
<h2>謹賀新年</h2>
<div class = "ohanasi">
<p>皆様明けましておめでとう御座います</p>
<p>今年も大変お世話になりました。</p>
<p>国内外で多くの事件が置き、今年は特に物騒でしたね。</p>
<p>幸い私は比較的穏やかな一年でした。</p>
<p>二〇二三年は個人的に忙しくなりそうですが、<br>よろしくお願いいたします</p>
<div class="name"><p>石田 駿弥</p></div>
</div>
</div>
</div>
</div>
<div class = "news">
<div class="countdown">
<div class="blur">
<h2>2022年</h2>
<h2>残り時間</h2>
<p id="lefttime">10時間10分22秒</p>
</div>
<div id="video-area">
<video id="video" poster="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-3-1/img/movie.jpg" webkit-playsinline playsinline muted autoplay loop>
<source src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-3-1/video/movie.mp4" type="video/mp4">
</video>
</div>
</div>
<div class = "talk_wrapper">
<div class="talk">
<h2>ごあいさつ</h2>
<p>みなさん2022年あっという間でしたね、来年も良いお年になることをお先にお祈りしておきます。</p>
<p>今年も年賀状を出すのがめんどくさいので、あけおめサイトをみんなに配る方式で新年の挨拶を済ませようと思います。</p>
<p>むしろこっちのほうが手間かかってるから、ホントは年賀状のほうが作業量は少ないのですが、サイトなら12/31ギリギリまで開発しててもいいのでギリギリで動く僕にはぴったりです。</p>
<p>一応新年になるとこのサイトの見た目が変わる感じにしておくつもりですが、それまで殺風景なのはなんかアレなので、今年のニュースでもまとめておくことにしました</p>
<p>適度に置いておくので見たり見なかったりしてください</p>
<p>あと今年はお年玉あります。下の方にスクロールしてざっとルールとか確認してもらえると嬉しいです</p>
<h2>今年の俺</h2>
<p>スマホに残ってた少なめの写真から1年をどうにか振り返ってみようのコーナー</p>
<a class="photolink" href="https://photos.app.goo.gl/h7oJwZDnsVwDzQ6B7">
<img src="google_photo.png">
<div class="linktext">Googleフォトで見る</div>
</a>
<p></p>
</div>
</div>
<div class="news_main">
<h1>ことしのできごと</h1>
<div class="month">
<h2>1月</h2>
<ul>
<li>マクドナルドポテト不足</li>
<li>ガソリン価格,13年ぶりの高水準</li>
<li>トンガで海底火山噴火</li>
</ul>
<img src="news/1.jpg">
</div>
<div class="month">
<h2>2月</h2>
<ul>
<li>Nintendo Switch出荷台数１億台</li>
<li>ウマ娘リリース１周年</li>
<li>ウクライナに軍事侵攻開始</li>
</ul>
<img src="news/2.jpg">
</div>
<div class="month">
<h2>3月</h2>
<ul>
<li>５年ぶりに俺がスマホ買い替え</li>
<li>ウィル・スミス平手打ち</li>
<li>電力需給逼迫警報が発令</li>
</ul>
<img src="news/3.jpg">
</div>
<div class="month">
<h2>4月</h2>
<ul>
<li>１８歳成人に、改正民法施行</li>
<li>知床半島で観光船沈没</li>
<li>1ドル131円突破、20年ぶり</li>
</ul>
<img src="news/4.jpg">
</div>
<div class="month">
<h2>5月</h2>
<ul>
<li>ゆっくり茶番劇商標登録問題</li>
<li>ディーダのちんぽ<br>気持ち良すぎだろ!</li>
<li>サポカー限定の免許が新設</li>
</ul>
<img src="news/5.jpg">
</div>
<div class="month">
<h2>6月</h2>
<ul>
<li>令和ちゃんご乱心、40℃観測</li>
<li>IEサポート終了</li>
<li>サロメ嬢 、100万人突破</li>
</ul>
<img src="news/6.webp">
</div>
<div class="month">
<h2>7月</h2>
<ul>
<li>桐生市40.4℃</li>
<li>安倍元首相、銃撃され死亡</li>
<li>KDDI通信障害</li>
</ul>
<img src="news/7.jpg">
</div>
<div class="month">
<h2>8月</h2>
<ul>
<li>コミケ100開催</li>
<li>アンナミラーズ国内撤退</li>
<li>ウクライナ侵攻から半年</li>
</ul>
<img src="news/8.jpg">
</div>
<div class="month">
<h2>9月</h2>
<ul>
<li>画像生成AIが話題に</li>
<li>スプラトゥーン3発売</li>
<li>エリザベス女王国葬</li>
</ul>
<img src="news/9.webp">
</div>
<div class="month">
<h2>10月</h2>
<ul>
<li>ゲーミングちんぽ華道部</li>
<li>1ドル150円 32年ぶり</li>
<li>Apple製品大幅値上げ</li>
</ul>
<img src="news/10.jpg">
</div>
<div class="month">
<h2>11月</h2>
<ul>
<li>3年ぶりの対面日中首脳会談</li>
<li>皆既月食、天王星食同時開催</li>
<li>ポケモン新作、過去最高売上</li>
</ul>
<img src="news/11.jpg">
</div>
<div class="month">
<h2>12月</h2>
<ul>
<li>我が家のネット死亡</li>
<li>モバイルデータ10GB使用</li>
<li>ウマ娘の収益でW杯配信</li>
</ul>
<img src="news/12.webp">
</div>
</div>
</div>
<div class="gift_wrapper">
<h1>おとしだま</h1>
<div class="gift">
<div class="card" onMouseDown="return false;" onSelectStart="return false">
<div class="thickness"></div>
<div class="thickness"></div>
<div class="thickness"></div>
<div class = "flex">
<div class = "credit">¥1000</div>
<img class = "logo" src="amazon_logo.png">
</div>
<div id = "Number"></div>
<div class="msg">先着1名お年玉</div>
</div>
<h2>誰か手に入れたみたいです。通知来ました</h2>
</div>
<div class="description">
<p>さて、今年の新年サイトはせっかくなのでお年玉要素を加えておきました。</p>
<h2>アマギフ1000円プレゼント！！<br>(先着1名)</h2>
<p>2023年になると、このページにアマギフの番号が表示されます(予定)。</p>
<p>一番最初にアマゾンのサイトに入力し終えて、残高に反映された人がお年玉ゲット！の実力型のお年玉抽選会です</p>
<p>番号表示はページ読み込み時に行うので、2023年になる瞬間に再読み込み連打してもらうと多分出てきます</p>
<p>なお、プログラミングが適当なので2023年ぴったりにちゃんと出てきてくれる保証はありません。あしからず。</p>
</div>
<div class="QA">
<h3>Q&A</h3>
<p class="Q">PCとスマホ、どちらが有利？</p>
<p class="A">極端に有利不利が発生しないようwindows,Android,iOSそれぞれの表示を確認しつつ対策してますが、ページレイアウトはスマホ向けに近い感じになってます</p>
<p class="B">追記:低電力モードに設定したiPhoneでは動作が不安定になる現象を確認しています。iOS端末の方は低電力モードを切ることをおすすめします</p>
<p class="Q">ページ内のどこかに番号が書いてあって、詳しい人が解析して奪われない？</p>
<p class="A">サイト内には番号は保存していません。問題ありません。</p>
<p class="Q">じゃあどうやって番号を保存しているの？</p>
<p class="A">Googleのデータベースに番号を保存して、そこからデータを受け取って表示します</p>
<p class="Q">プログラム詳しい人がデータベースの問い合わせコードを自作して、勝手に奪っていったりはしないの？</p>
<p class="A">データベースは2023年になってから返事を返すように設定したので、問題ありません。</p>
<p class="Q">データベースの設定が書き換わる可能性は？</p>
<p class="A">Googleのサーバーのセキュリティを破れるなら可能ですが、セキュリティに対して金額が少額すぎるので多分現実的にやらないでしょう。</p>
<p class="Q">データベースとの通信が暗号化されていなくて途中で傍受されて先に使われる可能性は？</p>
<p class="A"> Googleとの通信が暗号化されていない可能性はたぶんないと思いますが、心配性ならVPNでも使ってください</p>
<p class="Q">何千人も来たら鯖落ちとかデータベースの制限とかないの？</p>
<p class="A">データベースの問い合わせ制限数は5万くらい、同時接続数は100だったので100人来なければ多分大丈夫です。</p>
<p class="dron">表示されたカード番号はコピペ不可、カメラからの文字読み取り困難になってます。つまりズルしても意味ねーぞ</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>