Skip to content
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.

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

change design of the feedback form to align with the website (Issue #1248) #1658

Closed
wants to merge 7 commits into from
Closed
Changes from 1 commit
Commits
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
Next Next commit
updated givefeedback
arpita-32 committed Oct 30, 2024
commit c1fa30473c74203146dd69f996148a0a6b8ef184
15 changes: 15 additions & 0 deletions .hintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"extends": [
"development"
],
"hints": {
"compat-api/css": [
"default",
{
"ignore": [
"backdrop-filter"
]
}
]
}
}
981 changes: 981 additions & 0 deletions dist/give_feedback.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,981 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="/images/favi.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Feedback Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="./contact_us.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="Scroll_and_progressbar.css" />
<style>
/* Custom popup styles */
.send-btn {
transition: all 0.3s ease;
background-color: #ea5541;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
}

.send-btn:hover {
background-color: #c73f2d;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 350px;
background-color: #fff;
border: none;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 1000;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
}

.popup h3 {
color: #ea5541;
font-size: 24px;
margin: 0 0 15px;
font-weight: 700;
}

.popup p {
color: #555;
font-size: 16px;
margin: 0 0 20px;
line-height: 1.5;
}

.popup button {
background-color: #ea5541;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
float: right;
}

.popup button:hover {
background-color: #c73f2d;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
backdrop-filter: blur(5px);
}
</style>
<!-- Script for Navbar Toggle -->
<script>
function toggleMenu() {
const menu = document.getElementById("nav-menu");
menu.classList.toggle("active");
}
</script>
</head>

<body>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="layout-container" style="margin-bottom: 4rem;">

<header>



<div class="logo">
<a href="index.html">
<div class="logo">
<h2>WordWise</h2>
<p class="logo-tagline">Empowering Words,<br>Inspiring Minds</p>
</div>
</a>
</div>

<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class= "nav-links1">
<a href= "index.html">Home</a>
<a href= "blog.html">Leading Blog</a>
<a href= "start_writing.html">Start Writing</a>
<a href= "category.html">Categories</a>

<a href= "contact_us.html">Contact Us</a>
<a href= "give_feedback.html">Give Feedback</a>
</div>


<div class="dropdown">
<!-- Profile Icon -->
<a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
<i class="fas fa-user-circle"></i>
</a>

<!-- Dropdown Menu -->
<ul class="dropdown-menu" id="dropdownMenu">
<li><a href="#login" onclick="openForm('login')">Login</a></li>
<li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
</ul>
</div>



<!-- Login Form -->
<div class="form-popup" id="loginForm">
<form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
<span class="close-icon" onclick="closeForm('login')">&times;</span>
<h2 class="text-center">Login</h2>
<div class="form-group">
<label for="loginEmail"><b>Email</b></label>
<input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
</div>
<div class="form-group position-relative">
<label for="loginPsw"><b>Password</b></label>
<input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required
minlength="6">
<i class="bi bi-eye eye-icon" id="toggleLoginPassword"
onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
</div>
<div class="forgot">
<a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
<!-- Google Sign-In Button -->
<button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
<img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
Sign in with Google
</button>
</form>
</div>


<!-- Signup Form -->
<div class="form-popup" id="signupForm">
<form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
<span class="close-icon" onclick="closeForm('signup')">&times;</span>
<h2 class="text-center">Signup</h2>
<div class="form-group">
<label for="name"><b>Full Name</b></label>
<input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
</div>
<div class="form-group">
<label for="signupEmail"><b>Email</b></label>
<input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
</div>
<div class="form-group position-relative">
<label for="signupPsw"><b>Password</b></label>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6"
oninput="checkPasswordStrength()">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword"
onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
<div id="passwordStrength" class="strength-meter"></div>
</div>

<div class="form-group position-relative">
<label for="confirmPsw"><b>Confirm Password</b></label>
<input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw"
required minlength="6">
<i class="bi bi-eye eye-icon" id="toggleConfirmPassword"
onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
main
</div>
</div>

