diff --git a/user-frontend/src/App.css b/user-frontend/src/App.css
index 74b5e053450a48a6bdb4d71aad648e7af821975c..60f82c29ef5725ad57345b3f262f9bdacf58867a 100644
--- a/user-frontend/src/App.css
+++ b/user-frontend/src/App.css
@@ -1,38 +1,37 @@
-.App {
- text-align: center;
+.container {
+ /*display: flex;*/
+ justify-content: center;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
+.fill {
+ min-height: 100%;
+ height: 100%;
+ align-content: center;
}
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
+.bottomButtons {
+ position:absolute;
+ bottom:0;
}
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
+.imageInside {
+ display: block;
+ max-width:100%;
+ max-height:100%;
}
-.App-link {
- color: #61dafb;
+.image-to-fit {
+ max-width: 100%;
+ max-height: 100%;
}
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.spaceInsideAndOutside {
+ padding: 30px;
+ margin: 30px;
+}
+
+
+
+.text-in-center {
+ text-align: center;
}
diff --git a/user-frontend/src/App.js b/user-frontend/src/App.js
index 37845757234ccb68531c10cf7a2ffc589c47e342..59185dac881ca8b3e50a83c6bea37172192654a2 100644
--- a/user-frontend/src/App.js
+++ b/user-frontend/src/App.js
@@ -1,25 +1,198 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
+import React, { Component } from "react"
+import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './App.css'
+
+import Welcome from "./components/WelcomeScreen.js";
+import Question from "./components/QuestionPage.js";
+import Activity from "./components/ActivityPage.js";
+import Wissenssnack from "./components/WissenssnackPage.js";
+import Result from "./components/ResultScreen";
+
+
+import unisport_logo from './components/images/logo_unisport.png';
+
+
+
+/*function App(){
+ return(
+ <React.Fragment>
+
+ <Welcome />
+ <Question />
+ <Activity/>
+ <Wissenssnack/>
+ <Result/>
+
+ </React.Fragment>
);
}
+export default App;*/
+
+class App extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ WelcomeScreen: true,
+ QuestionPage: false,
+ WissenssnackPage: false,
+ ActivityPage: false,
+ ResultScreen: false
+ };
+
+ this.welcome = this.welcome.bind(this);
+ this.question = this.question.bind(this);
+ this.wissenssnack = this.wissenssnack.bind(this);
+ this.activity = this.activity.bind(this);
+ this.result = this.result.bind(this);
+ };
+
+ changeStateTo(nextPage) {
+ this.setState({
+ WelcomeScreen: nextPage === 'welcome' ? true : false,
+ QuestionPage: nextPage === 'question' ? true : false,
+ WissenssnackPage: nextPage === 'wissenssnack' ? true : false,
+ ActivityPage: nextPage === 'activity' ? true : false,
+ ResultScreen : nextPage === 'result' ? true : false
+ })
+ }
+
+ welcome() {
+ this.changeStateTo('welcome');
+ }
+ question() {
+ this.changeStateTo('question');
+ }
+ wissenssnack() {
+ this.changeStateTo('wissensnack');
+ }
+ activity() {
+ this.changeStateTo('activity');
+ }
+ result() {
+ this.changeStateTo('result');
+ }
+
+
+ render() {
+
+ return (
+ <div className="container fill">
+ <div className="row">
+ <div className="col-md-3">
+ <img className="img" src={unisport_logo} alt="unisport-logo"/>
+ </div>
+ <div className="col-md-6"></div>
+ <div className="col-md-3">
+ <div id="unisport-logo">
+ <img className="img" src={unisport_logo} alt="unisport-logo"/>
+ </div>
+ </div>
+ </div>
+
+ <div className="row">
+ {this.state.WelcomeScreen ? <Welcome /> : null}
+ {this.state.QuestionPage ? <Question /> : null}
+ {this.state.WissenssnackPage ? <Wissenssnack /> : null}
+ {this.state.ActivityPage ? <Activity /> : null}
+ {this.state.ResultScreen ? <Result /> : null}
+ </div>
+
+ <div className="row">
+ <div className="bottomButtons" role="group">
+ <button className="btn btn-success" onClick={this.welcome}>Show Welcome</button>
+ <button className="btn btn-success" onClick={this.question}>Show Question</button>
+ <button className="btn btn-success" onClick={this.wissenssnack}>Show Wissenssnack</button>
+ <button className="btn btn-success" onClick={this.activity}>Show Activity</button>
+ <button className="btn btn-success" onClick={this.result}>Show Result</button>
+ </div>
+ </div>
+
+
+ </div>
+ );
+ }
+};
export default App;
+
+ReactDOM.render(
+ <App />,
+ document.getElementById("root")
+);
+
+/* class App extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ sportArts: {
+ sportart: "sportArt",
+ field: "outdoor",
+ einzelsport: false,
+ mannschaftssport: "false",
+ ausdauer: "false",
+ kraft: "false",
+ kampfsport: "false",
+ technischakrobatisch: "nein"
+ },
+ sportArts_list: []
+
+ };
+ };
+
+ async componentDidMount() {
+ try {
+ //TODO: change adress to relative
+ const res = await fetch('http://127.0.0.1:8000/api/sport/');
+ const sportArts_list = await res.json();
+ console.log(sportArts_list);
+ this.setState({
+ sportArts_list
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ renderItems = () => {
+
+ const newItems = this.state.sportArts_list;
+ console.log(newItems);
+ return newItems.map(item => (
+ <li
+ key={item.id}
+ className="list-group-item"
+ >
+ <span
+ className = {`mr-2 `}
+ title={item.field}
+ >
+ <h1>{item.sportart}</h1>
+ </span>
+ </li>
+ ));
+ };
+
+
+
+
+ render() {
+ return (
+ <main className="content">
+ <div className="row">
+ <div className="col-md-6 col-sm-10 mx-auto p-0">
+ <div className="card p-3">
+ <ul className="list-group list-group-flush">
+ {this.renderItems()}
+ </ul>
+ </div>
+ </div>
+ </div>
+ </main>
+ )
+ }
+}
+ */
+
+
diff --git a/user-frontend/src/components/ActivityPage.js b/user-frontend/src/components/ActivityPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e6d5cff31f99f0b7f0957a3f7ed4a6e665223aa
--- /dev/null
+++ b/user-frontend/src/components/ActivityPage.js
@@ -0,0 +1,37 @@
+import React from "react";
+import activeImage from './images/aktiv.png'
+
+
+function Activity(){
+ return(
+ <div>
+ <div className="row">
+ <h1 className="text-in-center">Jetzt Wird's Aktiv!</h1>
+ </div>
+ <div className="row">
+ <div className="col-md-3"></div>
+ <div className="col-md-3 spaceInsideAndOutside">
+ <h3>Stehe auf, <br></br>beuge dich mit gestrecktem Rücken nach vorne <br></br> und greife deinen Stuhl</h3>
+ </div>
+ <div className="col-md-3 spaceInsideAndOutside">
+ <div classname="imageInside" id="activeImage">
+ <img className="image-to-fit" src={activeImage} alt='active_img'/>
+ </div>
+ </div>
+ <div className="col-md-3"></div>
+ </div>
+ <div className="row">
+ <div className="col-md-4"></div>
+ <div className="col-md-2">
+ <button className="btn btn-secondary w-100" id="backButton" type="button">back</button>
+ </div>
+ <div className="col-md-2">
+ <button className="btn btn-primary w-100" id="nextButton" type="button">next</button>
+ </div>
+ <div className="col-md-4"></div>
+ </div>
+ </div>
+ );
+}
+
+export default Activity;
\ No newline at end of file
diff --git a/user-frontend/src/components/QuestionPage.js b/user-frontend/src/components/QuestionPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..6bf2a2598228149550616a88a7f23c5fc386d896
--- /dev/null
+++ b/user-frontend/src/components/QuestionPage.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+function Question(){
+ return(
+ <div className="row">
+ <div>
+ <p id="text1">Welcome By</p>
+
+ <input type="radio" id="not_agree_entirely" />
+ <label for="male">not agree entirely</label>
+ <br/>
+ <input type="radio" id="not_agree" />
+ <label for="male">not agree</label>
+ <br/>
+ <input type="radio" id="agree" />
+ <label for="female">agree</label>
+ <br/>
+ <input type="radio" id="agree_entirely"/>
+ <label for="other">agree entirely</label>
+ </div>
+
+ <div>
+ <button className="btn btn-success" id="backButton" type="button">back</button>
+ <button className="btn btn-success" id="nextButton" type="button">next</button>
+ </div>
+ </div>
+ );
+}
+
+export default Question;
\ No newline at end of file
diff --git a/user-frontend/src/components/ResultScreen.js b/user-frontend/src/components/ResultScreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..668830935cc33b94d381fb346ae7fb6c3d5eadaa
--- /dev/null
+++ b/user-frontend/src/components/ResultScreen.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+function Result(){
+ return(
+ <div className="row">
+ <div>
+ <p>Aufgrund Deiner Angaben empfeglen wir Dir folgende Sportarten</p>
+ <p>Klick einfach auf die Sportart, um weiter Details zu erfahren!</p>
+ <ul>
+ <li>sport1</li>
+ <li>sport2</li>
+ <li>sport3</li>
+ </ul>
+ </div>
+
+ <div>
+ <button className="btn btn-success" id="backButton" type="button">back</button>
+ </div>
+ </div>
+ );
+}
+
+export default Result;
\ No newline at end of file
diff --git a/user-frontend/src/components/TestAppPage.js b/user-frontend/src/components/TestAppPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..f61fe88ee6bfef9e8682c707afa458c0f22b2fd4
--- /dev/null
+++ b/user-frontend/src/components/TestAppPage.js
@@ -0,0 +1,71 @@
+class App extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ sportArts: {
+ sportart: "sportArt",
+ field: "outdoor",
+ einzelsport: false,
+ mannschaftssport: "false",
+ ausdauer: "false",
+ kraft: "false",
+ kampfsport: "false",
+ technischakrobatisch: "nein"
+ },
+ sportArts_list: []
+
+ };
+ };
+
+ async componentDidMount() {
+ try {
+ //TODO: change adress to relative
+ const res = await fetch('http://127.0.0.1:8000/api/sport/');
+ const sportArts_list = await res.json();
+ console.log(sportArts_list);
+ this.setState({
+ sportArts_list
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ renderItems = () => {
+
+ const newItems = this.state.sportArts_list;
+ console.log(newItems);
+ return newItems.map(item => (
+ <li
+ key={item.id}
+ className="list-group-item"
+ >
+ <span
+ className = {`mr-2 `}
+ title={item.field}
+ >
+ <h1>{item.sportart}</h1>
+ </span>
+ </li>
+ ));
+ };
+
+
+
+
+ render() {
+ return (
+ <main className="content">
+ <div className="row">
+ <div className="col-md-6 col-sm-10 mx-auto p-0">
+ <div className="card p-3">
+ <ul className="list-group list-group-flush">
+ {/*this.renderItems()*/ 1+1}
+ </ul>
+ </div>
+ </div>
+ </div>
+ </main>
+ )
+ }
+ }
\ No newline at end of file
diff --git a/user-frontend/src/components/WelcomeScreen.js b/user-frontend/src/components/WelcomeScreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..a8f703c3d45dd27ed704259c37d1f06fcfac9cb2
--- /dev/null
+++ b/user-frontend/src/components/WelcomeScreen.js
@@ -0,0 +1,36 @@
+import React from "react";
+import './css/WelcomeScreen.css';
+import project_logo from './images/logo_unisport_o_mat.jpg'
+
+
+function Welcome(){
+ return(
+ <div>
+ <div className="row">
+ <div className="col-md-3"></div>
+ <div className="col-md-6">
+ <div id="unisportSportOMatLogo">
+ <img className="img-fluid w-100 rounded" src={project_logo} alt="unisport-o-mat-logo"/>
+ </div>
+ </div>
+ <div className="col-md-3"></div>
+ </div>
+
+ <div className="row">
+ <div id="welcome-text">
+ <p className="text-in-center">Beantworte die Fragen und finde heraus, welcher Sport zu dir am besten passt!</p>
+ </div>
+ </div>
+
+ <div className="row">
+ <div className="col-sm-3"></div>
+ <div className="col-sm-6">
+ <button className="btn btn-primary btn-lg w-100" id="nextButton" type="button">Go!</button>
+ </div>
+ <div className="col-sm-3"></div>
+ </div>
+ </div>
+ );
+}
+
+export default Welcome;
\ No newline at end of file
diff --git a/user-frontend/src/components/WissenssnackPage.js b/user-frontend/src/components/WissenssnackPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..8496a00f44c8dd84d48f488da37334856527584c
--- /dev/null
+++ b/user-frontend/src/components/WissenssnackPage.js
@@ -0,0 +1,23 @@
+import React from "react";
+import unisport_logo from './images/logo_unisport.png';
+
+
+
+function Wissenssnack(){
+ return(
+ <div className="row">
+ <div>
+ <p >Wusstest Du...?</p>
+ <p >Wissenssnack_text</p>
+ </div>
+ <p>=====================================</p>
+
+ <div>
+ <button className="btn btn-primary" id="backButton" type="button">back</button>
+ <button className="btn btn-primary" id="nextButton" type="button">next</button>
+ </div>
+ </div>
+ );
+}
+
+export default Wissenssnack;
\ No newline at end of file
diff --git a/user-frontend/src/components/css/WelcomeScreen.css b/user-frontend/src/components/css/WelcomeScreen.css
new file mode 100644
index 0000000000000000000000000000000000000000..65554e25aade34a51bd16bafddfe7e02752b73e2
--- /dev/null
+++ b/user-frontend/src/components/css/WelcomeScreen.css
@@ -0,0 +1,39 @@
+/*welcome screen styles*/
+/*.welcomeScreen#MainContainer {
+ position: absolute;
+ width: 1440px;
+ height: 1024px;
+ left: 0px;
+ top: 0px;
+ background: #CD2525;
+ }
+ .welcomeScreen#rightSide {
+ position: absolute;
+ width: 660px;
+ height: 1024px;
+ left: 780px;
+ top: 0px;
+ background: #003466;
+}
+.welcomeScreen#leftSide {
+ position: absolute;
+ width: 780px;
+ height: 1024px;
+ left: 0px;
+ top: 0px;
+ background: #FFFFFF;
+}
+
+//WELCOME BY
+.welcomeScreen#text1{ position: absolute;
+ width: 612px;
+ height: 148px;
+ left: 87px;
+ top: 272px;
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: bold;
+ font-size: 52px;
+ line-height: 61px;
+ text-align: center;
+ color: #003466; }*/
\ No newline at end of file
diff --git a/user-frontend/src/components/images/aktiv.png b/user-frontend/src/components/images/aktiv.png
new file mode 100644
index 0000000000000000000000000000000000000000..df14ed826f24069c75bdb0c03d96c555a4cc8a1b
Binary files /dev/null and b/user-frontend/src/components/images/aktiv.png differ
diff --git a/user-frontend/src/components/images/logo_unisport.png b/user-frontend/src/components/images/logo_unisport.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5ea6729711f04a0fb4cf88b693a6d037b0ebec4
Binary files /dev/null and b/user-frontend/src/components/images/logo_unisport.png differ
diff --git a/user-frontend/src/components/images/logo_unisport_o_mat.jpg b/user-frontend/src/components/images/logo_unisport_o_mat.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ef8bfc3a97c3dbfae811de5dcfd033478c33b63f
Binary files /dev/null and b/user-frontend/src/components/images/logo_unisport_o_mat.jpg differ
diff --git a/user-frontend/src/index.css b/user-frontend/src/index.css
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..10d4c3da96e3b85ce2f595c8e62bda556bc0ea20 100644
--- a/user-frontend/src/index.css
+++ b/user-frontend/src/index.css
@@ -1,13 +1,60 @@
-body {
+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;
+ padding: 0;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+
+/*//welcome screen styles
+.welcomeScreen#MainContainer{
+ position: absolute;
+ width: 1440px;
+ height: 1024px;
+ left: 0px;
+ top: 0px;
+ background: #CD2525;
+}
+.welcomeScreen#rightSide{
+ position: absolute;
+ width: 660px;
+ height: 1024px;
+ left: 780px;
+ top: 0px;
+ background: #003466;
+}
+.welcomeScreen#leftSide{
+ position: absolute;
+ width: 780px;
+ height: 1024px;
+ left: 0px;
+ top: 0px;
+ background: #FFFFFF;
}
+// WELCOME BY
+.welcomeScreen#text1{
+ position: absolute;
+ width: 612px;
+ height: 148px;
+ left: 87px;
+ top: 272px;
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: bold;
+ font-size: 52px;
+ line-height: 61px;
+ text-align: center;
+ color: #003466;
+}*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/user-frontend/src/index.html b/user-frontend/src/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4cc80d7b33afc8c95845750d49454d3aefcf31f3
--- /dev/null
+++ b/user-frontend/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+ <title>Unisport-O-Mat</title>
+ <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+ <div id="root"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/user-frontend/src/index.js b/user-frontend/src/index.js
index 6ab5bc45f803b7966dbfc5e0c2fe619dd01c35da..10beb545397dff69dd641633f6fc6e64a07ff83c 100644
--- a/user-frontend/src/index.js
+++ b/user-frontend/src/index.js
@@ -1,9 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
-import 'bootstrap/dist/css/bootstrap.css';
+
ReactDOM.render(
<React.StrictMode>