style changes and button

web/spin-wheel/dream-catcher.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 316"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#000;stroke-width:3px;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;}.cls-3{fill:#fff;stroke:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="89" cy="90" r="87.5"/><circle class="cls-2" cx="89" cy="59" r="57.5"/><line class="cls-1" x1="1.5" y1="124" x2="1.5" y2="180"/><line class="cls-1" x1="165.5" y1="217" x2="165.5" y2="234"/><line class="cls-1" x1="89.5" y1="263" x2="89.5" y2="297"/><line class="cls-1" x1="89.5" y1="188" x2="89.5" y2="241"/><line class="cls-1" x1="111.5" y1="256" x2="111.5" y2="271"/><line class="cls-1" x1="173.5" y1="178" x2="173.5" y2="205"/><line class="cls-1" x1="89.5" y1="245" x2="89.5" y2="258"/><line class="cls-1" x1="165.5" y1="148" x2="164.95" y2="197"/><line class="cls-1" x1="173.5" y1="132" x2="173.01" y2="175"/><line class="cls-1" x1="139.5" y1="220" x2="139.5" y2="234"/><line class="cls-1" x1="158.5" y1="159" x2="158.5" y2="172"/><line class="cls-1" x1="139.5" y1="239" x2="139.5" y2="281"/><line class="cls-1" x1="89.5" y1="303" x2="89.5" y2="316"/><line class="cls-1" x1="9.5" y1="219" x2="9.5" y2="253"/><line class="cls-1" x1="9.5" y1="144" x2="9.5" y2="197"/><line class="cls-1" x1="9.5" y1="201" x2="9.5" y2="215"/><line class="cls-1" x1="148.5" y1="239" x2="148.5" y2="252"/><line class="cls-1" x1="71.5" y1="239" x2="71.5" y2="292"/><line class="cls-1" x1="158.5" y1="232" x2="158.5" y2="245"/><line class="cls-1" x1="158.5" y1="178" x2="157.95" y2="227"/><line class="cls-1" x1="52.5" y1="180" x2="52.5" y2="233"/><line class="cls-1" x1="130.5" y1="240" x2="130.5" y2="266"/><line class="cls-1" x1="121.5" y1="216" x2="121.5" y2="230"/><line class="cls-1" x1="121.5" y1="179" x2="121.5" y2="214"/><line class="cls-1" x1="111.5" y1="200" x2="111.5" y2="253"/><line class="cls-1" x1="111.5" y1="183" x2="111.5" y2="196"/><line class="cls-1" x1="173.5" y1="211" x2="173.5" y2="225"/><line class="cls-1" x1="100.5" y1="187" x2="100.5" y2="200"/><line class="cls-1" x1="100.5" y1="205" x2="99.95" y2="254"/><line class="cls-1" x1="139.5" y1="191" x2="139.5" y2="217"/><line class="cls-1" x1="121.5" y1="234" x2="121.5" y2="259"/><line class="cls-1" x1="165.5" y1="200" x2="165.5" y2="214"/><line class="cls-1" x1="139.5" y1="170" x2="139.5" y2="188"/><line class="cls-1" x1="149.5" y1="165" x2="149.5" y2="178"/><line class="cls-1" x1="149.5" y1="184" x2="148.95" y2="233"/><line class="cls-1" x1="130.5" y1="199" x2="130.5" y2="234"/><line class="cls-1" x1="130.5" y1="175" x2="130.5" y2="193"/><line class="cls-1" x1="61.5" y1="244" x2="61.5" y2="259"/><line class="cls-1" x1="80.5" y1="230" x2="80.5" y2="256"/><line class="cls-1" x1="71.5" y1="186" x2="71.5" y2="200"/><line class="cls-1" x1="62.5" y1="185" x2="62.5" y2="238"/><line class="cls-1" x1="71.5" y1="208" x2="71.5" y2="233"/><line class="cls-1" x1="80.5" y1="189" x2="80.5" y2="224"/><line class="cls-1" x1="43.5" y1="235" x2="43.5" y2="222"/><line class="cls-1" x1="43.5" y1="217" x2="43.5" y2="175"/><line class="cls-1" x1="16.5" y1="170" x2="16.5" y2="157"/><line class="cls-1" x1="16.5" y1="189" x2="16.5" y2="177"/><line class="cls-1" x1="16.5" y1="241" x2="17.04" y2="193"/><line class="cls-1" x1="43.5" y1="264" x2="43.5" y2="238"/><line class="cls-1" x1="43.5" y1="285" x2="43.5" y2="267"/><line class="cls-1" x1="52.5" y1="289" x2="53.04" y2="240"/><line class="cls-1" x1="25.5" y1="213" x2="25.5" y2="227"/><line class="cls-1" x1="25.5" y1="232" x2="25.5" y2="274"/><line class="cls-1" x1="25.5" y1="184" x2="25.5" y2="210"/><line class="cls-1" x1="25.5" y1="163" x2="25.5" y2="181"/><line class="cls-1" x1="34.5" y1="207" x2="34.5" y2="221"/><line class="cls-1" x1="34.5" y1="170" x2="34.5" y2="205"/><line class="cls-1" x1="34.5" y1="225" x2="34.5" y2="250"/><line class="cls-1" x1="1.5" y1="224" x2="1.5" y2="238"/><line class="cls-1" x1="1.5" y1="187" x2="1.5" y2="222"/><line class="cls-1" x1="1.5" y1="242" x2="1.5" y2="267"/><line class="cls-1" x1="61.5" y1="301" x2="61.5" y2="267"/><polygon class="cls-3" points="101.32 66.04 96.61 73.54 100.12 81.66 91.54 79.51 84.9 85.35 84.3 76.52 76.68 72.01 84.89 68.71 86.83 60.08 92.51 66.87 101.32 66.04"/></g></g></svg>

