-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
266 lines (256 loc) · 11.9 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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LaborSim</title>
<link rel="stylesheet" type="text/css" href="semanticui/semantic.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="top-bar" class="ui menu">
<a class="header item">
<b>labor<span style="color:navy">Sim</span></b>
</a>
<!-- <a class="header item">
<i class="align right small icon"></i><i class="travel icon"></i> Labor<i>flows</i>
</a> -->
<a class="item" id="open-export">
<i class="download icon"></i> Export
</a>
<div class="ui simple dropdown item" id="open-import">
<i class="folder open icon"></i> Import
<div class="menu">
<a class="disabled item" id="generate-net">
<i class="rocket icon"></i> Generate
</a>
<a class="item" id="net-from-specs">
<i class="edit icon"></i> From Specs
</a>
<a class="disabled item" id="net-from-library">
<i class="grid layout icon"></i> From Library
</a>
</div>
</div>
<a class="item">
<i class="settings icon"></i> Settings
</a>
<div class="right menu">
<a class="disabled item">
<i class="help circle icon"></i> Guide
</a>
<a class="item" href="http://oguerr.com/laborsim/">
<i class="info icon"></i> About
</a>
<div class="vertically fitted item">
<!-- To be uncommented when repo is made public -->
<!-- <a class="with popup" data-content="View project on GitHub" href="https://github.com/bordaigorl/laborflows">
<i class="alternate github icon"></i>
</a> -->
<a class="with popup" data-content="Share on Facebook" data-position="bottom right" href="https://www.facebook.com/sharer/sharer.php?app_id=309437425817038&u=http%3A%2F%2Foguerr.com%2Flaborsim%2F&display=popup&ref=plugin" target="_new">
<i class="purple facebook icon"></i>
</a>
<a class="with popup" data-content="Share on Twitter" href="https://twitter.com/share?url=http://oguerr.com/laborsim/" target="_new">
<i class="blue twitter icon"></i>
</a>
</div>
</div>
</div>
<div id="simulation">
<div id="simulator-controls" class="ui icon buttons">
<div id="toggle-simulation" class="ui icon button" title="Run/Pause"><i class="play icon"></i></div>
<div id="speed-control" class="ui icon bottom left pointing dropdown button" title="Speed">
<i class="dashboard icon"></i>
<div class="ui menu">
<a id="faster-speed" class="item" title="Faster"><i class="caret up icon"></i></a>
<div class="item"><small id="speed-val"></small></div>
<a id="slower-speed" class="item" title="Slower"><i class="caret down icon"></i></a>
</div>
</div>
<div id="layout-simulation" class="ui icon button" title="Redo Layout"><i class="share alternate rotated icon"></i></div>
<div id="random-firms" class="ui icon button" title="Insert 10 random firms"><i class="wizard icon"></i></div>
</div>
<div id="search-bar" class="ui icon mini input">
<input placeholder="Search..." type="text">
<i class="search icon"></i>
</div>
<svg id="simulation-netview"></svg>
</div>
<div id="dashboard">
<div id="firms-stats" class="ui two stackable cards">
<div id="network-info" class="ui black card">
<div class="content">
<div class="header name">Network</div>
<div class="description">
<div class="ui list">
<div class="item" style="margin-bottom: .7em">
<div class="totals content">---</div>
</div>
<div class="item">
<i style="float:left" class="top aligned travel icon"></i>
<div style="float:left" class="content"><span class="header">Employed</span></div>
<span class="right floated description employed">---</span>
</div>
<div class="item">
<i style="float:left" class="top aligned group icon"></i>
<div style="float:left" class="content"><span class="header">Unemployed</span></div>
<span class="right floated description unemployed">---</span>
</div>
<div class="item">
<i style="float:left" class="top aligned lightning icon"></i>
<div style="float:left" class="content"><span class="header">Tech. inn.</span></div>
<div class="ui right floated small blue probabilitybar is-hiring-prob">
<div class="bar">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui bottom attached add-firm button" title="Select neighbors then click here to create a new firm">
<i class="add icon"></i>
Add Firm
</div>
</div>
<div id="selected-firm" class="ui blue card">
<div class="content">
<i title="Close" class="right floated remove link icon"></i>
<div class="header name">Firm</div>
<div class="description">
<div class="ui list">
<div class="item">
<i style="float:left" class="top aligned travel icon"></i>
<div style="float:left" class="content"><span class="header">Employed</span></div>
<span class="right floated description employed">100</span>
</div>
<div class="item">
<i style="float:left" class="top aligned group icon"></i>
<div style="float:left" class="content"><span class="header">Unemployed</span></div>
<span class="right floated description unemployed">100</span>
</div>
<div class="item">
<i style="float:left" class="top aligned thumbs outline up icon"></i>
<div style="float:left" class="content"><span class="header">Hiring</span></div>
<div class="ui right floated small disabled green probabilitybar hire-prob">
<div class="bar">
<div class="progress"></div>
</div>
</div>
</div>
<div class="item">
<i style="float:left" class="top aligned thumbs outline down icon"></i>
<div style="float:left" class="content"><span class="header">Separation</span></div>
<div class="ui right floated small disabled red probabilitybar fire-prob">
<div class="bar">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<i title="Edit" class="write link icon"></i>
<i title="Link firms" class="link-firms disabled linkify link icon"></i>
<i title="Shutdown" class="shutdown-firm bomb link icon"></i>
<i title="Remove firm" class="remove-firm trash link icon"></i>
<i title="Pin this firm" class="right floated blue pin link icon"></i>
</div>
</div>
</div>
<div id="charts" class="ui two stackable cards">
<div class="ui unemployment-rate card">
<div class="chart">
<svg></svg>
</div>
<div class="extra content">
<i class="green recycle right floated link icon" title="Reset"></i>
<i class="history right floated link icon" title="Clip time window"></i>
<i class="red selected radio right floated link icon" title="Show/Hide Steady State"></i>
<span class="header">Unemployment rate</span>
</div>
</div>
<div class="ui unemployment-volatility card">
<div class="chart">
<svg></svg>
</div>
<div class="extra content">
<i class="green recycle right floated link icon" title="Reset"></i>
<i class="history right floated link icon" title="Clip time window"></i>
<i class="crop right floated link icon" title="Set unemployment rate time window"></i>
<span class="header">Unemployment volatility</span>
</div>
</div>
<div class="ui beveridge card">
<div class="chart">
<svg></svg>
</div>
<div class="extra content">
<i class="green recycle right floated link icon" title="Reset"></i>
<i class="blue theme right floated link icon" title="Start new series"></i>
<i class="sample pause right floated link icon" title="Reset"></i>
<span class="header">Beveridge Curve</span>
</div>
</div>
</div>
</div>
<div class="ui modal" id="net-specs">
<i class="close icon"></i>
<div class="header">
Create network from a specification
</div>
<div class="content">
<div class="ui form">
<div class="field">
<label>Your net specification:</label>
<textarea id="spec-input" class="code-editor"></textarea>
</div>
<div class="ui error message">
<div class="header">
<i class="warning sign icon"></i>
Specification is not valid JSON!
</div>
<span>Not a valid spec!</span>
</div>
</div>
</div>
<div class="actions">
<div class="ui black button">
Cancel
</div>
<div class="ui positive right labeled icon button">
Import
<i class="folder open icon"></i>
</div>
</div>
</div>
<div class="ui modal" id="net-specs-export">
<i class="close icon"></i>
<div class="header">
Specification of the current network
</div>
<div class="content">
<div class="ui form">
<div class="field">
<textarea readonly id="spec-output" class="code-editor"></textarea>
</div>
</div>
<div class="ui info message">
<i class="info sign icon"></i>
Press CTRL+C (Cmd+C) to copy to clipboard
</div>
</div>
<div class="actions">
<!-- <div class="ui blue right labeled icon button">
Save to disk
<i class="download icon"></i>
</div>
--> <div class="ui positive right labeled icon button">
Close
<i class="close icon"></i>
</div>
</div>
</div>
</body>
<script data-main="app" src="js/lib/require.js"></script>
</html>