68 lines
2.6 KiB
HTML
68 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Theme Test</title>
|
|
<script type="module" src="../dist_bundle/bundle.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 24px;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
.section {
|
|
margin-bottom: 32px;
|
|
}
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 12px;
|
|
}
|
|
#theme-toggle {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button id="theme-toggle">Toggle Theme</button>
|
|
|
|
<div class="section">
|
|
<div class="title">Severity Variants</div>
|
|
<div class="grid">
|
|
<upladmin-option-card variant="critical" icon="lucide:AlertCircle" label="Critical" description="Severe impact"></upladmin-option-card>
|
|
<upladmin-option-card variant="major" icon="lucide:AlertTriangle" label="Major" description="Significant impact"></upladmin-option-card>
|
|
<upladmin-option-card variant="minor" icon="lucide:Info" label="Minor" description="Limited impact"></upladmin-option-card>
|
|
<upladmin-option-card variant="maintenance" icon="lucide:Wrench" label="Maintenance" description="Scheduled work" selected></upladmin-option-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="title">Status Variants</div>
|
|
<div class="grid">
|
|
<upladmin-option-card variant="investigating" icon="lucide:Search" label="Investigating" description="Looking into it"></upladmin-option-card>
|
|
<upladmin-option-card variant="identified" icon="lucide:Target" label="Identified" description="Root cause found"></upladmin-option-card>
|
|
<upladmin-option-card variant="monitoring" icon="lucide:Eye" label="Monitoring" description="Fix applied" selected></upladmin-option-card>
|
|
<upladmin-option-card variant="resolved" icon="lucide:CheckCircle" label="Resolved" description="Issue fixed"></upladmin-option-card>
|
|
<upladmin-option-card variant="postmortem" icon="lucide:FileText" label="Postmortem" description="Analysis complete"></upladmin-option-card>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('theme-toggle').addEventListener('click', () => {
|
|
const isDark = document.documentElement.style.colorScheme === 'dark';
|
|
document.documentElement.style.colorScheme = isDark ? 'light' : 'dark';
|
|
document.body.style.background = isDark ? '#ffffff' : '#09090b';
|
|
document.body.style.color = isDark ? '#09090b' : '#fafafa';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|