Skip to content

2
2022-066
Commit 08b0a716 authored by Navodya Pasqual's avatar Navodya Pasqual
Browse files
Options

UI updated

parent f4168abe
Show whitespace changes
Inline Side-by-side
Showing with 213 additions and 0 deletions
frontend/public/index.html
View file @ 08b0a716
...@@ -10,6 +10,10 @@ ...@@ -10,6 +10,10 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
...@@ -29,6 +33,7 @@ ...@@ -29,6 +33,7 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
...@@ -39,5 +44,9 @@ ...@@ -39,5 +44,9 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous">
</script>
</body> </body>
</html> </html>
frontend/src/classNotes/classNotes.js 0 → 100644
View file @ 08b0a716
import React, { Component } from 'react';
import './style/classNotes.css';
class ClassNotes extends Component {
render() {
return (
<div className="background-material">
<div className="container mt-4 shadow p-3 mb-5 bg-body rounded">
<div>
<p3>UPLOAD THE VIDEO</p3>
<div className="container mt-4 p-3 mb-5 bg-body rounded">
<form
className="row g-3">
<div className="form-group files">
<input
type="file"
className="form-control"
id="lessonURL"
name="lessonURL"
multiple=""
required
/>
</div>
<div className="row g-3">
<button className="button2-submit button-submit">UPLOAD</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
}
export default ClassNotes;
\ No newline at end of file
frontend/src/classNotes/style/classNotes.css 0 → 100644
View file @ 08b0a716
p3 {
font-size: xx-large;
padding-left: 10px;
color: #793179;
font-family: bold;
}
.background-material .h2 {
font-family: bold;
font-weight: normal;
text-align: left;
padding-top: 5px;
}
.background-material .h5{
font-family: bold;
font-weight: bold;
padding-top: 10px;
}
.background-material .h6{
font-family: bold;
font-weight: bold;
padding-top: 10px;
}
.label{
color: #793179;
}
.form{
padding-top: 10px;
}
.background-material .label{
color: black;
}
.background-material .form{
padding-top: 0px;
padding-left: 50px;
padding-right: 50px;
}
.background-material .card-body{
color: #3F71AE;
}
.background-material li {
font-weight: bold;
font-family: inter;
}
.background-material .button {
background-color: #7a067a;
}
.background-material img{
position: absolute;
right: 100px;
width: 180px;
}
.background-material card{
color: #8f9296;
}
.background-view--material .top{
position: absolute;
right: 0px;
width: 190px;
}
.background h1{
color: #793179;
font-weight: bold;
}
.background h5{
color: #803480;
font-weight: bold;
}
.background i{
color: #7a067a;
}
.background label{
color: #6b556b;
}
.files input {
outline: 2px dashed #92b0b3;
outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
padding: 120px 0px 85px 35%;
text-align: center !important;
margin: 0;
width: 100% !important;
}
.files input:focus{ outline: 2px dashed #92b0b3; outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
}
.files{ position:relative}
.files:after { pointer-events: none;
position: absolute;
top: 60px;
left: 0;
width: 50px;
right: 0;
height: 56px;
content: "";
background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
display: block;
margin: 0 auto;
background-size: 100%;
background-repeat: no-repeat;
}
.color input{ background-color:#f1f1f1;}
.files:before {
position: absolute;
bottom: 10px;
left: 0; pointer-events: none;
width: 100%;
right: 0;
height: 57px;
content: " or drag it here. ";
display: block;
margin: 0 auto;
color: #2ea591;
font-weight: 600;
text-transform: capitalize;
text-align: center;
}
.button-submit{
border: none;
padding: 6px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-size: 17px;
}
.button2-submit {
background-color: rgba(0, 40, 83, 1);
color: white;
font-weight: bold;
border: 2px solid rgba(0, 40, 83, 1);
}
.button2-submit:hover {
background-color: rgb(2, 54, 110);
color: #ffffff;
border: 2px solid rgb(1, 58, 119);
transform: scale(1.01);
}
frontend/src/components/navBar/navbar.js
View file @ 08b0a716
...@@ -29,6 +29,7 @@ const Navbar = () => { ...@@ -29,6 +29,7 @@ const Navbar = () => {
<p><Link style={isActive(history, '/')} to="/">Home</Link></p> <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p> <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '#')} to="#">Digital human</Link></p> <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
<p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p> <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
<p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p> <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
</div> </div>
...@@ -49,6 +50,7 @@ const Navbar = () => { ...@@ -49,6 +50,7 @@ const Navbar = () => {
<p><Link style={isActive(history, '/')} to="/">Home</Link></p> <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
<p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p> <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
<p><Link style={isActive(history, '#')} to="#">Digital human</Link></p> <p><Link style={isActive(history, '#')} to="#">Digital human</Link></p>
<p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
<p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p> <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
<p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p> <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
</div> </div>
......
frontend/src/routes/pageRoutes.js
View file @ 08b0a716
...@@ -8,6 +8,7 @@ import AboutUs from '../main/AboutUs/aboutUs'; ...@@ -8,6 +8,7 @@ import AboutUs from '../main/AboutUs/aboutUs';
import SignUp from '../main/SignUp/signUp'; import SignUp from '../main/SignUp/signUp';
import Login from '../main/Login/login'; import Login from '../main/Login/login';
import ContactUs from '../main/ContactUs/contactUs'; import ContactUs from '../main/ContactUs/contactUs';
import ClassNotes from '../classNotes/classNotes';
function PageRoutes() { function PageRoutes() {
return ( return (
...@@ -21,6 +22,7 @@ function PageRoutes() { ...@@ -21,6 +22,7 @@ function PageRoutes() {
<Route path="/contact-us" component={ContactUs}/> <Route path="/contact-us" component={ContactUs}/>
<Route path="/register" component={SignUp}/> <Route path="/register" component={SignUp}/>
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>
<Route path="/class-notes" component={ClassNotes}/>
</Switch> </Switch>
</section> </section>
</Router> </Router>
......
Markdown is supported
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