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

spin-wheel/index.html

@@ -20,7 +20,7 @@ questions.onreadystatechange = function() {
 questions.send();
 
 function preload(){
-    img=loadImage('wheel.svg');
+    img=loadImage('wheel2803.svg');
 }
 function setup() {
     var canvas = createCanvas(windowWidth/2, windowHeight/2);
@@ -110,10 +110,10 @@ function draw() {
         </div>
     
 
-<img class="top-left-corner" src="/spin-wheel/svg/spiral.svg">
+<img class="top-left-corner" src="/svg/dream-catcher.svg">
-<img class="top-right-corner" src="/spin-wheel/svg/moon-stars.svg">
+<img class="top-right-corner" src="/svg/moon-stars.svg">
-<img class="bottom-left-corner" src="/spin-wheel/svg/crystals.svg">
+<img class="bottom-left-corner" src="/svg/crystalsleft.svg">
-<img class="bottom-right-corner" src="/spin-wheel/svg/crystals.svg">
+<img class="bottom-right-corner" src="/svg/crystalsright.svg">
 
 
 

spin-wheel/style.css

@@ -12,8 +12,8 @@ html {
     right: 0;
     bottom: 0;
     z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
-    background: url(bg-images/bg2.jpg) no-repeat center center fixed; 
+    background: url(bg-images/bg4.jpg) no-repeat center center fixed;
-    background-size: 100%;
+    background-size: cover;
 
     /* Add animation properties */
     -webkit-animation: spin 100s linear infinite;
@@ -45,7 +45,7 @@ html {
     position: fixed;
     top: 0px;
     left: 0px;
-    transform: translate(0%,0%);
+    transform: translate(20%,20%);
     width: 12vw;
     filter: hue-rotate(0deg);
   }
@@ -54,7 +54,7 @@ html {
     position: fixed;
     top: 0px;
     right: 0px;
-    transform: translate(0%,0%);
+    transform: translate(-20%,20%);
     width: 12vw;
     filter: hue-rotate(0deg);
 }
@@ -88,7 +88,7 @@ html {
   }
 
   button{
-      color:antiquewhite;
+      color:black;
       background-color:cyan;
       position: center;
       top:6%;

spin-wheel/svg/crystalsleft.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274.93 343.57"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#f0f;stroke-miterlimit:10;}.cls-2{fill:#f0f;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="187.72" y1="0.44" x2="244.59" y2="65.23"/><line class="cls-1" x1="223.78" y1="281.26" x2="244.59" y2="65.23"/><line class="cls-1" x1="187.72" y1="0.44" x2="105.2" y2="43.38"/><line class="cls-1" x1="87.17" y1="273.78" x2="105.2" y2="43.38"/><line class="cls-1" x1="223.78" y1="281.26" x2="146.46" y2="341.74"/><line class="cls-1" x1="87.17" y1="273.78" x2="146.46" y2="341.74"/><line class="cls-1" x1="244.59" y1="65.23" x2="203.67" y2="78.06"/><line class="cls-1" x1="187.72" y1="0.44" x2="203.67" y2="78.06"/><line class="cls-1" x1="149.58" y1="66.69" x2="105.2" y2="43.38"/><line class="cls-1" x1="187.72" y1="0.44" x2="149.58" y2="66.69"/><line class="cls-1" x1="203.67" y1="78.06" x2="149.58" y2="66.69"/><line class="cls-1" x1="223.78" y1="281.26" x2="176.62" y2="292.75"/><line class="cls-1" x1="87.17" y1="273.78" x2="127.39" y2="294.31"/><line class="cls-1" x1="203.67" y1="78.06" x2="176.62" y2="292.75"/><line class="cls-1" x1="149.58" y1="66.69" x2="127.39" y2="294.31"/><line class="cls-1" x1="176.62" y1="292.75" x2="127.39" y2="294.31"/><line class="cls-1" x1="223.78" y1="281.26" x2="180.46" y2="262.29"/><line class="cls-1" x1="87.17" y1="273.78" x2="127.39" y2="262.29"/><line class="cls-1" x1="180.24" y1="262.37" x2="127.68" y2="262.37"/><line class="cls-1" x1="244.59" y1="65.23" x2="195.69" y2="49.99"/><line class="cls-1" x1="105.2" y1="43.38" x2="162.1" y2="44.95"/><line class="cls-1" x1="195.69" y1="49.99" x2="162.1" y2="44.95"/><line class="cls-1" x1="176.62" y1="292.75" x2="146.46" y2="341.74"/><line class="cls-1" x1="127.39" y1="294.31" x2="146.46" y2="341.74"/><line class="cls-1" x1="67.23" y1="198.91" x2="20.05" y2="160.13"/><line class="cls-1" x1="20.05" y1="160.13" x2="0.5" y2="204.55"/><line class="cls-1" x1="67.23" y1="198.91" x2="40.41" y2="210.01"/><line class="cls-1" x1="20.05" y1="160.13" x2="40.41" y2="210.01"/><line class="cls-1" x1="0.5" y1="204.55" x2="23.75" y2="211.43"/><line class="cls-1" x1="20.05" y1="160.13" x2="23.75" y2="211.43"/><line class="cls-1" x1="67.23" y1="198.91" x2="87.07" y2="309.38"/><line class="cls-1" x1="57.94" y1="343.15" x2="87.07" y2="309.38"/><line class="cls-1" x1="40.41" y1="210.01" x2="59.56" y2="317.75"/><line class="cls-1" x1="23.75" y1="211.43" x2="40.41" y2="210.01"/><line class="cls-1" x1="0.5" y1="204.55" x2="13.9" y2="314.81"/><line class="cls-1" x1="57.94" y1="343.15" x2="13.9" y2="314.81"/><line class="cls-1" x1="38.82" y1="320.97" x2="23.75" y2="211.43"/><line class="cls-1" x1="13.9" y1="314.81" x2="38.82" y2="320.97"/><line class="cls-1" x1="59.56" y1="317.75" x2="87.07" y2="309.38"/><line class="cls-1" x1="38.82" y1="320.97" x2="59.56" y2="317.75"/><line class="cls-1" x1="57.94" y1="343.15" x2="59.56" y2="317.75"/><line class="cls-1" x1="38.82" y1="320.97" x2="57.94" y2="343.15"/><line class="cls-1" x1="67.23" y1="198.91" x2="35.17" y2="197.18"/><line class="cls-1" x1="0.5" y1="204.55" x2="22.46" y2="199.99"/><line class="cls-1" x1="35.17" y1="197.18" x2="22.46" y2="199.99"/><line class="cls-1" x1="87.07" y1="309.38" x2="57.81" y2="307.89"/><line class="cls-1" x1="13.9" y1="314.81" x2="37.11" y2="308.55"/><line class="cls-1" x1="57.81" y1="307.89" x2="37.11" y2="308.55"/><polygon class="cls-1" points="62.72 39.25 80 38.02 90.81 51.54 94.97 34.73 111.18 28.63 96.47 19.48 95.68 2.17 82.43 13.33 65.73 8.74 72.25 24.79 62.72 39.25"/><polygon class="cls-1" points="55.71 65.69 50.13 64.03 48.33 58.49 45.03 63.29 39.2 63.29 42.75 67.91 40.95 73.45 46.44 71.51 51.15 74.93 51 69.11 55.71 65.69"/><polygon class="cls-2" points="67.91 156.49 74.7 155.33 79.51 160.26 80.5 153.44 86.68 150.39 80.5 147.34 79.5 140.52 74.7 145.46 67.91 144.3 71.11 150.39 67.91 156.49"/><polygon class="cls-2" points="22.32 102.26 21.49 113.9 11.43 119.82 22.25 124.2 24.77 135.6 32.28 126.67 43.89 127.79 37.72 117.89 42.38 107.19 31.05 110 22.32 102.26"/><polygon class="cls-1" points="255.03 220.43 261.82 219.27 266.63 224.2 267.62 217.38 273.8 214.33 267.62 211.28 266.63 204.46 261.82 209.4 255.03 208.24 258.24 214.33 255.03 220.43"/><polygon class="cls-2" points="230.72 272.76 236.92 282.64 232.29 293.36 243.61 290.51 252.37 298.22 253.16 286.58 263.2 280.63 252.37 276.28 249.82 264.89 242.33 273.85 230.72 272.76"/></g></g></svg>