From 1267c5079227132ebaec90ccc480d0f58bcc0fca Mon Sep 17 00:00:00 2001
From: ygowthamr <ygowthamr@gmail.com>
Date: Sun, 3 Nov 2024 12:11:10 +0530
Subject: [PATCH] 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 @@
     <link rel="stylesheet" href="Scroll_and_progressbar.css">
   </head>
 <body>
-    <div class="progress-container">
-        <div class="progress-bar" id="progress-bar"></div>
-     </div>
- <!-- Navigation Bar  -->
- <div class="layout-container" style="margin-bottom: 4rem;">
-
-    <header>
-
+    <nav>
 
+        <div class="progress-container">
+            <div class="progress-bar" id="progress-bar"></div>
+        </div>
+        <!-- Navigation Bar  -->
+        <div class="layout-container" style="margin-bottom: 4vh;">
 
-    <div class="logo" >
-     <a href="index.html">
-        <h2>WordWise</h2>
-     </a>
-   </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>
+            <header>
 
-        <a href="contact_us.html">Contact Us</a>
-        <a href="contact_us.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>
+                <div class="logo">
+                    <a href="index.html">
+                        <h2>WordWise</h2>
+                    </a>
+                </div>
+                <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <div class="nav-links1" id="navLinks">
+                    <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-secondary w-100 mb-3">LOGIN</button>
+                        <style>
+                            .btn:hover {
+                                transition: 0.5s ease;
+                            }
+                        </style>
+                        <!-- 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>
+                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
+                        <!-- Link to Signup Page -->
+                        <div class="new">
+                            <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
+                                    here</a></p>
+                        </div>
+                    </form>
+                </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 pattern="[a-zA-Z ]+"
-                        oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
-                        oninput="this.setCustomValidity('')">
-        </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>
-        </div>
-        <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</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>
-  
-  <!-- Forgot Password Modal -->
-  <div id="forgot-password-modal" class="modal">
-    <div class="form-container modal-content">
-      <h2>Forgot Password</h2>
-      <p>Please enter your email address to reset your password.</p>
-  
-      <label for="email">Email Address</label>
-      <input type="email" id="email" placeholder="Enter your email" required />
-  
-      <button class="btn" onclick="submitForgotPassword()">Submit</button>
-      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
-    </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');
-        }
-    }
-  </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;
-    }
-  </style>
-<!-- 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;
-    }
-}
-</script>
+                <!-- 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" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                        </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>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</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>
+                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
+                        <!-- Link to Login Page -->
+                        <div class="new">
+                            <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
+                                    here</a></p>
+                        </div>
+                    </form>
+                </div>
 
+                <!-- Forgot Password Modal -->
+                <div id="forgot-password-modal" class="modal">
+                    <div class="form-container modal-content">
+                        <h2>Forgot Password</h2>
+                        <p>Please enter your email address to reset your password.</p>
 
-<script src="signup.js"></script> <!-- Link to your JavaScript file -->
+                        <label for="email">Email Address</label>
+                        <input type="email" id="email" placeholder="Enter your email" required />
 
+                        <button class="btn" onclick="submitForgotPassword()">Submit</button>
+                        <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+                    </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');
+                        }
+                    }
+                </script>
+
+
+
+                <!-- Styles -->
+                <style>
+                    .form-popup {
+                        .form-popup {
+                            display: none;
+                            /* Hidden by default */
+                            position: fixed;
+                            /* Stay in place */
+                            z-index: 9;
+                            /* Sit on top */
+                            left: 50%;
+                            top: 50%;
+                            transform: translate(-50%, -50%);
+                            /* Center the popup */
+                            width: 100%;
+                            max-width: 500px;
+                            /* Limit width */
+                            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: 10px;
+                        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+                    }
+                    
+                    .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;
+                    }
+                    
+                    .btn-primary:hover {
+                        background-color: #0056b3;
+                    }
+                    
+                    .btn-secondary:hover {
+                        background-color: #6c757d;
+                    }
+                    
+                    .scroll-to-top {
+                        background-color: #0066cc;
+                        /* Button color */
+                        color: white;
+                        /* Text color */
+                        border: none;
+                        /* No border */
+                        border-radius: 5px;
+                        /* Rounded corners */
+                        padding: 10px 15px;
+                        /* Padding for better appearance */
+                        cursor: pointer;
+                        /* Pointer cursor on hover */
+                        margin-top: 10px;
+                        /* Space between the paragraph and button */
+                    }
+                    
+                    .scroll-to-top:hover {
+                        background-color: #005bb5;
+                        /* Darker shade on hover */
+                    }
+                </style>
+
+                <!-- Bootstrap Icons -->
+                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
+                <script src="backend/signup/signup.js"></script>
+                <!-- Link to your JavaScript file -->
+
+                <!-- Theme Switch -->
+                <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>
 
-<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">
+            </header>
         </div>
-    </label>
-    <span id="mode-label"></span>
-    </div>
 
-</header>
-    </div>
+    </nav>
     
     <!--main-->
-  </main>
+  <main>
    <!--mainn-->
-   <div class="about">
+   <div class="about" style="margin-top: 20vh;">
     <div class="privacy-content">
     <h1>Privacy Policy</h1><br>
     <p><strong>Effective Date:</strong> October 2024</p>
@@ -435,6 +400,7 @@ <h2>10. Contact Us</h2>
     Phone: 125-896-485</p>
 </div>
 </div>
+</main>
 <style>
     .privacy-content h1{
         text-align: center;
