diff --git a/backend/.env b/backend/.env index 99501b7..b7312f3 100644 --- a/backend/.env +++ b/backend/.env @@ -1,3 +1,3 @@ -MONGODB_URI=mongodb://localhost:27017/collegedepartment +MONGODB_URI=mongodb+srv://Lavya:lavya01*@cluster0.xym2kks.mongodb.net/?appName=Cluster0 EMAIL=sanika.p220104@gmail.com EMAIL_PASSWORD=ewtlhtfttnnxmmbf diff --git a/frontend/src/Page1.css b/frontend/src/Page1.css index 4d700b3..b03a3cc 100644 --- a/frontend/src/Page1.css +++ b/frontend/src/Page1.css @@ -1,153 +1,320 @@ /*Page1.css*/ -/* General Styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; +/* Login Page Background - Applied to the page wrapper */ +.login-page-wrapper { + background-image: url('./components/campus.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + min-height: 100vh; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + box-sizing: border-box; +} + +/* Main Wrapper Card */ +.wrapper { + width: 100%; + max-width: 420px; + background: rgba(255, 255, 255, 0.97); + backdrop-filter: blur(10px); + border-radius: 16px; + padding: 40px 35px; + color: #212121; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + animation: slideUp 0.5s ease-out; +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(30px); } - - body { - font-family: Arial, sans-serif; - background-image: url('../src/components/campus.jpg'); - height: 100vh; - display: flex; - justify-content: center; - align-items: center; + to { + opacity: 1; + transform: translateY(0); } - +} + +/* Logo Image */ +.responsive-image { + width: 100%; + max-width: 200px; + height: auto; + display: block; + margin: 0 auto 20px; +} + +/* Heading */ +.wrapper h2 { + font-size: 26px; + font-weight: 700; + margin-bottom: 30px; + text-align: center; + color: var(--primary-red); + letter-spacing: -0.5px; +} + +/* Input box styling */ +.input-box { + position: relative; + width: 100%; + margin-bottom: 20px; +} + +.input-box input { + width: 100%; + padding: 16px 50px 16px 20px; + font-size: 15px; + color: #212121; + background-color: #f5f5f5; + border: 2px solid transparent; + border-radius: 24px; + outline: none; + transition: all 0.3s ease; + box-sizing: border-box; +} + +.input-box input:focus { + background-color: #ffffff; + border-color: #B7202E; + box-shadow: 0 0 0 4px rgba(183, 32, 46, 0.1); +} + +.input-box input::placeholder { + color: #757575; +} + +.input-box .icon { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + font-size: 16px; + color: #757575; + pointer-events: none; +} + +.input-box input:focus + .icon { + color: #B7202E; +} + +/* Remember me & Forgot password */ +.remember-forget { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + margin-bottom: 25px; + flex-wrap: wrap; + gap: 10px; +} + +.remember-forget label { + display: flex; + align-items: center; + gap: 8px; + color: #424242; + cursor: pointer; +} + +.remember-forget label input[type="checkbox"] { + width: 18px; + height: 18px; + accent-color: #B7202E; + cursor: pointer; +} + +.remember-forget a { + color: #B7202E; + text-decoration: none; + font-weight: 500; + transition: all 0.2s ease; +} + +.remember-forget a:hover { + color: #8a1a24; + text-decoration: underline; +} + +.remember-forget a pre { + margin: 0; + font-family: inherit; + font-size: 14px; +} + +/* Error Message */ +#error-message { + background-color: #fff5f5; + color: #c0392b; + padding: 12px 16px; + border-radius: 6px; + border-left: 4px solid #c0392b; + margin-bottom: 20px; + font-size: 14px; + animation: shake 0.4s ease; +} + +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } +} + +/* Submit button styling */ +input[type="submit"], +.btn-outline-danger { + width: 100%; + background: linear-gradient(135deg, #B7202E, #8a1a24); + border: none; + border-radius: 24px; + padding: 15px 0; + color: #ffffff; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; +} + +input[type="submit"]:hover, +.btn-outline-danger:hover { + background: linear-gradient(135deg, #8a1a24, #6d1219); + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(183, 32, 46, 0.35); +} + +input[type="submit"]:active, +.btn-outline-danger:active { + transform: translateY(0); +} + +/* Forgot password form styling */ +.forgot-password-form { + margin-top: 25px; + padding: 25px; + background-color: #f5f5f5; + border-radius: 10px; + animation: fadeIn 0.3s ease; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.forgot-password-form h3 { + color: #B7202E; + font-size: 18px; + margin-bottom: 20px; + text-align: center; +} + +.forgot-password-form input { + width: 100%; + padding: 14px 18px; + border-radius: 10px; + border: 2px solid #e0e0e0; + margin-bottom: 15px; + font-size: 14px; + transition: all 0.2s ease; + box-sizing: border-box; +} + +.forgot-password-form input:focus { + border-color: #B7202E; +} + +.forgot-password-form button { + width: 100%; + background: linear-gradient(135deg, #B7202E, #8a1a24); + color: #ffffff; + padding: 14px 20px; + border: none; + border-radius: 10px; + cursor: pointer; + font-size: 15px; + font-weight: 600; + transition: all 0.3s ease; +} + +.forgot-password-form button:hover { + background: linear-gradient(135deg, #8a1a24, #6d1219); + transform: translateY(-2px); +} + +/* Cancel button styling for reset form */ +/* Cancel button styling for reset form */ +#cancel-reset-password { + background-color: #e0e0e0; + color: #424242; + padding: 12px 24px; + border: none; + border-radius: 10px; + cursor: pointer; + margin-top: 12px; + font-size: 14px; + font-weight: 500; + width: 100%; + transition: all 0.3s ease; +} + +#cancel-reset-password:hover { + background-color: #757575; + color: #ffffff; +} + +/* Google Login Section */ +.google-login { + margin-top: 25px; + text-align: center; + padding-top: 20px; + border-top: 1px solid #e0e0e0; + position: relative; +} + +.google-login::before { + content: 'Or continue with'; + display: block; + font-size: 13px; + color: #757575; + background: white; + width: fit-content; + margin: 0 auto 15px; + padding: 0 15px; + position: absolute; + top: -10px; + left: 50%; + transform: translateX(-50%); +} + +/* Responsive Adjustments */ +@media (max-width: 480px) { + .login-page-wrapper { + padding: 15px; + } + .wrapper { - width: 100%; - max-width: 400px; - background-color: white; - border-radius: 10px; - padding: 30px; - color: rgb(166, 2, 2); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - border: 2px solid red; /* Add border to see if it's visible */ - margin-top: 80px; + padding: 30px 25px; } - - h2 { - font-size: 24px; - margin-bottom: 30px; - text-align: center; + + .wrapper h2 { + font-size: 22px; } - - /* Input box styling */ - .input-box { - position: relative; - width: 100%; - margin: 20px 0; - } - + .input-box input { - width: 100%; - padding: 20px 45px 20px 20px; + padding: 14px 45px 14px 16px; font-size: 14px; - color: #020202; - border: 2px solid rgba(119, 3, 3, 0.2); - border-radius: 40px; - outline: none; } - - .input-box input::placeholder { - color: black; - } - - .input-box .icon { - position: absolute; - right: 20px; - top: 50%; - transform: translateY(-50%); - font-size: 16px; - } - - /* Remember me & Forgot password link styles */ + .remember-forget { - display: flex; - justify-content: space-between; - font-size: 10px; - margin: 0 0 30px; - } - - .remember-forget label { - font-size: 14px; - } - - .remember-forget a { - color: rgb(166, 2, 2); - text-decoration: none; - } - - .remember-forget a:hover { - text-decoration: underline; - } - - /* Submit button styling */ - input[type="submit"] { - width: 100%; - background-color: #e60000; - border: none; - border-radius: 40px; - padding: 12px 0; - color: white; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s; - } - - input[type="submit"]:hover { - background-color: #cc0000; - } - - /* Forgot password form styling */ - .forgot-password-form { - display: none; - text-align: center; - } - - .forgot-password-form input { - padding: 12px; - border-radius: 6px; - border: 1px solid #ddd; - margin-bottom: 15px; - } - - .forgot-password-form button { - background-color: #e60000; - color: white; - padding: 12px 20px; - border: none; - border-radius: 6px; - cursor: pointer; - } - - .forgot-password-form button:hover { - background-color: #cc0000; - } - - .responsive-image { - width: 100%; - height: auto; - } - - /* Cancel button styling for reset form */ - #cancel-reset-password { - background-color: #ccc; - padding: 8px 20px; - border: none; - border-radius: 6px; - cursor: pointer; - margin-top: 10px; - } - - #cancel-reset-password:hover { - background-color: #bbb; - } - - .google-login { - margin-top: 20px; - text-align: center; + flex-direction: column; + align-items: flex-start; } +} \ No newline at end of file diff --git a/frontend/src/Page1.js b/frontend/src/Page1.js index 8fe9858..ea80a82 100644 --- a/frontend/src/Page1.js +++ b/frontend/src/Page1.js @@ -119,15 +119,16 @@ const Page1 = () => { }; return ( -
-
- Responsive -

