diff --git a/frontend-react/src/components/Chatbot.js b/frontend-react/src/components/Chatbot.js
deleted file mode 100644
index 2b80524f245c61b6e096e6192326820658e627cb..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/Chatbot.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, {useEffect, useState} from "react";
-import "../images/style.css";
-import Header from "./Header";
-import InputSection from "./InputSection";
-import MessageSection from "./MessageSection";
-import Sidebar from "./Sidebar";
-import io from 'socket.io-client';
-
-import RightMessage from "./Right_message";
-import LeftMessage from "./Left_message";
-
-const socket = io();
-const Chatbot = () => {
-
- const [messages, setMessage] = useState([])
- const [theme, setTheme] = useState('Light');
- const [area, setArea] = useState('msg_sec');
-
- const [update, setUpdate] = useState('https://upload.wikimedia.org/wikipedia/commons/b/bc/Refresh_icon.png');
-
- const greetingMessage = {
- info: "Hey, Welcome to Recipe Selection System, Say Hi to start chat?",
- date: getCurrentTime(),
- type: "left",
- name: "FoodWhizz Bot"
- };
- useEffect(() => {
- setMessage([greetingMessage]);
- }, []);
-
- function handleButtonClick() {
-
- const head = document.getElementById("head");
- const input = document.getElementById("input");
- const input_area = document.getElementById("input_area");
- const container = document.getElementById("container");
- const body = document.getElementsByTagName("body")[0];
- const bar = document.getElementById("sidebar");
- const labels = document.getElementsByTagName("ul")[0];
- if (theme === 'light'){
- setTheme('dark');
- setUpdate("https://upload.wikimedia.org/wikipedia/commons/3/38/Solid_white_bordered.png");
- setArea('msg_sec black');
- head.style.background = '#010507';
- head.style.color = '#ffffff';
- head.style.borderBottom = '3px solid black';
- input.style.background = '#010507';
- input.style.borderTop = '3px solid black';
- input_area.style.background = 'black';
- input_area.style.color = 'white';
- input_area.classList.toggle("placeholder-white");
- body.style.background = 'linear-gradient(135deg, #000102 0%, #173146 100%)';
- container.style.border = '3px solid black';
- container.style.backgroundColor = '#010507';
- bar.style.color = 'black';
- labels.style.color = 'black';
- }
- else {
- setTheme('light');
- setUpdate("https://upload.wikimedia.org/wikipedia/commons/b/bc/Refresh_icon.png");
- setArea('msg_sec');
- head.style.background = '#d0d0d0';
- head.style.color = '#5b5b5b';
- head.style.borderBottom = '3px solid white';
- input.style.background = '#d0d0d0';
- input.style.borderTop = '3px solid white';
- input_area.style.background = 'white';
- input_area.style.color = '#5b5b5b';
- input_area.classList.remove("placeholder-white");
- body.style.background = 'linear-gradient(135deg, #a7acad 0%, #bac5cc 100%)';
- container.style.border = '3px solid white';
- container.style.backgroundColor = '#d0d0d0';
- bar.style.color = 'white';
- labels.style.color = 'white';
- }
-
- };
-
- function AddMes(value_info, value_type) {
- var new_mes_right = Create(value_info, value_type, "User");
- setMessage([...messages, new_mes_right]);
-
- socket.emit('human', value_info)
- socket.on('botmes', (dat) =>{
- const new_mes = Create(data, "left", "Bot");
- setMessages([...messages,new_mes_right,new_mes]);
- })
- }
-
- function getCurrentTime() {
- const date = new Date();
- const hours = date.getHours().toString().padStart(2, '0');
- const minutes = date.getMinutes().toString().padStart(2, '0');
- return `${hours}:${minutes}`;
- }
-
- function Create(value_info, value_type, name){
- let date = new Date();
- let minutes = date.getMinutes().toString();
- if (date.getMinutes() < 10){
- minutes = "0" + minutes.toString();
- }
- return(
- {
- info: value_info,
- date: date.getHours().toString() + ":" + minutes,
- type: value_type,
- name: name
- }
- )
-
- }
-
- function Update() {
- setMessage([greetingMessage])
- }
-
- return (
- <div>
- <input className="down_button" id="top-box" type="checkbox" hidden></input>
- <label className="down_label" htmlFor="top-box"></label>
- <Sidebar func={handleButtonClick}/>
- <div className="main" id="container">
- <Header update={Update} button={update}/>
- <MessageSection messages={messages} area={area}/>
- <InputSection send_button={AddMes}/>
- </div>
- <footer>© Copyright 2023</footer>
- </div>
- );
-};
-
-export default Chatbot;
diff --git a/frontend-react/src/components/Header.js b/frontend-react/src/components/Header.js
deleted file mode 100644
index c0b63a1144d183d4ef665b7a673795c924d6b158..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/Header.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import "../images/style.css";
-
-const Header = (props) => {
- return (
- <div className="header" id="head">Chatbot
- <button className="refresh" type="submit" onClick={props.update}>
- <img className="update hover"
- src="refresh.png"></img>
- </button>
- </div>
- );
-};
-
-export default Header;
\ No newline at end of file
diff --git a/frontend-react/src/components/InputSection.js b/frontend-react/src/components/InputSection.js
deleted file mode 100644
index fd53633d4c384d8a40acd22eb38b59a5c57513ba..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/InputSection.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, {useRef, useState} from "react";
-import '../images/style.css';
-
-const InputSection = (props) => {
-
- const [value , setValue] = useState("")
- const textareaRef = useRef(null);
-
- const handleKeyDown = (event) => {
- if (event.key === 'Enter') {
- event.preventDefault();
- return false;
- }
- };
-
- function HandleSend() {
- if (value !== "") {
- props.send_button(value, "right");
- setValue("")
- }
- }
-
- return(
- <div className="header_bottom" id="input">
- <textarea id="input_section" ref={textareaRef} onKeyDown={handleKeyDown} placeholder="Say Hey to start" value={value} onChange={event => setValue(event.target.value)}></textarea>
- <button className="send_button" type="submit" id="send" onClick={HandleSend}>Send</button>
- </div>
- );
-};
-
-document.addEventListener('keydown', function (event){
- if (event.key === 'Enter') {
- document.getElementById('send').click();
- }
-});
-
-export default InputSection;
\ No newline at end of file
diff --git a/frontend-react/src/components/Left_message.js b/frontend-react/src/components/Left_message.js
deleted file mode 100644
index 2da5facb8cf5cc994bbf46b1345a2fe5234ee4d4..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/Left_message.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import Message from "./Message";
-import '../images/style.css';
-
-const LeftMessage = (props) => {
- return (
- <div className="left_message">
- <div className="icon left"></div>
- <div className="msg left">
- <Message message={props.left_message}></Message>
- </div>
- </div>
- );
-};
-
-export default LeftMessage;
\ No newline at end of file
diff --git a/frontend-react/src/components/Message.js b/frontend-react/src/components/Message.js
deleted file mode 100644
index 937921220b2f9850a35873013d9594d1bbf67423..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/Message.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import '../images/style.css';
-
-const Message = (props) => {
- return (
- <div className="message">
- <div className="msg_info">
- <div className="mes_header">{props.message.name}</div>
- <div className="mes_time">{props.message.data}</div>
- </div>
- <div className="mes_text">{props.message.info}</div>
- </div>
- );
-};
-
-export default Message;
\ No newline at end of file
diff --git a/frontend-react/src/components/MessageSection.js b/frontend-react/src/components/MessageSection.js
deleted file mode 100644
index ee77725d9ad3c35d7212be75018675849ab42811..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/MessageSection.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, {useEffect, useRef} from "react";
-import LeftMessage from "./Left_message";
-import RightMessage from "./Right_message";
-import '../images/style.css';
-
-const MessageSection = (props) => {
- const End = useRef(null)
-
- useEffect(() => {
- if (props.message.length > 0 ) {
- scrollToBottom();
- }
- })
-
- function scrollToBottom() {
- End.current.scrollIntoView({behavior: "smooth"})
- }
-
- return(
- <div className={props.area}>
- {props.message.map(mes => {
- switch (mes.type) {
- case "right":
- return <RightMessage right_message={mes}/>;
- case "left":
- return <LeftMessage left_message={mes}/>
- }
- })}
- <div ref={End}></div>
- </div>
- );
-};
-
-export default MessageSection;
\ No newline at end of file
diff --git a/frontend-react/src/components/Right_message.js b/frontend-react/src/components/Right_message.js
deleted file mode 100644
index 8dc95cdabea5027765e716e037f220c63e8a369c..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/Right_message.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import '../images/style.css';
-import Message from "./Message";
-
-const RightMessage = (props) => {
- return (
- <div className="right_message">
- <div className="icon"></div>
- <div className=" msg right">
- <Message message={props.right_message}/>
- </div>
- </div>
- );
-};
-
-export default RightMessage;
\ No newline at end of file
diff --git a/frontend-react/src/components/Sidebar.js b/frontend-react/src/components/Sidebar.js
deleted file mode 100644
index ef1eb6b16a159a294b5230d4843c3356a48dbaee..0000000000000000000000000000000000000000
--- a/frontend-react/src/components/Sidebar.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import '../images/style.css';
-
-function addText(text_for_sidebar) {
- const area = document.getElementById("text");
- area.innerText = text_for_sidebar;
-}
-
-const Sidebar = (props) => {
-
- return (
- <div id="sidebar">
- <ul>
- <li>
- <button className="bar" id="home">Home</button>
- </li>
- <li>
- <button className="bar"
- onClick={() => addText("Welcome to Recipe Bot WebPage." +
- "This bot is made to help you have proper recipes for the food you would love to have. Team Members:" +
- "Avanish Kumar Singh, Brahim Ghaouthi, Rashid Aghayev,Mamoun Mourad")}>About Us</button>
- </li>
- <li>
- <button className="bar" onClick={() => addText('you can add your emails here:\n' +
- 'Avanish Kumar Singh:avanish.singh@stud.th-deg.de \nMamoun Mourad: \nRashid Aghayev: \nBrahim Ghaouthi: brahim.ghaouthi@stud.th-deg.de')}>Contact
- </button>
- </li>
- <button className="bar" id="dark_theme" onClick={props.func}>Change Mode</button>
- </ul>
- <p id="text"> Welcome to the Recipe Bot WebPage.
- This bot is made to help you have proper recipes for the food you would love to have.
- Team Members: Avanish Kumar Singh, Brahim Ghaouthi, Rashid Aghayev,Mamoun Mourad
- </p>
- </div>
- );
-};
-
-export default Sidebar;
\ No newline at end of file
diff --git a/frontend-react/src/images/icon 1.png b/frontend-react/src/images/icon 1.png
deleted file mode 100644
index 0021bfc7de97a2f71ea81694f48fef892d330a24..0000000000000000000000000000000000000000
Binary files a/frontend-react/src/images/icon 1.png and /dev/null differ
diff --git a/frontend-react/src/images/icon 2.png b/frontend-react/src/images/icon 2.png
deleted file mode 100644
index 70840f057c87d1fab43d94f0de6e493eb9af3d75..0000000000000000000000000000000000000000
Binary files a/frontend-react/src/images/icon 2.png and /dev/null differ
diff --git a/frontend-react/src/images/recipe.jpg b/frontend-react/src/images/recipe.jpg
deleted file mode 100644
index 5315970cb48e4f22baa963d7e175ebcfe56d29a8..0000000000000000000000000000000000000000
Binary files a/frontend-react/src/images/recipe.jpg and /dev/null differ
diff --git a/frontend-react/src/images/refresh.png b/frontend-react/src/images/refresh.png
deleted file mode 100644
index 0c11bafdca4e37dd679a89d834038d067a3ae95e..0000000000000000000000000000000000000000
Binary files a/frontend-react/src/images/refresh.png and /dev/null differ
diff --git a/frontend-react/src/images/reload.png b/frontend-react/src/images/reload.png
deleted file mode 100644
index 228d8c59ec3fdbe692d63af66025dcee0ccc3d74..0000000000000000000000000000000000000000
Binary files a/frontend-react/src/images/reload.png and /dev/null differ
diff --git a/frontend-react/src/images/style.css b/frontend-react/src/images/style.css
deleted file mode 100644
index 3f0e20a31af592c10b7447a11801d16475bea58b..0000000000000000000000000000000000000000
--- a/frontend-react/src/images/style.css
+++ /dev/null
@@ -1,356 +0,0 @@
-body{
- background: linear-gradient(135deg, #a7acad 0%, #bac5cc 100%);
- margin: 0;
-}
-
-
-.main {
- transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
- position: relative;
- height: calc(100vh - 40px);
- max-width: 900px;
- margin: auto;
- margin-top: 20px;
- background-color: #d0d0d0;
- border: 3px solid white;
- border-radius: 30px;
- overflow: hidden;
-}
-
-
-#sidebar {
- background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
- position: absolute;
- top: -250px;
- left: 0;
- width: 100%;
- height: 250px;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
- transition: top 400ms cubic-bezier(0.17,0.04,0.03,0.94);
- color: white;
- font-family: 'Times New Roman';
-}
-
-.down_label {
- display: block;
- position: absolute;
- right: 50px;
- top: 0;
- cursor: pointer;
- background: #fd8d00;
- width: 30px;
- height: 20px;
- border-radius: 0 0 5px 5px;
- color: white;
- font-size: 1em;
- text-align: center;
- cursor: pointer;
- transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
- box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
- padding: 10px;
- z-index: 100;
-}
-
-
-.down_label:hover {
- box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
-}
-
-
-.down_label:after, .down_button:checked + .down_label {
- content: "=";
- font-family: "Arial";
-}
-
-
-.down_button:checked ~ #sidebar {
- top: 0
-}
-
-
-.down_button:checked ~ .down_label {
- top: 250px;
- background-color: #f1ed04;
-}
-
-
-.down_button:checked ~ .main {
- margin-top: 300px
-}
-
-
-ul{
- margin: 0;
- padding: 0;
- background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
- color: white;
-}
-li{
- list-style-type: none;
- display: inline-block;
- color: inherit;
-}
-.bar{
- margin-left: 30px;
- padding: 8px;
- border: none;
- cursor: pointer;
- background: none;
- font-size: 1.3em;
- color: inherit;
- font-family: "Arial";
-}
-
-#home{
- cursor: default;
-}
-.bar:hover{
- transition: 0.3s;
- background: #b5c7c3;
-}
-#dark_theme{
- position: absolute;
- right: 30px;
- margin-top: 0;
- margin-bottom: 0;
-}
-
-#text{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-footer{
- margin: 20px;
- color: #5b5b5b;
-}
-
-.placeholder-white::placeholder {
- color: white;
-}
-
-.msg_area{
- position: absolute;
- width: 100%;
- height: calc(100% - 103px);
- background-image: url("wall 1.jpeg");
- background-size: cover;
- overflow: auto;
-}
-
-.msg_area.black{
- background-image: url("wall 2.jpeg");
-}
-.header{
- margin: auto;
- padding: 10px;
- text-align: center;
- font-size: 1.5em;
- color: #5b5b5b;
- background: #d0d0d0;
- border-bottom: 3px solid white;
- border-top-left-radius: 30px;
- border-top-right-radius: 30px;
- font-family: "Arial";
- font-size: 1.6em;
-}
-.refresh {
- position: absolute;
- top: 10px;
- width: 30px;
- height: 22px;
- right: 20px;
- border: none;
- cursor: pointer;
- appearance: none;
- background-color: inherit;
-}
-.update {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- width: 30px;
- height: 22px;
- transition: .2s;
-}
-.update.hover {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- opacity: 0;
- transition: opacity .2s;
-}
-.refresh:hover .update.hover {
- opacity: 1;
- transform: rotate(180deg);
-}
-.refresh:hover .update {
- opacity: 0;
- transform: rotate(180deg);
-}
-.left_message{
- display: flex;
- max-width: 80%;
- margin-left: 20px;
- margin-top: 20px;
- margin-bottom: 20px;
- word-wrap: break-word;
-}
-.right_message{
- display: flex;
- max-width: 80%;
- flex-direction: row-reverse;
- margin: 20px 20px 20px auto;
- word-wrap: break-word;
-}
-
-.msg{
- min-width: 100px;
- padding: 10px 10px 15px 10px;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- font-family: 'Times New Roman';
- word-wrap: break-word;
-
-}
-.msg.left{
- margin-left: 10px;
- border-bottom-right-radius: 10px;
- background: linear-gradient(135deg, #f1ed04 0%, #be7819 100%);
-}
-.msg.right{
- margin-right: 10px;
- border-bottom-left-radius: 10px;
- color: white;
- background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
-}
-.mes_info{
- display: flex;
- margin-bottom: 5px;
- margin-left: 6px;
- font-weight: bold;
- font-size: 1.2em;
-}
-.mes_header{
- margin-right: 6px;
- max-width: 60%;
-}
-.mes_time{
- margin: auto 1px 5px auto;
- font-size: 0.5em;
-}
-
-.mes_text{
- margin-left: 6px;
- font-size: 1em;
-}
-
-
-@media (min-width: 992px){
- .msg_area{
- height: calc(100% - 101px);
- }
-}
-
-.icon{
- width: 50px;
- height: 50px;
- min-width: 50px;
- margin: auto 0 0 0;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- background-image: image("icon 1.png");
- border-radius: 50%;
-}
-
-.icon.left{
- background-image: image("icon 2.png");
-}
-
-
-.header_bottom{
- position: absolute;
- display: flex;
- width: 100%;
- height: 50px;
- bottom: 0;
- background: #d0d0d0;
- border-top: 3px solid white;
- border-bottom-left-radius: 30px;
- border-bottom-right-radius: 30px;
-}
-#input_area{
- display: flex;
- width: 60%;
- flex: 1;
- margin: 8px 3px 8px 11px;
- padding: 2px 2px 2px 10px;
- border: none;
- border-radius: 5px 5px 5px 15px;
- font-size: 1.3em;
- height: auto;
- overflow-y: auto;
- resize: none;
-}
-.send_button{
- width: 60px;
- margin: 8px 8px 8px 3px;
- cursor: pointer;
- border: none;
- border-radius: 5px 5px 15px 5px;
- color: #ffffff;
- background-color: #f1ed04;
- transition-duration: 0.3s;
- overflow: hidden;
- text-align: center;
-}
-.send_button:hover{
- background-color: #fd8d00;
-}
-
-footer{
- margin-top: 0;
- margin-bottom: 5px;
- margin-left: 20px;
- color: #5b5b5b;
-}
-
-@media (max-width: 767px) {
- .mes_text{
- font-size: 2em;
- }
- .mes_info{
- font-size: 2.5em;
- }
- .msg_area{
- height: calc(100% - 93px);
- }
- .header{
- padding: 5px;
- }
- .refresh{
- top: 5px;
- }
- .bar {
- padding: 6px;
- margin-left: 10px;
- font-size: 0.8em;
- }
-
- #dark_theme {
- right: 10px;
- top: 0.3px;
- }
-
- #text{
- font-size: 0.8em;
- }
-
-}
\ No newline at end of file
diff --git a/frontend-react/src/images/wall 1.jpeg b/frontend-react/src/images/wall 1.jpeg
deleted file mode 100644
index abc0363035bd93bb47ce73162281fb5e60f1f5a6..0000000000000000000000000000000000000000
Binary files a/frontend-react/src/images/wall 1.jpeg and /dev/null differ
diff --git a/frontend-react/src/images/wall 2.jpeg b/frontend-react/src/images/wall 2.jpeg
deleted file mode 100644
index 72eb953ff92cd77b391b33f3a73969c09b6d06dd..0000000000000000000000000000000000000000
Binary files a/frontend-react/src/images/wall 2.jpeg and /dev/null differ
diff --git a/frontend-react/src/index.js b/frontend-react/src/index.js
deleted file mode 100644
index a0eb76ebb56da946bc6108b54bc6648dfd6f0358..0000000000000000000000000000000000000000
--- a/frontend-react/src/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Chatbot from "./components/Chatbot";
-
-ReactDOM.render(
- <Chatbot/>,
- document.getElementById('root')
-);