error 404 page

Anishkagupta04 · Jun 7, 2024 · 2cb55d4 · 2cb55d4
1 parent 1726e6d
commit 2cb55d4
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 0 deletions.
diff --git a/Html-Files/error.css b/Html-Files/error.css
@@ -0,0 +1,114 @@
+/* Baseline styles */
+body {
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f2f2f2;
+  }
+
+  .container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  /* Header styles */
+  header {
+    background-color: #fff;
+    padding: 10px 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .logo {
+    font-size: 24px;
+    font-weight: bold;
+    color: #095a55;
+  }
+
+  /* Main content styles */
+  main {
+    padding-top: 100px;
+    padding-bottom: 50px;
+  }
+
+  .error {
+    text-align: center;
+    padding: 40px;
+    border-radius: 5px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    animation: entrance 0.5s ease-in-out forwards;
+    border: 1px solid #ddd; /* Remove border for two-color scheme */
+  }
+
+  .error h1 {
+    font-size: 100px;
+    color: #095a55;
+    margin-bottom: 20px;
+  }
+
+  .error h2 {
+    font-size: 24px;
+    color: #333; /* Can be adjusted to black for stronger contrast */
+    margin-bottom: 15px;
+  }
+
+  .error p {
+    font-size: 16px;
+    color: #444; /* Can be adjusted to black for stronger contrast */
+    line-height: 1.5;
+  }
+
+  .btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #095a55;
+    color: #fff;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .btn:hover {
+    background-color: #00474a;
+  }
+
+  /* Image hover effect (replace with a healthcare-related image) */
+  .image-container {
+    position: relative;
+    margin: 20px auto;
+    width: 200px; /* Adjust image size */
+    height: 200px; /* Adjust image size */
+  }
+
+  .image-container img {
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  .image-container:hover img {
+    opacity: 0.5;
+  }
+
+  .image-container:hover .overlay {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
+    color: #fff; /* White text */
+    padding: 10px; /* Add padding for text */
+    text-align: center; /* Center text alignment */
+  }
+
+  /* Footer styles */
+  footer {
+    background-color: #f2f2f2;
+    padding: 10px 0;
+    text-align: center;
+  }
+
+  footer p {
+    color: #333; /* Can be adjusted to black for stronger contrast */
+  }
+
diff --git a/Html-Files/error.js b/Html-Files/error.js
@@ -0,0 +1,30 @@
+// Function to adjust navigation based on screen size
+function adjustNav() {
+    const nav = document.querySelector('nav');
+    const windowWidth = window.innerWidth;
+
+    if (windowWidth <= 768) {
+      nav.classList.add('responsive');
+    } else {
+      nav.classList.remove('responsive');
+    }
+  }
+
+  // Call the adjustNav function on initial load and window resize
+  adjustNav();
+  window.addEventListener('resize', adjustNav);
+
+  // Responsive navigation functionality (optional)
+  if (document.querySelector('nav.responsive')) {
+    const navToggle = document.createElement('button');
+    navToggle.classList.add('nav-toggle');
+    navToggle.innerHTML = '<i class="fas fa-bars"></i>'; // Font Awesome icon for menu (replace with your preferred method)
+
+    navToggle.addEventListener('click', () => {
+      const nav = document.querySelector('nav');
+      nav.classList.toggle('active');
+    });
+
+    document.querySelector('header').appendChild(navToggle);
+  }
+
diff --git a/Html-Files/error404.html b/Html-Files/error404.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 - Page Not Found | RapiDoc</title>
+
+  <script src="error.js"></script>
+  <link rel="stylesheet" href="error.css">
+</head>
+<body>
+  <header>
+    <div class="container">
+      <a href="/" class="logo">RapiDoc</a>
+
+    </div>
+  </header>
+
+  <main>
+    <div class="container">
+      <div class="error">
+        <h1>404</h1>
+        <h2>Ooops! Page Not Found</h2>
+        <p>We're sorry, but the page you requested was not found. Perhaps you mistyped the URL or the page has been removed.</p>
+        <a href="/" class="btn">Go Back to Home</a>
+      </div>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; RapiDoc - 2024</p>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "target": "ES2020",
+        "jsx": "react",
+        "allowImportingTsExtensions": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}