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.
81 lines
3.7 KiB
HTML
81 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Light Leak Cinema · REEL 03</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+Pro:ital,wght@0,400;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500&display=swap" rel="stylesheet" />
|
|
<style>
|
|
body { font-family:'Source Serif Pro','Noto Serif SC',Georgia,serif; background:#000; margin:0; min-height:100vh; }
|
|
.frame {
|
|
position:relative; width:100%; max-width:1600px; aspect-ratio: 2.39 / 1; margin:0 auto;
|
|
background:#1a0d08;
|
|
overflow:hidden;
|
|
}
|
|
.scene {
|
|
position:absolute; inset:0;
|
|
background:
|
|
radial-gradient(ellipse at 78% 18%, #ffb547 0%, transparent 38%),
|
|
radial-gradient(ellipse at 90% 30%, #ff7e3f 0%, transparent 30%),
|
|
linear-gradient(180deg, transparent 60%, #d97757 110%),
|
|
radial-gradient(ellipse at 30% 60%, #2a1410 0%, transparent 60%),
|
|
linear-gradient(135deg, #1a0d08 0%, #28140c 50%, #0a0502 100%);
|
|
}
|
|
.grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
|
/* scratches */
|
|
.scratch { position:absolute; top:0; bottom:0; width:1px; background:#f5e9d6; opacity:0.18; }
|
|
.vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%); }
|
|
.perfs {
|
|
position:absolute; left:0; right:0; height:6px;
|
|
background-image: repeating-linear-gradient(90deg, #f5e9d6 0 8px, transparent 8px 24px);
|
|
opacity:0.5;
|
|
}
|
|
.cream { color:#f5e9d6; }
|
|
.mono { font-family:'IBM Plex Mono',monospace; }
|
|
.display { font-family:'EB Garamond','Noto Serif SC',serif; }
|
|
.chip { font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center p-6" style="background:#000">
|
|
<div class="frame">
|
|
<div class="scene"></div>
|
|
|
|
<!-- scratches -->
|
|
<div class="scratch" style="left:14%;height:38%"></div>
|
|
<div class="scratch" style="left:42%;height:60%;top:20%;opacity:0.12"></div>
|
|
<div class="scratch" style="left:71%;height:30%;top:55%"></div>
|
|
|
|
<!-- letterbox bars - actually built into aspect ratio container; perfs on top -->
|
|
|
|
<!-- top caption -->
|
|
<header class="absolute top-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-70 z-10">
|
|
<span>REEL 03 · CH I · MMXXVI</span>
|
|
<span>A Quiet Year in Berlin</span>
|
|
<span>00:03:21</span>
|
|
</header>
|
|
|
|
<!-- main text -->
|
|
<main class="absolute z-10 cream" style="left:8%; bottom:18%; max-width:60%">
|
|
<div class="chip mono opacity-70">Reel III · Title</div>
|
|
<h1 class="display mt-3 leading-[1.05] italic font-medium" style="font-size:clamp(40px,5.5vw,84px); color:#f5e9d6">
|
|
A Quiet Year<br/>
|
|
<span style="font-style:italic">in</span> Berlin.
|
|
</h1>
|
|
<p class="display mt-4 italic opacity-80 text-[22px]">
|
|
A short film about typesetting, in fourteen reels.
|
|
</p>
|
|
</main>
|
|
|
|
<!-- bottom right meta -->
|
|
<footer class="absolute bottom-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-50 z-10">
|
|
<span>52.5200° N · 13.4050° E</span>
|
|
<span>FILMED ON 35MM · PROXY 1080P</span>
|
|
<span>FRAME · LIGHT-LEAK-CINEMA</span>
|
|
</footer>
|
|
|
|
<div class="grain"></div>
|
|
<div class="vignette"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|