<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Cookie Consent Demo</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind Config for Custom Color -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#32174D',
light: '#4a2b6b',
dark: '#240f3a'
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<!-- Ionicons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<!-- Google Fonts (Inter) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fc;
color: #1f2937;
overflow-x: hidden;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Glassmorphism effect for the banner */
.glass-panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Animation for sliding in/out */
.slide-up {
transform: translateY(0);
opacity: 1;
}
.slide-down {
transform: translateY(150%);
opacity: 0;
}
/* Progress bar animation for auto-clicker visualization */
@keyframes loadProgress {
0% { width: 0%; }
100% { width: 100%; }
}
.progress-bar {
height: 4px;
background-color: #32174D;
width: 0;
transition: width 0.1s linear;
}
.animate-progress {
animation: loadProgress 2s linear forwards;
}
</style>
</head>
<body class="antialiased min-h-screen flex flex-col">
<!-- Navigation -->
<nav class="bg-white shadow-sm border-b border-gray-100 sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-brand rounded-lg flex items-center justify-center text-white">
<ion-icon name="prism-outline"></ion-icon>
</div>
<span class="font-bold text-xl text-brand tracking-tight">PrivacyFlow</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-500 hover:text-brand transition-colors">Features</a>
<a href="#" class="text-gray-500 hover:text-brand transition-colors">Policy</a>
<a href="#" class="text-gray-500 hover:text-brand transition-colors">Contact</a>
</div>
<div class="flex items-center">
<button class="text-brand font-medium hover:bg-purple-50 px-4 py-2 rounded-md transition-colors">Sign In</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section (Placeholder Content) -->
<main class="flex-grow flex items-center justify-center relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-5">
<div class="absolute right-0 top-0 w-1/2 h-full bg-brand transform skew-x-12 translate-x-20"></div>
</div>
<div class="max-w-4xl mx-auto px-4 text-center relative z-10 py-20">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 text-brand text-xs font-semibold uppercase tracking-wide mb-6">
<span class="w-2 h-2 rounded-full bg-brand"></span>
Demo Page
</div>
<h1 class="text-5xl md:text-6xl font-extrabold text-gray-900 tracking-tight mb-6">
Smart <span class="text-brand">Cookie Management</span>
</h1>
<p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
This page demonstrates a minimal, professional cookie consent banner with an automated "Auto-Allow" script running in the background.
</p>
<div class="flex flex-col md:flex-row gap-4 justify-center items-center">
<button onclick="resetConsent()" class="flex items-center gap-2 px-8 py-3 bg-brand hover:bg-brand-light text-white font-medium rounded-lg shadow-lg shadow-purple-900/20 transition-all transform hover:-translate-y-1">
<ion-icon name="refresh-outline" class="text-xl"></ion-icon>
Reset & Reload Demo
</button>
<div id="status-indicator" class="text-sm text-gray-500 font-mono bg-white px-4 py-3 rounded border border-gray-200 shadow-sm">
Status: Waiting for banner...
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-100 py-8">
<div class="max-w-7xl mx-auto px-4 text-center text-gray-400 text-sm">
© 2023 PrivacyFlow Demo. All rights reserved.
</div>
</footer>
<!-- COOKIE BANNER COMPONENT -->
<div id="cookie-banner" class="fixed bottom-6 right-6 max-w-md w-full glass-panel rounded-xl shadow-2xl z-50 transform transition-all duration-700 ease-out slide-down hidden sm:block border border-gray-200">
<!-- Loading bar to visualize the auto-click -->
<div id="auto-click-progress" class="progress-bar rounded-t-xl"></div>
<div class="p-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 text-brand text-3xl bg-purple-50 p-2 rounded-full">
<ion-icon name="cookie-outline"></ion-icon>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-gray-900 mb-1">We value your privacy</h3>
<p class="text-sm text-gray-600 leading-relaxed mb-4">
We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.
<a href="#" class="text-brand underline hover:text-brand-light">Read Policy</a>.
</p>
<div class="flex flex-col sm:flex-row gap-3">
<button id="btn-accept" class="flex-1 bg-brand hover:bg-brand-light text-white text-sm font-medium py-2.5 px-4 rounded-lg transition-colors shadow-md flex justify-center items-center gap-2">
Accept All
</button>
<button id="btn-decline" class="flex-1 bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 text-sm font-medium py-2.5 px-4 rounded-lg transition-colors">
Decline
</button>
</div>
</div>
<button onclick="closeBanner()" class="text-gray-400 hover:text-gray-600 transition-colors">
<ion-icon name="close-outline" class="text-xl"></ion-icon>
</button>
</div>
<!-- Simulated Auto-Clicker Message -->
<div class="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
<span class="flex items-center gap-1">
<ion-icon name="flash-outline" class="text-brand"></ion-icon>
Auto-accept enabled
</span>
<span id="countdown-timer">2s</span>
</div>
</div>
</div>
<!-- Mobile Sticky Banner Variation (simpler) -->
<div id="cookie-banner-mobile" class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] z-50 transform transition-all duration-500 translate-y-full sm:hidden p-4">
<div class="flex flex-col gap-3">
<div class="flex items-center gap-2 mb-1">
<ion-icon name="cookie" class="text-brand text-xl"></ion-icon>
<span class="font-semibold text-gray-900">Cookie Policy</span>
</div>
<p class="text-xs text-gray-600">
We use cookies to ensure you get the best experience on our website.
</p>
<div class="flex gap-2 mt-1">
<button id="btn-accept-mobile" class="flex-1 bg-brand text-white text-sm font-medium py-2 rounded-md">Accept</button>
<button onclick="closeBanner()" class="flex-1 bg-gray-100 text-gray-700 text-sm font-medium py-2 rounded-md">Close</button>
</div>
</div>
</div>
<!-- JavaScript Logic -->
<script>
// Elements
const bannerDesktop = document.getElementById('cookie-banner');
const bannerMobile = document.getElementById('cookie-banner-mobile');
const acceptBtn = document.getElementById('btn-accept');
const acceptBtnMobile = document.getElementById('btn-accept-mobile');
const declineBtn = document.getElementById('btn-decline');
const statusIndicator = document.getElementById('status-indicator');
const progressBar = document.getElementById('auto-click-progress');
const timerDisplay = document.getElementById('countdown-timer');
// Constants
const STORAGE_KEY = 'cookie_consent_status';
const AUTO_CLICK_DELAY = 2000; // 2 seconds delay before auto-clicking
// --- Main Logic ---
window.addEventListener('load', () => {
// 1. Check if user has already consented
if (!hasConsented()) {
// 2. If not, show the banner after a brief delay for smooth UX
setTimeout(() => {
showBanner();
// 3. START THE AUTO CLICKER SEQUENCE
initiateAutoClicker();
}, 500);
} else {
statusIndicator.innerText = "Status: Cookies already accepted.";
statusIndicator.classList.add('text-green-600', 'bg-green-50', 'border-green-200');
}
});
// --- Helper Functions ---
function hasConsented() {
return localStorage.getItem(STORAGE_KEY) === 'accepted';
}
function showBanner() {
// Remove hidden classes, add visible classes
bannerDesktop.classList.remove('hidden', 'slide-down');
bannerDesktop.classList.add('slide-up');
// Mobile logic
bannerMobile.classList.remove('translate-y-full');
statusIndicator.innerText = "Status: Banner Visible. Initializing Auto-Clicker...";
}
function closeBanner() {
// Animate out
bannerDesktop.classList.remove('slide-up');
bannerDesktop.classList.add('slide-down');
bannerMobile.classList.add('translate-y-full');
// Remove from DOM flow after animation
setTimeout(() => {
bannerDesktop.classList.add('hidden');
}, 700);
}
function handleAccept() {
// Save consent
localStorage.setItem(STORAGE_KEY, 'accepted');
// Visual feedback
acceptBtn.innerHTML = `<ion-icon name="checkmark-circle"></ion-icon> Accepted`;
acceptBtn.classList.add('bg-green-600');
acceptBtnMobile.innerText = "Accepted";
acceptBtnMobile.classList.add('bg-green-600');
statusIndicator.innerText = "Status: Auto-Click Successful. Cookies Accepted.";
statusIndicator.classList.add('text-green-600', 'font-bold');
// Close banner after short delay
setTimeout(closeBanner, 600);
}
function handleDecline() {
localStorage.setItem(STORAGE_KEY, 'declined');
closeBanner();
statusIndicator.innerText = "Status: Cookies Declined.";
}
// --- The "Auto Allow" Logic ---
function initiateAutoClicker() {
// Start visual progress bar
progressBar.classList.add('animate-progress');
let timeLeft = AUTO_CLICK_DELAY / 1000;
// Visual Countdown
const timerInterval = setInterval(() => {
timeLeft--;
if(timeLeft >= 0) timerDisplay.innerText = timeLeft + 's';
}, 1000);
// The actual "Click" trigger
setTimeout(() => {
clearInterval(timerInterval);
// Programmatically trigger the click event
// This simulates a user clicking the button
acceptBtn.click();
// Also trigger mobile if visible
if(window.innerWidth < 640) {
acceptBtnMobile.click();
}
}, AUTO_CLICK_DELAY);
}
// --- Event Listeners ---
acceptBtn.addEventListener('click', handleAccept);
acceptBtnMobile.addEventListener('click', handleAccept);
declineBtn.addEventListener('click', handleDecline);
// Demo Reset Function
function resetConsent() {
localStorage.removeItem(STORAGE_KEY);
location.reload();
}
</script>
</body>
</html>
No comments yet. Be the first!