Fullscreen Modal Cookie Banner
Intermediate
An immersive fullscreen modal cookie consent banner with sophisticated backdrop effects, elegant animations, and comprehensive privacy controls for enhanced user engagement and GDPR compliance
Live Preview
Code Implementation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Modal Cookie Banner</title>
<style>
:root {
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--secondary-color: #6366f1;
--success-color: #10b981;
--success-hover: #059669;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--background: #ffffff;
--surface: #f8fafc;
--surface-elevated: #ffffff;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-muted: #9ca3af;
--border-color: #e5e7eb;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--border-radius: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--backdrop-blur: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: var(--text-primary);
line-height: 1.6;
padding: 2rem;
overflow-x: hidden;
position: relative;
}
.demo-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
color: white;
position: relative;
z-index: 1;
}
.demo-container h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.demo-container p {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 2rem;
}
.demo-btn {
padding: 1rem 2rem;
border: none;
border-radius: var(--border-radius-lg);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
font-family: inherit;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.demo-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Fullscreen Modal Backdrop */
.fullscreen-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(var(--backdrop-blur));
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.fullscreen-modal-backdrop.active {
opacity: 1;
visibility: visible;
}
/* Fullscreen Cookie Modal */
.fullscreen-cookie-modal {
width: 100%;
max-width: 900px;
max-height: 90vh;
background: var(--surface-elevated);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-xl);
transform: scale(0.9) translateY(50px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.fullscreen-modal-backdrop.active .fullscreen-cookie-modal {
transform: scale(1) translateY(0);
}
/* Modal Header */
.modal-header {
padding: 2.5rem 2.5rem 2rem;
background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%);
border-bottom: 1px solid var(--border-color);
position: relative;
}
.close-button {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 44px;
height: 44px;
border: none;
background: var(--surface);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: var(--transition-fast);
font-size: 1.5rem;
border: 1px solid var(--border-color);
}
.close-button:hover {
background: var(--border-color);
color: var(--text-primary);
transform: scale(1.1);
}
.modal-title {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.modal-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
animation: pulse 2s ease-in-out infinite;
box-shadow: var(--shadow-md);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.title-content {
flex: 1;
text-align: left;
}
.title-text {
font-size: 2rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.title-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
font-weight: 500;
}
.modal-description {
color: var(--text-secondary);
font-size: 1.1rem;
line-height: 1.7;
max-width: 600px;
}
/* Modal Content */
.modal-content {
flex: 1;
overflow-y: auto;
padding: 0;
scrollbar-width: thin;
scrollbar-color: var(--primary-color) transparent;
}
.modal-content::-webkit-scrollbar {
width: 8px;
}
.modal-content::-webkit-scrollbar-track {
background: var(--surface);
}
.modal-content::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover);
}
/* Privacy Overview */
.privacy-overview {
padding: 2rem 2.5rem;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
border-bottom: 1px solid var(--border-color);
}
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.overview-item {
text-align: center;
padding: 1.5rem;
background: var(--surface-elevated);
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
transition: var(--transition-fast);
}
.overview-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.overview-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: white;
font-size: 1.5rem;
}
.overview-title {
font-weight: 600;
font-size: 1.1rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.overview-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* Cookie Categories */
.cookie-categories {
padding: 2rem 2.5rem;
}
.categories-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.categories-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.cookie-category {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: var(--surface);
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
transition: var(--transition-fast);
}
.cookie-category:hover {
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.category-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.category-info {
flex: 1;
margin-right: 1rem;
}
.category-title {
font-weight: 600;
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.category-badge {
font-size: 0.75rem;
color: var(--text-muted);
background: var(--surface-elevated);
padding: 0.25rem 0.75rem;
border-radius: 12px;
border: 1px solid var(--border-color);
font-weight: 500;
}
.category-description {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
/* Toggle Switch */
.toggle-switch {
position: relative;
width: 64px;
height: 36px;
background: var(--border-color);
border-radius: 18px;
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
border: 2px solid transparent;
}
.toggle-switch.active {
background: linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%);
}
.toggle-switch.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.toggle-switch::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 28px;
height: 28px;
background: white;
border-radius: 50%;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.toggle-switch.active::before {
transform: translateX(28px);
}
.toggle-switch:hover:not(.disabled) {
border-color: var(--primary-color);
transform: scale(1.05);
}
/* Expandable Details */
.expandable-section {
margin-top: 1rem;
}
.expand-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
color: var(--primary-color);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
padding: 0.75rem;
border-radius: var(--border-radius);
width: 100%;
justify-content: flex-start;
}
.expand-toggle:hover {
background: rgba(59, 130, 246, 0.1);
}
.expand-icon {
transition: transform 0.3s ease;
font-size: 0.8rem;
}
.expand-toggle.expanded .expand-icon {
transform: rotate(180deg);
}
.expandable-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.expandable-content.expanded {
max-height: 400px;
}
.cookie-details {
padding: 1rem 0;
}
.cookie-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--surface-elevated);
border-radius: var(--border-radius);
margin-bottom: 0.75rem;
border: 1px solid var(--border-color);
transition: var(--transition-fast);
}
.cookie-item:hover {
box-shadow: var(--shadow-sm);
border-color: var(--primary-color);
}
.cookie-info {
flex: 1;
}
.cookie-name {
font-weight: 600;
font-size: 1rem;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.cookie-purpose {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
}
.cookie-toggle {
width: 48px;
height: 28px;
background: var(--border-color);
border-radius: 14px;
position: relative;
cursor: pointer;
transition: var(--transition);
border: 1px solid var(--border-color);
}
.cookie-toggle.active {
background: var(--primary-color);
}
.cookie-toggle::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
transition: var(--transition);
}
.cookie-toggle.active::before {
transform: translateX(20px);
}
/* Modal Actions */
.modal-actions {
padding: 2rem 2.5rem;
background: var(--surface);
border-top: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 1rem;
}
.actions-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.action-button {
flex: 1;
min-width: 200px;
padding: 1rem 1.5rem;
border: none;
border-radius: var(--border-radius-lg);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.action-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.action-button:hover::before {
left: 100%;
}
.btn-accept {
background: linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%);
color: white;
box-shadow: var(--shadow-md);
}
.btn-accept:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-customize {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
box-shadow: var(--shadow-md);
}
.btn-customize:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-reject {
background: var(--surface-elevated);
color: var(--danger-color);
border: 2px solid var(--danger-color);
}
.btn-reject:hover {
background: var(--danger-color);
color: white;
transform: translateY(-2px);
}
.btn-secondary {
background: var(--surface-elevated);
color: var(--text-secondary);
border: 2px solid var(--border-color);
}
.btn-secondary:hover {
background: var(--border-color);
color: var(--text-primary);
transform: translateY(-2px);
}
/* Loading States */
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: currentColor;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Success Animation */
.success-checkmark {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
stroke-width: 2;
stroke: currentColor;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px currentColor;
animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: currentColor;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px currentColor;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.fullscreen-modal-backdrop {
padding: 1rem;
}
.modal-header {
padding: 2rem 1.5rem 1.5rem;
}
.title-text {
font-size: 1.5rem;
}
.modal-description {
font-size: 1rem;
}
.privacy-overview {
padding: 1.5rem;
}
.overview-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.cookie-categories {
padding: 1.5rem;
}
.modal-actions {
padding: 1.5rem;
}
.actions-row {
flex-direction: column;
}
.action-button {
min-width: auto;
}
}
@media (max-width: 480px) {
body {
padding: 0.5rem;
}
.demo-container h1 {
font-size: 2rem;
}
.fullscreen-modal-backdrop {
padding: 0.5rem;
}
.modal-header {
padding: 1.5rem 1rem 1rem;
}
.privacy-overview {
padding: 1rem;
}
.cookie-categories {
padding: 1rem;
}
.modal-actions {
padding: 1rem;
}
}
/* Animation Variants */
.fade-in {
animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-up {
animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Focus Styles */
.action-button:focus,
.toggle-switch:focus,
.expand-toggle:focus,
.close-button:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
:root {
--border-color: #000000;
--text-secondary: #000000;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<div class="demo-container">
<h1>Fullscreen Modal Design</h1>
<p>Experience the immersive fullscreen modal with sophisticated backdrop effects and comprehensive privacy controls</p>
<button class="demo-btn" onclick="showCookieBanner()">Show Cookie Banner</button>
</div>
<!-- Fullscreen Modal Backdrop -->
<div id="fullscreenModalBackdrop" class="fullscreen-modal-backdrop">
<div class="fullscreen-cookie-modal">
<button class="close-button" onclick="closeBanner()" aria-label="Close banner">×</button>
<div class="modal-header">
<div class="modal-title">
<div class="modal-icon">🍪</div>
<div class="title-content">
<div class="title-text">Cookie Preferences</div>
<div class="title-subtitle">Manage your privacy settings</div>
</div>
</div>
<div class="modal-description">
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. You can customize your preferences below.
</div>
</div>
<div class="modal-content">
<div class="privacy-overview">
<h3 style="margin-bottom: 1rem; color: var(--text-primary); font-size: 1.3rem;">Privacy Overview</h3>
<div class="overview-grid">
<div class="overview-item">
<div class="overview-icon">🔒</div>
<div class="overview-title">Data Protection</div>
<div class="overview-description">Your privacy is our priority. We implement industry-standard security measures.</div>
</div>
<div class="overview-item">
<div class="overview-icon">⚙️</div>
<div class="overview-title">Granular Control</div>
<div class="overview-description">Choose exactly which cookies you want to allow with detailed category controls.</div>
</div>
<div class="overview-item">
<div class="overview-icon">📊</div>
<div class="overview-title">Transparency</div>
<div class="overview-description">Clear information about what data we collect and how we use it.</div>
</div>
<div class="overview-item">
<div class="overview-icon">🌍</div>
<div class="overview-title">GDPR Compliant</div>
<div class="overview-description">Full compliance with European privacy regulations and standards.</div>
</div>
</div>
</div>
<div class="cookie-categories">
<div class="categories-title">
<div class="categories-icon">🍪</div>
Cookie Categories
</div>
<div class="cookie-category">
<div class="category-header">
<div class="category-info">
<div class="category-title">
Strictly Necessary
<span class="category-badge">Always Active</span>
</div>
<div class="category-description">
These cookies are essential for the website to function properly and cannot be disabled.
They are usually set in response to actions made by you which amount to a request for services.
</div>
</div>
<div class="toggle-switch active disabled"></div>
</div>
<div class="expandable-section">
<button class="expand-toggle" data-target="essential-details">
<span>View Details</span>
<span class="expand-icon">▼</span>
</button>
<div id="essential-details" class="expandable-content">
<div class="cookie-details">
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Session Cookie</div>
<div class="cookie-purpose">Maintains your session while browsing the website</div>
</div>
<div class="cookie-toggle active"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Security Token</div>
<div class="cookie-purpose">Protects against cross-site request forgery attacks</div>
</div>
<div class="cookie-toggle active"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Load Balancer</div>
<div class="cookie-purpose">Ensures optimal server performance and availability</div>
</div>
<div class="cookie-toggle active"></div>
</div>
</div>
</div>
</div>
</div>
<div class="cookie-category">
<div class="category-header">
<div class="category-info">
<div class="category-title">
Performance Analytics
<span class="category-badge">4 cookies</span>
</div>
<div class="category-description">
These cookies help us understand how visitors interact with our website by collecting
and reporting information anonymously. This helps us improve our website performance.
</div>
</div>
<div class="toggle-switch" data-category="analytics"></div>
</div>
<div class="expandable-section">
<button class="expand-toggle" data-target="analytics-details">
<span>View Details</span>
<span class="expand-icon">▼</span>
</button>
<div id="analytics-details" class="expandable-content">
<div class="cookie-details">
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Google Analytics</div>
<div class="cookie-purpose">Tracks website usage and performance metrics</div>
</div>
<div class="cookie-toggle" data-cookie="ga"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Hotjar</div>
<div class="cookie-purpose">Records user interactions for UX improvements</div>
</div>
<div class="cookie-toggle" data-cookie="hotjar"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Performance Monitor</div>
<div class="cookie-purpose">Monitors page load times and technical performance</div>
</div>
<div class="cookie-toggle" data-cookie="performance"></div>
</div>
</div>
</div>
</div>
</div>
<div class="cookie-category">
<div class="category-header">
<div class="category-info">
<div class="category-title">
Marketing & Advertising
<span class="category-badge">6 cookies</span>
</div>
<div class="category-description">
These cookies are used to deliver advertisements more relevant to you and your interests.
They may also be used to limit the number of times you see an advertisement.
</div>
</div>
<div class="toggle-switch" data-category="marketing"></div>
</div>
<div class="expandable-section">
<button class="expand-toggle" data-target="marketing-details">
<span>View Details</span>
<span class="expand-icon">▼</span>
</button>
<div id="marketing-details" class="expandable-content">
<div class="cookie-details">
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Facebook Pixel</div>
<div class="cookie-purpose">Tracks conversions and builds custom audiences</div>
</div>
<div class="cookie-toggle" data-cookie="facebook"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Google Ads</div>
<div class="cookie-purpose">Enables remarketing and ad personalization</div>
</div>
<div class="cookie-toggle" data-cookie="google-ads"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">LinkedIn Insight</div>
<div class="cookie-purpose">Provides insights for LinkedIn advertising campaigns</div>
</div>
<div class="cookie-toggle" data-cookie="linkedin"></div>
</div>
</div>
</div>
</div>
</div>
<div class="cookie-category">
<div class="category-header">
<div class="category-info">
<div class="category-title">
Functional Enhancement
<span class="category-badge">3 cookies</span>
</div>
<div class="category-description">
These cookies enable enhanced functionality and personalization, such as videos and live chats.
They may be set by us or by third-party providers.
</div>
</div>
<div class="toggle-switch" data-category="functional"></div>
</div>
<div class="expandable-section">
<button class="expand-toggle" data-target="functional-details">
<span>View Details</span>
<span class="expand-icon">▼</span>
</button>
<div id="functional-details" class="expandable-content">
<div class="cookie-details">
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Language Preference</div>
<div class="cookie-purpose">Remembers your selected language preference</div>
</div>
<div class="cookie-toggle" data-cookie="language"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Theme Preference</div>
<div class="cookie-purpose">Saves your dark/light mode preference</div>
</div>
<div class="cookie-toggle" data-cookie="theme"></div>
</div>
<div class="cookie-item">
<div class="cookie-info">
<div class="cookie-name">Chat Widget</div>
<div class="cookie-purpose">Enables live chat functionality and support</div>
</div>
<div class="cookie-toggle" data-cookie="chat"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-actions">
<div class="actions-row">
<button class="action-button btn-accept" onclick="acceptAllCookies()">Accept All Cookies</button>
<button class="action-button btn-customize" onclick="saveCustomSettings()">Save My Preferences</button>
</div>
<div class="actions-row">
<button class="action-button btn-reject" onclick="rejectOptionalCookies()">Reject Optional</button>
<button class="action-button btn-secondary" onclick="showPrivacyPolicy()">Privacy Policy</button>
</div>
</div>
</div>
</div>
<script>
class FullscreenModalCookieBanner {
constructor(options = {}) {
this.options = {
showAutomatically: true,
showDelay: 2000,
storageKey: 'fullscreen_modal_cookie_consent',
expirationDays: 365,
enableAnimations: true,
backdropBlur: '20px',
onAccept: null,
onReject: null,
onSave: null,
onClose: null,
...options
};
this.banner = document.getElementById('fullscreenModalBackdrop');
this.consent = this.getStoredConsent();
this.isVisible = false;
this.init();
}
init() {
if (this.options.showAutomatically && !this.consent) {
setTimeout(() => this.show(), this.options.showDelay);
}
this.setupEventListeners();
this.loadConfiguration();
this.setupBackdropBlur();
}
setupEventListeners() {
// Toggle switches
document.querySelectorAll('.toggle-switch:not(.disabled)').forEach(toggle => {
toggle.addEventListener('click', () => {
this.toggleSwitch(toggle);
});
});
// Cookie toggles
document.querySelectorAll('.cookie-toggle').forEach(toggle => {
toggle.addEventListener('click', () => {
this.toggleCookieSwitch(toggle);
});
});
// Expandable sections
document.querySelectorAll('.expand-toggle').forEach(button => {
button.addEventListener('click', () => {
this.toggleExpandableSection(button);
});
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (this.isVisible) {
this.handleKeyboardNavigation(e);
}
});
// Backdrop click to close
this.banner.addEventListener('click', (e) => {
if (e.target === this.banner) {
this.close();
}
});
// Button hover effects
document.querySelectorAll('.action-button').forEach(btn => {
btn.addEventListener('mouseenter', () => {
this.createRipple(btn);
});
});
}
setupBackdropBlur() {
document.documentElement.style.setProperty('--backdrop-blur', this.options.backdropBlur);
}
toggleSwitch(toggle) {
if (toggle.classList.contains('disabled')) return;
toggle.classList.toggle('active');
if (this.options.enableAnimations) {
this.animateToggle(toggle);
}
// Update related cookie toggles
const category = toggle.dataset.category;
if (category) {
this.updateCategoryToggles(category, toggle.classList.contains('active'));
}
}
toggleCookieSwitch(toggle) {
toggle.classList.toggle('active');
if (this.options.enableAnimations) {
this.animateToggle(toggle);
}
// Update parent category if needed
this.updateParentCategoryState();
}
updateCategoryToggles(category, enabled) {
const cookieToggles = document.querySelectorAll(`[data-cookie*="${category}"]`);
cookieToggles.forEach(toggle => {
if (enabled) {
toggle.classList.add('active');
} else {
toggle.classList.remove('active');
}
});
}
updateParentCategoryState() {
const categories = ['analytics', 'marketing', 'functional'];
categories.forEach(category => {
const categoryToggle = document.querySelector(`[data-category="${category}"]`);
const cookieToggles = document.querySelectorAll(`[data-cookie*="${category}"]`);
if (categoryToggle && cookieToggles.length > 0) {
const allEnabled = Array.from(cookieToggles).every(toggle =>
toggle.classList.contains('active'));
if (allEnabled) {
categoryToggle.classList.add('active');
} else {
categoryToggle.classList.remove('active');
}
}
});
}
toggleExpandableSection(button) {
const targetId = button.dataset.target;
const content = document.getElementById(targetId);
if (content) {
const isExpanded = content.classList.contains('expanded');
if (isExpanded) {
content.classList.remove('expanded');
button.classList.remove('expanded');
} else {
content.classList.add('expanded');
button.classList.add('expanded');
if (this.options.enableAnimations) {
this.animateExpandableContent(content);
}
}
}
}
animateExpandableContent(content) {
const items = content.querySelectorAll('.cookie-item');
items.forEach((item, index) => {
item.style.opacity = '0';
item.style.transform = 'translateY(10px)';
setTimeout(() => {
item.style.transition = 'all 0.3s ease';
item.style.opacity = '1';
item.style.transform = 'translateY(0)';
}, index * 50);
});
}
animateToggle(toggle) {
toggle.style.transform = 'scale(0.95)';
setTimeout(() => {
toggle.style.transform = 'scale(1)';
}, 150);
// Add pulse effect
const color = toggle.classList.contains('active') ?
'rgba(16, 185, 129, 0.3)' : 'rgba(229, 231, 235, 0.3)';
toggle.style.boxShadow = `0 0 0 8px ${color}`;
setTimeout(() => {
toggle.style.boxShadow = '';
}, 300);
}
handleKeyboardNavigation(e) {
switch (e.key) {
case 'Escape':
this.close();
break;
case 'Tab':
// Let browser handle tab navigation
break;
}
}
createRipple(button) {
if (!this.options.enableAnimations) return;
const ripple = document.createElement('span');
const rect = button.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = '50%';
ripple.style.top = '50%';
ripple.style.transform = 'translate(-50%, -50%) scale(0)';
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.background = 'rgba(255, 255, 255, 0.3)';
ripple.style.pointerEvents = 'none';
ripple.style.animation = 'ripple 0.6s ease-out';
button.style.position = 'relative';
button.style.overflow = 'hidden';
button.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
}
show() {
this.banner.classList.add('active');
this.isVisible = true;
document.body.style.overflow = 'hidden';
if (this.options.enableAnimations) {
this.animateEntrance();
}
}
hide() {
this.banner.classList.remove('active');
this.isVisible = false;
document.body.style.overflow = '';
}
close() {
this.hide();
if (this.options.onClose) {
this.options.onClose();
}
}
animateEntrance() {
const categories = this.banner.querySelectorAll('.cookie-category');
categories.forEach((category, index) => {
category.style.opacity = '0';
category.style.transform = 'translateY(30px)';
setTimeout(() => {
category.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
category.style.opacity = '1';
category.style.transform = 'translateY(0)';
}, index * 100);
});
}
acceptAllCookies() {
const consent = {
essential: true,
analytics: true,
marketing: true,
functional: true,
timestamp: Date.now()
};
this.saveConsent(consent);
this.showSuccessAnimation();
setTimeout(() => {
this.hide();
}, 1500);
if (this.options.onAccept) {
this.options.onAccept(consent);
}
}
rejectOptionalCookies() {
const consent = {
essential: true,
analytics: false,
marketing: false,
functional: false,
timestamp: Date.now()
};
this.saveConsent(consent);
this.hide();
if (this.options.onReject) {
this.options.onReject(consent);
}
}
saveCustomSettings() {
const consent = { timestamp: Date.now() };
// Get category states
consent.essential = true; // Always true
consent.analytics = document.querySelector('[data-category="analytics"]')?.classList.contains('active') || false;
consent.marketing = document.querySelector('[data-category="marketing"]')?.classList.contains('active') || false;
consent.functional = document.querySelector('[data-category="functional"]')?.classList.contains('active') || false;
// Get individual cookie states
const cookieStates = {};
document.querySelectorAll('[data-cookie]').forEach(toggle => {
const cookie = toggle.dataset.cookie;
cookieStates[cookie] = toggle.classList.contains('active');
});
consent.cookies = cookieStates;
this.saveConsent(consent);
this.showSuccessAnimation();
setTimeout(() => {
this.hide();
}, 1500);
if (this.options.onSave) {
this.options.onSave(consent);
}
}
showSuccessAnimation() {
if (!this.options.enableAnimations) return;
const customizeBtn = this.banner.querySelector('.btn-customize');
if (customizeBtn) {
customizeBtn.innerHTML = `
<svg class="success-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark-check" fill="none" d="m14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
Preferences Saved
`;
customizeBtn.style.background = 'linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%)';
}
}
loadConfiguration() {
if (this.consent) {
// Load category states
Object.entries(this.consent).forEach(([key, value]) => {
if (typeof value === 'boolean') {
const toggle = document.querySelector(`[data-category="${key}"]`);
if (toggle && !toggle.classList.contains('disabled')) {
if (value) {
toggle.classList.add('active');
} else {
toggle.classList.remove('active');
}
}
}
});
// Load individual cookie states
if (this.consent.cookies) {
Object.entries(this.consent.cookies).forEach(([cookie, enabled]) => {
const toggle = document.querySelector(`[data-cookie="${cookie}"]`);
if (toggle) {
if (enabled) {
toggle.classList.add('active');
} else {
toggle.classList.remove('active');
}
}
});
}
}
}
saveConsent(consent) {
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + this.options.expirationDays);
const consentData = {
...consent,
expiration: expirationDate.getTime()
};
localStorage.setItem(this.options.storageKey, JSON.stringify(consentData));
this.consent = consent;
}
getStoredConsent() {
try {
const stored = localStorage.getItem(this.options.storageKey);
if (stored) {
const data = JSON.parse(stored);
if (data.expiration && Date.now() < data.expiration) {
return data;
} else {
localStorage.removeItem(this.options.storageKey);
}
}
} catch (e) {
console.error('Error reading cookie consent:', e);
}
return null;
}
reset() {
localStorage.removeItem(this.options.storageKey);
this.consent = null;
this.show();
}
getConsent() {
return this.consent;
}
setBackdropBlur(amount) {
this.options.backdropBlur = amount;
this.setupBackdropBlur();
}
enableAnimations(enabled) {
this.options.enableAnimations = enabled;
}
updateTheme(theme) {
const themes = {
light: {
'--background': '#ffffff',
'--surface': '#f8fafc',
'--surface-elevated': '#ffffff',
'--text-primary': '#1f2937',
'--text-secondary': '#6b7280'
},
dark: {
'--background': '#1f2937',
'--surface': '#374151',
'--surface-elevated': '#4b5563',
'--text-primary': '#f9fafb',
'--text-secondary': '#d1d5db'
}
};
if (themes[theme]) {
Object.entries(themes[theme]).forEach(([property, value]) => {
document.documentElement.style.setProperty(property, value);
});
}
}
}
// Add CSS for ripple animation
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
`;
document.head.appendChild(style);
// Initialize the banner
const cookieBanner = new FullscreenModalCookieBanner({
backdropBlur: '20px',
enableAnimations: true,
onAccept: (consent) => {
console.log('Cookies accepted:', consent);
// Initialize analytics, marketing, etc.
},
onReject: (consent) => {
console.log('Optional cookies rejected:', consent);
// Load only essential scripts
},
onSave: (consent) => {
console.log('Custom settings saved:', consent);
// Load scripts based on user preferences
},
onClose: () => {
console.log('Banner closed without action');
}
});
// Global functions for demo
function showCookieBanner() {
cookieBanner.show();
}
function closeBanner() {
cookieBanner.close();
}
function acceptAllCookies() {
cookieBanner.acceptAllCookies();
}
function rejectOptionalCookies() {
cookieBanner.rejectOptionalCookies();
}
function saveCustomSettings() {
cookieBanner.saveCustomSettings();
}
function showPrivacyPolicy() {
window.open('/privacy-policy', '_blank');
}
</script>
</body>
</html>