From 67d2b52247b4f4c41f53329a7f3413aa7e89a381 Mon Sep 17 00:00:00 2001 From: kajal kumari Date: Fri, 1 Nov 2024 13:50:41 +0530 Subject: [PATCH 01/26] Change shadow effect on card --- .vscode/settings.json | 3 +++ index.html | 1 + style.css | 6 ++++-- 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 822a1a81..b212b3fe 100644 --- a/index.html +++ b/index.html @@ -679,6 +679,7 @@

Forgot Password

+
diff --git a/style.css b/style.css index 83ed6dc1..9b056364 100644 --- a/style.css +++ b/style.css @@ -2134,8 +2134,10 @@ a { max-width: 300px; /* overflow: hidden; */ height: auto; + margin-top: 25px; transition: transform 0.3s ease; - box-shadow: 0 0 10px rgb(249, 81, 81); + box-shadow: 0 0 10px rgb(249, 81, 81); + border-radius: 20px; } @@ -2147,7 +2149,7 @@ a { .card:hover .overflow-img { transform: scale(1.1); - box-shadow: 7px 7px 10px rgb(184, 0, 0); + box-shadow: 0 0 4px 2px rgba(251, 81, 81, 0.6), 0 0 20px rgba(251, 81, 81, 0.4); transition: all 0.2s ease-in-out; } From b8f050a43f040468f4ce5811f1c3153287c79fb0 Mon Sep 17 00:00:00 2001 From: shivam8112005 Date: Fri, 1 Nov 2024 14:46:05 +0530 Subject: [PATCH 02/26] fixed css of heart and comment icon on home page --- index.html | 56 +++++++++++++++++++++++++++--------------------------- style.css | 4 ++++ 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 5aef10b3..089dd4e1 100644 --- a/index.html +++ b/index.html @@ -648,9 +648,9 @@

Forgot Password

Wed 01,2020   - 13 + 13 -

`; - // Form submission - document.getElementById('feedbackForm').addEventListener('submit', function(e) { + document.getElementById('feedbackForm').addEventListener('submit', async function (e) { e.preventDefault(); - // Here you would typically send the form data to your server - // For this example, we'll just show a success message - document.getElementById('formSuccess').classList.remove('hidden'); - this.reset(); - // Scroll to the success message - document.getElementById('formSuccess').scrollIntoView({ behavior: 'smooth' }); + + const formData = new FormData(this); + const data = {}; + + formData.forEach((value, key) => { + if (key === 'features-used') { + if (!data.featuresUsed) { + data.featuresUsed = []; + } + data.featuresUsed.push(value); + } else { + data[key] = ['overallExperience', 'recommendation'].includes(key) ? parseInt(value, 10) : value; + } + }); + + console.log(data); + + try { + const response = await fetch('http://localhost:5000/api/feedback/saveFeedback', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }); + + if (response.ok) { + console.log("Form submitted successfully:", await response.json()); + document.getElementById('formSuccess').classList.remove('hidden'); + this.reset(); + document.getElementById('formSuccess').scrollIntoView({ behavior: 'smooth' }); + } else { + const errorData = await response.json(); + console.error("Error submitting form:", errorData); + } + } catch (error) { + console.error("Error submitting form:", error); + } }); } From a979b07315200ddc395f66aecb04390e538c02a4 Mon Sep 17 00:00:00 2001 From: Sawan Date: Fri, 1 Nov 2024 20:22:31 +0530 Subject: [PATCH 04/26] Added backend for get in touch form --- backend/app.js | 8 ++-- backend/controllers/getInTouchController.js | 31 ++++++++++++++ backend/models/getInTouch.js | 32 ++++++++++++++ backend/routes/getInTouchRoutes.js | 8 ++++ frontend/src/pages/About.js | 46 ++++++++++++++++++--- 5 files changed, 116 insertions(+), 9 deletions(-) create mode 100644 backend/controllers/getInTouchController.js create mode 100644 backend/models/getInTouch.js create mode 100644 backend/routes/getInTouchRoutes.js diff --git a/backend/app.js b/backend/app.js index 6d3dc2ad..93092697 100644 --- a/backend/app.js +++ b/backend/app.js @@ -3,9 +3,10 @@ import dotenv from "dotenv"; import connectDB from "./utils/db.js"; import blogRoutes from "./routes/blogRoutes.js"; import userRoutes from "./routes/userRoutes.js"; - import feedbackRoutes from "./routes/feedbackRoute.js"; - import contactRoutes from "./routes/contactRoute.js"; - import cors from "cors"; +import feedbackRoutes from "./routes/feedbackRoute.js"; +import contactRoutes from "./routes/contactRoute.js"; +import getInTouch from "./routes/getInTouchRoutes.js"; +import cors from "cors"; dotenv.config(); const app = express(); @@ -20,6 +21,7 @@ app.use("/api/users", userRoutes); app.use("/api/blogs", blogRoutes); app.use("/api/feedback", feedbackRoutes); app.use("/api/contact", contactRoutes); +app.use("/api/getInTouch", getInTouch); const PORT = process.env.PORT || 5000; app.listen(PORT, () => { diff --git a/backend/controllers/getInTouchController.js b/backend/controllers/getInTouchController.js new file mode 100644 index 00000000..915c0fde --- /dev/null +++ b/backend/controllers/getInTouchController.js @@ -0,0 +1,31 @@ +// Import the GetInTouch model +import GetInTouch from '../models/getInTouch.js'; + +// Controller function to handle form submission +export const submitGetInTouch = async (req, res) => { + try { + // Create a new GetInTouch document using request data + const { name, email, message } = req.body; + + // Validate request data + if (!name || !email || !message) { + return res.status(400).json({ error: 'All fields are required.' }); + } + + const newMessage = new GetInTouch({ + name, + email, + message, + }); + + // Save the new document to the database + await newMessage.save(); + + // Send a success response + res.status(201).json({ message: 'Thank you! Your message has been received.' }); + } catch (error) { + // Handle errors + console.error('Error submitting message:', error); + res.status(500).json({ error: 'There was an error submitting your message. Please try again.' }); + } +}; diff --git a/backend/models/getInTouch.js b/backend/models/getInTouch.js new file mode 100644 index 00000000..9b58b138 --- /dev/null +++ b/backend/models/getInTouch.js @@ -0,0 +1,32 @@ +// Import Mongoose +import mongoose from 'mongoose'; + +// Define the schema for the form data +const getInTouchSchema = new mongoose.Schema({ + name: { + type: String, + required: true, + trim: true, + }, + email: { + type: String, + required: true, + trim: true, + match: [/.+\@.+\..+/, 'Please enter a valid email address'], + }, + message: { + type: String, + required: true, + trim: true, + }, + submittedAt: { + type: Date, + default: Date.now, + }, +}); + +// Create the model from the schema +const GetInTouch = mongoose.model('GetInTouch', getInTouchSchema); + +// Export the model as the default export +export default GetInTouch; diff --git a/backend/routes/getInTouchRoutes.js b/backend/routes/getInTouchRoutes.js new file mode 100644 index 00000000..8ccb66e0 --- /dev/null +++ b/backend/routes/getInTouchRoutes.js @@ -0,0 +1,8 @@ +import express from "express"; +import { submitGetInTouch } from "../controllers/getInTouchController.js"; +const router = express.Router(); + + +router.post("/saveGetInTouch", submitGetInTouch); + +export default router; diff --git a/frontend/src/pages/About.js b/frontend/src/pages/About.js index bf5d7ff8..bd84b6aa 100644 --- a/frontend/src/pages/About.js +++ b/frontend/src/pages/About.js @@ -57,7 +57,7 @@ export function renderAbout(container) {

Get in Touch

-
+
@@ -89,13 +89,47 @@ export function renderAbout(container) { fetchContributors(); // Form submission - document.getElementById('contactForm').addEventListener('submit', function(e) { + document.getElementById('getInTouch').addEventListener('submit', async function (e) { e.preventDefault(); - // Here you would typically send the form data to your server - // For this example, we'll just show a success message - document.getElementById('formSuccess').classList.remove('hidden'); - this.reset(); + + // Get form values + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const message = document.getElementById('message').value; + + // Prepare data to send to the backend + const formData = { + name: name, + email: email, + message: message + }; + + try { + // Send form data to the backend + const response = await fetch('http://localhost:5000/api/getInTouch/saveGetInTouch', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(formData) + }); + + console.log(response) + // Check if the response was successful + if (response.ok) { + console.log("Form successfully submitted:", formData); + document.getElementById('formSuccess').classList.remove('hidden'); + this.reset(); + } else { + console.error("Form submission failed:", response.statusText); + alert("There was an issue submitting the form. Please try again."); + } + } catch (error) { + console.error("Error submitting form:", error); + alert("There was an error connecting to the server. Please try again."); + } }); + } async function fetchContributors() { From 73fc9dc939589d8a8908ff5916d6df5436fdc491 Mon Sep 17 00:00:00 2001 From: ygowthamr Date: Fri, 1 Nov 2024 22:34:56 +0530 Subject: [PATCH 05/26] Added website counter --- blog.html | 6 +++++- category.html | 6 +++++- contact.html | 6 +++++- index.html | 7 ++++++- privacy.html | 6 +++++- script.js | 11 +++++++++++ start_writing.html | 6 +++++- style.css | 23 +++++++++++++++++++++++ 8 files changed, 65 insertions(+), 6 deletions(-) diff --git a/blog.html b/blog.html index 20a172eb..dbfb981e 100644 --- a/blog.html +++ b/blog.html @@ -1241,7 +1241,11 @@

About Us

- Web views + +
+

Website Views

+

0

+
diff --git a/category.html b/category.html index 9cd120df..81604fe2 100644 --- a/category.html +++ b/category.html @@ -600,7 +600,11 @@

About Us

- Web views + +
+

Website Views

+

0

+
diff --git a/contact.html b/contact.html index 1b14b590..c863b5e7 100644 --- a/contact.html +++ b/contact.html @@ -207,7 +207,11 @@

About Us

Privacy Policy
- Web views + +
+

Website Views

+

0

+
diff --git a/index.html b/index.html index aa6cfcbf..3c358fc0 100644 --- a/index.html +++ b/index.html @@ -1442,7 +1442,11 @@

About Us

- Web views + +
+

Website Views

+

0

+
@@ -1586,6 +1590,7 @@

Connect with us

const preloader = document.querySelector("#loader"); function Finish_Loader() { + updateVisitorCount(); preloader.style.display = "none"; } diff --git a/privacy.html b/privacy.html index c48e126a..ef16c1c4 100644 --- a/privacy.html +++ b/privacy.html @@ -500,7 +500,11 @@

About Us

Privacy Policy
- Web views + +
+

Website Views

+

0

+
diff --git a/script.js b/script.js index e4950c0c..d975a44d 100644 --- a/script.js +++ b/script.js @@ -166,3 +166,14 @@ function closeOnOutsideClick(event) { document.removeEventListener("click", closeOnOutsideClick); // Remove the listener } } + +function updateVisitorCount() { + + let visitorCount = localStorage.getItem('visitorCount') ? parseInt(localStorage.getItem('visitorCount')) : 0; + + visitorCount++; + + localStorage.setItem('visitorCount', visitorCount); + + document.getElementById('visitorCount').innerText = visitorCount; +} diff --git a/start_writing.html b/start_writing.html index 13715e54..bc6937d2 100644 --- a/start_writing.html +++ b/start_writing.html @@ -492,7 +492,11 @@

About Us

- Web views + +
+

Website Views

+

0

+
diff --git a/style.css b/style.css index d6deeeec..00d9f76f 100644 --- a/style.css +++ b/style.css @@ -3835,4 +3835,27 @@ h1 + p, p + p { .comment-icon{ font-size: 14px; color: var(--text-color); +} + +.containerWebsiteViews { + display: flex; + justify-content: space-between; + border-radius: 10px; + margin-top: 1vh; + background-color: #f8b5b5; + width: 10vw; +} +.containerText p, +.containerNumbers p { + margin-left: 10px; + font-weight: 600; +} +.containerNumbers { + width: 2.5vw; + background-color: #403c3c; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; +} +.containerNumbers p { + color: white; } \ No newline at end of file From 76df408ec0e7cdf3d8891460d92994813ea77ec7 Mon Sep 17 00:00:00 2001 From: Mallik-vinukonda <158685334+Mallik-vinukonda@users.noreply.github.com> Date: Sat, 2 Nov 2024 00:56:48 +0530 Subject: [PATCH 06/26] Changed the css styling and hovering the page with additional features --- contact_us.css | 706 +++++++++++++++++++++++++----------------------- contact_us.html | 409 +++++++++++++++------------- 2 files changed, 600 insertions(+), 515 deletions(-) diff --git a/contact_us.css b/contact_us.css index 2ae28fe2..ee1279b1 100644 --- a/contact_us.css +++ b/contact_us.css @@ -1,328 +1,258 @@ - /* Dark mode */ /* Default light mode colors */ :root { - --background-color: rgb(244,237,227); - --text-color:rgb(59,59,88); - --header-bg: lightgray; - } - - h2{ - color: var(--text-color); - } - /* Dark mode colors */ - [data-theme="dark"] { - --background-color: #171717; - --text-color: #f2dede; - --header-bg: #1c1c1c; - } - p{ - color: var(--text-color); - } - - /* body { - background-color: var(--background-color); - color: var(--text-color); - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - transition: background-color 0.3s, color 0.3s; - } */ -/* - header { - background-color: var(--header-bg); - padding: 1rem; - display: flex; - justify-content: space-between; - align-items: center; - } */ - - h1 { - margin: 0; - } - - .theme-switch-wrapper { - display: flex; - align-items: center; - } - - #mode-label { - margin-left: 10px; - font-size: 1rem; - } - - /* Toggle Switch */ - .theme-switch { - position: relative; - display: inline-block; - width: 50px; - height: 24px; - } - - .theme-switch input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - transition: 0.4s; - border-radius: 24px; - } - - .slider:before { - position: absolute; - content: ""; - height: 18px; - width: 18px; - border-radius: 50%; - background-color: white; - transition: 0.4s; - top: 3px; - left: 4px; - } - - input:checked + .slider { - background-color: #66bb6a; - } - - input:checked + .slider:before { - transform: translateX(26px); - } - - /*---------------------*/ - body { - font-family: 'Poppins', sans-serif; - background-color: var(--background-color); - margin: 0; - } - - - .container { - max-width: 600px; - margin: 0 auto; - background: white; - padding: 20px; - margin-top: 30px; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - } -/* - h2 { - text-align: center; - color: #333; - } - - h2::after { - content: ""; - display: block; - width: 130px; - height: 5px; - background-color: #ea5541; Color for the line below the heading - margin: 10px auto; - } - */ - .container p { - font-size: small; - margin-left: 60px; - margin-right: 60px; - color: #555; - font-family: 'Poppins'; - } - - .form-group { - margin-bottom: 15px; - } - - label { - display: block; - margin-bottom: 5px; - color: #555; - } - - input[type="text"], input[type="email"], input[type="tel"], textarea { - width: 100%; - padding: 10px; - border: 1px solid #939393; /* Updated border color */ - border-radius: 4px; - box-sizing: border-box; - } - - textarea { - resize: vertical; - } - - button { - background-color: #ea5541; /* Updated button background color */ - color: white; - padding: 10px 15px; - border: none; - border-radius: 4px; - cursor: pointer; - width: 100%; - font-size: 16px; - } - - button:hover { - background-color: #d94a38; /* Slightly darker shade on hover */ - } - - .message { - color: #28a745; - text-align: center; - margin-top: 15px; - } - - /* Import Montserrat font */ - @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700;900&display=swap'); - - /* Global styles */ - * { - font-family: "Montserrat", sans-serif; - box-sizing: border-box; /* Added for better box model handling */ - margin: 0; /* Reset margin */ - padding: 0; /* Reset padding */ - } - - /* Responsive Design */ - @media (max-width: 768px) { - .nav-menu ul { - flex-direction: column; - gap: 10px; - } - - .nav-menu ul li a { - text-align: center; - padding: 10px; - width: 100%; /* Ensures full-width for small screens */ - } - } - - .auth-buttons { - display: flex; - gap: 10px; - } - - .auth-buttons .login-btn, - .auth-buttons .signup-btn { - text-decoration: none; - font-size: 1rem; - font-weight: 600; - padding: 8px 15px; - border-radius: 5px; - transition: background-color 0.3s ease; - } - - .auth-buttons .login-btn { - background-color: var(--background-color); - color: var(--text-color); - } - - .auth-buttons .signup-btn { - background-color: var(--background-color); - color: var(--text-color); - } - - .auth-buttons .login-btn:hover { - background-color: var(--background-color); - } - - .auth-buttons .signup-btn:hover { - background-color: var(--background-color); - } - - .toggle-mode { - display: flex; - align-items: center; - gap: 5px; - } - - .toggle-mode label { - font-size: 1rem; - color: var(--text-color); - } - - input[type="checkbox"] { - transform: scale(1.2); - } - - /* Navigation styling */ - - - /* Navigation links and dropdown */ - .nav-links { - display: flex; - gap: 20px; /* Space between links */ - margin-left: auto; /* Push links to the right */ - } - - nav a:hover { - background-color: rgb(195, 164, 218); /* Slightly increased hover opacity */ - /* color: #d3c2e1; */ - padding: 10px; - } - - .active-page { - color: #EEC48B; - background: rgba(159, 159, 159, 0.2); - } - - /* Dropdown button styles */ - .dropdown { - position: relative; - display: inline-block; - } - - .dropdown-content { - display: none; - position: absolute; - background-color: var(--background-color); - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - z-index: 1; - } - - .dropdown:hover .dropdown-content { - display: block; - } - - /* Dark mode styling */ - body.dark { - background-color: var(--background-color); - } - - body.dark h1, - body.dark .support a { - color: var(--text-color); - } - - /* Checkbox for theme switcher */ - .checkbox { - opacity: 0; - position: absolute; + --background-color: rgb(244, 237, 227); + --text-color: rgb(59, 59, 88); + --header-bg: lightgray; +} + +h2 { + color: var(--text-color); +} + +/* Dark mode colors */ +[data-theme="dark"] { + --background-color: #171717; + --text-color: #f2dede; + --header-bg: #1c1c1c; +} + +p { + color: var(--text-color); +} + +/* Body styles */ +body { + font-family: 'Poppins', sans-serif; + background-color: var(--background-color); + margin: 0; +} + +/* Container */ +.container { + max-width: 600px; + margin: 0 auto; + background: white; + padding: 20px; + margin-top: 30px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease, transform 0.2s; /* Added transition for container */ +} + +.container:hover { + transform: translateY(-5px); /* Slight upward movement on hover */ + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Increased shadow on hover */ +} + +/* Form styles */ +.container p { + font-size: small; + margin: 0 60px; + color: #555; + font-family: 'Poppins'; +} + +.form-group { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 5px; + color: #555; +} + +/* Input styles */ +input[type="text"], +input[type="email"], +input[type="tel"], +textarea { + width: 100%; + padding: 15px; /* Increased padding */ + border: 1px solid #939393; /* Updated border color */ + border-radius: 8px; /* Increased border radius */ + box-sizing: border-box; + font-size: 16px; /* Increased font size */ + transition: border-color 0.3s; /* Added transition for interaction */ +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="tel"]:focus, +textarea:focus { + border-color: #ea5541; /* Change border color on focus */ + outline: none; /* Remove default outline */ +} + +/* Textarea */ +textarea { + resize: vertical; +} + +/* Button styles */ +button { + background-color: #ea5541; /* Updated button background color */ + color: white; + padding: 15px 20px; /* Increased padding */ + border: none; + border-radius: 8px; /* Increased border radius */ + cursor: pointer; + width: 100%; + font-size: 18px; /* Increased font size */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Added shadow */ + transition: background-color 0.3s, transform 0.2s; /* Added transition */ +} + +button:hover { + background-color: #d94a38; /* Slightly darker shade on hover */ + transform: translateY(-1px); /* Lift effect on hover */ +} + +/* Message styling */ +.message { + color: #28a745; + text-align: center; + margin-top: 15px; +} + +/* Import Montserrat font */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700;900&display=swap'); + +/* Global styles */ +* { + font-family: "Montserrat", sans-serif; + box-sizing: border-box; /* Added for better box model handling */ + margin: 0; /* Reset margin */ + padding: 0; /* Reset padding */ +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu ul { + flex-direction: column; + gap: 10px; } - - .checkbox-label { - background-color: var(--background-color); - width: 50px; - height: 26px; - border-radius: 50px; - position: relative; - padding: 5px; - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; + + .nav-menu ul li a { + text-align: center; + padding: 10px; + width: 100%; /* Ensures full-width for small screens */ } - +} + +.auth-buttons { + display: flex; + gap: 10px; +} + +.auth-buttons .login-btn, +.auth-buttons .signup-btn { + text-decoration: none; + font-size: 1rem; + font-weight: 600; + padding: 8px 15px; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.auth-buttons .login-btn { + background-color: var(--background-color); + color: var(--text-color); +} + +.auth-buttons .signup-btn { + background-color: var(--background-color); + color: var(--text-color); +} + +.auth-buttons .login-btn:hover { + background-color: var(--background-color); +} + +.auth-buttons .signup-btn:hover { + background-color: var(--background-color); +} + +.toggle-mode { + display: flex; + align-items: center; + gap: 5px; +} + +.toggle-mode label { + font-size: 1rem; + color: var(--text-color); +} + +input[type="checkbox"] { + transform: scale(1.2); +} + +/* Navigation styling */ +.nav-links { + display: flex; + gap: 20px; /* Space between links */ + margin-left: auto; /* Push links to the right */ +} + +nav a:hover { + background-color: rgb(195, 164, 218); /* Slightly increased hover opacity */ +} + +.active-page { + color: #EEC48B; + background: rgba(159, 159, 159, 0.2); +} + +/* Dropdown button styles */ +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: var(--background-color); + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +/* Dark mode styling */ +body.dark { + background-color: var(--background-color); +} + +body.dark h1, +body.dark .support a { + color: var(--text-color); +} + +/* Checkbox for theme switcher */ +.checkbox { + opacity: 0; + position: absolute; +} + +.checkbox-label { + background-color: var(--background-color); + width: 50px; + height: 26px; + border-radius: 50px; + position: relative; + padding: 5px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; +} /* Form Popup */ .form-popup { @@ -337,6 +267,7 @@ width: 300px; padding: 20px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; /* Added transition for popup */ } .form-container h2 { @@ -348,25 +279,31 @@ .form-container input[type="password"], .form-container input[type="text"] { width: 100%; - padding: 10px; + padding: 15px; /* Increased padding */ margin: 5px 0 15px 0; border: 1px solid #ccc; - border-radius: 3px; + border-radius: 8px; /* Increased border radius */ + font-size: 16px; /* Increased font size */ } +/* Button styles */ .form-container .btn { background-color: #3be56b; color: rgb(255, 255, 255); - padding: 10px; + padding: 15px; /* Increased padding */ margin: 5px; width: 100%; border: none; - border-radius: 3px; + border-radius: 8px; /* Increased border radius */ cursor: pointer; + font-size: 18px; /* Increased font size */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Added shadow */ + transition: background-color 0.3s, transform 0.2s; /* Added transition */ } .form-container .btn:hover { background-color: #218838; + transform: translateY(-1px); /* Lift effect on hover */ } .form-container .cancel { @@ -375,30 +312,133 @@ .form-container .cancel:hover { background-color: #c82333; - } +/* Center icons styling */ .center-icons { display: flex; /* Enable flexbox */ justify-content: center; /* Center items horizontally */ align-items: center; /* Center items vertically */ flex-wrap: wrap; /* Allow items to wrap if necessary */ - gap: 15px; /* Space between the icons */ + gap: 30px; /* Increased space between the icons */ } + .circle-icon { display: flex; /* Use flexbox for centering */ align-items: center; /* Center the icon vertically */ justify-content: center; /* Center the icon horizontally */ - width: 50px; /* Set width of the circle */ - height: 50px; /* Set height of the circle */ - border-radius: 50%; /* Make the icon circular */ - background-color: #ffffff; /* Initial background color of the circle */ - color: #333; /* Icon color */ - transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover */ - text-align: center; /* Center text */ + width: 70px; /* Increased icon circle size */ + height: 70px; /* Increased icon circle size */ + border-radius: 50%; /* Circle shape */ + background-color: #f0f0f0; /* Light gray background */ + transition: background-color 0.3s, transform 0.3s; /* Added transitions */ + cursor: pointer; /* Change cursor on hover */ } +.circle-icon:hover { + background-color: #e0e0e0; /* Change background color on hover */ + transform: scale(1.15); /* Increase size more on hover */ +} + +.circle-icon img { + width: 60px; /* Increased icon size */ + height: 60px; /* Increased icon size */ + transition: transform 0.3s; /* Added transition for icon */ +} + +.circle-icon:hover img { + transform: translateY(-5px); /* Move icon up on hover */ +} + +/* Toggle icons for login and signup */ +.toggle-icon { + display: flex; /* Enable flexbox for positioning */ + justify-content: center; /* Center the icon horizontally */ + align-items: center; /* Center the icon vertically */ + cursor: pointer; /* Change cursor on hover */ + transition: transform 0.3s; /* Add transition for rotation */ +} + +.toggle-icon:hover { + transform: rotate(360deg); /* Rotate icon on hover */ +} +.tags.social { + display: flex; + justify-content: center; /* Center the icons */ + margin-top: 20px; /* Space above icons */ +} + +.circle-icon { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: 80px; /* Increased width */ + height: 80px; /* Increased height */ + margin: 10px; /* Space between icons */ + transition: background-color 0.3s, transform 0.3s; /* Smooth transition */ + color: #007bff; /* Icon color */ +} .circle-icon i { - font-size: 20px; /* Adjust icon size */ + font-size: 32px; /* Increased icon size */ +} + +.circle-icon:hover { + background-color: rgba(0, 123, 255, 0.1); /* Light background on hover */ + transform: scale(1.1); /* Scale effect on hover */ +} + +.fade-in { + opacity: 0; /* Start invisible */ + transform: translateY(20px); /* Start slightly lower */ + animation: fadeIn 0.5s forwards; /* Animation details */ +} + +@keyframes fadeIn { + to { + opacity: 1; /* End fully visible */ + transform: translateY(0); /* Move to original position */ + } +} + +/* Optional: Add a delay for a staggered effect */ +.fade-in:nth-child(1) { + animation-delay: 0.2s; /* Delay for the header */ +} +.fade-in:nth-child(2) { + animation-delay: 0.4s; /* Delay for the paragraph */ +} + + +.d-flex-gap { + display: flex; + gap: 15px; /* Space between buttons */ + flex-wrap: wrap; /* Wrap items to the next line if necessary */ + justify-content: center; /* Center the buttons horizontally */ +} + +.category-btn { + padding: 12px 20px; /* Padding for a better touch target */ + background-color: #ec8791; /* Primary color from the palette */ + color: #ffffff; /* White text color */ + border: 2px solid transparent; /* Transparent border for hover effect */ + border-radius: 5px; /* Rounded corners */ + transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transitions */ + text-decoration: none; /* Remove underline */ + font-size: 16px; /* Font size */ +} + +.category-btn:hover { + background-color:#ec8791; /* Darker shade on hover */ + color: #ffffff; /* Keep text color white on hover */ + border-color: #ec8791; /* Maintain the border color on hover */ +} + +/* Responsive Design */ +@media (max-width: 768px) { + .d-flex-gap { + flex-direction: column; /* Stack buttons on smaller screens */ + align-items: center; /* Center buttons on small screens */ + } } diff --git a/contact_us.html b/contact_us.html index 434a2723..7f301f99 100644 --- a/contact_us.html +++ b/contact_us.html @@ -275,17 +275,22 @@

Signup

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6); border-radius: 10px; box-sizing: border-box; + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition for movement and shadow effect */ } - + .form-container h2 { margin-bottom: 20px; color: #333; + text-align: center; /* Centered the heading */ } - + .form-group { margin-bottom: 15px; + display: flex; + flex-direction: column; /* Ensures vertical stacking of form elements */ + align-items: stretch; /* Stretches form controls to fill the container */ } - + .form-control { border-radius: 5px; padding: 12px; @@ -293,65 +298,90 @@

Signup

line-height: 1.5; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); width: 100%; + transition: box-shadow 0.3s; /* Added transition for focus effect */ } - + + .form-control:focus { + box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Enhanced focus effect */ + outline: none; /* Remove default outline */ + } + .forgot { text-align: right; margin-left: 50px; font-size: 10px; margin-top: -40px; - } - + .btn { margin-top: 10px; border-radius: 5px; + padding: 10px 20px; /* Increased padding for better button size */ + font-size: 16px; /* Adjusted font size */ + text-align: center; /* Center text within the button */ } - + .eye-icon { position: absolute; right: 15px; top: 38px; cursor: pointer; color: #007bff; + font-size: 20px; /* Increased icon size */ + transition: transform 0.3s; /* Added transition for hover effect */ } - + + .eye-icon:hover { + transform: scale(1.2); /* Scale icon on hover */ + } + .close-icon { font-size: 24px; cursor: pointer; float: right; + transition: transform 0.3s; /* Added transition for hover effect */ } - + + .close-icon:hover { + transform: scale(1.2); /* Scale icon on hover */ + } + .position-relative { position: relative; } - + /* Login button jumping issue fix */ .btn-primary { - transition: all 0.3s ease; - /* Smooth transition */ + transition: all 0.3s ease; /* Smooth transition */ + background-color: #007bff; /* Original button color */ + color: white; /* Text color */ } - + .btn-primary:hover { - background-color: #0056b3; + background-color: #0056b3; /* Hover color */ } - + .google-btn { display: flex; align-items: center; justify-content: center; + background-color: #db4437; /* Google button color */ + color: white; /* Text color */ + padding: 10px 20px; /* Increased padding for better button size */ + border-radius: 5px; + transition: background-color 0.3s; /* Added transition for hover effect */ } - + + .google-btn:hover { + background-color: #c13525; /* Hover color for Google button */ + } + .google-logo { - width: 20px; - height: 20px; + width: 24px; /* Increased logo size */ + height: 24px; /* Increased logo size */ margin-right: 10px; } - - .btn-primary:hover { - background-color: #0056b3; - } - + .strength-meter { height: 10px; width: 0; @@ -361,7 +391,24 @@

Signup

color: white; font-size: 12px; } + + /* Styles for contact icons */ + .contact-icons { + display: flex; /* Changed to flex for horizontal alignment */ + justify-content: center; /* Center the icons */ + margin-top: 20px; /* Added margin for spacing */ + } + + .contact-icons a { + margin: 0 10px; /* Horizontal spacing between icons */ + transition: transform 0.3s; /* Added transition for hover effect */ + } + + .contact-icons a:hover { + transform: scale(1.1); /* Scale icons on hover */ + } + @@ -412,8 +459,8 @@

Signup

margin-bottom: 20px; text-align: center; "> -

Get in Touch

-

+

Get in Touch

+

We are here for you. Let us know how we can assist you.

@@ -425,7 +472,8 @@

Get

- + + @@ -489,7 +537,8 @@

Get + +
@@ -523,173 +572,169 @@

Get } - - - - + + + + + + + + + + + + + +
- \ No newline at end of file + + \ No newline at end of file From bc55f8f20a7ae23887954cf18ad510fc73f8be2a Mon Sep 17 00:00:00 2001 From: ygowthamr Date: Sat, 2 Nov 2024 08:19:06 +0530 Subject: [PATCH 07/26] Adjested width of website counter --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 00d9f76f..0fe90374 100644 --- a/style.css +++ b/style.css @@ -3843,7 +3843,7 @@ h1 + p, p + p { border-radius: 10px; margin-top: 1vh; background-color: #f8b5b5; - width: 10vw; + width: 12vw; } .containerText p, .containerNumbers p { From 21e657f36b0fd629517c1f4a5a02b1f7fe075b9f Mon Sep 17 00:00:00 2001 From: Sawan Date: Sat, 2 Nov 2024 12:03:26 +0530 Subject: [PATCH 08/26] Added backend for add blog page also render the blog data on blog page as also handle blog image carefully --- backend/app.js | 13 ++- backend/controllers/addBlogController.js | 88 +++++++++++++++++ backend/models/addBlog.js | 54 +++++++++++ backend/package-lock.json | 1 + backend/routes/addBlogRoutes.js | 9 ++ frontend/src/pages/AddBlog.js | 66 +++++++++---- frontend/src/pages/Blogs.js | 115 +++++++++++++---------- 7 files changed, 274 insertions(+), 72 deletions(-) create mode 100644 backend/controllers/addBlogController.js create mode 100644 backend/models/addBlog.js create mode 100644 backend/routes/addBlogRoutes.js diff --git a/backend/app.js b/backend/app.js index 93092697..3ead9710 100644 --- a/backend/app.js +++ b/backend/app.js @@ -6,7 +6,10 @@ import userRoutes from "./routes/userRoutes.js"; import feedbackRoutes from "./routes/feedbackRoute.js"; import contactRoutes from "./routes/contactRoute.js"; import getInTouch from "./routes/getInTouchRoutes.js"; +import addBlog from "./routes/addBlogRoutes.js"; import cors from "cors"; +import path from "path"; // Import path module +import { fileURLToPath } from "url"; // Import fileURLToPath dotenv.config(); const app = express(); @@ -14,14 +17,22 @@ connectDB(); app.use(express.json()); -// to avoid cross origin errror +// to avoid cross-origin error app.use(cors()); +// Define __dirname for ES module +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +// Serve static files from the uploads directory +app.use("/uploads", express.static(path.join(__dirname, "uploads"))); // Adjust path as necessary + app.use("/api/users", userRoutes); app.use("/api/blogs", blogRoutes); app.use("/api/feedback", feedbackRoutes); app.use("/api/contact", contactRoutes); app.use("/api/getInTouch", getInTouch); +app.use("/api/addBlog", addBlog); const PORT = process.env.PORT || 5000; app.listen(PORT, () => { diff --git a/backend/controllers/addBlogController.js b/backend/controllers/addBlogController.js new file mode 100644 index 00000000..9d8c2400 --- /dev/null +++ b/backend/controllers/addBlogController.js @@ -0,0 +1,88 @@ +import BlogPost from '../models/addBlog.js'; +import multer from 'multer'; +import path from 'path'; + +// Configure multer for file uploads +const storage = multer.diskStorage({ + destination: (req, file, cb) => { + cb(null, 'uploads/'); // Ensure this directory exists + }, + filename: (req, file, cb) => { + // Set the file name to be unique + const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9); + cb(null, uniqueSuffix + path.extname(file.originalname)); // Preserve the original file extension + } +}); + +const upload = multer({ storage: storage }); + +// Function to save a new blog post +export async function saveBlog(req, res) { + try { + const { title, category, summary, excerpt, tags, publish } = req.body; + const featuredImage = req.file ? req.file.path : null; // Assuming `req.file` is set if an image is uploaded + + console.log(req.body); + console.log(req.file); + + // Check if required fields are provided + if (!title || !category || !summary || !excerpt) { + return res.status(400).json({ message: "All required fields must be filled out." }); + } + + // Create a new blog document + const newBlog = new BlogPost({ + title, + category, + summary, + excerpt, + tags, + publish, + featuredImage + }); + + console.log(newBlog); + + // Save the blog post to the database + await newBlog.save(); + + // Respond with success message + res.status(201).json({ + message: "Blog post created successfully!", + data: newBlog + }); + } catch (error) { + console.error("Error saving blog post:", error); + res.status(500).json({ message: "Failed to create blog post.", error }); + } +} + +// Function to retrieve all blog posts +export async function getAllBlog(req, res) { + try { + const blogs = await BlogPost.find(); // Retrieve all blog posts + res.status(200).json(blogs); // Respond with the list of blog posts + } catch (error) { + console.error("Error retrieving blog posts:", error); + res.status(500).json({ message: "Failed to retrieve blog posts.", error }); + } +} + +// Function to retrieve a specific blog post by ID +export async function getBlog(req, res) { + try { + const { id } = req.params; + + // Retrieve the specific blog post by ID + const blog = await BlogPost.findById(id); + if (!blog) { + return res.status(404).json({ message: "Blog post not found." }); + } + return res.status(200).json(blog); + } catch (error) { + console.error("Error retrieving blog post:", error); + res.status(500).json({ message: "Failed to retrieve blog post.", error }); + } +} + +export { upload }; \ No newline at end of file diff --git a/backend/models/addBlog.js b/backend/models/addBlog.js new file mode 100644 index 00000000..99c64c4d --- /dev/null +++ b/backend/models/addBlog.js @@ -0,0 +1,54 @@ +import mongoose from "mongoose"; + +const blogPostSchema = new mongoose.Schema({ + title: { + type: String, + required: true, + trim: true + }, + category: { + type: String, + required: true, + enum: ['vocabulary', 'grammar', 'pronunciation', 'culture', 'learning-tips'] // Add more categories as needed + }, + summary: { + type: String, + required: true, + trim: true + }, + excerpt: { + type: String, + required: true, + trim: true + }, + tags: { + type: [String], + default: [] + }, + publish: { + type: Boolean, + default: false + }, + featuredImage: { + type: String, + default: null + }, + createdAt: { + type: Date, + default: Date.now + }, + updatedAt: { + type: Date, + default: Date.now + } +}); + +// Add a pre-save hook to update the `updatedAt` field +blogPostSchema.pre('save', function (next) { + this.updatedAt = Date.now(); + next(); +}); + +const BlogPost = mongoose.model('BlogPost', blogPostSchema); + +export default BlogPost; diff --git a/backend/package-lock.json b/backend/package-lock.json index 1a210379..70691a15 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -1024,6 +1024,7 @@ "version": "1.4.5-lts.1", "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz", "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==", + "license": "MIT", "dependencies": { "append-field": "^1.0.0", "busboy": "^1.0.0", diff --git a/backend/routes/addBlogRoutes.js b/backend/routes/addBlogRoutes.js new file mode 100644 index 00000000..8524bd0a --- /dev/null +++ b/backend/routes/addBlogRoutes.js @@ -0,0 +1,9 @@ +import express from "express"; +import { getAllBlog, getBlog, saveBlog, upload } from "../controllers/addBlogController.js"; +const router = express.Router(); + +router.post("/saveBlog", upload.single('featuredImage'), saveBlog); +router.get("/getAllBlog", getAllBlog); +router.get("/getBlog/:id", getBlog); + +export default router; diff --git a/frontend/src/pages/AddBlog.js b/frontend/src/pages/AddBlog.js index a7a36985..54c22e91 100644 --- a/frontend/src/pages/AddBlog.js +++ b/frontend/src/pages/AddBlog.js @@ -40,9 +40,9 @@ export function renderAddBlog(container) {

- - + +
@@ -69,30 +69,56 @@ export function renderAddBlog(container) { `; // Add form submission logic + // Updated form submission logic const form = document.getElementById('add-blog-form'); - form.addEventListener('submit', function (e) { + form.addEventListener('submit', async function (e) { e.preventDefault(); - const title = document.getElementById('title').value.trim(); + + const title = document.getElementById('title').value; const category = document.getElementById('category').value; - const summary = document.getElementById('summary').value.trim(); - const content = document.getElementById('content').value.trim(); + const summary = document.getElementById('summary').value; + const excerpt = document.getElementById('excerpt').value; + const tags = document.getElementById('tags').value; + const publish = document.getElementById('publish').checked; + const featuredImage = document.getElementById('featured-image').files[0]; - if (!title || !category || !summary || !content) { + if (!title || !category || !summary || !excerpt) { alert('Please fill out all required fields.'); return; } - // Here you would typically send the form data to your server - console.log('Form submitted:', { - title, - category, - summary, - content, - tags: document.getElementById('tags').value, - publish: document.getElementById('publish').checked - }); - - // Reset form after submission - form.reset(); + // Prepare the form data + const formData = new FormData(); + formData.append('title', title); + formData.append('category', category); + formData.append('summary', summary); + formData.append('excerpt', excerpt); + formData.append('tags', tags); + formData.append('publish', publish); + if (featuredImage) { + formData.append('featuredImage', featuredImage); // Ensure key matches backend + } + + try { + const response = await fetch('http://localhost:5000/api/addBlog/saveBlog', { + method: 'POST', + body: formData // Send formData directly + }); + + if (response.ok) { + const result = await response.json(); + console.log('Blog post created:', result); + alert('Blog post successfully created!'); + form.reset(); // Reset the form after successful submission + } else { + console.error('Error creating blog post:', response.statusText); + alert('Failed to create blog post. Please try again.'); + } + } catch (error) { + console.error('Error:', error); + alert('An error occurred. Please try again.'); + } }); + + } diff --git a/frontend/src/pages/Blogs.js b/frontend/src/pages/Blogs.js index 4bbe3690..17673b5b 100644 --- a/frontend/src/pages/Blogs.js +++ b/frontend/src/pages/Blogs.js @@ -1,54 +1,62 @@ -const blogPosts = [ - { - id: 1, - title: "Mastering Vocabulary: 10 Words to Boost Your Language Skills", - excerpt: "Expand your vocabulary and improve your language proficiency with these essential words...", - date: "2023-05-15", - tags: "Vocabulary, Learning Tips", - imagePath: "../assets/blog/4.webp" - }, - { - id: 2, - title: "Essential Grammar Rules for Clear Communication", - excerpt: "Master these fundamental grammar rules to enhance your language skills and communicate more effectively...", - date: "2023-05-20", - tags: "Grammar, Writing", - imagePath: "../assets/blog/2.webp" - }, - { - id: 3, - title: "Mastering Pronunciation: Tips and Tricks", - excerpt: "Improve your accent and speak more clearly with these pronunciation techniques...", - date: "2023-05-25", - tags: "Pronunciation, Speaking", - imagePath: "../assets/blog/3.webp" +const fetchBlogData = async () => { + try { + const response = await fetch('http://localhost:5000/api/addBlog/getAllBlog'); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const data = await response.json(); + return data; + } catch (error) { + console.log('Error fetching blogs:', error); } -]; - -export function renderBlogs(container) { - container.innerHTML = ` -
-
-

WordWise Blog

-

Insights and tips for language learners

-
- -
-
-
- ${renderBlogPosts(blogPosts)} -
-
- - +}; + + + +export async function renderBlogs(container) { + try { + const blogPosts = await fetchBlogData(); // Fetch the blog data + console.log(blogPosts) + + // Check if blogPosts is valid + if (!blogPosts || blogPosts.length === 0) { + container.innerHTML = '

No blog posts available.

'; + return; + } + + // Render the blog layout + container.innerHTML = ` +
+
+

WordWise Blog

+

Insights and tips for language learners

+
+ +
+
+
+ ${renderBlogPosts(blogPosts)} +
+
+ + +
-
- `; + `; + // Set up the search functionality + setupSearch(blogPosts); + } catch (error) { + console.log('Error rendering blogs:', error); + container.innerHTML = '

Error loading blog posts. Please try again later.

'; + } +} + +function setupSearch(blogPosts) { document.getElementById('search-input').addEventListener('input', function () { const query = this.value.toLowerCase(); const filteredPosts = blogPosts.filter(post => @@ -63,10 +71,15 @@ export function renderBlogs(container) { } function renderBlogPosts(posts) { - return posts.map(post => renderBlogPost(post.id, post.title, post.excerpt, post.date, post.tags, post.imagePath)).join(''); + return posts.map(post => renderBlogPost(post.id, post.title, post.excerpt, post.date, post.tags, post.featuredImage, post.publish)).join(''); } -function renderBlogPost(id, title, excerpt, date, tags, imagePath) { +function renderBlogPost(id, title, excerpt, date, tags, imageUrl, publish) { + if (!publish) return; + let imagePath = " "; + if (imageUrl) { + imagePath = `http://localhost:5000/${imageUrl.replace(/\\/g, '/')}`; + } return `
${title} @@ -142,4 +155,4 @@ function formatDate(date) { month: 'long', day: 'numeric' }); -} +} \ No newline at end of file From 594f2ae967407d888256e233aa6e2c7c12cb80c0 Mon Sep 17 00:00:00 2001 From: Sania Date: Sat, 2 Nov 2024 14:46:47 +0530 Subject: [PATCH 09/26] Functional login with google and signup with google button options --- index.html | 6 +- login.html | 200 ---------------------------------------------------- signup.html | 188 ------------------------------------------------ 3 files changed, 3 insertions(+), 391 deletions(-) delete mode 100644 login.html delete mode 100644 signup.html diff --git a/index.html b/index.html index 3c358fc0..39ed6b64 100644 --- a/index.html +++ b/index.html @@ -418,8 +418,8 @@

