132 lines
4.6 KiB
HTML
132 lines
4.6 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 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>
|