login form, header menu

index.php

@@ -1,11 +1,34 @@
 <?php require("./inc/stats.php"); ?>
-<?php require("./template/header.php"); generateHeader("Knacki IRC", "", "IRC,tchat,chat,tchate,rencontres,amitiés,messagerie,discussions,tchatche"); ?>
+<?php require("./template/header.php"); generateHeader("IRC Knacki - Tchat en ligne", "Tchat en ligne gratuit et sans inscription", "IRC,tchat,chat,tchate,rencontres,amitiés,messagerie,discussions,tchatche,gamer,gaming,discussion en ligne,salon de tchat"); ?>
+    <header>
+      <ul>
+        <li><a href="#chanlist">Salons</a></li>
+        <li><a href="#register">S'enregistrer</a></li>
+        <li><a href="#server">Serveur IRC</a></li>
+        <li><a href="#contact">Contacts</a></li>
+      </ul>
+    </header>
+    <div class="body body-centered" style="background-image: url('img/ircknackiffond.png');">
       <div class="container">
-        <div class="block-1f2 block-1s1">
-          <a href="kiwi">Kiwi service</a>
-        </div>
-        <div class="block-1f2 block-1s1">
-  <?php printNbUserPerChannelAsTable(); ?>
+        <div>
+          <form class="joinform">
+            <img src="img/logo_irc2019_2.png" alt="IRC Knacki" class="logo" />
+            <label>Nom d'utilisateur<br/>
+              <input type="text"/>
+            </label>
+            <label>Mot de passe<br/>
+              <input type="password"/>
+            </label>
+            <label>Salons<br/>
+              <input type="text" name="" />
+            </label>
+          </form>
         </div>
       </div>
+    </div>
+    <div class="body">
+      <div class="container">
+      </div>
+    </div>
+    <script src="script.js"></script>
 <?php require("./template/footer.php"); ?>

script.js

@@ -0,0 +1,15 @@
+
+var headerBackground = true;
+
+window.addEventListener("scroll", function() {
+    if (window.scrollY > window.innerHeight * 0.27) {
+        if (headerBackground)
+            document.querySelector("header").style.background = "black";
+        headerBackground = false;
+    } else {
+        if (!headerBackground)
+            document.querySelector("header").style.background = "";
+        headerBackground = true;
+    }
+});
+

style.css

@@ -1,5 +1,15 @@
-body { margin: 0; padding: 0; }
-.body { margin: 0 auto; padding: 0; width: 75% }
+body { margin: 0; padding: 0; overflow-x: hidden; }
+header { position: fixed; text-align: center; top: 0; left: 0; right: 0; transition: background .5s; }
+header ul { display: flex; margin: 0 auto; padding: .75em 0; list-style-type: none; max-width: 600px; }
+header li { flex: 1; display: inline-block; }
+header li a { color: white; }
+.body { display: inline-flex; margin: 0 auto; padding: 0 12%; width: 100vw; min-height: 100vh; box-sizing: border-box; background-repeat: no-repeat; background-position: center 82%; background-size: cover; }
+.body { text-align: center; justify-content: center; }
+.body.body-centered > .container { display: flex; text-align: center; align-items: center; width: 100%; }
+.body.body-centered > .container > * { width: 100%; max-width: 250px; margin: auto; }
+.joinform .logo { margin: 0 auto 2em auto; max-width: 50%; }
+.joinform label { display: block; margin-bottom: 1em; text-align: left; }
+.joinform * { width: 100%; }
 .container { font-size: 0; }
 .container > div { display: inline-block; vertical-align: top; font-size: 1rem; padding: 1em; box-sizing: border-box; }
 .block-1f1{ width: 100%; }
@@ -14,6 +24,7 @@ body { margin: 0; padding: 0; }
 .block-4f5 { width: 80%; }
 .block-1f6 { width: 16.666%; }
 .block-5f6 { width: 83.333%; }
+.block-0f { display: none !important; }
 
 @media screen and (max-width: 720px) {
   .body { margin: 0; padding: 0; }
@@ -29,5 +40,6 @@ body { margin: 0; padding: 0; }
   .block-4s5 { width: 80%; }
   .block-1s6 { width: 16.666%; }
   .block-5s6 { width: 83.333%; }
+  .block-0s { display: none !important; }
 }
 

template/footer.php

@@ -1,4 +1,3 @@
-    </div>
     <footer>
     </footer>
   </body>

template/header.php

@@ -9,7 +9,4 @@
       <?php if (!isset($_GET["PRERELEASE"])) echo 'document.location.href="/kiwi/";'; ?>
     </script>
   </head>
-  <body>
-    <header>
-    </header>
-    <div class="body"><?php } ?>
+  <body><?php } ?>