<!-- Toggle Password Visibility Script -->
<script>
function togglePasswordVisibility(passwordFieldId, iconId) {
const passwordField = document.getElementById(passwordFieldId);
const togglePassword = document.getElementById(iconId);
if (passwordField.type === 'password') {
passwordField.type = 'text';
togglePassword.classList.remove('bi-eye');
togglePassword.classList.add('bi-eye-slash');
} else {
passwordField.type = 'password';
togglePassword.classList.remove('bi-eye-slash');
togglePassword.classList.add('bi-eye');
}
}
function checkPasswordStrength() {
var strengthMeter = document.getElementById('passwordStrength');
var password = document.getElementById('signupPsw').value;
var strength = 0;

if (password.length >= 6) strength++;
if (password.match(/[a-z]+/)) strength++;
if (password.match(/[A-Z]+/)) strength++;
if (password.match(/[0-9]+/)) strength++;
if (password.match(/[\W]+/)) strength++;

switch (strength) {
case 0:
case 1:
strengthMeter.style.width = '20%';
strengthMeter.style.backgroundColor = 'red';
strengthMeter.textContent = 'Weak';
break;
case 2:
strengthMeter.style.width = '40%';
strengthMeter.style.backgroundColor = 'orange';
strengthMeter.textContent = 'Fair';
break;
case 3:
strengthMeter.style.width = '60%';
strengthMeter.style.backgroundColor = 'yellow';
strengthMeter.textContent = 'Good';
break;
case 4:
strengthMeter.style.width = '80%';
strengthMeter.style.backgroundColor = 'blue';
strengthMeter.textContent = 'Strong';
break;
case 5:
strengthMeter.style.width = '100%';
strengthMeter.style.backgroundColor = 'green';
strengthMeter.textContent = 'Very Strong';
break;
}
}
// Theme switcher functionality
const toggleSwitch = document.querySelector('#checkbox');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}

function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}

toggleSwitch.addEventListener('change', switchTheme);
</script>

<!-- Updated CSS Styles -->
<style>
.form-popup {
display: none;
position: fixed;
z-index: 9;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 500px;
padding: 20px;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
border-radius: 10px;
box-sizing: border-box;
}

.form-container h2 {
margin-bottom: 20px;
color: #333;
}

.form-group {
margin-bottom: 15px;
}

.form-control {
border-radius: 5px;
padding: 12px;
font-size: 16px;
line-height: 1.5;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
width: 100%;
}

.forgot {
text-align: right;
margin-left: 50px;
font-size: 10px;
margin-top: -40px;

}

.btn {
margin-top: 10px;
border-radius: 5px;
}

.eye-icon {
position: absolute;
right: 15px;
top: 38px;
cursor: pointer;
color: #007bff;
}

.close-icon {
font-size: 24px;
cursor: pointer;
float: right;
}

.position-relative {
position: relative;
}

/* Login button jumping issue fix */
.btn-primary {
transition: all 0.3s ease;
/* Smooth transition */
}

.btn-primary:hover {
background-color: #0056b3;
}

.google-btn {
display: flex;
align-items: center;
justify-content: center;
}

.google-logo {
width: 20px;
height: 20px;
margin-right: 10px;
}

.btn-primary:hover {
background-color: #0056b3;
}

.strength-meter {
height: 10px;
width: 0;
transition: width 0.3s;
margin-top: 5px;
text-align: center;
color: white;
font-size: 12px;
}
.star-rating {
text-align: left;
display: flex;
justify-content: flex-start;
}

.star-rating label {
font-size: 25px;
color: #ddd;
cursor: pointer;
}

.star-rating input:checked~label {
color: #f39c12;
}

.star-rating input {
display: none;
}

.submitbtn {
width: 100%;
background-color: #3498db;
color: white;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.submitbtn:hover {
background-color: #2980b9;
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 999;
}

.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
z-index: 1000;
}

#closePopup {
background-color: #3498db;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}

</style>


<script src="signup.js"></script>
<!-- Link to your JavaScript file -->

<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider">
<img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon" />
<img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon"
class="icon moon-icon" />
</div>
</label>
<span id="mode-label"></span>

