add frontend

frontend/briefme/package.json

@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.10",

frontend/briefme/src/App.css

@@ -1,38 +1,113 @@
-.App {
-  text-align: center;
+.vertical-container {
+  display: flex;
 }
 
-body {
-  background-color: #fafafa; /* Replace with your desired color */
-}
+.vertical-component-left {
+  flex: 0.35;
+  border-radius: 12px;
+  box-shadow: 0 6px 16px 0 rgba(0,0,0,.2);
+  border-left: 4px solid #ccc;
+  position: relative;
+  z-index: 10;
+  flex-direction: row;
+  justify-content: space-between; 
+  padding: 60px 60px 30px;
+  height: 100vh;
+
+  .title{
+    font-size: 40px;
+    font-weight: 700px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, monospace;
+    line-height: 1.5;
+    overflow-wrap: break-word;
+    flex: 1;
+    margin-top: 50px;
+    margin-bottom: 20px;
+  }
 
+  .description{
+    color: #7f7f75;
+    font-size: 18px;
+    line-height: 1.4;
+    margin-bottom: 50px;
+  }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+  img{
+    width: 100%;
+    height: auto;
   }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
+  .left-footer{
+    display: flex;
+    justify-content: center;
+    margin-top: 100px;
+  }
+
+  a{
+    color: orange;
+  }
+
+  .divider{
+    margin: 0 10px  0px;
+    color: #7f7f75;
+  }
+
+
+
+}
+.vertical-component-right {
+  flex: 1;
   flex-direction: column;
+  background-color: #F7F8FD;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center; /* Align items (input field) horizontally */
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+
+  .container{
+    display: flex;
+    margin-bottom: 50px;
+  }
+
 }
 
-.App-link {
-  color: #61dafb;
+.url-input-textbox{
+  border: 1px dashed #7f7f75;
+  padding: 10px;
+  font-size: 16px;
+  width: 80%;
+  height: 30px;
+  align-items: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.submit-btn{
+  margin-left: auto;
+  height: 50px;
+  width: 140px;
+  background: orange;
+  border: none;
+  font-size: 18px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-radius: 16px;
+}
+
+.summary-textbox{
+  border: 1px solid #dedede;
+  padding: 10px;
+  font-size: 16px;
+  width: 80%;
+  height: 50%;
+  align-items: center;
 }
+
+body {
+  background-color: #fafafa; /* Replace with your desired color */
+}
+
+
+
+
+

frontend/briefme/src/App.js

@@ -1,20 +1,13 @@
 import './App.css';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import Home from './pages/Home';
-import Feedback from './pages/Feeback';
-import Navbar from './components/Navbar';
-import About from './pages/About';
+import Left from './components/Left';
+import Right from './components/Right';
 
 function App() {
   return (
-    <Router>
-      <Navbar/>
-      <Routes>
-        <Route exact path="/" element={<Home/>} />
-        <Route path="/feedback" element={<Feedback/>} />
-        <Route path="/about" element={<About/>} />
-      </Routes>
-    </Router>
+    <div className="vertical-container">
+      <Left />
+      <Right />
+    </div>
   );
 }
 

frontend/briefme/src/components/Left.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+const Left = () => {
+
+  const handleExternalLinkClick = (event) => {
+    event.preventDefault();
+    window.open(event.target.href, '_blank');
+  };
+
+  return (
+    <div className="vertical-component-left">
+      <div className="title">
+        Brief Me
+      </div>
+      <div className="description">
+        Just enter the url of any Youtube video and get summary within few minutes.
+      </div>
+      <img src="image.png" alt="Left Section" className="image"/>
+
+      <footer class="left-footer">
+        <a href="https://github.com/Maleehak/BriefMe" onClick={handleExternalLinkClick}>
+           View on Github
+        </a>
+        <div class="divider">|</div>
+        <a href="https://maleehak.github.io/" onClick={handleExternalLinkClick}>
+           About the Author
+        </a>
+
+      </footer>
+    </div>
+  );
+}
+
+export default Left;

frontend/briefme/src/components/Right.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+
+const Right = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [outputValue, setOutputValue] = useState('');
+
+  const handleChange = (event) => {
+      // Handle changes in the input field
+    setInputValue(event.target.value);
+  };
+
+  const handleClick = () => {
+    console.log('Button clicked!');
+    // Add your custom logic here
+    setOutputValue(inputValue);
+  };
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(inputValue);
+  };
+
+  return (
+    <div className="vertical-component-right">
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder="Enter url here"
+        className="url-input-textbox" 
+      />
+      <div style={{ display: "flex", width: "83%" }}>
+        <button onClick={handleClick} className="submit-btn">
+          Click Me
+        </button>
+      </div>
+      <textarea
+        type="text"
+        value={outputValue}
+        onChange={handleChange}
+        className="summary-textbox" 
+      />
+      <FontAwesomeIcon
+          icon={faClipboard}
+          style={{
+            position: 'absolute',
+            right: '8%',
+            top: '39%',
+            transform: 'translateY(-50%)',
+            cursor: 'pointer'
+          }}
+          onClick={handleCopy}
+      />
+    </div>
+  );
+}
+
+export default Right;