commit 48e4fb39e1675f7b4a87d6a3d6ed583091a3caaf Author: Esa Kataja Date: Fri Nov 15 16:38:48 2024 +0200 Archiving the original Paska Joululeffa diff --git a/audio/bells.mp3 b/audio/bells.mp3 new file mode 100644 index 0000000..c6f58e8 Binary files /dev/null and b/audio/bells.mp3 differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..a2ea85a --- /dev/null +++ b/css/style.css @@ -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; +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..e61141f Binary files /dev/null and b/favicon.ico differ diff --git a/img/kranssi.png b/img/kranssi.png new file mode 100644 index 0000000..b6dbcc3 Binary files /dev/null and b/img/kranssi.png differ diff --git a/img/mistletoe.png b/img/mistletoe.png new file mode 100644 index 0000000..463bb7f Binary files /dev/null and b/img/mistletoe.png differ diff --git a/img/ribbon.png b/img/ribbon.png new file mode 100644 index 0000000..9fc1852 Binary files /dev/null and b/img/ribbon.png differ diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..a71fd9f --- /dev/null +++ b/index.htm @@ -0,0 +1,56 @@ + + + + + + + Paska joululeffa -bingo + + + + + +

Paska joululeffa

+ 1 +

+ 2 +

+ 3 +

+ 4 +

+ 5 +

+ 6 +

+ 7 +

+ 8 +

+ 9 +

+ + +

+ + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..d73e3b2 --- /dev/null +++ b/js/script.js @@ -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") + } + +}