</div>
</header>
</div>
</nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WordWise - Feedback Form</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
:root {
--primary-color: #3498db;
--hover-color: #2980b9;
--text-color: #333;
--bg-color: #f5f5f5;
--form-bg: #ffffff;
}

/* Light mode variables */
[data-theme="light"] {
--primary-color: #3498db;
--hover-color: #2980b9;
--text-color: #333;
--bg-color: #f5f5f5;
--form-bg: #ffffff;
--nav-bg: #ffffff;
--logo-color: #333;
}

/* Dark mode variables */
[data-theme="dark"] {
--primary-color: #4dabf7;
--hover-color: #339af0;
--text-color: #e9ecef;
--bg-color: #212529;
--form-bg: #343a40;
--nav-bg: #1a1d20;
--logo-color: #ffffff;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
transition: all 0.3s ease;
}

/* Improved Navbar Styling */


.logo {
display: flex;
align-items: center;
gap: 0.5rem;
}

.logo h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: var(--logo-color);
font-weight: 700;
letter-spacing: 0.5px;
}

.logo-tagline {
font-family: 'Montserrat', sans-serif;
font-style: italic;
color: #666;
font-size: 0.9rem;
margin-left: 1rem;
padding-left: 1rem;
border-left: 2px solid var(--primary-color);
line-height: 1.2;
}

/* Theme Switch Styling */
.theme-switch-wrapper {
display: flex;
align-items: center;
}

.theme-switch {
display: inline-block;
position: relative;
width: 60px;
height: 34px;
}

.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: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: var(--primary-color);
}

input:checked + .slider:before {
transform: translateX(26px);
}

/* Form Styling */
.form-container {
max-width: 600px;
margin: 2rem auto;
background: var(--form-bg);
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.form-header {
text-align: center;
margin-bottom: 2.5rem;
}

.form-header h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: #6784f7;
margin-bottom: 0.5rem;
}

.form-header p {
color: #052088;
font-size: 1rem;
}

.form-group {
margin-bottom: 1.8rem;
}

.form-group label {
display: block;
margin-bottom: 0.8rem;
color:#052088;
font-weight: 500;
font-size: 1.1rem;
}
.rating-container label{
color: #052088;
}



.form-group input,
.form-group textarea {
width: 100%;
padding: 2rem;
border: 2px solid #6d6262;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
background-color: var(--form-bg);
color: var(--text-color);
}

.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.submit-btn {
width: 100%;
padding: 1rem;
background-color: #6784f7;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.submit-btn:hover {
background-color: var(--hover-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


/* Change color of selected stars */
.star-rating input[type="radio"]:checked ~ label {
color: #6784f7;
}

/* Hover effect */
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #6784f7;
}


</style>
</head>
<body>


<!-- Main Content -->
<main class="main-content">
<div class="form-container">
<div class="form-header">
<h2>Share Your Feedback</h2>
<p>We value your opinion and would love to hear from you</p>
</div>
<form id="feedbackForm">
<div class="form-group">
<label for="name"><i class="fas fa-user"></i>Name</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>

<div class="form-group">
<label for="email"><i class="fas fa-envelope"></i>Email</label>
<input type="email" id="email" required placeholder="Enter your email">
</div>

<div class="form-group">
<label for="feedback"><i class="fas fa-comment"></i>Your Feedback</label>
<textarea id="feedback" required placeholder="Share your thoughts with us..." maxlength="500"></textarea><br>
<div class="char-count">0/500 characters</div>
</div><br><br><br>

<div class="rating-container">
<label><i class="fas fa-star"></i>Rate your experience</label>
<div class="star-rating">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5"></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4"></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3"></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2"></label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1"></label>
</div>
</div><br><br>

<button type="submit" class="submit-btn">Submit Feedback</button>
</form>
</div>
</main>

<!-- Success Popup -->
<div class="overlay" id="overlay"></div>
<div class="popup" id="popup">
<h3>Thank You!</h3>
<p id="popupMessage"></p>
<button onclick="closePopup()">Close</button>
</div>

<script>
// Character counter
const textarea = document.getElementById('feedback');
const charCount = document.querySelector('.char-count');

textarea.addEventListener('input', () => {
const length = textarea.value.length;
charCount.textContent = `${length}/500 characters`;
});

// Form submission
document.getElementById('feedbackForm').addEventListener('submit', (e) => {
e.preventDefault();

const name = document.getElementById('name').value;
const rating = document.querySelector('input[name="rating"]:checked')?.value || 'Not rated';

document.getElementById('popupMessage').textContent =
`Thank you ${name} for your valuable feedback! ${rating !== 'Not rated' ? `You rated us ${rating} stars.` : ''}`;

document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
});

// Close popup
function closePopup() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('popup').style.display = 'none';
document.getElementById('feedbackForm').reset();
charCount.textContent = '0/500 characters';
}
</script>
</body>
</html>

