-
Notifications
You must be signed in to change notification settings - Fork 0
/
skilltree.html
234 lines (234 loc) · 11.4 KB
/
skilltree.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>技能樹</title>
<link rel="stylesheet" href=" ./css/skilltree.css">
<script src="https://www.gstatic.com/firebasejs/5.5.1/firebase.js"></script>
<script src="./js/login.js"></script>
<script src="./js/all.js" defer></script>
<script src="./js/skilltree.js" defer></script>
</head>
<body>
<div class="header">
<div id="headerNav"><img class="logo" src="https://frankyeah.github.io/Front-Enter/images/FE_logo-4.png" alt="">
<nav>
<button id="search-button" type="button">探索</button>
<button id="skilltree-button" type="button">技能樹</button>
<button id="header-login" type="button">登入</button><img id="click-glass" src="https://frankyeah.github.io/Front-Enter/images/FE_search_green.png" alt="">
</nav>
</div>
<div id="loginContainer">
<div class="loginBackground">
<div class="loginBox"><img class="login" src="https://frankyeah.github.io/Front-Enter/images/FE_logo-2.png" alt="">
<form>
<input id="email" type="email" name="email" placeholder="Email" required>
<input id="password" type="password" name="password" placeholder="******" required>
</form><span class="forgetPW">忘記密碼？</span>
<div class="blueBtn">
<button id="register">註冊</button>
<button id="login">登入</button>
</div>
<button id="loginGmail">log in with Gmail</button>
</div>
</div>
<div class="remindBackground">
<div class="remindBox">
<div class="header">Remind </div>
<div class="content"> </div>
<button class="okButton">OK </button>
<button class="noButton">No</button>
</div>
</div>
</div>
<div id="search-box"><span>SEARCH</span>
<form id="searchBar" action="">
<input id="search" type="search" placeholder="搜尋課程名稱、所在城市或簡介" data-search><img class="voice" src="https://frankyeah.github.io/Front-Enter/images/microphone.svg" alt=""><img class="search-glass" src="https://frankyeah.github.io/Front-Enter/images/FE_search_green.png">
</form>
</div>
<div id="black-box"></div>
</div>
<div class="info">
<div class="info-header">技能樹</div>
<div class="test-go test-go-container"><img class="test-go-round" src="https://frankyeah.github.io/Front-Enter/images/FE_test_go.png"></div>
<div class="testContainer">
<div class="testBackground">
<div class="boxContainer">
<div class="testHeader">測驗說明</div>
<div class="testIntro">點選「開始測驗」後，系統將根據你的回答，找出最適合你的學習環境，並顯示有多少百分比的合適度。</div>
<div class="startBtn">開始測驗</div>
<div class="testQuestion">Question Test</div>
<div class="testNumber">0/5</div>
<ul id="testList">
<li>
<input class="answer" id="1" type="radio" name="answer">
<label id="1-text" for="1">台北</label>
</li>
<li>
<input class="answer" id="2" type="radio" name="answer">
<label id="2-text" for="2">台北 </label>
</li>
<li>
<input class="answer" id="3" type="radio" name="answer">
<label id="3-text" for="3">台北 </label>
</li>
<li>
<input class="answer" id="4" type="radio" name="answer">
<label id="4-text" for="4">台北</label>
</li>
<li>
<input class="answer" id="5" type="radio" name="answer">
<label id="5-text" for="5">台北</label>
</li>
</ul>
<button id="newURL">學校 ABC</button>
<div class="pieContainer">
<div class="pieChart">
<div class="pieNum">20%</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="intro">
<p class="intro-header">技能樹說明</p>
<div class="bottom-line"> </div>
<p class="intro-content">要成為一名稱職的前端，需要學會哪些技能呢？您不仿親自測試看看，自己已掌握了哪些能力。遊戲中，只需點擊按鈕回答問題，答對了，即能接續挑戰。</p>
</div>
<div class="main">
<div class="iconContainer">
<div class="iconBackground">
<div class="iconBox">
<h2>請選擇 icon </h2>
<div class="iconList"> <img class="cute1" src="https://frankyeah.github.io/Front-Enter/images/cute.svg" alt=""><img class="cute2" src="https://frankyeah.github.io/Front-Enter/images/cute2.svg" alt=""><img class="cute3" src="https://frankyeah.github.io/Front-Enter/images/cute3.svg" alt=""></div>
</div>
</div>
</div>
<div class="gameContainer">
<div class="gameBackground">
<div class="gContainer"><span class="gameHeader"> </span>
<button class="firstAns"> </button>
<button class="secondAns"> </button>
<button class="thirdAns"></button>
<div class="gArrow"></div>
</div>
</div>
<div class="displayBackground">
<div class="dContainer">
<p></p>
</div>
</div>
</div>
<div class="leftBlock">
<div class="block cssBlock">
<p>CSS</p><br>層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），是一種用來為結構化文件（如 HTML 文件或 XML 應用）添加樣式（字型、間距和顏色等）的電腦語言。
</div>
<div class="block jqueryBlock">
<p>jQuery</p><br>jQuery 是一套跨瀏覽器的 JavaScript 函式庫，簡化 HTML 與 JavaScript 之間的操作。
</div>
<div class="block scssBlock">
<p>SCSS</p><br>Sass 是一個將指令碼解析成 CSS 的手稿語言，即 SassScript。Sass 包括兩套語法。最開始的語法叫做「縮排語法」，使用縮排來區分程式碼塊，並且用換行將不同規則分隔開。而較新的語法叫做「SCSS」。
</div>
<div class="block bootstrapBlock">
<p>Bootstrap</p><br>Bootstrap 是一組用於網站和網路應用程式開發的開源前端框架，提供字體排印、表單、按鈕、導航及其他各種元件及 Javascript 擴充套件，旨在使動態網頁和 Web 應用的開發更加容易。
</div>
</div>
<div class="centerBlock">
<div class="box-evenly">
<div class="user-icon"></div>
</div>
<div class="box-evenly">
<div class="html greyBorder">HTML</div>
</div>
<div class="box-left line1">
<div class="slash"></div>
</div>
<div class="box-evenly line2">
<div class="css greyBorder">CSS </div>
<div class="horiz"></div>
<div class="js greyBorder">JS</div>
</div>
<div class="box-right line3">
<div class="slash"></div>
<div class="pipe"></div>
</div>
<div class="box-evenly">
<div class="jquery greyBorder">jQuery </div>
<div class="rwd greyBorder">RWD</div>
</div>
<div class="box-right-second line4">
<div class="slash"></div>
</div>
<div class="box-evenly">
<div class="github greyBorder">GitHub</div>
</div>
<div class="box-evenly line5">
<div class="slash"></div>
<div class="backslash"></div>
</div>
<div class="box-evenly">
<div class="scss greyBorder">SCSS</div>
<div class="webpack greyBorder">Webpack</div>
</div>
<div class="box-evenly-eighth line6">
<div class="pipe pipe-one"> </div>
<div class="pipe pipe-two"></div>
</div>
<div class="box-evenly">
<div class="bootstrap greyBorder">Bootstrap</div>
<div class="react greyBorder">React</div>
</div>
<div class="box-right-tenth line7">
<div class="slash"></div>
</div>
<div class="box-evenly">
<div class="unitTest greyBorder">Unit Test</div>
</div>
</div>
<div class="rightBlock">
<div class="block htmlBlock">
<p>HTML </p><br>超文件標示語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。
</div>
<div class="block jsBlock">
<p>JavaScript </p><br>JavaScript 是一門基於原型、函式先行的語言，是一門多範式的語言，它支援物件導向編程，指令式程式設計，以及函數語言程式設計。
</div>
<div class="block rwdBlock">
<p>RWD </p><br>響應式網頁設計（英語：Responsive web design，通常縮寫為 RWD），是一種網頁設計的技術做法，該設計可使網站在不同的裝置上瀏覽時，對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。
</div>
<div class="block githubBlock">
<p>GitHub</p><br>GitHub 是透過 Git 進行版本控制的軟體原始碼代管服務，由 GitHub 公司（曾稱 Logical Awesome）開發者使用 Ruby on Rails 編寫而成。
</div>
<div class="block webpackBlock">
<p>Webpack</p><br>Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。
</div>
<div class="block reactBlock">
<p>React </p><br>React 是一個為資料提供彩現為 HTML 視圖的開源 JavaScript 庫。React 視圖通常採用包含以自訂 HTML 標記規定的其他元件的元件彩現。
</div>
<div class="block unitTestBlock">
<p>Unit Test</p><br>在電腦編程中，單元測試（英語：Unit Testing）又稱為模組測試，是針對程式模組（軟體設計的最小單位）來進行正確性檢驗的測試工作。程式單元是應用的最小可測試部件。
</div>
</div>
</div>
<div class="top">
<div id="topwrap" onclick="toTop()">
<div class="top-arrow"></div>
<div class="top-icon">
<h3>TOP</h3>
</div>
</div>
</div>
<div class="footer">
<div class="footer-info"><a href="contact.html">聯絡</a>
<div class="num">0918-120-210</div>
<div class="mail">[email protected]</div>
</div>
<div class="fb-line"><a href="https://www.facebook.com/WendyHsinYun" target="_blank"> <img class="fb" src="https://frankyeah.github.io/Front-Enter/images/new-facebook-blue.svg"></a><a href="https://line.me/ti/p/OBVsxhRD9r" target="_blank"> <img class="line" src="https://frankyeah.github.io/Front-Enter/images/FE_line.png"></a></div>
</div>
<div id="animation"><img id="animation-logo" src="https://frankyeah.github.io/Front-Enter/images/FE_logo-4.png" alt="">
<div id="animation-blue"></div>
</div>
</body>
</html>