22

✏️ Editing: run-draw.php

<?php

include "api.php";

<!DOCTYPE html>
<html lang="en">
<head>
   <title>10 Years Celebration | Autozone Balubaid</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<style>

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.drawbody {
  color: #fff;
  background-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -19%;
}

.roll {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: white;
  background-color: #ba8751;
  text-decoration: none;
  font-size: 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  border: 5px solid #fff;
  padding: 0.5em 2em;
  border-radius: 3em;
  transition: 200ms ease-in-out;
}
.roll:hover {
  background-color: #fff;
  color: #253241;
}

.names {
  font-size: 2.5rem;
}

.winner {
  font-size: 4rem;
  text-align: center;
}
.winner span {
  font-size: 0.35em;
  font-weight: 500;
}

.roll-again {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 700;
  padding: 0;
  margin-top: 2em;
  color: #fff;
  border: none;
  opacity: 0.5;
  transition: 200ms ease-in-out;
}
.roll-again:hover {
  opacity: 1;
}

.hide {
  display: none;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:block;	
}
.pc{
display:none;	
}	
	
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:block;	
}
.pc{
display:none;	
}	
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

.drw_bg{
background: transparent url(bg-mbl2.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:none;	
}
.pc{
display:block;	
}	
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

.drw_bg{
background: transparent url(bg-pc.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:none;	
}
.pc{
display:block;	
}	
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.drw_bg{
background: transparent url(bg-pc.jpg) top center no-repeat; 
background-size: cover;
}

.mbl{
display:none;	
}
.pc{
display:block;	
}
	
}

@font-face {
  font-family: sansarabic;
  src: url(font.woff);
}

div {
  font-family: sansarabic;
}
a:hover{
    text-decoration: none;
}
input:hover{
    text-decoration: none;
}	
input{
outline: none !important;	
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: none;
}
*:focus {
    outline: none;
}

input:-internal-autofill-selected{
background-color:none;
}

</style>  
  
</head>
<body class="drw_bg">

<button class="roll" onclick="rollClick()">تشغيل السحب</button>
<div class="names hide"></div>
<div class="winner hide"></div>
<button class="roll-again hide" onclick="rollClick()">أدره مرة أخرى</button>
</div>
<script>
const ENTRANTS = [<?php echo get_draw_users($data); ?>];

const rollEl = document.querySelector(".roll");
const rollAgainEl = document.querySelector(".roll-again");
const namesEl = document.querySelector(".names");
const winnerEl = document.querySelector(".winner");
//const names2El2;
var names2El2 = 1;

function randomName() {
  const rand = Math.floor(Math.random() * ENTRANTS.length);
  const name = ENTRANTS[rand];
  const myArr = name.split("|");
//document.getElementById("demo").innerHTML = myArr[0];
  namesEl.innerText = myArr[0];
  names2El2 = myArr[1];
}

function rollClick() {
  rollEl.classList.add("hide");
  rollAgainEl.classList.add("hide");
  winnerEl.classList.add("hide");
  namesEl.classList.remove("hide");

setDeceleratingTimeout(randomName, 1, 5000);

setTimeout(() => {
    namesEl.classList.add("hide");
    winnerEl.classList.remove("hide");
    rollAgainEl.classList.remove("hide");

const winner = namesEl.innerText;
	const winner2 = names2El2.innerText;
    winnerEl.innerText = winner;
    winnerEl.innerHTML = `<div>و الفائز هو...</div><div>And the winner is...</div><div>${winner}`+ '</div><div>' + names2El2 + '</div>';
	
	window.location.href = "http://10yearsanniversary.autozone.sa/winner.php?empid="+names2El2+"&empname="+winner;
	
  }, 20000);
}

setTimeout(internalCallback, factor);
}

</script>

</html>

MR SKB