index.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>FAIMaison − contribution à l'expérimentation wifi</title>
  6. <!-- jQuery -->
  7. <script src="assets/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
  8. <!-- Bootstrap -->
  9. <script src="assets/bootstrap/js/bootstrap.js"></script>
  10. <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  11. <!-- Leaflet -->
  12. <link rel="stylesheet" type="text/css" media="all" href="assets/leaflet/leaflet.css" />
  13. <script src="assets/leaflet/leaflet.js" type="text/javascript"></script>
  14. <!-- Custom -->
  15. <link rel="stylesheet" type="text/css" media="all" href="assets/main.css" />
  16. <script src="assets/main.js" type="text/javascript"></script>
  17. </head>
  18. <body>
  19. <header class="jumbotron">
  20. <div class="container">
  21. <h1>Réseau wifi expérimental </h1>
  22. <p>
  23. L'association <a href="http://faimaison.net">FAIMaison</a> expérimente à
  24. grande échelle (Nantes et environs) la création d'un réseau sans-fil à
  25. longue portée à des fins, entre autres, de <em>partage</em> et
  26. <em>fourniture</em> d'<strong>accès à internet</strong>.
  27. </p>
  28. <p>
  29. Pour celà, nous recherchons des volontaires, tant pour <strong>partager une
  30. partie de leur connexion</strong> que pour participer au réseau (accès à
  31. internet, partage local…).
  32. </p>
  33. <p>
  34. Renseigner ce formulaire nous permet de définir quelles <strong>zones
  35. d'expérimentations</strong> (avec une grande densité de volontaires)
  36. pourraient-être intéressantes.
  37. </p>
  38. </div>
  39. </header>
  40. <section role="main" class="container">
  41. <form role="form">
  42. <h2>Contact</h2>
  43. <div class="form-group">
  44. <label for="name">Nom / Pseudo</label>
  45. <input name="name" id="name" type="text" class="form-control"/>
  46. </div>
  47. <p class="help-block">
  48. Un moyen de contact au moins est nécessaire
  49. </p>
  50. <p>
  51. <div class="form-group">
  52. <label for="email">Email</label>
  53. <input name="email" id="email" type="email" class="form-control">
  54. </div>
  55. <div class="form-group">
  56. <label for="phone">Téléphone</label>
  57. <input name="phone" id="phone" type="tel" class="form-control"/>
  58. </div>
  59. </p>
  60. <h2>Je souhaite</h2>
  61. <p class="radio">
  62. <label>
  63. <input type="radio" name="contrib-type" value="share" /> Partager une partie de ma connexion
  64. </label>
  65. </p>
  66. <p class="radio">
  67. <label>
  68. <input type="radio" name="contrib-type" value="connect" /> Me raccorder au réseau expérimental
  69. </label>
  70. </p>
  71. <div id="contrib-type-share">
  72. <h2>Partager une connexion</h2>
  73. <h3>Type de connexion</h3>
  74. <p class="radio"><label>
  75. <input type="radio" name="access-type" value="fiber"/>
  76. Fibre
  77. </label></p>
  78. <p class="radio"><label>
  79. <input type="radio" name="access-type" value="vdsl"/>
  80. VDSL
  81. </label></p>
  82. <p class="radio"><label>
  83. <input type="radio" name="access-type" value="adsl"/>
  84. ADSL
  85. </label></p>
  86. <h3>Débits</h3>
  87. <p class="help-block">
  88. Il est possible de limiter techniquement la quantité de bande passante
  89. partagée avec les autres expérimentateurs afin de ne pas pénaliser votre
  90. confort.
  91. </p>
  92. <p>
  93. <label for="bandwidth">Débit total (Mbps)</label>
  94. <input name="bandwidth" id="bandwidth" type="number" min="0" class="form-control"/>
  95. </p>
  96. <p>
  97. <label for="share-part">Je souhaite partager (au max.) (Mbps)</label>
  98. <input name="share-part" id="share-part" type="number" min="0" class="form-control"/>
  99. </p>
  100. </div>
  101. <h2>Ma localisation</h2>
  102. <div class="row">
  103. <div class="col-sm-6">
  104. <div id="map"></div>
  105. </div>
  106. <div class="form-group col-sm-6">
  107. <div class="form-group form-group-lg form-inline">
  108. <input type="text" name="search" id="search" placeholder="rue du calvaire, nantes" class="form-control" />
  109. <span id="search-btn" class="btn btn-default btn-lg" data-loading-text="...">Recherche</span>
  110. <div id="search-results" class=""></div>
  111. <p class="help-block">Déplacer le marqueur pour pointer précisément le bâtiment au besoin</p>
  112. </div>
  113. <input type="hidden" name="latitude" id="latitude" value="" />
  114. <input type="hidden" name="longitude" id="longitude" value="" />
  115. </div>
  116. </div>
  117. </div>
  118. <p class="help-block">Les antennes peuvent être positionées soit sur le toit soit aux fenêtres</p>
  119. <div class="form-group">
  120. <label for="orientation" />Orientation(s) de mes fenêtres</label><br />
  121. <label class="checkbox-inline">
  122. <input type="checkbox" name="orientation" value="N">Nord
  123. </label>
  124. <label class="checkbox-inline">
  125. <input type="checkbox" name="orientation" value="NO" class="checkbox-inline">Nord-Ouest<br />
  126. </label>
  127. <label class="checkbox-inline">
  128. <input type="checkbox" name="orientation" value="O" class="checkbox-inline">Ouest<br />
  129. </label>
  130. <label class="checkbox-inline">
  131. <input type="checkbox" name="orientation" value="SO" class="checkbox-inline">Sud-Ouest<br />
  132. </label>
  133. <label class="checkbox-inline">
  134. <input type="checkbox" name="orientation" value="S" class="checkbox-inline">Sud<br>
  135. </label>
  136. <label class="checkbox-inline">
  137. <input type="checkbox" name="orientation" value="SE" class="checkbox-inline">Sud-Est<br>
  138. </label>
  139. <label class="checkbox-inline">
  140. <input type="checkbox" name="orientation" value="E" class="checkbox-inline">Est<br>
  141. </label>
  142. <label class="checkbox-inline">
  143. <input type="checkbox" name="orientation" value="NE" class="checkbox-inline">Nord-Est<br>
  144. </label>
  145. </div>
  146. <div class="form-group">
  147. <label for="roof">Je peux accéder à mon toît
  148. <input name="roof" type="checkbox" />
  149. </label>
  150. </div>
  151. <p>
  152. <label for="floor">Étage</label>
  153. <input name="floor" id="floor" type="number" class="form-control" placeholder="Indiquer « 0 » pour le Rez-de-chaussée"/>
  154. </p>
  155. <h2>Remarque/commentaire</h2>
  156. <textarea name="comment" class="form-control"></textarea>
  157. <h2>Mes données</h2>
  158. <p class="help-block">
  159. Les données collectées dans ce formulaire sont, par défaut, accessibles
  160. seulement au bureau de FAIMaison.<br />
  161. Certaines données, précisées ci-dessous, et anonymisées peuvent-être exposées
  162. sur une carte publique.
  163. </p>
  164. <div class="form-group">
  165. <label for="privacy" />
  166. J'autorise qu'apparaissent sur la carte publique :
  167. </label><br />
  168. </div>
  169. <div class="checkbox">
  170. <label>
  171. <input type="checkbox" name="privacy" checked=1 value="coordinates">
  172. Mes coordonnées GPS
  173. </label>
  174. </div>
  175. <div class="checkbox">
  176. <label>
  177. <input type="checkbox" name="privacy" checked=1 value="place_details">
  178. Mon étage et mes orientations
  179. </label>
  180. </div>
  181. <div class="checkbox">
  182. <label>
  183. <input type="checkbox" name="privacy" value="login"> Mon nom/pseudo
  184. </label>
  185. </div>
  186. <div class="checkbox">
  187. <label>
  188. <input type="checkbox" name="privacy" value="comment"> Mon commentaire
  189. </label>
  190. </div>
  191. <input type="submit" value="Envoyer" class="btn btn-primary btn-lg">
  192. </form>
  193. </section>
  194. <footer>
  195. <p>Vos données personnelles sont en lieu sûr.</p>
  196. </footer>
  197. <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
  198. <div class="modal-dialog modal-lg">
  199. <div class="modal-content">
  200. <div class="modal-header">
  201. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
  202. <h4 class="modal-title" id="myModalLabel">Résultats</h4>
  203. </div>
  204. <div class="modal-body">
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. </body>
  210. </html>