<!-- footer -->
<footer id="footer">
<div class="footer-container">
<div class="row mb-3 col-3-main">
<div class="col-3">
<div id="about-us">
<h2 class="footer-title secondary-title">About Us</h2>

<div class="secondary-title text-secondary ">
<p class="mt-2 text-lg" style="text-align: left;">
We are a close-knit team of passionate storytellers dedicated to sharing captivating
content with the world.
</p>

<address class="mt-2">
<i class="fas fa-map-marker-alt text-primary"></i>
5 South Main Street Los Angeles, ZZ-9611 USA
</address>

<div class="phone mt-2">
<i class="fas fa-mobile text-primary"></i>
125-896-485
</div>

<div class="email mt-2">
<a href="mailto: dailysupport@gmail.com" style="color: 3B3B58;"><i
class="fas fa-envelope text-primary"></i>
<span>dailysupport@gmail.com</span>
</a>
</div>
<div> <a href="privacy.html" style="color: #520be1e7;">Privacy Policy</a> </div>
<div>
<img
src="https://hits.sh/anshika-26.github.io/WordWise.svg?label=Website%20Views&extraCount=1515&color=30322f&labelColor=F5B3B5"
alt="Web views" style="height: 20px;width: 150px;margin-top: 40px;">
</div>
</div>

</div>
</div>
<div class="col-3">
<h2 class="footer-title secondary-title">Feature Post</h2>

<div class="feature-post">
<div class="flex-item">
<article class="article">
<div class="d-flex" style="align-items: flex-start; ">
<a class="d-flex" href="#">
<img src="./assets/img9.webp" class="object-fit" alt="">
<div class="px-1" style="width: 300px; ">
<a href="#" class="text-title display-2 text-dark">
Embrace the beauty of nature through our enchanting blog, where we
celebrate the wonders of the natural world
</a>
<p class="secondary-title text-secondary "
style="margin-top:3px;margin-left:0px; text-align: left; ">
<span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
</p>
</div>
</a>
</div>
</article>

</div>
<div class="flex-item">
<article class="article">
<div class="d-flex" style="align-items: flex-start; ">
<a class="d-flex" href="#">
<img src="./assets/img1.webp" class="object-fit" alt="">
<div class="px-1" style="width: 300px;">
<a href="#" class="text-title display-2 text-dark">
Embark on unforgettable journeys through our travel blog, where
wanderlust meets inspiration
</a>
<p class="secondary-title text-secondary display-3"
style="margin-top:3px;margin-left:0px; text-align: left;">
<span><i class="far fa-clock text-primary"></i> Wed 05, 2020 </span>
</p>
</div>
</a>
</div>
</article>
</div>
<div class="flex-item">
<article class="article">
<div class="d-flex" style="align-items: flex-start; ">
<a class="d-flex " href="#">
<img src="./assets/img2.webp" class="object-fit" alt="">
<div class="px-1" style="width: 300px;">
<a href="#" class="text-title display-2 text-dark">
Gaming Adventures Unleashed
</a>
<p class="secondary-title text-secondary display-3"
style="margin-top:3px;margin-left:0px; text-align: left;">
<span><i class="far fa-clock text-primary"></i> Wed 02, 2021 </span>
</p>
</div>
</a>
</div>
</article>
</div>
</div>
</div>
<div class="col-3">
<h2 class="footer-title secondary-title">Popular Tags</h2>

