+ 
+ {step === 0 && (
+ handleStepIncrease(0)} />
+ )}
+ {step === 1 && (
+
);
}
diff --git a/code/src/components/Activity.js b/code/src/components/Activity.js
new file mode 100644
index 000000000..d7ee854a5
--- /dev/null
+++ b/code/src/components/Activity.js
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const activechoice = ['running ππ»', 'breathing π¬', 'stretching π§π½', 'walking πΆπ½', 'biking π΅π½'];
+
+export const Activity = ({ activity, setActivity, step }) => {
+ return (
+ <>
+
+
+
+
+
+ )}
+ {step === 8 && (
+ <>
+
+
+
+
+ Current step: {step} / 7
+Ok, what activity sparks your joy and makes your ears wiggle? +
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/code/src/components/Breathe.js b/code/src/components/Breathe.js
new file mode 100644
index 000000000..50c585656
--- /dev/null
+++ b/code/src/components/Breathe.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const Breathe = ({ name, activity, colour, place, temp, who }) => {
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/code/src/components/Colour.js b/code/src/components/Colour.js
new file mode 100644
index 000000000..9232933eb
--- /dev/null
+++ b/code/src/components/Colour.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Colour = ({ colour, setColour, step }) => {
+ return (
+ Keep your happy scenario in your mind and let's slow down...
+
+ Remember, you are by the {place} and you're going to start {activity} soon.
+ It's around {temp} degrees, {who} is next to you and already looking at
+ the {colour} light. Let's do this, focus {name}!
+
+ One breath is illustated by the dot.
+ Each step is one side of the square.
+ Start by breathing out slowly, releasing the air from your lungs.
+ 1. Breathe in through your nose
+ 2. Hold your breath
+ 3. Exhale slowly
+ 4. Hold your breath again
+ Repeat as many times as you need.
+
+
+ )
+}
\ No newline at end of file
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
new file mode 100644
index 000000000..a16db0c2d
--- /dev/null
+++ b/code/src/components/Name.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const Name = ({ name, setName, step }) => {
+ const handleNameChange = (event) => {
+ setName(event.target.value);
+ }
+ return (
+ Current step: {step} / 7
+What's your favourite color?
+ +
+
+ );
+}
\ No newline at end of file
diff --git a/code/src/components/Place.js b/code/src/components/Place.js
new file mode 100644
index 000000000..736c8b40f
--- /dev/null
+++ b/code/src/components/Place.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import ocean from '../img/ocean.png';
+import forest from '../img/forest.png';
+import home from '../img/home.png';
+
+export const Place = ({ place, setPlace, step }) => {
+ const handlePlaceChange = (event) => {
+ setPlace(event.target.value);
+ }
+ return (
+ Current step: {step} / 7
+Let's start of by introducing ourselves! + What's your name? +
+ +
+
+ );
+}
\ No newline at end of file
diff --git a/code/src/components/Start.js b/code/src/components/Start.js
new file mode 100644
index 000000000..d14c68335
--- /dev/null
+++ b/code/src/components/Start.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Start = (begin) => {
+ const handleClick = () => {
+ begin.onButtonClick();
+ }
+ return (
+
+
+ Current step: {step} / 7
+Where do you feel the most at ease?
+
+ 
+ 
+ 
+
+
+
+
+ )
+}
diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js
new file mode 100644
index 000000000..5e36a6a44
--- /dev/null
+++ b/code/src/components/Summary.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Summary = ({ name, activity, colour, place, temp, who }) => {
+ return (
+
+
+ Hello!
+
+
+
+ Have you been feeling a little bit stressed lately?
+ I would like to help you feel better,
+ let's take our first steps together...
+
+
+ )
+}
\ No newline at end of file
diff --git a/code/src/components/Temp.js b/code/src/components/Temp.js
new file mode 100644
index 000000000..2ae6749b2
--- /dev/null
+++ b/code/src/components/Temp.js
@@ -0,0 +1,48 @@
+import React from 'react';
+
+export const Temp = ({ temp, setTemp, step }) => {
+ let tempText = '';
+ switch (temp) {
+ case '0':
+ tempText = 'Freezing π₯Ά';
+ break;
+ case '10':
+ tempText = 'Chilly π¨';
+ break;
+ case '20':
+ tempText = 'Neutral π';
+ break;
+ case '30':
+ tempText = 'Warm βοΈ';
+ break;
+ case '40':
+ tempText = 'Hot π₯΅';
+ break;
+ case '50':
+ tempText = 'Extremely Hot π₯';
+ break;
+ default:
+ tempText = 'Drag the slider to desired temp';
+ }
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/code/src/components/Who.js b/code/src/components/Who.js
new file mode 100644
index 000000000..a30de8cb8
--- /dev/null
+++ b/code/src/components/Who.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Who = ({ who, setWho, step }) => {
+ const handleWhoChange = (event) => {
+ setWho(event.target.value);
+ }
+ return (
+ Complete 7 / 7
+So...
+
+ {name}, picture yourself by the {place} where you are about to start your {activity}.
+ You feel the atmosphere beeing just the way you want, it is around {temp} degrees.
+ By your side you have {who} looking at you with a smile.
+ In the distance you see a beautiful {colour} light.
+
+ {who} want you to move on now. + Are you ready to take the next step {name}? +
+
+
+ );
+}
\ No newline at end of file
diff --git a/code/src/css/activity.css b/code/src/css/activity.css
new file mode 100644
index 000000000..c73758698
--- /dev/null
+++ b/code/src/css/activity.css
@@ -0,0 +1,15 @@
+
+.radio-activity label {
+ font-size: 13px;
+ text-transform: uppercase;
+}
+
+.radioBtn {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ }
+
+ .radioBtn span {
+ margin-left: 8px;
+ }
\ No newline at end of file
diff --git a/code/src/css/index.css b/code/src/css/index.css
new file mode 100644
index 000000000..d24ae563c
--- /dev/null
+++ b/code/src/css/index.css
@@ -0,0 +1,124 @@
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,200;0,300;0,400;1,410;1,500&display=swap');
+
+body {
+ margin: 0;
+ background-color:#0c2c31;
+ font-family: 'Josefin Sans', sans-serif, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: #c5baaa;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ monospace;
+}
+
+p {
+ font-size: 16px;
+ font-weight: 300;
+ padding-left: 20px;
+ padding-right: 20px;
+ max-width: 500px;
+ line-height: 20px;
+}
+
+h4 {
+ font-size: 18px;
+ margin: 0;
+ padding: 20px;
+ font-weight: 300;
+}
+
+.sumh4 {
+ padding-bottom: 0;
+ font-weight: 500;
+}
+
+.main-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.content-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.name-input {
+ font-family: 'Josefin Sans', sans-serif;
+ font-size: 16px;
+ padding: 8px;
+ border: none;
+ border-radius: 3px;
+ color: #0c2c31;
+ background-color: #c5baaa;
+ margin: 20px;
+ min-width: 220px;
+}
+
+.colourForm select {
+ font-family: 'Josefin Sans', sans-serif;
+ font-size: 16px;
+ color: #0c2c31;
+ padding: 10px;
+ border: none;
+ border-radius: 3px;
+ background-color: #c5baaa;
+ margin: 20px;
+ width: 220px;
+}
+
+.submitBtn,
+.startBtn,
+.restartBtn {
+ background-color: #ee7828;
+ border: none;
+ border-radius: 50px;
+ color: #2c2c2c;
+ font-size: 13px;
+ letter-spacing: 2px;
+ margin: 20px;
+ padding: 10px 15px;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+.startBtn:hover,
+.submitBtn:hover,
+.restartBtn:hover {
+ background-color: #806D61;
+ color: #c5baaa;
+}
+
+.button-container {
+ display: flex;
+}
+
+/* top logo */
+.hugImg {
+ max-width:100px;
+ padding-top:30px;
+ padding-bottom: 20px;
+ opacity: 60%;
+}
+
+/* the dot in the end */
+.blurryCircle {
+ filter: blur(3px);
+}
+
+@media (max-width: 668px) {
+ .submitBtn,
+ .startBtn,
+ .restartBtn {
+ margin: 10px;
+ padding: 10px 10px
+ }
+}
\ No newline at end of file
diff --git a/code/src/css/place.css b/code/src/css/place.css
new file mode 100644
index 000000000..40e48aaf5
--- /dev/null
+++ b/code/src/css/place.css
@@ -0,0 +1,46 @@
+.place-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ gap: 20px;
+}
+
+.place-img-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 20px;
+ box-sizing: border-box;
+ margin:auto;
+}
+
+.radio-container {
+ margin-top: 10px;
+ margin-bottom: 30px;
+}
+
+.radio-container label {
+ margin-right: 20px;
+ font-size: 12px;
+ text-transform: uppercase;
+}
+
+.place-img-container img {
+ border-radius: 50%;
+ height: 150px;
+ width: 150px;
+ border: 1px solid #fff;
+}
+
+@media (max-width: 668px) {
+ .place-img-container img {
+ height: 80px;
+ width: 80px;
+ }
+ .radio-container label {
+ margin-right: 8px;
+ font-size: 12px;
+ text-transform: uppercase;
+}
+ }
\ No newline at end of file
diff --git a/code/src/css/start.css b/code/src/css/start.css
new file mode 100644
index 000000000..a336ed8a2
--- /dev/null
+++ b/code/src/css/start.css
@@ -0,0 +1,16 @@
+
+.start-p {
+ color: #c5baaa;
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 28px;
+}
+
+h3 {
+ font-size: 22px;
+ margin: 0;
+ padding-top: 20px;
+ font-weight: 500;
+}
+
+
diff --git a/code/src/css/temp.css b/code/src/css/temp.css
new file mode 100644
index 000000000..63309160b
--- /dev/null
+++ b/code/src/css/temp.css
@@ -0,0 +1,84 @@
+input[type=range] {
+ -webkit-appearance: none;
+ width: 400px;
+ height: 5px;
+ border-radius: 20px;
+ background-color: #c5baaa;
+ outline: none;
+ margin: 20px;
+ }
+
+ input[type=range]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #ee7828;
+ border: 1px solid #c5baaa;
+ cursor: grab;
+ }
+
+ input[type=range]:focus::-webkit-slider-thumb,
+ input[type=range]::-moz-focus-outer::-moz-range-thumb {
+ box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #bbbbbb;
+ }
+
+ input[type=range]::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #ffffff;
+ border: 1px solid #cccccc;
+ cursor: grab;
+ }
+
+ input[type=range]::-ms-track {
+ width: 100%;
+ cursor: pointer;
+ background-color: transparent;
+ border-color: transparent;
+ color: transparent;
+ }
+
+ input[type=range]::-ms-fill-lower {
+ background-color: #dddddd;
+ border-radius: 5px;
+ }
+
+ input[type=range]::-ms-fill-upper {
+ background-color: #dddddd;
+ border-radius: 5px;
+ }
+
+ input[type=range]::-ms-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #ffffff;
+ border: 1px solid #cccccc;
+ cursor: grab;
+ margin-top: -6px;
+ }
+
+ input[type=range]:active::-webkit-slider-thumb {
+ cursor: grabbing;
+ }
+
+ input[type=range]:active::-moz-range-thumb {
+ cursor: grabbing;
+ }
+
+ input[type=range]:active::-ms-thumb {
+ cursor: grabbing;
+ }
+
+ @media (max-width: 668px) {
+ input[type=range] {
+ width: 300px;
+ }
+ }
+
+/* includes vendor prefixes for -webkit- (for Safari and older versions of Chrome),
+ -moz- (for Firefox), and -ms- (for Internet Explorer and Edge). With these prefixes,
+ the slider should be styled consistently across all web browsers.*/
\ No newline at end of file
diff --git a/code/src/img/2ad70500073f8e0f9d45aa9a3e59bcf2.jpeg b/code/src/img/2ad70500073f8e0f9d45aa9a3e59bcf2.jpeg
new file mode 100644
index 000000000..ced71f5b7
Binary files /dev/null and b/code/src/img/2ad70500073f8e0f9d45aa9a3e59bcf2.jpeg differ
diff --git a/code/src/img/cbd264b2fa3db1f03c18c850d73a9261.jpeg b/code/src/img/cbd264b2fa3db1f03c18c850d73a9261.jpeg
new file mode 100644
index 000000000..a963244c5
Binary files /dev/null and b/code/src/img/cbd264b2fa3db1f03c18c850d73a9261.jpeg differ
diff --git a/code/src/img/forest.png b/code/src/img/forest.png
new file mode 100644
index 000000000..5f290b749
Binary files /dev/null and b/code/src/img/forest.png differ
diff --git a/code/src/img/home.png b/code/src/img/home.png
new file mode 100644
index 000000000..ec72c0e48
Binary files /dev/null and b/code/src/img/home.png differ
diff --git a/code/src/img/hug.svg b/code/src/img/hug.svg
new file mode 100644
index 000000000..960b1bb53
--- /dev/null
+++ b/code/src/img/hug.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/code/src/img/ocean.png b/code/src/img/ocean.png
new file mode 100644
index 000000000..4104a664e
Binary files /dev/null and b/code/src/img/ocean.png differ
diff --git a/code/src/index.css b/code/src/index.css
deleted file mode 100644
index 4a1df4db7..000000000
--- a/code/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
-}
diff --git a/code/src/index.js b/code/src/index.js
index 99f6d0de7..ffedaf31a 100644
--- a/code/src/index.js
+++ b/code/src/index.js
@@ -1,6 +1,10 @@
import React from 'react';
import { createRoot } from 'react-dom/client'
-import './index.css'
+import './css/index.css'
+import './css/start.css'
+import './css/place.css'
+import './css/temp.css'
+import './css/activity.css'
import { App } from './App'
const container = document.getElementById('root');
Current step: {step} / 7
+