index.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Înscrieri &mdash; Aniversarea Fundației Ceata</title>
  5. <script type="application/javascript">
  6. function update_event_info(){
  7. var event_info = document.getElementById("event_info");
  8. var image = document.getElementById("image");
  9. var xhr = new XMLHttpRequest();
  10. xhr.open("GET", "/fundația-1-an/fundația-1-an?op=info&oras=" + document.getElementById("event").value, false);
  11. xhr.send();
  12. console.log(xhr.responseText);
  13. var ret = JSON.parse(xhr.responseText);
  14. event_info.innerHTML = "Data: <b>" + ret.date + "</b>. Locuri libere rămase: <b>" + ret.locuri + "</b>.<br /><a href='" + ret.link + "' target='_blank'>Pagina evenimentului de la ceata.org</a>.";
  15. // event_info.innerHTML = "<b>" + ret.date + "</b> la <b>" + ret.locul + "</b> in <b>" + ret.sala + "</b>. Locuri libere rămase: <b>" + ret.locuri + "</b>. Legătură: <a href='" + ret.link + "'>" + ret.link + "</a>";
  16. // image.src = ret.image;
  17. }
  18. function validate(){
  19. var captcha = document.getElementById("captcha");
  20. if(captcha.value != 13){
  21. alert("Ați completat greșit anul de înființare a Fundației Ceata. Indiciu: Suntem în 2014 și Fundația Ceata aniversează 1 an de la înființare.");
  22. return false;
  23. }
  24. }
  25. window.onload = update_event_info;
  26. </script>
  27. <style>
  28. body {
  29. background-color: #eee;
  30. max-width: 700px;
  31. border: solid 1px #ccc;
  32. margin: 0 auto;
  33. font-family: 'DejaVu Sans', sans-serif;
  34. }
  35. div#header {
  36. text-align: center;
  37. }
  38. div#form {
  39. background-color: #fff;
  40. }
  41. form {
  42. padding: 1%;
  43. }
  44. p {
  45. padding-left: 1%;
  46. padding-right: 2%;
  47. }
  48. label.first {
  49. font-weight: bold;
  50. }
  51. label.help {
  52. color: #333;
  53. }
  54. select, input#send {
  55. font-weight: bold;
  56. }
  57. div#license {
  58. font-size: 0.9em;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div id="form">
  64. <div id="header">
  65. <img src="img/fundația-ceata-1-an.png" alt="Aniversarea unui an de la înființarea Fundației Ceata" />
  66. </div>
  67. <p>
  68. Cu ocazia împlinirii unui an de la înființare, pe 15 februarie Fundația Ceata organizează evenimente în trei orașe românești: atelier de instalat GNU+Linux în Bălți, atelier de GNU Emacs în București și hacaton de programe libere în Cluj-Napoca.
  69. </p>
  70. <p>
  71. Vă invităm să vă înscrieți pentru a participa la aceste evenimente completând formularul de mai jos.
  72. </p>
  73. <form action="/fundația-1-an/fundația-1-an" method="POST" onsubmit="return validate();">
  74. <input type="hidden" name="op" value="append">
  75. <div>
  76. <label class="first">Prenume:</label><br />
  77. <input type="text" name="prenume" required><br />
  78. </div>
  79. <br />
  80. <div>
  81. <label class="first">Nume (opțional):</label><br />
  82. <input type="text" name="nume"><br />
  83. </div>
  84. <br />
  85. <div>
  86. <label class="first">Adresa de poștă electronică:</label><br />
  87. <label class="help">Va fi folosită pentru anunțuri despre acest eveniment.</label><br />
  88. <input type="email" size="30" name="adresa" id="email" required><br />
  89. </div>
  90. <br />
  91. <div>
  92. <label class="first">Înscriere la evenimentul din:</label>
  93. <select name="oras" id="event" required onchange="update_event_info();">
  94. <option value="">-- Selectează orașul --</option>
  95. <option value="balti">Bălți</option>
  96. <option value="bucuresti">București</option>
  97. <option value="cluj">Cluj-Napoca</option>
  98. </select><br />
  99. <label class="help">Alege orașul în care ești sau mergi pentru evenimentul de acolo.</label><br />
  100. </div>
  101. <br />
  102. <div>
  103. <!-- <label class="first">Detalii:</label> -->
  104. <div id="event_info"></div>
  105. <!--<img id="image" style="width:200px;height:200px" src="#" />-->
  106. </div>
  107. <br />
  108. <div>
  109. <label class="first">Numărul de locuri de rezervat:</label>
  110. <select name="numar" id="num">
  111. <option value="1">1</option>
  112. <option value="2">2</option>
  113. <option value="3">3</option>
  114. <option value="4">4</option>
  115. <option value="5">5</option>
  116. </select><br />
  117. <label class="help">Te rugăm să selectezi mai multe locuri doar dacă aduci și prieteni la eveniment.</label>
  118. </div>
  119. <br />
  120. <div>
  121. <label class="first">Data de înființare a Fundației Ceata este 15 februarie 20</label><input type="number" size="2" name="captcha" min="0" max="99" id="captcha" required><label class="first">. (2 cifre)</label><br />
  122. <label class="help">Această întrebare filtrează roboții și lasă doar persoanele reale să se înscrie.</label>
  123. </div>
  124. <br />
  125. <div>
  126. <label class="first">(Opțional) Ai aflat de eveniment prin:</label>
  127. <select name="referinta" id="referinta">
  128. <option value="">-- selectează --</option>
  129. <option value="prieteni">prieteni/colegi</option>
  130. <option value="liste">liste/forumuri</option>
  131. <option value="retele">rețele sociale</option>
  132. <option value="ceata">*.ceata.org</option>
  133. </select>
  134. <label class="first">sau:</label>
  135. <input type="text" name="referinta2"><br />
  136. <label class="help">Dacă faci această mențiune, ne ajuți să eficientizăm promovarea pe viitor.</label>
  137. </div>
  138. <br />
  139. <div>
  140. <label class="first"><input type="checkbox" name="anunturi" checked>Pe viitor, vreau să primesc și alte anunțuri de la Fundația Ceata.</label><br />
  141. <label class="help">
  142. În acest caz, vei fi abonat la lista cu trafic redus ceata-anunturi.
  143. </label>
  144. </div>
  145. <br />
  146. <input type="submit" value="Trimite" id="send">
  147. </form>
  148. </div>
  149. <div id="license">
  150. <p>
  151. 2013 &mdash; <a href="http://ceata.org" target="_blank" title="Situl Fundației Ceata">Fundația Ceata</a> are drepturile de autor asupra acestei lucrări. Semnalați <a href="mailto:admin@ceata.org" title="Adresa echipei de administrare">echipei de administrare</a> eventualele probleme întâmpinate.
  152. </p>
  153. <p>
  154. Personajele din antet sunt folosite în condițiile licenței libere CC-BY-SA sub care au fost publicate de <a href="http://nicubunu.ro/" target="_blank" title="Nicu Buculei">Nicu Buculei</a>. Tortul este preluat din domeniul public din colecția <a href="http://openclipart.org" target="_blank">OpenClipArt</a>. Tipul de scriere folosit pentru subtitlu este <a href="https://www.google.com/fonts/specimen/Damion" target="_blank">Damion</a>, publicat sub licența liberă OFL.
  155. </p>
  156. <p>
  157. Programul pe care se bazează formularul este <a href="http://gitorious.org/ceata/ceata-formulare" target="_blank" title="Depozitul de cod al formularului">liber</a> în conformitate cu condițiile licenței <a href="https://www.gnu.org/licenses/agpl.html" target="_blank" title="Licența liberă GNU AGPL">GNU AGPLv3+</a>.
  158. </p>
  159. <p>
  160. Textul formularului este liber în conformitate cu condițiile licenței <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank" title="Licența liberă CC-BY-SA">CC-BY-SA</a>.
  161. </p>
  162. </div>
  163. </body>