/
index.jade
139 lines (137 loc) · 7.64 KB
/
index.jade
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
!!! 5
html(lang="en")
head
meta(charset='utf-8')
meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
meta(name='viewport', content='width=device-width')
title 公眾人物關係圖產生器
link(rel="shortcut icon",href="favicon.ico")
link(rel="stylesheet",type="text/css",href="css/bootstrap.min.css")
link(rel="stylesheet",type="text/css",href="css/select2.css")
link(rel="stylesheet",type="text/css",href="css/relation.css")
script(type="text/javascript",src="https://cdn.firebase.com/v0/firebase.js")
script(type="text/javascript",src="js/jquery.1.8.2.js")
script(type="text/javascript",src="js/bootstrap.min.js")
script(type="text/javascript",src="http://d3js.org/d3.v3.min.js")
script(type="text/javascript",src="js/select2.js")
body
#loading
.container
div.navbar.navbar-fixed-top
div.navbar-inner
a.brand(href="#",style="padding: 4px 0 4px 26px")
img(src="img/icon.png")
span(style="margin-left:7px;vertical-align:middle") 公眾人物關係圖產生器
ul.nav
li.divider-vertical
li: a(href="#") 產生圖表
li: a(href="#") 人物統計
li: a(href="#") 關於
#head-upload-modal.modal.hide.fade(tabindex="-1",role="dialog",aria-labelledby="myModalLabel",aria-hidden="true")
.modal-header
button.close(type="button",data-dismiss="modal",aria-hidden="true") ×
h3 上傳大頭照
#head-upload-modal-body.modal-body
div#upload-preview-box
img#upload-preview(src="img/head/unknown.png",width="100px",height="100px")
div#upload-detail-box
input.hidden(type="file",accept="image/*",capture="camera",id="head-upload")
div 檔案大小限制為 100KB
#head-icon-size 尚未選擇檔案
.modal-footer
a#head-upload-btn.btn.disabled(href="#",onclick="if(this.disabled) return; headIconUpload();setIcon()") 上傳
a.btn(href="#",onclick="setIcon()") 取消
div.navbar(style="margin-top:60px")
div.navbar-inner
.container
a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
span.icon-bar
//
a.brand(href="#",style="padding:7px 0 0 5px")
i.icon-large-girl(style="width:28px;height:26px;",rel="tooltip",title="設定圖像 »",onclick="setIcon();")
ul.nav
li: div(style="margin-top:7px",rel="tooltip",title="選擇領域")
select#domain-chooser: option
option(value="sandbox") 測試區
option(value="politics") 政治人物
option(value="g0v") 零時政府
option(value="542") 洪仲丘案
//
li.dropdown
a.dropdown-toggle.toggles(data-toggle="dropdown",href="#",rel="tooltip",title="設定圖表大小")
i.icon-resize-vertical
sup#depth-note 1
span.caret
ul#toggle-depth.dropdown-menu
li.active: a(tabindex="-1",href="#",onclick="toggleDepth(1)") 1
li: a(tabindex="-1",href="#",onclick="toggleDepth(2)") 2
li: a(tabindex="-1",href="#",onclick="toggleDepth(3)") 3
li: a(tabindex="-1",href="#",onclick="toggleDepth(4)") 4
li: a(tabindex="-1",href="#",onclick="toggleDepth(5)") 6
li: a(tabindex="-1",href="#",onclick="toggleDepth(6)") 12
li: a(tabindex="-1",href="#",onclick="toggleDepth(7)") 20
li: a(tabindex="-1",href="#",onclick="toggleDepth(8)") ∞
li: div(style="margin-top:7px",rel="tooltip",title="選擇中心人物")
select#name-chooser: option
li#toggle-generate: a.toggles(herf="#",onclick="",rel="tooltip",title="產生",onclick="toggleGenerate()"): i.icon-chevron-right
li.dropdown
a.dropdown-toggle.toggles(data-toggle="dropdown",href="#",rel="tooltip",title="選項")
i.icon-list
span.caret
ul#graph-option.dropdown-menu
li#toggle-random: a(tabindex="-1",href="#",onclick="toggleRandomizer()") 隨機選擇人物
li.disabled: a(tabindex="-1",href="#",onclick="") 新圖表與目前圖表合併顯示
li.disabled: a(tabindex="-1",href="#",onclick="") 使用進階條件
i.pull-right.icon-edit
li.divider
li.disabled: a(tabindex="-1",href="#",onclick="") 清除圖表
li.divider-vertical
li.dropdown
a.dropdown-toggle.toggles(data-toggle="dropdown",href="#",rel="tooltip",title="調整引力")
i.icon-magnet
span.caret
ul#toggle-gravity.dropdown-menu
li.active: a(tabindex="-1",href="#",onclick="toggleGravity(1)") 鬆散
li: a(tabindex="-1",href="#",onclick="toggleGravity(2)") 普通
li: a(tabindex="-1",href="#",onclick="toggleGravity(3)") 緊繃
li: a(tabindex="-1",href="#",onclick="toggleGravity(4)") 一團
li.divider-vertical
li#toggle-play: a.toggles(herf="#",onclick="togglePlay()",rel="tooltip",title="暫停"): i.icon-pause
li.divider-vertical
li#toggle-lock: a.toggles(href="#",onclick="toggleLock()",rel="tooltip",title="鎖定"): i.icon-certificate
li.divider-vertical
li: a(href="#",style="padding:5px 6px 0 0")
i.icon-large-adduser(style="width:28px;height:26px",rel="tooltip",title="更換頭像 »",onclick="setIcon('#source-chooser');")
li: div(style="margin:7px 5px 0 0",rel="tooltip",title="事主")
select#source-chooser: option
li: div(style="margin:7px 5px 0 0",rel="tooltip",title="關係")
i.icon-arrow-right(style="margin:5px 3px 0 0")
select#link-chooser
option
//
option 新增關係
optgroup(label="請選性向")
option(data-type="0") 無
option(data-type="1") 友好
option(data-type="-1") 敵對
optgroup(label="特殊選項")
option(data-type="2") 雙向
optgroup(label="關係")
option 討厭
option 欣賞
i.icon-arrow-right(style="margin:5px 0 0 4px")
li: div(style="margin:7px 5px 0 0",rel="tooltip",title="對象")
select#target-chooser: option
li: a(href="#",style="padding:5px 6px 0 0")
i.icon-large-girl(style="width:28px;height:26px",rel="tooltip",title="更換頭像 »",onclick="setIcon('#target-chooser');")
li#toggle-add: a.toggles(herf="#",onclick="toggleAdd()",rel="tooltip",title="新增人物關係"): i.icon-chevron-right
//
li.dropdown
a.dropdown-toggle.toggles(data-toggle="dropdown",href="#",rel="tooltip",title="選項")
i.icon-list
span.caret
ul.dropdown-menu
li: a(tabindex="-1",href="#",onclick="") 在圖中顯示新加入的關聯
li: a(tabindex="-1",href="#",onclick="") 複雜的圖表編輯器
#content
script(type="text/javascript",src="js/relation.js")