-
Notifications
You must be signed in to change notification settings - Fork 0
/
homePage.html
115 lines (105 loc) · 5.84 KB
/
homePage.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>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>House Plan</title>
<!-- jquery local link replaced with CDN -->
<!--script type="text/javascript" src="js/jquery-1.10.2.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<!-- This page doesn't work with local boostrap Javascript. replacing it with CDN -->
<!--script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/local.css" />
<link href="assets/css/style.css" rel="stylesheet" />
<script src="assets/js/script.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<link href="bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet">
<script src="bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.js"></script>
<style>
.well{
//background-color:grey;}
</style>
<script>
$( document ).ready(function() {
$('#ImageMap1').maphilight();
$('.bedroom').on('click', function() {
window.location = "bedRoom.html";
});
$('#kitchen').on('click', function() {
window.location = "kitchen.html";
});
$('#living').on('click', function() {
window.location = "livingRoom.html";
});
$('#door').on('click', function() {
window.location = "exitDoor.html";
});
});
</script>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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"><img src="assets/img/logo-new.png" style="margin-top: -5px;" width="65" height="40"></img></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="selected"><a href="homePage.html"><i class="fa fa-home fa-lg"></i> Home</a></li>
<li><a href="index.html"><i class="fa fa-tachometer fa-lg"></i> Dashboard</a></li>
<li><a href="demoPage.html"><i class="fa fa-tasks fa-lg"></i> Demo Page</a></li>
<li><a href="bedRoom.html"><i class="fa fa-bed fa-lg"></i> Bed Room</a></li>
<li><a href="kitchen.html"><i class="fa fa-cutlery fa-lg"></i> Kitchen</a></li>
<li><a href="livingRoom.html"><i class="fa fa-gamepad fa-lg"></i> Living Room</a></li>
<li><a href="exitDoor.html"><i class="fa fa-sign-out fa-lg"></i> Exit Door</a></li>
<li><a href="support.html"><i class="fa fa-question-circle fa-lg"></i> Support</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Aswin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<img src="assets/img/housePlan.png" usemap="#il15982" width="1000" height="633" alt="click map" border="0" id="ImageMap1" />
<map id="il15982" name="il15982">
<area shape="poly" alt="" title="kitchen" id="kitchen" coords="51,246,210,183,257,237,203,259,287,380,163,437,51,246" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"6699ff","fillOpacity":0.6}'/>
<area shape="poly" alt="" title="Bed room 1" class="bedroom" coords="374,86,554,18,660,106,562,146,611,199,519,237,374,86" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"6699ff","fillOpacity":0.6}'/>
<area shape="poly" alt="" title="Bed room 2" class="bedroom" coords="616,278,777,204,948,345,776,439,616,278" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"6699ff","fillOpacity":0.6}'/>
<area shape="poly" alt="" title="Living Room" id="living" coords="282,368,461,300,544,374,351,470,282,368" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"6699ff","fillOpacity":0.6}'/>
<area shape="poly" alt="" title="Entrance/Exit Door" id="door" coords="606,371,598,445,655,415,666,342,620,300,573,329,606,371" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"6699ff","fillOpacity":0.6}'/>
</map>
<div id="kitchenAppliances" style="display:none;">
<div class="well col-sm-6">
<img src="assets/img/coffee.png" width="380" height="280"></img>
</div>
<div class="well col-sm-6">
<img src="assets/img/toaster.png" width="380" height="280"></img>
</div>
</div>
<div id="alarmClock" style="display:none;">
<div class="well col-sm-offset-2 col-sm-8 col-sm-offset-2">
<img src="assets/img/alarmClock.png" width="380" height="280"></img>
</div>
</div>
</div>
</div>
</body>
</html>