index.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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="jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
  8. <!-- Bootstrap -->
  9. <script src="dist/js/bootstrap.js"></script>
  10. <link href="dist/css/bootstrap.min.css" rel="stylesheet">
  11. <!-- Leaflet -->
  12. <link rel="stylesheet" type="text/css" media="all" href="leaflet/leaflet.css" />
  13. <script src="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">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. <input type="submit" value="Envoyer" class="btn btn-primary btn-lg">
  156. </form>
  157. </section>
  158. <footer>
  159. <p>Vos données personnelles sont en lieu sûr.</p>
  160. </footer>
  161. <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
  162. <div class="modal-dialog modal-lg">
  163. <div class="modal-content">
  164. <div class="modal-header">
  165. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
  166. <h4 class="modal-title" id="myModalLabel">Résultats</h4>
  167. </div>
  168. <div class="modal-body">
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </body>
  174. </html>