Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SmartCookie AI - Automated Cookie Handling</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6c63ff; | |
| --primary-dark: #564fd8; | |
| --secondary: #f8f9fa; | |
| --dark: #212529; | |
| --light: #ffffff; | |
| --gray: #6c757d; | |
| --success: #28a745; | |
| --danger: #dc3545; | |
| --warning: #ffc107; | |
| --border-radius: 8px; | |
| --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--secondary); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| /* Cookie Banner Styles */ | |
| .cookie-banner { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 95%; | |
| max-width: 600px; | |
| background-color: var(--light); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| padding: 20px; | |
| z-index: 1000; | |
| display: none; | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .cookie-banner.active { | |
| display: block; | |
| opacity: 1; | |
| animation: slideUp 0.5s ease forwards; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translate(-50%, 20px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translate(-50%, 0); | |
| opacity: 1; | |
| } | |
| } | |
| .cookie-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 15px; | |
| } | |
| .cookie-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: var(--dark); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .cookie-title i { | |
| color: var(--primary); | |
| font-size: 1.4rem; | |
| } | |
| .cookie-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.2rem; | |
| color: var(--gray); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .cookie-close:hover { | |
| color: var(--danger); | |
| } | |
| .cookie-message { | |
| margin-bottom: 20px; | |
| color: var(--gray); | |
| font-size: 0.95rem; | |
| } | |
| .cookie-buttons { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .cookie-btn { | |
| padding: 10px 20px; | |
| border-radius: var(--border-radius); | |
| border: none; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| flex: 1; | |
| min-width: 120px; | |
| text-align: center; | |
| } | |
| .cookie-btn-primary { | |
| background-color: var(--primary); | |
| color: var(--light); | |
| } | |
| .cookie-btn-primary:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| .cookie-btn-secondary { | |
| background-color: transparent; | |
| color: var(--primary); | |
| border: 1px solid var(--primary); | |
| } | |
| .cookie-btn-secondary:hover { | |
| background-color: rgba(108, 99, 255, 0.1); | |
| } | |
| .cookie-btn-optional { | |
| background-color: var(--secondary); | |
| color: var(--dark); | |
| } | |
| .cookie-btn-optional:hover { | |
| background-color: rgba(33, 37, 41, 0.1); | |
| } | |
| /* Cookie Preferences Modal */ | |
| .cookie-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1100; | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .cookie-modal.active { | |
| display: flex; | |
| opacity: 1; | |
| } | |
| .cookie-modal-content { | |
| background-color: var(--light); | |
| border-radius: var(--border-radius); | |
| width: 95%; | |
| max-width: 800px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| padding: 30px; | |
| position: relative; | |
| animation: modalFadeIn 0.3s ease forwards; | |
| } | |
| @keyframes modalFadeIn { | |
| from { | |
| transform: translateY(-20px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .modal-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| color: var(--gray); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .modal-close:hover { | |
| color: var(--danger); | |
| } | |
| .modal-body { | |
| margin-bottom: 25px; | |
| } | |
| .cookie-categories { | |
| margin-bottom: 25px; | |
| } | |
| .category-item { | |
| padding: 15px; | |
| border-radius: var(--border-radius); | |
| background-color: var(--secondary); | |
| margin-bottom: 15px; | |
| border-left: 4px solid var(--primary); | |
| } | |
| .category-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| } | |
| .category-name { | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .category-toggle { | |
| position: relative; | |
| width: 50px; | |
| height: 26px; | |
| } | |
| .category-toggle input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .category-toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .category-toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| .category-toggle input:checked + .category-toggle-slider { | |
| background-color: var(--primary); | |
| } | |
| .category-toggle input:checked + .category-toggle-slider:before { | |
| transform: translateX(24px); | |
| } | |
| .category-description { | |
| font-size: 0.9rem; | |
| color: var(--gray); | |
| margin-bottom: 10px; | |
| } | |
| .category-required { | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| font-style: italic; | |
| } | |
| .ai-suggestion { | |
| background-color: rgba(108, 99, 255, 0.1); | |
| padding: 15px; | |
| border-radius: var(--border-radius); | |
| margin-bottom: 20px; | |
| border-left: 4px solid var(--primary); | |
| } | |
| .ai-suggestion-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .ai-suggestion-title { | |
| font-weight: 600; | |
| margin-left: 10px; | |
| color: var(--primary); | |
| } | |
| .ai-suggestion-text { | |
| font-size: 0.9rem; | |
| color: var(--dark); | |
| } | |
| .ai-thumb-container { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-top: 15px; | |
| } | |
| .ai-thumb-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 10px 15px; | |
| border-radius: var(--border-radius); | |
| transition: var(--transition); | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| } | |
| .ai-thumb-btn:hover { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| .ai-thumb-btn i { | |
| font-size: 1.5rem; | |
| margin-bottom: 5px; | |
| } | |
| .ai-thumb-btn.up i { | |
| color: var(--success); | |
| } | |
| .ai-thumb-btn.down i { | |
| color: var(--danger); | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| } | |
| /* Demo Content */ | |
| .demo-content { | |
| padding: 40px 20px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .demo-header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .demo-title { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| color: var(--primary); | |
| } | |
| .demo-subtitle { | |
| font-size: 1.1rem; | |
| color: var(--gray); | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| } | |
| .feature-card { | |
| background-color: var(--light); | |
| border-radius: var(--border-radius); | |
| padding: 25px; | |
| box-shadow: var(--box-shadow); | |
| transition: var(--transition); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .feature-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 10px; | |
| color: var(--dark); | |
| } | |
| .feature-desc { | |
| color: var(--gray); | |
| font-size: 0.95rem; | |
| } | |
| @media (max-width: 768px) { | |
| .cookie-buttons { | |
| flex-direction: column; | |
| } | |
| .cookie-btn { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Demo Content --> | |
| <div class="demo-content"> | |
| <div class="demo-header"> | |
| <h1 class="demo-title">SmartCookie AI</h1> | |
| <p class="demo-subtitle">An intelligent cookie consent management system that learns your preferences and automatically handles cookies on websites you visit.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="feature-title">AI-Powered Decisions</h3> | |
| <p class="feature-desc">Our AI learns from your preferences over time to automatically handle cookie consent banners, reducing the need for manual interaction.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="feature-title">Privacy-First Approach</h3> | |
| <p class="feature-desc">We respect your privacy. Our system works locally in your browser and doesn't collect your browsing data.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <h3 class="feature-title">Granular Control</h3> | |
| <p class="feature-desc">Fine-tune your preferences for different types of cookies: essential, performance, functional, marketing, and more.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <h3 class="feature-title">Continuous Learning</h3> | |
| <p class="feature-desc">The more you use it, the smarter it gets. You can provide feedback to improve its decision-making over time.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-globe-europe"></i> | |
| </div> | |
| <h3 class="feature-title">GDPR & CCPA Compliant</h3> | |
| <p class="feature-desc">Helps websites you visit comply with privacy regulations while respecting your choices automatically.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-eye-slash"></i> | |
| </div> | |
| <h3 class="feature-title">Reduced Banner Fatigue</h3> | |
| <p class="feature-desc">No more annoying cookie banners interrupting your browsing experience on every website.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cookie Banner --> | |
| <div class="cookie-banner"> | |
| <div class="cookie-header"> | |
| <div class="cookie-title"> | |
| <i class="fas fa-cookie-bite"></i> | |
| <span>Your Privacy Matters</span> | |
| </div> | |
| <button class="cookie-close" aria-label="Close cookie banner"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="cookie-message"> | |
| We use cookies and similar technologies to provide a better experience and analyze site usage. | |
| Our AI assistant can help manage these preferences for you based on your past choices. | |
| </div> | |
| <div class="cookie-buttons"> | |
| <button class="cookie-btn cookie-btn-primary" id="accept-recommended"> | |
| Accept Recommended | |
| </button> | |
| <button class="cookie-btn cookie-btn-secondary" id="preferences"> | |
| Customize Preferences | |
| </button> | |
| <button class="cookie-btn cookie-btn-optional" id="accept-necessary"> | |
| Accept Only Necessary | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Cookie Preferences Modal --> | |
| <div class="cookie-modal"> | |
| <div class="cookie-modal-content"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">Cookie Preferences</h2> | |
| <button class="modal-close" aria-label="Close modal"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="ai-suggestion"> | |
| <div class="ai-suggestion-header"> | |
| <i class="fas fa-robot"></i> | |
| <span class="ai-suggestion-title">SmartCookie AI Suggestion</span> | |
| </div> | |
| <p class="ai-suggestion-text"> | |
| Based on your previous choices across websites, we recommend accepting essential and performance cookies while rejecting marketing cookies. This balances functionality with privacy. Would you like to apply these recommendations? | |
| </p> | |
| <div class="ai-thumb-container"> | |
| <button class="ai-thumb-btn up"> | |
| <i class="fas fa-thumbs-up"></i> | |
| <span>Helpful</span> | |
| </button> | |
| <button class="ai-thumb-btn down"> | |
| <i class="fas fa-thumbs-down"></i> | |
| <span>Not Helpful</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="cookie-categories"> | |
| <div class="category-item"> | |
| <div class="category-header"> | |
| <span class="category-name">Essential Cookies</span> | |
| <label class="category-toggle"> | |
| <input type="checkbox" checked disabled> | |
| <span class="category-toggle-slider"></span> | |
| </label> | |
| </div> | |
| <p class="category-description"> | |
| These cookies are necessary for basic website functionality and cannot be disabled. They don't store personally identifiable information. | |
| </p> | |
| <p class="category-required">Required for site to work</p> | |
| </div> | |
| <div class="category-item"> | |
| <div class="category-header"> | |
| <span class="category-name">Performance Cookies</span> | |
| <label class="category-toggle"> | |
| <input type="checkbox" checked> | |
| <span class="category-toggle-slider"></span> | |
| </label> | |
| </div> | |
| <p class="category-description"> | |
| Help us understand how visitors interact with the website by collecting reporting information anonymously. | |
| </p> | |
| </div> | |
| <div class="category-item"> | |
| <div class="category-header"> | |
| <span class="category-name">Functional Cookies</span> | |
| <label class="category-toggle"> | |
| <input type="checkbox" checked> | |
| <span class="category-toggle-slider"></span> | |
| </label> | |
| </div> | |
| <p class="category-description"> | |
| Enable enhanced functionality like remembering your preferences (e.g., language, region) for a better user experience. | |
| </p> | |
| </div> | |
| <div class="category-item"> | |
| <div class="category-header"> | |
| <span class="category-name">Marketing Cookies</span> | |
| <label class="category-toggle"> | |
| <input type="checkbox"> | |
| <span class="category-toggle-slider"></span> | |
| </label> | |
| </div> | |
| <p class="category-description"> | |
| Used to track visitors across websites to display ads that are relevant and engaging for the individual user. | |
| </p> | |
| </div> | |
| <div class="category-item"> | |
| <div class="category-header"> | |
| <span class="category-name">Analytics Cookies</span> | |
| <label class="category-toggle"> | |
| <input type="checkbox" checked> | |
| <span class="category-toggle-slider"></span> | |
| </label> | |
| </div> | |
| <p class="category-description"> | |
| Allow us to count visits and traffic sources so we can measure and improve site performance. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="cookie-btn cookie-btn-optional" id="reset-preferences"> | |
| Reset to Default | |
| </button> | |
| <button class="cookie-btn cookie-btn-primary" id="save-preferences"> | |
| Save Preferences | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Check if cookie preferences are already set | |
| const cookieConsent = localStorage.getItem('cookieConsent'); | |
| const cookiePrefs = JSON.parse(localStorage.getItem('cookiePrefs') || 'null'); | |
| const banner = document.querySelector('.cookie-banner'); | |
| const modal = document.querySelector('.cookie-modal'); | |
| const closeBannerBtn = document.querySelector('.cookie-close'); | |
| const closeModalBtn = document.querySelector('.modal-close'); | |
| const acceptRecommendedBtn = document.getElementById('accept-recommended'); | |
| const acceptNecessaryBtn = document.getElementById('accept-necessary'); | |
| const preferencesBtn = document.getElementById('preferences'); | |
| const savePrefsBtn = document.getElementById('save-preferences'); | |
| const resetPrefsBtn = document.getElementById('reset-preferences'); | |
| const thumbUpBtn = document.querySelector('.ai-thumb-btn.up'); | |
| const thumbDownBtn = document.querySelector('.ai-thumb-btn.down'); | |
| // Show banner if no consent is recorded | |
| if (!cookieConsent) { | |
| setTimeout(() => { | |
| banner.classList.add('active'); | |
| }, 1000); | |
| } | |
| // Close banner | |
| closeBannerBtn.addEventListener('click', () => { | |
| banner.classList.remove('active'); | |
| }); | |
| // Open preferences modal | |
| preferencesBtn.addEventListener('click', () => { | |
| banner.classList.remove('active'); | |
| modal.classList.add('active'); | |
| }); | |
| // Close modal | |
| closeModalBtn.addEventListener('click', () => { | |
| modal.classList.remove('active'); | |
| }); | |
| // Accept recommended settings (AI-based) | |
| acceptRecommendedBtn.addEventListener('click', () => { | |
| const recommendedPrefs = { | |
| essential: true, | |
| performance: true, | |
| functional: true, | |
| marketing: false, | |
| analytics: true | |
| }; | |
| localStorage.setItem('cookieConsent', 'recommended'); | |
| localStorage.setItem('cookiePrefs', JSON.stringify(recommendedPrefs)); | |
| banner.classList.remove('active'); | |
| showSuccessFeedback(); | |
| }); | |
| // Accept only necessary cookies | |
| acceptNecessaryBtn.addEventListener('click', () => { | |
| const necessaryPrefs = { | |
| essential: true, | |
| performance: false, | |
| functional: false, | |
| marketing: false, | |
| analytics: false | |
| }; | |
| localStorage.setItem('cookieConsent', 'necessary'); | |
| localStorage.setItem('cookiePrefs', JSON.stringify(necessaryPrefs)); | |
| banner.classList.remove('active'); | |
| showSuccessFeedback(); | |
| }); | |
| // Save preferences from modal | |
| savePrefsBtn.addEventListener('click', () => { | |
| const prefs = { | |
| essential: true, // always enabled | |
| performance: document.querySelectorAll('.category-toggle input')[1].checked, | |
| functional: document.querySelectorAll('.category-toggle input')[2].checked, | |
| marketing: document.querySelectorAll('.category-toggle input')[3].checked, | |
| analytics: document.querySelectorAll('.category-toggle input')[4].checked | |
| }; | |
| localStorage.setItem('cookieConsent', 'custom'); | |
| localStorage.setItem('cookiePrefs', JSON.stringify(prefs)); | |
| modal.classList.remove('active'); | |
| showSuccessFeedback(); | |
| }); | |
| // Reset to default preferences | |
| resetPrefsBtn.addEventListener('click', () => { | |
| document.querySelectorAll('.category-toggle input')[1].checked = true; // performance | |
| document.querySelectorAll('.category-toggle input')[2].checked = true; // functional | |
| document.querySelectorAll('.category-toggle input')[3].checked = false; // marketing | |
| document.querySelectorAll('.category-toggle input')[4].checked = true; // analytics | |
| }); | |
| // AI feedback - thumbs up | |
| thumbUpBtn.addEventListener('click', () => { | |
| thumbUpBtn.innerHTML = '<i class="fas fa-check-circle"></i> <span>Thanks for your feedback!</span>'; | |
| thumbDownBtn.style.display = 'none'; | |
| setTimeout(() => { | |
| thumbUpBtn.innerHTML = '<i class="fas fa-thumbs-up"></i> <span>Helpful</span>'; | |
| thumbDownBtn.style.display = 'flex'; | |
| }, 2000); | |
| }); | |
| // AI feedback - thumbs down | |
| thumbDownBtn.addEventListener('click', () => { | |
| thumbDownBtn.innerHTML = '<i class="fas fa-times-circle"></i> <span>We\'ll improve!</span>'; | |
| thumbUpBtn.style.display = 'none'; | |
| setTimeout(() => { | |
| thumbDownBtn.innerHTML = '<i class="fas fa-thumbs-down"></i> <span>Not Helpful</span>'; | |
| thumbUpBtn.style.display = 'flex'; | |
| }, 2000); | |
| }); | |
| // Success feedback animation | |
| function showSuccessFeedback() { | |
| const feedback = document.createElement('div'); | |
| feedback.innerHTML = ` | |
| <div style="position: fixed; bottom: 20px; right: 20px; background: #4CAF50; color: white; padding: 15px 25px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px;"> | |
| <i class="fas fa-check-circle"></i> | |
| <span>Cookie preferences saved successfully!</span> | |
| </div> | |
| `; | |
| document.body.appendChild(feedback); | |
| setTimeout(() => { | |
| feedback.style.transition = 'opacity 0.5s'; | |
| feedback.style.opacity = '0'; | |
| setTimeout(() => { | |
| document.body.removeChild(feedback); | |
| }, 500); | |
| }, 3000); | |
| } | |
| // Detect and handle cookie banners on the page (simplified for demo) | |
| function detectAndHandleCookieBanners() { | |
| // In a real implementation, this would scan the page for common cookie banner patterns | |
| // and automatically handle them based on user preferences | |
| console.log("Scanning for cookie banners..."); | |
| // For this demo, we'll just simulate finding a cookie banner | |
| if (!cookieConsent) return; | |
| const simulatedBanner = document.createElement('div'); | |
| simulatedBanner.style.position = 'fixed'; | |
| simulatedBanner.style.bottom = '0'; | |
| simulatedBanner.style.left = '0'; | |
| simulatedBanner.style.right = '0'; | |
| simulatedBanner.style.padding = '10px'; | |
| simulatedBanner.style.backgroundColor = '#f8f9fa'; | |
| simulatedBanner.style.borderTop = '1px solid #ddd'; | |
| simulatedBanner.style.textAlign = 'center'; | |
| simulatedBanner.style.zIndex = '9999'; | |
| simulatedBanner.innerHTML = ` | |
| <p style="margin-bottom: 10px;">This website uses cookies. SmartCookie AI automatically handled this based on your preferences.</p> | |
| <button style="background: #6c63ff; color: white; border: none; padding: 5px 15px; border-radius: 4px; cursor: pointer;"> | |
| Show Details | |
| </button> | |
| `; | |
| document.body.appendChild(simulatedBanner); | |
| setTimeout(() => { | |
| simulatedBanner.style.opacity = '0'; | |
| setTimeout(() => { | |
| document.body.removeChild(simulatedBanner); | |
| }, 500); | |
| }, 5000); | |
| } | |
| // Run the detection after a delay | |
| setTimeout(detectAndHandleCookieBanners, 3000); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |