73 lines
2.9 KiB
HTML
73 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Cosmic Backgrounds — theme gallery</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100vh; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #e8eaf6; background: #050510; }
|
|
.overlay {
|
|
position: relative; z-index: 2;
|
|
max-width: 900px; margin: 0 auto; padding: 60px 24px;
|
|
}
|
|
h1 { font-size: 2rem; margin: 0 0 6px; }
|
|
.sub { color: #9aa0c0; margin: 0 0 28px; }
|
|
.picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
|
|
.picker a {
|
|
text-decoration: none; color: #cfc4ff; font-weight: 600; font-size: 0.92rem;
|
|
padding: 10px 18px; border-radius: 999px;
|
|
border: 1px solid rgba(130,110,255,0.3);
|
|
background: rgba(20,18,48,0.55);
|
|
transition: all .2s ease;
|
|
}
|
|
.picker a.active, .picker a:hover {
|
|
background: linear-gradient(135deg, #7b2ff7, #2b6cff);
|
|
color: #fff; border-color: transparent;
|
|
box-shadow: 0 4px 20px rgba(123,47,247,0.4);
|
|
}
|
|
.card {
|
|
background: rgba(20,18,48,0.6);
|
|
border: 1px solid rgba(130,110,255,0.2);
|
|
border-radius: 18px; padding: 28px;
|
|
backdrop-filter: blur(8px);
|
|
margin-bottom: 16px;
|
|
}
|
|
.card h2 { margin: 0 0 10px; font-size: 1.2rem; }
|
|
.card p { color: #9aa0c0; line-height: 1.7; margin: 0; }
|
|
code {
|
|
display: block; margin-top: 40px; padding: 14px 18px;
|
|
background: rgba(10,10,30,0.7); border: 1px solid rgba(130,110,255,0.2);
|
|
border-radius: 10px; font-size: 0.85rem; color: #7cffb0;
|
|
overflow-x: auto; white-space: nowrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="{{ url_for('static', filename='cosmic-bg.js') }}" data-theme="{{ theme }}"></script>
|
|
|
|
<div class="overlay">
|
|
<h1>✨ Cosmic Backgrounds</h1>
|
|
<p class="sub">Current theme: <strong>{{ theme }}</strong> — click any to preview. Drop into any site with one script tag.</p>
|
|
|
|
<div class="picker">
|
|
{% for t in themes %}
|
|
<a href="{{ url_for('bg_demo') }}?theme={{ t }}" class="{{ 'active' if t == theme else '' }}">{{ t }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>This is how your content sits over it</h2>
|
|
<p>The background is a fixed, pointer-events-none canvas layered behind everything — your existing site, nav, cards and text all render on top unchanged. Every theme is slow + smooth, and pauses automatically when the tab is in the background (zero wasted CPU).</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Add it to any site</h2>
|
|
<p>One line in the <code><head></code> — swap <code>data-theme</code> to taste:</p>
|
|
</div>
|
|
|
|
<code><script src="https://supernova.thetempleofdoom.com/static/cosmic-bg.js" data-theme="{{ theme }}"></script></code>
|
|
</div>
|
|
</body>
|
|
</html>
|