84 lines
2.6 KiB
HTML
84 lines
2.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>Demo Pages Without Banners</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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.page-selector {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
z-index: 100;
|
||
|
|
background: white;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.page-selector {
|
||
|
|
background: #18181b;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="page-selector">
|
||
|
|
<label for="demoSelect">Select Demo:</label>
|
||
|
|
<select id="demoSelect">
|
||
|
|
<option value="demo">Main Demo (Degraded)</option>
|
||
|
|
<option value="allgreen">All Green</option>
|
||
|
|
<option value="outage">Major Outage</option>
|
||
|
|
<option value="maintenance">Maintenance</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="demoContainer"></div>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import { statuspageDemo } from './dist_ts_web/pages/statuspage-demo.js';
|
||
|
|
import { statuspageAllgreen } from './dist_ts_web/pages/statuspage-allgreen.js';
|
||
|
|
import { statuspageOutage } from './dist_ts_web/pages/statuspage-outage.js';
|
||
|
|
import { statuspageMaintenance } from './dist_ts_web/pages/statuspage-maintenance.js';
|
||
|
|
|
||
|
|
const demoContainer = document.getElementById('demoContainer');
|
||
|
|
const demoSelect = document.getElementById('demoSelect');
|
||
|
|
|
||
|
|
const demos = {
|
||
|
|
demo: statuspageDemo,
|
||
|
|
allgreen: statuspageAllgreen,
|
||
|
|
outage: statuspageOutage,
|
||
|
|
maintenance: statuspageMaintenance
|
||
|
|
};
|
||
|
|
|
||
|
|
function loadDemo(demoName) {
|
||
|
|
const demoFunc = demos[demoName];
|
||
|
|
if (demoFunc) {
|
||
|
|
demoContainer.innerHTML = '';
|
||
|
|
const template = demoFunc();
|
||
|
|
demoContainer.innerHTML = template.strings.join('');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
demoSelect.addEventListener('change', (e) => {
|
||
|
|
loadDemo(e.target.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Load initial demo
|
||
|
|
loadDemo('demo');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|