diff --git a/components/Footer/Footer.html b/components/Footer/Footer.html index 4f3659f7..a51be64c 100644 --- a/components/Footer/Footer.html +++ b/components/Footer/Footer.html @@ -4,7 +4,7 @@ <!-- <base href="/Pathsphere/"> --> <!-- uncomment above line if deploying to github pages --> <meta charset="UTF-8" /> - <link rel="stylesheet" href="/styles/styles.css" /> + <link rel="stylesheet" href="./styles/styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" @@ -38,18 +38,18 @@ <h3>PathSphere</h3> <div class="footer-list"> <h3>Quick links</h3> <ul> - <li><a href="/index.html">Home</a></li> - <li><a href="/pages/about/about.html">About us</a></li> + <li><a href="./index.html">Home</a></li> + <li><a href="./pages/about/about.html">About us</a></li> <li><a href="/pages/contact/contact.html">Contact Us</a></li> <li> - <a href="/pages/scholarships/scholarships.html">Scholarships</a> + <a href="./pages/scholarships/scholarships.html">Scholarships</a> </li> - <li><a href="/pages/jobs/jobs.html">Jobs</a></li> - <li><a href="/pages/forum/forum.html">Forum</a></li> - <li><a href="/pages/contributor/index.html">Contributor</a></li> - <li><a href="/pages/terms/index.html">Terms Of Services</a></li> + <li><a href="./pages/jobs/jobs.html">Jobs</a></li> + <li><a href="./pages/forum/forum.html">Forum</a></li> + <li><a href="./pages/contributor/index.html">Contributor</a></li> + <li><a href="./pages/terms/index.html">Terms Of Services</a></li> <li> - <a href="/pages/privacypolicy/privacypolicy.html">Privacy Policy</a> + <a href="./pages/privacypolicy/privacypolicy.html">Privacy Policy</a> </li> </ul> </div> diff --git a/components/GlobalScripts/GlobalScripts.html b/components/GlobalScripts/GlobalScripts.html index 84802005..304f1c77 100644 --- a/components/GlobalScripts/GlobalScripts.html +++ b/components/GlobalScripts/GlobalScripts.html @@ -12,6 +12,6 @@ crossorigin="anonymous" referrerpolicy="no-referrer" ></script> - <script src="/scripts/script.js"></script> + <script src="./scripts/script.js"></script> </body> </html> diff --git a/components/LoadingScreen/LoadingScreen.html b/components/LoadingScreen/LoadingScreen.html index a788741a..8251bf73 100644 --- a/components/LoadingScreen/LoadingScreen.html +++ b/components/LoadingScreen/LoadingScreen.html @@ -4,7 +4,7 @@ <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> - <link rel="stylesheet" href="/components/LoadingScreen/LoadingScreen.css" /> + <link rel="stylesheet" href="./components/LoadingScreen/LoadingScreen.css" /> </head> <body> <div id="LoadingScreen"> diff --git a/components/Navbar/Navbar.html b/components/Navbar/Navbar.html index c67362ee..7293f3e3 100644 --- a/components/Navbar/Navbar.html +++ b/components/Navbar/Navbar.html @@ -11,8 +11,8 @@ <header> <nav id="navbar"> - <a href="/index.html" class="logo"> - <img src="/images/logo.png" alt="PathSphere Logo" /> + <a href="./index.html" class="logo"> + <img src="./images/logo.png" alt="PathSphere Logo" /> PathSphere</a> <button class="hamburger"> <span></span> @@ -21,22 +21,22 @@ </button> <div class="menu"> <ul id="tabs"> - <li class="tab"><a href="/index.html">Home</a></li> - <li class="tab"><a href="/pages/scholarship-feature/scholarships.html">Scholarships</a></li> - <li class="tab"><a href="/pages/jobs/jobs.html">Jobs</a></li> - <li class="tab"><a href="/pages/forum/forum.html">Forum</a></li> - <li class="tab"><a href="/pages/faqs/faqs.html">FAQs</a></li> - <li class="tab"><a href="/pages/blog/blog.html">Blog</a></li> + <li class="tab"><a href="./index.html">Home</a></li> + <li class="tab"><a href="./pages/scholarship-feature/scholarships.html">Scholarships</a></li> + <li class="tab"><a href="./pages/jobs/jobs.html">Jobs</a></li> + <li class="tab"><a href="./pages/forum/forum.html">Forum</a></li> + <li class="tab"><a href="./pages/faqs/faqs.html">FAQs</a></li> + <li class="tab"><a href=./pages/blog/blog.html">Blog</a></li> <li class="tab"> - <a href="/pages/login-signup/login-signup.html"> + <a href="./pages/login-signup/login-signup.html"> <i class="fa-solid fa-sign-in-alt"></i> Login </a> </li> </ul> </div> - <img src="/images/dark.png" id="icon" alt="Dark mode toggle" /> + <img src="./images/dark.png" id="icon" alt="Dark mode toggle" /> </nav> </header> - <script src="/components/Navbar/Navbar.js"></script> + <script src="./components/Navbar/Navbar.js"></script> </body> </html> \ No newline at end of file diff --git a/components/Navbar/Navbar.js b/components/Navbar/Navbar.js index 70c95d17..84ac19ad 100644 --- a/components/Navbar/Navbar.js +++ b/components/Navbar/Navbar.js @@ -11,20 +11,20 @@ window.onload = function () { let theme = localStorage.getItem("theme"); if (theme === "dark") { document.body.classList.add("darkmode"); - icon.src = "/images/light.png"; + icon.src = "./images/light.png"; } else { document.body.classList.remove("darkmode"); - icon.src = "/images/dark.png"; + icon.src = "./images/dark.png"; } }; icon.onclick = function () { document.body.classList.toggle("darkmode"); if (document.body.classList.contains("darkmode")) { - icon.src = "/images/image.png"; + icon.src = "./images/image.png"; localStorage.setItem("theme", "dark"); } else { - icon.src = "/images/dark.png"; + icon.src = "./images/dark.png"; localStorage.setItem("theme", "light"); } }; diff --git a/components/ScrollToTop/ScrollToTop.html b/components/ScrollToTop/ScrollToTop.html index 77259896..b207a071 100644 --- a/components/ScrollToTop/ScrollToTop.html +++ b/components/ScrollToTop/ScrollToTop.html @@ -4,7 +4,7 @@ <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> - <link rel="stylesheet" href="/components/ScrollToTop/ScrollToTop.css" /> + <link rel="stylesheet" href="./components/ScrollToTop/ScrollToTop.css" /> </head> <body> <a class="scroll-top" href="#"> diff --git a/index.html b/index.html index 6625a319..6c76b9d8 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,11 @@ <html lang="en"> <head> - <link rel="stylesheet" href="/styles/styles.css"> + <link rel="stylesheet" href="./styles/styles.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home</title> - <link rel="icon" type="image/x-icon" href="/images/pathsphere.png"> + <link rel="icon" type="image/x-icon" href="./images/pathsphere.png"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> </head> @@ -31,15 +31,15 @@ <h1>Welcome to PathSphere</h1> <p>Your gateway to educational and professional resources</p> <div class="search-container"> - <a href="/pages/scholarship-feature/scholarships.html" class="btn"> + <a href="./pages/scholarship-feature/scholarships.html" class="btn"> <i class="fa-solid fa-magnifying-glass"></i> Find Scholarships </a> - <a href="/pages/jobs/jobs.html" class="btn"> + <a href="./pages/jobs/jobs.html" class="btn"> <i class="fa-solid fa-magnifying-glass"></i> Find Jobs </a> - <a href="/pages/login-signup/login-signup.html" class="btn"> + <a href="./pages/login-signup/login-signup.html" class="btn"> <i class="fa-solid fa-user-plus"></i> Register </a> @@ -48,37 +48,37 @@ <h1>Welcome to PathSphere</h1> </section> <section class="features"> <div class="feature"> - <img src="/images/sicon.png" class="feature-img" alt="Scholarships Icon"> + <img src="./images/sicon.png" class="feature-img" alt="Scholarships Icon"> <div class="card-details"> <h2>Scholarships</h2> <p>Discover scholarships tailored to your needs and academic performance.</p> - <a href="/pages/scholarship-feature/scholarships.html" class="btn">Explore</a> + <a href="./pages/scholarship-feature/scholarships.html" class="btn">Explore</a> </div> </div> <div class="feature"> - <img src="/images/jicon.png" class="feature-img" alt="Jobs Icon"> + <img src="./images/jicon.png" class="feature-img" alt="Jobs Icon"> <h2>Jobs</h2> <p>Find job opportunities for educators and professionals.</p> - <a href="/pages/jobs/jobs.html" class="btn">Browse Jobs</a> + <a href="./pages/jobs/jobs.html" class="btn">Browse Jobs</a> </div> <div class="feature"> - <img src="/images/ficon.png" class="feature-img" alt="testimonial Icon"> + <img src="./images/ficon.png" class="feature-img" alt="testimonial Icon"> <h2>Forum</h2> <p>Join discussions, ask questions, and connect with others.</p> - <a href="/pages/forum/forum.html" class="btn">Join the Forum</a> + <a href="./pages/forum/forum.html" class="btn">Join the Forum</a> </div> <div class="feature"> - <img src="/images/feedback-testimonial-icon.png" class="feature-img" alt="Forum Icon"> + <img src="./images/feedback-testimonial-icon.png" class="feature-img" alt="Forum Icon"> <h2>Testimonials</h2> <p>Here are the testimonials and reviews.</p> - <a href="/pages/testimonials/testimonials.html" class="btn">Explore</a> + <a href="./pages/testimonials/testimonials.html" class="btn">Explore</a> </div> <div class="feature"> - <img src="/images/account.png" class="feature-img" alt="Account Icon"> + <img src="./images/account.png" class="feature-img" alt="Account Icon"> <h2>Login</h2> <p>Access your account to manage your applications and profile.</p> - <a href="/pages/login-signup/login-signup.html" class="btn"> + <a href="./pages/login-signup/login-signup.html" class="btn"> <i class="fa-solid fa-sign-in-alt"></i> Login </a> @@ -206,7 +206,7 @@ <h6 class="font-weight-bold my-3">EdTech Professional at Byju's</h6> </main> - <script src="/scripts/componentLoader.js"> + <script src="./scripts/componentLoader.js"> </script> <script> diff --git a/pages/blog/blog.html b/pages/blog/blog.html index 4b05c9a5..eae1eb21 100644 --- a/pages/blog/blog.html +++ b/pages/blog/blog.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html lang="en"> <head> - <link rel="stylesheet" href="/styles/styles.css" /> + <link rel="stylesheet" href="./styles/styles.css" /> <!-- <base href="/Pathsphere/"> --> <!-- uncomment above line if deploying to github pages --> <meta charset="UTF-8" /> @@ -32,9 +32,9 @@ } </style> <!-- Added a favicon --> - <link rel="icon" type="image/x-icon" href="/images/pathsphere.png" /> + <link rel="icon" type="image/x-icon" href="./images/pathsphere.png" /> <link rel="stylesheet" href="./blog.css" /> - <link rel="stylesheet" href="/styles/essential.css" /> + <link rel="stylesheet" href="./styles/essential.css" /> </head> @@ -72,7 +72,7 @@ <h1 class="heading">Scholarship <span>Blogs</span></h1> onclick="redirectToBlog('https://example.com/blog1')" > <div class="blog-image"> - <img src="/images/sc1.jpg" alt="Scholarship Blog 1" /> + <img src="./images/sc1.jpg" alt="Scholarship Blog 1" /> </div> <div class="blog-content"> <h3>Kishore Vaigyanik Protsahan Yojana (KVPY):</h3> @@ -94,7 +94,7 @@ <h3>Kishore Vaigyanik Protsahan Yojana (KVPY):</h3> onclick="redirectToBlog('https://example.com/blog2')" > <div class="blog-image"> - <img src="/images/sc2.webp" alt="Scholarship Blog 2" /> + <img src="./images/sc2.webp" alt="Scholarship Blog 2" /> </div> <div class="blog-content"> <h3>National Means Cum Merit Scholarship (NMMS)</h3> @@ -116,7 +116,7 @@ <h3>National Means Cum Merit Scholarship (NMMS)</h3> onclick="redirectToBlog('https://example.com/blog2')" > <div class="blog-image"> - <img src="/images/sc3.jpeg" alt="Scholarship Blog 2" /> + <img src="./images/sc3.jpeg" alt="Scholarship Blog 2" /> </div> <div class="blog-content"> <h3>Prime Minister's Scholarship Scheme (PMSS)</h3> @@ -137,7 +137,7 @@ <h3>Prime Minister's Scholarship Scheme (PMSS)</h3> onclick="redirectToBlog('https://example.com/blog2')" > <div class="blog-image"> - <img src="/images/sc4.jpg" alt="Scholarship Blog 2" /> + <img src="./images/sc4.jpg" alt="Scholarship Blog 2" /> </div> <div class="blog-content"> <h3> @@ -162,7 +162,7 @@ <h3> onclick="redirectToBlog('https://example.com/blog2')" > <div class="blog-image"> - <img src="/images/sc5.jpg" alt="Scholarship Blog 2" /> + <img src="./images/sc5.jpg" alt="Scholarship Blog 2" /> </div> <div class="blog-content"> <h3>AICTE Pragati Scholarship for Girls</h3> @@ -185,7 +185,7 @@ <h3>AICTE Pragati Scholarship for Girls</h3> onclick="redirectToBlog('https://example.com/blog2')" > <div class="blog-image"> - <img src="/images/sc6.jpg" alt="Scholarship Blog 2" /> + <img src="./images/sc6.jpg" alt="Scholarship Blog 2" /> </div> <div class="blog-content"> <h3>Inspire Scholarship</h3> @@ -223,7 +223,7 @@ <h1>Sign Up for Newsletters</h1> <div id="toast-container" class="toast-container"></div> </main> - <script src="/scripts/componentLoader.js"></script> + <script src="./scripts/componentLoader.js"></script> <script> prependComponent('Navbar'); prependComponent('ScrollToTop'); diff --git a/pages/contributor/index.html b/pages/contributor/index.html index 4acdbfb5..d73a61ae 100644 --- a/pages/contributor/index.html +++ b/pages/contributor/index.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html lang="en"> <head> - <link rel="stylesheet" href="/styles/styles.css" /> + <link rel="stylesheet" href="./styles/styles.css" /> <meta charset="UTF-8" /> <link rel="icon" type="image/x-icon" href="../../images/pathsphere.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @@ -72,7 +72,7 @@ <h2>Ready to Make an Impact?</h2> </div> </section> - <script src="/scripts/componentLoader.js"></script> + <script src="./scripts/componentLoader.js"></script> <script> prependComponent('Navbar'); prependComponent('Cursor'); diff --git a/pages/faqs/faqs.html b/pages/faqs/faqs.html index 387778f6..113333e5 100644 --- a/pages/faqs/faqs.html +++ b/pages/faqs/faqs.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html lang="en"> <head> - <link rel="stylesheet" href="/styles/styles.css" /> + <link rel="stylesheet" href=".styles/styles.css" /> <!-- <base href="/Pathsphere/"> --> <!-- uncomment above line if deploying to github pages --> @@ -9,10 +9,10 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>PathSphere | FAQs</title> <!-- Added a favicon --> - <link rel="icon" type="image/x-icon" href="/images/pathsphere.png" /> + <link rel="icon" type="image/x-icon" href="./images/pathsphere.png" /> <link rel="stylesheet" href="faqs.css" /> - <link rel="stylesheet" href="/styles/essential.css" /> + <link rel="stylesheet" href="./styles/essential.css" /> </head> <body> <main> @@ -204,7 +204,7 @@ <h2 class="process__title title">FAQs</h2> </main> - <script src="/scripts/componentLoader.js"></script> + <script src="./scripts/componentLoader.js"></script> <script> prependComponent("Navbar"); prependComponent('Cursor'); diff --git a/pages/jobs/jobs.html b/pages/jobs/jobs.html index e34c69ac..23063eab 100644 --- a/pages/jobs/jobs.html +++ b/pages/jobs/jobs.html @@ -425,7 +425,7 @@ <h3 class="job-name">Cloud Engineer</h3> <div class="company d-flex flex-row justify-content-start"> <h4 class="company-name">Samyak it sol</h4> - <img class="comp-logo" src="/pages/jobs/job_images/data_science.jpeg"> + <img class="comp-logo" src="./pages/jobs/job_images/data_science.jpeg"> </div> @@ -500,7 +500,7 @@ <h3 class="job-name">Sofware developer</h3> <div class="company d-flex flex-row justify-content-start"> <h4 class="company-name">Design Studio</h4> - <img class="comp-logo" src="/pages/jobs/job_images/design.jpg"> + <img class="comp-logo" src="./pages/jobs/job_images/design.jpg"> </div> @@ -580,7 +580,7 @@ <h3 class="job-name">UI UX developer</h3> <div class="company d-flex flex-row justify-content-start"> <h4 class="company-name">BB Tech Services</h4> - <img class="comp-logo" src="/pages/jobs/job_images/download (2).png"> + <img class="comp-logo" src="./pages/jobs/job_images/download (2).png"> </div> @@ -655,7 +655,7 @@ <h3 class="job-name">Blockchain developer</h3> <div class="company d-flex flex-row justify-content-start"> <h4 class="company-name">Dev World Tech</h4> - <img class="comp-logo" src="/pages/jobs/job_images/download.png"> + <img class="comp-logo" src="./pages/jobs/job_images/download.png"> </div> @@ -735,7 +735,7 @@ <h3 class="job-name">Cloud Engineer</h3> <div class="company d-flex flex-row justify-content-start"> <h4 class="company-name">Web consultancy Services</h4> - <img class="comp-logo" src="/pages/jobs/job_images/fullstack.jpeg"> + <img class="comp-logo" src="./pages/jobs/job_images/fullstack.jpeg"> </div> @@ -810,7 +810,7 @@ <h3 class="job-name">Backend developer</h3> <div class="company d-flex flex-row justify-content-start"> <h4 class="company-name">Infotech Bytes</h4> - <img class="comp-logo" src="/pages/jobs/job_images/innovation.png"> + <img class="comp-logo" src="./pages/jobs/job_images/innovation.png"> </div> @@ -892,7 +892,7 @@ <h3 class="job-name">Sofware developer</h3> </div> - <script src="/scripts/componentLoader.js"></script> + <script src="./scripts/componentLoader.js"></script> <script> prependComponent('Navbar'); prependComponent('Cursor'); diff --git a/pages/scholarship-feature/scholarships.css b/pages/scholarship-feature/scholarships.css index 8f73845a..c4df5d18 100644 --- a/pages/scholarship-feature/scholarships.css +++ b/pages/scholarship-feature/scholarships.css @@ -1,5 +1,4 @@ /* General body and typography settings */ - body { font-family: Arial, sans-serif; background-color: #f4f4f9; @@ -17,6 +16,7 @@ p { text-align: center; } +/* Scholarship container */ .scholarship-container { display: flex; flex-wrap: wrap; @@ -24,61 +24,54 @@ p { padding: 20px; } - /* Card styling */ .card { - background: linear-gradient(145deg, #bc45c0, #09cff3); /* Blue and green gradient background */ + background: linear-gradient(145deg, #f8f7f8, #f1f5f5); /* Blue and green gradient background */ border-radius: 15px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); margin: 15px; /* Reduced margin */ width: 270px; /* Slightly smaller width */ padding: 15px; /* Reduced padding */ transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.3s ease; - color: #fff; - font-family: "Arial", sans-serif; + color: #0c0c0c; text-align: center; display: flex; flex-direction: column; justify-content: space-between; } -/* Card hover effect - turns pink on hover */ - +/* Card hover effect */ .card:hover { - transform: scale(1.08) rotateZ(2deg); + box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5); } /* Card image styling */ - .card img { background-size: cover; background-repeat: no-repeat; border-radius: 10px; width: 100%; - height: 150px; /* Smaller image to reduce height */ + height: 150px; /* Maintain smaller height */ object-fit: cover; margin-bottom: 10px; /* Reduced margin below the image */ } /* Card heading */ - .card h2 { font-size: 18px; /* Slightly smaller font */ - color: #f9f9f9; + color: #1b1a1a; } /* Card paragraph */ - .card p { - color: #ccc; + color: #111111; font-size: 14px; /* Reduced font size */ margin: 8px 0; /* Smaller margin */ line-height: 1.4; /* Slightly tighter line spacing */ } /* Button styling inside card */ - .card a, .card button { display: inline-block; @@ -94,27 +87,14 @@ p { } /* Hover effect for buttons */ - .card a:hover, .card button:hover { - background-color:#8a2be2; + background-color: #8a2be2; /* Change hover color */ transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6); } -/* Card transition effects */ - -.card { - perspective: 1000px; -} - -.card:hover { - transform: rotateY(3deg) scale(1.05); - transition: transform 0.5s ease; -} - -/* Input focus effect - turns background purple */ - +/* Input focus effect */ input:focus { background-color: #8a2be2; /* Purple background on focus */ outline: none; /* Removes default outline */ @@ -122,12 +102,7 @@ input:focus { transition: background-color 0.3s ease; /* Smooth transition to purple */ } - - - - /* Modal styling */ - .modal { display: none; position: fixed; @@ -141,9 +116,7 @@ input:focus { align-items: center; } - /* Modal content box */ - .modal-content { background-color: white; padding: 20px; @@ -152,9 +125,7 @@ input:focus { width: 90%; } - /* Close button for modal */ - .close-btn { float: right; cursor: pointer; @@ -170,17 +141,13 @@ input:focus { margin-top: 0; } - /* Modal text */ - .modal p { font-size: 16px; color: #333; } - /* Modal apply button */ - .modal a { display: inline-block; margin-top: 10px; @@ -196,9 +163,7 @@ input:focus { background-color: #1c6057; } - /* Search bar styling */ - .search-bar { display: flex; align-items: center; @@ -221,6 +186,7 @@ input:focus { border: 1px solid #1c6057; } +/* Pagination */ .pagination { display: flex; justify-content: center; @@ -253,4 +219,4 @@ input:focus { margin: 0 15px; font-size: 1.1em; font-weight: bold; -} \ No newline at end of file +} diff --git a/pages/scholarship-feature/scholarships.html b/pages/scholarship-feature/scholarships.html index f4e47e20..50298914 100644 --- a/pages/scholarship-feature/scholarships.html +++ b/pages/scholarship-feature/scholarships.html @@ -1,66 +1,275 @@ <!DOCTYPE html> <html lang="en"> - <head> - <link rel="stylesheet" href="/styles/styles.css" /> + <link rel="stylesheet" href="./styles/styles.css" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Scholarships</title> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="stylesheet" href="./scholarships.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script> </head> <body> - + <!-- <style> + /* Body and Main Structure */ +/* Body and Main Structure +body { + margin: 0; + padding: 0; + font-family: 'Times New Roman', serif; + background-color: #f0eae3; /* Light cream background */ + color: #3e3e3e; /* Darker text color for better readability */ +} + +main { + max-width: 1200px; + margin: 0 auto; + padding: 40px; +} + +/* Hero Section */ +.hero { + background-color: #4a6e91; /* Soft blue */ + color: white; + text-align: center; + padding: 60px; + border-radius: 10px; + margin-bottom: 30px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow */ +} + +.hero h1 { + font-size: 3.5rem; + margin-bottom: 15px; +} + +.hero p { + font-size: 1.2rem; +} + +/* Search Bar */ +.search-bar { + text-align: center; + margin: 30px 0; +} + +#searchInput { + width: 70%; + padding: 15px; + border: 1px solid #ccc; + border-radius: 8px; + font-size: 1rem; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow */ +} + +/* Scholarship Cards */ +.scholarship-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin-top: 30px; +} + +.card { + background-color: #fefefe; /* Off-white background for cards */ + border: 1px solid #dcdcdc; + border-radius: 10px; + padding: 25px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transition: transform 0.3s, box-shadow 0.3s; +} + +.card:hover { + transform: translateY(-3px); /* Slight lift effect on hover */ + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); +} + +.card img { + width: 100%; /* Ensure image takes full width */ + height: auto; /* Maintain aspect ratio */ + border-radius: 8px; + margin-bottom: 15px; + object-fit: cover; /* Ensures the image covers the area */ +} + +.card h2 { + font-size: 1.8rem; + margin: 10px 0; + color: #dde7f2; /* Classic blue for headings */ +} + +.buttons { + display: flex; + justify-content: space-between; + margin-top: 15px; +} + +a { + text-decoration: none; + color: white; + background-color: #dae0e6; /* Soft blue */ + padding: 10px 15px; + border-radius: 5px; + transition: background-color 0.3s; +} + +a:hover { + background-color: #bbc1c7; /* Darker shade on hover */ +} + +.read-more { + background-color: #f7f9f5; /* Soft green */ + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.read-more:hover { + background-color: #fafcf9; /* Darker shade on hover */ +} + +/* Pagination */ +.pagination { + text-align: center; + margin-top: 30px; +} + +.pagination button { + background-color: #f3f6f8; /* Soft blue */ + color: white; + border: none; + padding: 12px 20px; + margin: 0 5px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.pagination button:disabled { + background-color: #ccc; /* Greyed out color */ +} + +.pagination button:hover:not(:disabled) { + background-color: #eaebed; /* Darker shade on hover */ +} + +/* Modal Styling */ +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + justify-content: center; + align-items: center; +} + +.modal-content { + background-color: white; + padding: 40px; + border-radius: 10px; + max-width: 600px; + width: 90%; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.close-btn { + background-color: #faf4f4; + border: none; + color: white; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; +} + +/* Like and Comment Section */ +.interaction { + margin-top: 20px; +} + +.like-btn { + background-color: #080808; + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.like-btn:hover { + background-color: #060606; /* Darker blue on hover */ +} + +/* Comments Section */ +.comments-section { + margin-top: 20px; + display: flex; + flex-direction: column; + align-items: flex-start; /* Align to the left */ +} + +.comment-input-container { + width: 100%; + margin: 10px 0; +} + +textarea.comment-input { + width: 100%; + height: 80px; /* Adjust height as needed */ + margin: 10px 0; + padding: 12px; + border-radius: 5px; + border: 1px solid #ddd; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + resize: none; /* Prevent resizing */ +} + +/* Miscellaneous */ +.circle-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 40px; +} + +.circle { + width: 30px; + height: 30px; + border-radius: 50%; + background-color: #4a6e91; /* Soft blue */ + margin: 5px; +} */ + + + </style> --> <div class="gtranslate_wrapper"></div> <script> - window.gtranslateSettings = { - "default_language":"en", - "detect_browser_language":true, - "wrapper_selector":".gtranslate_wrapper" - } + window.gtranslateSettings = { + "default_language": "en", + "detect_browser_language": true, + "wrapper_selector": ".gtranslate_wrapper" + }; </script> - <script - src="https://cdn.gtranslate.net/widgets/latest/float.js" - defer - ></script> -<main> - <section class="hero"> - <h1>Scholarships</h1> - <p class="subtext"> - Find scholarships that match your academic profile and needs. - </p> - </section> - - <div class="search-bar"> - <input type="text" id="searchInput" placeholder="Search for scholarships..." aria-label="Search Scholarships" onkeyup="filterScholarships()" /> - </div> - - <div id="scholarship-container" class="scholarship-container"></div> - - <div class="pagination"> - <button id="prev-btn" onclick="changePage(-1)">Previous</button> - <span id="page-info"></span> - <button id="next-btn" onclick="changePage(1)">Next</button> - </div> - - <div id="scholarship-modal" class="modal"> - <div class="modal-content"> - <span id="close-modal" class="close-btn">×</span> - <div id="modal-info"></div> + <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script> <main> <section class="hero"> <h1>Scholarships</h1> - <p class="subtext"> - Find scholarships that match your academic profile and needs. - </p> + <p class="subtext">Find scholarships that match your academic profile and needs.</p> </section> <div class="search-bar"> - <input type="text" id="searchInput" placeholder="Search for scholarships..." aria-label="Search Scholarships" onkeyup="filterScholarships()" /> - + <input type="text" id="searchInput" placeholder="Search for scholarships..." + aria-label="Search Scholarships" onkeyup="filterScholarships()" /> </div> <div id="scholarship-container" class="scholarship-container"></div> @@ -77,203 +286,138 @@ <h1>Scholarships</h1> <div id="modal-info"></div> </div> </div> - - <script> - const container = document.getElementById('scholarship-container'); - const modal = document.getElementById('scholarship-modal'); - const closeModal = document.getElementById('close-modal'); - const modalInfo = document.getElementById('modal-info'); - const pageInfo = document.getElementById('page-info'); - const prevBtn = document.getElementById('prev-btn'); - const nextBtn = document.getElementById('next-btn'); - let scholarships = []; - let currentPage = 1; - const scholarshipsPerPage = 9; - - function displayScholarships(data) { - scholarships = data; - container.innerHTML = ''; - const totalPages = Math.ceil(scholarships.length / scholarshipsPerPage); - - if (currentPage > totalPages) { - currentPage = totalPages; - } - - const startIndex = (currentPage - 1) * scholarshipsPerPage; - const endIndex = startIndex + scholarshipsPerPage; - - const scholarshipsToDisplay = scholarships.slice(startIndex, endIndex); - - scholarshipsToDisplay.forEach((scholarship, index) => { - const card = document.createElement('div'); - card.classList.add('card'); - - card.innerHTML = ` + </main> + + <script> + const container = document.getElementById('scholarship-container'); + const modal = document.getElementById('scholarship-modal'); + const closeModal = document.getElementById('close-modal'); + const modalInfo = document.getElementById('modal-info'); + const pageInfo = document.getElementById('page-info'); + const prevBtn = document.getElementById('prev-btn'); + const nextBtn = document.getElementById('next-btn'); + + let scholarships = []; + let currentPage = 1; + const scholarshipsPerPage = 9; + + function displayScholarships(data) { + scholarships = data; + container.innerHTML = ''; + const totalPages = Math.ceil(scholarships.length / scholarshipsPerPage); + + if (currentPage > totalPages) currentPage = totalPages; + + const startIndex = (currentPage - 1) * scholarshipsPerPage; + const endIndex = startIndex + scholarshipsPerPage; + const scholarshipsToDisplay = scholarships.slice(startIndex, endIndex); + + scholarshipsToDisplay.forEach((scholarship, index) => { + const card = document.createElement('div'); + card.classList.add('card'); + card.innerHTML = ` <img src="${scholarship.image}" alt="${scholarship.scholarship_name}"> <h2>${scholarship.scholarship_name}</h2> <p>${scholarship.listing_awards}</p> <div class="buttons"> <a href="${scholarship.apply_now}" target="_blank">Apply Now</a> <button class="read-more" data-index="${startIndex + index}">Read More</button> + </div> + <div class="interaction"> + <button class="like-btn" onclick="increaseLikes(this)"> + <i class="fa fa-thumbs-up"></i> Like <span class="like-count">0</span> + </button> + <div class="comments-section"> + <h4>Comments:</h4> + <ul class="comments-list"></ul> + <textarea class="comment-input" placeholder="Add a comment..."></textarea> + <button class="submit-comment" onclick="submitComment(this)">Post</button> </div> - <!-- Likes and Comments functionality --> - <div class="interaction"> - <!-- Likes Button --> - <button class="like-btn" onclick="increaseLikes(this)"> - <i class="fa fa-thumbs-up"></i> Like <span class="like-count">0</span> - </button> - - <!-- Comments Section --> - <div class="comments-section"> - <h4>Comments:</h4> - <ul class="comments-list"> - <!-- Comments will be appended here --> - </ul> - <textarea placeholder="Add a comment..." class="comment-input"></textarea> - <button class="submit-comment" onclick="submitComment(this)">Post</button> - </div> </div> `; + container.appendChild(card); + }); - container.appendChild(card); - }); - - pageInfo.textContent = `Page ${currentPage} of ${totalPages}`; - prevBtn.disabled = currentPage === 1; - nextBtn.disabled = currentPage === totalPages; + pageInfo.textContent = `Page ${currentPage} of ${totalPages}`; + prevBtn.disabled = currentPage === 1; + nextBtn.disabled = currentPage === totalPages; - document.querySelectorAll('.read-more').forEach((button) => { - button.addEventListener('click', (e) => { - const index = e.target.getAttribute('data-index'); - showDetails(scholarships[index]); - }); + document.querySelectorAll('.read-more').forEach(button => { + button.addEventListener('click', (e) => { + const index = e.target.getAttribute('data-index'); + showDetails(scholarships[index]); }); - } - - function filterScholarships() { - const input = document.getElementById('searchInput'); - const filter = input.value.toLowerCase(); - const filteredScholarships = scholarships.filter(scholarship => - scholarship.scholarship_name.toLowerCase().includes(filter) - ); + }); + } - currentPage = 1; - displayScholarships(filteredScholarships); - } + function filterScholarships() { + const input = document.getElementById('searchInput').value.toLowerCase(); + const filtered = scholarships.filter(s => + s.scholarship_name.toLowerCase().includes(input) + ); + currentPage = 1; + displayScholarships(filtered); + } - function showDetails(scholarship) { - modalInfo.innerHTML = ` + function showDetails(scholarship) { + modalInfo.innerHTML = ` <h2>${scholarship.scholarship_name}</h2> <p><strong>Award:</strong> ${scholarship.listing_awards}</p> <p><strong>Eligibility:</strong> ${scholarship.eligibility}</p> <p><strong>Start Date:</strong> ${scholarship.start_date}</p> <p><strong>Deadline:</strong> ${scholarship.deadline}</p> - <p><strong>Last Date:</strong> ${scholarship.last_date}</p> <a href="${scholarship.apply_now}" target="_blank">Apply Now</a> `; + modal.style.display = 'flex'; + } - modal.style.display = 'flex'; - } - - function fetchAndProcessExcel() { - const fileUrl = 'buddy4study.xlsx'; - - fetch(fileUrl) - .then((response) => response.arrayBuffer()) - .then((data) => { - const workbook = XLSX.read(data, { - type: 'array' - }); - - const firstSheet = workbook.Sheets[workbook.SheetNames[0]]; - const jsonData = XLSX.utils.sheet_to_json(firstSheet, { - header: 1, - }); - - scholarships = jsonData.slice(1).map((row) => ({ - apply_now: row[0], - image: row[1], - scholarship_name: row[2], - listing_awards: row[3], - eligibility: row[4], - start_date: row[5], - deadline: row[6], - last_date: row[7], - })); - - console.log('Loaded Scholarships:', scholarships); - displayScholarships(scholarships); - }) - .catch((error) => - console.error('Error loading the Excel file:', error) - ); - } + function changePage(direction) { + currentPage += direction; + displayScholarships(scholarships); + } - function changePage(direction) { - const totalPages = Math.ceil(scholarships.length / scholarshipsPerPage); - currentPage += direction; + closeModal.addEventListener('click', () => { + modal.style.display = 'none'; + }); - if (currentPage < 1) currentPage = 1; - if (currentPage > totalPages) currentPage = totalPages; + function increaseLikes(button) { + const likeCount = button.querySelector('.like-count'); + likeCount.textContent = parseInt(likeCount.textContent) + 1; + } - displayScholarships(scholarships); + function submitComment(button) { + const input = button.previousElementSibling; + const comment = input.value.trim(); + if (comment) { + const list = button.closest('.comments-section').querySelector('.comments-list'); + const listItem = document.createElement('li'); + listItem.textContent = comment; + list.appendChild(listItem); + input.value = ''; } + } - closeModal.addEventListener('click', () => { - modal.style.display = 'none'; - }); - - window.addEventListener('click', (e) => { - if (e.target === modal) { - modal.style.display = 'none'; - } - }); - - document.addEventListener('DOMContentLoaded', fetchAndProcessExcel); - </script> - - </main> - - <script src="/scripts/componentLoader.js"></script> - <script> - prependComponent('Navbar'); - prependComponent('Cursor'); - prependComponent('ScrollToTop'); - appendComponent('Footer'); - appendComponent('ChatBot'); - waitTillComponentsLoaded(); - - function toggleDetails(button) { - const details = button.previousElementSibling; - if (details.style.display === 'none') { - details.style.display = 'block'; - button.textContent = 'Read Less'; - } else { - details.style.display = 'none'; - button.textContent = 'Read More'; - } + function fetchAndProcessExcel() { + fetch('buddy4study.xlsx') + .then(response => response.arrayBuffer()) + .then(data => { + const workbook = XLSX.read(data, { type: 'array' }); + const sheet = workbook.Sheets[workbook.SheetNames[0]]; + const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 }); + scholarships = jsonData.slice(1).map(row => ({ + apply_now: row[0], + image: row[1], + scholarship_name: row[2], + listing_awards: row[3], + eligibility: row[4], + start_date: row[5], + deadline: row[6] + })); + displayScholarships(scholarships); + }); } + + fetchAndProcessExcel(); </script> - <div class="circle-container"> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - <div class="circle"></div> - </div> </body> - -</html> \ No newline at end of file +</html> diff --git a/pages/scholarships/scholarships.html b/pages/scholarships/scholarships.html index 549259d4..b7d75dd3 100644 --- a/pages/scholarships/scholarships.html +++ b/pages/scholarships/scholarships.html @@ -29,7 +29,7 @@ <section class="hero"> <h1>Scholarships</h1> - <p>Find scholarships that match your academic profile and needs.</p> + <p>Find scholarships that match your academic profile and needss.</p> </section> <div class="search-bar"> diff --git a/scripts/componentLoader.js b/scripts/componentLoader.js index fe96d738..c3c03bc9 100644 --- a/scripts/componentLoader.js +++ b/scripts/componentLoader.js @@ -6,7 +6,7 @@ const fetchComponent = async (componentName) => { try { // fetch content from server const res = await fetch( - `/components/${componentName}/${componentName}.html` + `./components/${componentName}/${componentName}.html` ); // Check if the response is OK