Merge branch 'main' of https://git.xpub.nl/XPUB/SI20

web/spin-wheel/index.html

@@ -20,7 +20,7 @@ questions.onreadystatechange = function() {
 questions.send();
 
 function preload(){
-    img=loadImage('wheel2803.svg');
+    img=loadImage('wheel2803.png');
 }
 function setup() {
     var canvas = createCanvas(windowWidth/2, windowHeight/2);
@@ -67,7 +67,7 @@ function draw() {
          card();
     } 
   }
-  image (img,0,0,250,250);
+  image (img,0,0,windowWidth/2, windowWidth/2);
 }
 </script>
 </head>
@@ -106,14 +106,14 @@ function draw() {
         </div>
 
         <div class="credits">
-            <p>Photo by Guillermo Ferla on Unsplash</p>
+            <p>Photo by Ashwini Chaudhary(Monty) on Unsplash</p>
         </div>
     
 
-<img class="top-left-corner" src="/spin-wheel/svg/moon-stars.svg">
-<img class="top-right-corner" src="/spin-wheel/svg/dream-catcher.svg">
-<img class="bottom-left-corner" src="/spin-wheel/svg/crystalsleft.svg">
-<img class="bottom-right-corner" src="/spin-wheel/svg/crystalsright.svg">
+<img class="top-left-corner" src="./svg/moon-stars.svg">
+<img class="top-right-corner" src="./svg/dream-catcher.svg">
+<img class="bottom-left-corner" src="./svg/crystalsleft.svg">
+<img class="bottom-right-corner" src="./svg/crystalsright.svg">
 
 
 

web/spin-wheel/style.css

@@ -88,8 +88,8 @@ html::before { /* Add a pseudo-element to the html element */
   }
 
   button{
-      color:black;
-      background-color:cyan;
+      color:whitesmoke;
+      background-color:violet;
       position: center;
       top:6%;
       left:50%;
@@ -108,7 +108,7 @@ html::before { /* Add a pseudo-element to the html element */
     width: fit-content;
     height: fit-content;
     padding: 5%;
-    background-color: azure;
+    background-color:azure;
     z-index: 3;
     transform: translate(-50%,-50%);
     display: none;
@@ -121,25 +121,25 @@ html::before { /* Add a pseudo-element to the html element */
   text-align: center;
   font-family: fantasy;
   font-size:5em;
-  color:antiquewhite;
+  color:lavender;
   }
 
   h2 {
     text-align: center;
     font-family: fantasy;
-    color:antiquewhite;
+    color:lavender;
   }
 
   h3 {
     text-align: center;
     font-family: fantasy;
-    color:antiquewhite;
+    color:paleturquoise;
   }
   
   p {
     text-align: center;
     font-family: monospace;
-    color:antiquewhite;
+    color:lavender;
     font-size: 1.2em;
     padding-right: 15%;
     padding-left: 15%;