first

3 years ago · 461070ab2a
commit 461070ab2a
3 changed files with 149 additions and 0 deletions
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,103 @@
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
        <div id="documentation">
            <h1>Hey, this is the documentation</h1>
            <p>Go to the console of the browser.
            <br>Usually is under "tools" in the menu of the browser.
            <br>In mac environment, on firefox is command+option+K, on chromium is command+option+J</p>
            <br>
            <p>When your console is open, <button onclick="openFullscreen()" id="fs">click here</button></p>
            <br>
            <p>Now, you can write functions to reveal the website.
            <br>Then type <b>start()</b></p>
        </div>
        <div id="zeroHtml">
            <p>It wasn't that I wasn't really covinced</p>
        </div>
        <div id="oneHtml">
            <p>Ciaooooo osfjvsjdvbdijfbvoed wepivodfj oefhvoefj beofjb eofub ojf oejb e</p>
            <p>Ciaooooo osfjvsjdvbdijfbvoed wepivodfj oefhvoefj beofjb eofub ojf oejb e</p>
            <p>Ciaooooo osfjvsjdvbdijfbvoed wepivodfj oefhvoefj beofjb eofub ojf oejb e</p>
            <p>Ciaooooo osfjvsjdvbdijfbvoed wepivodfj oefhvoefj beofjb eofub ojf oejb e</p>
            <p>Ciaooooo osfjvsjdvbdijfbvoed wepivodfj oefhvoefj beofjb eofub ojf oejb e</p>
        </div>
        <div id="twoHtml"></div>
        <script>
            var documentation = document.getElementById("documentation")
            var fullscreen = document.getElementById("fs")
            var zeroHtml = document.getElementById("zeroHtml")
            var oneHtml = document.getElementById("oneHtml")
            var twoHtml = document.getElementById("twoHtml")
            var elem = document.documentElement
            function openFullscreen() {
                elem.requestFullscreen();
            }
            function start() {
                console.log("Hello there!")
                console.log("Welcome :) From now on, you will follow the instrunctions given in the console.")
                console.log("Spell n.1 : digit          caino()")
            }
            function caino() {
                fullscreen.style.display="none"
                documentation.style.color = "transparent"
                document.body.style.backgroundColor = "black"
                console.log("First level: empty")
                setTimeout(zero, 2000);
                function zero() {
                    zeroHtml.style.display ="block";
                    setTimeout(zero1, 2000);
                    function zero1() {
                        console.log("Blablabla, suddle... blabla...")
                        console.log("Digit          oso()")
                    }
                }
            }
            function oso(){
                oneHtml.style.display ="block";
                console.log("emano()            !")
            }
            function emano(){
                twoHtml.style.display="block"
                twoHtml.style.backgroundColor = "rgba(255,0,0,0.5)"
                setTimeout(emano1, 2000);
                function emano1() {
                    console.log("EHEHEHHEHEHEHH... blabla...")
                    console.log("-->          perlante()")
                }
            }
            function perlante() {
            }
        </script>
    </body>
 </html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,46 @@
 :root {
    --color : "white"
 }
 html,body{margin: 0;padding: 0; font-family: Arial, Helvetica, sans-serif;}
 body {
    color: var(--color);
 }
 #documentation{
    width: 60%;
    margin-left: 20%;
    margin-top: 5%;
    border: dashed;
    padding: 3%;
    height: 60%;
    border-radius: 20%;
 }
 #zeroHtml {
    display: none;
    color: red;
    width: 100vw;
    text-align: center;
 }
 #oneHtml {
    display: none;
    color: salmon;
    filter: drop-shadow(0 0 0.75rem crimson);
    position: absolute;
    top: 0;
    left: 15%;
    line-height: 7px;
  }
  #twoHtml{
      display: none;
      position: absolute;
      top: 0;
      width: 100vw;
      height: 100vh;
      border: solid;
  }