Elatteria
/
Elatteria-Website
mirror of https://github.com/Elatteria/Elatteria-Website.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

more flagle additions

This commit is contained in:
Ebsku 2022-12-20 18:21:34 +02:00
parent 51478d74c7
commit 9e78878acc
11 changed files with 190 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
E-Cafe Website/Images/Screenshots/MinecraftBedwarsLobby.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
E-Cafe Website/Images/worldmap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

24
E-Cafe Website/Scripts/flagle.js Normal file
View File

@ -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!")
}
}

3
E-Cafe Website/Scripts/scroll.js Normal file
View File

@ -0,0 +1,3 @@
function scrollDown(positionX, positionY) {
window.scrollTo(positionX, positionY);
}

2
E-Cafe Website/about.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>About - E-Cafe</title> <title>About | E-Cafe</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>

43
E-Cafe Website/flagle.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Flagle - E-Cafe</title> <title>Flagle | E-Cafe</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="gamedlestyles.css"> <link rel="stylesheet" href="gamedlestyles.css">
<script src="getflag.js"> <script src="Scripts/flagle.js">
</script> </script>
</head> </head>
@ -12,34 +12,43 @@
<header> <header>
<nav> <nav>
<ul class="desktop"> <ul class="desktop">
<li><a href="index.html">Home</a></li> <li><a href="games.html">More Games</a></li>
<li><a href="games.html">Games</a></li> <li><a href="index.html">E-Cafe</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>
</ul> </ul>
<ul class="mobile"> <ul class="mobile">
<li><a href="index.html">Home</a></li> <li><a href="games.html">More Games</a></li>
<li><a href="games.html">Games</a></li> <li><a href="index.html">E-Cafe</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<h1 class="title"> <h1 class="title">
Flagle Flagle
<div id="underline">
</div>
</h1> </h1>
<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 class="gamedle-section">
1
</div> </div>
<!--Guess 2-->
<div class="gamedle-section"> <div class="gamedle-section">
2
</div> </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> <button type="button" onclick="getFlag()">Guess</button>
<footer> <input id="guessInput" type="text">
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
</footer>
</body> </body>
</html> </html>

93
E-Cafe Website/gamedlestyles.css
View File

@ -1,24 +1,83 @@
section.gamedle-section { body {
background: rgb(42, 42, 42); background-color: rgb(23, 27, 46);
color: white; background-image: none;
margin: 2%;
display: flex;
flex-direction: row;
} }
section.gamedle-section div { #underline {
background: rgba(42, 42, 42, 0.75); height: 3px;
color: white; background-color: white;
margin: 1%; transform: scale(0.1, 1);
display: inline-block; margin-top: 2px;
width: 10%;
} }
div.gamedle-section {
background: rgba(42, 42, 42, 0.75); .gamedle-section {
background: rgba(66, 62, 62, 0.5);
color: white; color: white;
margin: 1%; margin: 50px;
display: flex; margin-left: 200px;
height: 5%; margin-right: 200px;
height: 50px;
font-size: 40px; 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);
}
} }

2
E-Cafe Website/games.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Games - E-Cafe</title> <title>Games | E-Cafe</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<style> <style>
button { button {

17
E-Cafe Website/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Home - E-Cafe</title> <title>Home | E-Cafe</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
@ -26,11 +26,22 @@
E-Cafe E-Cafe
</h1> </h1>
<section class="description"> <section class="description">
<p><strong>Welcome to E-Cafe!</strong><br> <strong>Welcome to E-Cafe!</strong><br>
We're a small community with a Discord server, a Minecraft server</p> 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> </section>
<footer> <footer>
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a> <a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
</footer> </footer>
</body> </body>
<script src="Scripts/scroll.js">
</script>
</html> </html>

2
E-Cafe Website/links.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Links - E-Cafe</title> <title>Links | E-Cafe</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>

43
E-Cafe Website/styles.css
View File

@ -1,3 +1,7 @@
html {
scroll-behavior: smooth;
}
.title{ .title{
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
@ -6,6 +10,7 @@
.description { .description {
text-align: center; text-align: center;
font-size: 25px; font-size: 25px;
margin-bottom: 200px;
} }
body { body {
@ -13,6 +18,7 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
background-position: center;
color: white; color: white;
font-family: Helvetica, Neue, Helvetica, Arial, sans-serif; font-family: Helvetica, Neue, Helvetica, Arial, sans-serif;
margin: 0; margin: 0;
@ -34,8 +40,8 @@ header .logo a{
display: inline-block; display: inline-block;
position: relative; position: relative;
background-size: 100%; background-size: 100%;
height: 150px; height: 100px;
width: 150px; width: 100px;
text-indent: -999999999999999999999999999999px; text-indent: -999999999999999999999999999999px;
} }
@ -52,12 +58,17 @@ li {
} }
button { button {
background: rgb(42, 42, 42); background: rgb(195, 195, 20);
color: white; color: white;
transform: scale(3, 3); transform: scale(3, 3);
width: 80px;
margin: 7%; margin: 7%;
text-align: center; text-align: center;
border-radius: 10px;
box-shadow: gray 0 0 1px;
}
button:hover {
background-color: rgb(255, 255, 0);
} }
a { a {
@ -77,6 +88,7 @@ a:hover {
height: 300px; height: 300px;
} }
.features { .features {
color: white; color: white;
padding: 2%; padding: 2%;
@ -84,6 +96,19 @@ a:hover {
text-align: center; text-align: center;
} }
.screenshots img{
border-radius: 40px;
width: 480px;
height: 270px;
}
.screenshots{
color: white;
display: inline-block;
text-align: center;
margin: 2%;
}
footer { footer {
background-color: rgb(42, 42, 42); background-color: rgb(42, 42, 42);
text-align: center; text-align: center;
@ -104,11 +129,15 @@ footer {
text-align: center; text-align: center;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 715px) {
.features { .features {
transform: scale(0.7, 0.7); transform: scale(0.7, 0.7);
} }
.screenshots {
transform: scale(0.7, 0.7);
}
.discord { .discord {
transform: scale(0.6, 0.6); transform: scale(0.6, 0.6);
} }
@ -126,6 +155,10 @@ footer {
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
#flag {
transform: scale(0.15, 0.15);
}
} }
.discord { .discord {