more flagle additions

2022-12-20 18:21:34 +02:00 · 2022-12-20 18:21:34 +02:00 · 9e78878acc
parent 51478d74c7
commit 9e78878acc
11 changed files with 190 additions and 51 deletions
--- a/Website/Images/Screenshots/MinecraftBedwarsLobby.png
+++ b/Website/Images/Screenshots/MinecraftBedwarsLobby.png
--- a/Website/Images/worldmap.png
+++ b/Website/Images/worldmap.png
--- a/Website/Scripts/flagle.js
+++ b/Website/Scripts/flagle.js
@ -0,0 +1,24 @@
+
+async function getFlag() {
+    const getFlag = await fetch('https://flagcdn.com/en/codes.json')
+
+
+    const flag = await getFlag.json();
+
+
+    var inputField = document.getElementById("guessInput").value.toLowerCase();
+    document.getElementsByClassName("gamedle-section").innerHTML = guessInput;
+
+
+
+    if (inputField != flag.us.toLowerCase()) {
+        document.getElementById("guessInput").value=null;
+        window.alert("Wrong country!");
+    }
+
+
+    else {
+        document.getElementById("guessInput").value=null;
+        window.alert("Correct!")
+    }
+}
--- a/Website/Scripts/scroll.js
+++ b/Website/Scripts/scroll.js
@ -0,0 +1,3 @@
+function scrollDown(positionX, positionY) {
+    window.scrollTo(positionX, positionY);
+}
--- a/Website/about.html
+++ b/Website/about.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>About - E-Cafe</title>
+    <title>About | E-Cafe</title>
    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
--- a/Website/flagle.html
+++ b/Website/flagle.html
@ -1,45 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Flagle - E-Cafe</title>
+    <title>Flagle | E-Cafe</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="gamedlestyles.css">
-    <script src="getflag.js">  
-    </script> 
+    <script src="Scripts/flagle.js">  
+    </script>
 </head>

 <body>
    <header>
        <nav>
            <ul class="desktop">
-                <li><a href="index.html">Home</a></li>
-                <li><a href="games.html">Games</a></li>
-                <li class="logo"><a href="index.html"></a></li>
-                <li><a href="links.html">Links</a></li>
-                <li><a href="about.html">About</a></li>
+                <li><a href="games.html">More Games</a></li>
+                <li><a href="index.html">E-Cafe</a></li>
            </ul>
            <ul class="mobile">
-                <li><a href="index.html">Home</a></li>
-                <li><a href="games.html">Games</a></li>
-                <li><a href="links.html">Links</a></li>
-                <li><a href="about.html">About</a></li>
+                <li><a href="games.html">More Games</a></li>
+                <li><a href="index.html">E-Cafe</a></li>
            </ul>
        </nav>
    </header>
    <h1 class="title">
        Flagle
+        <div id="underline">
+        </div>
    </h1>
-    <div class="gamedle-section">
-        1
-    </div>
-    <div class="gamedle-section">
-        2
-    </div>
+    <section class="description">
+        <figure id="flag">
+            <img src="https://flagcdn.com/us.svg" alt="Flag of a random country">
+        </figure>
+        <!--Guess 1-->
+        <div class="gamedle-section">
+        </div>
+        <!--Guess 2-->
+        <div class="gamedle-section">
+        </div>
+        <!--Guess 3-->
+        <div class="gamedle-section">
+        </div>
+        <!--Guess 4-->
+        <div class="gamedle-section">
+        </div>
+        <!--Guess 5-->
+        <div class="gamedle-section">
+        </div>
+    </section>

-    <button>Guess</button>
-    <footer>
-        <a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
-    </footer>
+    <button type="button" onclick="getFlag()">Guess</button>
+    <input id="guessInput" type="text">
 </body>

 </html>
--- a/Website/gamedlestyles.css
+++ b/Website/gamedlestyles.css
@ -1,24 +1,83 @@
-section.gamedle-section {
-    background: rgb(42, 42, 42);
-    color: white;
-    margin: 2%;
-    display: flex;
-    flex-direction: row;
+body {
+    background-color: rgb(23, 27, 46);
+    background-image: none;
 }

-section.gamedle-section div {
-    background: rgba(42, 42, 42, 0.75);
-    color: white;
-    margin: 1%;
-    display: inline-block;
-    width: 10%;
+#underline {
+    height: 3px;
+    background-color: white;
+    transform: scale(0.1, 1);
+    margin-top: 2px;
 }

-div.gamedle-section {
-    background: rgba(42, 42, 42, 0.75);
+
+.gamedle-section {
+    background: rgba(66, 62, 62, 0.5);
    color: white;
-    margin: 1%;
-    display: flex;
-    height: 5%;
+    margin: 50px;
+    margin-left: 200px;
+    margin-right: 200px;
+    height: 50px;
    font-size: 40px;
+    text-align: center;
+    text-transform: uppercase;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: gray 0 0 4px;
+}
+
+#flag img {
+    width: 300px;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: gray 0 0 7px;
+}
+
+#flag {
+    color: white;
+    padding: 2%;
+    display: inline-block;
+    text-align: center;
+}
+
+input {
+    margin: 80px;
+    width: 500px;
+    height: 40px;
+    background-color: rgb(42, 42, 42);
+    color: white;
+    text-transform: uppercase;
+    border-radius: 10px;
+    box-shadow: gray 0 0 7px;
+}
+
+button {
+    margin: 5%;
+    background: rgb(66, 62, 62);
+    transform: scale(2, 2);
+}
+
+button:hover {
+    background-color: rgb(90, 83, 83);
+}
+
+@media screen and (max-width: 715px) {
+    #flag {
+        transform: scale(0.8, 0.8);
+    }
+
+    .gamedle-section {
+        margin-left: 70px;
+        margin-right: 70px;
+    }
+
+    input {
+        width: 200px;
+    }
+
+    #underline {
+        transform: scale(0.3, 1);
+    }
 }
--- a/Website/games.html
+++ b/Website/games.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Games - E-Cafe</title>
+    <title>Games | E-Cafe</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        button {
--- a/Website/index.html
+++ b/Website/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Home - E-Cafe</title>
+    <title>Home | E-Cafe</title>
    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
@ -26,11 +26,22 @@
        E-Cafe
    </h1>
    <section class="description">
-        <p><strong>Welcome to E-Cafe!</strong><br>
-        We're a small community with a Discord server, a Minecraft server</p>
+        <strong>Welcome to E-Cafe!</strong><br>
+        We're a small Minecraft based community in Discord.<br>
+        <button type="button" onclick="scrollDown(0, 10000)">Learn More</button>
+        <div style="margin-top: 500px;"></div>
+        <figure class="screenshots">
+            <img src="Images/Screenshots/MinecraftBedwarsLobby.png" alt="Screenshot from E-Cafe Minecraft server">
+            <figcaption>Screenshot from E-Cafe Minecraft Server. </figcaption>
+        </figure>
+        <div style="margin-top: 50px;"></div>
+        a<br>
+        aaaa
    </section>
    <footer>
        <a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
    </footer>
 </body>
+<script src="Scripts/scroll.js">  
+</script>
 </html>
--- a/Website/links.html
+++ b/Website/links.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Links - E-Cafe</title>
+    <title>Links | E-Cafe</title>
    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
--- a/Website/styles.css
+++ b/Website/styles.css
@ -1,3 +1,7 @@
+html {
+    scroll-behavior: smooth;
+}
+
 .title{
    font-size: 50px;
    text-align: center;
@ -6,6 +10,7 @@
 .description {
    text-align: center;
    font-size: 25px;
+    margin-bottom: 200px;
 }

 body {
@ -13,6 +18,7 @@ body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
+    background-position: center;
    color: white;
    font-family: Helvetica, Neue, Helvetica, Arial, sans-serif;
    margin: 0;
@ -34,8 +40,8 @@ header .logo a{
    display: inline-block;
    position: relative;
    background-size: 100%;
-    height: 150px;
-    width: 150px;
+    height: 100px;
+    width: 100px;
    text-indent: -999999999999999999999999999999px;
 }

@ -52,12 +58,17 @@ li {
 }

 button {
-    background: rgb(42, 42, 42);
+    background: rgb(195, 195, 20);
    color: white;
    transform: scale(3, 3);
-    width: 80px;
    margin: 7%;
    text-align: center;
+    border-radius: 10px;
+    box-shadow: gray 0 0 1px;
+}
+
+button:hover {
+    background-color: rgb(255, 255, 0);
 }

 a {
@ -77,6 +88,7 @@ a:hover {
    height: 300px;
 }

+
 .features {
    color: white;
    padding: 2%;
@ -84,6 +96,19 @@ a:hover {
    text-align: center;
 }

+.screenshots img{
+    border-radius: 40px;
+    width: 480px;
+    height: 270px;
+}
+
+.screenshots{
+    color: white;
+    display: inline-block;
+    text-align: center;
+    margin: 2%;
+}
+
 footer {
    background-color: rgb(42, 42, 42);
    text-align: center;
@ -91,7 +116,7 @@ footer {
    color: gray;
    margin-top: -50px;
    position: fixed;
-    bottom:0;
+    bottom: 0;
    width: 100%;
    z-index: 1;
 }
@ -104,11 +129,15 @@ footer {
    text-align: center;
 }

-@media screen and (max-width: 800px) {
+@media screen and (max-width: 715px) {
    .features {
        transform: scale(0.7, 0.7);
    }

+    .screenshots {
+        transform: scale(0.7, 0.7);
+    }
+
    .discord {
        transform: scale(0.6, 0.6);
    }   
@ -126,6 +155,10 @@ footer {
        width: 100px;
        height: 100px;
    }
+
+    #flag {
+        transform: scale(0.15, 0.15);
+    }
 }

 .discord {