Lottery Draw

Еженедельный розыгрыш сертификатов Ozon

Выбор номера и даты розыгрыша:

Победители розыгрыша

Номер участника	Имя	Телефон

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lottery Draw</title>
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
background: linear-gradient(to bottom, #eef6f9, #d1e8f2);
text-align: center;
}
h1 {
color: #014c8c;
margin-top: 20px;
}
input[type="file"] {
display: block;
margin: 20px auto;
padding: 10px;
background-color: #014c8c;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
}
input[type="file"]:hover {
background-color: #0168b4;
}
select, button {
font-size: 1rem;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 25px;
cursor: pointer;
}
select {
background-color: #0184d3;
color: white;
}
button {
background-color: #014c8c;
color: white;
}
button:hover {
background-color: #0168b4;
}
.hidden {
display: none;
}
#countdown {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8rem;
color: white;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
padding: 20px;
display: none;
}
#congratulations {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: white;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
padding: 20px;
display: none;
}
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #014c8c;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
#participantCount {
font-size: 1.2rem;
color: #014c8c;
margin: 10px;
}
</style>
</head>
<body>
<h1>Еженедельный розыгрыш сертификатов Ozon</h1>

<input type="file" id="fileInput" accept=".xlsx" />
<label for="drawNumber">Выбор номера и даты розыгрыша:</label>
<select id="drawNumber">
<option value="2025-01-10">Розыгрыш 1: 10 Января, 2025</option>
<option value="2025-01-17">Розыгрыш 2: 17 Января, 2025</option>
<option value="2025-01-24">Розыгрыш 3: 24 Января, 2025</option>
<option value="2025-01-31">Розыгрыш 4: 31 Января, 2025</option>
<option value="2025-02-07">Розыгрыш 5: 7 Февраля, 2025</option>
<option value="2025-02-14">Розыгрыш 6: 14 Февраля, 2025</option>
<option value="2025-02-21">Розыгрыш 7: 21 Февраля, 2025</option>
<option value="2025-02-28">Розыгрыш 8: 28 Февраля, 2025</option>
</select>
<button onclick="startDrawCountdown()">Выбрать победителей!</button>

<div id="participantCount" class="hidden"></div>

<div id="countdown"></div>

<div id="results" class="hidden">
<h2>Победители розыгрыша</h2>
<table id="winnersTable">
<thead>
<tr>
<th>Номер участника</th>
<th>Имя</th>
<th>Телефон</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id="grandPrizeButton" class="hidden" onclick="startGrandPrizeDraw()">Розыгрыш главного приза акции</button>
<div id="grandPrize" class="hidden">
<h2>Главный приз</h2>
<table id="grandPrizeTable">
<thead>
<tr>
<th>Номер участника</th>
<th>Имя</th>
<th>Телефон</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

<div id="congratulations"></div>

<script>
let ticketData = [];

document.getElementById('fileInput').addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const workbook = XLSX.read(e.target.result, { type: 'binary' });
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
ticketData = XLSX.utils.sheet_to_json(sheet, { header: 1 }).slice(1);

const participantCount = document.getElementById('participantCount');
participantCount.textContent = `Участников розыгрыша - ${ticketData.length}`;
participantCount.classList.remove('hidden');
};
reader.readAsBinaryString(file);
}
});

function startDrawCountdown() {
const countdownDiv = document.getElementById('countdown');
countdownDiv.style.display = 'block';

let count = 5;
countdownDiv.textContent = count;

const interval = setInterval(() => {
count--;
if (count === 0) {
clearInterval(interval);
countdownDiv.style.display = 'none';
setTimeout(drawWinners, 2000);
} else {
countdownDiv.textContent = count;
}
}, 1000);
}

