Consent cookies

Author: anton-okolelov

docs/index.html

@@ -44,8 +44,10 @@
                 banner.id = 'consent-banner';
                 banner.innerHTML = `
                     <div class="consent-content">
-                        <h3>🍪 We use cookies</h3>
-                        <p>We use cookies and similar technologies to improve website functionality, analyze traffic, and personalize content. You can choose which types of cookies to allow.</p>
+                        <div class="consent-header">
+                            <h3>🍪 We use cookies</h3>
+                            <p>We use cookies and similar technologies to improve website functionality, analyze traffic, and personalize content.</p>
+                        </div>
                         <div class="consent-options">
                             <label>
                                 <input type="checkbox" id="consent-analytics" checked>
@@ -229,115 +231,138 @@ <h3>🍪 We use cookies</h3>
         /* Consent Banner Styles */
         #consent-banner {
             position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0, 0, 0, 0.95);
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 380px;
+            max-width: 90vw;
+            background: rgba(26, 26, 46, 0.85);
             backdrop-filter: blur(10px);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+            border-radius: 12px;
             z-index: 10000;
-            padding: 20px;
+            padding: 14px;
             animation: slideInUp 0.5s ease-out;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
         }
 
         @keyframes slideInUp {
             from {
-                transform: translateY(100%);
+                transform: translate(-50%, 100%);
                 opacity: 0;
             }
             to {
-                transform: translateY(0);
+                transform: translate(-50%, 0);
                 opacity: 1;
             }
         }
 
         .consent-content {
-            max-width: 1200px;
-            margin: 0 auto;
             color: #ffffff;
         }
 
+        .consent-header {
+            margin-bottom: 12px;
+        }
+
         .consent-content h3 {
-            font-size: 1.2rem;
-            margin-bottom: 10px;
-            color: #ffffff;
+            font-size: 0.95rem;
+            margin-bottom: 6px;
+            color: rgba(255, 255, 255, 0.9);
         }
 
         .consent-content p {
-            margin-bottom: 15px;
-            color: #cccccc;
-            font-size: 0.9rem;
+            margin-bottom: 0;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.75rem;
+            line-height: 1.3;
         }
 
         .consent-options {
-            margin-bottom: 20px;
+            margin-bottom: 12px;
         }
 
         .consent-options label {
             display: flex;
-            align-items: center;
-            margin-bottom: 10px;
+            align-items: flex-start;
+            margin-bottom: 6px;
             cursor: pointer;
-            color: #ffffff;
+            color: rgba(255, 255, 255, 0.85);
+            font-size: 0.8rem;
+            line-height: 1.3;
         }
 
         .consent-options input[type="checkbox"] {
-            margin-right: 10px;
-            width: 18px;
-            height: 18px;
+            margin-right: 8px;
+            width: 16px;
+            height: 16px;
             accent-color: #6366f1;
         }
 
         .consent-buttons {
             display: flex;
-            gap: 10px;
+            gap: 8px;
             flex-wrap: wrap;
         }
 
         .btn-primary, .btn-secondary {
-            padding: 10px 20px;
+            padding: 8px 16px;
             border: none;
             border-radius: 6px;
-            font-size: 0.9rem;
+            font-size: 0.8rem;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.2s ease;
         }
 
         .btn-primary {
-            background: #6366f1;
+            background: rgba(139, 92, 246, 0.8);
             color: white;
         }
 
         .btn-primary:hover {
-            background: #5855eb;
+            background: rgba(139, 92, 246, 0.9);
             transform: translateY(-1px);
         }
 
         .btn-secondary {
-            background: rgba(255, 255, 255, 0.1);
-            color: #ffffff;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.08);
+            color: rgba(255, 255, 255, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.15);
         }
 
         .btn-secondary:hover {
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.15);
+            color: rgba(255, 255, 255, 0.9);
             transform: translateY(-1px);
         }
 
         /* Responsive design for consent banner */
         @media (max-width: 768px) {
             #consent-banner {
-                padding: 15px;
+                width: 95vw;
+                padding: 12px;
+                bottom: 10px;
             }
 
             .consent-buttons {
                 flex-direction: column;
+                gap: 6px;
             }
 
             .btn-primary, .btn-secondary {
                 width: 100%;
                 text-align: center;
+                padding: 6px 12px;
+                font-size: 0.75rem;
+            }
+            
+            .consent-content h3 {
+                font-size: 0.85rem;
+            }
+            
+            .consent-content p {
+                font-size: 0.7rem;
             }
         }