Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Error404 Module and Modify App.jsx #28

Merged
merged 2 commits into from
Jan 28, 2025
Merged

Add Error404 Module and Modify App.jsx #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bfd0cc9
Add Error404 module and modify App.jsx & index.html
Swapnadip2005 Jan 27, 2025
e0b6661
Add Error404 module and modify App.jsx & index.html
Swapnadip2005 Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 20 additions & 15 deletions Frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Anton+SC&family=Comfortaa:wght@300..700&family=Holtwood+One+SC&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WallGodds</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Anton+SC&family=Comfortaa:wght@300..700&family=Holtwood+One+SC&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WallGodds</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions Frontend/src/Components/ErrorModule/Error404.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from "react";
import styles from "./Error404.module.css";
import arrow from "./Error404Assests/Arrow.svg";
import circle from "./Error404Assests/Circle.svg";
import triangle from "./Error404Assests/Triangle.svg";
import square from "./Error404Assests/Square.svg";

const Error404 = () => {
return (
<div className={styles.container}>
<div className={styles.container_top}>
<div className={styles.elements}>
<img src={circle} alt="" />
<img src={triangle} alt="" />
<img src={square} alt="" />
</div>
</div>
<div className={styles.container_bottom}>
<h1 className={styles.errorCode}><span>404</span>: Is that heaven?</h1>
<p className={styles.errorMessage}>
Sorry, you took a wrong turn at the Pearly Gates. Looks like you're stuck with us mere mortals. Try finding the right path before the angels start gossiping.
</p>
</div>
<div className={styles.homeThisWay}>
<div className={styles.homeMessage}>
<h1>Home this <span>way</span></h1>
<img src={arrow} alt="" />
</div>
</div>
<button className={styles.pageNotFound}>Page Not Found</button>
</div>
);
};

export default Error404;
168 changes: 168 additions & 0 deletions Frontend/src/Components/ErrorModule/Error404.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html,
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}

.container {
position: relative;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-radius: 20px;
box-shadow: -21px 4px 60.7px 0px #C1C1C1;
margin: 20px 10%;
}

.container_top {
background-color: #008fff;
height: 70px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 20px 20px 0 0;
}

.elements {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 4%;
gap: 10px;
}

.elements > img {
width: 25px;
}

.errorCode {
position: relative;
text-align: center;
text-transform: uppercase;
font-family: "Rubik Mono One", serif;
font-weight: 400;
font-style: normal;
font-size: 55px;
margin: 3% 10px 4% 10px;
color: white;
text-shadow: 5px 5px black;
-webkit-text-stroke: 1.5px black;
}

.errorCode > span {
color: #F8CC06;
}

.errorMessage {
text-align: center;
font-family: "Comfortaa", sans-serif;
margin: 0 11%;
font-size: 23px;
font-weight: 700;
margin: 3% 7%;
padding: 0 40px;
background: -webkit-linear-gradient(right, #FF5959, #2A00FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.homeThisWay {
background-color: #DFD1FC;
border-radius: 10px;
border: 1px solid #000000;
margin: 2% 10px 0 10px;
padding: 1.5% 2%;
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 5%;
}

.homeMessage {
width: 100%;
display: flex;
align-items: center;
gap: 30px;
}

.homeMessage > img {
width: 40px;
}

.homeMessage > h1 {
text-align: center;
text-transform: uppercase;
font-family: "Rubik Mono One", serif;
font-weight: 400;
font-style: normal;
font-size: 40px;
color: white;
text-shadow: 3px 3px black;
-webkit-text-stroke: 1.5px black;
}

.homeMessage > h1 > span {
color: #F8CC06;
}

.pageNotFound {
background-color: transparent;
position: absolute;
border-radius: 10px;
border: 1px solid #808080;
font-family: "Comfortaa", sans-serif;
color: #808080;
font-size: 0.8rem;
font-weight: 400;
right: 0;
bottom: -55px;
padding: 5px 25px;
}

@media (max-width: 768px) {
.container_top {
height: 50px;
}
.elements {
gap: 7px;
margin: 0 5%;
}
.elements > img {
width: 15px;
}
.errorCode {
font-size: 30px;
text-shadow: 3px 2px black;
}
.errorMessage {
font-size: 15px;
padding: 0 15px;
}
.homeMessage {
gap: 15px;
}
.homeMessage > img {
width: 25px;
}
.homeMessage > h1 {
font-size: 25px;
text-shadow: 1.5px 1.5px black;
}
.pageNotFound {
border-radius: 8px;
font-size: 0.6rem;
bottom: -40px;
}
}
5 changes: 5 additions & 0 deletions Frontend/src/Components/ErrorModule/Error404Assests/Arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions Frontend/src/Components/ErrorModule/Error404Assests/Circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions Frontend/src/Components/ErrorModule/Error404Assests/Square.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions Frontend/src/Components/ErrorModule/Error404Assests/Triangle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading