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.

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

Cookie popup added #585

Closed
wants to merge 4 commits into from
Closed

Cookie popup added #585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
97ee3ff
Update index.html
Amulya-B28 Oct 12, 2024
8ac2340
Update style.css
Amulya-B28 Oct 12, 2024
5605909
Create cookiepolicy.html
Amulya-B28 Oct 12, 2024
be75480
Update cookiepolicy.html
Amulya-B28 Oct 12, 2024
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
82 changes: 82 additions & 0 deletions cookiepolicy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie Policy</title>

<style>
body{
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 20px;
}
.box-container{
background-color: white;
border: 1px solid #7e7575;
padding: 30px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
font-size: 14px;
}
h1 {
font-size: 24px;
margin-bottom: 15px;
color: #870d0d;
}

h2 {
font-size: 18px;
margin-bottom: 10px;
color: #870d0d;
}

p {
margin-bottom: 15px;
}

ul {
margin-left: 20px;
}

li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="box-container">
<h1>Cookie Policy</h1>

<p>This Cookie Policy explains how 'BuddyTrail' uses cookies and similar technologies on our website.</p>

<h2>What are Cookies?</h2>
<p>Cookies are small text files that are placed on your device when you visit a website. They help websites remember information about your visit, such as your preferences, language settings, and login details.</p>

<h2>How We Use Cookies</h2>
<p>We use cookies for various purposes, including:</p>
<ul>
<li>Improving your user experience</li>
<li>Analyzing website traffic</li>
<li>Personalizing content and ads</li>
<li>Enabling certain website features</li>
</ul>

<h2>Types of Cookies We Use</h2>
<p>We use different types of cookies, including:</p>
<ul>
<li>Essential cookies: These cookies are necessary for the website to function properly.</li>
<li>Performance cookies: These cookies collect information about how you use our website, such as which pages you visit and how long you spend on them.</li>
<li>Functional cookies: These cookies allow us to remember your preferences, such as your language settings.</li>
<li>Targeting cookies: These cookies are used to deliver relevant ads to you.</li>
</ul>

<h2>Managing Cookies</h2>
<p>You can manage your cookie preferences through your browser settings. You can also choose to delete existing cookies or disable future cookies.</p>

<h2>Changes to Our Cookie Policy</h2>
<p>We may update our Cookie Policy from time to time. Any changes will be posted on this page.</p>

<p>If you have any questions about our Cookie Policy, please contact us at [email protected].</p>
</div>
</body>
</html>
65 changes: 65 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,71 @@ <h1 id="logo">BuddyTrail</h1>
scrollPercent + "%";
});
</script>


<!-- Cookie Consent Section -->
<div id="cookie-popup" class="cookie-container">
<p>We value your privacy</p>
<p>
We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic.
By clicking "Accept All", you consent to our use of cookies.
<a href="cookiepolicy.html">Cookie Policy</a>
</p>
<div class="button-container">
<button id="customize-btn">Customize</button>
<button id="reject-btn">Reject All</button>
<button id="accept-btn">Accept All</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const cookiePopup = document.getElementById("cookie-popup");
const acceptBtn = document.getElementById("accept-btn");
const rejectBtn = document.getElementById("reject-btn");
const customizeBtn = document.getElementById("customize-btn");

// Function to get the value of a cookie
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}

// Function to set a cookie
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // Convert days to milliseconds
const expires = "expires=" + date.toUTCString();
document.cookie = `${name}=${value}; ${expires}; path=/`;
}

// Check if the user consent cookie exists
if (!getCookie("userConsent")) {
cookiePopup.style.display = "block"; // Show popup if no cookie is found
}

// Set the cookie and hide the popup when "Accept All" button is clicked
acceptBtn.addEventListener("click", function () {
setCookie("userConsent", "accepted", 365); // Set cookie to last 1 year
cookiePopup.style.display = "none"; // Hide popup after accepting
});

// Set the cookie and hide the popup when "Reject All" button is clicked
rejectBtn.addEventListener("click", function () {
setCookie("userConsent", "rejected", 365); // Set cookie to last 1 year
cookiePopup.style.display = "none"; // Hide popup after rejecting
});

// Handle Customize button (this can be expanded with further functionality)
customizeBtn.addEventListener("click", function () {
alert("Customization options can be added here.");
});
});
</script>
<!-- Cookie Consent Section -->


<main>

<section class="hero">
Expand Down
65 changes: 65 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2012,3 +2012,68 @@ justify-content: center;
border-radius: 5px;
white-space: nowrap; /* Prevent text from wrapping */
}

/* Styling Cookie Consent Section*/

.cookie-container {
position: fixed;
bottom: 20px;
left: 20px;
background-color: white;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
width: 300px;
height:fit-content;
display: none;
font-size: 8px;
font-weight: 10px;
}

.cookie-container p {
margin: 8px 0;
}

.cookie-container a {
color: #007bff;
text-decoration: none;
font-weight:600;
}

.cookie-container a:hover {
text-decoration: underline;
}

.button-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
}

.button-container button {
padding: 10px 15px;
border: none;
cursor: pointer;
font-size: 10px;
}

#accept-btn {
background-color: #007bff;
color: white;
}

#reject-btn {
background-color: #dc3545;
color: white;
}

#customize-btn {
background-color: #6c757d;
color: white;
}

button:hover {
opacity: 0.9;
}