the wheel is now ready

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);
 }
 </script>
 </head>
@@ -93,6 +94,7 @@ function draw() {
         <div id="popup">
             <h3 id="popuptext"></h3>
             <img class="slide" src="photohere.svg">
+            <br>
             <button class="close" onclick="closepopup()" > Close</button>
         </div>
     

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;
+    width: 300vw;
-    height: 200vh;
+    height: 300vh;
-    top: -50vh;
+    top: -100%;
-    left: -50vw;
+    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%;
+    width: 50mm;
-    margin: 0%;
   }
 
   #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;
+    width: 90mm;
-    height: fit-content;
+    height: 90mm;
-    padding: 5%;
+    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 {