diff --git a/frontend/public/index.html b/frontend/public/index.html index aa069f2..4db419b 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -3,6 +3,8 @@ + + { return ( diff --git a/frontend/src/Pages/About.module.css b/frontend/src/Pages/About.module.css index 1bee168..f6a494e 100644 --- a/frontend/src/Pages/About.module.css +++ b/frontend/src/Pages/About.module.css @@ -1,20 +1,47 @@ -/* styles.css */ -/* Navbar Styles */ -/* About Page Styles */ + .about-container { - margin-top: 65px; /* To account for the fixed navbar */ + margin-top: 65px; padding: 20px; text-align: center; background: linear-gradient(to bottom right, #001F3F, #0d41c4); color:#def2f9; min-height: calc(100vh - 65px); } +.about-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.9; + background:url('Images/4.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + z-index: -1; +} + +.about-container { + margin-top: 65px; + padding: 20px; + text-align: center; + color: black; + min-height: calc(100vh - 65px); + position: relative; + z-index: -1; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(10px); +} .about-container h1 { margin-top: 305px; font-size: 2.5em; margin-bottom: 20px; + color: #f9f9f9; } .about-container h2 { margin-top: 25px; @@ -31,11 +58,11 @@ .team-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid columns */ + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: 1200px; - margin: auto; /* Center the grid and adjust margin */ - /* padding: 20px; */ + margin: auto; + border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @@ -60,7 +87,7 @@ color: #666; } -/* Responsive Styles */ + @media (max-width: 768px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); @@ -98,4 +125,4 @@ .about-container p { font-size: 0.9em; } -} +} diff --git a/frontend/src/Pages/AdminLoginPage.js b/frontend/src/Pages/AdminLoginPage.js index 2a4920b..9decd98 100644 --- a/frontend/src/Pages/AdminLoginPage.js +++ b/frontend/src/Pages/AdminLoginPage.js @@ -1,74 +1,83 @@ + +import drdo from "./Images/user.jpg"; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import axios from 'axios'; import styles from './AdminLoginPage.module.css'; const AdminLoginPage = () => { - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const history = useHistory(); - - const handleLogin = async () => { - try { - const response = await axios.post('http://localhost:5000/api/admin/login', { - username, - password, - }); - - if (response.data.token) { - localStorage.setItem('adminToken', response.data.token); - alert('login successful'); - history.push('/admin/dashboard'); - } - } catch (error) { - if (error.response) { - // Server responded with a status other than 2 - console.error('Login failed:', error.response.data.message); - alert('Invalid username or password'); - } else if (error.request) { - // Request was made but no response was received - console.error('No response received:', error.request); - alert('No response from the server. Please try again later.'); - } else { - // Something else happened - console.error('Error:', error.message); - alert('An error occurred. Please try again.'); - } - } - }; + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const history = useHistory(); - const handleSignupClick = () => { - history.push('/signup'); - }; + const handleLogin = async () => { + try { + const response = await axios.post('http://localhost:5000/api/admin/login', { + username, + password, + }); + + if (response.data.token) { + localStorage.setItem('adminToken', response.data.token); + alert('login successful'); + history.push('/admin/dashboard'); + } + } catch (error) { + if (error.response) { + // Server responded with a status other than 2 + console.error('Login failed:', error.response.data.message); + alert('Invalid username or password'); + } else if (error.request) { + // Request was made but no response was received + console.error('No response received:', error.request); + alert('No response from the server. Please try again later.'); + } else { + // Something else happened + console.error('Error:', error.message); + alert('An error occurred. Please try again.'); + } + } + }; + + const handleSignupClick = () => { + history.push('/signup'); + }; - return ( -
-
-

Admin Login

-
- setUsername(e.target.value)} - className={styles.input} - /> + return ( +
+
+ +
+

Admin Login

+
+
+ setUsername(e.target.value)} + className={styles.input} + /> +
+
+ setPassword(e.target.value)} + className={styles.input} + /> +
+
+ +
+
+
-
- setPassword(e.target.value)} - className={styles.input} - />
-
- -
-
-
- ); + ); }; export default AdminLoginPage; + + diff --git a/frontend/src/Pages/AdminLoginPage.module.css b/frontend/src/Pages/AdminLoginPage.module.css index 2ff7f4a..31f5315 100644 --- a/frontend/src/Pages/AdminLoginPage.module.css +++ b/frontend/src/Pages/AdminLoginPage.module.css @@ -1,128 +1,167 @@ - - -body { - font-family: Arial, sans-serif; - background: #ededed; +/* + body { + font-family: 'Roboto', sans-serif; + + background-image: url; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; - } - - .containeradmin { +} */ +.lSignUP{ + width: 100px; + height: 100px; + margin-left:39%; + margin-bottom: 20px; + margin-top: 20px; + padding: 0.2rem; + border-radius: 50%; + background-color: white; +} +.containeradmin { + content: ''; + position: absolute; + background-image: url('Images/1.webp'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + height: 100% ; + width: 100%; +} +.containeradmin { display: flex; width: 400px; - height: 500px; - background: #fff; - border-radius: 10px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + margin-top: 50px; + height: 550px; + background: rgba(255, 255, 255, 0.9); + border-radius: 15px; + box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2); overflow: hidden; - transition: all 0.3s ease; - } - - .loginSection, .welcomeSection { - flex: 1; + flex-direction: column; + position: relative; + background: url('Images/1.webp') no-repeat center center ; + background-size: cover; + background-blur: 10px; +} + +.adlog::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('Images/1.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + /* opacity: 0.1; */ + z-index: -1; +} + +.loginSection { + margin-top:0px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; - } - - .loginSection { - background: #001F3F; - } - - .welcomeSection { - background: #313131; - color: #f7f7f7; - } - - h2 { - margin-bottom: 30px; - font-size: 24px; + background: rgba(0, 0, 0, 0.5); + border-radius: 15px; + color: #ffffff; + height: 100%; + backdrop-filter: blur(10px); +} + +h2 { + margin-top: 0px; + margin-bottom: 24px; + font-size: 30px; text-align: center; - } - - p { + color: #ffffff; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +p { margin-bottom: 20px; font-size: 16px; text-align: center; - } - - .inputContainer { - margin-bottom: 20px; - width: 100%; - } - - input { + color: #ffffff; +} + +.inputContainer { + margin-bottom: 16px; + width:300px; +} + +label { + font-size: 14px; + color: #ffffff; + margin-bottom: 8px; + display: block; +} + +input { width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; + padding: 14px; + border: none; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); box-sizing: border-box; - transition: border-color 0.3s; - } - - input:focus { - border-color: #007bff; + background-color: #ffffff; + color: #333333; + transition: box-shadow 0.3s, border-color 0.3s; +} + +input:focus { + border-color: #2575fc; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); outline: none; - } - - .buttonContainer { +} + +.buttonContainer { width: 100%; - } - - .buttonadmin { +} + +.buttonadmin { + margin-top: 30px; width: 100%; - padding: 10px; - margin-bottom: 10px; - background-color: #007bff; + padding: 14px; + background-color: #2575fc; color: white; border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - } - - .buttonadmin:hover { - background-color: #0056b3; - } - - .signupButtongreen { - margin-top: 30px; - padding: 10px; - border-radius: 5px; + border-radius: 8px; cursor: pointer; - color: white; - width: 100%; - background-color: #28a745; - } - - .signupButtongreen:hover { - background-color: #218838; - } - - .forgotPasswordContainer { + font-size: 16px; + transition: background-color 0.3s, transform 0.3s; +} + +.buttonadmin:hover { + background-color: #1e6dc9; + transform: translateY(-2px); +} + +.forgotPasswordContainer { margin-top: 10px; - } - - .forgotPasswordContainer a { - color: #007bff; +} + +.forgotPasswordContainer a { + color: #ffffff; text-decoration: none; + font-size: 14px; transition: color 0.3s; - } - - .forgotPasswordContainer a:hover { - color: #0056b3; - } - - @media (max-width: 800px) { - .container { - flex-direction: column; - width: 90%; - height: auto; +} + +.forgotPasswordContainer a:hover { + color: #d1e8ff; +} + +@media (max-width: 800px) { + .containeradmin { + width: 90%; + height: auto; } - } - \ No newline at end of file +} + diff --git a/frontend/src/Pages/Images/1.webp b/frontend/src/Pages/Images/1.webp new file mode 100644 index 0000000..5a5194b Binary files /dev/null and b/frontend/src/Pages/Images/1.webp differ diff --git a/frontend/src/Pages/Images/2.jpg b/frontend/src/Pages/Images/2.jpg new file mode 100644 index 0000000..7114bca Binary files /dev/null and b/frontend/src/Pages/Images/2.jpg differ diff --git a/frontend/src/Pages/Images/3.jpg b/frontend/src/Pages/Images/3.jpg new file mode 100644 index 0000000..a61616e Binary files /dev/null and b/frontend/src/Pages/Images/3.jpg differ diff --git a/frontend/src/Pages/Images/4.jpg b/frontend/src/Pages/Images/4.jpg new file mode 100644 index 0000000..2782c04 Binary files /dev/null and b/frontend/src/Pages/Images/4.jpg differ diff --git a/frontend/src/Pages/Images/5.jpg b/frontend/src/Pages/Images/5.jpg new file mode 100644 index 0000000..83491a7 Binary files /dev/null and b/frontend/src/Pages/Images/5.jpg differ diff --git a/frontend/src/Pages/Images/6.jpg b/frontend/src/Pages/Images/6.jpg new file mode 100644 index 0000000..54ef450 Binary files /dev/null and b/frontend/src/Pages/Images/6.jpg differ diff --git a/frontend/src/Pages/Images/user.jpg b/frontend/src/Pages/Images/user.jpg new file mode 100644 index 0000000..2ccb0a0 Binary files /dev/null and b/frontend/src/Pages/Images/user.jpg differ diff --git a/frontend/src/Pages/SelectionPage.module.css b/frontend/src/Pages/SelectionPage.module.css index 8e84211..a9bdf8f 100644 --- a/frontend/src/Pages/SelectionPage.module.css +++ b/frontend/src/Pages/SelectionPage.module.css @@ -1,90 +1,4 @@ -/* -.selectionContainer { - opacity: 0.95; - display: flex; - background: linear-gradient(135deg, #1e2a78, #4a3c5c); - flex-direction: column; - align-items: center; - justify-content: center; - height: 90vh; - color: rgb(243, 238, 238); - text-align: center; - - max-width: 600px; - height: 350px; - margin: 0 auto; - padding: 25px; - border: 2px solid #fff; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); -} - -.logo { - width: 60px; - height: 60px; - margin-bottom: 20px; - padding: 0.3rem; - border-radius: 50%; - background: white; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease; -} - -.logo:hover { - transform: scale(1.1); -} - -h2 { - margin: 0; - font-size: 28px; - font-weight: bold; - color: #e2e1e1; - margin-bottom: 30px; -} - -.buttonContainer { - display: flex; - gap: 20px; -} - -button { - padding: 5px 5px; - font-size: 18px; - background-color: #007bff; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -button:hover { - background-color: #0056b3; - transform: scale(1.05); -} - -button:active { - background-color: #003d7a; -} - -.buttonContainer button:first-of-type { - background-color: #28a745; -} - -.buttonContainer button:first-of-type:hover { - background-color: #218838; -} - -.buttonContainer button:last-of-type { - background-color: #17a2b8; -} - -.buttonContainer button:last-of-type:hover { - background-color: #138496; -} */ -/* SelectionPage.module.css */ body{ background-color: #0056b3; } @@ -125,7 +39,7 @@ body{ height: 350px; margin: 0 auto; padding: 30px; - /* border: 2px solid #fff; */ + border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } diff --git a/frontend/src/Pages/UserLoginPage.js b/frontend/src/Pages/UserLoginPage.js index e204f4e..b39eb9e 100644 --- a/frontend/src/Pages/UserLoginPage.js +++ b/frontend/src/Pages/UserLoginPage.js @@ -58,4 +58,7 @@ const UserLoginPage = () => { ); }; -export default UserLoginPage; \ No newline at end of file +export default UserLoginPage; + + + diff --git a/frontend/src/index.js b/frontend/src/index.js index d563c0f..17d0e53 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -4,6 +4,7 @@ import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..fdf8ccd --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "DRDO-Telephone_Directory_Management", + "lockfileVersion": 2, + "requires": true, + "packages": {} +}