diff --git a/web/spin-wheel/index.html b/web/spin-wheel/index.html
index f39b014..04f4bab 100644
--- a/web/spin-wheel/index.html
+++ b/web/spin-wheel/index.html
@@ -60,14 +60,15 @@ function draw() {
if (spinonoff==true){
rotate(currentSpinning);
- currentSpinning = currentSpinning+10;
+ var speed=map(currentSpinning,0,2300,10,1);
+ currentSpinning = currentSpinning+speed;
console.log(spinning,currentSpinning);
if (currentSpinning > spinning){
currentSpinning = spinning;
card();
}
}
- image (img,0,0,windowWidth/2, windowWidth/2);
+ image (img,0,0,250,250);
}
@@ -93,6 +94,7 @@ function draw() {
diff --git a/web/spin-wheel/style.css b/web/spin-wheel/style.css
index 6324bc7..b0dabdf 100644
--- a/web/spin-wheel/style.css
+++ b/web/spin-wheel/style.css
@@ -5,15 +5,15 @@ html {
html::before { /* Add a pseudo-element to the html element */
content: "";
position: fixed;
- width: 200vw;
- height: 200vh;
- top: -50vh;
- left: -50vw;
+ width: 300vw;
+ height: 300vh;
+ top: -100%;
+ left: -100%;
right: 0;
bottom: 0;
z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
background: url(bg-images/bg4.jpg) no-repeat center center fixed;
- background-size: 200%;
+ background-size: 100%;
/* Add animation properties */
-webkit-animation: spin 100s linear infinite;
@@ -78,8 +78,7 @@ html::before { /* Add a pseudo-element to the html element */
}
.slide {
- width: 100%;
- margin: 0%;
+ width: 50mm;
}
#wheel{
@@ -87,7 +86,7 @@ html::before { /* Add a pseudo-element to the html element */
filter: hue-rotate(0deg);
}
- button{
+ button.spin-wheel{
color:whitesmoke;
background-color:violet;
position: center;
@@ -101,13 +100,23 @@ html::before { /* Add a pseudo-element to the html element */
font-family: monospace;
}
+ button.close{
+ color:whitesmoke;
+ background-color:violet;
+ width: 100px;
+ height:40px;
+ z-index: 2;
+ font-family: monospace;
+}
+
#popup{
position: fixed;
+ text-align: center;
top: 50%;
left: 50%;
- width: fit-content;
- height: fit-content;
- padding: 5%;
+ width: 90mm;
+ height: 90mm;
+ padding: 5mm;
background-color:azure;
z-index: 3;
transform: translate(-50%,-50%);
@@ -134,6 +143,7 @@ html::before { /* Add a pseudo-element to the html element */
text-align: center;
font-family: fantasy;
color:paleturquoise;
+ margin-bottom: 2mm;
}
p {