web/spin-wheel/index.html

@@ -16,10 +16,8 @@ function preload(){
     img=loadImage('wheel.svg')
 }
 function setup() {
-    createCanvas(windowWidth/2, windowHeight/2);
-    button = createButton("spin the wheel!");
-    button.position(windowWidth/2-250, windowHeight/2);
-    button.mousePressed(spin);
+    var canvas = createCanvas(windowWidth/2, windowHeight/2);
+    canvas.parent("wheel");
 }
 
 var spinning = 1;
@@ -34,12 +32,13 @@ function card(){
     console.log("hey pop up here");
 }
 function draw() {
+    clear();
   // background(220);
   imageMode(CENTER);
   angleMode(DEGREES);
   translate (windowWidth/4, windowHeight/4);
   rotate(currentSpinning);
-  image (img,0,0,200,200);
+  image (img,0,0,250,250);
   currentSpinning = currentSpinning+10;
   if (currentSpinning > spinning){
     currentSpinning = spinning;
@@ -51,20 +50,28 @@ function draw() {
 
 <body>
     <div class="bg-image"></div>
-    <div class="bg-text">
-        <h1>Spin the Wheel of Fortune!</h1>
-        <p>Welcome, my dear! 
+    <div class="bg-text-top">
+        <h1>Wheel of Fortune</h1>
+        <h2>Welcome, my dear!</h2>> 
             
-            <br>This exercise you are about to start revolves around healing, in a sense of reconnecting to what is essential and authentic about yourself. As we understand the true nature of our suffering, we can evoke compassion for ourselves as we move through our uncomfortable feelings on the path to healing and peace. 
+            <p>This exercise you are about to start revolves around healing, in a sense of reconnecting to what is essential and authentic about yourself. As we understand the true nature of our suffering, we can evoke compassion for ourselves as we move through our uncomfortable feelings on the path to healing and peace. 
 
-            <br>Here are a few things I prepared for you before you begin:
-            <br>Have a strong sense of intention to commit to this exercise for some time.
-            <br>Find a quiet room, free of distraction.
-            <br>Get a notebook and a pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.
-            
-            <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>
+            <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. After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to think of an answer to that question by looking at it and the tiny film simultaneously.</p>        
         </div>
+        
+        <button class="spin-wheel" onclick="spin()" > Spin</button>
+
+        <div id="wheel"></div>
+
+        <div class="bg-text-bottom">
+            <h2>Here are a few things I prepared for you before you begin:</h2>
+            <p>
+                <br>1. Have a strong sense of intention to commit to this exercise for some time.
+                <br>2. Find a quiet room, free of distraction.
+                <br>3. Get a notebook and a pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.</p>
+            
+            </div>
+    
 
 <img class="top-left-corner" src="crystals.svg">
 

web/spin-wheel/moon-and-stars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 287.27 319.67"><defs><style>.cls-1,.cls-2{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:none;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M285.38,266.23A164.17,164.17,0,0,1,102.44,3.07,164.17,164.17,0,1,0,285.38,266.23Z"/><polygon class="cls-2" points="137.53 102.47 126.08 100.5 117.97 108.81 116.31 97.31 105.89 92.17 116.31 87.03 117.99 75.54 126.09 83.86 137.54 81.9 132.13 92.18 137.53 102.47"/><polygon class="cls-1" points="187.1 9.77 180.26 20.68 185.36 32.5 172.88 29.36 163.21 37.87 162.34 25.02 151.26 18.46 163.21 13.66 166.03 1.1 174.28 10.98 187.1 9.77"/><polygon class="cls-2" points="232.38 229.66 234.96 234.2 240.17 234.64 236.65 238.5 237.84 243.59 233.07 241.44 228.6 244.14 229.18 238.95 225.23 235.53 230.35 234.47 232.38 229.66"/><polygon class="cls-1" points="251.32 190.21 260.1 189.08 264.15 181.21 267.94 189.21 276.67 190.63 270.23 196.7 271.58 205.45 263.82 201.2 255.92 205.19 257.56 196.49 251.32 190.21"/><polygon class="cls-2" points="205.83 108.81 209.54 115.32 217.01 115.96 211.96 121.5 213.66 128.8 206.83 125.71 200.41 129.59 201.24 122.14 195.57 117.23 202.92 115.72 205.83 108.81"/><polygon class="cls-1" points="153.36 208.33 157.75 207.76 159.77 203.83 161.67 207.83 166.03 208.54 162.81 211.57 163.49 215.95 159.61 213.82 155.66 215.82 156.48 211.47 153.36 208.33"/></g></g></svg>

web/spin-wheel/moon-triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.05 238.65"><defs><style>.cls-1,.cls-2{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:none;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M203.48,98.21a111.87,111.87,0,0,1-16.57,37.63c-33.16,48.7-97.25,62.85-143.15,31.6C22,152.64,8.29,130.33,3.35,105.77-6.12,146.35,8.23,189.25,43,212.91c45.89,31.25,110,17.1,143.15-31.6,17.46-25.65,22.86-55.77,17.36-83.1Z"/><line class="cls-2" x1="101.52" y1="0.19" x2="5.8" y2="237.47"/><line class="cls-2" x1="196.98" y1="238.15" x2="101.52" y2="0.19"/><line class="cls-2" x1="5.8" y1="237.47" x2="196.98" y2="238.15"/><polygon class="cls-1" points="109.3 104.79 109.93 113.62 117.56 118.11 109.35 121.43 107.44 130.07 101.75 123.3 92.94 124.15 97.62 116.64 94.09 108.53 102.67 110.66 109.3 104.79"/></g></g></svg>

web/spin-wheel/shooting-star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 307 158"><defs><style>.cls-1,.cls-4{fill:none;}.cls-1,.cls-2,.cls-4{stroke:#000;stroke-miterlimit:10;}.cls-1,.cls-2{stroke-width:3px;}.cls-3{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="7.4" y1="6.32" x2="299.78" y2="152.25"/><circle class="cls-1" cx="4.5" cy="4.5" r="3"/><circle class="cls-1" cx="302.5" cy="153.5" r="3"/><circle class="cls-1" cx="142" cy="71" r="29.5"/><circle class="cls-1" cx="148" cy="82" r="29.5"/><circle class="cls-1" cx="238.5" cy="121.5" r="20"/><circle class="cls-2" cx="247" cy="128" r="17.5"/><polygon class="cls-3" points="248.96 133.71 244.52 134.56 242.7 138.69 240.53 134.73 236.03 134.27 239.13 130.98 238.17 126.57 242.26 128.5 246.16 126.22 245.59 130.7 248.96 133.71"/><polygon class="cls-4" points="157.38 66.14 154.62 66.02 152.96 68.21 152.22 65.55 149.62 64.64 151.93 63.13 151.98 60.37 154.14 62.09 156.78 61.3 155.81 63.88 157.38 66.14"/><polygon class="cls-4" points="141.58 94 137.96 91.94 134.2 93.76 135.04 89.68 132.15 86.67 136.29 86.21 138.26 82.53 139.98 86.33 144.09 87.06 141.01 89.87 141.58 94"/></g></g></svg>

web/spin-wheel/spiral.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.44 175.55"><defs><style>.cls-1,.cls-3,.cls-4{stroke:#000;stroke-miterlimit:10;}.cls-1{stroke-width:3px;}.cls-2{fill:#fff;}.cls-3{fill:none;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M194,49.76a107.37,107.37,0,0,1-2,23.16,107.18,107.18,0,0,1-7.1,22.23,108.07,108.07,0,0,1-27.83,37.44c-23.86,20.47-57.11,30.29-88.56,23.86a86.81,86.81,0,0,1-22.46-8.23,91.66,91.66,0,0,1-10.15-6.41,92.77,92.77,0,0,1-9.17-7.75A87.42,87.42,0,0,1,0,69.13,72.14,72.14,0,0,1,1.35,57.05a72.14,72.14,0,0,1,8.74-22.63,72.77,72.77,0,0,1,7.14-9.86A70.06,70.06,0,0,1,58.86,1,74.75,74.75,0,0,1,71,0C73,.11,75.1.17,77.15.35l3,.46,1.53.24a11.2,11.2,0,0,1,1.51.3,57.27,57.27,0,0,1,45,52.08,45.95,45.95,0,0,1-43.69,50.23c-1,0-2,.14-3.09.08l-3.12-.18a41,41,0,0,1-6.13-1.19A38.31,38.31,0,0,1,61,97.11,37.79,37.79,0,0,1,46.59,77.43a38.52,38.52,0,0,1-1.53-12.22A29.92,29.92,0,0,1,55.88,43.54a29.11,29.11,0,0,1,17-6.62,22.76,22.76,0,0,1,3.09,0c.52,0,1,0,1.56.12l1.53.25a9.85,9.85,0,0,1,1.52.35c.5.14,1,.26,1.5.41A26.67,26.67,0,0,1,85,39.24a23.62,23.62,0,0,1,5.17,3.38,23.22,23.22,0,0,1,7.69,22.13A18.88,18.88,0,0,1,91.48,75a18.41,18.41,0,0,1-11.13,4.21A14.78,14.78,0,0,1,69.4,75,14.5,14.5,0,0,1,65,64.35h.4A14,14,0,0,0,80.31,78.27a17.47,17.47,0,0,0,10.44-4.15,17.68,17.68,0,0,0,5.78-9.65A21.73,21.73,0,0,0,89,43.93a22.11,22.11,0,0,0-4.83-3,25.5,25.5,0,0,0-2.67-1.05c-.45-.14-.92-.24-1.38-.36a11.66,11.66,0,0,0-1.4-.3,26.29,26.29,0,0,0-11.36.75,27.19,27.19,0,0,0-10.07,5.34,27.89,27.89,0,0,0-7,9,27.39,27.39,0,0,0-2.76,11,36,36,0,0,0,1.53,11.34A34.28,34.28,0,0,0,73,99.49a37.21,37.21,0,0,0,5.65,1l2.87.14c1,0,1.91-.08,2.87-.1a43,43,0,0,0,21.56-7.23,43.52,43.52,0,0,0,14.79-17.27,43,43,0,0,0,4-22.38,53.49,53.49,0,0,0-6.45-21.92,54.5,54.5,0,0,0-15-17.2A53.91,53.91,0,0,0,82.42,5.09,8.38,8.38,0,0,0,81,4.81l-1.42-.22-2.85-.42C74.83,4,72.91,4,71,3.86a69.86,69.86,0,0,0-11.47,1A67.36,67.36,0,0,0,20.19,27.13,67.57,67.57,0,0,0,5.05,57.8,69.82,69.82,0,0,0,3.76,69.24a83.81,83.81,0,0,0,25.41,62.34,83.88,83.88,0,0,0,40.05,21.83,85,85,0,0,0,22.94,2A104.85,104.85,0,0,0,115,152.07,105.61,105.61,0,0,0,193.6,49.76Z"/><circle class="cls-1" cx="79.66" cy="60.73" r="17.5"/><polygon class="cls-2" points="81.61 66.44 77.17 67.28 75.35 71.41 73.18 67.45 68.69 67 71.78 63.71 70.83 59.29 74.91 61.22 78.81 58.95 78.24 63.43 81.61 66.44"/><polygon class="cls-3" points="48.63 119.55 44.98 115.81 39.83 116.7 42.26 112.07 39.82 107.45 44.97 108.33 48.62 104.58 49.37 109.75 54.06 112.06 49.38 114.38 48.63 119.55"/><polygon class="cls-4" points="40.27 162.51 32.06 165.82 30.14 174.46 24.45 167.67 15.64 168.51 20.34 161.01 16.82 152.89 25.41 155.03 32.04 149.18 32.65 158.01 40.27 162.51"/><polygon class="cls-3" points="209.75 128.36 207.31 133.89 210.48 139.04 204.46 138.43 200.55 143.04 199.27 137.12 193.68 134.82 198.91 131.78 199.37 125.75 203.87 129.78 209.75 128.36"/><polygon class="cls-4" points="152.24 115.48 148.23 111.3 142.51 112.23 145.25 107.13 142.59 101.98 148.29 103 152.37 98.89 153.15 104.63 158.33 107.23 153.11 109.75 152.24 115.48"/></g></g></svg>

web/spin-wheel/style.css

@@ -50,17 +50,34 @@ html {
     filter: hue-rotate(180deg);
   }
 
-  main{
+  #wheel{
     text-align: center;
   }
 
+.spin-wheel{
+  position: center;
+}
+
+  h1 {
+  position: relative;
+  margin-top: 5%;
+  text-align: center;
+  font-family: fantasy;
+  font-size:larger;
+  color:antiquewhite;
+  }
 
   h2 {
     text-align: center;
+    font-family: fantasy;
+    color:antiquewhite;
   }
   
   p {
     text-align: center;
+    font-family: fantasy;
+    color:antiquewhite;
+    padding:10%;
   }