22

✏️ Editing: winner.php

<?php

include "api.php";

<!DOCTYPE html>
<html lang="en">
<head>
  <title>BGC | KSA 91 National Day</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: #314086;
  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: 3rem;
  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-size: 17px;
  font-weight: 700;
  padding: 0;
  margin-top: 0.5em;
  color: #314086;
  border: none;
  opacity: 0.8;
  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.png) 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.png) 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.png) 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.png) 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.png) 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>

.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@keyframes bang {
  to {
    box-shadow: 113px 51.3333333333px #ff1500, -59px -113.6666666667px #0048ff, 105px -62.6666666667px #00ff5e, -125px -390.6666666667px #0088ff, 143px -120.6666666667px #e600ff, 17px 9.3333333333px #c800ff, 42px -59.6666666667px #ff2b00, -170px -393.6666666667px #00ffea, -48px -84.6666666667px #6a00ff, 215px -121.6666666667px #0009ff, 219px -340.6666666667px #80ff00, -159px -0.6666666667px #ff2f00, 132px -308.6666666667px #8000ff, 148px 29.3333333333px #ffaa00, -124px 23.3333333333px #ff0033, -90px -157.6666666667px #ff00bb, 151px 17.3333333333px #ff00ea, -242px 19.3333333333px #0062ff, 232px 65.3333333333px #ff008c, 147px 61.3333333333px #002bff, 63px -320.6666666667px #ffa600, -117px -7.6666666667px #00ffbb, 160px -391.6666666667px #00eaff, 186px 74.3333333333px #5100ff, -238px -81.6666666667px #008cff, -41px 19.3333333333px #b700ff, -136px 66.3333333333px #00ff62, 180px -308.6666666667px #ff0088, 29px -359.6666666667px #0099ff, 36px -397.6666666667px #fff700, 168px -103.6666666667px #ffd900, 15px -273.6666666667px #ff6a00, -169px -349.6666666667px #ff00cc, 80px 46.3333333333px #c400ff, -183px -151.6666666667px #1eff00, 150px -254.6666666667px #aa00ff, 37px -336.6666666667px #00ff8c, -240px -271.6666666667px #00ffea, 129px -48.6666666667px #0040ff, -123px -148.6666666667px #0077ff, 95px -113.6666666667px #ff001e, -34px -365.6666666667px #0066ff, -120px -219.6666666667px #00fff2, -203px -342.6666666667px #7300ff, -73px -88.6666666667px #ff0055, -118px -50.6666666667px #0d00ff, 247px -93.6666666667px #00ff11, 52px -337.6666666667px #00ffcc, -156px -119.6666666667px #ff006f, -64px -217.6666666667px #bf00ff, -132px -230.6666666667px #ff00d5;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
</style>

.blink_me2 {
  animation: flash-2 0.5s infinite;
}

.blink_me3 {
  animation: flash-3 0.6s infinite;
}

@keyframes flash-1{
		0%,
  100% {
    background: #F9FBEE;
    box-shadow: 0px 4.66667px 24px 3px #F9FBEE;
  }
  50% {
    background: rgba(249, 251, 238, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(249, 251, 238, 0.2);
  }
	}

@keyframes flash-2{
		0%,
  100% {
    background: #ffff00;
    box-shadow: 0px 4.66667px 24px 3px #ffff00;
  }
  50% {
    background: rgba(255, 255, 0, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(255, 255, 0, 0.2);
  }
	}

@keyframes flash-3{
		0%,
  100% {
    background: #30FF00;
    box-shadow: 0px 4.66667px 24px 3px #30FF00;
  }
  50% {
    background: rgba(48, 255, 0, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(48, 255, 0, 0.2);
  }
	}

</style>	
  
</head>
<body class="drw_bg">
<?php 
$ttt = remove_winner_from_draw($_GET['empid']);
$tttt = add_winner($_GET['empname'],$_GET['empid'],$mobile);
?>
<div class="pyro">
  <div class="before"></div>
  <div class="after"></div>
</div>

<div class="winner winning-lights">
<div style="direction:rtl;">و الفائز هو...</div>
<div>And the winner is...</div>
<div style="color:#314086;"><?php echo $_GET['empname']; ?></div>
<div style="color:#314086;"><?php echo $_GET['empid']; ?></div>

</div>
<button class="roll-again" onclick="rollClick();">أدره مرة أخرى</button>

</div>

</html>

MR SKB