minor interface improvements. New gpl3 license.

f0563cd9 · diesys · 7b824abf · 7b824abf · f0563cd9 · f0563cd9
Commit f0563cd9 authored Oct 03, 2016 by diesys 🎈
--- a/glock.zip
+++ b/glock.zip
--- a/img/howto/ht5.png
+++ b/img/howto/ht5.png
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
-<html>
+<html lang="it">
    <head>
        <title>Glock</title>
        <!-- Version: 1.0a !-->
@@ -108,46 +108,58 @@
        <a class="button howto" onclick="HowTo(1)" href="#">Glock</a>
        <a id="credits_button" class="button credits" onclick="show_credits()" href="#">Credits</a>
          <div id="credits" class="HowTo inactive">
-            <img src="img/howto/ht1.png" />
+            <img src="img/howto/ht1.png" alt="glock logo" />
            <h1>Credits</h1>
            <p>Glock è stato realizzato usando HTML5, CSS3, JavaScript, <a href="http://snapsvg.io/">Snap</a>. <br />Ideato e realizzato da <a href="http://flowin.space">Diego Turtulici</a>.<br/>
-              Rilasciato sotto <a href="https://www.gnu.org/licenses/old-licenses/gpl-2.0.html">licenza GPLv2</a>. <br/><a href="glock.zip">Scarica il pacchetto.</a></p>
+              Rilasciato sotto <a href="https://www.gnu.org/licenses/gpl-3.0.html">licenza GPLv3</a>. <br/><a href="glock.zip">Scarica il pacchetto.</a></p>
              <br><br>
            <a class="button credits" onclick="close_credits()">chiudi</a>
           </div>

+           <div id="HT5" class="HowTo inactive">
+             <img src="img/howto/ht5.png" alt="HowTo" />
+             <h1>Personalizzalo</h1>
+             <p> </p>
+             <br><br>
+             <a class="button closeHowTo" onclick="HowTo('close')" href="#">chiudi</a>
+             <a class="button HowTo next" onclick="HowTo('close')" href="#">&#62;</a>
+             <a class="button HowTo prev" onclick="HowTo(4)" href="#">&#60;</a>
+           </div>
          <div id="HT4" class="HowTo inactive">
-            <a class="button howto" onclick="HowTo(0)" href="#">Glock</a>
-            <img src="img/howto/ht4.png" />
+            <img src="img/howto/ht4.png" alt="HowTo" />
            <h1>I minuti</h1>
-            <p>Esattamente come per le ore i minuti vanno al doppiodella velocità. Anziché essere 60 in un giro completosono 30. Questa volta la figura è un triangolo che ruota,avrai così il primo minuto e la mezz'ora con il vertice inalto e 15 e 45 minuti con il vertice in basso.In tutti i minuti multipli di 5 il triangolo è orientato conuno dei vertici in alto o in basso ed è quindi facilissimodistinguere le posizioni.</p>
+            <p>Esattamente come per le ore i minuti vanno al doppio della velocità. Anziché essere 60 in un giro completo sono 30. Questa volta la figura è un triangolo che ruota, avrai così il primo minuto e la mezz'ora con il vertice in alto e 15 e 45 minuti con il vertice in basso. In tutti i minuti multipli di 5 il triangolo è orientato con uno dei vertici in alto o in basso.</p>
            <br><br>
-            <a class="button NextHowTo" onclick="HowTo('close')" href="#">chiudi</a>
+            <a class="button closeHowTo" onclick="HowTo('close')" href="#">chiudi</a>
+            <a class="button HowTo next" onclick="HowTo()" href="#">&#62;</a>
+            <a class="button HowTo prev" onclick="HowTo(3)" href="#">&#60;</a>
          </div>
          <div id="HT3" class="HowTo inactive">
-            <img src="img/howto/ht3.png" />
-            <a class="button NextHowTo" onclick="HowTo(4)">I minuti</a>
+            <img src="img/howto/ht3.png" alt="HowTo" />
            <h1>Le ore</h1>
