initial commit

docweirdo · Dec 21, 2019 · 2021bf6 · 2021bf6
commit 2021bf6
Show file tree

Hide file tree

Showing 7 changed files with 282 additions and 0 deletions.
diff --git a/download.png b/download.png
diff --git a/img/download.png b/img/download.png
diff --git a/img/peepo.png b/img/peepo.png
diff --git a/img/peepo2.png b/img/peepo2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="icon" href="img/peepo2.png">
+    <title>Happy Peepo</title>
+</head>
+<body>
+    <main>
+        <iframe class="pillars" width="1244" height="700" src="https://www.youtube.com/embed/CewTYloQSt0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe class="deadbolt" width="1244" height="700" src="https://www.youtube.com/embed/WX2HGR1owiQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe class="papers" width="1244" height="700" src="https://www.youtube.com/embed/_QP5X6fcukM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <img class="peepoSpot" id="peepo" alt="happy peepo sticker" src="img/peepo2.png">
+    </main>
+    <nav>
+        <ul class="menu">
+            <li><button value="Floris">Floris</button></li>
+            <li><button value="Melcher">Melcher</button></li>
+            <li><button value="Pablo">Pablo</button></li>
+        </ul>
+    </nav>
+    <article>
+        <h2>Hallo Süßies,<br></h2>
+        <p>dieses kleine Projekt verbindet meine Webskills mit Weihnachtsgeschenken. 
+            Für jeden von euch habe ich ein kleines Spiel aus meiner Sammlung DRM-freier Kopien herausgesucht,
+             von dem ich denke, dass es euch gefällt. Dabei sind das natürlich alles auch Spiele, die mir gefallen,
+              es ist also eine Art kuriertes Geschenk.<br>Frohe Weihnachten!
+        </p>
+        <a><img src="download.png"></a>
+    </article>
+    <footer>
+        <p>Hosted on Raspberry Pi</p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,73 @@
+let finished = true;
+let target = null;
+let downloadLink = document.querySelector("article a");
+
+function scroll(e){
+    if (!finished) {
+        target.focus();
+        return;
+    }
+
+    finished = false;
+    let video = document.querySelector('iframe.pillars');
+    let peepoSpot = document.querySelector('.peepoSpot');
+    let progress = 0;
+    let peepoProgress = 0;
+    let id = setInterval(scrollDown, 20);
+    target = e.target;
+
+    if (target.value.includes("Pablo")){
+        video = document.querySelector('iframe.deadbolt');
+        downloadLink.href = "files/deadbolt.exe";
+        downloadLink.children[0].style.display = "block";
+    }
+    else if (target.value.includes("Melcher")){ 
+        video = document.querySelector('iframe.papers');
+        downloadLink.href = "files/papersplease.msi";
+        downloadLink.children[0].style.display = "block";
+    }
+    else{
+        downloadLink.href = "files/pillars.tar.gz";
+        downloadLink.children[0].style.display = "block";
+    }
+
+    console.log(downloadLink.children[0].style);
+
+    if (video == peepoSpot){
+        video = document.querySelector('#peepo');
+        downloadLink.children[0].style.display = "none";
+    }
+
+    video.style.display = 'inline-block';
+
+    function scrollDown(){
+
+        if (peepoSpot.style.bottom === '-100%'){
+            peepoSpot.classList.remove("peepoSpot");
+            video.classList.add("peepoSpot");
+            finished = true;
+            clearInterval(id);
+        }else if (peepoSpot.style.bottom === '-32%' && progress <100 && peepoSpot.id === "peepo"){
+            video.style.bottom = (100-progress) + '%';
+            progress +=2;
+        }else if(progress>100){
+            peepoSpot.style.bottom = -peepoProgress + '%';
+            peepoProgress +=2;
+        }
+        else{
+            video.style.bottom = (100-progress) + '%';
+            peepoSpot.style.bottom = -peepoProgress + '%';
+            progress +=2;
+            peepoProgress +=2;
+        }
+    }
+}
+
+
+const button = document.querySelectorAll('.menu li button');
+
+button.forEach((b)=> {
+    b.addEventListener('click', scroll);
+});
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,171 @@
+body, ul, li, h1, h2, a, p{
+    margin: 0;
+    padding: 0;
+    font-family: Arial;
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+body{
+    background-color: #F0f0f0;
+    min-height: 100%;
+    position: relative;
+}
+
+main{
+    position: relative;
+    height: 50%;
+    background-color: #333333;
+    box-shadow: 0px 10px 10px #777777;
+    overflow: hidden;
+}
+
+iframe {
+    display: none;
+    height: 100%;
+    max-width: 100%;
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    bottom: +100%;
+}
+
+#peepo{
+    width: auto;
+    height: 70%;
+    max-width: 100%;
+    display: inline-block;
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    bottom: 0%;
+}
+
+img:hover{
+    transform: scale(1.1);
+    bottom: 3%;
+}
+
+
+nav{
+    margin-top: 20px;
+    padding: 10px;
+    text-align: center;
+}
+
+.menu{
+    white-space: nowrap;
+    max-width: 500px;
+    margin: 0 auto;
+
+}
+
+.menu li{
+    width: 33%;
+    display: inline-block;
+}
+
+.menu li button{
+    font-size: 1em;
+    background-color: white;
+    border-radius: 25px;
+    padding: 1px 8px;
+    font-family: Georgia;
+    font-weight: bold;
+    cursor: default;
+    box-shadow: 2px 2px lightgray;
+    text-decoration: none;
+    color: #feb614;
+    border: 5px solid transparent;
+    outline: none;
+    display: inline;
+}
+
+.menu li button:hover{
+    border-radius: 25px;
+    border: 5px outset grey;
+}
+
+.menu li button:focus{
+    border-radius: 25px;
+    border: 5px outset #fe2020;
+}
+
+article{
+    max-width: 500px;
+    padding: 25px 5%;
+    margin: 0 auto;
+    padding-bottom: 50px;
+}
+
+article h2{
+    margin-bottom: 3px;
+}
+
+article p{
+    columns: 2;
+    column-gap: 2em;
+    line-height: 1.5em;
+}
+
+article a{
+    padding: 10px;
+}
+
+article img{
+    height: 3%;
+    width: auto;
+    display: none;
+    position: relative;
+    margin: 0 auto;
+}
+
+footer{
+    background-color: #fe2020;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    box-sizing: border-box;
+}   
+
+footer p{
+    color: white;
+    font-size: 1.2em;  
+
+}
+
+@media only screen and (max-width: 1100px) {
+    .menu li{
+        font-size: 1.3em;
+    }
+
+    .menu li button{
+        font-size: 0.8em;
+    }
+
+    article h2{
+        font-size: 1.3em;
+    }
+
+    article p{
+        font-size: 1em;
+    }
+
+    article{
+        padding-bottom: 40px;
+    }
+
+    footer p{
+        font-size: 1em;
+    }
+
+    footer{
+        padding: 5px;
+    };
+
+
+}