Browse Source

Modif konami et ajout btn

Loquicom 6 months ago
parent
commit
2b3e9c7989
2 changed files with 68 additions and 20 deletions
  1. 32 1
      css/style.css
  2. 36 19
      index.php

+ 32 - 1
css/style.css

@@ -24,6 +24,28 @@
     display: none;
 }
 
+/* --- Zone --- */
+
+#header {
+    height: 12vh;
+}
+
+#home {
+    height: 88vh;
+    position: relative;
+}
+
+/* --- Download --- */
+
+#download {
+    margin-bottom: 1em;
+    text-align: center;
+}
+
+#download span {
+    width: 60%;
+}
+
 /* --- CMD --- */
 
 input.cmd-in {
@@ -94,7 +116,6 @@ input.cmd-in {
 .window-toolbar-left {
     float: left;
     width: 10%;
-    font-size: .7em;
 }
 
 .window-toolbar-center {
@@ -126,6 +147,7 @@ input.cmd-in {
     z-index: 9999;
     background: #FDD800;
     color: black;
+    border-color: black;
     font-weight: bold;
     border-radius: 80em;
     height: 2.5em;
@@ -133,6 +155,15 @@ input.cmd-in {
     padding: 0.5em;
 }
 
+#konami-helper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    font-size: 2em;
+    opacity: .2;
+}
+
 /* --- Pico 8 --- */
 
 #pico {

+ 36 - 19
index.php

@@ -10,36 +10,50 @@
     <link rel="stylesheet" type="text/css" href="css/cmd.min.css">
 
     <script src="js/jquery.min.js"></script>
+    <script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
 </head>
 <body>
 
     <?= file_get_contents('src/splash.html') ?>
-    <h1>Hello</h1>
 
-    <div class="container">
-    <div class="window">
-        <span id="close-fs" role="button" class="hide" onclick="fullscreen()">X</span>
-        <div class="window-toolbar">
-            <div class="window-toolbar-left">
-                <span id="konami-helper">&uarr;&uarr;&darr;&darr;&larr;&rarr;&larr;&rarr;BA</span>
+    <div id="header">
+        <h1>Hello</h1>
+    </div>
+    
+
+    <div id="home" class="container">
+        <div id="download" class="grid">
+            <div><span role="button" data-tooltip="Télécharger les CV en PDF"><span class="iconify" data-icon="mdi-file-pdf-box"></span></span></div>
+            <div><span role="button" data-tooltip="Formulaire de contact"><span class="iconify" data-icon="mdi-contact"></span></span></div>
+            <div><span role="button" data-tooltip="Télécharger les CV en CMD"><span class="iconify" data-icon="mdi-console"></span></span></div>
+        </div>
+        <div class="window">
+            <span id="close-fs" role="button" class="hide" onclick="fullscreen()">X</span>
+            <div class="window-toolbar">
+                <div class="window-toolbar-left">
+                    <span class="iconify" data-icon="mdi-console-line"></span>
+                </div>
+                <div class="window-toolbar-center">
+                    Loquicom terminal
+                </div>
+                <div class="window-toolbar-right">
+                    <span class="window-dot" onclick="show()" style="background:#5AC05A;"></span>
+                    <span class="window-dot" onclick="fullscreen()" style="background:#FDD800;"></span>
+                    <span class="window-dot" onclick="remove()" style="background:#ED594A;"></span>
+                </div>
             </div>
-            <div class="window-toolbar-center">
-                Loquicom terminal
+            <div id="cmd">
             </div>
-            <div class="window-toolbar-right">
-                <span class="window-dot" onclick="show()" style="background:#5AC05A;"></span>
-                  <span class="window-dot" onclick="fullscreen()" style="background:#FDD800;"></span>
-                  <span class="window-dot" onclick="remove()" style="background:#ED594A;"></span>
+            <div id="pico" class="none">
+                <iframe src="./src/pico8.html" title="Pico 8 game"></iframe>
             </div>
         </div>
-        <div id="cmd">
-        </div>
-        <div id="pico" class="none">
-            <iframe src="./src/pico8.html" title="Pico 8 game"></iframe>
-        </div>
-    </div>
+        <div id="konami-helper" class="hide"><span class="iconify" data-icon="mdi-reload"></span>&nbsp;+&nbsp;&uarr;&uarr;&darr;&darr;&larr;&rarr;&larr;&rarr;BA</div>
     </div>
     
+    <div>
+        Coucou
+    </div>
     
 
     <script src="js/cmd.js"></script>
@@ -79,6 +93,9 @@
 
         function remove() {
             $('#' + windowMode).css('height', '0');
+            setTimeout(() => {
+                $('#konami-helper').removeClass('hide');
+            }, 74);
             setTimeout(() => {
                 $('.window').remove();
             }, 148);