update

2025-06-30 07:54:17 +00:00
parent f9604263e3
commit 891eb04d11
5 changed files with 716 additions and 5 deletions
--- a/test-footer-subscribe.html
+++ b/test-footer-subscribe.html
@@ -0,0 +1,105 @@
+<!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>