update footer

2025-06-30 07:24:15 +00:00
parent df4dd3f539
commit f9604263e3
2 changed files with 195 additions and 59 deletions
--- a/test-footer-shadcn.html
+++ b/test-footer-shadcn.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Footer Component - shadcn Style</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;
+            color: #6b7280;
+        }
+        @media (prefers-color-scheme: dark) {
+            main {
+                color: #a1a1aa;
+            }
+        }
+        .demo-section {
+            margin-top: auto;
+        }
+        h1 {
+            margin-bottom: 20px;
+            color: #0a0a0a;
+        }
+        @media (prefers-color-scheme: dark) {
+            h1 {
+                color: #fafafa;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Footer Component with Full shadcn Styling</h1>
+        <p>The footer below has been fully updated to embrace shadcn design principles:</p>
+        <ul style="text-align: left; max-width: 600px; margin: 20px auto;">
+            <li>Minimal design with subtle borders</li>
+            <li>Consistent spacing and typography</li>
+            <li>No transform effects, only color transitions</li>
+            <li>Flat design with no gradients</li>
+            <li>Proper muted colors for secondary text</li>
+            <li>Clean hover states</li>
+            <li>Simplified social icons in square containers</li>
+            <li>Native-looking form controls</li>
+        </ul>
+    </main>
+
+    <div class="demo-section">
+        <upl-statuspage-footer
+            id="footer1"
+            company-name="Example Corp"
+            legal-url="https://example.com/legal"
+            support-email="support@example.com"
+            status-page-url="https://status.example.com"
+            show-powered-by="true"
+            enable-subscribe="true"
+            show-api-link="true"
+            rss-feed-url="https://status.example.com/rss"
+            api-status-url="https://api.example.com/status"
+            enable-language-selector="true"
+            enable-theme-toggle="true"
+            subscriber-count="1234"
+        ></upl-statuspage-footer>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const footer = document.getElementById('footer1');
+            
+            // Set social links
+            footer.socialLinks = [
+                { platform: 'twitter', url: 'https://twitter.com/example' },
+                { platform: 'github', url: 'https://github.com/example' },
+                { platform: 'linkedin', url: 'https://linkedin.com/company/example' },
+                { platform: 'youtube', url: 'https://youtube.com/example' }
+            ];
+            
+            // Set additional links
+            footer.additionalLinks = [
+                { label: 'API Documentation', url: 'https://docs.example.com' },
+                { label: 'Privacy Policy', url: 'https://example.com/privacy' },
+                { label: 'Terms of Service', url: 'https://example.com/terms' }
+            ];
+            
+            // Set supported languages
+            footer.supportedLanguages = [
+                { code: 'en', name: 'English' },
+                { code: 'de', name: 'Deutsch' },
+                { code: 'fr', name: 'Français' },
+                { code: 'es', name: 'Español' }
+            ];
+            
+            footer.currentLanguage = 'en';
+            footer.lastUpdated = Date.now();
+            footer.currentYear = new Date().getFullYear();
+            
+            // Event listeners
+            footer.addEventListener('subscribeClick', () => {
+                alert('Subscribe clicked - would open subscription form');
+            });
+            
+            footer.addEventListener('reportIssueClick', () => {
+                alert('Report issue clicked - would open issue form');
+            });
+            
+            footer.addEventListener('languageChange', (e) => {
+                console.log('Language changed to:', e.detail.language);
+            });
+            
+            footer.addEventListener('themeToggle', () => {
+                console.log('Theme toggle clicked');
+            });
+        });
+    </script>
+</body>
+</html>