- new commit

app/assets/css/index.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 @import url("https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css");
 
 * {
@@ -60,6 +60,7 @@ button.nav {
     width: 100%;
     height: 40px;
     border: none;
+    cursor: pointer;
     font-size: large;
     text-align: left;
     padding: 13px 13px 13px 13px;
@@ -84,6 +85,16 @@ button.nav > span {
     color: #ffffff;
 }
 
+img.logo {
+    width: 60%;
+}
+
+img.mascot {
+    width: 50%;
+    float: right;
+    margin-top: calc(300px - (50% + 12px));
+}
+
 fieldset {
     font-size: small;
     border: none;
@@ -99,12 +110,132 @@ input[type=radio] {
 }
 
 button.classic {
+    color: #ffffff;
     width: 96%;
     height: 30px;
+    border: none;
+    cursor: pointer;
+    outline: none;
     margin-left: 2%;
     margin-top: 5px;
-    border: none;
-    color: #ffffff;
+    transition: .3s;
     border-radius: 5px;
     background-color: #39aa6d;
+}
+
+button.classic:hover {
+    background-color: #359e66;
+}
+
+button.close {
+    float: right;
+    color: #ffffff;
+    width: 30px;
+    height: 30px;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    transition: .5s;
+    margin-top: 15px;
+    margin-right: 15px;
+    border-radius: 5px;
+    background-color: #0000001c;
+}
+
+button.close:hover {
+    background-color: #4e4e4e25;
+}
+
+button.play {
+    background-color: #39AA6D;
+    color: #FFFFFF;
+    border: none;
+    width: 300px;
+    height: 65px;
+    font-size: 28px;
+    font-weight: normal;
+    cursor: pointer;
+    margin: auto;
+    outline: none;
+    border-radius: 30px 15px 30px 15px;
+    transition: background-color 0.3s;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+button.play:hover {
+    background-color: #2E8B57;
+}
+
+button.default {
+    width: 40px;
+    color: #ffffff;
+    height: 40px;
+    cursor: pointer;
+    border: 0px;
+    outline: none;
+    font-size: 16px;
+    transition: .3s all;
+    border-radius: 10px;
+    background-color: #00000036;
+}
+
+button.default:hover {
+    background-color: #00000060;
+}
+
+p.players {
+    width: 185px;
+    padding: 3px 3px 3px 3px;
+    font-size: larger;
+    font-style: italic;
+    background: #f0f0f033;
+    font-weight: bolder;
+    border-radius: 15px;
+    text-align: center;
+    font-family: "Raleway", sans-serif;
+    margin-top: calc(300px - 40px);
+}
+
+p.players > span {
+    width: 100%;
+}
+
+p.players > span > span {
+    font-family: "Roboto", sans-serif;
+    text-align: center;
+}
+
+main > footer {
+    position: absolute;
+    display: flex;
+    flex-wrap: wrap;
+    left: 60px;
+    right: 60px;
+    bottom: 70px;
+    height: 300px;
+}
+
+main > footer > section.left {
+    width: 20%;
+    height: 100%;
+}
+
+main > footer > section.left > button.default {
+    margin-top: calc(300px - (40px + 12px));
+}
+
+main > footer > section.center {
+    width: 60%;
+    height: 100%;
+    text-align: center;
+}
+
+main > footer > section.right {
+    width: 20%;
+    height: 100%;
+}
+
+[hidden] {
+    display: none;
+    visibility: hidden;
 }

app/assets/js/index.js

@@ -0,0 +1,35 @@
+const navBar = document.querySelector("nav")
+const uiButton = document.querySelector("footer>section.left")
+const audio = new Audio()
+
+function startAudio() {
+    audio.src = "/app/assets/audio/Golden Hill (Radio Edit).mp3"
+    audio.loop = true
+    audio.onended = () => {
+        if (!audio.paused) {
+            audio.play()
+        }
+    }
+}
+
+function muteAudio() {
+    audio.muted = true
+}
+
+function unmuteAudio() {
+    audio.muted = false
+}
+
+function showNavBar() {
+    navBar.removeAttribute("hidden")
+    for (const button of uiButton.children) {
+        button.setAttribute("hidden", "")
+    }
+}
+
+function hideNavBar() {
+    navBar.setAttribute("hidden", "")
+    for (const button of uiButton.children) {
+        button.removeAttribute("hidden")
+    }
+}

app/assets/js/inex.js

@@ -1,19 +0,0 @@
-const audio = new Audio()
-
-function startAudio() {
-    audio.src = "/app/assets/audio/Golden Hill (Radio Edit).mp3"
-    audio.loop = true
-    audio.onended = () => {
-        if (!audio.paused) {
-            audio.play()
-        }
-    }
-}
-
-function muteAudio() {
-    audio.muted = true
-}
-
-function unmuteAudio() {
-    audio.muted = false
-}

app/logged.html

@@ -4,13 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./assets/css/index.css">
-    <title>Document</title>
+    <title>NyanLauncher</title>
 </head>
 <body>
-    
     <main>
-        <nav>
-            <img src="./assets/img/logo_no_blanc.png" alt="">
+        <button class="close" onclick="sys.call('window::close')">
+            <i class="fas fa-times"></i>
+        </button>
+        <nav hidden>
+            <button class="close" onclick="hideNavBar()">
+                <i class="fas fa-times"></i>
+            </button>
+            <br>
+            <img src="./assets/img/logo.png" alt="">
             <details>
                 <summary>
                     <button class="nav" onclick="this.parentNode.click()">
@@ -113,9 +119,37 @@
                 </span>
             </button>
         </nav>
+        <footer>
+            <section class="left">
+                <button class="default" onclick="showNavBar()">
+                    <i class="fas fa-cog"></i>
+                </button>
+                <button class="default">
+                    <i class="far fa-music"></i>
+                </button>
+            </section>
+            <section class="center">
+                <img class="logo" src="./assets/img/logo.png" alt="">
+                <br>
+                <button class="play">
+                    Jouer
+                </button>
+            </section>
+            <section class="right">
+                <img class="mascot" src="./assets/img/alcaz_mascote.png" alt="">
+                <p class="players">
+                    <span>
+                        Joueurs : 
+                        <span>
+                            0/0
+                        </span>
+                    </span>
+                </p>
+            </section>
+        </footer>
     </main>
 
-    <script src="./assets/js/inex.js"></script>
+    <script src="./assets/js/index.js"></script>
 
 </body>
 </html>