diff --git a/Hospital_Management_Website b/Hospital_Management_Website new file mode 160000 index 0000000..48dbd7b --- /dev/null +++ b/Hospital_Management_Website @@ -0,0 +1 @@ +Subproject commit 48dbd7b334ef1d60e649a37e6c9be4557b442f09 diff --git a/client/src/assets/hero-bg.webp b/client/src/assets/hero-bg.webp new file mode 100644 index 0000000..5a74433 Binary files /dev/null and b/client/src/assets/hero-bg.webp differ diff --git a/client/src/components/AboutCard.js b/client/src/components/AboutCard.js index 691ffbd..f683eb5 100644 --- a/client/src/components/AboutCard.js +++ b/client/src/components/AboutCard.js @@ -27,6 +27,4 @@ const AboutCard = ({ title, icon, shortText, fullText }) => { ); }; -export default AboutCard; - - +export default AboutCard; \ No newline at end of file diff --git a/client/src/components/AboutCard.module.css b/client/src/components/AboutCard.module.css index 63f59fb..41b59fa 100644 --- a/client/src/components/AboutCard.module.css +++ b/client/src/components/AboutCard.module.css @@ -2,13 +2,17 @@ background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; - padding: 20px; + padding: 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); - transition: transform 0.3s ease, background-color 0.3s ease; + transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; margin: 20px; } -/* Only the clicked card expands */ +.card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); +} + .card.expanded { transform: scale(1.05); background-color: #e6f0ff; @@ -19,20 +23,20 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 12px; + margin-bottom: 15px; } .cardHeader h3 { - font-size: 1.4em; + font-size: 1.5em; margin: 0; + color: #203394; } .cardText { font-size: 1.1em; color: #334155; line-height: 1.7; - margin-bottom: 12px; - text-align: justify; + margin-bottom: 15px; } .readMoreBtn { @@ -40,7 +44,7 @@ color: white; border: none; border-radius: 6px; - padding: 8px 16px; + padding: 10px 18px; font-weight: 600; cursor: pointer; transition: background-color 0.3s; @@ -52,5 +56,4 @@ .readMoreBtn.expanded { background-color: #203394; -} - +} \ No newline at end of file diff --git a/client/src/components/AboutSection.module.css b/client/src/components/AboutSection.module.css index b39122a..f156c7f 100644 --- a/client/src/components/AboutSection.module.css +++ b/client/src/components/AboutSection.module.css @@ -1,77 +1,87 @@ -.cardGrid { - display: flex; - gap: 20px; - flex-wrap: wrap; - justify-content: center; -} .aboutUs { - padding: 60px 40px; - background-color: #ffffff; - box-shadow: 0 8px 24px #f6f5f7; - margin: 30px auto; + padding: 80px 40px; + background-color: #f8f9fa; + margin: 40px auto; border-radius: 12px; max-width: 1400px; } + .aboutContainer { max-width: 1200px; margin: auto; - border-radius: 12px; + text-align: center; } + .aboutContainer h1 { font-size: 2.8em; - color: #eef6f9; - text-align: center; - margin-bottom: 30px; - background: #203394; - border: 1px solid #e2e8f0; - border-radius: 12px; - height: 120px; - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - letter-spacing: -0.5px; - + color: #203394; + margin-bottom: 20px; + font-weight: 700; } .text { font-size: 1.2em; - color: #1c2733; + color: #343a40; line-height: 1.7; - margin-bottom: 25px; - text-align: justify; - font-weight: 400; + margin-bottom: 40px; + text-align: center; + max-width: 800px; + margin-left: auto; + margin-right: auto; } + +.cardGrid { + display: flex; + gap: 30px; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 60px; +} + .card { - background-color: white; - padding: 20px; - width: 300px; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0,0,0,0.08); - transition: transform 0.3s ease, background-color 0.3s ease; + background-color: #ffffff; + padding: 25px; + width: 320px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; + border: 1px solid #e2e8f0; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .card.expanded { background-color: #e6f0ff; transform: scale(1.05); + box-shadow: 0 8px 20px rgba(32, 51, 148, 0.15); } .cardHeader { display: flex; justify-content: space-between; align-items: center; + margin-bottom: 15px; +} + +.cardHeader h3 { + font-size: 1.5em; + color: #203394; + margin: 0; } .cardText { - margin-top: 10px; - font-size: 16px; - color: #333; + font-size: 1.1em; + color: #334155; + line-height: 1.7; + margin-bottom: 15px; } .readMoreButton { - margin-top: 10px; - padding: 8px 14px; + padding: 10px 18px; background-color: #13b33b; color: white; border: none; @@ -88,34 +98,46 @@ .readMoreButton.expanded { background-color: #203394; } + .specialtiesHeading { text-align: center; font-size: 2.5rem; - color: white; - background: linear-gradient(to right, #132d85, #1d44c4); - padding: 20px; - border-radius: 10px; - margin: 40px 0 20px 0; + color: #203394; + margin: 60px 0 30px 0; + font-weight: 700; } .specialties { display: flex; - flex-direction: column; - gap: 20px; - padding: 0 1rem; + gap: 30px; + justify-content: center; + flex-wrap: wrap; } .specialtyCard { background: white; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); overflow: hidden; + width: 45%; + max-width: 500px; + transition: transform 0.3s ease, box-shadow 0.3s ease; } -.cardHeader { - background: linear-gradient(to right, #5b9bd5, #1e3c72); +.specialtyCard:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); +} + +.specialtyCard .cardHeader { + background: linear-gradient(to right, #203394, #13b33b); + color: white; + padding: 20px; + font-size: 1.5rem; +} + +.specialtyCard .cardHeader h3 { color: white; - padding: 15px 20px; font-size: 1.5rem; display: flex; align-items: center; @@ -123,88 +145,15 @@ } .cardBody { - padding: 20px; - font-size: 1rem; - color: #333; + padding: 25px; + font-size: 1.1em; + color: #334155; + line-height: 1.7; } .icon { width: 40px; height: 40px; object-fit: contain; - margin-right: 10px; -} - - -/* 🌙 Dark Mode Styles */ -:global(body.dark-mode) .aboutUs { - background-color: #121212; - box-shadow: none; -} - -:global(body.dark-mode) .aboutContainer h1 { - background: #1e1e2f; - border: 1px solid #333; - color: #eef6f9; -} - -:global(body.dark-mode) .text { - color: #ddd; -} - -:global(body.dark-mode) .card { - background-color: #1e1e2f; - box-shadow: 0 4px 12px rgba(0,0,0,0.5); -} - -:global(body.dark-mode) .card.expanded { - background-color: rgba(19, 179, 59, 0.1); -} - -:global(body.dark-mode) .cardText { - color: #ccc; -} - -:global(body.dark-mode) .readMoreButton { - background-color: #13b33b; - color: #fff; -} - -:global(body.dark-mode) .readMoreButton:hover { - background-color: #0e902e; -} - -:global(body.dark-mode) .readMoreButton.expanded { - background-color: #203394; -} - -:global(body.dark-mode) .specialtiesHeading { - background: linear-gradient(to right, #1e1e2f, #2a2d4a); - color: #fff; -} - -:global(body.dark-mode) .specialties { - background-color: transparent; -} - -:global(body.dark-mode) .specialtyCard { - background-color: #1e1e2f; - box-shadow: 0 0 10px rgba(0,0,0,0.5); -} - -:global(body.dark-mode) .cardHeader { - background: linear-gradient(to right, #2a2d4a, #1e1e2f); - color: #fff; -} - -:global(body.dark-mode) .cardBody { - color: #ddd; -} - -:global(body.dark-mode) .icon { - filter: brightness(0) invert(1); -} -:global(body.dark-mode) .cardHeader img { - filter: brightness(0) invert(1); } \ No newline at end of file diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js index 66df146..ca41664 100644 --- a/client/src/components/Navbar.js +++ b/client/src/components/Navbar.js @@ -1,10 +1,10 @@ import { useState, useEffect, useContext } from 'react'; -import './styles.css'; +import './styles.css'; // Assuming the merged CSS is named styles.css import logoLight from '../assets/logo-web.jpg'; import logoDark from '../assets/logo-dark-mode.png'; import { Link } from 'react-router-dom'; import { AuthContext } from "../context/AuthContext"; -import EmergencyPanel from './EmergencyPanel'; +import EmergencyPanel from './EmergencyPanel'; // Imported from Navbar2 import { FaHome, FaInfoCircle, @@ -14,47 +14,77 @@ import { FaMoon, FaSun, FaQuestionCircle, - FaBell + FaBars, // From Navbar1 for mobile toggle + FaBell // From Navbar2 for emergency panel } from 'react-icons/fa'; import { HiOutlineUser } from "react-icons/hi"; export default function Navbar() { + // --- STATE FROM BOTH FILES --- const [darkMode, setDarkMode] = useState(false); - const [isEmergencyOpen, setIsEmergencyOpen] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // From Navbar1 + const [isEmergencyOpen, setIsEmergencyOpen] = useState(false); // From Navbar2 const { isAuthenticated, logout } = useContext(AuthContext); + // --- EFFECT FOR DARK MODE (common to both) --- useEffect(() => { document.body.classList.toggle('dark-mode', darkMode); }, [darkMode]); + // --- HANDLERS FROM BOTH FILES --- const toggleDarkMode = () => { setDarkMode((prev) => !prev); }; - const toggleEmergencyPanel = () => { + const toggleMobileMenu = () => { // From Navbar1 + setIsMobileMenuOpen((prev) => !prev); + }; + + const toggleEmergencyPanel = () => { // From Navbar2 setIsEmergencyOpen(!isEmergencyOpen); }; return ( -
+
+ {/* Using the detailed logo structure from Navbar1 */}
- Company Logo + + MidCity Hospital Logo +
+ MidCity Hospital + Urology and General Nursing Home +
+
-
); -} +} \ No newline at end of file diff --git a/client/src/components/ServiceSection.js b/client/src/components/ServiceSection.js index 38670d1..7bdf0d5 100644 --- a/client/src/components/ServiceSection.js +++ b/client/src/components/ServiceSection.js @@ -167,4 +167,4 @@ function ServiceSection({ darkMode }) { ); } -export default ServiceSection; +export default ServiceSection; \ No newline at end of file diff --git a/client/src/components/ServiceSection.module.css b/client/src/components/ServiceSection.module.css index ba2ba45..ed72018 100644 --- a/client/src/components/ServiceSection.module.css +++ b/client/src/components/ServiceSection.module.css @@ -2,68 +2,56 @@ text-align: center; padding: 60px 20px; background-color: #f9f9f9; - /* color: #13b33b; */ } - .serviceSection h1 { - font-size: 2.5em; - margin-bottom: 20px; - border: white 1px; - color: #e6f3e6; - background-color: #203394; - box-shadow: 0 4px 24px #727773; - border-radius: 10px; - height: 100px; - padding-top: 30px; - margin-bottom: 15px;; - width: 80%; - margin: 5px auto; + font-size: 2.8em; + color: #eef6f9; text-align: center; + margin-bottom: 40px; + background: #203394; + border-radius: 12px; + padding: 20px 0; + font-weight: 600; } -.cogIcon { - color: #1e90ff; +.sliderWrapper { + position: relative; + display: flex; + align-items: center; + max-width: 1200px; + margin: auto; } -.serviceContainer { - padding-top: 5px; +.serviceSlider { display: flex; - flex-wrap: wrap; - gap: 30px; - justify-content: center; - background-color: whitesmoke; + overflow-x: auto; + scroll-behavior: smooth; + gap: 20px; + padding: 20px 0; + scrollbar-width: none; /* For Firefox */ + -ms-overflow-style: none; /* For Internet Explorer and Edge */ +} + +.serviceSlider::-webkit-scrollbar { + display: none; /* For Chrome, Safari, and Opera */ } .box { background: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); - width: 270px; + flex: 0 0 280px; overflow: hidden; display: flex; flex-direction: column; - - width: 23%; - background-color: #f9f9f9; - border: 1px solid #ddd; - overflow: hidden; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - animation: fadeIn 1s forwards; - transition: transform 0.3s ease; - border-radius: 10px; - - /* gap: 10px; */ - justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease; - min-height: 310px; + min-height: 400px; } .box:hover { - transform:scale(1.05) !important; - box-shadow: 0 4px 24px #727773; - - + transform: translateY(-10px); + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } .image img { @@ -73,230 +61,108 @@ } .text { - flex: 1; - padding: 10px; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - font-weight: 600; - font-size: 1.2em; -} - -.textWithIcon { - flex: 1; - padding: 10px; - text-align: center; - - font-size: 1.2rem; + font-size: 1.3rem; font-weight: 600; - margin: 15px 0 10px; - + padding: 15px; display: flex; - justify-content: center; align-items: center; + justify-content: center; gap: 8px; - color: #333; + color: #203394; } .description { - font-size: 0.95rem; + font-size: 1rem; color: #555; padding: 0 16px; text-align: justify; - line-height: 1.5; - margin-bottom: 12px; - /* Add this instead of flex-grow */ + line-height: 1.6; + margin-bottom: 15px; + flex-grow: 1; } .bookButton { background-color: #13b33b; color: white; - padding: 10px 16px; + padding: 12px 18px; margin: 0 16px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; - transition: background 0.3s ease; + transition: background-color 0.3s ease; text-align: center; } .bookButton:hover { - background-color: #218838; + background-color: #0e902e; } -/* FadeIn Animation */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } +.navButton { + background-color: rgba(32, 51, 148, 0.8); + color: white; + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 2; + transition: background-color 0.3s ease; + position: absolute; } -.fadeIn { - animation: fadeIn 1s ease-in-out forwards; +.navButton:hover { + background-color: #13b33b; } -/* Responsive */ -@media (max-width: 768px) { - .box { - width: 90%; - } - - .image { - height: 180px; - } +.navButton:first-child { + left: -20px; } -@media (max-width: 480px) { - .image { - height: 150px; - } - - .serviceSection h1 { - font-size: 1.5em; - height: auto; - padding: 20px 10px; - } - - .description { - font-size: 0.85rem; - } - - .readMore { - font-size: 0.85rem; - } +.navButton:last-child { + right: -20px; } -/* --------------------------- */ - +/* Dark Mode */ :global(body.dark-mode) .serviceSection { - background: #1a1a1a; - color: #eee; -} - - -:global(body.dark-mode) .serviceSection h1{ - background-color: #1e1e2f; - color: #fff; - box-shadow: 0 4px 24px #727773; -} -:global(body.dark-mode) .box { - color: #ddd; - background-color: #1e1e2f; - box-shadow: 0 8px 24px rgba(255, 255, 255, 0.05); - border: black 1px solid; -} - -:global(body.dark-mode) .box:hover { - background-color: #202040; - - box-shadow: 0 4px 15px rgb(239, 235, 235);; - - box-shadow: 0 4px 20px rgb(239, 235, 235); - -} - -:global(body.dark-mode) .description { - color: #c1bdbd; -} -:global(body.dark-mode) .text { - color: white -} - -:global(body.dark-mode) .textWithIcon { - color: white -} - - - -:global(body.dark-mode) .serviceSection h1{ - color: #eef6f9; - background: #203394; - border: 1px solid #e2e8f0; - box-shadow: 0 4px 24px #4caf50; + background: #181a1b; } :global(body.dark-mode) .serviceSection h1 { - background-color: #1e1e2f; - box-shadow: 0 10px 24px #000100; -} - -:global(body.dark-mode) .serviceContainer { - background: #121212; - box-shadow: 0 10px 24px #000501; -} -.serviceSlider { - display: flex; - overflow-x: auto; - scroll-behavior: smooth; - gap: 20px; - padding: 10px 0; - width: 100%; - scrollbar-width: none; - scroll-snap-type: x mandatory; -} - -.serviceSlider::-webkit-scrollbar { - display: none; -} - -.box { - flex: 0 0 auto; - flex: 0 0 calc((100% - 80px) / 5); /* 5 cards, 4 gaps of 20px */ - scroll-snap-align: start; - + background: #23272f; + color: #e0e0e0; } -.sliderWrapper { - position: relative; - display: flex; - align-items: center; - gap: 10px; +:global(body.dark-mode) .box { + background-color: #23272f; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + color: #e0e0e0; } -.serviceSlider { - display: flex; - overflow-x: auto; - scroll-behavior: smooth; - gap: 20px; - padding: 10px 20px 10px 0; - width: 100%; - scrollbar-width: none; +:global(body.dark-mode) .text { + color: #44e66d; } -.serviceSlider::-webkit-scrollbar { - display: none; +:global(body.dark-mode) .description { + color: #b0b0b0; } -.navButton { - background-color:#218838; - color: white; - border: none; - border-radius: 50%; - padding: 10px; - cursor: pointer; - z-index: 2; - transition: background-color 0.3s ease; +:global(body.dark-mode) .bookButton { + background-color: #44e66d; + color: #181a1b; } -.navButton:hover { - background-color: #203394; +:global(body.dark-mode) .bookButton:hover { + background-color: #3ac15f; } -@media (max-width: 768px) { - .box { - min-width: 80%; - flex-shrink: 0; - } - - .serviceSlider { - gap: 16px; - } +:global(body.dark-mode) .navButton { + background-color: rgba(68, 230, 109, 0.8); + color: #181a1b; } +:global(body.dark-mode) .navButton:hover { + background-color: #2f4fcb; +} \ No newline at end of file diff --git a/client/src/components/Slider.js b/client/src/components/Slider.js index 4fb732e..34049c2 100644 --- a/client/src/components/Slider.js +++ b/client/src/components/Slider.js @@ -1,48 +1,26 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import styles from './slider.module.css'; -import pic1 from '../assets/pic5.webp'; -import pic2 from '../assets/pic.webp'; -import pic3 from '../assets/pic5.webp'; -import pic4 from '../assets/pic.webp'; - -const images = [pic1, pic2, pic3, pic4]; +import { Link } from 'react-router-dom'; function Slider() { - const [currentIndex, setCurrentIndex] = useState(0); - - const changeSlide = (direction) => { - const newIndex = (currentIndex + direction + images.length) % images.length; - setCurrentIndex(newIndex); - }; - - useEffect(() => { - const interval = setInterval(() => { - setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); - }, 3000); - - return () => clearInterval(interval); - }, []); - return ( -
-
-
- {`Slide +
+
+

Your Health, Our Priority

+

+ Providing expert care in Urology and Gynecology with compassion and advanced technology. +

+
+ + Book an Appointment + + + View Our Services +
- -
); } -export default Slider; +export default Slider; \ No newline at end of file diff --git a/client/src/components/slider.module.css b/client/src/components/slider.module.css index fdc9bfc..8453a78 100644 --- a/client/src/components/slider.module.css +++ b/client/src/components/slider.module.css @@ -1,100 +1,104 @@ -/* Fullscreen hero header */ -.heroHeader { +/* New Hero Section Styles */ +.heroSection { height: 100vh; width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; + background: linear-gradient(rgba(32, 51, 148, 0.7), rgba(32, 51, 148, 0.7)), url('../assets/hero-bg.webp') center/cover no-repeat fixed; position: relative; overflow: hidden; + font-family: 'Poppins', sans-serif; } -.slider { - padding: 115px 0 0 0; - height: 100%; - width: 100%; - position: relative; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; +.heroContent { + z-index: 10; + max-width: 800px; + padding: 20px; } -.slides { - height: 100%; - width: 100%; - position: relative; +.heroTitle { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } -.slide { - width: 100%; - height: 100%; - object-fit: cover; - display: block; +.heroSubtitle { + font-size: 1.5rem; + font-weight: 300; + margin-bottom: 2rem; + text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); } -.button { - position: absolute; - top: 50%; - padding: 16px; - font-weight: bold; - font-size: 18px; - color: white; - background-color: rgba(0, 0, 0, 0.5); - border: none; - cursor: pointer; - transition: 0.3s ease; - transform: translateY(-50%); - z-index: 2; +.ctaButtons { + display: flex; + justify-content: center; + gap: 20px; + flex-wrap: wrap; } -.button:hover { - background-color: rgba(0, 0, 0, 0.8); +.ctaButton { + padding: 12px 24px; + border-radius: 50px; + font-size: 1.1rem; + font-weight: 600; + text-decoration: none; + transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } -.prev { - left: 0; +.ctaButton:hover { + transform: translateY(-3px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } -.next { - right: 0; +.primary { + background-color: #13b33b; + color: white; } -.overlayText { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; +.primary:hover { + background-color: #0e902e; +} + +.secondary { + background-color: rgba(255, 255, 255, 0.2); color: white; - z-index: 3; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); + border: 2px solid white; } -.overlayText h1 { - font-size: 3rem; - margin-bottom: 1rem; +.secondary:hover { + background-color: rgba(255, 255, 255, 0.4); } -.overlayText p { - font-size: 1.25rem; +/* Dark Mode Overrides for Hero Section */ +.dark-mode .heroSection { + background: linear-gradient(rgba(24, 26, 27, 0.7), rgba(24, 26, 27, 0.7)), url('../assets/hero-bg.webp') center/cover no-repeat fixed; } -/* ========== Dark Mode ========== */ -.dark-mode .heroHeader, -.dark-mode .slider, -.dark-mode .slides, -.dark-mode .slide { - background-color: #181a1b !important; +.dark-mode .heroTitle, +.dark-mode .heroSubtitle { + color: #f7f7f7; + text-shadow: 0 2px 10px #000; } -.dark-mode .button { - background-color: rgba(255, 215, 0, 0.2) !important; - color: #F2F7A1 !important; +.dark-mode .primary { + background-color: #44e66d; } -.dark-mode .button:hover { - background-color: rgba(255, 215, 0, 0.4) !important; +.dark-mode .primary:hover { + background-color: #13b33b; } -.dark-mode .overlayText { - color: #f7f7f7 !important; - text-shadow: 0 2px 10px #000; +.dark-mode .secondary { + background-color: rgba(255, 215, 0, 0.2); + color: #F2F7A1; + border: 2px solid #F2F7A1; } + +.dark-mode .secondary:hover { + background-color: rgba(255, 215, 0, 0.4); +} \ No newline at end of file diff --git a/client/src/components/styles.css b/client/src/components/styles.css index af7ea4e..018555f 100644 --- a/client/src/components/styles.css +++ b/client/src/components/styles.css @@ -1,213 +1,184 @@ +/* General Body and Universal Styles */ body { - font-family: Arial, sans-serif; + font-family: 'Poppins', sans-serif; /* Using the modern font from styles.css */ + margin: 0; + padding: 0; + scroll-behavior: smooth; + transition: background-color 0.3s ease, color 0.3s ease; +} + +* { + box-sizing: border-box; margin: 0; padding: 0; - scroll-behavior: smooth; } +/* Header and Navigation Styles */ .header_container { display: flex; - width: 100vw; - flex-direction: row; - align-items: center; justify-content: space-between; - - height: 80px; - width: 100%; - - min-height: 80px; /* Changed from height: 100px */ - - padding: 10px 20px; + align-items: center; + padding: 10px 40px; + height: 90px; /* Using height from styles.css for consistency */ background-color: #ffffff; - opacity: 0.9; - border-radius: 0px; - box-shadow: 0 0 10px rgba(0, 128, 0, 0.5); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); position: fixed; top: 0; - height: 120px; + width: 100%; z-index: 1000; + transition: background-color 0.3s ease, padding 0.3s ease; } -.img { - flex: 1; -} - -#rd-logo { - width: 100px; - height: 100px; - margin-left: 10px; - margin-top: 10px; -} - -.nav_menu { - flex: 1; +/* Logo Styles */ +.logo-container { display: flex; - justify-content: center; align-items: center; - gap: 20px; } -.nav_link { - list-style-type: none; +.logo-link { display: flex; - gap: 20px; - margin: 0; - padding: 0; - color: #203394; ; -} - -.nav_link li { - display: inline; - color: #203394; + align-items: center; + text-decoration: none; + color: inherit; + gap: 10px; } -.nav_link a { - text-decoration: none; - color: #203394; - font-size: 22px; - padding: 2px 10px; - display: flex; - align-items: center; - gap: 5px; - transition: color 0.3s ease; +.logo-img { + width: 70px; + height: 70px; + object-fit: contain; + transition: transform 0.3s ease; } -.nav_link a:hover { - color: #13b33b; - text-decoration: none; +.logo-img:hover { + transform: scale(1.1); } -.toggle-wrapper { +.logo-text { display: flex; - align-items: center; - justify-content: flex-end; - min-width: 60px; + flex-direction: column; } -.navbar__toggle { - display: none; - font-size: 28px; - cursor: pointer; +.company-name { + font-size: 1.5rem; + font-weight: 700; + color: #203394; + letter-spacing: -0.5px; } -@media (max-width: 768px) { - .nav_menu { - position: fixed; - top: 100px; - left: 0; - right: 0; - background: white; - flex-direction: column; - align-items: center; - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; - border-radius: 0 0 20px 20px; - box-shadow: 0 4px 8px rgba(0, 128, 0, 0.3); - z-index: 999; - } - - .nav_menu.active { - max-height: 300px; - } - - .nav_link { - flex-direction: column; - gap: 15px; - padding: 15px 0; - color: #203394; - } - - .navbar__toggle { - display: block; - } +.tagline { + font-size: 0.9rem; + font-weight: 400; + color: #13b33b; + margin-top: -5px; } -body { - background-color: white; - color: #203394; - transition: background-color 0.3s ease, color 0.3s ease; +/* Navigation Menu Styles */ +.nav_menu { + flex-grow: 1; + display: flex; + justify-content: flex-end; } -* { - box-sizing: border-box; +.nav_link { + list-style: none; + display: flex; + gap: 25px; /* Using spacing from styles.css */ + align-items: center; margin: 0; padding: 0; } -/* Header container */ -.header_container { +.nav_link li a { + text-decoration: none; + color: #203394; + font-weight: 500; + font-size: 1.1rem; /* Using font size from styles.css */ display: flex; - justify-content: space-between; align-items: center; - padding: 10px 20px; - background-color: var(--header-bg, #fff); - border-bottom: 1px solid #ccc; + gap: 6px; + transition: color 0.3s ease, transform 0.3s ease; } -/* Logo */ -.logo-container { - flex-shrink: 0; -} -.logo-img { - width: 100px; - height: 100px; - object-fit: contain; +.nav_link li a:hover { + color: #13b33b; + transform: translateY(-2px); /* Using hover effect from styles.css */ } -/* Navigation */ -.nav_menu { - flex-grow: 1; - text-align: right; -} +/* Buttons */ .nav-auth-btn { display: flex; align-items: center; gap: 6px; - background-color: #2f4fcb; + background-color: #2f4fcb; color: white !important; - padding: 6px 14px; + padding: 8px 16px; border: none; - border-radius: 20px; + border-radius: 25px; /* More rounded style from styles.css */ cursor: pointer; - font-size: 18px; - text-decoration: none; + font-size: 16px; + font-weight: 600; + text-decoration: none; transition: all 0.3s ease; } .nav-auth-btn:hover { - background-color: green; - transform: translateY(-1px); + background-color: #13b33b; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced hover from styles.css */ } -.nav_link { - list-style: none; +.emergency-btn { /* Unique style from styles2.css */ + background: none; + border: none; + color: #dc3545; + font-weight: 600; + font-size: 0.9rem; + cursor: pointer; display: flex; - gap: 20px; align-items: center; - justify-content: flex-end; + gap: 6px; + padding: 0; + transition: color 0.3s ease; } -.nav_link li a { - text-decoration: none; + +.emergency-btn:hover { + color: #a71d2a; + text-decoration: underline; +} + +/* Dark Mode Toggle */ +.dark-toggle-btn { + background: none; + border: none; color: #203394; - font-weight: 500; - display: flex; - align-items: center; - gap: 6px; + font-size: 25px; + cursor: pointer; + transition: color 0.3s ease, transform 0.3s ease; } -.nav_link li a:hover { - color: green; + +.dark-toggle-btn:hover { + transform: rotate(30deg); } -/* Dark mode overrides */ +/* Dark Mode Styles */ .dark-mode { background-color: #181a1b !important; color: #e0e0e0 !important; + font-family: 'Inter', sans-serif; /* Optional: different font for dark mode */ } .dark-mode .header_container { background-color: #23272f !important; - box-shadow: 0 0 10px rgba(0, 255, 128, 0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); +} + +.dark-mode .company-name { + color: #e0e0e0; +} + +.dark-mode .tagline { + color: #44e66d; } .dark-mode .nav_link a { @@ -215,20 +186,24 @@ body { } .dark-mode .nav_link li a:hover { - color: #13b33b !important; + color: #44e66d !important; } body.dark-mode .nav-auth-btn { - background-color: #44e66d; - color: white !important ; + background-color: #44e66d; + color: white !important; } body.dark-mode .nav-auth-btn:hover { background-color: #2f4fcb; - color: #e0e0e0 !important; + color: #e0e0e0 !important; } -/* Dark mode form inputs */ +body.dark-mode .dark-toggle-btn { + color: #FFD700; +} + +/* Dark mode styles for form inputs from styles2.css */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select { @@ -241,87 +216,22 @@ body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #bbbbbb !important; } -body.dark-mode .login-btn, -body.dark-mode .register-btn { - background-color: #13b33b !important; - color: white !important; - border: none !important; -} - -body.dark-mode .login-btn:hover, -body.dark-mode .register-btn:hover { - background-color: #0f962f !important; -} -.dark-mode .img #rd-logo { - filter: brightness(0.8) contrast(1.2); -} - -.dark-mode .dark-mode-toggle { - color: #FFD700 !important; -} - -.dark-mode-toggle { - margin-left: 20px; - background: none; - border: none; - cursor: pointer; - font-size: 1.5rem; - color: #333; - transition: color 0.3s; - z-index: 999; - position: relative; - color: #FFD700; -} - -/* Dark mode toggle */ -body.dark-mode { - background-color: #121212; - color: #e0e0e0; -} - -/* Navbar dark styles */ -body.dark-mode .header_container { - background-color: #1e1e1e; -} - -body.dark-mode .nav_link a { - color: #e0e0e0; -} -.dark-toggle-btn { +/* Mobile Menu Toggle */ +.navbar__toggle { + display: none; + font-size: 1.8rem; background: none; border: none; color: #203394; - font-size: 25px; - padding-top: 2px; - margin-left: 15px; cursor: pointer; } -body.dark-mode .dark-toggle-btn{ - color: #FFD700; -} -/* Emergency button style to match navbar links */ -.emergency-btn { - background: none; - border: none; - color: #dc3545; - font-weight: 600; - font-size: 0.9rem; - cursor: pointer; - display: flex; - align-items: center; - gap: 6px; - padding: 0; - transition: color 0.3s ease; -} - -.emergency-btn:hover { - color: #a71d2a; - text-decoration: underline; +.dark-mode .navbar__toggle { + color: #e0e0e0; } -/* Fixed Emergency Button at Bottom */ +/* Fixed Emergency Button (from styles2.css) */ .fixed-emergency-btn { position: fixed; bottom: 20px; @@ -352,7 +262,57 @@ body.dark-mode .dark-toggle-btn{ transform: translateY(0); } -/* Responsive adjustments */ +/* Responsive Media Queries */ +@media (max-width: 992px) { + .header_container { + padding: 10px 20px; + } + + .nav_menu { + display: none; + flex-direction: column; + position: absolute; + top: 90px; + left: 0; + width: 100%; + background-color: #ffffff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px 0; + z-index: 990; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-in-out; + } + + .nav_menu.active { + display: flex; + max-height: 500px; /* Should be enough to show all links */ + } + + .nav_link { + flex-direction: column; + align-items: center; + gap: 15px; + } + + .nav-auth-btn, .dark-toggle-btn { + width: 100%; + justify-content: center; + } + + .navbar__toggle { + display: block; + } + + .logo-text { + display: none; /* Hides company name/tagline on mobile for a cleaner look */ + } + + .dark-mode .nav_menu { + background-color: #23272f; + } +} + @media (max-width: 768px) { .fixed-emergency-btn { bottom: 15px; @@ -369,4 +329,4 @@ body.dark-mode .dark-toggle-btn{ padding: 10px 18px; font-size: 13px; } -} +} \ No newline at end of file