mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
8b2d48a258
- Introduced logic to assemble example slides with a companion template when the declared entry is missing, improving the user experience for plugin previews. - Updated the server logic to handle special cases for `example-slides.html`, ensuring proper fallback to `template.html` when applicable. - Enhanced tests to verify the new preview assembly functionality and ensure correct rendering of fallback content. - Added new HTML and Markdown examples for various skills, including a magazine article layout and a Twitter share card, expanding the available templates for users. This update significantly improves the plugin preview experience, providing users with more robust and visually appealing fallback options.
99 lines
4.8 KiB
HTML
99 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Glitch Title · SIGNAL_LOST</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
body { font-family:'Space Grotesk',sans-serif; background:#0d0e10; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; }
|
||
.mono { font-family:'JetBrains Mono',monospace; }
|
||
/* scanlines */
|
||
body::before {
|
||
content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
|
||
background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
|
||
mix-blend-mode: multiply; opacity:0.6;
|
||
}
|
||
/* grid */
|
||
body::after {
|
||
content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
|
||
background-image: linear-gradient(rgba(0,255,180,0.04) 1px, transparent 1px), linear-gradient(90deg,rgba(0,255,180,0.04) 1px, transparent 1px);
|
||
background-size: 56px 56px;
|
||
}
|
||
/* grain */
|
||
.grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||
@keyframes glitch {
|
||
0%, 92%, 100% { transform: translate(0,0); filter: none }
|
||
93% { transform: translate(-6px, 1px); filter: url(#rgb) }
|
||
94% { transform: translate(8px, -2px); filter: url(#rgb) }
|
||
95% { transform: translate(-4px, 2px); }
|
||
96% { transform: translate(4px, -1px); filter: url(#rgb) }
|
||
97% { transform: translate(0,0) }
|
||
}
|
||
.glitch-host { position:relative; animation: glitch 4s infinite; }
|
||
.layer { position:absolute; inset:0; mix-blend-mode:screen; }
|
||
.layer-c { color:#00f0ff; transform: translate(-3px, 1px); }
|
||
.layer-m { color:#ff2bd6; transform: translate(3px, -1px); }
|
||
.vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.7) 100%); z-index:5; pointer-events:none; }
|
||
.ascii { font-family:'JetBrains Mono',monospace; letter-spacing:2px; line-height:1; }
|
||
@media (prefers-reduced-motion: reduce) { .glitch-host { animation: none } }
|
||
</style>
|
||
</head>
|
||
<body class="flex flex-col items-center justify-center relative">
|
||
|
||
<svg width="0" height="0" style="position:absolute">
|
||
<defs>
|
||
<filter id="rgb">
|
||
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
||
<feOffset in="SourceGraphic" dx="3" dy="0" result="r"/>
|
||
<feOffset in="SourceGraphic" dx="-3" dy="0" result="b"/>
|
||
<feMerge><feMergeNode in="r"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
|
||
<header class="absolute top-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-70 z-10 tracking-[0.16em]">
|
||
<span>>> SIGNAL_LOST · CH-04 · 14:32:08</span>
|
||
<span>FRAME · GLITCH-TITLE</span>
|
||
<span>REC ●</span>
|
||
</header>
|
||
|
||
<!-- ASCII chunks corners -->
|
||
<pre class="ascii absolute top-24 left-12 text-[12px] opacity-30 z-10">█▓▒░ █▓▒░
|
||
▒▓█▓ ░▒▓
|
||
░▒▓█ ▓▒░░
|
||
▓▒░░ ▒▓█▓</pre>
|
||
<pre class="ascii absolute bottom-24 right-12 text-[12px] opacity-30 z-10 text-right">█▓▒░ ▓▒░█
|
||
▒░░▓ ░▒▓█
|
||
▓▒░░ █▓▒░
|
||
░▒▓█ ▒░░▓</pre>
|
||
|
||
<main class="relative z-10 text-center px-12">
|
||
<div class="mono text-[14px] opacity-60 tracking-[0.22em] mb-6 uppercase">— Transmission Halted —</div>
|
||
<div class="glitch-host relative inline-block">
|
||
<h1 class="font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
|
||
SIGNAL<br/>_LOST
|
||
</h1>
|
||
<h1 class="layer layer-c font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
|
||
SIGNAL<br/>_LOST
|
||
</h1>
|
||
<h1 class="layer layer-m font-black tracking-[-0.02em] leading-[0.9]" style="font-size:clamp(80px,12vw,200px)">
|
||
SIGNAL<br/>_LOST
|
||
</h1>
|
||
</div>
|
||
<p class="mt-10 mono text-[16px] opacity-70 tracking-[0.16em]">
|
||
04 · DATA_CORRUPTION · <span style="color:#ffb547">w̶̶a̷i̶t̶i̶n̶g̶ ̷f̷o̶r̶ ̶r̷e̶c̶o̶v̷e̶r̶y̶</span>
|
||
</p>
|
||
</main>
|
||
|
||
<div class="grain"></div>
|
||
<div class="vignette"></div>
|
||
|
||
<footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between mono text-[11px] opacity-50 z-10 tracking-[0.16em]">
|
||
<span>HTML-ANYTHING / VFX</span>
|
||
<span style="color:#ff2bd6">CHROMATIC · CYAN × MAGENTA</span>
|
||
<span class="mono">⏵ 00:14:32:08</span>
|
||
</footer>
|
||
</body>
|
||
</html>
|