-            <p>Immagina di far andare la lancetta dell'ora avelocità doppia, quando sono le 3 o le 9 anzichéessere nei quarti l'ora sarà indicata nel vertice inbasso, se invece sono le 6 o le 12 in quello in alto.Un orologio «solare» che anziché dirti AM o PMti dice se che usa il sole per farti capire se le 18sono già passate così da poterti orientare conl'ausilio della luce solare..</p>
+            <p>Immagina di far andare la lancetta dell'ora a velocità doppia, quando sono le 3 o le 9, anziché essere nei quarti del quadrante, l'ora sarà indicata nel vertice in basso; se invece sono le 6 o le 12 in quello in alto. Un orologio «solare» che anziché dirti AM o PM ti dice se che usa il sole per farti capire se le 18 (<i>tramonto</i>) sono già passate così da poterti orientare con l'ausilio della luce solare.</p>
            <br><br>
            <a class="button closeHowTo" onclick="HowTo('close')" href="#">chiudi</a>
+            <a class="button HowTo next" onclick="HowTo(4)" href="#">&#62;</a>
+            <a class="button HowTo prev" onclick="HowTo(2)" href="#">&#60;</a>
          </div>
          <div id="HT2" class="HowTo inactive">
-            <img src="img/howto/ht2.png" />
-            <a class="button NextHowTo" onclick="HowTo(3)">Le ore</a>
+            <img src="img/howto/ht2.png" alt="HowTo" />
            <h1>Gli indicatori</h1>
-            <p>Glock non ha lancette ma indicatori. Il funzionamento è quasi identico, ce ne sono di due tipi: l'indicatore delle ore è mobile e passa tra i vertici dell'esagono, quello dei minuti sta su un vertice fisso del triangolo che fa una rotazione ad ogni minuto. Entrambi gli indicatori hanno due possibili stati che permettono di leggere l'orologio con più precisione.</p>
+            <p>Glock non ha lancette ma indicatori. Il funzionamento è quasi identico, ce ne sono di due tipi: l'indicatore delle ore è mobile e passa tra i vertici dell'esagono, quello dei minuti sta su un vertice fisso del triangolo che fa una rotazione ad ogni minuto. Entrambi gli indicatori hanno due possibili stati che indicano se ha già compiuto il primo giro.</p>
            <br><br>
-            <a class="button closeHowTo" onclick="HowTo('close')">chiudi</a>
+            <a class="button closeHowTo" onclick="HowTo('close')" href="#">chiudi</a>
+            <a class="button HowTo next" onclick="HowTo(3)" href="#">&#62;</a>
+            <a class="button HowTo prev" onclick="HowTo(1)" href="#">&#60;</a>
          </div>
          <div id="HT1" class="HowTo inactive">
-            <img src="img/howto/ht1.png" />
-            <a class="button NextHowTo" onclick="HowTo(2)" href="#">Gli indicatori</a>
+            <img src="img/howto/ht1.png" alt="HowTo" />
            <h1>Colpo d'occhio</h1>
-            <p>Glock è un'orologio grafico che cerca un altro approccionello scandire il tempo, è fatto per essere visto non letto.<br/>
-              Anche vedendolo a distanza o di sfuggita sarà facile capire l'ora indicata e ancora più immediato, con una precisione dell'ordine di 5 minuti.</p>
+            <p>Glock è un'orologio grafico che cerca un altro approccio nello scandire il tempo, è fatto per essere visto e non letto.<br/>
+              Una volta compreso il funzionamento anche vedendolo a distanza o di sfuggita sarà facile capire l'ora indicata e ancora più immediato, con una precisione dell'ordine di 5 minuti.</p>
              <br><br>
-            <a class="button closeHowTo" onclick="HowTo('close')">chiudi</a>
+            <a class="button HowTo next" onclick="HowTo(2)" href="#">&#62;</a>
+            <a class="button closeHowTo" onclick="HowTo('close')" href="#">chiudi</a>
           </div>
    </body>
 </html>
