-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory.html
96 lines (78 loc) · 7.5 KB
/
story.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
<html style="height:100%;width:100%;margin:0px;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="WebExhibition" content="yes"><link href="https://fonts.googleapis.com/earlyaccess/notosanstc.css" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- flexboxgrid --><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">
<title> WebExhibition - 報導故事書</title>
<link rel="stylesheet" href="./dist/css/story.css">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<body>
<nav class="menu"><ul><li class="list"><a href="3dvr.html"><em>3D ＆ VR</em></a></li><li class="list"><a href="issue.html"><em>深度議題</em></a></li><li class="list"><a href="simple-app.html"><em>有趣小應用</em></a></li><li class="list"><a href="visualization.html"><em>視覺化圖表</em></a></li><li class="list"><a href="story.html"><em>報導故事書</em></a></li><li class="list"><a href="game.html"><em>遊戲</em></a></li></ul></nav><nav class="menu-mobile"><div id="experience" class="pojoro nav"> ● </div><p class="nav-main-text">嗨，我叫艾克斯・貝利恩斯，要來玩玩嘛？</p><a href="#menu-lists"><i class="fa fa-bars" aria-hidden="true"></i></a></nav><div class="nav-sub-text-div"><p class="nav-sub-text">這個網頁共包含六個主題，分別是<b>「3D & VR」、「深度議題」、「有趣小應用」、「視覺化圖表」、「報導＆故事書」、「遊戲」</b>，每一個都是很有趣的體驗，大家玩玩看吧！</p></div><div id="menu-lists" class="menu-lists-block"><div class="toggle-close"><a href="#experience"><i class="fa fa-times" aria-hidden="true"></i></a></div><a class="menu-link" href="./"><h3>起源</h3><p> - Experience 的反思之路</p></a><a class="menu-link" href="./impact.html" target="_blank"><h3>影響</h3><p> - Experience 的延續影響</p></a><a class="menu-link" id="fa-lists-applications"><h3>應用</h3><p> - Experience 的小小體悟</p><i class="fa fa-caret-down" aria-hidden="true"></i></a><div class="menu-lists-applications"><a class="menu-link" href="./3dvr.html"><h3>3D & VR</h3><p> - 簡易手機 VR 體驗</p></a><a class="menu-link" href="./issue.html"><h3>深度議題</h3><p> - 掌蚊人</p></a><a class="menu-link" href="./simple-app.html"><h3>有趣小應用</h3><p> - 抽獎機、即時回饋</p></a><a class="menu-link" href="./visualization.html"><h3>視覺化圖表</h3><p> - 台南市 1999 統計資訊</p></a><a class="menu-link" href="./story.html"><h3>報導 ＆ 故事書 </h3><p> - < 幸福的定義 > 網頁故事書</p></a><a class="menu-link" href="./game.html"><h3>遊戲</h3><p> - 掌蚊宗師</p></a></div></div> <header>
<div class="header-content" onclick="window.location='index.html'"> <h1>${header.title}</h1> <p class="p-font-400">${header.subTitle}</p> <a class="icon-back" href="index.html"> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> </a></div> </header>
<nav>
<h3>Review 2015</h3>
<h3>幸福的定義</h3>
</nav>
<section>
<div class="section-title">
<h1 class="col-xs-6 col-md-2 col-md-offset-1">目標問題</h1>
</div>
<div class="row">
<div class="section-content col-xs-8 col-xs-offset-2 col-lg-6 col-lg-offset-3">
<p class="color-blue p-font-400">回顧 2015 所發生的重要事件</p>
<p class="color-blue p-font-400">想了解從數據上如何看「幸福」</p>
</div>
</div>
<div class="section-title">
<h1 class="col-xs-6 col-md-2 col-md-offset-1">如何思考</h1>
</div>
<div class="row">
<div class="section-content col-xs-8 col-xs-offset-2 col-lg-6 col-lg-offset-3">
<ul>
<li>先定義出我想傳達的是關於<span class="color-blue">「民生」</span>的重要事件</li>
<li>利用小王子的故事來述說何謂<span class="color-blue">「幸福」</span></li>
<li>以 GDP、預期壽命、幸福指數等資料來佐證故事所表達論點</li>
</ul>
</div>
</div>
<div class="section-title">
<h1 class="col-xs-6 col-md-2 col-md-offset-1">專案成果</h1>
</div>
<div class="row">
<div id="section-review2015" class="section-board col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<div id="board-review2015" class="board-img" onclick="window.open('http://tsehang.github.io/Review2015/#/');"></div>
<div class="board-content">
<h2>Review 2015</h2>
<p class="color-green-pink">回顧2015重大事件</p>
<br>
<div class="board-link">
<a href="http://tsehang.github.io/Review2015/#/" target="_blank"><i class="fa fa-eye" aria-hidden="true"></i></a>
<a href="https://github.com/TseHang/Review2015" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
</div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div id="section-happiness" class="section-board col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<div id="board-happiness" class="board-img" onclick="window.open('https://www.taiwanstat.com/happiness/#/');"></div>
<div class="board-content">
<h2>幸福的定義</h2>
<p class="color-green-pink">用小王子的故事敘述何謂「幸福」</p>
<br>
<div class="board-link">
<a href="https://www.taiwanstat.com/happiness/#/" target="_blank"><i class="fa fa-eye" aria-hidden="true"></i></a>
<a href="https://github.com/TseHang/the-happiness" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
</div>
<div class="circle"></div>
</div>
</div>
</section>
<div class="gogoGuide" id="gogoGuide"><div id="experience" class="pojoro"> ● </div><p class="experience-talk">我是貼心小助手，艾克斯・貝利恩斯！請多多指教 😊</p><div class="experience-icon-home fa-icon"><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a></div><div class="experience-icon-close fa-icon"><a><i class="fa fa-times-circle-o" aria-hidden="true"></i></a></div><div class="experience-icon-lists fa-icon"><a href="#menu-lists"><i class="fa fa-bars" aria-hidden="true"></i></a></div></div> <footer id="footer" class="row"><div class="col-xs-12 col-md-3 col-md-offset-1 footer-block"><a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i></a><a href="https://www.facebook.com/mengzeh" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a><a href="https://github.com/TseHang/WebExhibition" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></div><div class="col-xs-12 col-md-3 col-md-offset-3 footer-block"><p><i class="fa fa-copyright"></i>Copyright 2017 Meng-Tse, Hang</p></div></footer>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script><script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><script src="src/jquery.ui.touch-punch.min.js"></script><script src="./dist/js/gogoGuide.js"></script><script type="text/javascript" src="dist/js/block-story.js"></script>
<script type="text/javascript">
$('.gogoGuide').addClass('hover');
window.setTimeout(function(){
$('.gogoGuide').removeClass('hover');
},2000);
</script>
</body><!-- jquery-ui css --></html>