raumsteuerung/index.html

149 lines
6.6 KiB
HTML
Raw Permalink Normal View History

2013-12-10 20:26:47 +00:00
<!DOCTYPE html>
<html>
<head>
<title>CTDO Raumsteuerung</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/colorjoe.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>CTDO Raumsteuerung</h1>
<ul class="nav nav-tabs" id="mainTabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#room1" data-toggle="tab">Raum 1</a></li>
<li><a href="#room2" data-toggle="tab">Raum 2</a></li>
<li><a href="#room3" data-toggle="tab">Raum 3</a></li>
<li><a href="#room4" data-toggle="tab">Raum 4</a></li>
<li><a href="#room5" data-toggle="tab">Raum 5</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h2>Home</h2>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="room1Tabs">
<li class="active"><a href="home_buzzer" data-toggle="tab">Buzzer</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="tab-content">
<div class="tab-pane active" id="home_buzzer">
<p>
Buzzer in Raum 1:
<div class="btn-group btn-group-lg" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="buzzer_room_1" id="buzzer_room_1_on" /> An
</label>
<label class="btn btn-danger">
<input type="radio" name="buzzer_room_1" id="buzzer_room_1_off" /> Aus
</label>
</div>
</p>
<p>
Buzzer in Raum 2:
<div class="btn-group btn-group-lg" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="buzzer_room_4" id="buzzer_room_4_on" /> An
</label>
<label class="btn btn-danger">
<input type="radio" name="buzzer_room_4" id="buzzer_room_4_off" /> Aus
</label>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="room1">
<h2>Raum 1</h2>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="room1Tabs">
<li class="active"><a href="#room1_music" data-toggle="tab">Musik</a></li>
<li><a href="#room1_light" data-toggle="tab">Licht</a></li>
<li><a href="#room1_temp" data-toggle="tab">Temparatur</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="tab-content">
<div class="tab-pane active" id="room1_music">Insert working MPD Client here</div>
<div class="tab-pane" id="room1_light">Insert working lightcontrol here</div>
<div class="tab-pane" id="room1_temp">Insert temperature graphing here</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="room2">
<h2>Raum 2</h2>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="room2Tabs">
<li class="active"><a href="#room2_music" data-toggle="tab">Musik</a></li>
<li><a href="#room2_light" data-toggle="tab">Licht</a></li>
<li><a href="#room2_temp" data-toggle="tab">Temparatur</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="tab-content">
<div class="tab-pane active" id="room2_music">Insert working MPD Client here</div>
<div class="tab-pane" id="room2_light">
<p>
Raumlicht:
<button type="button" class="btn btn-primary" data-toggle="button">Schalten</button>
</p>
<p>
Lampelcontrol:
<div class="btn-group btn-group-lg" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" name="lampel_green_room_2" id="lampel_green_room_2" /> Gr&uuml;n
</label>
<label class="btn btn-warning">
<input type="checkbox" name="lampel_yellow_room_2" id="lampel_yellow_room_2" /> Gelb
</label>
<label class="btn btn-danger">
<input type="checkbox" name="lampel_red_room_2" id="lampel_red_room_2" /> Rot
</label>
</div>
</p>
<p>
<div id="colorpicker_room_2"></div>
</p>
</div>
<div class="tab-pane" id="room2_temp">Insert temperature graphing here</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="room3">...13</div>
<div class="tab-pane" id="room4">...14</div>
<div class="tab-pane" id="room5">...15</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/one-color.js"></script>
<script src="js/colorjoe.min.js"></script>
<script type="text/javascript">
$('#mainTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
var joe = colorjoe.rgb('colorpicker_room_2', "#ffffff");
</script>
</body>
</html>