wifi-form.tpl 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  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. %if errors:
  23. <p>
  24. Veuillez corriger les <span class="label label-danger">erreurs</span>
  25. suivantes :
  26. </p>
  27. <div id="errors" class="bg-danger">
  28. <ul >
  29. %for field, err in set(errors):
  30. <li><strong>{{field}}</strong> : {{err}}</li>
  31. %end
  32. </ul>
  33. </div>
  34. %else:
  35. <p>
  36. L'association <a href="http://faimaison.net">FAIMaison</a> expérimente à
  37. grande échelle (Nantes et environs) la création d'un réseau sans-fil à
  38. longue portée à des fins, entre autres, de <em>partage</em> et
  39. <em>fourniture</em> d'<strong>accès à internet</strong>.
  40. </p>
  41. <p>
  42. Pour celà, nous recherchons des volontaires, tant pour <strong>partager une
  43. partie de leur connexion</strong> que pour participer au réseau (accès à
  44. internet, partage local…).
  45. </p>
  46. <p>
  47. Renseigner ce formulaire nous permet de définir quelles <strong>zones
  48. d'expérimentations</strong> (avec une grande densité de volontaires)
  49. pourraient-être intéressantes.
  50. </p>
  51. %end
  52. </div>
  53. </header>
  54. <section role="main" class="container">
  55. <form role="form" method="post">
  56. <h2>Contact</h2>
  57. <div class="form-group">
  58. <label for="name">Nom / Pseudo</label>
  59. <input name="name" value="{{data.get('name', '')}}"
  60. id="name" type="text" class="form-control"/>
  61. </div>
  62. <p class="help-block">
  63. Un moyen de contact au moins est nécessaire
  64. </p>
  65. <p>
  66. <div class="form-group">
  67. <label for="email">Email</label>
  68. <input name="email" value="{{data.get('email', '')}}"
  69. id="email" type="email" class="form-control">
  70. </div>
  71. <div class="form-group">
  72. <label for="phone">Téléphone</label>
  73. <input name="phone" value="{{data.get('phone', '')}}"
  74. id="phone" type="tel" class="form-control"/>
  75. </div>
  76. </p>
  77. <h2>Je souhaite</h2>
  78. <p class="radio">
  79. <label>
  80. <input type="radio" name="contrib-type" value="share"
  81. {{'checked' if data.get('contrib-type') == 'share' else ''}}/>
  82. Partager une partie de ma connexion
  83. </label>
  84. </p>
  85. <p class="radio">
  86. <label>
  87. <input type="radio" name="contrib-type" value="connect"
  88. {{'checked' if data.get('contrib-type') == 'connect' else ''}}/>
  89. Me raccorder au réseau expérimental
  90. </label>
  91. </p>
  92. <div id="contrib-type-share">
  93. <h2>Partager une connexion</h2>
  94. <h3>Type de connexion</h3>
  95. <p class="radio"><label>
  96. <input {{'checked' if data.get('access-type') == 'fiber' else ''}}
  97. type="radio" name="access-type" value="fiber"/>
  98. Fibre
  99. </label></p>
  100. <p class="radio"><label>
  101. <input {{'checked' if data.get('access-type') == 'vdsl' else ''}}
  102. type="radio" name="access-type" value="vdsl"/>
  103. VDSL
  104. </label></p>
  105. <p class="radio"><label>
  106. <input {{'checked' if data.get('access-type') == 'adsl' else ''}}
  107. type="radio" name="access-type" value="adsl"/>
  108. ADSL
  109. </label></p>
  110. <p class="radio"><label>
  111. <input {{'checked' if data.get('access-type') == 'cable' else ''}}
  112. type="radio" name="access-type" value="cable"/>
  113. Câble
  114. </label></p>
  115. <h3>Débits</h3>
  116. <p class="help-block">
  117. Il est possible de limiter techniquement la quantité de bande passante
  118. partagée avec les autres expérimentateurs afin de ne pas pénaliser votre
  119. confort.
  120. </p>
  121. <p>
  122. <label for="bandwidth">Débit total (Mbps)</label>
  123. <input name="bandwidth" value="{{data.get('bandwidth', '')}}"
  124. id="bandwidth" type="number" min="0" class="form-control"/>
  125. </p>
  126. <p>
  127. <label for="share-part">Je souhaite partager (au max.) (Mbps)</label>
  128. <input name="share-part" value="{{data.get('share-part', '')}}"
  129. id="share-part" type="number" min="0" class="form-control"/>
  130. </p>
  131. </div>
  132. <h2>Ma localisation</h2>
  133. <div class="row">
  134. <div class="col-sm-6">
  135. <div id="map"></div>
  136. </div>
  137. <div class="form-group col-sm-6">
  138. <div class="form-group form-group-lg form-inline">
  139. <input type="text" name="search"
  140. id="search" placeholder="rue du calvaire, nantes" class="form-control" />
  141. <span id="search-btn" class="btn btn-default btn-lg" data-loading-text="...">Recherche</span>
  142. <div id="search-results" class=""></div>
  143. <p class="help-block">Déplacer le marqueur pour pointer précisément le bâtiment au besoin</p>
  144. </div>
  145. <input name="latitude" value="{{data.get('latitude', '')}}"
  146. type="hidden" id="latitude" />
  147. <input name="longitude" value="{{data.get('longitude', '')}}"
  148. type="hidden" id="longitude" />
  149. </div>
  150. </div>
  151. </div>
  152. <p class="help-block">Les antennes peuvent être positionées soit sur le toit soit aux fenêtres</p>
  153. <div class="form-group">
  154. <label for="orientation" />Orientation(s) de mes fenêtres</label><br />
  155. %for val, label in orientations:
  156. <label class="checkbox-inline">
  157. <input type="checkbox" name="orientation" value="{{val}}"
  158. {{'checked' if val in data.getall('orientation') else ''}}/>
  159. {{label}}
  160. </label>
  161. %end
  162. </div>
  163. <div class="form-group">
  164. <label for="roof">Je peux accéder à mon toît
  165. <input name="roof" {{'checked' if data.get('roof', False) else ''}}
  166. type="checkbox"/>
  167. </label>
  168. </div>
  169. <p>
  170. <label for="floor">Étage</label>
  171. <input name="floor" value="{{data.get('floor', '')}}"
  172. id="floor" type="number" class="form-control" placeholder="Indiquer « 0 » pour le Rez-de-chaussée"/>
  173. </p>
  174. <h2>Remarque/commentaire</h2>
  175. <textarea name="comment" class="form-control" row="5">{{data.get('comment', '').strip()}}</textarea>
  176. <h2>Mes données</h2>
  177. <p class="help-block">
  178. Les données collectées dans ce formulaire sont, par défaut, accessibles
  179. seulement au bureau de FAIMaison.<br />
  180. Certaines données, précisées ci-dessous, et anonymisées peuvent-être exposées
  181. sur une carte publique.
  182. </p>
  183. <div class="form-group">
  184. <label for="privacy" />
  185. J'autorise qu'apparaissent sur la carte publique :
  186. </label><br />
  187. </div>
  188. <div class="checkbox">
  189. <label>
  190. <input type="checkbox" name="privacy" value="coordinates"
  191. {{'checked' if (('coordinates' in data.getall('privacy')) or not data) else ''}} />
  192. Mes coordonnées GPS
  193. </label>
  194. </div>
  195. <div class="checkbox">
  196. <label>
  197. <input type="checkbox" name="privacy" value="place_details"
  198. {{'checked' if (('place_details' in data.getall('privacy')) or not data) else ''}}/>
  199. Mon étage et mes orientations
  200. </label>
  201. </div>
  202. <div class="checkbox">
  203. <label>
  204. <input type="checkbox" name="privacy" value="name"
  205. {{'checked' if 'name' in data.getall('privacy') else ''}}/>
  206. Mon nom/pseudo
  207. </label>
  208. </div>
  209. <div class="checkbox">
  210. <label>
  211. <input type="checkbox" name="privacy" value="comment"
  212. {{'checked' if 'comment' in data.getall('privacy') else ''}}/>
  213. Mon commentaire
  214. </label>
  215. </div>
  216. <input type="submit" value="Envoyer" class="btn btn-primary btn-lg"/>
  217. </form>
  218. </section>
  219. <footer>
  220. <p>Vos données personnelles sont en lieu sûr.</p>
  221. </footer>
  222. <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
  223. <div class="modal-dialog modal-lg">
  224. <div class="modal-content">
  225. <div class="modal-header">
  226. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
  227. <h4 class="modal-title" id="myModalLabel">Résultats</h4>
  228. </div>
  229. <div class="modal-body">
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. </body>
  235. </html>