10
0
Fork 0
chch-licht/index.html

104 lines
2.9 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>chch-licht</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/colpick/js/colpick.js"></script>
<link rel="stylesheet" href="js/colpick/css/colpick.css" />
<style type="text/css">
@font-face{
font-family:"Blankenburg";
src:url('font/Blankenburg.ttf') format("truetype");
}
* {
font-family: Blankenburg, sans-serif;
font-size: 36px;
}
#picker2 * {
font-family: sans-serif;
font-size: 15px !important;
}
#picker {
display:none;
}
#picker2 > div {
margin: auto;
background-color: #FFF;
border: 0;
}
#picker2 .colpick_hex_field,
#picker2 .colpick_hex_field > div {
background-color: #FFF;
}
#form {
margin: 0 auto;
position: relative;
text-align: center;
}
input[name=fadestep] {
width: 40px;
}
h1 {
text-align: center;
font-size: 64px;
}
</style>
</head>
<body>
<h1>Leuchtmittelhauptsteuerung</h1>
<div id="form">
<form id="changeLight">
<label for="fadestep">Umschaltzeit in Sekunden: </label>
<input name="fadestep" type="text" value="10"><br />
<input name="color" type="text" value="003d69" id="picker">
<div id="picker2"></div>
<input id="mode-flashy" name="mode" type="radio" value="y">
<label for="mode-flashy">Hektisch</label>
<input id="mode-instant" name="mode" type="radio" value="s">
<label for="mode-instant">Sofort</label>
<input id="mode-fade" name="mode" type="radio" value="f" checked="checked">
<label for="mode-fade">Geschmeidig</label><br />
<input id="mode-stromstoss" name="stromstoss" type="checkbox" value="1">
<label for="mode-stromstoss">Stromstoß</label><br />
<button type="submit" id="submit">Erhelle mich!</button>
</form>
</div>
<script type="text/javascript">
default_color = 'ab571f';
$('#picker2').colpick({
layout:'hex',
submit:0,
colorScheme:'light',
flat: true,
color: default_color,
onChange:function(hsb,hex,rgb,el,bySetColor) {
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor){
$('#picker').val(hex);
}
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
$('#picker').val(default_color);
var callback = function(event) {
event.preventDefault();
var data = $(this).serializeArray(),
values = [];
for (var i = 0; i < data.length; i++) {
values[data[i]['name']] = data[i]['value'];
};
$.get('color.php' ,{'value': values['color'], 'mode': values['mode'], 'fadestep': values['fadestep'], 'stromstoss': values['stromstoss']});
};
$('#changeLight').submit(callback);
$('#submit').on('click,enter', callback);
</script>
</body>
</html>