Skip to content

Add Feedback & Reviews Section Above Footer in homepage #910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adityai0 merged 3 commits into from
Sep 6, 2025
Merged

Add Feedback & Reviews Section Above Footer in homepage #910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b92e689
Update index.html
Renu-code123 Sep 6, 2025
46d2ee1
Create feedback.js
Renu-code123 Sep 6, 2025
5cc7232
Create feedback.css
Renu-code123 Sep 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
<link rel="stylesheet" href="../styling/home.css" />
<link rel="stylesheet" href="../styling/base.css" />
<link rel="stylesheet" href="../styling/variables.css" />
<link rel="stylesheet" href="../styling/feedback.css" />
</head>

<body>
Expand Down Expand Up @@ -147,6 +148,19 @@ <h3>Cross-Device Sync</h3>
</div>
</div>
</section>
<!-- Feedback & Reviews Section -->
<section class="feedback-section" id="feedback-section">
<h2>Feedback & Reviews</h2>
<p>We value your feedback! Share your thoughts and help us improve NotesVault.</p>
<form class="feedback-form" id="feedback-form" autocomplete="off">
<input type="text" id="feedback-name" name="name" maxlength="60" placeholder="Your Name" required aria-label="Name" />
<input type="email" id="feedback-email" name="email" maxlength="100" placeholder="Your Email" required aria-label="Email" />
<textarea id="feedback-input" name="feedback" rows="3" maxlength="400" placeholder="Write your feedback here..." required aria-label="Feedback"></textarea>
<button type="submit">Submit Feedback</button>
</form>
<div id="feedback-success" class="feedback-success">Submitted successfully! Thank you for your feedback.</div>
<!-- Feedbacks are stored locally and not displayed on the website. -->
</section>
</main>

<!-- Footer -->
Expand Down
33 changes: 33 additions & 0 deletions scripts/feedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// Feedback & Reviews Section Script

document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('feedback-form');
const input = document.getElementById('feedback-input');
const nameInput = document.getElementById('feedback-name');
const emailInput = document.getElementById('feedback-email');
const success = document.getElementById('feedback-success');

// Show success message
function showSuccess() {
success.style.display = 'inline-block';
setTimeout(() => {
success.style.display = 'none';
}, 2500);
}

// Handle form submit
form.addEventListener('submit', function (e) {
e.preventDefault();
const feedback = input.value.trim();
const name = nameInput.value.trim();
const email = emailInput.value.trim();
if (!feedback || !name || !email) return;
let feedbacks = JSON.parse(localStorage.getItem('feedbacks') || '[]');
feedbacks.push({ name, email, feedback });
localStorage.setItem('feedbacks', JSON.stringify(feedbacks));
input.value = '';
nameInput.value = '';
emailInput.value = '';
showSuccess();
});
});
112 changes: 112 additions & 0 deletions styling/feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/* Feedback & Reviews Section Styles */

.feedback-section {
background: var(--card-bg);
border-radius: 1.5rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
padding: 3rem 2rem 2rem 2rem;
margin: 3rem auto 2rem auto;
max-width: 700px;
width: 100%;
text-align: center;
}

.feedback-section h2 {
color: var(--primary-500);
font-size: 2rem;
margin-bottom: 0.5rem;
}

.feedback-section p {
color: var(--text-secondary);
margin-bottom: 2rem;
}

.feedback-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
width: 100%;
max-width: 500px;
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 1rem;
resize: vertical;
transition: border 0.2s;
}

.feedback-form input[type="text"]:focus,
.feedback-form input[type="email"]:focus,
.feedback-form textarea:focus {
border-color: var(--primary-500);
outline: none;
}

.feedback-form button {
background: var(--primary-500);
color: var(--white);
border: none;
border-radius: 0.75rem;
padding: 0.75rem 2rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}

.feedback-form button:hover {
background: var(--primary-600);
}

.feedback-success {
display: none;
color: var(--primary-600);
background: rgba(0,140,45,0.08);
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
margin-bottom: 1.5rem;
font-weight: 500;
/* display: inline-block; will be set by JS when shown */
}

.feedback-list {
margin-top: 1.5rem;
text-align: left;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

.feedback-item {
background: var(--bg-secondary);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
color: var(--text-primary);
font-size: 1.05rem;
word-break: break-word;
}

@media (max-width: 600px) {
.feedback-section {
padding: 2rem 0.5rem 1.5rem 0.5rem;
}
.feedback-form input[type="text"],
.feedback-form textarea {
max-width: 100%;
}
.feedback-list {
max-width: 100%;
}
}
Loading