function drawWinners() {
if (!ticketData || ticketData.length === 0) {
alert('Не загружены участники розыгрыша');
return;
}

const drawNumber = document.getElementById('drawNumber').value;
const winners = [];
for (let i = 0; i < Math.min(3, ticketData.length); i++) {
const randomIndex = Math.floor(Math.random() * ticketData.length);
winners.push(ticketData.splice(randomIndex, 1)[0]);
}

displayWinners(winners);

if (drawNumber === '2025-02-28') {
const grandPrizeButton = document.getElementById('grandPrizeButton');
grandPrizeButton.classList.remove('hidden');
}
}

function displayWinners(winners) {
const resultsDiv = document.getElementById('results');
const winnersTableBody = document.getElementById('winnersTable').querySelector('tbody');

resultsDiv.classList.remove('hidden');
winnersTableBody.innerHTML = '';

winners.forEach(winner => {
const row = document.createElement('tr');

const ticketCell = document.createElement('td');
ticketCell.textContent = winner[1] || 'Ошибка номера билета';
row.appendChild(ticketCell);

const nameCell = document.createElement('td');
const fullName = winner[4];
if (fullName && typeof fullName === 'string' && fullName.length > 1) {
const maskedName = fullName[0] + '*'.repeat(fullName.length - 2) + fullName[fullName.length - 1];
nameCell.textContent = maskedName;
} else {
nameCell.textContent = 'Не указано имя';
}
row.appendChild(nameCell);

const phoneCell = document.createElement('td');
const phone = winner[6];
if (phone && typeof phone === 'string' && phone.length >= 4) {
phoneCell.textContent = `********${phone.slice(-4)}`;
} else {
phoneCell.textContent = 'Не указан телефон!';
}
row.appendChild(phoneCell);

winnersTableBody.appendChild(row);
});
}

function startGrandPrizeDraw() {
const countdownDiv = document.getElementById('countdown');
countdownDiv.style.display = 'block';

let count = 3; // Начинаем с 3 секунд
countdownDiv.textContent = count;

const interval = setInterval(() => {
count--;
if (count === 0) {
clearInterval(interval);
countdownDiv.style.display = 'none';

// После обратного отсчета, показываем результаты
setTimeout(() => {
displayGrandPrizeWinner();
}, 500); // Небольшая пауза после отсчета
} else {
countdownDiv.textContent = count;
}
}, 1000);
}

function displayGrandPrizeWinner() {
const grandPrizeDiv = document.getElementById('grandPrize');
const grandPrizeTableBody = document.getElementById('grandPrizeTable').querySelector('tbody');

const grandPrizeWinner = ticketData.splice(Math.floor(Math.random() * ticketData.length), 1)[0];

grandPrizeTableBody.innerHTML = '';
const row = document.createElement('tr');

const ticketCell = document.createElement('td');
ticketCell.textContent = grandPrizeWinner[1] || 'Ошибка номера билета';
row.appendChild(ticketCell);

const nameCell = document.createElement('td');
const fullName = grandPrizeWinner[4];
if (fullName && typeof fullName === 'string' && fullName.length > 1) {
const maskedName = fullName[0] + '*'.repeat(fullName.length - 2) + fullName[fullName.length - 1];
nameCell.textContent = maskedName;
} else {
nameCell.textContent = 'Не указано имя';
}
row.appendChild(nameCell);

const phoneCell = document.createElement('td');
const phone = grandPrizeWinner[6];
if (phone && typeof phone === 'string' && phone.length >= 4) {
phoneCell.textContent = `********${phone.slice(-4)}`;
} else {
phoneCell.textContent = 'Не указан телефон!';
}
row.appendChild(phoneCell);

grandPrizeTableBody.appendChild(row);
grandPrizeDiv.classList.remove('hidden');

// Отображение поздравления
const congratulationsDiv = document.getElementById('congratulations');
congratulationsDiv.innerHTML = `
<h1>ПОЗДРАВЛЯЕМ</h1>
<p>${grandPrizeWinner[1] || 'Ошибка номера билета'}</p>
`;
congratulationsDiv.style.display = 'block';

setTimeout(() => {
congratulationsDiv.style.display = 'none';
}, 5000);
}
</script>
</body>
</html>