149 lines
6.6 KiB
HTML
149 lines
6.6 KiB
HTML
<!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ü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> |