Jean-Baptiste (Rorist) Aubort 5 years ago
parent
commit
a69c2c11f8
2 changed files with 41 additions and 100 deletions
  1. 27 83
      style.css
  2. 14 17
      trigger.html

+ 27 - 83
style.css

@@ -12,12 +12,16 @@ simple way to have an unified background that cover all the screen.
 */
 
 * {
-   font-family: 'Nixie One', sans-serif;
-   color: #eeeeee;
-   
-   margin: 0;
-   padding: 0;
-   border: 0;
+    font-family: 'Nixie One', sans-serif;
+    color: #eeeeee;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 html {
@@ -51,11 +55,8 @@ p {
 Legend act here as a menu, give the same green border than central-block.
 */
 legend {
-	
 }
-
 fieldset {
-	
 }
 
 /*
@@ -67,21 +68,6 @@ h1, h2, h3, h4, h5, h6 {
     font-family: 'Share Tech', Monospace, sans-serif;
 }
 
-h1 {
-    font-size: 48px;
-    margin-bottom: 20px;
-}
-
-h2 {
-    font-size: 36px;
-    margin-bottom: 10px;
-}
-
-h3 {
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
 .index {
     text-align: left;
 }
@@ -93,79 +79,37 @@ h3 {
 }
 
 /*
-API message block
+all the button
 */
-#msg-block {
-    padding: 5px;
-}
-
-/*
-buttons
-*/
-.plusminux {
-    padding: 0 10px;
-    display: inline-block;
-    width: 32px;
-    color: #00aa00;
-    font-size: 48px;
-    cursor: pointer;
-}
-
-/*
-match all the button
-*/
-
-.button, button, input[type=submit] {
-    min-width: 100px;
-    cursor: pointer;
-}
-
-.button, button, input[type=submit] {
-    padding: 10px 10px;
-    margin: 5px;
-    background-color: #333;
-    border: 2px solid #eee;
-}
-
-.btn_red {
-    border-color: #aa0000;
-}
-
-.btn_green {
-    border-color: #00aa00;
-}
-
-.btn_blue {
-    border-color: #0000aa;
-}
-
-.button:active, button:active, input[type=submit]:active {
-    border-color: #777777;
+.glyphicon {
+    font-size: 32px;
+    vertical-align: middle;
 }
 
-.btn_red:active {
-    border-color: #770000;
+.btn-open {
+    display: block;
+    margin-top: 20px;
 }
 
-.btn_green:active {
-    border-color: #007700;
+.btn-red {
+    background-color: #aa0000;
 }
 
-.btn_blue:active {
-    border-color: #000077;
+.btn-green {
+    background-color: #00aa00;
 }
 
-.button[disabled], button[disabled], input[type=submit][disabled] {
-    border-color: transparent;
+.btn-police {
+    background-color: #0000aa;
 }
 
-.button[disabled]:active, button[disabled]:active, input[type=submit][disabled]:active {
-    border-color: transparent;
+.btn-blue {
+    background-color: #0000aa;
 }
 
 .text-input {
-    width: 48px;
-    padding: 10px;
+    font-size: 1.5em;
+    padding: 2px;
     color: black;
     text-align: center;
     border: 2px solid #00aa00;

+ 14 - 17
trigger.html

@@ -14,25 +14,24 @@
     <h1>FIXME Control</h1>
 
     <div class="col-md-6">
-        <h2>Status</h2>
-
+        <h2>Trigger status</h2>
+        <div id="msg-block" class="lead"></div>
         <div id="open-block">
             <form name="hoursform" id="hoursform">
-                <div class="plusminux minux" onclick="changeHour(0)">-</div>
+                <span class="glyphicon glyphicon-minus-sign" onclick="changeHour(0)"></span>
                 <input id="hours" name="hours" size="2" class="text-input" maxlength="2"
                     onkeyup="checkHours(this)" value="1">
-                <div class="plusminux plus" onclick="changeHour(1)">+</div>
+                <span class="glyphicon glyphicon-plus-sign" onclick="changeHour(1)"></span>
                 <input type="button" onclick="openSpace()" value="Open"
-                    class="button" id="openbutton" disabled>
+                    class="btn btn-default btn-open" id="openbutton" disabled>
             </form>
         </div>
-
         <div id="close-block">
             <form>
                 <input type="button" onclick="closeSpace()" value="Close"
-                class="button">
+                    class="btn btn-default">
                 <input type="button" onclick="openSpace(true)" value="Extend"
-                class="button">
+                    class="btn btn-default">
                 <br>
                 <p>The space is still open for:</p>
                 <div class="numbers">
@@ -45,19 +44,17 @@
             </form>
         </div>
 
-        <div id="msg-block"></div>
         <div id="loading-block"><p>Loading ...</p></div>
     </div>
 
     <div class="col-md-6">
-        <h2>Lights</h2>
-        <input type="button" onclick="switchTheLightColor('red')" value="ON" class="button btn_red">
-        <input type="button" onclick="switchTheLightColor('green')" value="ON" class="button btn_green">
-        <input type="button" onclick="switchTheLightColor('blue')" value="ON" class="button btn_blue">
-        <input type="button" onclick="switchTheLightOn()" value="ON" class="button btn_white">
-        <br/>
-        <input type="button" onclick="switchTheLightOff()" value="OFF" class="button">
-        <input type="button" onclick="switchTheLightToPolice()" value="Police!" class="button">
+        <h2>LED Lights</h2>
+        <input class="btn btn-default btn-red" type="button" onclick="switchTheLightColor('red')" value="RED">
+        <input class="btn btn-default btn-green" type="button" onclick="switchTheLightColor('green')" value="GREEN">
+        <input class="btn btn-default btn-blue" type="button" onclick="switchTheLightColor('blue')" value="BLUE">
+        <input class="btn btn-default" type="button" onclick="switchTheLightOn()" value="WHITE">
+        <input class="btn btn-default" type="button" onclick="switchTheLightOff()" value="OFF">
+        <input class="btn btn-default btn-police" type="button" onclick="switchTheLightToPolice()" value="Police!">
         <br/>
         <div id="breathBox">
             <label for="breathSlider">Breath:</label>