<div class="tags">
<div class="d-flex-gap flex-wrap">
<a href="#" class="nav-link btn bg-light " style="font-weight: 400;">Travel</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Food</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Lifestyle</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Techonogy</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Fashion</a>
</div>
</div>

<h2 class="footer-title secondary-title mt-5">Connect with us</h2>

<div class="tags social" id="contact">
<div class="d-flex-gap flex-wrap">
<a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
<a href="https://x.com/" id="twitter" class="nav-link btn bg-light"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.instagram.com/" id="instagram" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
<a href="https://dribbble.com/" id="dribbble" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
<a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github" target="_blank"
class="nav-link btn bg-light"><i class="fa-brands fa-github"></i></a>
</div>
</div>

</div>
</div>


</div>
<!-- the authentication copyright -->
<div class="wordwise-footer">
<div class="wordwise-footer-content">
<p>
&copy; <span id="current-year"></span> WordWise. All rights
reserved.
</p>
</div>
</div>
</footer>
<!-- this script is to display the year in the copyright authentication in the footer -->
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

<script src="./darkMode.js"></script>

<script src="progress_bar.js"></script>

<script src="main.js"></script>

<!-- added script for contact form -->

<script src= "contact_us.js"></script>
<script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script src= "profiledropdown.js"></script>

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>


</body>

</html>
526 changes: 378 additions & 148 deletions give_feedback.html
Original file line number Diff line number Diff line change
@@ -18,12 +18,21 @@
<style>
/* Custom popup styles */
.send-btn {
transition: background-color 0.3s ease;
transition: all 0.3s ease;
background-color: #ea5541;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
}

.send-btn:hover {
background-color: #3498db;
/* Darker shade on hover */
background-color: #c73f2d;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.popup {
@@ -32,46 +41,59 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
width: 350px;
background-color: #fff;
border: 2px solid #ea5541;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: none;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 1000;
border-radius: 5px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
}

.popup h3 {
color: #ea5541;
font-size: 18px;
margin: 0;
font-size: 24px;
margin: 0 0 15px;
font-weight: 700;
}

.popup p {
color: #333;
font-size: 14px;
margin: 10px 0;
color: #555;
font-size: 16px;
margin: 0 0 20px;
line-height: 1.5;
}

.popup button {
background-color: #ea5541;
color: #fff;
border: none;
padding: 8px 16px;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
float: right;
}

.popup button:hover {
background-color: #c73f2d;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
backdrop-filter: blur(5px);
}
</style>
<!-- Script for Navbar Toggle -->
@@ -95,9 +117,13 @@

<div class="logo">
<a href="index.html">
<h2>WordWise</h2>
<div class="logo">
<h2>WordWise</h2>
<p class="logo-tagline">Empowering Words,<br>Inspiring Minds</p>
</div>
</a>
</div>

<div class="hamburger" id="hamburger">
<span></span>
<span></span>
@@ -245,6 +271,28 @@ <h2 class="text-center">Signup</h2>
break;
}
}
// Theme switcher functionality
const toggleSwitch = document.querySelector('#checkbox');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}

function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}

toggleSwitch.addEventListener('change', switchTheme);
</script>

<!-- Updated CSS Styles -->
@@ -426,7 +474,7 @@ <h2 class="text-center">Signup</h2>

<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<input type="checkbox" id="checkbox" />
<div class="slider">
<img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon" />
<img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon"
@@ -439,145 +487,327 @@ <h2 class="text-center">Signup</h2>
</header>
</div>
</nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WordWise - Feedback Form</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
:root {
--primary-color: #3498db;
--hover-color: #2980b9;
--text-color: #333;
--bg-color: #f5f5f5;
--form-bg: #ffffff;
}

/* Light mode variables */
[data-theme="light"] {
--primary-color: #3498db;
--hover-color: #2980b9;
--text-color: #333;
--bg-color: #f5f5f5;
--form-bg: #ffffff;
--nav-bg: #ffffff;
--logo-color: #333;
}

