Skip to content
Snippets Groups Projects
Unverified Commit f072ae4b authored by Avanish Singh's avatar Avanish Singh Committed by GitHub
Browse files

Delete frontend-react/src directory

parent e510ca2f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 669 deletions
frontend-react/src/components/Chatbot.js deleted 100644 → 0
+ 0
− 133
View file @ e510ca2f
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>&copy; Copyright 2023</footer>
</div>
);
};
export default Chatbot;
frontend-react/src/components/Header.js deleted 100644 → 0
+ 0
− 15
View file @ e510ca2f
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
frontend-react/src/components/InputSection.js deleted 100644 → 0
+ 0
− 37
View file @ e510ca2f
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
frontend-react/src/components/Left_message.js deleted 100644 → 0
+ 0
− 16
View file @ e510ca2f
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
frontend-react/src/components/Message.js deleted 100644 → 0
+ 0
− 16
View file @ e510ca2f
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
frontend-react/src/components/MessageSection.js deleted 100644 → 0
+ 0
− 34
View file @ e510ca2f
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
frontend-react/src/components/Right_message.js deleted 100644 → 0
+ 0
− 16
View file @ e510ca2f
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
frontend-react/src/components/Sidebar.js deleted 100644 → 0
+ 0
− 38
View file @ e510ca2f
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
frontend-react/src/images/icon 1.png deleted 100644 → 0
+ 0
− 0
View file @ e510ca2f
frontend-react/src/images/icon 1.png

129 KiB

frontend-react/src/images/icon 2.png deleted 100644 → 0
+ 0
− 0
View file @ e510ca2f
frontend-react/src/images/icon 2.png

19.6 KiB

frontend-react/src/images/recipe.jpg deleted 100644 → 0
+ 0
− 0
View file @ e510ca2f
frontend-react/src/images/recipe.jpg

192 KiB

frontend-react/src/images/refresh.png deleted 100644 → 0
+ 0
− 0
View file @ e510ca2f
frontend-react/src/images/refresh.png

18.5 KiB

frontend-react/src/images/reload.png deleted 100644 → 0
+ 0
− 0
View file @ e510ca2f
frontend-react/src/images/reload.png

2.78 KiB

frontend-react/src/images/style.css deleted 100644 → 0
+ 0
− 356
View file @ e510ca2f
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
frontend-react/src/images/wall 1.jpeg deleted 100644 → 0
+ 0
− 0
View file @ e510ca2f
frontend-react/src/images/wall 1.jpeg

156 KiB

frontend-react/src/images/wall 2.jpeg deleted 100644 → 0
+ 0
− 0
View file @ e510ca2f
frontend-react/src/images/wall 2.jpeg

314 KiB

frontend-react/src/index.js deleted 100644 → 0
+ 0
− 8
View file @ e510ca2f
import React from 'react';
import ReactDOM from 'react-dom';
import Chatbot from "./components/Chatbot";
ReactDOM.render(
<Chatbot/>,
document.getElementById('root')
);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment