-
Notifications
You must be signed in to change notification settings - Fork 0
/
mock-1.html
155 lines (154 loc) · 7.33 KB
/
mock-1.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mike's Mockup</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="mock-1.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row" style="font-size: x-small"><!-- phases summary -->
<div class="col-lg-2 col-md-4 col-sm-6 phase-panel-col">
<div class="panel panel-default phase-overview">
<div class="panel-heading phase-overview-header">
<h4 class="">Phase 1</h4>Define and Start
</div>
<div class="panel-body phase-overview-body">
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Edit the problem definition,</p>
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Provision the backends (TA2)</p>
<p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Start the model builders </p>
</div>
<div class="panel-footer phase-overview-footer">
Status:<strong>Complete</strong><br/>
3 TA2s Provisioned<br/>
<button type="button" class="btn btn-success" style="font-size:small">Re-Examine Problem</button>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 phase-panel-col">
<div class="panel panel-default phase-overview">
<div class="panel-heading phase-overview-header">
<h4>Phase 2</h4>Wait for the Models to Build
</div>
<div class="panel-body phase-overview-body">
<p><p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Keep yourself busy why the TA2 backends do their work</p>
<p><p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Control the model building process (cut it off) </p>
<p><p><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Examine the solver logs</p>
</div>
<div class="panel-footer phase-overview-footer">
Status: <strong>solutions complete</strong><br/>
9 models built<br/>
<button type="button" class="btn btn-success" style="font-size:small">Revisit Statistics</button>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 phase-panel-col">
<div class="panel panel-primary phase-overview">
<div class="panel-heading phase-overview-header">
<h4>Phase 3</h4>Overview Results
</div>
<div class="panel-body phase-overview-body">
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>Examine a summary of the model results</p>
<p><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Get an overview of the performance of the models</p>
<p><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Select and refine a metric for selection </p>
</div>
<div class="panel-footer phase-overview-footer">
Status: examining 9 models<br>
No metric selected<br/>
<button type="button" class="btn btn-primary" style="font-size:small">In Progress</button>
<button type="button" class="btn btn-warning" style="font-size:small">Guess for Me</button>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 phase-panel-col">
<div class="panel panel-default phase-overview">
<div class="panel-heading phase-overview-header">
<h4>Phase 4</h4>Detailed Assessment
</div>
<div class="panel-body phase-overview-body">
<p><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Examine the model results in detail</p>
<p><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Compare specific models</p>
<p><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Select which models to use </p>
</div>
<div class="panel-footer phase-overview-footer">
Status: waiting for metrics<br/>
No models selected<br/>
<button type="button" class="btn btn-primary" style="font-size:small" disabled>Not Ready</button>
<button type="button" class="btn btn-warning" style="font-size:small" disabled>Guess for Me</button>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 phase-panel-col">
<div class="panel panel-default phase-overview">
<div class="panel-heading phase-overview-header">
<h4>Phase 5</h4>Build and Package Result
</div>
<div class="panel-body phase-overview-body">
<p><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Check that the selected models behave as expected</p>
<p><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Build an executable of the constructed models </p>
</div>
<div class="panel-footer phase-overview-footer">
Status: waiting model select<br/>
Not ready<br/>
<button type="button" class="btn btn-primary" style="font-size:small" disabled>Review Result</button>
<button type="button" class="btn btn-warning" style="font-size:small" disabled>Box and Ship!</button>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 phase-panel-col">
<div class="panel panel-default phase-overview">
<div class="panel-heading phase-overview-header">
<h4>Skip and Ship!</h4>Just get it done!
</div>
<div class="panel-body phase-overview-body">
<p> Have the system guess at all remaining choices and get a result quickly. </p>
<p><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> Use if you don't care to get the best possible results. </p>
</div>
<div class="panel-footer phase-overview-footer">
Status: Available<br/>
Not recommended<br/>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> Just Do It!</button>
</div>
</div>
</div>
</div>
<div> <!-- div for all Phase 1 - for hiding -->
<div class="row">
<div class="lg-1">
<div class="panel panel-default phase-overview">
<div class="panel-heading">
<h2 >Phase 1: Define Problem and Provision Solvers</h2><!-- not panel-title -->
</div>
<div class="panel-body"> Panel content </div>
<div class="panel-footer">Panel footer</div>
</div><!-- Phase 1 Summary Panel -->
</div>
<!-- phase 1 summary box -->
</div> <!-- Row for Phase 1 Summary -->
<div class="row">
</div> <!-- Row for Phase 1 Body -->
</div> <!-- Div for Phase 1 Hiding -->
<div class="row"><!-- for layout experiments -->
<div class="lg-1">
<ul class="list-group">
<li class="list-group-item">Default List Group item </li>
<li class="list-group-item"><span class="badge">New</span>List Group item 1 with badge</li>
</ul>
A normal list
<ul>
<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Item 1</li>
<li>Item 2</li>
</ul>
</div></div>
</div>
</body>
</html>