/* Dark mode variables */
[data-theme="dark"] {
--primary-color: #4dabf7;
--hover-color: #339af0;
--text-color: #e9ecef;
--bg-color: #212529;
--form-bg: #343a40;
--nav-bg: #1a1d20;
--logo-color: #ffffff;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
transition: all 0.3s ease;
}

/* Improved Navbar Styling */









<div class="container" style="
max-width: 600px;
margin: 50px auto;
margin-top: 8rem;
padding: 20px;
/* background-color: #f9f9f9; */
background-color: var(--background-color);
border-radius: 10px;
box-shadow: 0 10px 20px var(--text-color);
text-align: center;
">
<h2 style="color: var(--text-color); font-size: 28px; margin-bottom: 10px">
Feedback Form
</h2>
<h2 style="color: var(--text-color); font-size: 24px; margin-bottom: 20px">
Your one feedback is really helpful for us.
</h2>

<form id="contactForm">
<div class="form-group" style="margin-bottom: 15px">
<label for="Name" style="
display: block;
text-align: left;
margin-bottom: 5px;
color: var(--text-color);
font-size: 14px;
margin-left: 5px;
"><i class="fas fa-user"></i>&nbsp;Name</label>
<input type="text" id="Name" placeholder="Enter your Name" name="Name" required style="
width: 100%;
padding: 10px;
font-size: 14px;
border: 2px solid #ddd;
border-radius: 5px;
" />
</div>
<div class="form-group" style="margin-bottom: 15px">
<label for="email2"
style="display: block; text-align: left; margin-bottom: 5px; color: var(--text-color); font-size: 14px; margin-left: 5px;">
<i class="fas fa-envelope"></i>&nbsp;
Email Address
</label>
<input type="email2" id="email2" placeholder="Enter your Email" name="email2" required
style="width: 100%; padding: 10px; font-size: 14px; border: 2px solid #ddd; border-radius: 5px;" />
</div>
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
}

.logo h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: var(--logo-color);
font-weight: 700;
letter-spacing: 0.5px;
}

.logo-tagline {
font-family: 'Montserrat', sans-serif;
font-style: italic;
color: #666;
font-size: 0.9rem;
margin-left: 1rem;
padding-left: 1rem;
border-left: 2px solid var(--primary-color);
line-height: 1.2;
}

/* Theme Switch Styling */
.theme-switch-wrapper {
display: flex;
align-items: center;
}

.theme-switch {
display: inline-block;
position: relative;
width: 60px;
height: 34px;
}

.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: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: var(--primary-color);
}

input:checked + .slider:before {
transform: translateX(26px);
}

/* Form Styling */
.form-container {
max-width: 600px;
margin: 2rem auto;
background: var(--form-bg);
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.form-header {
text-align: center;
margin-bottom: 2.5rem;
}

.form-header h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: #6784f7;
margin-bottom: 0.5rem;
}

.form-header p {
color: #052088;
font-size: 1rem;
}

.form-group {
margin-bottom: 1.8rem;
}

.form-group label {
display: block;
margin-bottom: 0.8rem;
color:#052088;
font-weight: 500;
font-size: 1.1rem;
}
.rating-container label{
color: #052088;
}



.form-group input,
.form-group textarea {
width: 100%;
padding: 2rem;
border: 2px solid #6d6262;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
background-color: var(--form-bg);
color: var(--text-color);
}

