Pages Linked

public/index.html

@@ -31,6 +31,8 @@
  src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"
  ></script>
 
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+
  <!-- Bootstrap Scripts -->
  <script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"

src/App.css

@@ -11,6 +11,11 @@
  height: 100%;
 }
 
+.forNavbar{
+ position: relative;
+ z-index: 110;
+}
+
 .App {
  text-align: center;
 }
@@ -20,6 +25,11 @@
  pointer-events: none;
 }
 
+.login-logo{
+ height: 13vmin;
+ pointer-events: none;
+}
+
 @media (prefers-reduced-motion: no-preference) {
  .App-logo {
  animation: App-logo-spin infinite 20s linear;

src/App.js

@@ -1,36 +1,24 @@
 import React from "react";
-import './App.css'
-import Footer from "../src/Components/Footer";
-import Navbar from "../src/Components/Navbar/Navbar";
-import Img from "../src/Components/Img.png"
-import background from "../src/Components/images/show_everyone.jpeg";
-import Maincard from "../src/MainpageCards/Maincard"
+import './App.css';
+import SignInSide from "./Components/login/logIn"; // Login Page Component
+import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
+import Main from "./main";
+import HomepageMain from "./Homepage/HomepageMain/Mainhome";
+import Doctormainpage from "./HomepageSubparts/Doctors/doctorsmainpage";
+
 
 function App() {
  return (
+
  <div>
- <div className="App">
- <Navbar></Navbar>
- <img className="image" src={background} alt="background-image" />
- </div>
- <div>
- <Maincard></Maincard>
- <br></br>
- </div>
- <div className="page-container">
- <div className="content-wrap"></div>
- <div className="Footer-img" style={{backgroundImage: `url(${Img})`}}>
- <div className="Footer-img-content">
- <p>Get in touch</p>
- <button type="button" class="btn btn-outline-info btn-sm">
- Contact us
- </button>
- </div>
- </div>
- <Footer />
- </div>
+ <Route exact path='/' component={Main}></Route>
+ <Route path='/signup' component={SignInSide}></Route>
+ <Route path='/homepage' component={HomepageMain}></Route>
+ <Route path='/expertdoctors' component={Doctormainpage}></Route>
+
  </div>
+
+
  );
 }
 export default App;
-

src/Components/Navbar/Navbar.css

@@ -20,6 +20,11 @@
  cursor: pointer;
 }
 
+.navba-links 
+{
+ margin-top: 1rem;
+}
+
 .fa-react {
  margin-left: 0.5rem;
  font-size: 1.6rem;

src/Components/Navbar/Navbar.js

@@ -2,6 +2,12 @@ import React, { Component } from 'react';
 import { MenuItems } from "./MenuItems"
 import { Button } from "../Button"
 import './Navbar.css'
+import {Link} from 'react-router-dom'
+
+function handleSignup()
+{
+ alert("Hello");
+}
 
 class Navbar extends Component {
  state = { clicked: false }
@@ -10,6 +16,11 @@ class Navbar extends Component {
  this.setState({ clicked: !this.state.clicked })
  }
 
+ // handleSignup()
+ // {
+ // alert("Hello");
+ // }
+
  render() {
  return(
  <div><nav className="NavbarItems">
@@ -20,15 +31,15 @@ class Navbar extends Component {
  <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
  {MenuItems.map((item, index) => {
  return (
- <li key={index}>
+ <li className="navba-links" key={index}>
  <a className={item.cName} href={item.url}>
  {item.title}
  </a>
  </li>
  )
  })}
  </ul>
- <Button>Sign Up</Button>
+ <Link to='/signup'>Sign Up</Link>
  </nav>
  {/* <img className="image" src={background} alt="background-image" /> */}
  </div>

src/Components/login/logIn.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Link from '@material-ui/core/Link';
+import Paper from '@material-ui/core/Paper';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import logoapp from "./image/logo5.png";
+import {Link as Linked} from 'react-router-dom'
+
+function Copyright() {
+ return (
+ <Typography variant="body2" color="textSecondary" align="center">
+ {'Copyright © '}
+ <Link color="inherit" href="">
+ Soothe
+ </Link>{' '}
+ {new Date().getFullYear()}
+ {'.'}
+ </Typography>
+ );
+}
+
+function handleClick() // Function for Ananya to handle when user clicks on Sign Up Button
+{
+ alert("Sign up - Modify Ananya");
+}
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ height: '100vh',
+ },
+// backgroundImage: 'url(https://source.unsplash.com/random)',
+ image: {
+ backgroundImage: 'url(https://i.ibb.co/4Mz6S19/temp.jpg)',
+ backgroundRepeat: 'no-repeat',
+ backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
+ },
+ paper: {
+ margin: theme.spacing(8, 4),
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ avatar: {
+ margin: theme.spacing(1),
+ backgroundColor: theme.palette.secondary.main,
+ },
+ form: {
+ width: '100%', // Fix IE 11 issue.
+ marginTop: theme.spacing(1),
+ },
+ submit: {
+ margin: theme.spacing(3, 0, 2),
+ },
+}));
+
+export default function SignInSide() {
+ const classes = useStyles();
+//classes.image
+ return (
+ <Grid container component="main" className={classes.root}>
+ <CssBaseline />
+ <Grid item xs={false} sm={4} md={7} className={classes.image} />
+ <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+ <div className={classes.paper}>
+ <img src={logoapp} className="login-logo" alt="logo" />
+ <div>
+ <br></br>
+ <br></br></div>
+ <Avatar className={classes.avatar}>
+ <LockOutlinedIcon />
+ </Avatar>
+ <Typography component="h1" variant="h5">
+ Sign in
+ </Typography>
+ <form className={classes.form} noValidate>
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id="email"
+ label="Email Address"
+ name="email"
+ autoComplete="email"
+ autoFocus
+ />
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ name="password"
+ label="Password"
+ type="password"
+ id="password"
+ autoComplete="current-password"
+ />
+ <FormControlLabel
+ control={<Checkbox value="remember" color="primary" />}
+ label="Remember me"
+ />
+
+
+ <Grid container>
+ <Grid item xs>
+ <Link href="#" variant="body2">
+ Forgot password?
+ </Link>
+ </Grid>
+ <Grid item>
+ <Link href="#" variant="body2">
+ {"Don't have an account? Sign Up"}
+ </Link>
+ </Grid>
+ </Grid>
+ <center><Linked to='/homepage'>Sign Up</Linked></center>
+ <Box mt={5}>
+ <Copyright />
+ </Box>
+ </form>
+ </div>
+ </Grid>
+ </Grid>
+ );
+}

src/Homepage/HomepageComponents/Assignment/assessmentstyle.css

@@ -0,0 +1,87 @@
+.AssignmentMainContainer{
+ width: 76%;
+ margin-left: 295px;
+ display:block;
+ box-shadow: 0 0 10px #ffc4c6;
+ margin-bottom: 20px;
+ margin-top: 90px;
+
+}
+.AssignmentContainer{
+ margin-bottom:0px;
+ padding-top: 30px;
+ padding-bottom: 20px;
+}
+.Assignmentbtn{
+ display: flex;
+ justify-content: space-between;
+ margin: 20px;
+}
+.AssignmentCardContent{
+ justify-content: space-between;
+ display: flex;
+ margin: 10px;
+ margin-bottom: 20px;
+}
+
+.AssignmentDescription{
+ width: 60%;
+}
+
+.cardHeader2{
+ text-transform: capitalize;
+ font-size: 22px;
+ padding-right: 595px;
+ box-sizing: border-box;
+ letter-spacing: 2px;
+ color: #333;
+ text-align: right;
+
+}
+
+.AssignmentDescriptionContent{
+ font-size: 20px;
+ color: black;
+ font-weight: 350;
+ padding-right: 10px;
+}
+.AssignmentImage{
+ width: 350px;
+ height: 350px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ opacity: 1;
+
+
+}
+
+.AssignmentImageContainer{
+ padding-left: 20px;
+}
+
+
+.round-button {
+ display:block;
+ width:180px;
+ height:35px;
+ line-height:35px;
+ border: 0.01px solid #f98282;
+ border-radius: 5px;
+ color:#f98282;
+ letter-spacing: 1px;
+ text-align:center;
+ text-decoration:none;
+ background: #ffffff;
+ font-size:18px;
+ font-weight:500px;
+ margin: 0 auto;
+}
+.round-button:hover {
+ background: #f98282;
+ color: white;
+ text-decoration: none;
+ transform: scale(1.05); 
+
+
+}

src/Homepage/HomepageComponents/Assignment/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import './assessmentstyle.css'
+import assessmentHome from '../../HomepageAssets/assessmentHome.jpg'
+
+const Assignment = props => {
+ return (
+ <div className="AssignmentMainContainer">
+ <div className="AssignmentContainer" style={{boxSizing: 'border-box'}}> 
+ <div className="cardHeader2">
+ <h2>Assessment</h2>
+ </div>
+ <div className="AssignmentCardContent">
+ <div className="AssignmentImageContainer">
+ <img className="AssignmentImage" src={assessmentHome}></img>
+ </div>
+ <div className="AssignmentDescription">
+ <p className="AssignmentDescriptionContent">When you’re going through a tough time it’s normal to feel down for a while, emotions like sadness and grief help make us human. But if you’re feeling sad or miserable most of the time over a long period of time, you might have depression.</p>
+ <p className="AssignmentDescriptionContent">Think about the last two weeks, rather than just today or yesterday. Take this self-test to help figure out whether you’re showing any of the warning signs of depression. This won’t give you a diagnosis but it will help you decide the next step.</p>
+ <br></br>
+ <div className="Assignmentbtn">
+ <a href="http:https://example.com" class="round-button">Depression Test</a>
+ <a href="http:https://example.com" class="round-button">Anxiety Test</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
+export default Assignment