105 lines
3.0 KiB
HTML
105 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Footer Subscribe Button Test</title>
|
||
|
|
<script type="module" src="./dist_bundle/bundle.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
|
|
background: #fafafa;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
body {
|
||
|
|
background: #09090b;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
main {
|
||
|
|
flex: 1;
|
||
|
|
padding: 40px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
color: #0a0a0a;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
h1 {
|
||
|
|
color: #fafafa;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.demo-section {
|
||
|
|
margin-top: auto;
|
||
|
|
}
|
||
|
|
.comparison {
|
||
|
|
display: flex;
|
||
|
|
gap: 40px;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 40px 0;
|
||
|
|
}
|
||
|
|
.example {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.example h3 {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.example h3 {
|
||
|
|
color: #a1a1aa;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<h1>Footer Subscribe Button - Fixed Layout</h1>
|
||
|
|
<p>The subscriber count is now displayed below the button instead of inside it:</p>
|
||
|
|
|
||
|
|
<div class="comparison">
|
||
|
|
<div class="example">
|
||
|
|
<h3>Without Subscribers</h3>
|
||
|
|
<p>Button appears alone when subscriber count is 0</p>
|
||
|
|
</div>
|
||
|
|
<div class="example">
|
||
|
|
<h3>With Subscribers</h3>
|
||
|
|
<p>Count appears below the button as secondary text</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<upl-statuspage-footer
|
||
|
|
id="footer1"
|
||
|
|
company-name="Example Corp"
|
||
|
|
enable-subscribe="true"
|
||
|
|
subscriber-count="1234"
|
||
|
|
></upl-statuspage-footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const footer = document.getElementById('footer1');
|
||
|
|
|
||
|
|
footer.addEventListener('subscribeClick', () => {
|
||
|
|
alert('Subscribe button clicked! The subscriber count is displayed separately below the button.');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Demonstrate different subscriber counts
|
||
|
|
let counts = [0, 42, 1234, 50000];
|
||
|
|
let currentIndex = 0;
|
||
|
|
|
||
|
|
setInterval(() => {
|
||
|
|
currentIndex = (currentIndex + 1) % counts.length;
|
||
|
|
footer.subscriberCount = counts[currentIndex];
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|