Board Of Studies

+
+
+ + Responsive +

Board Of Studies

-
- + {
)} - {/* Google Login Button */} -
- + {/* Google Login Button */} +
+ +
); diff --git a/frontend/src/Page2.css b/frontend/src/Page2.css index 8acc6e5..8faaebe 100644 --- a/frontend/src/Page2.css +++ b/frontend/src/Page2.css @@ -1,15 +1,11 @@ /*Page2.css*/ -/* General Styles */ -body { - margin: 0; - padding: 0; - font-family: Arial, sans-serif; +/* Page Container */ +.page-container { display: flex; flex-direction: column; - height: 100vh; /* Full screen height */ - overflow: hidden; /* Prevent scrollbars unless necessary */ - background-color: #fff; /* Solid background */ + min-height: 100vh; + background-color: var(--off-white); } /* Header Bar */ @@ -17,43 +13,38 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 0 20px; /* Adjust padding on the sides */ - height: auto; /* Allow header to adjust based on content */ - min-height: 100px; /* Minimum height for the header */ - background-color: white; - border-bottom: 2px solid #ccc; - width: 100%; - box-sizing: border-box; + padding: 15px 40px; + background-color: var(--white); + box-shadow: var(--shadow-sm); + position: sticky; + top: 0; + z-index: 100; + gap: 20px; } .header-bar .leftlogo, .header-bar .rightlogo { - height: 60px; /* Adjust the logo size */ + height: 55px; width: auto; - object-fit: contain; /* Ensure logos don't stretch */ + object-fit: contain; + flex-shrink: 0; } .header-bar .college-name { - font-size: 28px; /* Adjust font size to prevent overflow */ - font-weight: bold; - color: #B7202E; + font-size: clamp(20px, 3vw, 28px); + font-weight: 700; + color: var(--primary-red); text-align: center; flex-grow: 1; - padding: 0 10px; - z-index: 10; - white-space: nowrap; /* Prevent text from wrapping */ - overflow: visible; /* Ensure text is not cut off */ - text-overflow: clip; /* Remove ellipsis */ - margin: 0 20px; /* Add margin to prevent cutting off */ + margin: 0; + letter-spacing: -0.5px; } /* Navigation Bar */ .navbar { - background-color: rgb(228, 227, 227); - padding: 10px 20px; - display: flex; - justify-content: center; - width: 100%; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + padding: 0 40px; + box-shadow: var(--shadow-sm); } .navbar ul { @@ -62,23 +53,43 @@ body { padding: 0; display: flex; justify-content: center; + flex-wrap: wrap; + gap: 5px; } .navbar ul li { - margin-right: 20px; - margin-left: 30px; + margin: 0; } .navbar ul li a { - color: black; + display: block; + color: var(--white); text-decoration: none; - font-weight: bold; - text-align: center; + font-weight: 500; + padding: 16px 24px; + transition: var(--transition); + position: relative; +} + +.navbar ul li a::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 3px; + background-color: var(--white); + transition: var(--transition); + transform: translateX(-50%); +} + +.navbar ul li a:hover::after, +.navbar ul li a.active::after { + width: calc(100% - 48px); } .navbar ul li a:hover { - text-decoration: underline; - color: red; + background-color: rgba(255, 255, 255, 0.1); } /* Main Container */ @@ -86,94 +97,209 @@ body { display: flex; flex: 1; width: 100%; - height: calc(100vh - 160px); /* Subtract the height of the header and footer */ -} - -/* Stream Bar (Right Side) */ -.stream-bar { - width: 20%; - background-color: #f0f0f0; - border-left: 2px solid #ccc; - padding: 20px; - box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); - height: 100%; - position: relative; -} - -.stream-bar h3 { - margin-top: 0; - font-size: 18px; - color: #333; -} - -.stream-bar ul { - list-style: none; - padding: 0; - margin: 10px 0; -} - -.stream-bar ul li { - padding: 10px; - cursor: pointer; - border-bottom: 1px solid #ddd; - transition: background-color 0.3s; -} - -.stream-bar ul li a { - color: black; /* Change the link text to white on hover */ -} - -.stream-bar ul li:hover { - background-color: #B7202E; - color: white; -} - -.stream-bar ul li:hover a { - color: white; /* Change the link text to white on hover */ + min-height: calc(100vh - 200px); } /* Content Area (Left Side) */ .content-area { flex: 1; - padding: 20px; - background-color: #fff; - border-left: 2px solid #ccc; + padding: 40px; + background-color: var(--white); overflow-y: auto; - height: 100%; - box-sizing: border-box; +} + +.content-area h2 { + color: var(--primary-red); + font-size: 28px; + font-weight: 600; + margin-bottom: 20px; +} + +.content-area p { + color: var(--darker-gray); + line-height: 1.8; +} + +/* Stream Bar (Right Side) */ +.stream-bar { + width: 280px; + min-width: 280px; + background-color: var(--white); + border-left: 1px solid var(--medium-gray); + padding: 30px 20px; + box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05); +} + +.stream-bar h3 { + font-size: 18px; + font-weight: 700; + color: var(--primary-red); + margin-bottom: 20px; + padding-bottom: 12px; + border-bottom: 2px solid var(--primary-red); + text-transform: uppercase; + letter-spacing: 1px; +} + +.stream-bar ul { + list-style: none; + padding: 0; + margin: 0; +} + +.stream-bar ul li { + padding: 14px 16px; + cursor: pointer; + border-radius: var(--border-radius); + margin-bottom: 8px; + transition: var(--transition); + font-weight: 500; + color: var(--darker-gray); + border: 1px solid transparent; +} + +.stream-bar ul li a { + color: inherit; + text-decoration: none; + display: block; +} + +.stream-bar ul li:hover { + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + color: var(--white); + transform: translateX(5px); + box-shadow: var(--shadow-md); +} + +.stream-bar ul li:hover a { + color: var(--white); +} + +.stream-bar ul li.active { + background-color: var(--primary-red); + color: var(--white); + border-color: var(--dark-red); } /* Footer Styles */ footer { - background-color: white; - padding: 10px; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + padding: 20px 40px; text-align: center; - width: 100%; - box-sizing: border-box; margin-top: auto; - position: relative; +} + +.terms { + display: flex; + justify-content: center; + align-items: center; + gap: 30px; + flex-wrap: wrap; } .terms a { - color: black; + color: var(--white); text-decoration: none; - font-weight: bold; - font-size: 16px; + font-weight: 500; + font-size: 14px; + padding: 8px 16px; + border-radius: var(--border-radius-sm); + transition: var(--transition); } .terms a:hover { - text-decoration: underline; + background-color: rgba(255, 255, 255, 0.15); } .footer-image { width: 100%; - margin-top: 10px; - margin-bottom: 0; - position: relative; + max-width: 1200px; + margin: 15px auto 0; + display: block; + opacity: 0.9; } -/* Prevent any margin or padding from appearing above or below the page */ -body, html { - margin: 0; - padding: 0; +/* Responsive Design */ +@media (max-width: 1024px) { + .stream-bar { + width: 240px; + min-width: 240px; + } + + .header-bar { + padding: 12px 20px; + } + + .navbar { + padding: 0 20px; + } +} + +@media (max-width: 768px) { + .main-container { + flex-direction: column; + } + + .stream-bar { + width: 100%; + min-width: 100%; + border-left: none; + border-top: 1px solid var(--medium-gray); + padding: 20px; + } + + .stream-bar ul { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + } + + .stream-bar ul li { + margin-bottom: 0; + text-align: center; + } + + .stream-bar ul li:hover { + transform: translateY(-3px); + } + + .header-bar { + flex-direction: column; + padding: 15px; + gap: 10px; + } + + .header-bar .college-name { + order: -1; + font-size: 22px; + } + + .navbar ul { + justify-content: center; + } + + .navbar ul li a { + padding: 12px 16px; + font-size: 14px; + } + + .content-area { + padding: 25px; + } +} + +@media (max-width: 480px) { + .stream-bar ul { + grid-template-columns: 1fr; + } + + .navbar ul li a { + padding: 10px 12px; + font-size: 13px; + } + + .terms { + flex-direction: column; + gap: 15px; + } } \ No newline at end of file diff --git a/frontend/src/Page3.css b/frontend/src/Page3.css index 052e2d3..3270738 100644 --- a/frontend/src/Page3.css +++ b/frontend/src/Page3.css @@ -1,58 +1,401 @@ -/* Page3.css */ +/* Page3.css - Zoom Meeting Generator */ -.container { - width: 100%; - max-width: 600px; - margin: 0 auto; - padding: 20px; - text-align: center; - font-family: Arial, sans-serif; +/* Page Container */ +.page-container { + display: flex; + flex-direction: column; + min-height: 100vh; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); +} + +/* Header Bar */ +.header-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 40px; + background-color: #ffffff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + position: sticky; + top: 0; + z-index: 100; + gap: 20px; +} + +.header-bar .leftlogo, +.header-bar .rightlogo { + height: 55px; + width: auto; + object-fit: contain; + flex-shrink: 0; +} + +.header-bar .college-name { + font-size: clamp(20px, 3vw, 28px); + font-weight: 700; + color: #B7202E; + text-align: center; + flex-grow: 1; + margin: 0; + letter-spacing: -0.5px; +} + +/* Navigation Bar */ +.navbar { + background: linear-gradient(135deg, #B7202E, #8a1a24); + padding: 0 40px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.navbar ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 5px; +} + +.navbar ul li { + margin: 0; +} + +.navbar ul li a { + display: block; + color: #ffffff; + text-decoration: none; + font-weight: 500; + padding: 16px 24px; + transition: all 0.3s ease; + position: relative; +} + +.navbar ul li a::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 3px; + background-color: #ffffff; + transition: all 0.3s ease; + transform: translateX(-50%); +} + +.navbar ul li a:hover::after, +.navbar ul li a.active::after { + width: calc(100% - 48px); +} + +.navbar ul li a:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +/* Zoom Container */ +.zoom-container { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px 20px; +} + +/* Zoom Card */ +.zoom-card { + width: 100%; + max-width: 500px; + background: #ffffff; + border-radius: 20px; + padding: 50px 40px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + text-align: center; + animation: fadeInUp 0.5s ease-out; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); } - - h1 { - font-size: 2rem; - margin-bottom: 20px; - color: #333; + to { + opacity: 1; + transform: translateY(0); } - - form { - margin-bottom: 20px; +} + +/* Zoom Icon */ +.zoom-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, #B7202E, #8a1a24); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 25px; + box-shadow: 0 8px 25px rgba(183, 32, 46, 0.3); +} + +.zoom-icon svg { + width: 40px; + height: 40px; + color: #ffffff; +} + +/* Card Title */ +.zoom-card h2 { + font-size: 28px; + font-weight: 700; + color: #212121; + margin: 0 0 12px; + letter-spacing: -0.5px; +} + +/* Subtitle */ +.zoom-card .subtitle { + color: #757575; + font-size: 15px; + line-height: 1.6; + margin: 0 0 35px; +} + +/* Create Button */ +.create-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + background: linear-gradient(135deg, #B7202E, #8a1a24); + color: #ffffff; + border: none; + padding: 16px 40px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + border-radius: 50px; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 6px 20px rgba(183, 32, 46, 0.35); + min-width: 220px; +} + +.create-btn:hover:not(:disabled) { + background: linear-gradient(135deg, #8a1a24, #6d1219); + transform: translateY(-3px); + box-shadow: 0 10px 30px rgba(183, 32, 46, 0.45); +} + +.create-btn:active:not(:disabled) { + transform: translateY(-1px); +} + +.create-btn:disabled { + opacity: 0.8; + cursor: not-allowed; +} + +/* Spinner */ +.spinner { + width: 20px; + height: 20px; + border: 2px solid rgba(255, 255, 255, 0.3); + border-top-color: #ffffff; + border-radius: 50%; + animation: spin 0.8s linear infinite; + display: inline-block; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* Meeting Details */ +.meeting-details { + margin-top: 35px; + padding: 25px; + background: linear-gradient(135deg, #f8f9fa, #ffffff); + border-radius: 16px; + border: 1px solid #e0e0e0; + text-align: left; + animation: slideIn 0.4s ease-out; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(20px); } - - button { - background-color: #007bff; - color: white; - border: none; - padding: 10px 20px; - font-size: 1rem; - cursor: pointer; - border-radius: 5px; - transition: background-color 0.3s; + to { + opacity: 1; + transform: translateY(0); } - - button:hover { - background-color: #0056b3; - } - - #meetingDetails { - margin-top: 20px; +} + +/* Success Badge */ +.success-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: linear-gradient(135deg, #4CAF50, #45a049); + color: #ffffff; + padding: 10px 20px; + border-radius: 50px; + font-size: 14px; + font-weight: 600; + margin-bottom: 20px; +} + +/* Detail Item */ +.detail-item { + margin-bottom: 15px; + padding-bottom: 15px; + border-bottom: 1px solid #e0e0e0; +} + +.detail-item:last-of-type { + margin-bottom: 20px; +} + +.detail-label { + display: block; + font-size: 12px; + font-weight: 600; + color: #B7202E; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 6px; +} + +.detail-value { + font-size: 16px; + color: #212121; + font-weight: 500; +} + +.detail-link { + font-size: 14px; + color: #B7202E; + text-decoration: none; + word-break: break-all; + transition: all 0.2s ease; +} + +.detail-link:hover { + color: #8a1a24; + text-decoration: underline; +} + +/* Copy Button */ +.copy-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + background: #f5f5f5; + color: #424242; + border: 2px solid #e0e0e0; + padding: 12px 24px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + border-radius: 10px; + transition: all 0.3s ease; + width: 100%; +} + +.copy-btn:hover { + background: #B7202E; + color: #ffffff; + border-color: #B7202E; +} + +/* Back Link */ +.back-link { + display: inline-flex; + align-items: center; + gap: 8px; + margin-top: 30px; + color: #757575; + font-size: 14px; + font-weight: 500; + text-decoration: none; + transition: all 0.2s ease; +} + +.back-link:hover { + color: #B7202E; +} + +/* Responsive */ +@media (max-width: 768px) { + .header-bar { + flex-direction: column; padding: 15px; - background-color: #f8f9fa; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + gap: 10px; } - - #meetingDetails p { - font-size: 1rem; - color: #333; + + .header-bar .college-name { + order: -1; + font-size: 22px; } - - #meetingDetails a { - color: #007bff; - text-decoration: none; + + .navbar { + padding: 0 15px; } - - #meetingDetails a:hover { - text-decoration: underline; + + .navbar ul li a { + padding: 12px 16px; + font-size: 14px; } + + .zoom-container { + padding: 30px 15px; + } + + .zoom-card { + padding: 40px 25px; + } + + .zoom-card h2 { + font-size: 24px; + } + + .create-btn { + padding: 14px 30px; + font-size: 14px; + min-width: 180px; + } +} + +@media (max-width: 480px) { + .zoom-icon { + width: 70px; + height: 70px; + } + + .zoom-icon svg { + width: 35px; + height: 35px; + } + + .zoom-card h2 { + font-size: 22px; + } + + .zoom-card .subtitle { + font-size: 14px; + } + + .navbar ul { + justify-content: center; + } + + .navbar ul li a { + padding: 10px 12px; + font-size: 13px; + } +} \ No newline at end of file diff --git a/frontend/src/Page3.js b/frontend/src/Page3.js index 1a78451..b72ee6c 100644 --- a/frontend/src/Page3.js +++ b/frontend/src/Page3.js @@ -1,14 +1,19 @@ //Page3.js import React, { useState } from "react"; -import './Page3.css' +import { Link } from "react-router-dom"; +import './Page3.css'; +import image from './components/image.png'; +import somaiyatrust from './components/somaiyatrust.png'; const Page3 = () => { const [meetingDetails, setMeetingDetails] = useState(null); + const [isLoading, setIsLoading] = useState(false); // Handle form submission const handleSubmit = async (event) => { event.preventDefault(); + setIsLoading(true); try { const response = await fetch('/create-meeting', { @@ -25,27 +30,86 @@ const Page3 = () => { }); } catch (error) { console.error("Error creating meeting:", error); + } finally { + setIsLoading(false); } }; - return ( -
-

Generate Zoom Meeting

- - - + const copyToClipboard = () => { + navigator.clipboard.writeText(meetingDetails.join_url); + alert('Link copied to clipboard!'); + }; - {meetingDetails && ( -
-

Meeting ID: {meetingDetails.id}

-

- Join URL:{" "} - - {meetingDetails.join_url} - -

+ return ( +
+ {/* Header Bar */} +
+ Left Logo +

Somaiya Scheduler

+ Right Logo +
+ + {/* Navigation Bar */} + + + {/* Main Content */} +
+
+
+ + + +
+

Generate Zoom Meeting

+

Create an instant Zoom meeting link to share with participants

+ +
+ +
+ + {meetingDetails && ( +
+
+ ✓ Meeting Created Successfully! +
+
+ Meeting ID + {meetingDetails.id} +
+ + +
+ )}
- )} + + + ← Back to Dashboard + +
); }; diff --git a/frontend/src/Page4.css b/frontend/src/Page4.css index 9ef79ae..3084577 100644 --- a/frontend/src/Page4.css +++ b/frontend/src/Page4.css @@ -1,137 +1,330 @@ -/*Page4.css*/ +/*Page4.css - Schedule Meeting Form*/ /* Container for the content area */ .content-area { - width: 100%; - max-width: 800px; - margin: 0 auto; - padding: 20px; - background-color: #fff; - border-radius: 10px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - font-family: Arial, sans-serif; + width: 100%; + max-width: 900px; + margin: 40px auto; + padding: 40px; + background-color: var(--white); + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-lg); + font-family: var(--font-primary); +} + +/* Heading Style */ +.content-area h1 { + font-size: 28px; + font-weight: 700; + color: var(--primary-red); + margin-bottom: 30px; + text-align: center; + position: relative; + padding-bottom: 15px; +} + +.content-area h1::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + border-radius: 2px; +} + +/* Form Section */ +.form-section { + margin-bottom: 30px; + padding-bottom: 25px; + border-bottom: 1px solid var(--medium-gray); +} + +.form-section:last-of-type { + border-bottom: none; + margin-bottom: 0; +} + +.form-section h3 { + color: var(--primary-red); + font-size: 18px; + font-weight: 600; + margin-bottom: 20px; + display: flex; + align-items: center; + gap: 10px; +} + +/* Label Styling */ +.content-area label { + font-size: 15px; + font-weight: 600; + color: var(--darker-gray); + margin-bottom: 8px; + display: block; +} + +/* Input Fields and Select Styling */ +.content-area input[type="text"], +.content-area input[type="email"], +.content-area input[type="date"], +.content-area input[type="time"], +.content-area select, +.content-area textarea { + width: 100%; + padding: 14px 18px; + margin-top: 6px; + margin-bottom: 20px; + border: 2px solid var(--medium-gray); + border-radius: var(--border-radius); + font-size: 15px; + color: var(--black); + background-color: var(--off-white); + transition: var(--transition); +} + +.content-area input:focus, +.content-area select:focus, +.content-area textarea:focus { + border-color: var(--primary-red); + background-color: var(--white); + box-shadow: 0 0 0 4px rgba(183, 32, 46, 0.1); +} + +.content-area input::placeholder, +.content-area textarea::placeholder { + color: var(--dark-gray); +} + +/* Select Dropdown */ +.content-area select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 16px center; + padding-right: 45px; +} + +/* Textarea Specific Styling */ +.content-area textarea { + min-height: 140px; + resize: vertical; + line-height: 1.6; +} + +/* Row Layout for Date/Time */ +.form-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; +} + +.form-row .form-group { + margin-bottom: 0; +} + +/* Agenda and Recipients Section Styling */ +.content-area .agenda-item, +.content-area .recipient-item { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 12px; + animation: fadeIn 0.3s ease; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +.content-area .agenda-item input, +.content-area .recipient-item input { + flex: 1; + margin-bottom: 0; +} + +/* Remove Button for Items */ +.content-area .remove-btn, +.content-area .FaTimes { + color: var(--white); + background-color: #dc3545; + border: none; + width: 36px; + height: 36px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition); + flex-shrink: 0; +} + +.content-area .remove-btn:hover, +.content-area .FaTimes:hover { + background-color: #c82333; + transform: scale(1.1); +} + +/* Primary Button Styling */ +.content-area button { + padding: 14px 28px; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + color: var(--white); + font-size: 15px; + font-weight: 600; + border: none; + border-radius: var(--border-radius); + cursor: pointer; + transition: var(--transition); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.content-area button:hover { + background: linear-gradient(135deg, var(--dark-red), #6d1219); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(183, 32, 46, 0.35); +} + +.content-area button:active { + transform: translateY(0); +} + +/* Secondary/Add Button */ +.content-area .add-btn, +.content-area button.secondary { + background: var(--light-gray); + color: var(--darker-gray); + padding: 12px 20px; + font-size: 14px; + margin-bottom: 20px; +} + +.content-area .add-btn:hover, +.content-area button.secondary:hover { + background: var(--medium-gray); + color: var(--black); + box-shadow: none; +} + +/* Submit Button Full Width */ +.content-area button[type="submit"], +.content-area .submit-btn { + width: 100%; + padding: 16px; + font-size: 16px; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 20px; +} + +/* Attachments Input Styling */ +.content-area input[type="file"] { + padding: 12px; + margin-top: 6px; + margin-bottom: 20px; + border: 2px dashed var(--medium-gray); + border-radius: var(--border-radius); + background-color: var(--off-white); + cursor: pointer; + transition: var(--transition); +} + +.content-area input[type="file"]:hover { + border-color: var(--primary-red); + background-color: rgba(183, 32, 46, 0.05); +} + +/* Button Group */ +.button-group { + display: flex; + gap: 15px; + flex-wrap: wrap; + margin-top: 30px; +} + +.button-group button { + flex: 1; + min-width: 150px; +} + +/* Success/Error Messages */ +.message { + padding: 14px 20px; + border-radius: var(--border-radius); + margin-bottom: 20px; + font-weight: 500; +} + +.message.success { + background-color: #d4edda; + color: #155724; + border-left: 4px solid #28a745; +} + +.message.error { + background-color: #f8d7da; + color: #721c24; + border-left: 4px solid #dc3545; +} + +/* Responsiveness */ +@media (max-width: 768px) { + .content-area { + margin: 20px; + padding: 30px 25px; } - - /* Heading Style */ + .content-area h1 { - font-size: 30px; - font-weight: 600; - color: #B7202E; - margin-bottom: 20px; - text-align: center; + font-size: 24px; } - - /* Label Styling */ - .content-area label { - font-size: 16px; - font-weight: 500; - color: #333; - margin-top: 10px; - display: block; + + .form-row { + grid-template-columns: 1fr; } - - /* Input Fields and Select Styling */ - .content-area input[type="text"], - .content-area input[type="email"], - .content-area input[type="date"], - .content-area input[type="time"], + + .content-area input, .content-area select, .content-area textarea { - width: 100%; - padding: 12px; - margin-top: 8px; - margin-bottom: 12px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 16px; - box-sizing: border-box; - outline: none; - transition: border-color 0.3s ease; + font-size: 16px; /* Prevents zoom on iOS */ } - - /* Focus effect for input fields */ - .content-area input:focus, - .content-area select:focus, - .content-area textarea:focus { - border-color: #B7202E; + + .content-area button { + font-size: 14px; + padding: 12px 20px; } - - /* Textarea Specific Styling */ - .content-area textarea { - height: 150px; - resize: vertical; +} + +@media (max-width: 480px) { + .content-area { + margin: 15px; + padding: 25px 20px; } - - /* Agenda and Recipients Section Styling */ + .content-area .agenda-item, .content-area .recipient-item { - display: flex; - align-items: center; - margin-top: 10px; + flex-direction: column; + align-items: stretch; } - - .content-area .agenda-item input, - .content-area .recipient-item input { - flex: 1; - margin-right: 10px; - } - - .content-area button { + + .content-area .remove-btn { width: 100%; - padding: 12px; - background-color: #B7202E; - color: white; - font-size: 16px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; - margin-bottom: 10px; + border-radius: var(--border-radius); } - - .content-area button:hover { - background-color: #B7202E; + + .button-group { + flex-direction: column; } - - /* Remove Button Styling for Agenda & Recipients */ - .content-area .FaTimes { - color: red; - cursor: pointer; - margin-left: 10px; - } - - /* Attachments Input Styling */ - .content-area input[type="file"] { - padding: 8px; - margin-top: 8px; - margin-bottom: 12px; - } - - /* Margin for buttons */ - .content-area button:not(:last-child) { - margin-bottom: 10px; - } - - /* Responsiveness */ - @media (max-width: 768px) { - .content-area { - padding: 15px; - } - - .content-area h1 { - font-size: 24px; - } - - .content-area label, - .content-area input, - .content-area select, - .content-area textarea { - font-size: 14px; - } - - .content-area button { - font-size: 14px; - padding: 10px; - } + + .button-group button { + width: 100%; } +} \ No newline at end of file diff --git a/frontend/src/Page5.css b/frontend/src/Page5.css index 535f61d..9791056 100644 --- a/frontend/src/Page5.css +++ b/frontend/src/Page5.css @@ -1,33 +1,19 @@ -/*Page5.css*/ - -/* Base Styles */ -:root { - --primary-red: #B7202E; - --dark-red: #8a0000; - --light-red: #d32f2f; - --white: #ffffff; - --light-gray: #f5f5f5; - --medium-gray: #e0e0e0; - --dark-gray: #757575; - --black: #212121; - --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - --transition: all 0.3s ease; -} +/*Page5.css - Meeting Database*/ /* Page Container */ .page-container { display: flex; flex-direction: column; min-height: 100vh; - background-color: #f4f4f4; + background-color: var(--off-white); } html, body { margin: 0; padding: 0; - height: auto; /* Let height grow naturally */ - overflow-x: hidden; /* Hide only horizontal scroll */ - overflow-y: auto; /* Allow vertical scroll */ + height: auto; + overflow-x: hidden; + overflow-y: auto; } /* Header Bar */ @@ -35,29 +21,35 @@ html, body { display: flex; justify-content: space-between; align-items: center; - padding: 15px 20px; + padding: 15px 40px; background-color: var(--white); - box-shadow: var(--shadow); + box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; + gap: 20px; } .leftlogo, .rightlogo { - height: 50px; + height: 55px; width: auto; + flex-shrink: 0; } .college-name { color: var(--primary-red); - font-size: 1.5rem; + font-size: clamp(18px, 3vw, 26px); + font-weight: 700; margin: 0; + text-align: center; + letter-spacing: -0.5px; } /* Navigation Bar */ .navbar { - background-color: var(--primary-red); - padding: 0 20px; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + padding: 0 40px; + box-shadow: var(--shadow-sm); } .navbar ul { @@ -67,46 +59,84 @@ html, body { display: flex; justify-content: center; flex-wrap: wrap; + gap: 5px; } .navbar li { - padding: 15px 20px; + padding: 0; } .navbar a { + display: block; color: var(--white); text-decoration: none; font-weight: 500; + padding: 16px 24px; transition: var(--transition); + position: relative; } -.navbar a:hover, .navbar a.active { - color: var(--white); - text-decoration: underline; - text-underline-offset: 5px; +.navbar a::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 3px; + background-color: var(--white); + transition: var(--transition); + transform: translateX(-50%); +} + +.navbar a:hover::after, +.navbar a.active::after { + width: calc(100% - 48px); +} + +.navbar a:hover { + background-color: rgba(255, 255, 255, 0.1); } /* Main Content */ .meetings-page-container { flex: 1; - padding: 30px; + padding: 40px; max-width: 1400px; - margin: 40px auto 0 auto; /* 40px top margin to separate from navbar */ + margin: 0 auto; width: 100%; } .page-title { text-align: center; color: var(--primary-red); - margin-bottom: 30px; + margin-bottom: 40px; font-size: 2rem; + font-weight: 700; + position: relative; + padding-bottom: 15px; +} + +.page-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 4px; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + border-radius: 2px; } .no-meetings { text-align: center; color: var(--dark-gray); font-size: 1.2rem; - margin-top: 40px; + margin-top: 60px; + padding: 40px; + background-color: var(--white); + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-sm); } /* Meetings Grid Container */ @@ -117,54 +147,63 @@ html, body { .meetings-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 25px; + grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); + gap: 30px; padding: 10px; } +/* Soft Delete Button */ .soft-delete-button { - background-color: #d9534f; - color: white; - padding: 8px 14px; + background: linear-gradient(135deg, #dc3545, #c82333); + color: var(--white); + padding: 10px 18px; border: none; - border-radius: 4px; + border-radius: var(--border-radius); cursor: pointer; - margin-top: 10px; + margin-top: 15px; + font-weight: 600; + font-size: 14px; + transition: var(--transition); + display: inline-flex; + align-items: center; + gap: 8px; } .soft-delete-button:hover { - background-color: #c9302c; + background: linear-gradient(135deg, #c82333, #a71d2a); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4); } - /* Meeting Cards */ .meeting-card { background-color: var(--white); - border-radius: 8px; - box-shadow: var(--shadow); - border-left: 4px solid var(--primary-red); + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-md); + border-left: 5px solid var(--primary-red); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; - min-height: 150px; + min-height: 180px; } .meeting-card:hover { - transform: translateY(-5px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + transform: translateY(-8px); + box-shadow: var(--shadow-hover); } .card-summary { - padding: 20px; + padding: 25px; cursor: pointer; } .meeting-title { color: var(--black); font-size: 1.2rem; - margin: 0 0 10px 0; - line-height: 1.3; + font-weight: 600; + margin: 0 0 12px 0; + line-height: 1.4; } .meeting-meta { @@ -172,34 +211,54 @@ html, body { justify-content: space-between; color: var(--dark-gray); font-size: 0.9rem; - margin-bottom: 8px; + margin-bottom: 10px; + flex-wrap: wrap; + gap: 10px; } .meeting-department { color: var(--primary-red); - font-weight: 500; + font-weight: 600; font-size: 0.9rem; + background-color: rgba(183, 32, 46, 0.1); + padding: 4px 12px; + border-radius: var(--border-radius-xl); + display: inline-block; } .card-details { - padding: 20px; + padding: 25px; background-color: var(--light-gray); border-top: 1px solid var(--medium-gray); flex: 1; + animation: slideDown 0.3s ease; +} + +@keyframes slideDown { + from { + opacity: 0; + max-height: 0; + } + to { + opacity: 1; + max-height: 1000px; + } } .detail-row { display: flex; - margin-bottom: 10px; - line-height: 1.4; + margin-bottom: 12px; + line-height: 1.5; } .detail-label { font-weight: 600; color: var(--primary-red); - min-width: 100px; + min-width: 110px; + flex-shrink: 0; } + .detail-section { margin: 20px 0; } @@ -207,9 +266,10 @@ html, body { .detail-section h3 { color: var(--primary-red); font-size: 1.1rem; - margin-bottom: 10px; - border-bottom: 1px solid var(--medium-gray); - padding-bottom: 5px; + font-weight: 600; + margin-bottom: 12px; + border-bottom: 2px solid var(--medium-gray); + padding-bottom: 8px; } .agenda-list, .attachments-list { @@ -218,107 +278,154 @@ html, body { } .agenda-list li, .attachments-list li { - margin-bottom: 8px; - line-height: 1.4; + margin-bottom: 10px; + line-height: 1.5; + color: var(--darker-gray); } .attachments-list a { color: var(--primary-red); text-decoration: none; - transition: var(--transition); + font-weight: 500; + transition: var(--transition-fast); } .attachments-list a:hover { + color: var(--dark-red); text-decoration: underline; } .recipients-list { word-break: break-all; + color: var(--darker-gray); + line-height: 1.6; } /* Calendar Button */ .calendar-button { display: block; - background-color: var(--primary-red); + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); color: var(--white) !important; text-align: center; - padding: 10px; - border-radius: 5px; + padding: 12px 20px; + border-radius: var(--border-radius); margin-top: 20px; text-decoration: none; + font-weight: 600; transition: var(--transition); } .calendar-button:hover { - background-color: var(--dark-red); + background: linear-gradient(135deg, var(--dark-red), #6d1219); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(183, 32, 46, 0.35); } /* Footer */ footer { - background-color: var(--primary-red); + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); color: var(--white); - padding: 20px; + padding: 25px 40px; text-align: center; + margin-top: auto; } .terms { display: flex; justify-content: center; align-items: center; - gap: 20px; + gap: 30px; + flex-wrap: wrap; } .terms a { color: var(--white); text-decoration: none; + font-weight: 500; + padding: 8px 16px; + border-radius: var(--border-radius-sm); + transition: var(--transition); +} + +.terms a:hover { + background-color: rgba(255, 255, 255, 0.15); } .footer-image { height: 30px; + margin-top: 15px; } /* Responsive Design */ @media (max-width: 1024px) { .meetings-grid { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + } + + .header-bar, + .navbar, + .meetings-page-container { + padding-left: 20px; + padding-right: 20px; } } @media (max-width: 768px) { .header-bar { flex-direction: column; - padding: 10px; + padding: 15px; + gap: 10px; } .college-name { - margin: 10px 0; font-size: 1.2rem; + order: -1; } .navbar li { - padding: 10px 15px; + padding: 12px 16px; + } + + .navbar a { + padding: 12px 16px; + font-size: 14px; } .meetings-page-container { - padding: 20px 15px; + padding: 25px 15px; + } + + .page-title { + font-size: 1.6rem; } } @media (max-width: 480px) { .meetings-grid { grid-template-columns: 1fr; + gap: 20px; } .detail-row { flex-direction: column; + gap: 5px; } .detail-label { - margin-bottom: 5px; + margin-bottom: 0; + min-width: auto; } .meeting-meta { flex-direction: column; - gap: 5px; + gap: 8px; + } + + .card-summary { + padding: 20px; + } + + .card-details { + padding: 20px; } } \ No newline at end of file diff --git a/frontend/src/Page6.css b/frontend/src/Page6.css index 53d3724..9902efd 100644 --- a/frontend/src/Page6.css +++ b/frontend/src/Page6.css @@ -1,23 +1,11 @@ -/*Page6.css*/ - -/* Root Variables (optional, for consistency) */ -:root { - --primary-red: #B7202E; - --dark-red: #8a0000; - --white: #ffffff; - --light-gray: #f5f5f5; - --medium-gray: #e0e0e0; - --dark-gray: #757575; - --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - --transition: all 0.3s ease; -} +/*Page6.css - Edit Database*/ /* Page Container */ .page-container { display: flex; flex-direction: column; min-height: 100vh; - background-color: #f4f4f4; + background-color: var(--off-white); } /* Header Bar */ @@ -25,30 +13,35 @@ display: flex; justify-content: space-between; align-items: center; - padding: 15px 20px; + padding: 15px 40px; background-color: var(--white); - box-shadow: var(--shadow); + box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; + gap: 20px; } .leftlogo, .rightlogo { - height: 50px; + height: 55px; width: auto; + flex-shrink: 0; } .college-name { color: var(--primary-red); - font-size: 1.5rem; + font-size: clamp(18px, 3vw, 26px); + font-weight: 700; margin: 0; text-align: center; + letter-spacing: -0.5px; } /* Navbar */ .navbar { - background-color: var(--primary-red); - padding: 0 20px; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + padding: 0 40px; + box-shadow: var(--shadow-sm); } .navbar ul { @@ -58,28 +51,48 @@ flex-wrap: wrap; margin: 0; padding: 0; + gap: 5px; } .navbar li { - padding: 15px 20px; + padding: 0; } .navbar a { + display: block; color: var(--white); text-decoration: none; font-weight: 500; + padding: 16px 24px; transition: var(--transition); + position: relative; } -.navbar a:hover, .navbar a.active { - text-decoration: underline; - text-underline-offset: 5px; +.navbar a::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 3px; + background-color: var(--white); + transition: var(--transition); + transform: translateX(-50%); +} + +.navbar a:hover::after, +.navbar a.active::after { + width: calc(100% - 48px); +} + +.navbar a:hover { + background-color: rgba(255, 255, 255, 0.1); } /* Main Content */ .email-management-container { flex: 1; - padding: 30px; + padding: 40px; max-width: 1400px; margin: 0 auto; width: 100%; @@ -88,134 +101,212 @@ .email-management-container h1 { text-align: center; color: var(--primary-red); - margin-bottom: 30px; + margin-bottom: 40px; font-size: 2rem; + font-weight: 700; + position: relative; + padding-bottom: 15px; +} + +.email-management-container h1::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 4px; + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + border-radius: 2px; } /* Search Bar */ .search-bar { - margin-bottom: 20px; + margin-bottom: 30px; } .search-bar input { width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 4px; + padding: 14px 20px; + border: 2px solid var(--medium-gray); + border-radius: var(--border-radius-xl); font-size: 16px; + background-color: var(--white); + transition: var(--transition); +} + +.search-bar input:focus { + border-color: var(--primary-red); + box-shadow: 0 0 0 4px rgba(183, 32, 46, 0.1); +} + +.search-bar input::placeholder { + color: var(--dark-gray); } /* Grid Layout */ .departments-list { display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 25px; + grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); + gap: 30px; padding: 10px; } /* Department Card Style */ .department-card { background-color: var(--white); - border-radius: 8px; - box-shadow: var(--shadow); - border-left: 4px solid var(--primary-red); - padding: 20px; + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-md); + border-left: 5px solid var(--primary-red); + padding: 25px; transition: var(--transition); display: flex; flex-direction: column; justify-content: space-between; - min-height: 150px; + min-height: 180px; } .department-card:hover { - transform: translateY(-5px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + transform: translateY(-8px); + box-shadow: var(--shadow-hover); } .department-card h3 { - margin-top: 0; + margin: 0 0 15px 0; color: var(--primary-red); - font-size: 1.1rem; - border-bottom: 1px solid var(--medium-gray); - padding-bottom: 8px; + font-size: 1.15rem; + font-weight: 600; + border-bottom: 2px solid var(--medium-gray); + padding-bottom: 12px; } .department-card ul { list-style: none; padding-left: 0; - margin-bottom: 10px; + margin-bottom: 15px; + flex: 1; } .department-card li { - padding: 5px 0; - border-bottom: 1px solid var(--medium-gray); - color: var(--dark-gray); + padding: 8px 0; + border-bottom: 1px solid var(--light-gray); + color: var(--darker-gray); font-size: 0.95rem; + display: flex; + align-items: center; + gap: 8px; +} + +.department-card li:last-child { + border-bottom: none; +} + +.department-card li::before { + content: '✉'; + color: var(--primary-red); + font-size: 12px; } /* Actions */ .department-actions { display: flex; - gap: 10px; - margin-top: 10px; + gap: 12px; + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid var(--light-gray); } .edit-btn, .delete-btn, .add-department-btn, .save-btn, .cancel-btn { - display: flex; + display: inline-flex; align-items: center; - gap: 5px; - padding: 8px 12px; + justify-content: center; + gap: 6px; + padding: 10px 18px; border: none; - border-radius: 4px; + border-radius: var(--border-radius); cursor: pointer; font-size: 14px; + font-weight: 600; + transition: var(--transition); } .edit-btn { - background-color: #4CAF50; - color: white; + background: linear-gradient(135deg, #4CAF50, #45a049); + color: var(--white); + flex: 1; +} + +.edit-btn:hover { + background: linear-gradient(135deg, #45a049, #3d8b40); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); } .delete-btn { - background-color: #f44336; - color: white; + background: linear-gradient(135deg, #f44336, #d32f2f); + color: var(--white); + flex: 1; +} + +.delete-btn:hover { + background: linear-gradient(135deg, #d32f2f, #b71c1c); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4); } .add-department-btn { - background-color: #2196F3; - color: white; - margin-bottom: 20px; + background: linear-gradient(135deg, #2196F3, #1976D2); + color: var(--white); + margin-bottom: 30px; + padding: 14px 28px; + font-size: 15px; +} + +.add-department-btn:hover { + background: linear-gradient(135deg, #1976D2, #1565C0); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4); } /* Edit Form */ .edit-form { - background-color: var(--light-gray); - padding: 20px; - border-radius: 8px; - margin-bottom: 20px; + background-color: var(--white); + padding: 30px; + border-radius: var(--border-radius-lg); + margin-bottom: 30px; + box-shadow: var(--shadow-md); + border-left: 5px solid #2196F3; } .form-group { - margin-bottom: 15px; + margin-bottom: 20px; } .form-group label { display: block; - margin-bottom: 5px; - font-weight: bold; + margin-bottom: 8px; + font-weight: 600; + color: var(--darker-gray); } .form-group input { width: 100%; - padding: 8px; - border: 1px solid var(--medium-gray); - border-radius: 4px; + padding: 12px 16px; + border: 2px solid var(--medium-gray); + border-radius: var(--border-radius); + font-size: 15px; + transition: var(--transition); +} + +.form-group input:focus { + border-color: var(--primary-red); + box-shadow: 0 0 0 4px rgba(183, 32, 46, 0.1); } .email-input-group { display: flex; - gap: 10px; - margin-bottom: 10px; + gap: 12px; + margin-bottom: 12px; align-items: center; } @@ -228,80 +319,169 @@ border: none; color: #f44336; cursor: pointer; - font-size: 16px; + font-size: 18px; + padding: 8px; + transition: var(--transition); + border-radius: 50%; +} + +.remove-email:hover { + background-color: rgba(244, 67, 54, 0.1); + transform: scale(1.1); } .add-email { - background-color: #2196F3; - color: white; + background: linear-gradient(135deg, #2196F3, #1976D2); + color: var(--white); border: none; - padding: 8px 12px; - border-radius: 4px; + padding: 10px 18px; + border-radius: var(--border-radius); cursor: pointer; - display: flex; + display: inline-flex; align-items: center; - gap: 5px; + gap: 6px; + font-weight: 600; + transition: var(--transition); +} + +.add-email:hover { + background: linear-gradient(135deg, #1976D2, #1565C0); + transform: translateY(-2px); } .form-actions { display: flex; - gap: 10px; - margin-top: 20px; + gap: 15px; + margin-top: 25px; +} + +.save-btn { + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); + color: var(--white); + flex: 1; +} + +.save-btn:hover { + background: linear-gradient(135deg, var(--dark-red), #6d1219); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(183, 32, 46, 0.4); +} + +.cancel-btn { + background: var(--medium-gray); + color: var(--darker-gray); + flex: 1; +} + +.cancel-btn:hover { + background: var(--dark-gray); + color: var(--white); + transform: translateY(-2px); } /* Footer */ footer { - background-color: var(--primary-red); + background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); color: var(--white); - padding: 20px; + padding: 25px 40px; text-align: center; + margin-top: auto; } .terms { display: flex; justify-content: center; align-items: center; - gap: 20px; + gap: 30px; + flex-wrap: wrap; } .terms a { color: var(--white); text-decoration: none; + font-weight: 500; + padding: 8px 16px; + border-radius: var(--border-radius-sm); + transition: var(--transition); +} + +.terms a:hover { + background-color: rgba(255, 255, 255, 0.15); } .footer-image { height: 30px; + margin-top: 15px; } /* Responsive */ @media (max-width: 1024px) { .departments-list { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + } + + .header-bar, + .navbar, + .email-management-container { + padding-left: 20px; + padding-right: 20px; } } @media (max-width: 768px) { .header-bar { flex-direction: column; - padding: 10px; + padding: 15px; + gap: 10px; } .college-name { - margin: 10px 0; font-size: 1.2rem; + order: -1; } .navbar li { - padding: 10px 15px; + padding: 12px 16px; + } + + .navbar a { + padding: 12px 16px; + font-size: 14px; } .email-management-container { - padding: 20px 15px; + padding: 25px 15px; + } + + .email-management-container h1 { + font-size: 1.6rem; + } + + .edit-form { + padding: 20px; + } + + .department-actions { + flex-direction: column; } } @media (max-width: 480px) { .departments-list { grid-template-columns: 1fr; + gap: 20px; + } + + .email-input-group { + flex-direction: column; + align-items: stretch; + } + + .remove-email { + align-self: flex-end; + } + + .form-actions { + flex-direction: column; } } diff --git a/frontend/src/index.css b/frontend/src/index.css index ec2585e..6fd0cd9 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,13 +1,122 @@ -body { +/* Global CSS Variables */ +:root { + --primary-red: #B7202E; + --dark-red: #8a1a24; + --light-red: #d63447; + --accent-red: #ff4757; + --white: #ffffff; + --off-white: #fafafa; + --light-gray: #f5f5f5; + --medium-gray: #e0e0e0; + --dark-gray: #757575; + --darker-gray: #424242; + --black: #212121; + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); + --shadow-hover: 0 12px 40px rgba(183, 32, 46, 0.2); + --transition-fast: all 0.2s ease; + --transition: all 0.3s ease; + --transition-slow: all 0.4s ease; + --border-radius-sm: 6px; + --border-radius: 10px; + --border-radius-lg: 16px; + --border-radius-xl: 24px; + --font-primary: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; +} + +/* CSS Reset */ +*, *::before, *::after { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: var(--off-white); + color: var(--black); + line-height: 1.6; + min-height: 100vh; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} + +/* Global Link Styles */ +a { + text-decoration: none; + color: inherit; + transition: var(--transition-fast); +} + +/* Global Button Reset */ +button { + font-family: inherit; + cursor: pointer; + border: none; + outline: none; + transition: var(--transition); +} + +button:focus-visible { + outline: 2px solid var(--primary-red); + outline-offset: 2px; +} + +/* Global Input Styles */ +input, select, textarea { + font-family: inherit; + font-size: inherit; + outline: none; + border: 1px solid var(--medium-gray); + transition: var(--transition-fast); +} + +input:focus, select:focus, textarea:focus { + border-color: var(--primary-red); + box-shadow: 0 0 0 3px rgba(183, 32, 46, 0.1); +} + +/* Utility Classes */ +.text-center { text-align: center; } +.text-primary { color: var(--primary-red); } +.mt-1 { margin-top: 0.5rem; } +.mt-2 { margin-top: 1rem; } +.mt-3 { margin-top: 1.5rem; } +.mb-1 { margin-bottom: 0.5rem; } +.mb-2 { margin-bottom: 1rem; } +.mb-3 { margin-bottom: 1.5rem; } + +/* Scrollbar Styling */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--light-gray); +} + +::-webkit-scrollbar-thumb { + background: var(--medium-gray); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--dark-gray); +} + +/* Selection Color */ +::selection { + background-color: var(--primary-red); + color: var(--white); } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..1a2bf65 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "BOS-React-", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}