Login

transition: 0.5s ease; } - - @@ -456,7 +456,7 @@

Signup

- diff --git a/login.html b/login.html deleted file mode 100644 index 0cdbbeb2..00000000 --- a/login.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - - - WordWise - - - - - - - - - - - -
- - - - -
-
- -
- -
-
-
-
- - Light Mode -
-
- -
- -
- - - - - - - diff --git a/signup.html b/signup.html deleted file mode 100644 index 21cdf51e..00000000 --- a/signup.html +++ /dev/null @@ -1,188 +0,0 @@ - - - - - - WordWise - - - - - - -
- -
- -
- -
- - - - - - - From e0cdc242e486bf243f980138d0d5255990e52f9e Mon Sep 17 00:00:00 2001 From: VidhanThakur09 Date: Sat, 2 Nov 2024 17:37:06 +0530 Subject: [PATCH 10/26] improve the cards in category --- category.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/category.css b/category.css index 86d213a3..b3b237d0 100644 --- a/category.css +++ b/category.css @@ -132,7 +132,9 @@ img { display: flex; flex-direction: column; justify-content: center; - align-items: center; + text-align: start; + /* align-items: center; */ + padding-left: 10px; background: rgba(0, 0, 0, 0.5); /* Dark overlay for better contrast */ opacity: 0; transition: opacity 0.4s ease-in-out; From 906ed6c847c280929b287b5f902d16021c9531c5 Mon Sep 17 00:00:00 2001 From: Antima Mishra <114092138+Antima2004@users.noreply.github.com> Date: Sat, 2 Nov 2024 19:03:43 +0530 Subject: [PATCH 11/26] link the popular tags --- start_writing.html | 270 ++++++++++++++++++++++----------------------- 1 file changed, 135 insertions(+), 135 deletions(-) diff --git a/start_writing.html b/start_writing.html index 13715e54..00d21542 100644 --- a/start_writing.html +++ b/start_writing.html @@ -17,7 +17,7 @@ - + - -
- -
- Web views -
- + + From d6d619d3d514471e607a8b0ce209107554713f78 Mon Sep 17 00:00:00 2001 From: Subhajit-2023-44 Date: Sat, 2 Nov 2024 20:09:59 +0530 Subject: [PATCH 12/26] done --- index.html | 31 +++++-- profile.html | 97 ++++++++++++++++++++ style.css | 36 ++++++++ testp.css | 251 +++++++++++++++++++++++++++++++++++++++++++++++++++ testp.js | 32 +++++++ 5 files changed, 441 insertions(+), 6 deletions(-) create mode 100644 profile.html create mode 100644 testp.css create mode 100644 testp.js diff --git a/index.html b/index.html index 39ed6b64..60aac05c 100644 --- a/index.html +++ b/index.html @@ -382,19 +382,38 @@

WordWise

Contact Us Give Feedback +
- - - - + + + Profile Icon + + + -
- + + +
diff --git a/profile.html b/profile.html new file mode 100644 index 00000000..fe6803f9 --- /dev/null +++ b/profile.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + + Profile Page + + + + + +
+ +
+

Your Profile

+ + + +
+
+ Profile Image + +
+

Skylar Reed

+

Email: skylar.reed@example.com

+

Phone: +987 654 3210

+

Joined: October 31, 2024

+

About Me: Hello!🙋🏻‍♂️ Join me as we explore the world together—one destination at a time! 😎

+

Last active: 31/10/2024, 11:12 PM

+ +
+ +
+ + +
+
+ +
+ +

Account Details

+
+
+

Address

+

789 Pine Lane, Austin, TX 73301

+ +
+ +
+

Change Password

+

*********63

+ +
+ +
+

Privacy Settings

+

Visibility Status: Public

+ + +
+ +
+

Recent Activity

+

Updated profile information

+ + +
+ +
+
+ +
+ +

Notifications

+
+

Your profile has been updated successfully!

+ + +
+
+

Joshef Roy has sent you a friend request. Accept or decline?

+ + +
+ +
+ + + + diff --git a/style.css b/style.css index 0fe90374..22541e62 100644 --- a/style.css +++ b/style.css @@ -3858,4 +3858,40 @@ h1 + p, p + p { } .containerNumbers p { color: white; +} + +.profile-icon { + + border-radius: 50%; + position: relative; + margin-left: 20px; /* Adjust space between Login button and Profile icon */ + +} + +.dropdown-menu { + + display: none; + position: absolute; + top: 35px; /* Adjust based on the height of your navbar */ + right: 0; + background-color: white; + color: black; + border: 1px solid #ccc; + border-radius: 4px; + z-index: 1; + +} + +.dropdown-menu a { + + display: block; + padding: 10px 15px; + text-decoration: none; + +} + +.dropdown-menu a:hover { + + background-color: #f1f1f1; + } \ No newline at end of file diff --git a/testp.css b/testp.css new file mode 100644 index 00000000..f18cc51b --- /dev/null +++ b/testp.css @@ -0,0 +1,251 @@ +body { + + font-family: 'Arial', sans-serif; + background: #f4ede3; + margin: 0; + padding: 0; + /*background-image: url(./assets/images/banner-bg.svg);*/ + +} + +.fa-home { + + position: absolute; + right: 190px; + top: 40px; + font-size: 25px; + color: #333333; + +} + +.fa-home:hover { + + color:#000000; + +} + +.profile-container { + + max-width: 1200px; + margin: 0 auto; + padding: 20px; + background: rgb(244 237 227); + border-radius: 8px; + box-shadow: 0 4px 10px rgb(0 0 0 / 40%); + +} + +.navbar a:hover { + + color: #0056b3; + +} + +.profile-card { + + text-align: left; + margin: 20px 0; + padding: 20px; + /*border: 1px solid #ddd;*/ /* Border for the card */ + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + background: #f8b5b5; + +} + +.profile-image { + + border-radius: 50%; + width: 170px; + height: 170px; + object-fit: cover; + +} + +.profile-name { + + font-size: 24px; + margin: 10px 0; + +} + +.profile-bio { + + font-size: 16px; + color: black; + +} + +.edit-profile-btn { + + background: rgb(51 51 51); + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 5px; + transition: background 0.3s, transform 0.3s; + +} + +.edit-profile-btn:hover { + + background-color: #000000; + transform: scale(1.05); + +} + +.edit_profiled{ + + background: rgb(51 51 51); + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 5px; + transition: background 0.3s, transform 0.3s; + position: relative; + right: 40%; + left: 290px; + +} + +.content-section { + + margin: 20px 0; + +} + +.content-section h2 { + + font-size: 22px; + margin-bottom: 10px; + color: rgb(51 51 51); + +} + +.card { + + margin-bottom: 15px; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + background: #f8b5b5; + +} + +.card h3 { + + font-size: 18px; + margin: 5px 0; + +} + +.card p { + + font-size: 14px; + color: black; + +} + + +.profile-details { + + display: flex; + flex-wrap: wrap; + gap: 20px; + +} + +.profile-detail-card { + + flex: 1; /* Allow cards to grow and fill space */ + min-width: 200px; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + text-align: center; + background: #f8b5b5; + +} + +.nav-links { + + list-style-type: none; + padding: 0; + margin: 0; + text-align: right; + +} + +.home-link { + + float: right; + +} + +.profile-header { + + display: flex; + align-items: center; + +} + +.profile-image { + margin-right: 20px; + margin-left: 50px; + margin-top: 30px; +} + +.profile-info { + + flex: 1; /* Allow this section to take the remaining space */ + margin-left: 50px; + +} + + + +/* Media Queries for Responsiveness */ +@media (max-width: 768px) { + + .navbar ul { + + flex-direction: column; /* Stack navbar items on smaller screens */ + align-items: center; + + } + + .profile-container { + + padding: 10px; /* Reduce padding on smaller screens */ + + } + + .profile-card { + + margin: 10px 0; /* Reduce margin for smaller screens */ + + } + + .content-section h2 { + + font-size: 20px; /* Smaller headings */ + + } + + .edit-profile-btn, .view-order-btn { + + width: 100%; /* Full width buttons */ + padding: 12px; /* Increase padding for easier tapping */ + + } + + .footer { + + font-size: 14px; /* Smaller footer text */ + + } + +} + diff --git a/testp.js b/testp.js new file mode 100644 index 00000000..891c89ec --- /dev/null +++ b/testp.js @@ -0,0 +1,32 @@ +// Get current timestamp +const getCurrentTimestamp = () => { + return new Date().getTime(); + }; + + // Store last active timestamp in LocalStorage + const storeLastActive = () => { + const lastActive = getCurrentTimestamp(); + localStorage.setItem('lastActive', lastActive); + }; + + // Get last active timestamp from LocalStorage + const getLastActive = () => { + return localStorage.getItem('lastActive'); + }; + + // Update last active timestamp on page load and interaction + document.addEventListener('DOMContentLoaded', storeLastActive); + document.addEventListener('click', storeLastActive); + document.addEventListener('scroll', storeLastActive); + document.addEventListener('keydown', storeLastActive); + + // Example usage: + const displayLastActive = () => { + const lastActive = getLastActive(); + const formattedTime = new Date(parseInt(lastActive)).toLocaleString(); + document.getElementById('last-active').innerHTML = Last active: ${formattedTime}; + }; + + displayLastActive(); + + From 8110a63895792c36e5ac6d5ce70630c06f1cb516 Mon Sep 17 00:00:00 2001 From: Sawan Date: Sat, 2 Nov 2024 20:25:32 +0530 Subject: [PATCH 13/26] Added feature to post the blog from draft also filter the blog according to category --- backend/controllers/addBlogController.js | 29 ++- frontend/src/pages/BloggerProfile.js | 261 +++++++++++++---------- frontend/src/pages/Blogs.js | 54 +++-- frontend/src/styles/output.css | 101 ++++----- 4 files changed, 247 insertions(+), 198 deletions(-) diff --git a/backend/controllers/addBlogController.js b/backend/controllers/addBlogController.js index 9d8c2400..232f2fcf 100644 --- a/backend/controllers/addBlogController.js +++ b/backend/controllers/addBlogController.js @@ -1,6 +1,7 @@ import BlogPost from '../models/addBlog.js'; import multer from 'multer'; import path from 'path'; +import fs from 'fs'; // Configure multer for file uploads const storage = multer.diskStorage({ @@ -19,11 +20,28 @@ const upload = multer({ storage: storage }); // Function to save a new blog post export async function saveBlog(req, res) { try { - const { title, category, summary, excerpt, tags, publish } = req.body; - const featuredImage = req.file ? req.file.path : null; // Assuming `req.file` is set if an image is uploaded + const { title, category, summary, excerpt, tags, publish, featuredImage } = req.body; + + // If an image is uploaded, use its path + let imagePath = req.file ? req.file.path : null; + + // Handle base64 image if provided + if (featuredImage && featuredImage.startsWith('data:image/')) { + // Extract the base64 part of the image data + const base64Image = featuredImage.split(';base64,').pop(); + // Convert base64 string to Buffer + const buffer = Buffer.from(base64Image, 'base64'); + + // Create a path to save the image + const imagePathFromBase64 = `uploads/${Date.now()}.png`; // Use a unique name based on timestamp + + // Save the image buffer to a file + await fs.promises.writeFile(imagePathFromBase64, buffer); + imagePath = imagePathFromBase64; // Set imagePath to the saved file path + } + + // Log request body and file info - console.log(req.body); - console.log(req.file); // Check if required fields are provided if (!title || !category || !summary || !excerpt) { @@ -38,7 +56,7 @@ export async function saveBlog(req, res) { excerpt, tags, publish, - featuredImage + featuredImage: imagePath // Use the determined image path }); console.log(newBlog); @@ -57,6 +75,7 @@ export async function saveBlog(req, res) { } } + // Function to retrieve all blog posts export async function getAllBlog(req, res) { try { diff --git a/frontend/src/pages/BloggerProfile.js b/frontend/src/pages/BloggerProfile.js index a63841d4..a4ef00dd 100644 --- a/frontend/src/pages/BloggerProfile.js +++ b/frontend/src/pages/BloggerProfile.js @@ -1,4 +1,3 @@ - function getQueryParams() { const params = new URLSearchParams(window.location.search); return { @@ -12,7 +11,12 @@ import signOut from "./Login"; const userDetails = getQueryParams(); +function loadDrafts() { + const storedDrafts = localStorage.getItem('drafts'); + return storedDrafts ? JSON.parse(storedDrafts) : []; +} +let drafts = loadDrafts(); export function renderProfilePage(container) { container.innerHTML = ` @@ -22,160 +26,193 @@ export function renderProfilePage(container) {

Draft a New Blog

Create and save your blog drafts below.

- - - - - - - + + + - - - - - + + +
- -
- - Profile -
-

- ${userDetails.name} -

-

${userDetails.email}

-
+
+ + Profile +

${userDetails.name}

+

${userDetails.email}

- -
- -
+

My Drafts

    `; + document.getElementById('logout-btn').addEventListener('click', () => { - signOut() + signOut(); window.location.href = '/'; }); - // Sample Data (Simulating State) - let drafts = []; // Save draft functionality - const saveDraftButton = container.querySelector('#save-draft-btn'); - saveDraftButton.addEventListener('click', () => { + container.querySelector('#save-draft-btn').addEventListener('click', () => { const draftTitle = container.querySelector('#draft-title').value.trim(); - const draftDetails = container.querySelector('#draft-details').value.trim(); + const draftContent = container.querySelector('#draft-content').value.trim(); + const draftSummary = container.querySelector('#draft-summary').value.trim(); + const draftTags = container.querySelector('#draft-tags').value.trim(); const draftCategory = container.querySelector('#draft-category').value; const draftImageInput = container.querySelector('#draft-image'); - const draftImage = draftImageInput.files[0]; // Get the selected file + const draftImage = draftImageInput.files[0]; - if (draftTitle && draftDetails && draftCategory && draftImage) { + if (draftTitle && draftContent && draftCategory && draftImage) { const reader = new FileReader(); reader.onload = function (e) { - drafts.push({ + const newDraft = { title: draftTitle, - details: draftDetails, + excerpt: draftContent, // Keeping excerpt as intended + summary: draftSummary, category: draftCategory, - image: e.target.result, // Save the image as a data URL + tags: draftTags, + image: e.target.result, date: new Date() - }); - renderDrafts(); - container.querySelector('#draft-title').value = ''; - container.querySelector('#draft-details').value = ''; - container.querySelector('#draft-category').value = ''; // Reset category - draftImageInput.value = ''; // Reset the file input + }; + + drafts.push(newDraft); + localStorage.setItem('drafts', JSON.stringify(drafts)); + renderDrafts(container); + + // Reset the input fields + resetDraftForm(container); }; - reader.readAsDataURL(draftImage); // Convert image to data URL + reader.readAsDataURL(draftImage); } }); + + const handlePostingDraft = async (event) => { + const index = event.target.dataset.index; + const postDraftData = drafts[index]; + + const formData = new FormData(); + formData.append('title', postDraftData.title); + formData.append('category', postDraftData.category); + formData.append('summary', postDraftData.summary); + formData.append('excerpt', postDraftData.excerpt); + formData.append('tags', postDraftData.tags); + formData.append('publish', true); + + // Ensure the key name matches the backend expectation + if (postDraftData.image) { // Check with correct key name + formData.append('featuredImage', postDraftData.image); + } + + console.log(postDraftData); + + try { + const response = await fetch('http://localhost:5000/api/addBlog/saveBlog', { + method: 'POST', + body: formData + }); + + if (response.ok) { + const result = await response.json(); + console.log('Blog post created:', result); + alert('Blog post successfully created!'); + + // Remove the draft and update localStorage + drafts.splice(index, 1); + localStorage.setItem('drafts', JSON.stringify(drafts)); + + // Redirect to blogs page + window.location.href = '/blogs'; + } else { + console.error('Error creating blog post:', response.statusText); + alert('Failed to create blog post. Please try again.'); + } + } catch (error) { + console.error('Error:', error); + alert('An error occurred. Please try again.'); + } + }; + // Render Drafts - // Render Drafts - function renderDrafts() { + renderDrafts(container) + + function renderDrafts(container) { const draftList = container.querySelector('#draft-list'); + draftList.innerHTML = drafts.length - ? drafts.map((draft, index) => - `
    - ${draft.title} -
    -

    - ${draft.title} -

    -

    ${draft.details}

    -
    - - - - - - - - ${draft.category} + ? drafts.map((draft, index) => ` +
    + ${draft.title} +
    +

    + ${draft.title} +

    +

    ${draft.excerpt}

    +
    + + ${draft.category} + ${draft.tags} +
    -
    -
    - - - - - Edit - -
    -
    +
    + + + +
    + `).join('') - : `

    No drafts available. Create your first draft!

    `; - - // Attach edit event listeners - const editButtons = draftList.querySelectorAll('.edit-btn'); - editButtons.forEach(button => { - button.addEventListener('click', (event) => { - event.preventDefault(); // Prevent default link behavior + : '

    No drafts available.

    '; - const draftIndex = event.target.dataset.index; // Get the index of the draft to edit - const draftToEdit = drafts[draftIndex]; // Get the draft object + draftList.querySelectorAll('.edit-btn').forEach(btn => { + btn.addEventListener('click', handleEditDraft); + }); - // Fill the form with draft details - container.querySelector('#draft-title').value = draftToEdit.title; - container.querySelector('#draft-details').value = draftToEdit.details; - container.querySelector('#draft-category').value = draftToEdit.category; + draftList.querySelectorAll('.delete-btn').forEach(btn => { + btn.addEventListener('click', handleDeleteDraft); + }); - // Remove the draft from the drafts array - drafts.splice(draftIndex, 1); - renderDrafts(); // Re-render the drafts list - }); + draftList.querySelectorAll('.post-btn').forEach(btn => { + btn.addEventListener('click', handlePostingDraft); }); } + function handleEditDraft(event) { + const index = event.target.dataset.index; + const draft = drafts[index]; + container.querySelector('#draft-title').value = draft.title; + container.querySelector('#draft-summary').value = draft.summary; + container.querySelector('#draft-content').value = draft.excerpt; + container.querySelector('#draft-category').value = draft.category; + container.querySelector('#draft-tags').value = draft.tags; + // Handle the image upload for the draft as needed + // You can set the draft image if you have a preview option + } + function handleDeleteDraft(event) { + const index = event.target.dataset.index; + drafts.splice(index, 1); + localStorage.setItem('drafts', JSON.stringify(drafts)); + renderDrafts(container); + } - + function resetDraftForm(container) { + container.querySelector('#draft-title').value = ''; + container.querySelector('#draft-summary').value = ''; + container.querySelector('#draft-content').value = ''; + container.querySelector('#draft-category').value = ''; + container.querySelector('#draft-tags').value = ''; + container.querySelector('#draft-image').value = ''; + } } diff --git a/frontend/src/pages/Blogs.js b/frontend/src/pages/Blogs.js index 17673b5b..69e97281 100644 --- a/frontend/src/pages/Blogs.js +++ b/frontend/src/pages/Blogs.js @@ -11,8 +11,6 @@ const fetchBlogData = async () => { } }; - - export async function renderBlogs(container) { try { const blogPosts = await fetchBlogData(); // Fetch the blog data @@ -41,15 +39,16 @@ export async function renderBlogs(container) {
    `; - // Set up the search functionality + // Set up the search and category filtering functionality setupSearch(blogPosts); + setupCategoryFilter(blogPosts); } catch (error) { console.log('Error rendering blogs:', error); container.innerHTML = '

    Error loading blog posts. Please try again later.

    '; @@ -70,13 +69,29 @@ function setupSearch(blogPosts) { }); } +function setupCategoryFilter(blogPosts) { + const categoryLinks = document.querySelectorAll('.category-link'); + categoryLinks.forEach(link => { + link.addEventListener('click', function (event) { + event.preventDefault(); // Prevent default anchor click behavior + const selectedCategory = this.dataset.category; + const filteredPosts = selectedCategory === 'all' + ? blogPosts + : blogPosts.filter(post => post.category === selectedCategory); // Filter by category + + const blogPostsContainer = document.getElementById('blog-posts-container'); + blogPostsContainer.innerHTML = `
    ${renderBlogPosts(filteredPosts)}
    `; + }); + }); +} + function renderBlogPosts(posts) { return posts.map(post => renderBlogPost(post.id, post.title, post.excerpt, post.date, post.tags, post.featuredImage, post.publish)).join(''); } function renderBlogPost(id, title, excerpt, date, tags, imageUrl, publish) { - if (!publish) return; - let imagePath = " "; + if (!publish) return ''; + let imagePath = ""; if (imageUrl) { imagePath = `http://localhost:5000/${imageUrl.replace(/\\/g, '/')}`; } @@ -89,14 +104,8 @@ function renderBlogPost(id, title, excerpt, date, tags, imageUrl, publish) {

    ${excerpt}

    - - - - - - - ${tags} + ${tags} Read More @@ -123,22 +132,21 @@ function renderSearchWidget() { `; } -function renderCategoriesWidget() { - // Your categories widget code here - return `
    +function renderCategoriesWidget(blogPosts) { + const categories = Array.from(new Set(blogPosts.map(post => post.category))).sort(); + return ` +

    Categories
    `; } function renderRecentPostsWidget() { - // Your recent posts widget code here return `

    Recent Posts

      @@ -155,4 +163,4 @@ function formatDate(date) { month: 'long', day: 'numeric' }); -} \ No newline at end of file +} diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css index 05892709..abf5b9b3 100644 --- a/frontend/src/styles/output.css +++ b/frontend/src/styles/output.css @@ -608,8 +608,8 @@ video { position: relative; } -.-top-\[17px\] { - top: -17px; +.-top-4 { + top: -1rem; } .left-3 { @@ -629,9 +629,9 @@ video { margin-right: auto; } -.my-8 { - margin-top: 2rem; - margin-bottom: 2rem; +.my-12 { + margin-top: 3rem; + margin-bottom: 3rem; } .mb-12 { @@ -799,10 +799,6 @@ video { max-width: 1280px; } -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .cursor-pointer { cursor: pointer; } @@ -947,10 +943,6 @@ video { border-top-width: 1px; } -.border-t-2 { - border-top-width: 2px; -} - .border-none { border-style: none; } @@ -975,11 +967,6 @@ video { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-gray-500 { - --tw-border-opacity: 1; - border-color: rgb(107 114 128 / var(--tw-border-opacity)); -} - .border-gray-700 { --tw-border-opacity: 1; border-color: rgb(55 65 81 / var(--tw-border-opacity)); @@ -1019,6 +1006,11 @@ video { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity)); +} + .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); @@ -1310,6 +1302,11 @@ video { color: rgb(239 68 68 / var(--tw-text-opacity)); } +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); +} + .text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity)); @@ -1335,6 +1332,11 @@ video { color: rgb(133 77 14 / var(--tw-text-opacity)); } +.text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity)); +} + .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -1375,24 +1377,12 @@ video { transition-duration: 150ms; } -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .duration-150 { transition-duration: 150ms; } @@ -1428,17 +1418,6 @@ body.dark-mode { padding: 20px; } -.hover\:-translate-y-1:hover { - --tw-translate-y: -0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:scale-105:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .hover\:bg-\[\#753ff1\]:hover { --tw-bg-opacity: 1; background-color: rgb(117 63 241 / var(--tw-bg-opacity)); @@ -1464,6 +1443,11 @@ body.dark-mode { background-color: rgb(67 56 202 / var(--tw-bg-opacity)); } +.hover\:bg-red-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} + .hover\:bg-red-600:hover { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); @@ -1479,9 +1463,9 @@ body.dark-mode { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.hover\:text-blue-600:hover { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); +.hover\:bg-gray-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); } .hover\:text-gray-900:hover { @@ -1503,12 +1487,6 @@ body.dark-mode { text-decoration-line: underline; } -.hover\:shadow-xl:hover { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .hover\:shadow-gray-300:hover { --tw-shadow-color: #d1d5db; --tw-shadow: var(--tw-shadow-colored); @@ -1529,10 +1507,6 @@ body.dark-mode { border-color: rgb(99 102 241 / var(--tw-border-opacity)); } -.focus\:border-transparent:focus { - border-color: transparent; -} - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1613,6 +1587,11 @@ body.dark-mode { background-color: rgb(30 58 138 / var(--tw-bg-opacity)); } +.dark\:bg-gray-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(75 85 99 / var(--tw-bg-opacity)); +} + .dark\:bg-gray-700:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); @@ -1753,6 +1732,16 @@ body.dark-mode { background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } +.dark\:hover\:bg-red-600:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); +} + +.dark\:hover\:bg-green-600:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); +} + .dark\:hover\:text-indigo-500:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(99 102 241 / var(--tw-text-opacity)); @@ -1778,10 +1767,6 @@ body.dark-mode { display: inline; } - .sm\:w-auto { - width: auto; - } - .sm\:flex-row { flex-direction: row; } From 07f58dd7daca0bd7b652fd963f0d87d95d7f54b3 Mon Sep 17 00:00:00 2001 From: Mallik-vinukonda <158685334+Mallik-vinukonda@users.noreply.github.com> Date: Sat, 2 Nov 2024 23:52:28 +0530 Subject: [PATCH 14/26] As you said ...completed adding footer to all pages --- blog.html | 61 +++++++++++++++++++++++----------------------- category.html | 59 ++++++++++++++++++++++---------------------- contact_us.css | 4 +-- give_feedback.html | 45 +++++++++++++++++++--------------- index.html | 50 ++++++++++++++++++------------------- start_writing.html | 61 +++++++++++++++++++++++----------------------- style.css | 35 +++++++++++++++++++++++++- 7 files changed, 178 insertions(+), 137 deletions(-) diff --git a/blog.html b/blog.html index 20a172eb..39ba1b80 100644 --- a/blog.html +++ b/blog.html @@ -1306,38 +1306,39 @@

      Feature Post

    -

    Popular Tags

    - -
    -
    - Travel - Food - Lifestyle - Techonogy - Fashion -
    - -
    - -

    Connect with us

    - - +
    +
    diff --git a/category.html b/category.html index 9cd120df..c285e123 100644 --- a/category.html +++ b/category.html @@ -665,37 +665,38 @@

    Feature Post

    -

    Popular Tags

    - -
    -
    - Travel - Food - Lifestyle - Techonogy - Fashion -
    - -
    - -

    Connect with us

    - - +

    Connect with us

    + -
    diff --git a/contact_us.css b/contact_us.css index ee1279b1..1309970b 100644 --- a/contact_us.css +++ b/contact_us.css @@ -421,7 +421,7 @@ body.dark .support a { .category-btn { padding: 12px 20px; /* Padding for a better touch target */ background-color: #ec8791; /* Primary color from the palette */ - color: #ffffff; /* White text color */ + color: #11080800; /* White text color */ border: 2px solid transparent; /* Transparent border for hover effect */ border-radius: 5px; /* Rounded corners */ transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transitions */ @@ -431,7 +431,7 @@ body.dark .support a { .category-btn:hover { background-color:#ec8791; /* Darker shade on hover */ - color: #ffffff; /* Keep text color white on hover */ + color: #060606; /* Keep text color white on hover */ border-color: #ec8791; /* Maintain the border color on hover */ } diff --git a/give_feedback.html b/give_feedback.html index f238ae1c..f59ccd0d 100644 --- a/give_feedback.html +++ b/give_feedback.html @@ -792,31 +792,38 @@

    Feature Post

    Popular Tags

    -
    - Travel - Food - Lifestyle - Techonogy - Fashion -
    + Travel + Food + Lifestyle + Technology + Fashion +
    +
    -

    Connect with us

    -
    -
    - - - - - -
    +
    + + + + + + + + + + + + + + + +
    - - + diff --git a/index.html b/index.html index aa6cfcbf..759d8515 100644 --- a/index.html +++ b/index.html @@ -1510,39 +1510,37 @@

    Feature Post

    Popular Tags

    -
    -
    - Travel - Food - Lifestyle - Techonogy - Fashion -
    - +
    + Travel + Food + Lifestyle + Technology + Fashion +
    +
    -

    Connect with us

    - -
    diff --git a/start_writing.html b/start_writing.html index 13715e54..8298fcdf 100644 --- a/start_writing.html +++ b/start_writing.html @@ -557,38 +557,39 @@

    Feature Post

    -

    Popular Tags

    - -
    -
    - Travel - Food - Lifestyle - Techonogy - Fashion -
    - -
    - -

    Connect with us

    - - +
    + diff --git a/style.css b/style.css index d6deeeec..c68e53be 100644 --- a/style.css +++ b/style.css @@ -3835,4 +3835,37 @@ h1 + p, p + p { .comment-icon{ font-size: 14px; color: var(--text-color); -} \ No newline at end of file +} + + +.d-flex-gap { + display: flex; + gap: 15px; /* Space between buttons */ + flex-wrap: wrap; /* Wrap items to the next line if necessary */ + justify-content: center; /* Center the buttons horizontally */ +} + +.category-btn { + padding: 12px 20px; /* Padding for a better touch target */ + background-color: #ec8791; /* Primary color from the palette */ + color: #1a171700; /* White text color */ + border: 2px solid transparent; /* Transparent border for hover effect */ + border-radius: 5px; /* Rounded corners */ + transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transitions */ + text-decoration: none; /* Remove underline */ + font-size: 16px; /* Font size */ +} + +.category-btn:hover { + background-color:#ec8791; /* Darker shade on hover */ + color: #060606; /* Keep text color white on hover */ + border-color: #ec8791; /* Maintain the border color on hover */ +} + +/* Responsive Design */ +@media (max-width: 768px) { + .d-flex-gap { + flex-direction: column; /* Stack buttons on smaller screens */ + align-items: center; /* Center buttons on small screens */ + } +} From a831d3da2940873254af5f3faa5c11cc715151df Mon Sep 17 00:00:00 2001 From: Antima Mishra <114092138+Antima2004@users.noreply.github.com> Date: Sun, 3 Nov 2024 10:13:54 +0530 Subject: [PATCH 15/26] resolved the conflict --- start_writing.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/start_writing.html b/start_writing.html index bc6937d2..e55a8c36 100644 --- a/start_writing.html +++ b/start_writing.html @@ -565,11 +565,11 @@

    Popular Tags

    - Travel - Food - Lifestyle - Techonogy - Fashion + Travel + Food + Lifestyle + Techonogy + Fashion
    + + + diff --git a/bookmarks.html b/bookmarks.html index 01216c92..a4bd034a 100644 --- a/bookmarks.html +++ b/bookmarks.html @@ -319,5 +319,55 @@

    Connect with us

    +
    + +
    + + + + + + diff --git a/category.html b/category.html index 81604fe2..c51ccb26 100644 --- a/category.html +++ b/category.html @@ -959,6 +959,55 @@

    Connect with us

    const app = new Vue({ el: '#app' }); +
    + +
    + + + + + diff --git a/chatbot.html b/chatbot.html index f99c41cf..6ea37c5a 100644 --- a/chatbot.html +++ b/chatbot.html @@ -273,5 +273,55 @@ loader.style.display = "none"; }); +
    + +
    + + + + + + diff --git a/comment1.html b/comment1.html index 6db21224..8ebc0134 100644 --- a/comment1.html +++ b/comment1.html @@ -433,6 +433,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment10.html b/comment10.html index cb51ad16..77993734 100644 --- a/comment10.html +++ b/comment10.html @@ -431,6 +431,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment11.html b/comment11.html index 9c973cfd..ef66d2c9 100644 --- a/comment11.html +++ b/comment11.html @@ -429,6 +429,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment12.html b/comment12.html index b5758076..2e1b222f 100644 --- a/comment12.html +++ b/comment12.html @@ -431,6 +431,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment13.html b/comment13.html index d66c0f47..e61f49f7 100644 --- a/comment13.html +++ b/comment13.html @@ -429,6 +429,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + diff --git a/comment14.html b/comment14.html index 40d551ed..d7f69c64 100644 --- a/comment14.html +++ b/comment14.html @@ -429,6 +429,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment2.html b/comment2.html index 5327e0fb..0585d1d9 100644 --- a/comment2.html +++ b/comment2.html @@ -453,6 +453,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/comment3.html b/comment3.html index fb8e2d61..fafa1c28 100644 --- a/comment3.html +++ b/comment3.html @@ -432,6 +432,55 @@

    Connect with us

    +
    + +
    + + + + + \ No newline at end of file diff --git a/comment4.html b/comment4.html index acc2447f..add94dfe 100644 --- a/comment4.html +++ b/comment4.html @@ -430,6 +430,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment5.html b/comment5.html index 137cf2c5..3a143173 100644 --- a/comment5.html +++ b/comment5.html @@ -431,6 +431,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment6.html b/comment6.html index c4ff1e96..c320a603 100644 --- a/comment6.html +++ b/comment6.html @@ -430,6 +430,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment7.html b/comment7.html index 933fb93c..13632e96 100644 --- a/comment7.html +++ b/comment7.html @@ -429,6 +429,55 @@

    Connect with us

    © WordWise. All rights reserved.

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/comment8.html b/comment8.html index f39ab641..e393656f 100644 --- a/comment8.html +++ b/comment8.html @@ -430,6 +430,55 @@

    Connect with us

    +
    + +
    + + + + + \ No newline at end of file diff --git a/comment9.html b/comment9.html index d4826ae0..a637ca14 100644 --- a/comment9.html +++ b/comment9.html @@ -430,6 +430,55 @@

    Connect with us

    +
    + +
    + + + + + \ No newline at end of file diff --git a/contact.html b/contact.html index c863b5e7..77e13667 100644 --- a/contact.html +++ b/contact.html @@ -350,6 +350,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/contact_us.html b/contact_us.html index 434a2723..3a879196 100644 --- a/contact_us.html +++ b/contact_us.html @@ -691,5 +691,54 @@

    Connect with us

    +
    + +
    + + + + + \ No newline at end of file diff --git a/fashion.html b/fashion.html index 2a5ecba2..d2853791 100644 --- a/fashion.html +++ b/fashion.html @@ -376,6 +376,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/food.html b/food.html index 1c5a9a54..b284edf3 100644 --- a/food.html +++ b/food.html @@ -383,6 +383,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/gaming_chronicles.html b/gaming_chronicles.html index 70841205..2b562bc0 100644 --- a/gaming_chronicles.html +++ b/gaming_chronicles.html @@ -1516,6 +1516,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/give_feedback.html b/give_feedback.html index f238ae1c..d036f2a7 100644 --- a/give_feedback.html +++ b/give_feedback.html @@ -855,6 +855,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/health.html b/health.html index e3b635d0..f33dec23 100644 --- a/health.html +++ b/health.html @@ -379,6 +379,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/index.html b/index.html index 39ed6b64..91510357 100644 --- a/index.html +++ b/index.html @@ -1661,7 +1661,56 @@

    Connect with us

    - +
    + +
    + + + + + + \ No newline at end of file diff --git a/life.html b/life.html index 20a1775c..2631430e 100644 --- a/life.html +++ b/life.html @@ -376,6 +376,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/privacy.html b/privacy.html index ef16c1c4..06668e60 100644 --- a/privacy.html +++ b/privacy.html @@ -645,6 +645,56 @@

    Share this post:

    +
    + +
    + + + + + + diff --git a/resetpass.html b/resetpass.html index 56fdeeab..6784e254 100644 --- a/resetpass.html +++ b/resetpass.html @@ -171,6 +171,55 @@

    Reset Your Password

    console.error("Error:", error); } } - +
    + +
    + + + + + + diff --git a/start.html b/start.html index 805e9d0d..d70c4589 100644 --- a/start.html +++ b/start.html @@ -483,6 +483,55 @@

    Social

    - +
    + +
    + + + + + + diff --git a/start_writing.html b/start_writing.html index bc6937d2..f84a49a9 100644 --- a/start_writing.html +++ b/start_writing.html @@ -795,6 +795,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/tech.html b/tech.html index af9ce6be..89d3070b 100644 --- a/tech.html +++ b/tech.html @@ -375,6 +375,55 @@

    Connect with us

    +
    + +
    + + + + + diff --git a/travel.html b/travel.html index da197ff9..01f37bf3 100644 --- a/travel.html +++ b/travel.html @@ -390,6 +390,55 @@

    Connect with us

    +
    + +
    + + + + + From 1267c5079227132ebaec90ccc480d0f58bcc0fca Mon Sep 17 00:00:00 2001 From: ygowthamr Date: Sun, 3 Nov 2024 12:11:10 +0530 Subject: [PATCH 17/26] Added sticky privacy policy page header --- privacy.html | 544 ++++++++++++++++++++++++--------------------------- 1 file changed, 255 insertions(+), 289 deletions(-) diff --git a/privacy.html b/privacy.html index ef16c1c4..04aeb687 100644 --- a/privacy.html +++ b/privacy.html @@ -63,310 +63,275 @@ -
    -
    -
    - -
    - -
    - +
    - - -     - - + - +
    -
    +

    Privacy Policy


    Effective Date: October 2024

    @@ -435,6 +400,7 @@

    10. Contact Us

    Phone: 125-896-485

    +