<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shadow League (Clash Of Clans)</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body{
font-family: open Sans;
display: flex;
justify-content: center;
align-items: center;
height:100vh;
overflow: hidden;
background: url('bar.jpg');
background-size: cover;
}
.mainbox{
position: relative;
width:500px;
height:500px;
}
.mainbox:after{
position: absolute;
content: '';
width:32px;
height:32px;
background: url('left.png') no-repeat;
background-size:32px;
right:-30px;
top:50%;
transform: translateY(-50%);
}
.box{
width:100%;
height:100%;
position: relative;
border-radius:50%;
border:10px solid #fff;
overflow:hidden;
transition:all ease 5s;
}
span{
width:50%;
height:50%;
display:inline-block;
position:absolute;
}
.span1{
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #ffeb3b;
top:120px;
left:0;
}
.span2{
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #e91e63;
top:120px;
right:0;
}
.span3{
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #4caf50;
bottom:0;
left:120px;
}
.span4{
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #3f51b5;
top:0;
left:120px;
}
.box2{
width:100%;
height:100%;
transform: rotate(-135deg);
}
span b{
width:65px;
height:65px;
line-height:65px;
border-radius:50%;
font-size:26px;
text-align: center;
background-color: #fff;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
box-shadow: inset 0 3px 3px 0 #717171;
}
.spin{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:75px;
height:75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #ff5722;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active{
width:70px;
height:70px;
font-size:20px;
}
.mainbox.animate:after{
animation: animateArrow 0.7s ease-infinite;
}
@keyframes animateArrow{
}
</style>
</head>
<body>
<div class="mainbox">
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>Killer</b></span>
<span class="span2"><b>Yogi</b></span>
<span class="span3"><b>Naushad</b></span>
<span class="span4"><b>None</b></span>
</div>
<div class="box2">
<span class="span1"><b>Killer</b></span>
<span class="span2"><b>Yogi</b></span>
<span class="span3"><b>Naushad</b></span>
<span class="span4"><b>None</b></span>
</div>
<div class="popup" onclick="myfunction()">Spin
<span class="popuptext" id="myPopup">Winner</span></div>
<button class="spin" onclick="myfunction()">spin</button>
<script>
//when the user clicks on <spin>, after 50000
function myfunction() {
var popup = document.getElementById ("box")
popup.classList.toggle("show")
jQuery(".spin").spin(5000);
$("#spinWinResult").text(gameover_text);
$(".power_controls").visibility();
var response = "";
if (box1.isCouponExist == "true")
{
response += "<p>" + box1.winResult + "</p>";
response += "<p> Your Coupon Code is " + box.CouponCode + "</p>";
}
else
{
response += "<p>" + box.winResult + "</p>";
}
$("#displayprice").popup.box1(response);
$("#displayprice").popup.box(response);
$("#displayprice").popup.box2(response);
$('#spin').modal('show');
$(".reset_btn").show();
}
function myfunction(){
var x = 1024; //min value
var y = 9999; //max value
var deg = Math.floor(Math.random()*(x-y))+y;
document.querySelector('.box').style.transform = "rotate("+deg+"deg)";
}
</script>
</body>
</html>
You don’t appear to have loaded jQuery.
can you help me with the coding
It would help if you explain what you are trying to do here.
I also notice that you have defined the function myfunction twice.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.