web edits

web/spin-wheel/crystals.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:#000;stroke-miterlimit:10;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="87.21" y1="0.44" x2="30.34" y2="65.23"/><line class="cls-1" x1="51.15" y1="281.26" x2="30.34" y2="65.23"/><line class="cls-1" x1="87.21" y1="0.44" x2="169.73" y2="43.38"/><line class="cls-1" x1="187.76" y1="273.78" x2="169.73" y2="43.38"/><line class="cls-1" x1="51.15" y1="281.26" x2="128.47" y2="341.74"/><line class="cls-1" x1="187.76" y1="273.78" x2="128.47" y2="341.74"/><line class="cls-1" x1="30.34" y1="65.23" x2="71.26" y2="78.06"/><line class="cls-1" x1="87.21" y1="0.44" x2="71.26" y2="78.06"/><line class="cls-1" x1="125.35" y1="66.69" x2="169.73" y2="43.38"/><line class="cls-1" x1="87.21" y1="0.44" x2="125.35" y2="66.69"/><line class="cls-1" x1="71.26" y1="78.06" x2="125.35" y2="66.69"/><line class="cls-1" x1="51.15" y1="281.26" x2="98.3" y2="292.75"/><line class="cls-1" x1="187.76" y1="273.78" x2="147.54" y2="294.31"/><line class="cls-1" x1="71.26" y1="78.06" x2="98.3" y2="292.75"/><line class="cls-1" x1="125.35" y1="66.69" x2="147.54" y2="294.31"/><line class="cls-1" x1="98.3" y1="292.75" x2="147.54" y2="294.31"/><line class="cls-1" x1="51.15" y1="281.26" x2="94.47" y2="262.29"/><line class="cls-1" x1="187.76" y1="273.78" x2="147.54" y2="262.29"/><line class="cls-1" x1="94.69" y1="262.37" x2="147.25" y2="262.37"/><line class="cls-1" x1="30.34" y1="65.23" x2="79.23" y2="49.99"/><line class="cls-1" x1="169.73" y1="43.38" x2="112.83" y2="44.95"/><line class="cls-1" x1="79.23" y1="49.99" x2="112.83" y2="44.95"/><line class="cls-1" x1="98.3" y1="292.75" x2="128.47" y2="341.74"/><line class="cls-1" x1="147.54" y1="294.31" x2="128.47" y2="341.74"/><line class="cls-1" x1="207.7" y1="198.91" x2="254.88" y2="160.13"/><line class="cls-1" x1="254.88" y1="160.13" x2="274.43" y2="204.55"/><line class="cls-1" x1="207.7" y1="198.91" x2="234.52" y2="210.01"/><line class="cls-1" x1="254.88" y1="160.13" x2="234.52" y2="210.01"/><line class="cls-1" x1="274.43" y1="204.55" x2="251.18" y2="211.43"/><line class="cls-1" x1="254.88" y1="160.13" x2="251.18" y2="211.43"/><line class="cls-1" x1="207.7" y1="198.91" x2="187.86" y2="309.38"/><line class="cls-1" x1="216.99" y1="343.15" x2="187.86" y2="309.38"/><line class="cls-1" x1="234.52" y1="210.01" x2="215.37" y2="317.75"/><line class="cls-1" x1="251.18" y1="211.43" x2="234.52" y2="210.01"/><line class="cls-1" x1="274.43" y1="204.55" x2="261.03" y2="314.81"/><line class="cls-1" x1="216.99" y1="343.15" x2="261.03" y2="314.81"/><line class="cls-1" x1="236.11" y1="320.97" x2="251.18" y2="211.43"/><line class="cls-1" x1="261.03" y1="314.81" x2="236.11" y2="320.97"/><line class="cls-1" x1="215.37" y1="317.75" x2="187.86" y2="309.38"/><line class="cls-1" x1="236.11" y1="320.97" x2="215.37" y2="317.75"/><line class="cls-1" x1="216.99" y1="343.15" x2="215.37" y2="317.75"/><line class="cls-1" x1="236.11" y1="320.97" x2="216.99" y2="343.15"/><line class="cls-1" x1="207.7" y1="198.91" x2="239.76" y2="197.18"/><line class="cls-1" x1="274.43" y1="204.55" x2="252.47" y2="199.99"/><line class="cls-1" x1="239.76" y1="197.18" x2="252.47" y2="199.99"/><line class="cls-1" x1="187.86" y1="309.38" x2="217.12" y2="307.89"/><line class="cls-1" x1="261.03" y1="314.81" x2="237.82" y2="308.55"/><line class="cls-1" x1="217.12" y1="307.89" x2="237.82" y2="308.55"/><polygon class="cls-1" points="212.21 39.25 194.93 38.02 184.12 51.54 179.96 34.73 163.75 28.63 178.45 19.48 179.25 2.17 192.5 13.33 209.2 8.74 202.68 24.79 212.21 39.25"/><polygon class="cls-1" points="219.22 65.69 224.8 64.03 226.6 58.49 229.9 63.29 235.72 63.29 232.18 67.91 233.98 73.45 228.49 71.51 223.78 74.93 223.93 69.11 219.22 65.69"/><polygon class="cls-2" points="207.02 156.49 200.23 155.33 195.42 160.26 194.43 153.44 188.25 150.39 194.43 147.34 195.43 140.52 200.23 145.46 207.02 144.3 203.81 150.39 207.02 156.49"/><polygon class="cls-2" points="252.61 102.26 253.44 113.9 263.5 119.82 252.68 124.2 250.16 135.6 242.65 126.67 231.04 127.79 237.21 117.89 232.55 107.19 243.88 110 252.61 102.26"/><polygon class="cls-1" points="19.9 220.43 13.11 219.27 8.29 224.2 7.31 217.38 1.13 214.33 7.31 211.28 8.3 204.46 13.11 209.4 19.9 208.24 16.69 214.33 19.9 220.43"/><polygon class="cls-2" points="44.21 272.76 38.01 282.64 42.64 293.36 31.32 290.51 22.56 298.22 21.77 286.58 11.73 280.63 22.56 276.28 25.11 264.89 32.6 273.85 44.21 272.76"/></g></g></svg>

