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