update footer
This commit is contained in:
132
test-footer-shadcn.html
Normal file
132
test-footer-shadcn.html
Normal file
@@ -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>
|
||||
@@ -118,10 +118,10 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: ${unsafeCSS(spacing['2xl'])};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
gap: ${unsafeCSS(spacing['2xl'])};
|
||||
}
|
||||
|
||||
.company-info {
|
||||
@@ -131,9 +131,10 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: ${colors.text.primary};
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.company-links {
|
||||
@@ -143,15 +144,15 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: ${colors.text.secondary};
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
font-size: 14px;
|
||||
transition: color 0.15s ease;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: ${colors.text.primary};
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
@@ -161,37 +162,36 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
background: transparent;
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
padding: 8px 16px;
|
||||
height: 36px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: ${colors.background.secondary};
|
||||
border-color: ${colors.border.muted};
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.action-button:active {
|
||||
transform: translateY(0);
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: ${unsafeCSS(spacing.xl)};
|
||||
margin-top: ${unsafeCSS(spacing.xl)};
|
||||
border-top: 1px solid ${colors.border.default};
|
||||
padding-top: ${unsafeCSS(spacing.lg)};
|
||||
margin-top: ${unsafeCSS(spacing.lg)};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
@@ -208,60 +208,62 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease;
|
||||
color: ${colors.text.secondary};
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
opacity: 1;
|
||||
color: ${colors.text.primary};
|
||||
transform: translateY(-1px);
|
||||
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
||||
}
|
||||
|
||||
.social-link svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 14px;
|
||||
color: ${colors.text.secondary};
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 13px;
|
||||
color: ${colors.text.muted};
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
}
|
||||
|
||||
.powered-by {
|
||||
font-size: 13px;
|
||||
color: ${colors.text.muted};
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.powered-by a {
|
||||
color: ${colors.text.secondary};
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.powered-by a:hover {
|
||||
color: ${colors.text.primary};
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.status-update {
|
||||
padding: ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.lg)};
|
||||
background: ${colors.background.muted};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
font-size: 14px;
|
||||
padding: 12px 16px;
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
line-height: 1.6;
|
||||
line-height: 1.5;
|
||||
color: ${cssManager.bdTheme('#4b5563', '#d1d5db')};
|
||||
}
|
||||
|
||||
.language-selector {
|
||||
@@ -348,25 +350,24 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.additional-link {
|
||||
font-size: 14px;
|
||||
color: ${colors.text.secondary};
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.additional-link:hover {
|
||||
color: ${colors.text.primary};
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: ${unsafeCSS(spacing.xl)} ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.md)};
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
grid-template-columns: 1fr;
|
||||
gap: ${unsafeCSS(spacing.xl)};
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
@@ -411,13 +412,16 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
|
||||
${this.offline ? html`
|
||||
<div class="offline-indicator">
|
||||
<span>⚠</span> You are currently offline
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 2V6M6 10H6.01M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
You are currently offline
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${this.latestStatusUpdate ? html`
|
||||
<div class="status-update">
|
||||
<strong>Latest Update:</strong> ${this.latestStatusUpdate}
|
||||
Latest Update: ${this.latestStatusUpdate}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user