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