start.php 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--Import Google Icon Font-->
  5. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  6. <!--Import materialize.css-->
  7. <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
  8. <!--Let browser know website is optimized for mobile-->
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  10. <title>JdR</title>
  11. </head>
  12. <body class="grey lighten-4">
  13. <style type="text/css">
  14. .center{
  15. text-align: center;
  16. }
  17. .v-center {
  18. margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  19. transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
  20. }
  21. </style>
  22. <main class="container">
  23. <div class="v-center">
  24. <form method="POST" action="./">
  25. <div class="row center">
  26. <div class="col s12">
  27. <h3>Nom du salon</h3>
  28. <input type="text" name="salon" autocomplete="off">
  29. <button type="submit" class="waves-effect waves-light btn">Rejoindre</button>
  30. </div>
  31. </div>
  32. </form>
  33. </div>
  34. </main>
  35. <div id="float_msg" class="float_message" style="display: none;"></div>
  36. <!--JavaScript at end of body for optimized loading-->
  37. <script type="text/javascript" src="js/materialize.min.js"></script>
  38. <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  39. </body>
  40. </html>