-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
607 lines (598 loc) · 24.8 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
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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
<!-- @format -->
<!doctype html>
<html lang="zh-TW">
<head>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Organization",
"image": "https://scaict.org/src/img/%E8%83%8C%E5%BD%B1.webp",
"url": "https://scaict.org/",
"logo": "https://scaict.org/src/img/logo.svg",
"name": "SCAICT 中部高中電資社團聯合會議",
"alternateName": ["中電會", "SCAICT", "中部電資聯合會議"],
"description": "中電會是由一群熱愛資訊科技和社團活動的高中職生所組成，而主要目的在於整合中部資訊科技資源，推廣資訊相關的課程。",
"email": "[email protected]",
"contactPoint": {
"@type": "ContactPoint",
"email": "[email protected]"
},
"foundingDate": "2021-12-07",
"legalName": "中部高中電資社團聯合會議",
"numberOfEmployees": {
"@type": "QuantitativeValue",
"value": 40
},
"sameAs": [
"https://www.facebook.com/scaict.tw/",
"https://www.instagram.com/scaict.tw/",
"https://github.com/SCAICT"
]
}
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SCAICT 中部高中電資社團聯合會議</title>
<meta name="theme-color" content="#2f4154" />
<meta
name="description"
content="中電會是由一群熱愛資訊科技和社團活動的高中職生所組成，而主要目的在於整合中部資訊科技資源，推廣資訊相關的課程。"
/>
<meta name="author" content="毛哥EM" />
<meta name="keywords" content="中部電資聯合會議, 中電會, SCAICT" />
<meta property="og:type" content="website" />
<meta property="og:title" content="SCAICT 中部電資聯合會議" />
<meta property="og:url" content="https://scaict.org" />
<meta property="og:site_name" content="SCAICT 中部電資聯合會議" />
<meta property="og:image" content="http://example.com/src/img/og.webp" />
<meta
property="og:description"
content="中電會是由一群熱愛資訊科技和社團活動的高中職生所組成，而主要目的在於整合中部資訊科技資源，推廣資訊相關的課程。"
/>
<meta property="og:locale" content="zh-TW" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/src/img/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/src/img/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/src/img/favicon-16x16.png"
/>
<link rel="manifest" href="/src/img/site.webmanifest" />
<link
rel="mask-icon"
href="/src/img/safari-pinned-tab.svg"
color="#ca4480"
/>
<meta name="msapplication-TileColor" content="#2b5797" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="src/style.css" />
<meta name="twitter:card" content="summary_large_image" />
<script
src="https://kit.fontawesome.com/ca1af7f37f.js"
crossorigin="anonymous"
></script>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-F4MZSTYBW8"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-F4MZSTYBW8');
</script>
</head>
<body class="emfont-jfopenhuninn">
<style>
.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
background: #000;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
transition: opacity 0.5s ease-in-out;
font-family: 'NicoMoji', 'system-ui', sans-serif;
}
.loading span {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
<section class="loading"><span></span></section>
<script>
const text = 'Welcome to SCAICT';
let index = 0;
document.querySelector('.loading').textContent = '';
let welcomeText = setInterval(() => {
if (index < text.length)
document.querySelector('.loading').innerHTML =
text.slice(0, ++index) + '<span>_</span>';
else {
clearInterval(welcomeText);
setTimeout(() => {
document.querySelector('.loading').classList.add('shown');
setTimeout(() => {
document.querySelector('.loading').remove();
}, 2000);
}, 500);
}
}, 150);
</script>
<input type="checkbox" name="" id="credits" />
<main>
<header>
<div>
<div class="background"></div>
<div class="background-center"></div>
<h1>中部高中電資社團聯合會議</h1>
<h2>Student Club's Association of Information in Central Taiwan</h2>
<div class="emfont-Cubic11 lcd">_</div>
<div class="lcdText">Learn More</div>
<a href="" id="lcdLink">
<div class="lcdButton"></div>
</a>
<div class="bHole"></div>
<div
class="charger"
onclick="document.body.style.opacity=0;
setTimeout(function() {
window.scrollTo(0,containerScrollWidth);
setTimeout(function() {
document.body.style.opacity=1
}, 200);
}, 200);"
></div>
<div
class="cpu"
onclick="document.querySelector('.cpu img').style.animation='jump .5s ease-in-out';setTimeout(function() {document.querySelector('.cpu img').style.animation=''}, 500);"
>
<img src="/src/img/logo.svg" alt="" />
</div>
<div class="scaict">SCAICT</div>
<div class="decorations">
<div class="chargerText">Sponsor</div>
<div class="ukraine" id="ukraineHue"></div>
<div class="ukraineText">Hue</div>
<div class="ukraineText ukraineBrightness">Brightness</div>
<div class="ukraine" id="ukraineBrightness"></div>
<div class="friend">
<a href="https://www.instagram.com/scint.tw/" target="_blank"
>SCINT</a
><br />
<a href="/">SCAICT</a><br />
<a href="https://scist.org/" target="_blank">SCIST</a>
</div>
<div class="motor"></div>
<input type="checkbox" id="motorSwitch" />
<label
class="switch"
for="motorSwitch"
onclick="motorControl()"
></label>
<div class="switchToggle"></div>
<div class="switchText">Motor</div>
<div class="spinner"></div>
<div class="spinnerText">Scroll Down</div>
<div class="line"></div>
<div class="resistance"></div>
<div class="sca1"></div>
<div class="chip"></div>
</div>
<div class="diode"></div>
<div class="buttons">
<div>
<a href="#About_" class="button About"></a>
<h3 class="About">About</h3>
<a href="#Events_" class="button Events"></a>
<h3 class="Events">Events</h3>
<a href="#Project_" class="button Project"></a>
<h3 class="Project">Project</h3>
<a href="#Social_" class="button Social"></a>
<h3 class="Social">Social</h3>
</div>
</div>
</div>
</header>
<!-- awards -->
<div class="awards">
<a href="https://www.csslight.com/website/63649/Scaict" target="_blank">
<img
src="https://www.csslight.com/ribbons/csslight-featured-ribbon-black-right.png"
/>
</a>
<a href="https://www.webguruawards.com/sites/scaict" target="_blank">
<img
src="https://webguruawards.com/awards/GOTD/img_guru_of_the_day_right.png"
/>
</a>
<a href="https://www.topcssgallery.com/gallery/scaict/" target="_blank">
<img src="/src/img/TCG.png" />
</a>
<div class="spacer"></div>
<a href="https://topdesignking.com/website/1502/scaict" target="_blank"
><img
src="https://topdesignking.com/public/images/kotd-ribbon-neon.svg"
alt="TopDesignKing"
/></a>
</div>
<section id="About">
<div class="container">
<div class="before-goals">
<div class="titleBox cpuLogo">
<h2>關於我們</h2>
<h3>About Us</h3>
</div>
<div class="introduction">
<h3>中部高中電資社團聯合會議</h3>
<p>
成立於2021年，是由一群熱愛資訊科技和社團活動的高中職生所組成，而主要目的在於整合中部資訊科技資源，推廣資訊相關的課程。
本學期目前規劃邀請各大講師來線上授課，且學員可以免費且自由報名。
</p>
<p lang="en-US">
Established in 2021, we are a group of high school students
passionate about information technology and community
activities. Our main goal is to integrate resources and promote
courses related to information technology in central Taiwan.
</p>
</div>
<div class="introImg"></div>
</div>
<div class="titleBox goal" id="Project">
<div>
<h2>團隊目標</h2>
<h3>Our Goals</h3>
<p>我們正在對社群進行重大更新! 敬請期待 (*•̀ㅂ•́)و</p>
</div>
<div class="goal-container">
<div class="goals">
<article>
<div>
<img
class="bread-1"
src="/src/img/bread-board.svg"
alt=""
/>
<img
class="bread-1 bread-2"
src="/src/img/bread-board.svg"
alt=""
/>
</div>
<h4>開放原始碼社群</h4>
<p>
我們是一個開放原始碼社群，並且與開放文化基金會（OCF）
合作，透過公開課程簡報、影片及網站原始碼給大家更自由的使用我們的資源。
</p>
</article>
<article>
<div class="capacitance">
<img src="/src/img/capacitance.svg" alt="" />
<img src="/src/img/capacitance.svg" alt="" />
<img src="/src/img/capacitance.svg" alt="" />
</div>
<h4>主題課程</h4>
<p>
在每個月都會有不同主題的主題課程，大多以免費、線上的課程來進行授課。
若是時間上有衝突也無妨，我們都會在官方 YouTube
頻道放上先前的課程內容喔！
</p>
</article>
<article>
<div class="led-list">
<img src="/src/img/led.svg" alt="" /><img
src="/src/img/led.svg"
alt=""
/><img src="/src/img/led.svg" alt="" /><img
src="/src/img/led.svg"
alt=""
/><img src="/src/img/led.svg" alt="" /><img
src="/src/img/led.svg"
alt=""
/><img src="/src/img/led.svg" alt="" /><img
src="/src/img/led.svg"
alt=""
/><img src="/src/img/led.svg" alt="" /><img
src="/src/img/led.svg"
alt=""
/>
</div>
<h4>創社</h4>
<p>
協助中部地區學校創立或復興電資類型社團。
以零成本、零壓力為目標，只要推派社團幹部，我們就會盡全力的幫忙。
</p>
</article>
</div>
</div>
</div>
<section id="Events">
<h2>近期活動</h2>
<h3>Recent Events</h3>
<p>歡迎踴躍報名!</p>
<div class="events"></div>
</section>
<section id="Pastevents">
<h2>過去活動</h2>
<h3>Past Events</h3>
<div class="cpuMem">
<img src="/src/img/logo.svg" />
</div>
<div class="sdContainer">
<div class="sdBox"></div>
</div>
<div class="imgLcd"></div>
<div id="showImg-container">
<div class="showImg original">
選擇一個 SD 卡播放回憶<br />Select a SD card to play
</div>
</div>
<div class="event-mobile">
<div class="sdReader"></div>
<div class="sd"></div>
<div class="sdReaderTop"></div>
<div class="imgButton" onclick="changeImg(-1)"></div>
<div class="imgButton right" onclick="changeImg()"></div>
</div>
</section>
<section id="Sponsor">
<div class="SponsorBoxForHeight">
<h2>充電夥伴</h2>
<h3>Sponsors</h3>
<div class="Sponsor-ccontainer">
<div class="sponsor-fixed"></div>
<div class="sponsor-relative">
<div class="sponsor-list">
<!-- @format -->
<div class="sponsor">
<div class="battery-gogoro">
<div>Venue</div>
<div>provided</div>
</div>
<a href="https://tcivs.tc.edu.tw/" target="_blank">
<img
src="https://upload.wikimedia.org/wikipedia/zh/3/35/Logo_TCIVS.gif"
alt="台中高工 Logo"
/>
<div>
<h4>台中高工</h4>
<p>
國內工業教育指標學府，人才輩出。歷屆畢業校友近 5
萬人分佈海內外。
無論在政府機構、學術界、公民營企業或成功創業，皆卓然有成，
尤其培育出技術菁英多數投入產業界，或為產業界之金字品牌，享譽社會。
</p>
</div>
</a>
</div>
<div class="sponsor">
<div class="battery-9v">
<div>PREMIUM</div>
<div>SPONSOR</div>
</div>
<a href="https://ais3.org/" target="_blank">
<img
src="https://ais3.org/img/AIS3logo.png"
alt="AIS3 Logo"
/>
<div>
<h4>AIS3</h4>
<p>
邀請具資安實務與國際資安競賽實戰經驗之國內外專家學者進行授課，
透過資訊安全實務或實戰之經驗分享與演練，提升本課程學員之資安實務的能力與深度。
</p>
</div>
</a>
</div>
<div class="sponsor">
<div class="battery-9v">
<div>PREMIUM</div>
<div>SPONSOR</div>
</div>
<a href="https://devco.re/" target="_blank">
<img
src="/src/img/devcore.png"
alt="Devcore Logo"
style="transform: scale(1.34)"
/>
<div>
<h4>DEVCORE 戴夫寇爾</h4>
<p>
DEVCORE 是一家由資安專家組成的台灣資安公司，
專注於提供「紅隊演練」服務。以挑戰極限、研發攻擊技巧為核心，
致力於成為企業堅強的資安後盾，為世界打造更安全的網路環境。
</p>
</div>
</a>
</div>
<div class="sponsor">
<div class="battery">SPONSOR</div>
<a
href="https://ncse.tw/free-service-sponsor.html"
target="_blank"
>
<img
src="https://cdn-file.ncse.tw/ncse_logo_no_background.png"
alt="NCSE Logo"
/>
<div>
<h4>NCSE NETWORK</h4>
<p>
我們致力於提供高品質的雲端服務，服務範圍包含各類伺服器租用、網站代管、
攻擊流量洗清（Anti-DDoS）、技術支援，完美契合各類使用場景，並結合三大特點提供全方位的支援！
</p>
</div>
</a>
</div>
<div class="sponsor">
<div class="battery-gogoro">
<div>SPECIAL</div>
<div>THANKS</div>
</div>
<a href="https://ocf.tw/" target="_blank">
<img
class="invert"
src="https://ocf.tw/mediakit/icon_white.png"
alt="OCF Logo"
style="transform: scale(0.8)"
/>
<div>
<h4>開放文化基金會 OCF</h4>
<p>
是一個非營利性的組織。透過推廣開放科技和跨界合作，在台灣持續的銜繫科技社群與其他公／私領域，
來促成開放共創保障數位人權、支持透明涵融的數位公民社會。
</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="sponsor-club">
<h2 id="clubTitle">參與社團</h2>
<h3>Participating clubs</h3>
<div class="club-container">
<div class="club-list"></div>
</div>
</div>
<div class="sponsor-join">
<div>
<h2>一起充電吧！</h2>
<h3>You are the missing one!</h3>
<p>
電池還缺你一個！<br />
你的贊助能讓中電會提供更多優質的資源和更多豐富的課程與活動。<br />
若你有任何資源想要分享歡迎聯絡我們。
</p>
<p lang="en-US">
Your support can help us provide more high-quality resources
and a richer variety of courses and activities. If you have
any resources you'd like to share, feel free to contact us.
</p>
</div>
<img
src="/src/img/battery-case.svg"
alt=""
class="batteryCase"
/>
</div>
<div class="treebox" id="linktree">
<div>
<img src="/src/img/arrow.svg" alt="" class="arrow" />
<div>
<p>歡迎追蹤我們<br />獲得最新活動資訊。</p>
<p lang="en-US">
This is our linktree...kind of.<br />
Follow us to get the latest updates.
</p>
</div>
</div>
<div class="tree">
<img src="/src/img/logo.svg" alt="Logo" class="logo" />
<i
class="fa-brands fa-facebook"
link="https://www.facebook.com/scaict.tw/"
></i>
<i
class="fa-brands fa-discord"
link="https://dc.scaict.org"
></i>
<i
class="fa-brands fa-instagram"
link="https://www.instagram.com/scaict.tw/"
></i>
<i
class="fa-regular fa-envelope"
link="mailto:[email protected]"
></i>
<i
class="fa-brands fa-github"
link="https://github.com/SCAICT"
></i>
<img src="/src/img/tree.svg" alt="" />
</div>
</div>
<div class="braille">
<div class="creditsLabel">
<i
class="fa-regular fa-circle-up"
onclick=" window.scrollTo({top: 0,
behavior: 'smooth'
});"
></i>
<label for="credits">
<i class="fa-regular fa-copyright"></i
></label>
</div>
<div class="code">
⠁⠯⠄⠕⠌⠐⠅⠩⠄⠁⠯⠄⠙⠞⠐⠓⠱⠄⠊⠮⠐⠋⠻⠂⠉⠞⠂⠗⠮⠂⠗⠫⠐⠡⠐⠀⠠⠎⠞⠥⠙⠑⠝⠞⠀⠠⠉⠇⠥⠃⠄⠎⠀⠠⠁⠎⠎⠕⠉⠊⠁⠞⠊⠕⠝⠀⠕⠋⠀⠠⠊⠝⠋⠕⠗⠍⠁⠞⠊⠕⠝⠀⠊⠝⠀⠠⠉⠑⠝⠞⠗⠁⠇⠀⠠⠞⠁⠊⠺⠁⠝⠀⠖⠐⠍⠭⠂⠛⠥⠂⠙⠞⠈⠓⠱⠐⠙⠮⠁⠑⠬⠈⠟⠜⠈⠃⠭⠂⠁⠮⠐⠨⠐⠤⠀⠛⠌⠂⠅⠒⠈⠝⠡⠈⠟⠜⠄⠑⠞⠐⠁⠮⠐⠅⠮⠐⠚⠺⠈⠙⠧⠐⠙⠮⠁⠗⠔⠐⠮⠂⠐⠐⠐⠅⠯⠄⠑⠡⠈⠝⠡⠈⠊⠱⠐⠉⠡⠐⠕⠌⠐⠚⠒⠐⠁⠯⠄⠕⠌⠐⠅⠩⠄⠁⠯⠄⠙⠞⠐⠓⠱⠄⠊⠮⠐⠋⠻⠂⠉⠞⠂⠗⠮⠂⠗⠫⠐⠡⠐⠀⠠⠎⠞⠥⠙⠑⠝⠞⠀⠠⠉⠇⠥⠃⠄⠎⠀⠠⠁⠎⠎⠕⠉⠊⠁⠞⠊⠕⠝⠀⠕⠋⠀⠠⠊⠝⠋⠕⠗⠍⠁⠞⠊⠕⠝⠀⠊⠝⠀⠠⠉⠑⠝⠞⠗⠁⠇⠀⠠⠞⠁⠊⠺⠁⠝⠀⠖⠐⠍⠭⠂⠛⠥⠂⠙⠞⠈⠓⠱⠐⠙⠮⠁⠑⠬⠈⠟⠜⠈⠃⠭⠂⠁⠮⠐⠨⠐⠤⠀⠛⠌⠂⠅⠒⠈⠝⠡⠈⠟⠜⠄⠑⠞⠐⠁⠮⠐⠅⠮⠐⠚⠺⠈⠙⠧⠐⠙⠮⠁⠗⠔⠐⠮⠂⠐⠐⠐⠅⠯⠄⠑⠡⠈⠝⠡⠈⠊⠱⠐⠉⠡⠐⠕⠌⠐⠚⠒⠐
</div>
</div>
</div>
</section>
</div>
</section>
<div class="sponsor-charger fixed"></div>
</main>
<section class="credits">
<div>
<label for="credits" class="credits-x">
<i class="fa-regular fa-circle-xmark"></i
></label>
<h2>Credits</h2>
<div>
Front-End：毛哥EM<br />
Back-End：Edit Mr.<br />
Design & Art：Elvis Mao<br />
Fonts:
<a href="https://nicofont.pupu.jp/nicomoji.html">NicoMoji</a>,
<a href="https://github.com/andrew-paglinawan/QuicksandFamily"
>Quicksand</a
>, <a href="https://justfont.com/huninn/">jf open 粉圓</a>
<footer>
Copyright © 2023 SCAICT All Rights Reserved<br />
If you have any questions, please contact us at
<a href="mailto:[email protected]">[email protected]</a>
</footer>
</div>
</div>
</section>
<section class="link">
<div class="top-header"></div>
<div id="About_"></div>
<div id="Project_"></div>
<div id="Events_"></div>
<div id="Social_"></div>
</section>
<script src="src/main.js"></script>
<script src="https://font.emtech.cc/emfont.min.js"></script>
</body>
</html>