web/spin-wheel/index.html

@@ -13,10 +13,10 @@
 <script>
     console.log("hey there");
 function preload(){
-    img=loadImage('wheel-of-fortune')
+    img=loadImage('wheel.svg')
 }
 function setup() {
-    createCanvas(windowWidth, windowHeight);
+    createCanvas(windowWidth/2, windowHeight/2);
     button = createButton("spin the wheel!");
     button.position(windowWidth/2-250, windowHeight/2);
     button.mousePressed(spin);
@@ -34,10 +34,10 @@ function card(){
     console.log("hey pop up here");
 }
 function draw() {
-  background(220);
+  // background(220);
   imageMode(CENTER);
   angleMode(DEGREES);
-  translate (windowWidth/2, windowHeight/2);
+  translate (windowWidth/4, windowHeight/4);
   rotate(currentSpinning);
   image (img,0,0,200,200);
   currentSpinning = currentSpinning+10;
@@ -65,4 +65,8 @@ function draw() {
             <br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune you will find at https://issue.xpub.nl/20/wheel. 
             After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to thankful of an answer to that question by looking at it and the tiny film simultaneously.</p>
         </div>
+
+<img class="top-left-corner" src="crystals.svg">
+
+
 </body>

web/spin-wheel/style.css

@@ -5,16 +5,15 @@ html {
   html::before { /* Add a pseudo-element to the html element */
     content: "";
     position: fixed;
-    top: 0;
+    width: 200vw;
-    left: 0;
+    height: 200vh;
+    top: -50vh;
+    left: -50vw;
     right: 0;
     bottom: 0;
     z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
     background: url(bg-images/bg1.jpg) no-repeat center center fixed; 
-    -webkit-background-size: cover;
+    background-size: 200%;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
     
     /* Add animation properties */
     -webkit-animation: spin 100s linear infinite;
@@ -42,6 +41,20 @@ html {
     }
   }
   
+  .top-left-corner{
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    transform: translate(-50%,-50%);
+    width: 50vw;
+    filter: hue-rotate(180deg);
+  }
+
+  main{
+    text-align: center;
+  }
+
+
   h2 {
     text-align: center;
   }