From 14616623a10787bb6611840d5fda176a4e9a3991 Mon Sep 17 00:00:00 2001
From: Chris Wilson <chris@legendserver.info>
Date: Tue, 1 Dec 2020 17:59:09 -0500
Subject: [PATCH] Add some kick-ass animations to the landing page

---
 WebHostLib/static/styles/landing.css | 124 ++++++++++++++++++++++++++-
 WebHostLib/templates/landing.html    |   8 +-
 2 files changed, 128 insertions(+), 4 deletions(-)

diff --git a/WebHostLib/static/styles/landing.css b/WebHostLib/static/styles/landing.css
index 94a578ba..e1045544 100644
--- a/WebHostLib/static/styles/landing.css
+++ b/WebHostLib/static/styles/landing.css
@@ -17,6 +17,7 @@
     font-size: 3.5rem;
     text-shadow: 1px 1px 7px #000000;
     -webkit-text-stroke: 1px #00582e;
+    z-index: 10;
 }
 
 #landing-header h4{
@@ -25,6 +26,7 @@
     margin-bottom: 0;
     text-shadow: 1px 1px 7px #000000;
     font-kerning: none;
+    z-index: 10;
 }
 
 #landing-buttons{
@@ -33,10 +35,128 @@
     height: 50px;
 }
 
+#landing-clouds{
+    z-index: 5;
+}
+
+#landing-clouds #cloud1{
+    position: absolute;
+    left: 10px;
+    top: 65px;
+    width: 400px;
+    height: 350px
+}
+
+#landing-clouds #cloud2{
+    position: absolute;
+    right: 82px;
+    top: 167px;
+    width: 300px;
+    height: 300px;
+}
+
+#landing-clouds #cloud3{
+    position: absolute;
+    right: 24px;
+    top: 500px;
+    width: 200px;
+    height: 325px;
+}
+
 #landing{
-    width: 860px;
-    min-height: 320px;
+    width: 660px;
+    min-height: 360px;
     margin-left: auto;
     margin-right: auto;
 }
 
+@media all and (max-width: 1550px){
+    #cloud1{
+        animation-name: c1-glide-out;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        left: -400px;
+    }
+
+    #cloud2{
+        animation-name: c2-glide-out;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        right: -300px;
+    }
+
+    #cloud3{
+        animation-name: c3-glide-out;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        right: -200px;
+    }
+
+    @keyframes c1-glide-out{
+        from{ left: 10px; }
+        to{
+            left: -400px;
+            display: none;
+        }
+    }
+
+    @keyframes c2-glide-out{
+        from{ right: 82px; }
+        to{
+            right: -300px;
+            display: none;
+        }
+    }
+
+    @keyframes c3-glide-out{
+        from{ right: 24px; }
+        to{
+            right: -200px;
+            display: none;
+        }
+    }
+}
+
+@media all and (min-width: 1550px){
+    #cloud1{
+        animation-name: c1-glide-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+    }
+
+    #cloud2{
+        animation-name: c2-glide-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+    }
+
+    #cloud3{
+        animation-name: c3-glide-in;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+    }
+
+    @keyframes c1-glide-in{
+        from{ left: -400px; }
+        to{
+            left: 10px;
+            display: none;
+        }
+    }
+
+    @keyframes c2-glide-in{
+        from{ right: -300px; }
+        to{
+            right: 82px;
+            display: none;
+        }
+    }
+
+    @keyframes c3-glide-in{
+        from{ right: -200px; }
+        to{
+            right: 24px;
+            display: none;
+        }
+    }
+}
diff --git a/WebHostLib/templates/landing.html b/WebHostLib/templates/landing.html
index 0312a73c..ce7690d8 100644
--- a/WebHostLib/templates/landing.html
+++ b/WebHostLib/templates/landing.html
@@ -14,6 +14,11 @@
         <div id="landing-buttons">
             Buttons here, eventually!
         </div>
+        <div id="landing-clouds">
+            <img id="cloud1" src="/static/static/backgrounds/clouds/cloud-0001.png"/>
+            <img id="cloud2" src="/static/static/backgrounds/clouds/cloud-0002.png"/>
+            <img id="cloud3" src="/static/static/backgrounds/clouds/cloud-0003.png"/>
+        </div>
         <div id="landing" class="grass-island">
             <div id="landing-body">
                 <p>This is a <span data-tooltip="Allegedly.">randomizer</span> for The Legend of Zelda: A
@@ -22,8 +27,7 @@
                     players' worlds, and their items may be placed into yours. When a player picks up an item which
                     does not belong to them, it is sent back to the player it belongs to over the internet.</p>
                 <p>This website allows you to generate and host a multiworld game, and provides item and location
-                    trackers for all games hosted here. To learn how to get started playing,
-                    <a href="/tutorial">click here.</a></p>
+                    trackers for all games hosted here. To get started playing, <a href="/tutorial">click here.</a></p>
                 <p>This website is under active development. If you find a bug, please report it
                     <a href="https://github.com/Berserker66/MultiWorld-Utilities/issues">here.</a></p>
                 <p>{{ seeds }} games were created and {{ rooms }} hosted in the last 7 days.</p>