zlp.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <title>Înscrieri &mdash; Ziua Libertății Programelor &mdash; Fundația Ceata</title>
   4 <script type="application/javascript">
   5 function update_event_info(){
   6         var event_info = document.getElementById("event_info");
   7         var image = document.getElementById("image");
   8         var xhr = new XMLHttpRequest();
   9         xhr.open("GET", "/zlp.pl?op=info&event=" + document.getElementById("event").value, false);
  10         xhr.send();
  11         console.log(xhr.responseText);
  12         var ret = JSON.parse(xhr.responseText);
  13         event_info.innerHTML = "<b>" + ret.date + "</b> la <b>" + ret.locul + "</b> in <b>" + ret.sala + "</b>. Locuri ramase: <b>" + ret.locuri + "</b>. Link: <a href='" + ret.link + "'>" + ret.link + "</a>";
  14         image.src = ret.image;
  15 }
  16
  17 function validate(){
  18         var captcha = document.getElementById("captcha");
  19         if(captcha.value != 83){
  20                 alert("Ați completat greșit anul de lansare al proiectului GNU. Indiciu: Suntem în 2013 și proiectul GNU împlinește 30 de ani.");
  21                 return false;
  22         }
  23 }
  24
  25 window.onload = update_event_info;
  26 </script>
  27
  28 <style>
  29   body {
  30     max-width: 700px;
  31     border: solid 1px #ccc;
  32     margin: 0 auto;
  33     font-family: 'DejaVu Sans', sans-serif;
  34   }
  35
  36   form {
  37     padding: 10px;
  38   }
  39
  40   p {
  41     padding-left: 10px;
  42     padding-right: 20px;
  43   }
  44
  45   label.first {
  46     font-weight: bold;
  47   }
  48
  49   label.help {
  50     color: #333;
  51   }
  52
  53   select {
  54     font-weight: bold;
  55     font-size: 1.01em;
  56   }
  57
  58   input#captcha {
  59     width: 20px;
  60   }
  61
  62   input#email {
  63     width: 250px;
  64   }
  65 </style>
  66
  67 <img src="img/gnu30-ro.png" alt="Aniversarea a 30 de ani de la lansarea proiectului GNU" />
  68
  69 <p>
  70   În 2013, Fundația Ceata organizează evenimente de Ziua Libertății Programelor dedicate proiectului GNU în mai multe orașe românești.
  71 </p>
  72 <p>
  73 Cu ocazia aniversării a 30 de ani de la lansarea proiectului GNU, membrii voluntari și colaboratorii Fundației Ceata vor susține prezentări și demonstrații cu pachete de programe libere din proiectul GNU.
  74 </p>
  75 <p>
  76   Vă invităm să vă înscrieți pentru a participa la aceste evenimente și să folosiți GNU, un sistem de operare care vă respectă libertățile de utilizator.
  77 </p>
  78
  79 <form action="/zlp.pl" method="POST" onsubmit="return validate();">
  80   <input type="hidden" name="op" value="append">
  81   <div>
  82     <label class="first">Prenume:</label><br />
  83     <input type="text" name="prenume" required><br />
  84   </div>
  85   <br />
  86   <div>
  87     <label class="first">Nume (opțional):</label><br />
  88     <input type="text" name="nume"><br />
  89   </div>
  90   <br />
  91   <div>
  92     <label class="first">Adresa de poștă electronică:</label><br />
  93     <label class="help">Va fi folosită pentru anunțuri despre acest eveniment.</label><br />
  94     <input type="email" name="email" id="email" required><br />
  95   </div>
  96   <br />
  97   <div>
  98     <label class="first">Înscriere la evenimentul din:</label>
  99     <select name="oras" id="event" onchange="update_event_info();">
 100       <option value="balti">Bălți</option>
 101       <option value="bucuresti">București</option>
 102       <option value="chisinau">Chișinău</option>
 103       <option value="cluj">Cluj-Napoca</option>
 104       <option value="constanta">Constanța</option>
 105       <option value="valcea">Râmnicu-Vâlcea</option>
 106     </select><br />
 107     <label class="help">Alege orașul în care ești sau mergi pentru evenimentul de acolo.</label><br />
 108   </div>
 109   <br />
 110   <div>
 111     <label class="first">Detalii:</label>
 112     <div id="event_info"></div>
 113     <img id="image" style="width:200px;height:200px">
 114   </div>
 115   <br />
 116   <div>
 117     <label class="first">Numărul de locuri de rezervat:</label>
 118     <select name="numar" id="num">
 119       <option value="1">1</option>
 120       <option value="2">2</option>
 121       <option value="3">3</option>
 122       <option value="4">4</option>
 123       <option value="5">5</option>
 124     </select><br />
 125     <label class="help">Te rugăm să selectezi mai multe locuri doar dacă aduci și prieteni la eveniment.</label>
 126   </div>
 127   <br />
 128   <div>
 129     <label class="first">Anul de lansare al proiectului GNU este 19</label><input type="number" name="captcha" min="0" max="99" id="captcha" required><label class="first">. (2 cifre)</label><br />
 130     <label class="help">Această întrebare filtrează roboții și lasă doar persoanele reale să se înscrie.</label>
 131   </div>
 132   <br />
 133   <div>
 134     <label class="first"><input type="checkbox" name="spam" checked>Pe viitor, vreau să primesc și alte anunțuri de la Fundația Ceata.</label><br />
 135     <label class="help">
 136       În acest caz, se va trimite în numele tău o cerere de abonare la lista ceata-anunturi.<br />
 137       Nu vei fi automat abonat, ci vei primi o cerere de confirmare că ai cerut să fii abonat.
 138     </label>
 139   </div>
 140   <br />
 141   <input type="submit" value="Trimite">
 142 </form>