Browse Source

New design in progress!

Sacha Bron 5 years ago
parent
commit
52a748db5e
7 changed files with 393 additions and 93 deletions
  1. 94 0
      img/head.svg
  2. 96 0
      img/head_back.svg
  3. 94 0
      img/head_front.svg
  4. BIN
      img/logo.png
  5. 3 0
      img/logo.svg
  6. 55 38
      style.css
  7. 51 55
      trigger.html

File diff suppressed because it is too large
+ 94 - 0
img/head.svg


File diff suppressed because it is too large
+ 96 - 0
img/head_back.svg


File diff suppressed because it is too large
+ 94 - 0
img/head_front.svg


BIN
img/logo.png


File diff suppressed because it is too large
+ 3 - 0
img/logo.svg


+ 55 - 38
style.css

@@ -1,66 +1,84 @@
+@import url(http://fonts.googleapis.com/css?family=Share+Tech|Share+Tech+Mono|Nixie+One);
+
+/*
+font-family: 'Share Tech', sans-serif; // Title
+font-family: 'Share Tech Mono', sans-serif; // Code
+font-family: 'Nixie One', cursive; // Text
+*/
+
 /*
 simple way to have an unified background that cover all the screen.
 */
+
+* {
+   font-family: 'Nixie One', cursive;
+   color: #eeeeee;
+   
+   margin: 0;
+   padding: 0;
+   border: 0;
+}
+
 html {
-    background: black url('https://fixme.ch/w/images/d/df/Pxe_fixme_splash.png') no-repeat;
-    background-size: cover;
-    margin: 16px;
+    width: 100%;
+    height: 100%;
+    
+    background-color: #111111;
+    
+    background: black url('img/head_front.svg') no-repeat;
+    background-size: contain;
+    background-position: right;
+    background-attachment:fixed;
 }
 
-* {
-   /* Prevent selection*/
-   -moz-user-select: -moz-none;
-   -khtml-user-select: none;
-   -webkit-user-select: none;
-   -ms-user-select: none;
-   user-select: none;
+body {
+    width: 100%;
+    height: 100%;
 }
 
-a {
-    color: lightgreen;
+#container {
+    margin: auto;
+    width: 800px;
+    
+    height: 100%;
+    
+    background-color: rgba(50, 50, 50, 0.8);
+}
+
+#wrapper {
+    padding: 50px 50px;
 }
 
 /*
 Legend act here as a menu, give the same green border than central-block.
 */
 legend {
-    padding: 1px 10px;
-    background: black;
-    margin: 4px;
-    border-radius: 4px;
-    border-width: 3px;
-    border-color: green;
-    border-style: groove;
+	
 }
 
 fieldset {
-    border-color: #24FF61;
+	
 }
 
 /*
 Main app block, central.
 */
+
+h1, h2, h3, h4, h5, h6 {
+    color: #55DD00;
+    font-family: 'Share Tech', Monospace, sans-serif;
+}
+
 h1 {
-    color: lightgreen;
-    font-family: Monospace, sans-serif;
-    font-size: 1.5em;
-    margin-left: 2%;
-    margin-top: 5%;
+    font-size: 48px;
+}
+
+h2 {
+    font-size: 36px;
 }
 
 .central-block {
-    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
-    color:green;
-    font-size:18px;
-    background-color:black;
-    border-width: 3px;
-    border-color: green;
-    border-style: groove;
-    margin: 5% auto;
-    text-align:center;
-    vertical-align:middle;
-    padding:1%;
-    opacity:0.9;
+	
 }
 
 .index {
@@ -78,7 +96,6 @@ API message block
 */
 #msg-block {
     padding: 5px;
-    border-top: 1px solid green;
 }
 
 /*

+ 51 - 55
trigger.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<!DOCTYPE html>
 <html>
 <head>
   <meta name="generator" content=
@@ -10,64 +10,60 @@
    href="favicon.ico" />
 </head>
 <body onload="onPageLoad()">
-  <h1>Trigger hackerspace status</h1>
+  <div id="container">
+    <div id="wrapper">
+      <h1>Trigger hackerspace status</h1>
 
-  <div class='central-block'>
+      <div class='central-block'>
+          <h2>Status</h2>
+          <div id="loading-block">Loading ...</div>
 
-      <fieldset>
-      <legend>Status</legend>
-      <div id="loading-block">Loading ...</div>
-
-      <div id="open-block" style="visibility:hidden;">
-        <form name="hoursform" id="hoursform">
-          <div class="plusminux" onclick="changeHour(0)">-</div>
-          <input id="hours" name="hours" size="2" class="text-input" maxlength=
-          "2" onkeyup="checkHours(this)" value="1">
-          <div class="plusminux" onclick="changeHour(1)">+</div>
-          <input type="button" onclick="openSpace()" value="Open"
-          class="button" id="openbutton" disabled>
-        </form>
-      </div>
-      <div id="close-block" style="visibility:hidden;">
-        <form>
-          <input type="button" onclick="closeSpace()" value="Close"
-          class="button">
-          <input type="button" onclick="promptOpenSpace()" value="Extend"
-          class="button">
-          <br>
-        The space is still open for :
-        <div class="numbers">
-          <span class="number" id="first-hour">2</span> <span class=
-          "number" id="second-hour">2</span> <span class="number" id=
-          "separator">:</span> <span class="number" id=
-          "first-minute">2</span> <span class="number" id=
-          "second-minute">2</span>
-        </div>
-        </form>
+          <div id="open-block" style="visibility:hidden;">
+            <form name="hoursform" id="hoursform">
+              <div class="plusminux" onclick="changeHour(0)">-</div>
+              <input id="hours" name="hours" size="2" class="text-input" maxlength=
+              "2" onkeyup="checkHours(this)" value="1">
+              <div class="plusminux" onclick="changeHour(1)">+</div>
+              <input type="button" onclick="openSpace()" value="Open"
+              class="button" id="openbutton" disabled>
+            </form>
+          </div>
+          <div id="close-block" style="visibility:hidden;">
+            <form>
+              <input type="button" onclick="closeSpace()" value="Close"
+              class="button">
+              <input type="button" onclick="promptOpenSpace()" value="Extend"
+              class="button">
+              <br>
+            The space is still open for :
+            <div class="numbers">
+              <span class="number" id="first-hour">2</span> <span class=
+              "number" id="second-hour">2</span> <span class="number" id=
+              "separator">:</span> <span class="number" id=
+              "first-minute">2</span> <span class="number" id=
+              "second-minute">2</span>
+            </div>
+            </form>
+          </div>
+          <div id="msg-block"></div>
+          <br/>
+            <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">
+            <br/>
+            <div id="breathBox">
+                <label for="breathSlider">Breath:</label>
+                <input type="range" value=0 min=0 max=5000 step=10 onchange="changeBreathSpeed()" onmouseup="setTheBreathSpeed()" id="breathSlider" class="breathSlider">
+                <span id="breathValue">0</span>
+            </div>
       </div>
-
-      <div id="msg-block"></div>
-      </fieldset>
-      <br/>
-      <fieldset>
-        <legend>Lights</legend>
-        <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">
-        <br/>
-        <div id="breathBox">
-            <label for="breathSlider">Breath:</label>
-            <input type="range" value=0 min=0 max=5000 step=10 onchange="changeBreathSpeed()" onmouseup="setTheBreathSpeed()" id="breathSlider" class="breathSlider">
-            <span id="breathValue">0</span>
-        </div>
-      </fieldset>
-
+    </div>
   </div>
-
   <script type="text/javascript" src="main.js"></script>
   <script type="text/javascript" src="json_sans_eval.js"></script>
   <script type="text/javascript" src="https://konami-js.googlecode.com/svn/trunk/konami.js"></script>