forked from BuckyMaler/global
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·229 lines (216 loc) · 13.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>VolumeVis系統體驗活動</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="HTML5 website template">
<meta name="keywords" content="global, template, html, sass, jquery">
<meta name="author" content="Bucky Maler">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!-- notification for small viewports and landscape oriented smartphones -->
<div class="device-notification">
<a class="device-notification--logo" href="#0">
<img src="assets/img/NTNU_logo.png" alt="Global">
<p>3D體積探索系統體驗調查 (VolumeVis Survey)</p>
</a>
<p class="device-notification--message">Global has so much to offer that we must request you orient your device to portrait or find a larger screen. You won't be disappointed.</p>
</div>
<div class="perspective effect-rotate-left">
<div class="container"><div class="outer-nav--return"></div>
<div id="viewport" class="l-viewport">
<div class="l-wrapper">
<header class="header">
<a class="header--logo" href="#0">
<img src="assets/img/NTNU_logo.png" alt="Global">
<p>3D體積探索系統體驗調查 (VolumeVis Survey)</p>
</a>
<div class="header--nav-toggle">
<span></span>
</div>
</header>
<nav class="l-side-nav">
<ul class="side-nav">
<li class="is-active"><span>前言</span></li>
<li><span>功能比較</span></li>
<li><span>說明影片</span></li>
<li><span>情境體驗</span></li>
<li><span>填寫問卷</span></li>
</ul>
</nav>
<ul class="l-main-content main-content">
<li class="l-section section section--is-active">
<div class="intro">
<h3>科技日興月益，過去3D資源的發展受紙本限制，如今電子書的應用越來越普及，而相關的系統資源仍持續發展中，因此我們發展了一套“3D視覺化探索系統”，可應用於教育、維安、醫學等相關領域，為次世代資訊系統擴展新的視野……</h3>
<!-- <h3 >3D體積探索，能應用在一些生活中的場景:<br>[教育領域] 化學元素結構探索、機械裝配訓練等。 <br>[維安領域] 機場行李違禁品安檢。<br>[醫學領域] 人體構造探索及解剖模擬。<br>等等其他應用領域..<br><br></h3> -->
<div class="intro--banner">
<img style="width: 100%; position: static;" src="assets/img/Intro.png" alt="">
<br>
<h4>(1) 提供免安裝操作 (採用 <a href="https://remotedesktop.google.com/support">Chrome遠端桌面</a>，使用前，請聯繫我索取存取碼)</h4><h4> (2) 也有另外提供 Mac/Win安裝系統檔</h4>
<button type="reset" class="cta">安裝 Mac/Win 系統檔案
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
<span class="btn-background"></span>
</button>
</div>
</div>
</li>
<li class="l-section section ">
<div class="intro">
<div class="intro--banner">
<h2>那我們的系統又能做到什麼呢?</h2>
<h3>沉浸式探索體積，快速且直觀的操作。<br>左：傳統切片式探索（平面）。 右：我們的方法可以觀察移除多少深度的結構。</h3>
<img style="width: 100%; position: static;" src="assets/img/v1.gif" alt="">
<!-- <div class="intro--options">
<a href="#0">
<h3 style="color: white;">本系統提供以下體積資料集 : </h3>
</a>
</div> -->
<!-- <div style="border:2px red solid;"><img src="範例圖片網址"></div> -->
<!-- <img style="width: 280px; position: static;" src="assets/img/Ex01.png" alt="">
<img style="width: 280px; position: static;" src="assets/img/Ex01.png" alt="">
<img style="width: 280px; position: static;" src="assets/img/Ex01.png" alt=""> -->
<!-- <button type="reset" class="cta">安裝 Mac/Win 系統檔案
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
<span class="btn-background"></span>
</button>
<img src="assets/img/Atom3.gif" alt="Welcome"> -->
<!-- <img src="assets/img/introduction-visual_2.png" alt="Welcome"> -->
</div>
<!-- <div class="intro--options">
<a href="#0">
<h3 style="color: white;">本系統提供以下體積資料集 : </h3>
</a>
</div>
<div class="about--options">
<a href="#0">
<h3>Hydrogen</h3>
</a>
<a href="#0">
<h3>Human</h3>
</a>
<a href="#0">
<h3>Foot</h3>
</a>
<a href="#0">
<h3>Teapot</h3>
</a>
<a href="#0">
<h3>Bonsai</h3>
</a>
<a href="#0">
<h3>Gas</h3>
</a>
</div> -->
</div>
</li>
<li class="l-section section">
<div class="about">
<h2>系統簡介及操作詳細說明</h2>
<div class="about--banner">
<h3>(1) 系統簡介、操作說明影片。</h3>
<iframe width="80%" height="50%" src="https://www.youtube.com/embed/YiHsapg1SwY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3>(2) 實際操作導覽影片，採用腳資料集進行訓練。</h3>
<iframe width="80%" height="50%" src="https://www.youtube.com/embed/BU0TZOkROKo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</li>
<li class="l-section section ">
<div class="work">
<h2>3大情境任務</h2>
<h3 style="text-align: center;">主要需完成 [任務1]，並且計時操作時間，其餘任務可以觀賞我們的操作影片</h3>
<div class="work--lockup">
<ul class="slider">
<li class="slider--item slider--item-left">
<a href="#0">
<div class="slider--item-image">
<img src="assets/img/Random.gif" alt="Victory">
</div>
<p class="slider--item-title">[ 任務 3 - 自由操作資料]</p>
<p class="slider--item-description">挑選感興趣的體積資料，自由發揮，無任何限制</p>
</a>
</li>
<li class="slider--item slider--item-center">
<a href="#0">
<div class="slider--item-image">
<img src="assets/img/teapot.gif" alt="Metiew and Smith">
</div>
<p class="slider--item-title">[ 任務 1 - 找出茶壺內的生物]</p>
<p class="slider--item-description"></p>
</a>
</li>
<li class="slider--item slider--item-right">
<a href="https://youtu.be/p3UN28YwlSc">
<div class="slider--item-image">
<img src="assets/img/Atom3.gif" alt="Alex Nowak">
</div>
<p class="slider--item-title">[ 任務 2 - 模擬出指定形狀]</p>
<p class="slider--item-description">可直接觀賞<a href="https://youtu.be/p3UN28YwlSc">操作視頻。</a></p>
</a>
</li>
</ul>
<div class="slider--prev">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M561,1169C525,1155,10,640,3,612c-3-13,1-36,8-52c8-15,134-145,281-289C527,41,562,10,590,10c22,0,41,9,61,29
c55,55,49,64-163,278L296,510h575c564,0,576,0,597,20c46,43,37,109-18,137c-19,10-159,13-590,13l-565,1l182,180
c101,99,187,188,193,199c16,30,12,57-12,84C631,1174,595,1183,561,1169z"/>
</g>
</svg>
</div>
<div class="slider--next">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</div>
</div>
</div>
</li>
<li class="l-section section">
<div class="hire">
<h2>線上問卷</h2>
<text style="text-align: center;">請點擊底下圖片前往問卷填寫網頁，<br>最後，感謝參與本活動，問卷無須具名，<br>僅供學術研究使用，感謝各位的協助!</text>
<br>
<button type="reset" class="cta_survey">
<img style="width:100%; height:auto;" src="assets/img/Cover.png" alt="Global">
</button>
<!-- <button type="reset" class="cta_survey">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
<span class="btn-background"></span>
</button> -->
</div>
</li>
</ul>
</div>
</div>
</div>
<ul class="outer-nav">
<li class="is-active">前言</li>
<li>功能比較</li>
<li>說明影片</li>
<li>情境體驗</li>
<li>填寫問卷</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
<script src="assets/js/functions-min.js"></script>
</body>
</html>