lightclockwifiv2/alarm.html at master · mrrioes/lightclockwifiv2 · GitHub

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

<!DOCTYPE HTML>
<html><head>

  <meta http-equiv=Content-Type content='text/html; charset=utf-8' />
  <meta name=viewport content='width=device-width, initial-scale=1.0'>
<style>
@import url(http://fonts.googleapis.com/css?family=Abel);@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://thelightclock.com/clockjshosting/spectrum.js"></script>
<script src="http://thelightclock.com/clockjshosting/Colour.js"></script>
<script src="http://thelightclock.com/clockjshostingproto/clock.js"></script>
<link rel=stylesheet href="clockmenustyle.css">
<link rel=stylesheet href="http://thelightclock.com/clockjshosting/spectrum.css">

<script>
jQuery(document).ready(function($){
  $("#alarmcolorspectrum").spectrum({
      flat: true,
      preferredFormat: "hex",
      showButtons: false,
      showInput: true,
      move: function(color) {c=color.toRgb(); alarmcolor = new RGBColour(c.r, c.g, c.b);
                             document.getElementById("alarmcolor").value=document.getElementById("alarmcolorspectrum").value;},
      change: function(color) {document.getElementById("alarmcolor").value=document.getElementById("alarmcolorspectrum").value;}
    });
  })
</script>
</head>
<body class=settings-page>
<form class=form-verticle action=/ method=GET>

<div class="color-box" style="width: 100% !important">
  <label>Alarm Colour</label>
  <input type='color' name = 'alarmcolorspectrum' id='alarmcolorspectrum' value='#ff0000'/>
  <input type='hidden' name = 'alarmcolor' id = 'alarmcolor' value = '#ff0000'>
</div>
<ul>
<li>
<label>Hours: </label>
<div class=form-field>
<input type=number name=alarmhour value=0 id="alarmhour"/><br>
</div>
</li>
<li>
<label>Minutes: </label>
<div class=form-field><input type=number name=alarmmin value=1 id="alarmmin"/></label><br>
</div>
</li>
<li>
<label>Seconds: </label>
<div class=form-field>
<input type=number name=alarmsec value=0 id="alarmsec"/></label><br>
</div>
</li>
<input type=submit value=Submit>
</form>
</body>
</html>