-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (112 loc) · 6.47 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
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="zh-TW"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="zh-TW"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="zh-TW"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-TW"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv=”Content-Language” content=”zh-tw”>
<title>臺灣守護民主平台 2013 民主事件評選活動</title>
<meta name="description" content="候選事件的挑選期間，從 2012 年 5 月到 2013 年 4 列出。有部分事件現象因為彼此相關，故合併為一件">
<meta name="author" content="臺灣守護民主平台">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="sixteen columns">
<h1 style="margin-top: 40px">臺灣守護民主平台 2013 民主事件評選活動</h1>
<hr>
</div>
<div id="descriptions" class="sixteen columns">
<h2>活動說明</h2>
<ol>
<li>請自底下「民主事件候選清單」圈選10件您認為最重要的民主事件。 </li>
<li>候選事件的挑選期間，從 2012 年 5 月到 2013 年 4 月底，依照發生日期由近到遠依次列出。有部分事件現象因為彼此相關，故合併為一件。 </li>
<li>如有任何意見或建議，或認為本次票選清單遺漏哪些「重要的事件」，請利用「留言」欄位，我們將審慎列入考量。</li>
</ol>
</div>
<div id="rules" class="sixteen columns">
<h2>年度民主事件遴選原則</h2>
<ol>
<li>請考量涉及政治民主、民主社會，民主文化或外部因素四大層面之重大事件、議題、爭議。四大層面說明如下。
<ol>
<li>政治民主：指國家（包括中央及地方）權力行使，涉及權力分立、法治國原則、正當程序、人民參與，以及基本權保障等問題的面向。</li>
<li>民主社會：包括兩個次面向。一是，相對於國家權力行使的社會力的面向； 二是，社會內部的結構，涉及民主參與地位的均等或不均等問題的面向；</li>
<li>民主文化：指社會內部的民主認知。（例如，出現女性總統候選人，族群歧視言論）</li>
<li>外部因素：指國家外部的力量對國家內部民主發展發生影響力的面向。</li>
</ol>
</li>
<li>選取時，可以較具歷史、長期、前瞻的結構性考量來遴選。</li>
<li>選取時，請注意不要過於集中某些指標類別的事件，盡量均衡選取。</li>
</ol>
<a href="poll"><button> 開始勾選 </button></a>
</div>
<div id="news-form-wrapper" class="sixteen columns">
<form id="news-form" data-bind="submit: prepareSubmit">
<input type="text" class="required" name="name" data-bind="value: name, valueUpdate: 'afterkeydown', css: { warning: !nameChecker() }" placeholder="姓名" />
<input type="text" class="required email" name="email" data-bind="value: email, valueUpdate: 'afterkeydown', css: { warning: !emailChecker()}" placeholder="電子郵件" />
<p> 勾選十大事件 * 請圈選 10 件 <br>
<span class="comment">* 本表單中「事件說明」僅供徵詢時參考之用，記者會發表及未來公佈時，會有更進一步的闡述與分析。</span>
</p>
<div class="news-list" data-bind="foreach: newsList">
<div class="news" data-bind="css: { checked: checked }">
<input type="checkbox" data-bind="checked: checked, attr: { 'id': 'news-'+$index() }">
<label data-bind="attr: {for: 'news-'+$index()}">
<span class="index" data-bind="text: ($index()+1)+'.'"></span>
<span class="title" data-bind="text: title"></span>
<div class="tags-wrapper" data-bind="foreach: tags">
<span class="tag" data-bind="text: $data"></span>
</div>
<div class="note-wrapper" data-bind="css: { showmore: noteEnabled, showless: !noteEnabled() }">
<span class="notes" data-bind="attr: { title: msg},css: {more: noteEnabled}, text: notes, click: switchNotes"></span>
<span class="readmore ui-icon ui-icon-grip-solid-horizontal" data-bind="visible: !noteEnabled()"></span>
</div>
</label>
</div>
</div>
</form>
</div>
<div id="poll-info" class="sixteen columns">
<p>
<span class="warning" data-bind="visible: userInvalid"> 請填寫正確姓名、電子郵件 </span>
已選 <span data-bind="text: curSelected"></span> 則，
<span data-bind="visible: spaceLeave() >= 0">尚餘 <span data-bind="text: spaceLeave()"></span> 則可選。</span>
<span class="warning" data-bind="visible: spaceLeave() < 0">超出 <span data-bind="text: spaceLeave()*-1"></span> 則。</span>
</p>
<button data-bind="enable: allowSubmit, click: prepareSubmit" >確定送出</button>
</div>
</div>
<div id="summary" class="hide">
<h3> 這是您所選擇的十大事件 </h3>
<hr>
<p> <span class="name"> 姓名： </span><span class="value" data-bind="text: name"></span></span> </p>
<p> <span class="name"> 電子郵件： </span><span class="value" data-bind="text: email"></span></span> </p>
<p class="comment">請注意避免過於集中某些指標類別的事件，盡量均衡選取，檢查後按送出，謝謝您的大力支持、參與。 </p>
<div data-bind="foreach: newsList">
<div class="news" data-bind="visible: checked">
<span class="index" data-bind="text: ($index()+1)+'.'"></span>
<span class="title" data-bind="text: title"></span>
<div class="tags-wrapper" data-bind="foreach: tags">
<span class="tag" data-bind="text: $data"></span>
</div>
<span class="notes more" data-bind="text: notes"></span>
</div>
</div>
<button class="submit" data-bind="click: submit">謝謝，請幫我送出！</button>
<button class="cancel" data-bind="click: cancel">取消</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="js/html5placeholder.jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/sammy.js"></script>
<script src="js/news.js"></script>
</body>
</html>