index.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  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. <div class="form-group">
  43. <label for="name">Nom / Pseudo</label>
  44. <input name="name" id="name" type="text" class="form-control"/>
  45. </div>
  46. <h2>Moyen de contact</h2>
  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. <h3>Orientation(s) de mes fenêtres</h3>
  119. <label class="checkbox-inline">
  120. <input type="checkbox" name="vehicle" value="N">Nord
  121. </label>
  122. <label class="checkbox-inline">
  123. <input type="checkbox" name="vehicle" value="NO" class="checkbox-inline">Nord-Ouest<br />
  124. </label>
  125. <label class="checkbox-inline">
  126. <input type="checkbox" name="vehicle" value="O" class="checkbox-inline">Ouest<br />
  127. </label>
  128. <label class="checkbox-inline">
  129. <input type="checkbox" name="vehicle" value="SO" class="checkbox-inline">Sud-Ouest<br />
  130. </label>
  131. <label class="checkbox-inline">
  132. <input type="checkbox" name="vehicle" value="S" class="checkbox-inline">Sud<br>
  133. </label>
  134. <label class="checkbox-inline">
  135. <input type="checkbox" name="vehicle" value="SE" class="checkbox-inline">Sud-Est<br>
  136. </label>
  137. <label class="checkbox-inline">
  138. <input type="checkbox" name="vehicle" value="E" class="checkbox-inline">Est<br>
  139. </label>
  140. <label class="checkbox-inline">
  141. <input type="checkbox" name="vehicle" value="NE" class="checkbox-inline">Nord-Est<br>
  142. </label>
  143. <p class="help-block">Les antennes peuvent être positionées soit sur le toit soit aux fenêtres</p>
  144. <p>
  145. <label for="floor">Étage</label>
  146. <input name="floor" id="floor" type="number" class="form-control" placeholder="Indiquer « 0 » pour le Rez-de-chaussée"/>
  147. </p>
  148. <input type="submit" value="Envoyer" class="btn btn-primary btn-lg">
  149. </form>
  150. </section>
  151. <footer>
  152. <p>Vos données personnelles sont en lieu sûr.</p>
  153. </footer>
  154. </body>
  155. </html>