forked from kusiro/MJ_Hackathon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
455 lines (429 loc) · 24.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fugaz+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>2017 梅竹黑客松</title>
</head>
<body>
<style>
.loading_cover{
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
background-color: white;
top: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 2s;
transition-delay: 1s;
animation: z_index_down 1s linear;
animation-delay: 2.3s;
animation-fill-mode: forwards;
}
.loading_gear{
position: relative;
width: 100px;
top: 0;
opacity: .2;
transition: 1s;
animation: rotate 4s infinite linear;
}
@keyframes rotate{
from{ transform: rotate(0deg); }
to{ transform: rotate(359deg);}
}
@keyframes z_index_down {
from{ z-index: 999; }
to{z-index: -999; }
}
</style>
<div class="loading_cover">
<img class="loading_gear" src="2e69523a1f1a3a5aa9612348974ef547.png">
</div>
<div class="navbar">
<div class="logo_sqr">
<p class="logo_day"><b>10/</b>28.29</p>
<div class="line"></div>
<p class="localtion">交大工程四館</p>
</div>
<div class="title">
<h1>MEI-CHU</h1>
<h1>HACKATHON</h1>
</div>
</div>
<div id="Bar"><div id="selectionBar">
<div class="selection" data-target="intro">Intro</div>
<div class="selection" data-target="join_us">Join us</div>
<div class="selection" data-target="schedule">Schedule</div>
<div class="selection" data-target="sponsor">Sponsor</div>
<div class="selection" data-target="footer">Contact</div>
</div>
</div>
<div id="block_1">
<div class="parent_1">
<img class="block_1_img" src="1b74821b05c0bc9aba564dd3f8ac7f32.jpg">
<div class="container">
<div class='infocard'>
你就是轉動世界的齒輪
</div>
</div>
</div>
</div>
<div id="intro"><div id="particles_container">
<div class="content_1">
<div class="partical">
<h1>什麼是黑客松？</h1>
<div class="partical_block">
<b>Hackathon 顧名思義，就像是工程界的馬拉松</b>
<p>在一兩天內，日以繼夜地用最短的時間，將腦海中的創意構想，實作成系統的雛型，然後發表讓大家觀摩或給予建議。參加的團隊組成不限於程式設計師，還包括：美術設計、專案經理……等等。最後作品的成敗否還不僅考驗團隊成員的技術熟練度也包含：團隊的合作精神以及對需求的觀察力和構思的創新度等等。</p>
</div>
</div>
</div>
<div class="content_1">
<div class="partical">
<h1>梅竹黑客松有什麼不一樣？</h1>
<div class ="partical_block">
<p>目前坊間的類似活動，分為兩種：「傳統黑客松」以及「企業自行舉辦
的黑客松」傳統黑客松由參加隊伍發想提案，擁有近乎絕對的自由，但提供
的協助與引導少，不利經驗較少的學生團隊，完成作品的門檻提高，構想容
易偏離現實考量，落入為創新而創新的迷思；</p>
<p>反之，企業自行舉辦的黑客松多半聚焦在自家公司所遇到的瓶頸，出題的範圍比較侷限，
所提供的工具也以主辦企業本身自家的技術為主。有鑑於前兩者各有利弊，「梅竹黑客松」應運而生，
這次活動的開發主題皆由活躍於業界的企業所建議，開發主題的大方向與市場接軌
同時來自不同企業，各自提供獨家技術與資源，輔助參加者開發作品，兼顧
發想的自由空間與提案本身的市場可行性。參賽者可以發揮所長，藉著企業
的協助實現創意，並能和企業先進面對面交流想法。而負責決定主題與引導
的企業，不僅能挖掘人才，也同時藉此刺激自身一同創新思考。</p>
</div>
</div>
</div>
<div class="content_1">
<div class="partical last_partical">
<h1>參加梅竹黑客松的好處</h1>
<div class ="partical_block">
<p>此活動是與企業合作出資源(硬體或API等)的方式進行，參加者能與企業在
第一線接觸交流，並且提升其技術力。只要完整參與兩天一夜的活動，一
律授予梅竹黑客松專屬紀念品和活動參與證書！另外，主辦單位將據依當
天參與者的整體表現，選出幾組表現優秀隊伍 (視報名人數情況調整)額外頒授獎勵。</p>
</div>
<a target="blank" href="qa.html">FAQ</a>
</div>
</div>
</div>
</div>
<div id="block_2">
<div class="hex_array">
<div class="hex">
<div class="hex_in">
<div style="background: linear-gradient(90deg, #bae0ff, #8292cc); opacity: .5; width: 100%; height: 100%;" class="hex_in2"></div>
</div>
</div>
<div class="hex_even">
<div class="hex_in">
<img src="afcd8f656745edcc120a2ce8a26e2936.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex">
<div class="hex_in">
<img src="1e12b776e4f8537113d367431295efbe.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex_even">
<div class="hex_in">
<div style="background: linear-gradient(90deg, #bae0ff, #8292cc); opacity: .5; width: 100%; height: 100%;" class="hex_in2"></div>
</div>
</div>
<div class="hex">
<div class="hex_in">
<img src="dc2051a53a2224cec76ff574d9787bd2.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex_even">
<div class="hex_in">
<div style="background: linear-gradient(90deg, #bae0ff, #8292cc); opacity: .5; width: 100%; height: 100%;" class="hex_in2"></div>
</div>
</div>
<div class="hex">
<div class="hex_in">
<div style="background: linear-gradient(90deg, #bae0ff, #8292cc); opacity: .5; width: 100%; height: 100%;" class="hex_in2"></div>
</div>
</div>
</div>
<div class="hex_array sec_array">
<div class="hex">
<div class="hex_in">
<img src="2f5fcd4c8ddc31bde7e86fa7b8867f29.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex_even">
<div class="hex_in">
<div style="background: linear-gradient(90deg, #bae0ff, #8292cc); opacity: .5; width: 100%; height: 100%;" class="hex_in2"></div>
</div>
</div>
<div class="hex">
<div class="hex_in">
<img src="4daf7fb90f3bdda39daa3047c13a3354.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex_even">
<div class="hex_in">
<img src="a151638109d5a9b2424e38a895958c33.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex">
<div class="hex_in">
<img src="57e34a337ccd25fb0871abad0192378f.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex_even">
<div class="hex_in">
<img src="6714a4e664196a0c1698d4fbedb1e81f.jpg" class="hex_in2"></img>
</div>
</div>
<div class="hex">
<div class="hex_in">
<div style="background: linear-gradient(90deg, #bae0ff, #8292cc); opacity: .5; width: 100%; height: 100%;" class="hex_in2"></div>
</div>
</div>
</div>
</div>
<div id="join_us"><div class="content_2">
<div class="partical">
<h1>報名流程</h1>
<div class="partical_block">
<p>報名費用 : 300 + 200 保證金(全程參與活動會全額退還保證金)<br/>
報名日期 : 09/25 - 10/06</p>
<br/>
<p>10/07 大會公告錄取參賽隊伍以及所屬企業<br/>
10/09 第一階段報名成功隊伍繳費期限<br/>
10/10 大會發出候補通知<br/>
10/17 候補報名成功隊伍繳費期限
</p>
</div>
<div class="sign_in">
<div style="flex: 10; -webkit-flex: 10;"></div>
<a target="blank" href="http://2017.hackathon.nctu.me/signup">立即報名</a>
<div style="flex: 10; -webkit-flex: 10;"></div>
</div>
</div>
<div class="partical">
<h1>報名須知</h1>
<ul class="partical_block">
<li>報名表單送出後請密切注意您所填寫之電子信箱，大會將會以email與參賽者確
認報名/參賽事宜。(若未收到信請先至垃圾信件匣查找，若還是沒收到可與
<div onclick="window.open('https://www.facebook.com/HackMeiChu/','mywindow');"
style="cursor: pointer; color: #e82929; display: inline-block">FB粉專</div>聯絡)
</p>
<li>若報名後因個人因素導致活動當日無法前來者，請在活動日期兩周前(10/14以前)
寄email/私訊粉專聯絡工作人員，我們將會派專人與您聯繫退費事宜。(可能產生轉帳手續費)
</p>
<li>企業分配將以各團隊/個人所填寫之企業志願序為準。</p>
<li>參賽隊伍可自由使用各企業提供的資源做整合，但是一定要使用到自己所屬引導企業的資源，企業資訊請詳見「合作引導企業」</p>
<li>團隊報名者：每一隊3~5人，團隊中至少要有一人具備使用企業資源的能力。並且儘量在專長中說明團隊或個人所具備的技術或其他能力。</p>
<li>個人報名者：個人報名者在報名表填寫隊伍隊長欄位即可。請務必明確填寫個人的專長，如果能夠在「備註」欄位自我介紹更好，以利主辦單位幫忙媒合適當的合作伙伴。</p>
<li> 主辦單位將會每天更新各企業剩餘組數，並於報名後一天通知隊伍選上的企業。</p>
</ul>
</div>
</div>
</div>
<div id="schedule"><div class="content_3">
<h1><b>S</b>chedule</h1>
<div class="sche_cont">
<div class="sche">
<div class="day">
Day 1
</div>
<div class="event">
<div class="event_text"><p class="schedule_contain">報到 & 相見歡</p><p class="time_text"><b>08</b>30</p></div>
<div class="event_text"><p class="schedule_contain">開場 & 來賓致詞</p><p class="time_text"><b>09</b>00</p></div>
<div class="event_text"><p class="schedule_contain">公布題目&技術人員說明</p><p class="time_text"><b>10</b>30</p></div>
<div class="event_text"><p class="schedule_contain">開始coding</p><p class="time_text"><b>12</b>00</p></div>
<div class="event_text"><p class="schedule_contain">午餐時間</p><p class="time_text"><b>13</b>00</p></div>
<div class="event_text"><p class="schedule_contain">持續 coding</p><p class="time_text"><b>15</b>30</p></div>
<div class="event_text"><p class="schedule_contain">晚餐時間+野台表演</p><p class="time_text"><b>18</b>30</p></div>
<div class="event_text"><p class="schedule_contain">戰鬥永無止盡</p><p class="time_text"><b>19</b>30</p></div>
</div>
</div>
<div class="sche">
<div class="day">
Day 2
</div>
<div class="event">
<div class="event_text"><p class="schedule_contain_2">早餐時間</p><p class="time_text" ><b>07</b>00</p></div>
<div class="event_text"><p class="schedule_contain_2">最後衝刺</p><p class="time_text" ><b>08</b>00</p></div>
<div class="event_text"><p class="schedule_contain_2">午餐時間</p><p class="time_text" ><b>11</b>00</p></div>
<div class="event_text"><p class="schedule_contain_2">最後衝刺</p><p class="time_text" ><b>12</b>00</p></div>
<div class="event_text"><p class="schedule_contain_2">各組擺攤demo</p><p class="time_text" ><b>14</b>00</p></div>
<div class="event_text"><p class="schedule_contain_2">交流時間</p><p class="time_text" ><b>15</b>30</p></div>
<div class="event_text"><p class="schedule_contain_2">決賽</p><p class="time_text" ><b>16</b>00</p></div>
<div class="event_text"><p class="schedule_contain_2">評審講評</p><p class="time_text" ><b>16</b>40</p></div>
<div class="event_text"><p class="schedule_contain_2">贊助商活動宣傳</p><p class="time_text" ><b>17</b>00</p></div>
<div class="event_text"><p class="schedule_contain_2">頒獎典禮及閉幕</p><p class="time_text" ><b>17</b>10</p></div>
<div class="event_text"><p class="time_text" ><b>18</b>00</p></div>
</div>
</div>
</div>
<img id="sche_gear_1" src="7d2c11fd0385cbb4656c859a990686ad.png" />
<img id="sche_gear_2" src="7d2c11fd0385cbb4656c859a990686ad.png" />
</div>
</div>
<div id="sponsor"><div class="content_5">
<h2>合作引導企業</h2>
<div class="coperate-list">
<div class="coperateimg">
<img src="1090519af85b8709862000932dc596a2.png">
</div>
<div class="coperate-content">
<h3>合勤基金會</h3>
<p>合勤基金會以推動創新與創業為目標，深耕「創新思維」、「創業育成」與「友善環境」三大面向，持續關注「跨界創新」，與學生和青年創業家接軌，期以開拓的視野與無框架的創意思考激發突破自我的能量與火花。<br/>
<br/>
【鼓勵創新】舉辦「Innovation +」系列講座，邀請具有創新與創業實踐的創客蒞臨分享，傳達勇於創新與勇敢實踐的力量。<br/>
<br/>
【支持創業】與加速器中心、產、官、學、研合作，投入資源與支持物聯網相關提案的創新與創業，鼓勵產學合作、內部創業與青年創業。<br/>
<br/>
【培育優秀人才】提供資源鼓勵優秀學生逐夢踏實，贊助校園內之創新與創業相關競賽活動如Hackathon、搶鮮大賽等創新競賽活動，藉此培養跨界創新人才。<br/>
<br/>
【善盡社會責任】支持各種形式之公共論壇、創願演講、環保愛地球活動，鼓勵具關懷土地或愛護環境理念之實踐家，舉辦體驗活動關懷社會與人文發展。<br/>
<br/>
<br/>
<b>目標</b><br/>
<div class="english_content" style="line-height: 1.8em;">
The next application revolution is here. In recent years, Wi-Fi access points have become more and more
powerful devices. They pack powerful processors, lots of RAM and enough storage to turn this one-trick
pony into a versatile application platform.<br/>
<br/>
Imagine combining router, NAS, smart home hub & security appliance into a single device. The place to
provide centralized file services, security, Wi-Fi analytics or next generation location-based games,
immediately available to any device connected to the router's Wi-Fi.<br/>
<br/>
We have built and API to tab into that power and make it available for 3rd parties to create the next wave
of services. These APIs give developers access to: Wi-Fi, DNS and VPN configuration, real-time connection
data and information about the connected Wi-Fi clients.<br/>
<br/>
At the hackathon, we expect participants to use the provided APIs and prototype a subscription service
that can be marketed to families, small businesses or enterprises.<br/>
</div>
<br/>
<b>需具備技術＆能力</b><br/>
應用程序開發，Web編程和後端開發
<div class="english_content">App development, web programming and backend development</div><br/>
<br/>
<b>提供設備資源</b><br/>
<div class="english_content">Zyxel Armor Z2 NBG-6817 AC2600</div>雙頻無線 Gigabit 路由器<br/>
<br/>
<b>設備&資源詳細說明文件</b><br/>
另行提供下載連結給參賽隊伍</p>
</div>
</div>
<div class="coperate-list">
<div class="coperateimg">
<img src="b35fffe63991cb1d8ef4a074c6b81e42.png">
</div>
<div class="coperate-content">
<h3>趨勢科技</h3>
<p>
E-mail 是企業內部或是與外部夥伴溝通的重要管道，然則商業電子郵件詐騙事件也屢見不鮮。根據 FBI 的調查，三年來全球商業郵件詐騙案多達四萬起，<b onclick="window.open('http://www.ithome.com.tw/news/113955','mywindow');" style="cursor: pointer; color: #e82929; text-decoration: underline; letter-spacing 2px;">曝險損失金額高達3億美元</b>，連科技業巨頭 Google 與 Facebook 也成為釣魚郵件受害者，合計匯了一億美金給假冒硬體供應商廣達電腦的來自立陶宛的騙子。趨勢科技致力於保護客戶的資訊安全，在研究防堵垃圾信與詐騙信的同時中也搜集了大量的資料，我們想邀請參加者一起來構思如何判定垃圾信件的威脅程度，或是從垃圾信件中挖掘出些有趣的性質。以下是建議的發展方向：<br/>
<br/>
• 判斷垃圾信件的威脅程度，eg. 廣告信、釣魚信、商業電子郵件詐騙信<br/>
• 垃圾信件的資料探勘<br/>
• 換位思考，換成是你要怎麼透過電子郵件得到最大不法收益？<br/>
• 使用者介面設計：如何協助使用者判別信件是否安全？<br/>
<br/>
或是其他任何有趣的想法都十分歡迎
</p>
</div>
</div>
<div class="coperate-list">
<div class="coperateimg">
<img src="6c4dcf00599fe5462f650441f3233ba6.png">
</div>
<div class="coperate-content">
<h3>羅技科技</h3>
<p>
羅技電子是一家著重創新與品質的瑞士公司，其個人週邊產品的設計為消費者提供絕佳的數位體驗。我們從 1981 年開始研發當時所沒有的滑鼠，讓使用者可以用更直覺的方式與個人電腦互動。羅技為了因應日新月異的個人電腦與筆記型電腦科技，重新研發了數十種滑鼠來滿足使用者的需求，如今我們已是全球電腦滑鼠的領導品牌。<br/>
<br/>
從成立到現在，我們將專業知識擴展到電腦滑鼠以外的產品設計，透過多種介面裝置產品縮短使用者與電腦、遊戲主機、數位滑鼠或家庭娛樂系統間的距離。<br/>
<br/>
羅技的產品遍佈全世界的每一個角落，其個人週邊產品 (無線和有線) 創新技術無人可及，尤其在個人電腦瀏覽功能、遊戲、網路通訊、數位滑鼠和家庭娛樂控制等產品。<br/>
<br/>
我們針對每一種產品類別，研究客戶使用數位裝置的方法，然後由設計師與工程師針對那些裝置，設計出更豐富、更舒服、更有趣且更有效率的使用體驗。<br/>
</p>
</div>
</div>
<div class="coperate-list">
<div class="coperateimg">
<img src="c3d4383a740d0f442c149e5f6941abc6.png">
</div>
<div class="coperate-content">
<h3>愛就贏</h3>
<p>
企業簡介：在數位場域裡以合作孕育彼此，共同開啟展新商機，創造新的可能性<br/>
<br/>
資源簡介：
提供未經過整理的原始發票內容，希望能請協助思考以下：<br/>
藉由這些發票資訊<br/>
1. 未來可以產出什麼的效益？<br/>
2. 可能的應用？
</p>
</div>
</div>
<div class="sponsorlist">
<h2>企業贊助</h2>
<ul>
<li>
<img class="diamond" src="f7222c1df59040d4c321740e9818be93.svg" alt="">
<img onclick="window.open('https://www.cathayholdings.com/holdings/','mywindow');" class="sponsor_reveal" src="fee3c45a0a37613c3caef1d2aec4e787.png"/>
</li>
<li>
<img onclick="window.open('http://www.goyourlife.com/zh-TW/homepage/','mywindow');" class="sponsor_reveal" src="1663d1b4b3ab69efe99f9a60cdf7516b.png"/>
</li>
</ul>
</div>
</div>
</div>
<div id="footer"><div class="content_6">
<div class="footer_block">
<h1>工作人員</h1>
<p>總召：呂承翰</p>
<p>副召：林家瑜</p>
<p>公關：楊上萱、李欣蓓、曾楷恩、官家妤、黃張原、徐唯瑄、蔡明娟</p>
<p>美宣：林彥傑、余宇弘、李佳燕、蔡孟蓉、何樂晴</p>
<p>總務：王美驊</p>
<p>場器：林献庭、朱詠嘉、曹元泰、劉柏聲、汪明亮</p>
<p>網路：陳源灝、王建棊、孫誠、孫正、蔡孟軒、姚宇聲、謝宗林</p>
</div>
<div class="footer_block">
<h1>主辦單位</h1>
<p>國立交通大學</p>
<p>國立清華大學</p>
<h1>協辦單位</h1>
<p>高階繪圖與立體視訊基礎技術研發中心</p>
<p>行動APP暨遊戲產業發展聯盟</p>
<p>電腦視覺監控產學研聯盟</p>
<p>交大產學運籌中心</p>
<p>清大產學運籌中心</p>
<p>AppUniverz</p>
</div>
<div class="footer_block">
<h1>Email</h1>
<p>[email protected]</p>
<h1>Facebook專頁</h1>
<p onclick="window.open('https://www.facebook.com/HackMeiChu/','mywindow');" style="color: #1dcb8b; cursor: pointer; text-decoration: underline">
https://www.facebook.com/HackMeiChu
</p>
<h1>Facebook社團</h1>
<p onclick="window.open('https://www.facebook.com/groups/hacknctu/','mywindow');" style="color: #1dcb8b; cursor: pointer; text-decoration: underline">
https://www.facebook.com/groups/hacknctu/
</p>
</div>
</div>
</div>
<script type="text/javascript" src="bundle.js"></script></body>
<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</html>