--- a/license.txt
+++ b/license.txt
--- a/script.js
+++ b/script.js
@@ -135,6 +135,10 @@ window.onload = function () {

 /////CAMBIARE TUTTA QUESTA FUNZIONE PER FARLA PIÙ PULITA
      //mettere offset di ore per i fusi orari (url_vars['offset'])
+      //normalizzare ore, minuti, secondi %6 %30 %60 e offset %12
+
+      //QUANDO CAMBIO COLORE CAMBIO LO AGGIUNGO O CAMBIO COME PARAMETRO URL E GLIELO RIMETTO?
+
      if (url_vars['offset'])
          hour += offset;

@@ -155,33 +159,39 @@ window.onload = function () {

 // END OF GLOCK

-// HOW TO SLIDESHOW
+// HOW-TO SLIDESHOW

 function HowTo(option) {
  ht1 = document.getElementById("HT1"),
  ht2 = document.getElementById("HT2"),
  ht3 = document.getElementById("HT3"),
  ht4 = document.getElementById("HT4");
+  ht5 = document.getElementById("HT5");

-  if (option == 1)
+  if (option == '1')
      ht1.className = "HowTo active";
-  else if (option == 2) {
+  else if (option == '2') {
      ht1.className = "HowTo inactive";
      ht2.className = "HowTo active"
    }
-  else if (option == 3) {
+  else if (option == '3') {
      ht2.className = "HowTo inactive";
      ht3.className = "HowTo active";
    }
-  else if (option == 4) {
+  else if (option == '4') {
      ht3.className = "HowTo inactive";
      ht4.className = "HowTo active";
    }
+    else if (option == '5') {
+        ht4.className = "HowTo inactive";
+        ht5.className = "HowTo active";
+      }
  else {
      ht1.className = "HowTo inactive";
      ht2.className = "HowTo inactive";
      ht3.className = "HowTo inactive";
      ht4.className = "HowTo inactive";
+      ht5.className = "HowTo inactive";
    }
  delete ht1; delete ht2; delete ht3; delete ht4;
  }
@@ -202,5 +212,3 @@ function toggle_colorpicker() {
    (picker.className == "jscolor active") ? (picker.className = "jscolor inactive") : (picker.className = "jscolor active");
    delete picker;
 }
-
-// WINDOW ONLOAD
--- a/style.css
+++ b/style.css
@@ -71,16 +71,15 @@ body.dark {
    0%    {opacity: 0; transform: translateX(100%);},
    100%  {opacity: 1; transform: translateX(0);}
 }
+@keyframes fadefromtop {
+    0%    {opacity: 0; transform: translateY(-100%);},
+    100%  {opacity: 1; transform: translateY(0);}
+}
 @keyframes fadein {
    0%    {opacity: 0;},
    100%  {opacity: 1;}
 }

-@keyframes fadeout {
-    0%    {opacity: 1;},
-    100%  {opacity: 0;}
-}
-
 .HowTo {
 		position: fixed;
    height: 100%;
@@ -149,8 +148,12 @@ body.dark {
    text-transform: uppercase;
    box-shadow: 0px 2px 3px rgba(0,0,0,.2);
    cursor: pointer;
-    animation: fadefrombottom 1s ease;
 		text-decoration: none;
+		overflow: hidden;
+		text-align: center;
+		outline: none;
+
+	  animation: fadefrombottom 1s ease;

    -webkit-transition: .2s ease; /* Safari */
    transition: .2s ease;
@@ -179,38 +182,54 @@ body.dark {
  display: none;
 }
 .button.closeHowTo {
-    left: 50px;
+    right: 50px;
    top: -6px;
-    padding: 10px;
+    padding: 15px;
    font-size: 12pt;
    background-color: #fff;
    color: #333;
    box-shadow: 0px 2px 3px rgba(0,0,0,.1);
-    animation: fadefromleft 1s ease;
+    animation: fadefromtop 1s ease;
 }

-.button.NextHowTo {
-    right: -8px;
-    top: 20px;
+.button.HowTo {
+		max-height: 28px;
+		max-width: 20px;
+    top: 50%;
    padding: 15px;
-		padding-right: 25px;
    background-color: #fff;
    color: #333;
    box-shadow: 0px 2px 3px rgba(0,0,0,.1);
-    animation: fadefromright 1s ease;
+		text-transform: none;
 }
-.button.NextHowTo:hover {
+.button.HowTo:hover {
    box-shadow: 0px 2px 15px rgba(0,0,0,.1);

    -webkit-transition: .2s ease; /* Safari */
    transition: .2s ease;
 }
-.button.NextHowTo:active {
+.button.HowTo.next {
+		right: -10px;
+		padding-right: 25px;
+		animation: fadefromright 1s ease;
+}
+.button.HowTo.next:active {
    transform: translateX(10px);

    -webkit-transition: .2s ease; /* Safari */
    transition: .2s ease;
 }
+.button.HowTo.prev {
+		left: -10px;
+		padding-left: 25px;
+		animation: fadefromleft 1s ease;
+}
+.button.HowTo.prev:active {
+    transform: translateX(-10px);
+
+    -webkit-transition: .2s ease; /* Safari */
+    transition: .2s ease;
+}

 .jscolor {
 		position: absolute;
@@ -225,6 +244,7 @@ body.dark {
 		font-family: Oswald;
 		font-size: 12pt;
 		transform: translateY(-380%);
+		outline: none;
 }

 .jscolor.active {