inso/secret-santa
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

feat/css-customization #1

Open
inso wants to merge 3 commits from feat/css-customization into english
pull from: feat/css-customization
merge into: inso:english
Conversation 0 Commits 3 Files Changed 1 +727 -24
1 changed files with 727 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4358baa1b7 - Show all commits

37
src/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Secret Santa</title>
<!-- Christmas tree from https://codepen.io/lenasta92579651/pen/xxERxBx -->
@@ -10,10 +10,11 @@
</head>
<body>
<!-- Content -->
<h1>Secret Santa!</h1>
<h1>Secret Santa</h1>
<select id="person">
<option selected disabled>Who are you?</option>
<option>Quentin</option>
__OPTIONS__
</select>
@@ -70,7 +71,7 @@
<script>
document.getElementById("person").addEventListener("change", (event) => {
const options = {
/*const options = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ person: event.target.value }),
@@ -85,7 +86,9 @@
"result"
).textContent = `Your draw: ${text}`;
document.getElementById("person").remove();
});
});*/
document.getElementById("result").textContent = `Your draw: Virginie`;
document.getElementById("person").remove();
});
</script>
</body>
@@ -100,22 +103,32 @@
align-items: center;
margin: 0;
padding: 0;
overflow: hidden;
}
h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 5em;
text-align: center;
z-index: 10;
}
select {
z-index: 10;
}
h2 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
text-align: center;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
}
#christmas-container {
position: absolute;
position: fixed;
right: 20%;
bottom: 30%;
}
@@ -141,24 +154,12 @@
height: 0;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 270px solid #127475;
border-bottom: 270px solid #0e9594;
border-radius: 30px;
top: -250px;
left: -75px;
}
.tree:after {
content: "";
position: relative;
width: 0;
height: 0;
border-right: 90px solid transparent;
border-bottom: 270px solid #0e9594;
border-bottom-right-radius: 30px;
top: -250px;
left: -165px;
}
.chain {
width: 85px;
height: 85px;