Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191

2026-02-07 20:32:41 +00:00
commit ed67b7741b
252 changed files with 99814 additions and 0 deletions
--- a/test_usage_banner.html
+++ b/test_usage_banner.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Usage Banner Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            background: #f5f5f5;
+        }
+        
+        .content {
+            padding: 20px;
+            padding-bottom: 80px; /* Space for usage banner */
+        }
+        
+        .composer {
+            background: #fff;
+            border-radius: 14px;
+            border: 1px solid #ddd;
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
+            padding: 14px 16px;
+            position: sticky;
+            bottom: 0;
+            z-index: 5;
+            margin-bottom: 60px;
+        }
+        
+        /* Usage banner styles */
+        #usage-footer {
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 9998;
+            background: #0f172a;
+            color: #f8fafc;
+            padding: 8px 12px;
+            box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
+            font-size: 13px;
+            display: none;
+            overflow: hidden;
+        }
+        
+        @media (max-width: 900px) {
+            .composer {
+                position: static;
+                margin-bottom: 60px;
+            }
+        }
+        
+        @media (max-width: 640px) {
+            .composer {
+                margin-bottom: 60px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="content">
+        <h1>Usage Banner Test</h1>
+        <p>This is test content to ensure the usage banner doesn't overlap.</p>
+        <div style="height: 2000px; background: linear-gradient(to bottom, #fff, #eee);">
+            Scrollable content area
+        </div>
+    </div>
+    
+    <div class="composer">
+        <h3>Composer Area</h3>
+        <p>This should not overlap with the usage banner below.</p>
+    </div>
+    
+    <div id="usage-footer">
+        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:space-between; max-height:60px; overflow:hidden;">
+            <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1; min-width:0;">
+                <div style="min-width:160px; background:#0b1221; border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:8px;">
+                    <div style="display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:4px;">
+                        <strong style="font-size:12px;">Free usage</strong>
+                        <span style="color:#cbd5e1; font-size:11px;">1000 / 5000</span>
+                    </div>
+                    <div style="height:6px; background:rgba(255,255,255,0.07); border-radius:999px; overflow:hidden; margin:4px 0;">
+                        <div style="width:20%; height:100%; background:#34d399;"></div>
+                    </div>
+                    <div style="display:flex; justify-content:space-between; align-items:center; color:#cbd5e1; gap:6px; font-size:11px;">
+                        <span>≈ 4000 usage left</span>
+                        <button style="background:transparent; border:1px solid rgba(255,255,255,0.25); color:#f8fafc; border-radius:6px; padding:2px 6px; cursor:pointer; font-size:11px;">Add boost</button>
+                    </div>
+                </div>
+            </div>
+            <div style="display:flex; align-items:center; gap:8px; color:#cbd5e1; flex-shrink:0; font-size:12px;">
+                <span>Need more? <a href="/pricing" style="color:#a5f3fc; font-weight:700; text-decoration:underline;">Upgrade</a></span>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        // Show the usage banner
+        document.getElementById('usage-footer').style.display = 'block';
+        
+        // Test the Add Boost button
+        document.querySelectorAll('[data-boost]').forEach((btn) => {
+            btn.onclick = () => {
+                alert('Redirecting to pricing page...');
+                // In real implementation: window.location.href = '/pricing';
+            };
+        });
+        
+        // Test the Upgrade link
+        document.querySelector('a[href="/pricing"]').onclick = (e) => {
+            e.preventDefault();
+            alert('Upgrade link clicked - would redirect to /pricing');
+        };
+    </script>
+</body>
+</html>