175 lines
5.7 KiB
HTML
175 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>shadcn-Aligned Spacing 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;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
body {
|
||
|
|
background: #09090b;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.demo-wrapper {
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 24px; /* Using consistent spacing between components */
|
||
|
|
}
|
||
|
|
.spacing-info {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
background: rgba(255, 255, 255, 0.9);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 1px solid #e5e7eb;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 16px;
|
||
|
|
font-size: 13px;
|
||
|
|
max-width: 300px;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.spacing-info {
|
||
|
|
background: rgba(18, 18, 18, 0.9);
|
||
|
|
border-color: #27272a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.spacing-info h3 {
|
||
|
|
margin: 0 0 12px 0;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.spacing-info ul {
|
||
|
|
margin: 0;
|
||
|
|
padding-left: 20px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
.spacing-info code {
|
||
|
|
background: #f3f4f6;
|
||
|
|
padding: 2px 4px;
|
||
|
|
border-radius: 3px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.spacing-info code {
|
||
|
|
background: #27272a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="demo-wrapper">
|
||
|
|
<upl-statuspage-header
|
||
|
|
page-title="CloudFlow"
|
||
|
|
show-report-button="true"
|
||
|
|
show-subscribe-button="true"
|
||
|
|
></upl-statuspage-header>
|
||
|
|
|
||
|
|
<upl-statuspage-pagetitle
|
||
|
|
page-title="Service Status"
|
||
|
|
page-subtitle="Current operational status of CloudFlow Infrastructure services"
|
||
|
|
></upl-statuspage-pagetitle>
|
||
|
|
|
||
|
|
<upl-statuspage-statusbar id="statusbar"></upl-statuspage-statusbar>
|
||
|
|
|
||
|
|
<upl-statuspage-statsgrid
|
||
|
|
current-status="operational"
|
||
|
|
uptime="99.95"
|
||
|
|
avg-response-time="125"
|
||
|
|
total-incidents="2"
|
||
|
|
></upl-statuspage-statsgrid>
|
||
|
|
|
||
|
|
<upl-statuspage-assetsselector id="assets"></upl-statuspage-assetsselector>
|
||
|
|
|
||
|
|
<upl-statuspage-statusdetails id="details"></upl-statuspage-statusdetails>
|
||
|
|
|
||
|
|
<upl-statuspage-statusmonth id="month"></upl-statuspage-statusmonth>
|
||
|
|
|
||
|
|
<upl-statuspage-incidents id="incidents"></upl-statuspage-incidents>
|
||
|
|
|
||
|
|
<upl-statuspage-footer
|
||
|
|
company-name="CloudFlow Infrastructure"
|
||
|
|
enable-subscribe="true"
|
||
|
|
subscriber-count="1234"
|
||
|
|
></upl-statuspage-footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="spacing-info">
|
||
|
|
<h3>shadcn Spacing Improvements</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Page title padding reduced from <code>48px</code> to <code>24px</code></li>
|
||
|
|
<li>Mini-heading padding reduced from <code>16px</code> to <code>8px</code></li>
|
||
|
|
<li>All arbitrary values replaced with spacing scale</li>
|
||
|
|
<li>Consistent <code>24px</code> gap between components</li>
|
||
|
|
<li>More compact, professional layout</li>
|
||
|
|
<li>Follows shadcn's minimal spacing approach</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const statusbar = document.getElementById('statusbar');
|
||
|
|
const assets = document.getElementById('assets');
|
||
|
|
const details = document.getElementById('details');
|
||
|
|
const month = document.getElementById('month');
|
||
|
|
const incidents = document.getElementById('incidents');
|
||
|
|
|
||
|
|
// Configure status bar
|
||
|
|
statusbar.overallStatus = {
|
||
|
|
status: 'operational',
|
||
|
|
message: 'All systems operational',
|
||
|
|
lastUpdated: Date.now()
|
||
|
|
};
|
||
|
|
|
||
|
|
// Configure services
|
||
|
|
const services = [
|
||
|
|
{
|
||
|
|
id: 'api',
|
||
|
|
name: 'API Gateway',
|
||
|
|
displayName: 'API Gateway',
|
||
|
|
currentStatus: 'operational',
|
||
|
|
uptime30d: 99.99,
|
||
|
|
category: 'Core Services',
|
||
|
|
selected: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'database',
|
||
|
|
name: 'Database Cluster',
|
||
|
|
displayName: 'Database Cluster',
|
||
|
|
currentStatus: 'operational',
|
||
|
|
uptime30d: 99.95,
|
||
|
|
category: 'Core Services',
|
||
|
|
selected: true
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
assets.services = services;
|
||
|
|
details.services = services;
|
||
|
|
|
||
|
|
// Configure monthly data
|
||
|
|
month.monthlyData = [{
|
||
|
|
month: '2024-01',
|
||
|
|
days: Array(31).fill(null).map((_, i) => ({
|
||
|
|
date: `2024-01-${String(i + 1).padStart(2, '0')}`,
|
||
|
|
uptime: 100,
|
||
|
|
incidents: 0
|
||
|
|
})),
|
||
|
|
overallUptime: 100,
|
||
|
|
totalIncidents: 0
|
||
|
|
}];
|
||
|
|
|
||
|
|
// Configure incidents
|
||
|
|
incidents.currentIncidents = [];
|
||
|
|
incidents.pastIncidents = [];
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|