diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/1_2_oder_3_repos.iml b/.idea/1_2_oder_3_repos.iml
new file mode 100644
index 0000000..0c8867d
--- /dev/null
+++ b/.idea/1_2_oder_3_repos.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..cf88509
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..1867361
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/idea.txt b/idea.txt
index 37ab66c..63007f7 100644
--- a/idea.txt
+++ b/idea.txt
@@ -5,3 +5,5 @@ we must determine and provide area in which the answer options are defined (tape
tasks:
- get camera
+- get coloured hats (red, yellow and blue )*2 oder papier
+- frontend is seperated from backend
\ No newline at end of file
diff --git a/ip adressen.txt b/ip adressen.txt
new file mode 100644
index 0000000..33602c6
--- /dev/null
+++ b/ip adressen.txt
@@ -0,0 +1,3 @@
+Bilal IP : 192.168.50.130
+Youssef: 192.168.50.226
+David: 192.168.50.79
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index e69de29..885cfc9 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -0,0 +1 @@
+Flask~=2.3.1
\ No newline at end of file
diff --git a/src_folder/Object-Detection/detect.py b/src_folder/BackEnd/detect.py
similarity index 100%
rename from src_folder/Object-Detection/detect.py
rename to src_folder/BackEnd/detect.py
diff --git a/src_folder/BackEnd/test_flask_server.py b/src_folder/BackEnd/test_flask_server.py
new file mode 100644
index 0000000..729fd87
--- /dev/null
+++ b/src_folder/BackEnd/test_flask_server.py
@@ -0,0 +1,15 @@
+from flask import Flask, jsonify
+app = Flask(__name__)
+
+
+
+@app.route('/GETQUESTION', methods=['GET'])
+def hello():
+ return jsonify({'TEST': 'Dies ist eine Testfrage',
+ 'firstanswer': 'erste Antwort',
+ 'secondanswer': 'zweite Antwort',
+ 'thirdanswer': 'dritte Antwort'})
+
+
+if __name__ == '__main__':
+ app.run(host='127.0.0.1', port=5555, debug=True)
diff --git a/src_folder/FrontEnd/12oder3-logo.png b/src_folder/FrontEnd/12oder3-logo.png
new file mode 100644
index 0000000..0472bf0
Binary files /dev/null and b/src_folder/FrontEnd/12oder3-logo.png differ
diff --git a/src_folder/FrontEnd/icons8-time.gif b/src_folder/FrontEnd/icons8-time.gif
new file mode 100644
index 0000000..85d0634
Binary files /dev/null and b/src_folder/FrontEnd/icons8-time.gif differ
diff --git a/src_folder/FrontEnd/index.css b/src_folder/FrontEnd/index.css
new file mode 100644
index 0000000..52a3650
--- /dev/null
+++ b/src_folder/FrontEnd/index.css
@@ -0,0 +1,78 @@
+h1 {
+ text-align: center;
+}
+
+div {
+ text-align: center;
+}
+#MainHeading {
+}
+#MainHeadingPic {
+ max-width: 10%;
+}
+
+#buttondiv {
+ display: inline;
+ margin: auto;
+}
+#startbutton {
+ scale: 120%;
+}
+#nextbutton {
+ visibility: hidden;
+}
+#questiondiv{
+ margin-top: 20px;
+}
+#question {
+ margin: auto;
+ height: 50px;
+ width: 600px;
+ border-style: solid;
+ padding-bottom: 20px;
+}
+
+#answerdiv {
+ display: flex;
+}
+
+#timerdiv {
+ margin-bottom: 20px;
+ padding-bottom: 20px;
+ padding-top: 20px;
+}
+
+#timer {
+ display: inline;
+
+}
+
+#timerpic{
+ max-width: 10%;
+ margin-bottom: -20px;
+}
+#answerdiv{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+}
+.answerbox {
+ width: 300px;
+ height: 100px;
+ border-style: solid;
+}
+#firstanswerbox {
+ border-color: red;
+ background-color: red;
+}
+
+#secondanswerbox {
+ border-color: yellow;
+ background-color: yellow;
+}
+
+#thirdanswerbox {
+ border-color: blue;
+ background-color: blue;
+}
\ No newline at end of file
diff --git a/src_folder/FrontEnd/index.html b/src_folder/FrontEnd/index.html
new file mode 100644
index 0000000..49798f2
--- /dev/null
+++ b/src_folder/FrontEnd/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+
Question
+
+
+
+
+
+
+
+
+
+
+
Time
+
+
+
+Punktestand der Teams
+
+
\ No newline at end of file
diff --git a/src_folder/FrontEnd/index.js b/src_folder/FrontEnd/index.js
new file mode 100644
index 0000000..f02c779
--- /dev/null
+++ b/src_folder/FrontEnd/index.js
@@ -0,0 +1,62 @@
+let question_var = document.getElementById("question")
+let firstanswer_var = document.getElementById("firstquestion")
+let secondanswer_var = document.getElementById("secondquestion")
+let thirdanswer_var = document.getElementById("thirdanswer")
+let nextbutton = document.getElementById("nextbutton")
+let startbutton = document.getElementById("startbutton")
+let i = 1
+let startgame = true
+let intervallid;
+let secondsleft = 10;
+const xhr = new XMLHttpRequest();
+const url = "http://127.0.0.1:5555/GETQUESTION";
+
+function ChangeStatus(boolean) {
+ return boolean !== true;
+}
+
+function getQuestion(){
+ // TODO: MAKE HTTP REQUEST TO GET QUESTION FROM BACKEND
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data);
+ document.getElementById("question").innerText = data['TEST'];
+ document.getElementById("firstanswer").innerText = data['firstanswer'];
+ document.getElementById("secondanswer").innerText = data['secondanswer'];
+ document.getElementById("thirdanswer").innerText = data['thirdanswer'];
+
+
+ })
+ .catch(error => console.error(error));
+
+ console.log("Question got");
+ document.getElementById("question").innerText = (i++).toString() + ". Question ";
+}
+
+function nextQuestion(){
+ console.log("nextQuestion clicked")
+ getQuestion()
+ secondsleft=10;
+ timerstart()
+}
+function startGame() {
+ startgame = (startgame !== true);
+ console.log("Button clicked");
+ if (startgame === false){
+ }
+ document.getElementById("nextbutton").style.visibility = "visible";
+ document.getElementById("startbutton").style.visibility = "hidden";
+ getQuestion();
+ timerstart()
+}
+
+function timerstart() {
+ intervallid = setInterval(function() {
+ document.getElementById('timer').textContent = secondsleft;
+ if (secondsleft === 0) {
+ clearInterval(intervallid);
+ }
+ secondsleft--;
+ }, 1000);
+}
\ No newline at end of file
diff --git a/src_folder/UI_and_DB/database.py b/src_folder/UI_and_DB/database.py
deleted file mode 100644
index e69de29..0000000
diff --git a/src_folder/UI_and_DB/ui.py b/src_folder/UI_and_DB/ui.py
deleted file mode 100644
index d8a1ba4..0000000
--- a/src_folder/UI_and_DB/ui.py
+++ /dev/null
@@ -1,18 +0,0 @@
-import tkinter as tk
-
-def button_callback():
- print("Button was clicked")
-
-# Create the main window
-window = tk.Tk()
-
-# Add a label to the window
-label = tk.Label(text="Hello, World!")
-label.pack()
-
-# Add a button to the window
-button = tk.Button(text="Click me!", command=button_callback)
-button.pack()
-
-# Run the main loop to display the window
-window.mainloop()