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

Implement Cookie Policy Page with Responsive Design and Dark/Light Theme #607

Closed
wants to merge 1 commit into from
Closed

Implement Cookie Policy Page with Responsive Design and Dark/Light Theme #607

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
221 changes: 221 additions & 0 deletions CookiePolicy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cookie Policy - Collect Your Gaming Tools</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
}

/* Navbar */
.navbar {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background-color: #333;
color: #fff;
}

.nav-links {
display: flex;
gap: 20px; /* Space between buttons */
}

.nav-links a, .nav-links button {
color: #fff;
padding: 10px 20px;
background-color: #00bfff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
text-decoration: none;
text-align: center;
}

.nav-links a:hover, .nav-links button:hover {
background-color: #008acc;
}

/* Light Theme */
body.light-theme {
background-color: #f0f0f0;
color: #333;
}

.light-theme .cookie-policy-container {
background-color: #fff;
color: #333;
}

.light-theme footer {
background-color: #f0f0f0;
color: #333;
}

/* Dark Theme */
body.dark-theme {
background-color: #1c1c1c;
color: #f0f0f0;
}

.dark-theme .cookie-policy-container {
background-color: #2b2b2b;
border-radius: 10px;
}

.dark-theme footer {
background-color: #151515;
color: #f0f0f0;
}

/* Cookie Policy Section */
.cookie-policy-container {
max-width: 1200px;
margin: 50px auto;
padding: 20px;
}

.cookie-section {
margin-bottom: 30px;
padding: 20px;
border-radius: 10px;
transition: background-color 0.3s ease-in-out;
}

.cookie-section h2 {
color: #00bfff;
margin-bottom: 10px;
}

.cookie-section:hover {
background-color: rgba(0, 191, 255, 0.1);
}

ul {
list-style-type: square;
padding-left: 20px;
}

ul li {
margin-bottom: 10px;
}

/* Back to Home Button */
.back-home {
text-align: center;
margin-top: 20px;
}

.back-home-btn {
padding: 10px 20px;
background-color: #00bfff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}

.back-home-btn:hover {
background-color: #008acc;
}

/* Footer */
footer {
text-align: center;
padding: 20px;
margin-top: 50px;
border-top: 2px solid #00bfff;
}

footer p {
margin: 0;
}

/* Responsive Styles */
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}

.nav-links {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body class="dark-theme">
<!-- Navbar with Home, About, and Theme Switcher -->
<nav class="navbar">
<div class="nav-links">
<a href="./index.html" class="nav-home">Home</a>
<a href="./aboutus.html" class="nav-about">About US</a>
<button id="theme-switcher" class="theme-btn">Switch Theme</button>
</div>
</nav>

<div class="cookie-policy-container">
<div class="cookie-header">
<h1>Cookie Policy</h1>
</div>

<div class="cookie-section" id="about-cookies">
<h2>What Are Cookies?</h2>
<p>Cookies are small text files stored on your device when you visit a website. They help improve user experience and provide essential features such as user authentication.</p>
</div>

<div class="cookie-section" id="use-cookies">
<h2>How We Use Cookies</h2>
<ul>
<li><strong>Necessary Cookies:</strong> Required for the website to function properly, enabling basic functionalities like page navigation and access to secure areas.</li>
<li><strong>Performance Cookies:</strong> Help us understand how visitors interact with the website by collecting information anonymously to improve the website.</li>
<li><strong>Functionality Cookies:</strong> Remember choices you make (e.g., language preference) to provide a more personalized experience.</li>
<li><strong>Targeting Cookies:</strong> Used to display relevant advertisements and track the effectiveness of marketing campaigns.</li>
</ul>
</div>

<div class="cookie-section" id="manage-cookies">
<h2>Managing Your Cookies</h2>
<p>You can control and manage cookies through your browser settings. Disabling cookies may affect the functionality of this website.</p>
</div>

<div class="cookie-section" id="update-policy">
<h2>Updates to This Cookie Policy</h2>
<p>We may update this Cookie Policy from time to time to reflect changes in legal, regulatory, or operational requirements. Please check this page regularly for updates.</p>
</div>

<!-- Back to Home Button -->
<div class="back-home">
<a href="index.html" class="back-home-btn">Back to Home</a>
</div>
</div>

<!-- Footer -->
<footer>
<p>&copy; 2024 Collect Your Gaming Tools. All rights reserved.</p>
</footer>

<!-- JavaScript for Theme Switching -->
<script>
const themeSwitcher = document.getElementById('theme-switcher');
const body = document.body;

themeSwitcher.addEventListener('click', () => {
body.classList.toggle('dark-theme');
body.classList.toggle('light-theme');
themeSwitcher.textContent = body.classList.contains('dark-theme') ? 'Switch to Light Theme' : 'Switch to Dark Theme';
});
</script>
</body>
</html>
Loading