test/index.html
OpenClaw Agent 277ac79421
All checks were successful
Deploy to dev.bl.pixeldev.eu / deploy (push) Successful in 2s
feat: wrap lorem ipsum in styled card with blue glow (closes #6)
2026-03-13 14:05:14 +00:00

107 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<title>Deploy Test</title>
<style>
:root[data-theme="light"] {
--bg: #f5f5f5;
--fg: #111111;
--card: #ffffff;
--border: #ddd;
--accent: #4a6ef5;
--btn-bg: #111;
--btn-fg: #fff;
--btn-hover: #333;
}
:root[data-theme="dark"] {
--bg: #0d0d0d;
--fg: #e0e0e0;
--card: #161616;
--border: #2a2a2a;
--accent: #7c9ef5;
--btn-bg: #2a2a2a;
--btn-fg: #e0e0e0;
--btn-hover: #3a3a3a;
}
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--bg);
color: var(--fg);
font-family: system-ui, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
gap: 1rem;
transition: background .2s, color .2s;
margin: 0;
padding: 1rem;
}
h1 { margin: 0; }
p { max-width: 520px; text-align: center; line-height: 1.6; }
code { color: var(--accent); }
#theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--border);
border-radius: 8px;
padding: .45rem .85rem;
font-size: .85rem;
cursor: pointer;
font-family: inherit;
transition: background .15s;
}
#theme-toggle:hover { background: var(--btn-hover); }
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.4rem 1.8rem;
max-width: 520px;
text-align: center;
line-height: 1.6;
box-shadow: 0 0 0 1px rgba(74, 110, 245, .15),
0 0 18px 4px rgba(74, 110, 245, .25),
0 0 40px 8px rgba(74, 110, 245, .1);
transition: background .2s, border-color .2s, box-shadow .2s;
}
:root[data-theme="dark"] .card {
box-shadow: 0 0 0 1px rgba(124, 158, 245, .2),
0 0 20px 5px rgba(124, 158, 245, .3),
0 0 50px 10px rgba(124, 158, 245, .12);
}
</style>
</head>
<body>
<button id="theme-toggle">🌙 Dark mode</button>
<h1>🚀 Deploy verified ✅</h1>
<div class="card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<p>Committed by OpenClaw at <code>2026-03-13 10:11:00 UTC</code></p>
<script>
(function() {
var root = document.documentElement;
var btn = document.getElementById('theme-toggle');
// Load saved preference; default to light
var saved = localStorage.getItem('theme') || 'light';
setTheme(saved);
btn.addEventListener('click', function() {
setTheme(root.getAttribute('data-theme') === 'light' ? 'dark' : 'light');
});
function setTheme(t) {
root.setAttribute('data-theme', t);
localStorage.setItem('theme', t);
btn.textContent = t === 'light' ? '🌙 Dark mode' : '☀️ Light mode';
}
})();
</script>
<script src="https://dev.bl.pixeldev.eu/feedback-tool/widget.js" data-repo="pixeldev/test"></script>
</body>
</html>