Skip to content

Commit

Permalink
Board 24-25
Browse files Browse the repository at this point in the history
  • Loading branch information
@Archit-arch
Archit-arch committed Sep 9, 2024
1 parent 9a5c698 commit e020743
Show file tree
Hide file tree
Showing 12 changed files with 12,561 additions and 239 deletions.
12,371 changes: 12,371 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"moss": "file:",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
Expand Down
247 changes: 97 additions & 150 deletions src/Components/Contact/Contact.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,197 +10,144 @@ import { MdEmail } from "react-icons/md";
import { TiTick } from "react-icons/ti";
import robot from "../../assets/robot.gif";
import tyRobot from "../../assets/ty-robot.png";

export default function Contact() {
const [count, setCount] = useState(0);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [msg, setMsg] = useState("");

const updateCount = (c) => {
document.getElementById(`c${c}`).style.opacity = 0;
document.getElementById(`btn-id`).style.opacity = 0;
if ((count === 1 && name) || (count === 2 && email) || (count === 3 && msg)) {
document.getElementById(`c${c}`).style.opacity = 0;
document.getElementById(`btn-id`).style.opacity = 0;

setTimeout(() => {
setCount(count + 1);
setTimeout(() => {
document.getElementById(`c${c + 1}`).style.opacity = 1;
document.getElementById(`btn-id`).style.opacity = 1;
setCount(count + 1);
setTimeout(() => {
document.getElementById(`c${c + 1}`).style.opacity = 1;
document.getElementById(`btn-id`).style.opacity = 1;
}, 500);
}, 500);
}, 500);
} else {
alert("Please fill in the required fields before proceeding.");
}
};

useEffect(() => {
if (count == 4) {
if (count === 4) {
setTimeout(() => {
window.location.reload();
}, 5000);
}
}, [count]);
const handleKeyDown = (e) => {
if (count == 1) {
if (name) {
if (e.key === 'Enter') {
updateCount(count)
}
}

}
if (count == 2) {
if (email) {
if (e.key === 'Enter') {
updateCount(count)
}
}

}
if (count == 3) {
if (msg) {
if (e.key === 'Enter') {
updateCount(count)
}
}
const handleKeyDown = (e) => {
if (e.key === "Enter") updateCount(count);
};

}
}
return (
<div id="contact" className="contact-container">
<form action="https://formsubmit.co/[email protected]" method="POST">
<input type="hidden" name="_subject" value="Website Contact Form Submission"/>
<input type="hidden" name="_captcha" value="false"/>
<input type="hidden" name="_autoresponse" value="Thank you for reaching out to us. We will get back to you shortly."/>
<input type="hidden" name="_template" value="box"/>
<input type="hidden" name="_next" value="https://moss-manipal.netlify.app/home"/>
<input type={"hidden"} name="Name:" value={name}/>
<input type={"hidden"} name="Email:" value={email}/>


{count == 0 && <div className="contact-title">Contact Us</div>}
{count == 0 && (
<div className="contact-h3" id={"c0"}>
Team MOSS is looking forward to getting in touch with you
</div>
)}
{count == 1 && (
<>

<div className="contact-h" id={"c1"}>
Please Tell Us Your Name
</div>
<div>
<input
placeholder=""
onChange={(e) => setName(e.target.value)}
className="c-form-inp"
onKeyDown={(e) => { handleKeyDown(e) }}
name="Name"
></input>
</div>
</>
)}
{count == 2 && (
<>
<div className="contact-h" id={"c2"}>
Hi {name}, could you please provide your email address
</div>
<div>
<input
placeholder=""
onChange={(e) => setEmail(e.target.value)}
className="c-form-inp"
onKeyDown={(e) => { handleKeyDown(e) }}
></input>
</div>
</>

)}
{count == 3 && (
<>

<div className="contact-h" id={"c3"}>
What would you like to talk to us regarding?
</div>
<div>
<input
placeholder=""
onChange={(e) => setMsg(e.target.value)}
className="c-form-inp"
onKeyDown={(e) => { handleKeyDown(e) }}
name="Message"
></input>
</div>
</>
<input type="hidden" name="_subject" value="Website Contact Form Submission" />
<input type="hidden" name="_captcha" value="false" />
<input type="hidden" name="_autoresponse" value="Thank you for reaching out to us. We will get back to you shortly." />
<input type="hidden" name="_template" value="box" />
<input type="hidden" name="_next" value="https://moss-manipal.netlify.app/home" />
<input type="hidden" name="Name:" value={name} />
<input type="hidden" name="Email:" value={email} />

)}
{count == 4 && (
<div className="ty">
<img src={tyRobot} className="ty-robot" id={"c4"} />
<div className="contact-h2">
We have recieved your message, will get back to you shortly.
</div>
</div>
)}
<div>
{count == 0 && (
<button
type={'button'}
className="next-btn"
style={{ opacity: 1 }}
id="btn-id"
onClick={() => updateCount(count)}
>
NEXT >
</button>
{count === 0 && (
<>
<div className="contact-title">Contact Us</div>
<div className="contact-h3" id="c0">
Team MOSS is looking forward to getting in touch with you
</div>
</>
)}
{count == 1 && (

<div>
{count === 1 && (
<>
<div className="contact-h" id="c1">
Please Tell Us Your Name
</div>
<div>
<input
placeholder="Your Name"
onChange={(e) => setName(e.target.value)}
className="c-form-inp"
onKeyDown={handleKeyDown}
name="Name"
/>
</div>
</>
)}

<button
type={'button'}
className="next-btn-2"
id="btn-id"
onClick={() => updateCount(count)}
>
<AiOutlineDoubleRight className="dr" />
</button>
</div>
{count === 2 && (
<>
<div className="contact-h" id="c2">
Hi {name}, could you please provide your email address?
</div>
<div>
<input
type="email"
placeholder="Your Email"
onChange={(e) => setEmail(e.target.value)}
className="c-form-inp"
onKeyDown={handleKeyDown}
name="Email"
/>
</div>
</>
)}
{count == 2 && (

<div>
{count === 3 && (
<>
<div className="contact-h" id="c3">
What would you like to talk to us about?
</div>
<div>
<input
placeholder="Your Message"
onChange={(e) => setMsg(e.target.value)}
className="c-form-inp"
onKeyDown={handleKeyDown}
name="Message"
/>
</div>
</>
)}

<button
type={'button'}
className="next-btn-2"
id="btn-id"
onClick={() => updateCount(count)}
>
<AiOutlineDoubleRight className="dr" />
</button>
{count === 4 && (
<div className="ty">
<img src={tyRobot} className="ty-robot" id="c4" />
<div className="contact-h2">
We have received your message. We'll get back to you shortly.
</div>
</div>
)}
{count == 3 && (
<div>

<div>
{count !== 4 && <img src={robot} className="robot-gif" id={count === 0 ? "robot-gif2" : ""} />}

{count !== 4 && (
<button
type={count === 3 ? "submit" : "button"}
className="next-btn-2"
id="btn-id"
onClick={() => updateCount(count)}
type="submit"
>
<TiTick className="dr" />
{count === 3 ? <TiTick className="dr" /> : <AiOutlineDoubleRight className="dr" />}
</button>
</div>
)}
{count != 4 && <img src={robot} className="robot-gif" id={count==0 && 'robot-gif2'}/>}
</div>
)}
</div>
</form>

<div className="icon-container">
<a
href="https://www.linkedin.com/company/manipal-open-source-society/"
target={"_blank"}
>
<a href="https://www.linkedin.com/company/manipal-open-source-society/" target="_blank">
<AiFillLinkedin className="contact-icon" />
</a>
<a href="https://www.instagram.com/moss.manipal/" target={"_blank"}>
<a href="https://www.instagram.com/moss.manipal/" target="_blank">
<AiFillInstagram className="contact-icon" />
</a>
<a href="mailto:[email protected]" target="_top">
Expand Down
15 changes: 14 additions & 1 deletion src/Pages/Team/Team.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,27 @@
height: 12rem;
margin-bottom: 10rem;
}
.team-img {
/*.team-img {
width: 10rem;
border-radius: 50%;
margin-bottom: 1rem;
transform: translateY(-50%);
border: 5px solid #729084;
padding: 2px;
}
*/
.team-img {
width: 10rem; /* Adjust this to the desired uniform size */
height: 10rem; /* Make height equal to width for uniformity */
border-radius: 50%; /* Ensures round images */
margin-bottom: 1rem;
transform: translateY(-50%);
border: 5px solid #729084;
padding: 2px;
object-fit: cover; /* Ensures the image fills the container without distortion */
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Adds consistent shadow */
}


#basic-nav-dropdown {
position: absolute;
Expand Down
Loading

0 comments on commit e020743

Please sign in to comment.