Convert to PHP
parent
03d1ccfbe4
commit
8166541ebf
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 19 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
|
@ -0,0 +1,114 @@
|
||||||
|
/* Reset for clean styling */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.boxes {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: #4caf50;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
transform: scale(1.05);
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.box {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.box {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 99%; /* Increase container width */
|
||||||
|
margin: 10px auto;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo Santa hat */
|
||||||
|
.logo-container {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.santa-hat {
|
||||||
|
position: absolute;
|
||||||
|
top: -45px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) rotate(0deg);
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-bottom: 10px solid white;
|
||||||
|
animation: hatDrop 2s ease-out infinite alternate;
|
||||||
|
}
|
||||||
|
.santa-hat:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
@keyframes hatDrop {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-50%) rotate(-20deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%) rotate(20deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>CSV Boxes</title>
|
||||||
|
<link rel="stylesheet" href="index-styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container text-center py-5">
|
||||||
|
<div class="logo-container position-relative">
|
||||||
|
<img src="./pgan_logo.png" alt="PGAN Logo" class="logo mb-4" />
|
||||||
|
<div class="santa-hat"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>PRIZZES</h2>
|
||||||
|
<div class="boxes" id="low-boxes"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>PRIZZES</h2>
|
||||||
|
<div class="boxes" id="high-boxes"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const csvLow = ["3000", "5000", "7000"];
|
||||||
|
const csvHigh = ["10000", "15000", "25000"];
|
||||||
|
|
||||||
|
function createBoxes(data, containerId, nextPage) {
|
||||||
|
const container = document.getElementById(containerId);
|
||||||
|
data.forEach((value) => {
|
||||||
|
const box = document.createElement("div");
|
||||||
|
box.className = "box";
|
||||||
|
box.textContent = value;
|
||||||
|
|
||||||
|
// Add click event to store selected value and navigate
|
||||||
|
box.addEventListener("click", () => {
|
||||||
|
localStorage.setItem("selectedPrice", value); // Save selected price
|
||||||
|
window.location.href = nextPage; // Navigate to the respective page
|
||||||
|
});
|
||||||
|
|
||||||
|
container.appendChild(box);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createBoxes(csvLow, "low-boxes", "offices-low.html");
|
||||||
|
createBoxes(csvHigh, "high-boxes", "offices-high.html");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Offices High</title>
|
||||||
|
<link rel="stylesheet" href="./index-styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Selected Price (High): <span id="selected-price"></span></h2>
|
||||||
|
<h2>Available Offices</h2>
|
||||||
|
<div class="boxes" id="office-boxes"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const offices = ["PGO", "PHRMO", "TEST", "PPDO"];
|
||||||
|
|
||||||
|
// Display the selected price
|
||||||
|
const selectedPrice = localStorage.getItem('selectedPrice');
|
||||||
|
document.getElementById('selected-price').textContent = selectedPrice;
|
||||||
|
|
||||||
|
// Create office boxes
|
||||||
|
function createOfficeBoxes(data) {
|
||||||
|
const container = document.getElementById('office-boxes');
|
||||||
|
data.forEach(office => {
|
||||||
|
const box = document.createElement('div');
|
||||||
|
box.className = 'box';
|
||||||
|
box.textContent = office;
|
||||||
|
|
||||||
|
// Add click event to store selected office
|
||||||
|
box.addEventListener('click', () => {
|
||||||
|
localStorage.setItem('selectedOffice', office); // Save selected office
|
||||||
|
alert(`You selected office: ${office}`); // Display confirmation
|
||||||
|
});
|
||||||
|
|
||||||
|
container.appendChild(box);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createOfficeBoxes(offices);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Offices Low</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 20px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background: #f0f0f0;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
width: calc(50% - 10px);
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box:hover {
|
||||||
|
background: #f8d7da;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Selected Price (Low): <span id="selected-price"></span></h2>
|
||||||
|
<h2>Available Offices</h2>
|
||||||
|
<div class="boxes" id="office-boxes"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Predefined offices
|
||||||
|
const offices = ["PGO", "PHRMO", "TEST", "PPDO"];
|
||||||
|
|
||||||
|
const selectedPrice = localStorage.getItem('selectedPrice');
|
||||||
|
document.getElementById('selected-price').textContent = selectedPrice || "None";
|
||||||
|
|
||||||
|
|
||||||
|
function fetchRemovedOffices() {
|
||||||
|
const removedOffices = localStorage.getItem('removedOffices');
|
||||||
|
return removedOffices ? JSON.parse(removedOffices) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function saveRemovedOffice(office) {
|
||||||
|
const removedOffices = fetchRemovedOffices();
|
||||||
|
removedOffices.push(office);
|
||||||
|
localStorage.setItem('removedOffices', JSON.stringify(removedOffices));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function createOfficeBoxes() {
|
||||||
|
const removedOffices = fetchRemovedOffices();
|
||||||
|
const filteredOffices = offices.filter(office => !removedOffices.includes(office));
|
||||||
|
|
||||||
|
const container = document.getElementById('office-boxes');
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
filteredOffices.forEach(office => {
|
||||||
|
const box = document.createElement('div');
|
||||||
|
box.className = 'box';
|
||||||
|
box.textContent = office;
|
||||||
|
|
||||||
|
|
||||||
|
box.addEventListener('click', () => {
|
||||||
|
alert(`You selected and removed office: ${office}`);
|
||||||
|
saveRemovedOffice(office);
|
||||||
|
createOfficeBoxes();
|
||||||
|
});
|
||||||
|
|
||||||
|
container.appendChild(box);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createOfficeBoxes();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
PGO-MIS
|
||||||
|
PGO
|
||||||
|
PHRMO
|
||||||
|
Binary file not shown.
|
After Width: | Height: | Size: 7.0 MiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
|
|
@ -0,0 +1,113 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>PGAN Christmas Raffle</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="./style.css" />
|
||||||
|
</head>
|
||||||
|
<body class="bg-christmas">
|
||||||
|
<!-- Background Music -->
|
||||||
|
<audio id="background-music" src="./paripapap_music.mp3" loop></audio>
|
||||||
|
<audio id="background-music1" src="./igiling.mp3" loop></audio>
|
||||||
|
|
||||||
|
<audio id="congrats-music1" src="./congrats.mp3"></audio>
|
||||||
|
<audio id="congrats-music2" src="./congrats1.mp3"></audio>
|
||||||
|
|
||||||
|
<img id="paripapap-gif" class="playing-image-paripapap" src="./paripapap.gif" alt="Paripapap GIF">
|
||||||
|
<img id="igiling-gif" class="playing-image-igiling" src="./igiling.gif" alt="Igiling GIF">
|
||||||
|
|
||||||
|
<!-- Snowflakes -->
|
||||||
|
<div id="snow-container"></div>
|
||||||
|
|
||||||
|
<div class="container text-center py-5">
|
||||||
|
<!-- PGAN Logo -->
|
||||||
|
<!-- <img src="./pgan_logo.png" alt="PGAN Logo" class="logo mb-4" /> -->
|
||||||
|
<div class="logo-container position-relative">
|
||||||
|
<img src="./pgan_logo.png" alt="PGAN Logo" class="logo mb-4" />
|
||||||
|
<div class="santa-hat"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-dark mb-4 position-relative heading-lights fancy-heading">
|
||||||
|
<span class="christmas-tree">🎄</span>
|
||||||
|
PGAN Christmas Raffle
|
||||||
|
<span class="santa">🎅</span>
|
||||||
|
<div class="lights-wrapper">
|
||||||
|
<div class="lightbulb red"></div>
|
||||||
|
<div class="lightbulb green"></div>
|
||||||
|
<div class="lightbulb blue"></div>
|
||||||
|
<div class="lightbulb yellow"></div>
|
||||||
|
<div class="lightbulb purple"></div>
|
||||||
|
<div class="lightbulb red"></div>
|
||||||
|
<div class="lightbulb green"></div>
|
||||||
|
<div class="lightbulb blue"></div>
|
||||||
|
<div class="lightbulb yellow"></div>
|
||||||
|
<div class="lightbulb purple"></div>
|
||||||
|
</div>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="file-input"
|
||||||
|
accept=".csv"
|
||||||
|
class="form-control w-50 mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button id="raffle-button" class="btn btn-danger btn-lg mb-3 glowing">
|
||||||
|
🎁 Pick a Winner! 🎁
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
id="box-container"
|
||||||
|
class="d-flex flex-wrap justify-content-center gap-1 my-4"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal -->
|
||||||
|
<!-- Modal -->
|
||||||
|
<div
|
||||||
|
class="modal fade"
|
||||||
|
id="winnerModal"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-labelledby="winnerModalLabel"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<!-- Enlarged modal -->
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title fw-bold" id="winnerModalLabel">
|
||||||
|
🎉 Winner Announced! 🎉
|
||||||
|
</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-close"
|
||||||
|
data-bs-dismiss="modal"
|
||||||
|
aria-label="Close"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body text-center">
|
||||||
|
<p
|
||||||
|
id="winner-name"
|
||||||
|
class="fw-bold text-danger"
|
||||||
|
style="font-size: 5.5rem"
|
||||||
|
></p>
|
||||||
|
<!-- Larger winner text -->
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="remove-winner" class="btn btn-danger">
|
||||||
|
Remove Winner
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
const fileInput = document.getElementById("file-input");
|
||||||
|
const boxContainer = document.getElementById("box-container");
|
||||||
|
const raffleButton = document.getElementById("raffle-button");
|
||||||
|
const backgroundMusicOptions = [
|
||||||
|
document.getElementById("background-music"),
|
||||||
|
document.getElementById("background-music1"),
|
||||||
|
];
|
||||||
|
const congratsMusicOptions = [
|
||||||
|
document.getElementById("congrats-music1"),
|
||||||
|
document.getElementById("congrats-music2"),
|
||||||
|
];
|
||||||
|
const winnerModal = new bootstrap.Modal(
|
||||||
|
document.getElementById("winnerModal"),
|
||||||
|
{
|
||||||
|
backdrop: "static",
|
||||||
|
keyboard: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const winnerNameDisplay = document.getElementById("winner-name");
|
||||||
|
const removeWinnerButton = document.getElementById("remove-winner");
|
||||||
|
const paripapapGif = document.getElementById("paripapap-gif");
|
||||||
|
const igilingGif = document.getElementById("igiling-gif");
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let spinning = false;
|
||||||
|
let currentWinnerIndex = null;
|
||||||
|
|
||||||
|
// Initialize both images hidden
|
||||||
|
paripapapGif.style.display = "none";
|
||||||
|
igilingGif.style.display = "none";
|
||||||
|
|
||||||
|
// Function to show the appropriate GIF based on the audio playing
|
||||||
|
function showGifForMusic(audioId) {
|
||||||
|
if (audioId === "background-music") {
|
||||||
|
paripapapGif.style.display = "block";
|
||||||
|
igilingGif.style.display = "none";
|
||||||
|
} else if (audioId === "background-music1") {
|
||||||
|
paripapapGif.style.display = "none";
|
||||||
|
igilingGif.style.display = "block";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add event listeners for play, pause, and ended events on the audio elements
|
||||||
|
backgroundMusicOptions.forEach((music) => {
|
||||||
|
music.addEventListener("play", () => showGifForMusic(music.id));
|
||||||
|
music.addEventListener("pause", () => {
|
||||||
|
paripapapGif.style.display = "none";
|
||||||
|
igilingGif.style.display = "none";
|
||||||
|
});
|
||||||
|
music.addEventListener("ended", () => {
|
||||||
|
paripapapGif.style.display = "none";
|
||||||
|
igilingGif.style.display = "none";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load names from CSV and populate boxes
|
||||||
|
fileInput.addEventListener("change", (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
names = e.target.result.split("\n").filter((name) => name.trim() !== "");
|
||||||
|
populateBoxes();
|
||||||
|
raffleButton.disabled = names.length === 0;
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Populate the UI with boxes
|
||||||
|
function populateBoxes() {
|
||||||
|
boxContainer.innerHTML = "";
|
||||||
|
names.forEach((name, index) => {
|
||||||
|
const box = document.createElement("div");
|
||||||
|
box.classList.add("box");
|
||||||
|
box.textContent = name.trim();
|
||||||
|
box.dataset.index = index;
|
||||||
|
boxContainer.appendChild(box);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle raffle button click
|
||||||
|
raffleButton.addEventListener("click", () => {
|
||||||
|
if (names.length === 0 || spinning) return;
|
||||||
|
|
||||||
|
spinning = true;
|
||||||
|
raffleButton.disabled = true; // Disable the button
|
||||||
|
|
||||||
|
// Stop any previously playing background music
|
||||||
|
backgroundMusicOptions.forEach((music) => {
|
||||||
|
music.pause();
|
||||||
|
music.currentTime = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Play a random background music
|
||||||
|
const randomBackgroundMusic =
|
||||||
|
backgroundMusicOptions[
|
||||||
|
Math.floor(Math.random() * backgroundMusicOptions.length)
|
||||||
|
];
|
||||||
|
randomBackgroundMusic.play();
|
||||||
|
|
||||||
|
const boxes = Array.from(document.querySelectorAll(".box"));
|
||||||
|
let randomInterval;
|
||||||
|
let highlightedIndex;
|
||||||
|
|
||||||
|
// Randomly highlight boxes
|
||||||
|
function randomHighlight() {
|
||||||
|
if (highlightedIndex !== undefined) {
|
||||||
|
boxes[highlightedIndex].classList.remove("highlighted");
|
||||||
|
}
|
||||||
|
highlightedIndex = Math.floor(Math.random() * boxes.length);
|
||||||
|
boxes[highlightedIndex].classList.add("highlighted");
|
||||||
|
}
|
||||||
|
|
||||||
|
randomInterval = setInterval(randomHighlight, 200);
|
||||||
|
|
||||||
|
// Reveal the winner after a delay
|
||||||
|
setTimeout(() => {
|
||||||
|
clearInterval(randomInterval);
|
||||||
|
randomHighlight();
|
||||||
|
|
||||||
|
const winnerBox = boxes[highlightedIndex];
|
||||||
|
currentWinnerIndex = highlightedIndex;
|
||||||
|
winnerBox.classList.add("winner");
|
||||||
|
|
||||||
|
const winnerName = names[highlightedIndex];
|
||||||
|
winnerNameDisplay.textContent = winnerName.trim();
|
||||||
|
|
||||||
|
// Stop background music and play random congrats music
|
||||||
|
randomBackgroundMusic.pause();
|
||||||
|
randomBackgroundMusic.currentTime = 0;
|
||||||
|
|
||||||
|
// Play a random congratulatory music
|
||||||
|
const randomCongratsMusic =
|
||||||
|
congratsMusicOptions[
|
||||||
|
Math.floor(Math.random() * congratsMusicOptions.length)
|
||||||
|
];
|
||||||
|
randomCongratsMusic.play();
|
||||||
|
|
||||||
|
// Show winner modal
|
||||||
|
winnerModal.show();
|
||||||
|
|
||||||
|
spinning = false;
|
||||||
|
raffleButton.disabled = false; // Re-enable the button after process
|
||||||
|
}, 8500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove winner and allow a new draw
|
||||||
|
removeWinnerButton.addEventListener("click", () => {
|
||||||
|
if (currentWinnerIndex !== null) {
|
||||||
|
names.splice(currentWinnerIndex, 1);
|
||||||
|
populateBoxes();
|
||||||
|
currentWinnerIndex = null;
|
||||||
|
raffleButton.disabled = names.length === 0;
|
||||||
|
winnerModal.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add snowflakes dynamically
|
||||||
|
const snowContainer = document.getElementById("snow-container");
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
const snowflake = document.createElement("div");
|
||||||
|
snowflake.className = "snowflake";
|
||||||
|
snowflake.style.left = Math.random() * 100 + "vw";
|
||||||
|
snowflake.style.animationDelay = Math.random() * 10 + "s";
|
||||||
|
snowflake.style.animationDuration = 5 + Math.random() * 10 + "s";
|
||||||
|
snowflake.style.width = snowflake.style.height = 5 + Math.random() * 5 + "px";
|
||||||
|
snowContainer.appendChild(snowflake);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,349 @@
|
||||||
|
/* General adjustments for body and container */
|
||||||
|
body.bg-christmas {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: url("./bg.png") no-repeat top center;
|
||||||
|
background-size: cover; /* Ensures it covers the screen proportionally */
|
||||||
|
background-attachment: fixed; /* Keeps the background fixed during scrolling */
|
||||||
|
height: 100vh; /* Ensures it occupies the full height of the viewport */
|
||||||
|
overflow-x: hidden; /* Prevents horizontal scrolling */
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 99%; /* Increase container width */
|
||||||
|
margin: 10px auto;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling for boxes */
|
||||||
|
#box-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 120px; /* Adjust width for more compact layout */
|
||||||
|
height: 80px; /* Adjust height for more compact layout */
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Highlighted box */
|
||||||
|
.highlighted {
|
||||||
|
background-color: #ffd700;
|
||||||
|
color: #fff;
|
||||||
|
border: 2px solid #ff6347;
|
||||||
|
animation: pulse 1s infinite;
|
||||||
|
z-index: 101;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Winner box */
|
||||||
|
.winner-display {
|
||||||
|
background-color: #28a745;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
border: 3px solid #fff;
|
||||||
|
animation: winnerPulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes winnerPulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 15px rgba(40, 167, 69, 0.8);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 0 30px rgba(40, 167, 69, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive layout adjustments */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
#box-container {
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 150px;
|
||||||
|
height: 90px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.box {
|
||||||
|
width: 100px;
|
||||||
|
height: 70px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.box {
|
||||||
|
width: 80px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo styles */
|
||||||
|
.logo {
|
||||||
|
max-width: 230px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Snowflakes animation */
|
||||||
|
#snow-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.snowflake {
|
||||||
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.8;
|
||||||
|
animation: snow 10s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes snow {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-100px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(110vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo Santa hat */
|
||||||
|
.logo-container {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.santa-hat {
|
||||||
|
position: absolute;
|
||||||
|
top: -45px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) rotate(0deg);
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: red;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-bottom: 10px solid white;
|
||||||
|
animation: hatDrop 2s ease-out infinite alternate;
|
||||||
|
}
|
||||||
|
.santa-hat:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
@keyframes hatDrop {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-50%) rotate(-20deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%) rotate(20deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glowing button */
|
||||||
|
/* Glowing Button with White Border */
|
||||||
|
button.glowing {
|
||||||
|
border: 1px solid white; /* Adds a white border */
|
||||||
|
box-shadow: 0 0 15px rgba(255, 0, 0, 0.7), 0 0 25px rgba(255, 0, 0, 0.5); /* Red glow */
|
||||||
|
animation: glowingEffect 2s infinite;
|
||||||
|
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glowing animation */
|
||||||
|
@keyframes glowingEffect {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover Effect for Interaction */
|
||||||
|
button.glowing:hover {
|
||||||
|
transform: scale(1.1); /* Slight enlargement */
|
||||||
|
box-shadow: 0 0 30px rgba(255, 255, 255, 0.9), 0 0 50px rgba(255, 0, 0, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fancy Heading Styles */
|
||||||
|
.fancy-heading {
|
||||||
|
font-family: "Merry Christmas", cursive; /* Festive font */
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.7);
|
||||||
|
position: relative;
|
||||||
|
padding: 20px 0;
|
||||||
|
animation: headingGlow 3s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glow Animation for the Text */
|
||||||
|
@keyframes headingGlow {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 10px rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Emoji Animations */
|
||||||
|
.christmas-tree {
|
||||||
|
animation: bounceTree 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.santa {
|
||||||
|
animation: dropHat 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bounce Animation for the Tree */
|
||||||
|
@keyframes bounceTree {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Drop Animation for Santa */
|
||||||
|
@keyframes dropHat {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light Bulbs Wrapper Styling */
|
||||||
|
.lights-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light Bulbs */
|
||||||
|
.lightbulb {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: blink 1.5s infinite ease-in-out;
|
||||||
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbulb.red {
|
||||||
|
background-color: red;
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbulb.green {
|
||||||
|
background-color: green;
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbulb.blue {
|
||||||
|
background-color: blue;
|
||||||
|
animation-delay: 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbulb.yellow {
|
||||||
|
background-color: yellow;
|
||||||
|
animation-delay: 0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbulb.purple {
|
||||||
|
background-color: purple;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blink Animation for the Light Bulbs */
|
||||||
|
@keyframes blink {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 0.6;
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.playing-image-paripapap {
|
||||||
|
position: absolute;
|
||||||
|
width: 40%;
|
||||||
|
top: 16%;
|
||||||
|
left: 31%;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playing-image-igiling {
|
||||||
|
position: absolute;
|
||||||
|
width: 17%;
|
||||||
|
top: 16%;
|
||||||
|
left: 40%;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue