v1

index.php

@@ -8,26 +8,84 @@
         <li><a href="#contact">Contacts</a></li>
       </ul>
     </header>
-    <div class="body body-centered" style="background-image: url('img/ircknackiffond.png');">
+    <div class="body body-centered" style="background-image: url('img/gears-4188632.jpg');">
       <div class="container">
         <div>
-          <form class="joinform">
-            <img src="img/logo_irc2019_2.png" alt="IRC Knacki" class="logo" />
-            <label>Nom d'utilisateur<br/>
-              <input type="text"/>
+          <form class="joinform" method="GET" action="kiwi">
+            <img src="img/logo_irc2019.png" alt="IRC Knacki" class="logo" />
+            <h1>IRC Knacki</h1>
+          <!--  <label>Nom d'utilisateur<br/>
+              <input type="text" name=""/>
             </label>
-            <label>Mot de passe<br/>
+            <--<label>Mot de passe<br/>
               <input type="password"/>
-            </label>
+            </label>--
             <label>Salons<br/>
-              <input type="text" name="" />
-            </label>
+              <input type="text" name="" value="#Accueil" />
+            </label>-->
+            <button>Enter the knacki !</button>
           </form>
         </div>
       </div>
     </div>
     <div class="body">
       <div class="container">
+        <div class="block-2f5 block-1s1">
+<h3>Bienvenue sur IRC.Knacki</h3>
+<p>
+On est là pour tchatter ! Utilisez le formulaire pour vous connecter au tchat ;)
+</p><p>
+Nous n’avons pas de charte officielle ici, mais bien sûr, comme sur tout tchat : la politesse, le respect et le consentement sont de mises (pour plus d’information consultez <a target="_blank" href="https://fr.wikipedia.org/wiki/N%C3%A9tiquette">https://fr.wikipedia.org/wiki/N&eacute;tiquette</a>).
+</p><p>
+Des modérateurs sont présents sur le serveur, en cas de soucis avec un user, adressez-vous à eux.
+</p>
+<a name="chanlist" class="link-target"></a>
+<h3>Les salons officiels sont les suivants :</h3>
+<p>
+<ul class="chanlist"><li>#accueil</li>
+<li>#15-20ans</li>
+<li>#+20</li>
+<li>#+40</li>
+<li>#Quizz</li>
+<li>#Aide</li></ul>
+</p><p>
+Il est possible de créer vos propres salons en tapant la commande IRC suivante : <code>/join #nomdevotresalon</code>
+</p>
+<a name="register" class="link-target"></a>
+<h3>S’enregistrer sur irc.knacki</h3>
+<p>
+Vous avez la possibilité d’enregistrer votre pseudo pour ne pas vous le faire piquer.
+</p><p>
+Connectez vous sur irc.knacki.info
+Taper la commande suivante
+<code>/msg Nickserv REGISTER motdepasse votreemail</code>
+Exemple :
+<code>/msg Nickserv REGISTER Luigi Mariokart mario_et_luigi@gmail.com</code>
+Vous recevez un mail de confirmation vous indiquant que votre enregistrement est pris en compte
+</p><p>
+Lors de vos prochaines connexions, le serveur vous demandera de vous identifier pour prouver que vous être bien le propriétaire du pseudo. Vous devrez taper la commande suivante à chaque connexion :
+<code>/msg Nickserv IDENTIFY motdepasse</code>
+Exemple :
+<code>/msg Nickserv Identify Mariokart</code>
+</p>
+<a name="server" class="link-target"></a>
+<h3>Pour les noobs : IRC c’est quoi ?</h3>
+<p>
+C’est un protocole de communication informatique, « Internet Relay Chat » ou en français « discussions relayées par internet ». qui permet une communication instantanée par salons ou messages privés.
+N’hésitez pas a vous renseigner sur toutes les commandes IRC disponibles aux users.
+</p><p>
+Pour les habitués, vous pouvez aussi vous connecter via votre client habituel en utilisant les paramètres suivants :
+<ul class="serverconfig"><li><span class="legend">Adresse/serveur</span> : <span class="value">irc.knacki.info</span></li>
+<li><span class="legend">Port</span> : <span class="value">6667</span></li>
+<li><span class="legend">Port SSL</span> : <span class="value">6697</span></li>
+<li><span class="legend">Salon principal</span> : <span class="value">#accueil</span></li>
+<li><span class="legend">Salon d'aide</span> : <span class="value">#aide</span></li></ul>
+</p>
+<a name="contact" class="link-target"></a>
+<h3>Contactez-nous :</h3>
+<p>Misuto/isundil : <a href="mailto:irc.knacki@gmail.com">irc.knacki@gmail.com</a></p>
+<p>Cr&eacute;dit logo : <a href="https://fr.freepik.com" target="_blank">freepik</a> et misuto</p>
+        </div>
       </div>
     </div>
     <script src="script.js"></script>

style.css

@@ -1,17 +1,28 @@
-body { margin: 0; padding: 0; overflow-x: hidden; }
+body { margin: 0; padding: 0; overflow-x: hidden; font-family: "Roboto", sans-serif; }
+h1,h2,h3 { font-family: "Rubik Mono One", sans-serif; color: rgb(132, 132, 132); }
+h3 { margin-top: 2em; }
 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; }
+header li a { color: white; text-decoration: none; }
 .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; }
+.link-target { position: absolute; margin-top:-2.5em; padding-top: 2.5em; }
 .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%; }
+.body.body-centered > .container > * { width: 100%; max-width: 300px; margin: auto; text-align: center; }
+.joinform { background: rgba(0, 0, 0, 0.5); padding: 1em; border-radius: 20px; color: rgb(132, 132, 132); }
+.joinform .logo { margin: 0 auto; }
+.joinform h1 { margin-top: 0.5em; }
+.joinform button { margin-top: 1em; }
 .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; }
+.container { width: 100%; font-size: 0; }
+.container > div { display: inline-block; vertical-align: top; font-size: 1rem; padding: 1em; box-sizing: border-box; text-align: left; }
+a { text-decoration: none; color: rgb(132, 132, 132); }
+ul.chanlist { list-style: none; }
+ul.serverconfig { list-style: none; }
+code { margin: 0.75em 0; padding: 0 0.75em; display: block; }
+
 .block-1f1{ width: 100%; }
 .block-1f2 { width: 50%; }
 .block-1f3 { width: 33.333%; }

template/header.php

@@ -2,11 +2,11 @@
 <html>
   <head>
     <link href="style.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
     <title><?php echo $title; ?></title>
     <meta name="description" content="<?php echo $description;?>" />
     <meta name="keywords" content="<?php echo $keywords;?>" />
-    <script>
-      <?php if (!isset($_GET["PRERELEASE"])) echo 'document.location.href="/kiwi/";'; ?>
-    </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body><?php } ?>