Skip to content

Commit de76f6d

Browse files
N0v0cain3N0v0cain3
authored
Merge pull request #14 from SidharthMishra-07/master
Profile Page Done Matches Updated
2 parents 9cac2eb + c9e04fe commit de76f6d

File tree

10 files changed

+267
-125
lines changed

10 files changed

+267
-125
lines changed

‎frontend/src/App.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Moreinfo from "./Pages/Moreinfo.js";
77
import Account from "./Pages/Account.js";
88
import Match from "./Pages/Match.js";
99
import LandingSection from "./components/LandingSection/LandingSection";
10+
import Matches from "./Pages/Matches";
1011
import {
1112
BrowserRouter as Router,
1213
Switch,
@@ -28,20 +29,22 @@ function App() {
2829
<Route exact path="/Moreinfo">
2930
<Moreinfo/>
3031
</Route>
32+
<Route exact path="/Matches">
33+
<Matches/>
34+
</Route>
3135
<Route exact path="/">
3236
{loggedin ? (
3337
<LandingSection/>
3438
) : (
35-
<Account switch={islogin} toggle={(gaga) => setIslogin(gaga)}></Account>
39+
<Account switch={islogin} toggle={(gaga) => setIslogin(gaga)}/>
3640
)}
3741

3842
<div className="question">
39-
<QnA></QnA>
40-
{/* <Match></Match> */}
43+
<QnA/>
4144
</div>
4245

4346
<div className="footer">
44-
<Footer></Footer>
47+
<Footer/>
4548
</div>
4649
</Route>
4750
</Switch>

‎frontend/src/Pages/Matches.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.w-100 {
2+
width: 100% !important;
3+
height: 75vh;
4+
}
5+
.MatchingTitle{
6+
font-size: 2.3rem;
7+
color: #fff;
8+
9+
}

‎frontend/src/Pages/Matches.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from "react";
2+
import Carousel from "react-bootstrap/Carousel";
3+
import { Modal,Button } from "react-bootstrap";
4+
import "./Matches.css";
5+
function MyVerticallyCenteredModal(props) {
6+
return (
7+
<Modal
8+
{...props}
9+
size="lg"
10+
aria-labelledby="contained-modal-title-vcenter"
11+
centered
12+
>
13+
<Modal.Header closeButton>
14+
<Modal.Title id="contained-modal-title-vcenter">
15+
Modal heading
16+
</Modal.Title>
17+
</Modal.Header>
18+
<Modal.Body >
19+
<h4>Centered Modal</h4>
20+
<p>
21+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ex optio obcaecati, officiis deserunt modi aperiam accusamus accusantium soluta totam vitae similique sapiente nihil vel inventore eum in, sit animi ut delectus esse voluptas excepturi neque sunt? Laborum sit nostrum temporibus laudantium impedit doloremque optio tempora possimus ut, est quaerat recusandae quibusdam dignissimos provident, explicabo repellendus dolore? Ex velit, possimus quis quam temporibus doloremque nobis. Labore neque inventore iusto veniam, dolorum ipsa nihil facilis quod nobis? Error cupiditate sit similique tenetur fugit distinctio fuga eveniet eligendi porro voluptas, enim, maiores vero hic, magnam rerum placeat dolor. Facere, inventore. Sequi, qui!
22+
</p>
23+
</Modal.Body>
24+
<Modal.Footer>
25+
<Button onClick={props.onHide} variant="success">Accept </Button>
26+
<Button onClick={props.onHide} variant="danger">Reject</Button>
27+
</Modal.Footer>
28+
</Modal>
29+
);
30+
}
31+
const Matches = () => {
32+
const [modalShow, setModalShow] = React.useState(false);
33+
return (
34+
<div className="container">
35+
<Carousel>
36+
<Carousel.Item onClick={() => setModalShow(true)}>
37+
<img
38+
className="d-block w-100"
39+
src="https://source.unsplash.com/WLUHO9A_xik/500x500"
40+
alt="First slide"
41+
/>
42+
43+
</Carousel.Item >
44+
<Carousel.Item onClick={() => setModalShow(true)}>
45+
<img
46+
className="d-block w-100"
47+
src="https://source.unsplash.com/user/erondu/500x500"
48+
alt="Second slide"
49+
/>
50+
51+
52+
</Carousel.Item>
53+
<Carousel.Item onClick={() => setModalShow(true)}>
54+
<img
55+
className="d-block w-100"
56+
src="https://source.unsplash.com/user/erondu/500x500"
57+
alt="Third slide"
58+
/>
59+
60+
</Carousel.Item>
61+
</Carousel>
62+
<MyVerticallyCenteredModal
63+
show={modalShow}
64+
onHide={() => setModalShow(false)}
65+
/>
66+
</div>
67+
68+
);
69+
};
70+
71+
export default Matches;

‎frontend/src/Pages/Moreinfo.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
body{
2+
background-color: rgb(26, 15, 15);
3+
}
4+
.MoreInfoTitle{
5+
color: white;
6+
font-size: 2.5rem;
7+
}
8+
.MoreInfoProfile{
9+
background-color: #FE0074;
10+
margin-bottom: 6.5rem;
11+
}
12+
.img-div{
13+
height: "60px";
14+
width: "60px";
15+
16+
}
17+
.uploadImg{
18+
width: "100%";
19+
height: "100%";
20+
position: "absolute";
21+
}
22+
.MoreInfoForm label{
23+
color: #ED3B9D;
24+
font-size: 1.3rem;
25+
}
26+
127
.infomsg{
228
padding-left:100px;
329
padding-top:30px;

‎frontend/src/Pages/Moreinfo.js

Lines changed: 119 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,126 @@
1-
import React, { useState } from "react";
2-
import Form from "react-bootstrap/Form";
3-
import Button from "react-bootstrap/Button";
1+
import React from "react";
2+
import { useState } from "react";
43
import '../components/Login.css';
54
import './Moreinfo.css';
6-
import '../components/ProfileSection/ProfileSection.css';
5+
import ReactDOM from "react-dom";
76

8-
function Moreinfo() {
9-
const [email, setEmail] = useState("");
10-
const [password, setPassword] = useState("");
11-
12-
function validateForm() {
13-
return email.length > 0 && password.length > 0;
14-
}
15-
16-
function handleSubmit(event) {
17-
event.preventDefault();
7+
8+
function Moreinfo() {
9+
const [email, setEmail] = useState("");
10+
const [password, setPassword] = useState("");
11+
12+
function handleSubmit(event) {
13+
event.preventDefault();
14+
}
15+
//Uploading Profile Pic
16+
const uploadedImage = React.useRef(null);
17+
const imageUploader = React.useRef(null);
18+
19+
const handleImageUpload = e => {
20+
const [file] = e.target.files;
21+
if (file) {
22+
const reader = new FileReader();
23+
const { current } = uploadedImage;
24+
current.file = file;
25+
reader.onload = e => {
26+
current.src = e.target.result;
27+
};
28+
reader.readAsDataURL(file);
1829
}
19-
20-
return (
21-
<>
22-
<section id="profile">
23-
24-
<main className="frm">
25-
<div class="pfp">
26-
<img src="http:\\placehold.it\1000x1000" class="pfpimg"></img>
27-
</div>
28-
<div className="pfpdetails">
29-
<span class="pink">Your Name</span>
30-
+91 1023456789
31-
</div>
32-
<div class="frmmain">
33-
<span class="pink">About me</span>
34-
<input type="text" class="input"></input>
35-
<span class="pink">Expectations</span>
36-
<input type="text" class="input"></input>
37-
<span class="pink">Gender</span>
38-
<label class="container opt1">
39-
Male
40-
<input type="radio" name="radio"></input>
41-
<span class="checkmark"></span>
42-
</label>
43-
<label class="container">
44-
Female
45-
<input type="radio" name="radio"></input>
46-
<span class="checkmark"></span>
47-
</label>
48-
<label class="container">
49-
Other
50-
<input type="radio" name="radio"></input>
51-
<span class="checkmark"></span>
52-
</label>
53-
<span class="pink">Timetable</span>
54-
<input type="file" class="file"></input>
55-
</div>
56-
</main>
57-
</section>
30+
};
31+
//Redirecting to another page after submitting
32+
33+
return (
34+
<>
35+
<div className="MoreInfoTitle my-4">
36+
<h2 className="text-center">Tell Us About Yourself !</h2>
37+
</div>
5838

59-
<div className="infomsg">
60-
<h3> Tell us about you</h3>
39+
<div className="container MoreInfoProfile">
40+
<form method=" " onSubmit={this.submitForm.bind(this)}>
41+
<div className="row">
42+
<div className="col-md-4 mt-4 mb-3 mx-3 img-div">
43+
<input type="file" accept="image/*" onChange={handleImageUpload} ref={imageUploader} style={{ display: "none" }} />
44+
<div className="img-div" onClick={() => imageUploader.current.click()}>
45+
<img
46+
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
47+
ref={uploadedImage}
48+
style={{
49+
width: "100%",
50+
height: "100%",
51+
position: "absolute",
52+
}}
53+
/>
54+
</div>
55+
</div>
56+
57+
<div className="col-md-6 mt-3">
58+
<div className="profile-head mt-3">
59+
<div className="row mb-3">
60+
<div className="col">
61+
<input type="text" className="form-control input-sm" placeholder="Your Name" aria-label="First name" />
62+
</div>
63+
<div className="col">
64+
<input type="number" className="form-control input-sm" placeholder="Conatact Number" aria-label="Last name" />
65+
</div>
66+
</div>
67+
<div className="row col-sm-6 mt-2">
68+
<select className="form-select" aria-label="Default select example">
69+
<option selected>Select Your Gender</option>
70+
<option value="1">Male</option>
71+
<option value="2">Female</option>
72+
<option value="3">Other</option>
73+
</select>
74+
</div>
75+
76+
<div className="mb-3 mt-4 ">
77+
<textarea className="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Share a few lines about yourself "></textarea>
78+
</div>
79+
<div className="mb-3 mt-4 ">
80+
<textarea className="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Mention Some of your Qualities "></textarea>
81+
</div>
82+
83+
<div className="col-14 mb-4 ">
84+
<button type="submit" className="btn btn-dark btn-default">Submit</button>
85+
</div>
86+
87+
</div>
88+
</div>
89+
</div>
90+
</form>
6191
</div>
62-
<div className="moreinfo">
63-
<Form onSubmit={handleSubmit}>
64-
<Form.Group size="lg" controlId="email">
65-
<Form.Label style={{ padding:"0px 0px 20px 0px" }}>Enter your full name*</Form.Label>
66-
<Form.Control style={{ border:"0px 5px" }} className ="input"
67-
autoFocus
68-
type="email"
69-
value={email}
70-
onChange={(e) => setEmail(e.target.value)}
71-
/>
72-
</Form.Group>
73-
<Form.Group size="lg" controlId="number">
74-
<Form.Label style={{ padding:"0px 0px 20px 0px" }}>Enter your phone number*</Form.Label>
75-
<Form.Control className="input"
76-
type="number"
77-
value={password}
78-
onChange={(e) => setPassword(e.target.value)}
79-
/>
80-
</Form.Group>
81-
82-
<Button className="moreinfobutton" block size="lg" type="submit" disabled={!validateForm()}>
83-
Submit
84-
</Button>
85-
</Form>
92+
93+
<div className="footer">
94+
<div className="row">
95+
<div className="footer col-lg-6">
96+
<div className="cl">
97+
<h4> Connect With Us </h4>
98+
</div>
99+
</div>
100+
101+
<div class="footer-content">
102+
<h4>Follow us on</h4>
103+
<ul class="socials">
104+
<li><a href="https://www.facebook.com/codechefvit/"><i class="fa fa-facebook-square"></i></a></li>
105+
<li><a href="https://twitter.com/codechefvit?lang=en"><i class="fa fa-twitter"></i></a></li>
106+
<li><a href="https://www.instagram.com/codechefvit/?hl=en"><i class="fa fa-instagram"></i></a></li>
107+
<li><a href="https://github.com/CodeChefVIT?language=java"><i class="fa fa-github"></i></a></li>
108+
<li><a href="https://www.linkedin.com/company/codechef-vit-chapter/mycompany/"><i
109+
class="fa fa-linkedin-square"></i></a></li>
110+
</ul>
111+
</div>
112+
<div class="footer-bottom">
113+
<p> &copy; Copyright 2021 | Made With 💜 by
114+
<a href="http://www.codechefvit.com" target="_blank">
115+
<span> CodeChef-VIT</span>
116+
</a>
117+
</p>
118+
</div>
119+
120+
</div>
86121
</div>
87-
</>
88-
89-
);
90-
}
91-
export default Moreinfo;
92-
93-
122+
</>
123+
);
124+
}
125+
export default Moreinfo;
126+

‎frontend/src/components/Footer.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.footer{
2+
width: 100%;
23
padding:20px ;
34
color:white;
45
background-color:black;

0 commit comments

Comments
 (0)