117 lines
4.3 KiB
HTML
117 lines
4.3 KiB
HTML
<!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> |