-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
164 lines (150 loc) · 6.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>House management system</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Home management system</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="lights.html">Light control</a>
</li>
<li>
<a href="downloads.html">Downloads</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container center-block text-center">
<div class="col-xs-12 text-left page-title">
<p class="lead">Home</p>
<p>This dashboard allows for interaction with a smarthome equipped with Philips Hue lights, KlikAnKlikUit power switches and a transmission server.</p>
</div>
<div class="col-xs-6 col-md-4 dash-unit light-tile"><span class="dash-title"><i
class="glyphicon glyphicon-adjust"></i><br/>Light control</span>
<hr/>
<p>Philips Hue control</p></div>
<div class="col-xs-6 col-md-4 dash-unit switch-tile"><span class="dash-title"><i
class="glyphicon glyphicon-sound-stereo"></i><br/>Switch control<hr/></span>
<p>Power switch control</p></div>
<div class="col-xs-6 col-md-4 dash-unit torrent-tile"><span class="dash-title"><i
class="glyphicon glyphicon-import"></i><br/>Downloads<hr/></span>
<p>Downloads management</p></div>
<div class="container well navigation-well light-well col-xs-12">
<div class="row">
<div class="col-xs-12 lead">
<span class="pull-left well-title">Light control</span> <span class="pull-right light-tile close-icon"><i class="glyphicon glyphicon-remove"></i> </span>
<hr/>
</div>
</div>
<p>Current state:</p>
<div class="row">
<div class="light col-xs-4 lamp-group light-room-off lamp-group-id-1 "><p class="group-lamp-text">Bedroom:<br/><span class="state">OFF</span></p></div>
<div class="light col-xs-4 lamp-group light-room-off lamp-group-id-2"><p class="group-lamp-text">Living room:<br/><span class="state">OFF</span></p></div>
<div class="light col-xs-4 lamp-group light-room-off lamp-group-id-3"><p class="group-lamp-text">Kitchen:<br/><span class="state">OFF</span></p></div>
</div>
<div class="row">
<span class="pull-right view-more"><a href="lights.html">View more <i class="glyphicon glyphicon-chevron-right"></i> </a></span>
</div>
</div>
<div class="container well navigation-well switch-well col-xs-12">
<div class="row">
<div class="col-xs-12 lead">
<span class="pull-left well-title">Switch control</span> <span class="pull-right switch-tile close-icon"><i class="glyphicon glyphicon-remove"></i> </span>
<hr/>
</div>
</div>
<p>Current state:</p>
<div class="row">
<div class="switch switch-off col-xs-6"><p>Stereo:<br/><span class="state">OFF</span></p></div>
<div class="switch switch-on col-xs-6"><p>Printer:<br/><span class="state">ON</span></p></div>
</div>
</div>
<div class="container well navigation-well torrent-well col-xs-12">
<div class="row">
<div class="col-xs-12 lead">
<span class="pull-left well-title">Downloads management</span> <span class="pull-right torrent-tile close-icon"><i class="glyphicon glyphicon-remove"></i> </span>
<hr/>
</div>
</div>
<p>Active downloads:</p>
<table class="table table-bordered text-left">
<thead>
<tr>
<th>Name</th>
<th>Completion</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Ubuntu 16.04</td>
<td>100% - Seeding</td>
<td>00:00</td>
</tr>
<tr>
<td>Elementary OS Loki</td>
<td>95% - Downloading</td>
<td>04:00</td>
</tr>
</tbody>
</table>
<div class="row">
<span class="pull-right view-more"><a href="downloads.html">View more <i class="glyphicon glyphicon-chevron-right"></i> </a></span>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<hr/>
<div class="col-lg-12">
<div class="col-xs-4">
<a href = "#">Github</a>
</div>
<div class="col-xs-8">
<p class="text-muted pull-right">Arthur Revaclier 2016</p>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/animations.js"></script>
<script src="js/behaviour_web.js"></script>
<script src="js/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.3/bootstrap-slider.min.js"></script>
</body>
</html>