<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eucerin Random Prize Selector</title>
<style>
/* General Styling */
body {
text-align: center;
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #ffffff, #dfe4ea);
padding: 20px;
}
/* Logo Styling */
.logo {
width: 250px;
margin-bottom: 30px;
}
/* Container for Numbers */
.numbers-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
/* Modern Number Buttons */
.number {
width: 60px;
height: 60px;
background-color: #222;
color: white;
font-size: 24px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.1s;
}
/* Flash Animation */
@keyframes flashAnimation {
0% { background-color: #222; }
50% { background-color: red; }
100% { background-color: #222; }
}
.flash {
animation: flashAnimation 0.3s ease-in-out;
}
/* Winning Number Animation */
@keyframes winningFlash {
0% { background-color: red; transform: scale(1); }
50% { background-color: darkred; transform: scale(1.1); }
100% { background-color: red; transform: scale(1); }
}
.winning {
animation: winningFlash 0.8s infinite alternate;
}
/* Modern Start Button */
.start-btn {
padding: 12px 25px;
font-size: 18px;
font-weight: bold;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.start-btn:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.start-btn:disabled {
background-color: gray;
cursor: not-allowed;
}
</style>
</head>
<body>
<!-- Eucerin Logo -->
<img src="https://www.tiermedia.co.za/wp-content/uploads/2025/02/eucerin-logo-vector.svg" alt="Eucerin Logo" class="logo" />
<!-- Number Grid -->
<div class="numbers-container">
<div class="number" id="num-0">0</div>
<div class="number" id="num-1">1</div>
<div class="number" id="num-2">2</div>
<div class="number" id="num-3">3</div>
<div class="number" id="num-4">4</div>
<div class="number" id="num-5">5</div>
<div class="number" id="num-6">6</div>
<div class="number" id="num-7">7</div>
<div class="number" id="num-8">8</div>
<div class="number" id="num-9">9</div>
<div class="number" id="num-10">10</div>
</div>
<!-- Start Button -->
<button class="start-btn" id="startBtn" onclick="startSequence()">Start</button>
<script>
function startSequence() {
const numbers = document.querySelectorAll('.number');
const startBtn = document.getElementById('startBtn');
// Disable button during the process
startBtn.disabled = true;
const flashDelay = 150; // Faster speed between flashes
const flashDuration = 300; // Duration of each flash
// Reset any previous winning animation
numbers.forEach(num => num.classList.remove('winning'));
// Flash numbers sequentially
numbers.forEach((num, index) => {
setTimeout(() => {
num.classList.add('flash');
setTimeout(() => {
num.class
