more flagle additions
This commit is contained in:
parent
51478d74c7
commit
9e78878acc
Binary file not shown.
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
After Width: | Height: | Size: 111 KiB |
|
@ -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!")
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
function scrollDown(positionX, positionY) {
|
||||||
|
window.scrollTo(positionX, positionY);
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
|
@ -1,45 +1,54 @@
|
||||||
<!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>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<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>
|
||||||
<div class="gamedle-section">
|
<section class="description">
|
||||||
1
|
<figure id="flag">
|
||||||
</div>
|
<img src="https://flagcdn.com/us.svg" alt="Flag of a random country">
|
||||||
<div class="gamedle-section">
|
</figure>
|
||||||
2
|
<!--Guess 1-->
|
||||||
</div>
|
<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>
|
<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>
|
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
@ -91,7 +116,7 @@ footer {
|
||||||
color: gray;
|
color: gray;
|
||||||
margin-top: -50px;
|
margin-top: -50px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom:0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue