Archived
Archiving the original Paska Joululeffa
This commit is contained in:
Esa Kataja
Binary file not shown.
+110
@@ -0,0 +1,110 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #A20A0A;
|
||||||
|
font-family: 'Sofia';
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #799351;
|
||||||
|
text-align: center;
|
||||||
|
/*margin-bottom: 3em;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar {
|
||||||
|
margin-top: 2em;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 2fr;
|
||||||
|
grid-template-rows: 4em;
|
||||||
|
align-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar img {
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caneseparator {
|
||||||
|
width: 60%;
|
||||||
|
height: 1em;
|
||||||
|
margin: 2.5em auto;
|
||||||
|
border: 0;
|
||||||
|
background-image: repeating-linear-gradient(45deg, red 0%, red 10%, white 10%, white 20%);
|
||||||
|
box-shadow: 0.2em 0.2em 0.5em;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bellsJingle {
|
||||||
|
0% {rotate: -10deg;}
|
||||||
|
50% {rotate: 10deg;}
|
||||||
|
100% {rotate: -10deg;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
footer img {
|
||||||
|
display: block;
|
||||||
|
width: 10em;
|
||||||
|
margin: 2em auto;
|
||||||
|
animation-name: bellsJingle;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
padding: 2px;
|
||||||
|
height: 20em;
|
||||||
|
width: 20em;
|
||||||
|
align-content: center;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3,1fr);
|
||||||
|
grid-template-rows: repeat(3,1fr);
|
||||||
|
grid-gap: 1em;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.item-button {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: grid;
|
||||||
|
font-size: 1em;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.7em;
|
||||||
|
padding: 1em;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-button-norm {
|
||||||
|
box-shadow: black 1px 1px 3px;
|
||||||
|
background-color: #F6EEC9;
|
||||||
|
color: 799351;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-button-pressed {
|
||||||
|
background-image: url("../img/kranssi.png");
|
||||||
|
background-size: 95%;
|
||||||
|
background-color: transparent;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
box-shadow: 0px;
|
||||||
|
border: 0;
|
||||||
|
color: transparent;
|
||||||
|
animation: bellsJingle 4s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fi">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Paska joululeffa -bingo</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="titlebar">
|
||||||
|
<img src="img/ribbon.png" class="ribbon">
|
||||||
|
<h1 class="title">Paska joululeffa</h1>
|
||||||
|
<img src="img/ribbon.png" class="ribbon">
|
||||||
|
</div>
|
||||||
|
<hr class="caneseparator">
|
||||||
|
<div class="grid-container">
|
||||||
|
<div onclick="toggle_button(1)" id="grid-item-1" class="item-button item-button-norm">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(2)" id="grid-item-2" class="item-button item-button-norm">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(3)" id="grid-item-3" class="item-button item-button-norm">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(4)" id="grid-item-4" class="item-button item-button-norm">
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(5)" id="grid-item-5" class="item-button item-button-norm">
|
||||||
|
5
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(6)" id="grid-item-6" class="item-button item-button-norm">
|
||||||
|
6
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(7)" id="grid-item-7" class="item-button item-button-norm">
|
||||||
|
7
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(8)" id="grid-item-8" class="item-button item-button-norm">
|
||||||
|
8
|
||||||
|
</div>
|
||||||
|
<div onclick="toggle_button(9)" id="grid-item-9" class="item-button item-button-norm">
|
||||||
|
9
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<img src="img/mistletoe.png">
|
||||||
|
</footer>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
<audio src="audio/bells.mp3" loop autoplay></audio>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
"use strict"
|
||||||
|
|
||||||
|
const bingo_items = [
|
||||||
|
{"title": "Punainen villakangastakki", "tooltip": ""},
|
||||||
|
{"title": "Keskeytetty suudelma", "tooltip": "" },
|
||||||
|
{"title": "Miespääosa yh", "tooltip": "" },
|
||||||
|
{"title": "Leskimies", "tooltip": "" },
|
||||||
|
{"title": "Jouluoksennus", "tooltip": "" },
|
||||||
|
{"title": "Evergreen", "tooltip": "" },
|
||||||
|
{"title": "Yritys pulassa", "tooltip": "" },
|
||||||
|
{"title": "Naispääosa pitkä blondi", "tooltip": "" },
|
||||||
|
{"title": "Joulumörkö", "tooltip": "" },
|
||||||
|
{"title": "Pääosa jumissa", "tooltip": "" },
|
||||||
|
{"title": "Kantakahvila", "tooltip": "" },
|
||||||
|
{"title": "Majatalo", "tooltip": "" },
|
||||||
|
{"title": "Miespääosa eräjorma", "tooltip": "" },
|
||||||
|
{"title": "Työkriisi", "tooltip": "" },
|
||||||
|
{"title": "Kylän joulutapahtuma", "tooltip": "" },
|
||||||
|
{"title": "Naispääosa kaupungista", "tooltip": "" },
|
||||||
|
{"title": "Naispääosan tuore ero", "tooltip": "" },
|
||||||
|
{"title": "Suuri salaisuus", "tooltip": "" },
|
||||||
|
{"title": "Himo jouluttaja", "tooltip": "" },
|
||||||
|
{"title": "Kuusen valinta", "tooltip": "" },
|
||||||
|
{"title": "Täysikuu", "tooltip": "" },
|
||||||
|
{"title": "Kuuma kaakao", "tooltip": "" },
|
||||||
|
{"title": "Punainen lava-auto", "tooltip": "" }
|
||||||
|
]
|
||||||
|
|
||||||
|
function shuffle(array) {
|
||||||
|
let currentIndex = array.length,
|
||||||
|
randomIndex;
|
||||||
|
|
||||||
|
// While there remain elements to shuffle.
|
||||||
|
while (currentIndex != 0) { // Pick a remaining element.
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex--;
|
||||||
|
|
||||||
|
// And swap it with the current element.
|
||||||
|
[
|
||||||
|
array[currentIndex], array[randomIndex]
|
||||||
|
] = [
|
||||||
|
array[randomIndex], array[currentIndex]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
let shuffled_list = shuffle(bingo_items)
|
||||||
|
let i = 1
|
||||||
|
|
||||||
|
for (i = 1; i < 10; i ++) {
|
||||||
|
let button = document.getElementById("grid-item-" + i)
|
||||||
|
button.textContent = shuffled_list[i]["title"]
|
||||||
|
// console.log(button.textContent)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggle_button(button_id) {
|
||||||
|
let button = document.getElementById("grid-item-" + button_id)
|
||||||
|
// let status = button.className
|
||||||
|
let current_status = button.classList[1]
|
||||||
|
if (current_status == "item-button-norm") {
|
||||||
|
button.classList.remove("item-button-norm")
|
||||||
|
button.classList.add("item-button-pressed")
|
||||||
|
} else {
|
||||||
|
button.classList.remove("item-button-pressed")
|
||||||
|
button.classList.add("item-button-norm")
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user