.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.submit-btn {
width: 100%;
padding: 1rem;
background-color: #6784f7;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.submit-btn:hover {
background-color: var(--hover-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


<div class="form-group" style="margin-bottom: 15px">
<label for="message" style="
display: block;
text-align: left;
margin-bottom: 5px;
color: var(--text-color);
font-size: 14px;
margin-left: 5px;
">
<i class="fas fa-pen"></i>&nbsp;Feedback</label>
<textarea id="message" name="message" rows="4" placeholder="Go Ahead! We are listening..." required style="
width: 100%;
padding: 10px;
font-size: 14px;
border: 2px solid #ddd;
border-radius: 5px;
"></textarea>
</div>
/* Change color of selected stars */
.star-rating input[type="radio"]:checked ~ label {
color: #6784f7;
}

<div class="form-group">
<label for="rating" style="display:flex;justify-content: flex-start;">Rate Us</label>
<div class="star-rating" aria-label="Rating" role="radiogroup">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5" title="5 stars"></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4" title="4 stars"></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3" title="3 stars"></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2" title="2 stars"></label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1" title="1 star"></label>
</div>
</div>
/* Hover effect */
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #6784f7;
}

<button type="button" onclick="SendEmail(event)" class="submitbtn">
Send
</button>
</form>

<!-- Custom popup -->
</style>
</head>
<body>


<!-- Main Content -->
<main class="main-content">
<div class="form-container">
<div class="form-header">
<h2>Share Your Feedback</h2>
<p>We value your opinion and would love to hear from you</p>
</div>
<form id="feedbackForm">
<div class="form-group">
<label for="name"><i class="fas fa-user"></i>Name</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>

<div class="form-group">
<label for="email"><i class="fas fa-envelope"></i>Email</label>
<input type="email" id="email" required placeholder="Enter your email">
</div>

<div class="form-group">
<label for="feedback"><i class="fas fa-comment"></i>Your Feedback</label>
<textarea id="feedback" required placeholder="Share your thoughts with us..." maxlength="500"></textarea><br>
<div class="char-count">0/500 characters</div>
</div><br><br><br>

<div class="rating-container">
<label><i class="fas fa-star"></i>Rate your experience</label>
<div class="star-rating">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5"></label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4"></label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3"></label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2"></label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1"></label>
</div>
</div><br><br>

<button type="submit" class="submit-btn">Submit Feedback</button>
</form>
</div>
</main>

<!-- Success Popup -->
<div class="overlay" id="overlay"></div>
<div class="popup" id="popupMessage">
<h3>Message Sent</h3>
<p id="feedback-result"></p>
<button id="closePopup">Close</button>
<div class="popup" id="popup">
<h3>Thank You!</h3>
<p id="popupMessage"></p>
<button onclick="closePopup()">Close</button>
</div>
</div>

<script>
const submitBtn = document.querySelector('.submitbtn');
const overlay = document.getElementById('overlay');
const popup = document.getElementById('popupMessage');
const closePopup = document.getElementById('closePopup');
const feedbackResult = document.getElementById('feedback-result');

submitBtn.addEventListener('click', () => {
const name = document.getElementById('Name').value;
const email = document.getElementById('email2').value;
const message = document.getElementById('message').value;
const rating = document.querySelector('input[name="rating"]:checked')?.value;


// Email validation regex
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// Validate email
if (!emailPattern.test(email)) {
alert('Please enter a valid email address.');
return; // Stop execution if email is invalid
}

// Display feedback result in popup
feedbackResult.innerHTML = `Thank you, ${name}!<br>Your feedback: ${message}<br>Rating: ${rating} stars`;

overlay.style.display = 'block';
popup.style.display = 'block';
});

closePopup.addEventListener('click', () => {
overlay.style.display = 'none';
popup.style.display = 'none';
});
</script>
<script>
// Character counter
const textarea = document.getElementById('feedback');
const charCount = document.querySelector('.char-count');

textarea.addEventListener('input', () => {
const length = textarea.value.length;
charCount.textContent = `${length}/500 characters`;
});

// Form submission
document.getElementById('feedbackForm').addEventListener('submit', (e) => {
e.preventDefault();

const name = document.getElementById('name').value;
const rating = document.querySelector('input[name="rating"]:checked')?.value || 'Not rated';

document.getElementById('popupMessage').textContent =
`Thank you ${name} for your valuable feedback! ${rating !== 'Not rated' ? `You rated us ${rating} stars.` : ''}`;

document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
});

// Close popup
function closePopup() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('popup').style.display = 'none';
document.getElementById('feedbackForm').reset();
charCount.textContent = '0/500 characters';
}
</script>
</body>
</html>

<!-- footer -->
<footer id="footer">