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.
80 lines
3.6 KiB
HTML
80 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Logo Outro · HTML Anything</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
body {
|
|
font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif;
|
|
background: radial-gradient(circle at 50% 45%, #1a1535 0%, #08090c 70%);
|
|
color:#f5f5f7;
|
|
margin:0;
|
|
min-height:100vh;
|
|
overflow:hidden;
|
|
}
|
|
.accent { color:#7c5cff; }
|
|
.ribbon { background:#7c5cff; }
|
|
@keyframes pieceIn { 0% { opacity:0; transform: scale(1.4) translate(var(--dx, 0), var(--dy, 0)) } 100% { opacity:1; transform: scale(1) translate(0,0) } }
|
|
@keyframes glow { from { filter: drop-shadow(0 0 0 transparent) } to { filter: drop-shadow(0 0 32px rgba(124,92,255,0.6)) } }
|
|
.piece { animation: pieceIn 1s cubic-bezier(.34,1.56,.64,1) both; }
|
|
.piece:nth-child(1){--dx:-80px;--dy:-40px;animation-delay:0s}
|
|
.piece:nth-child(2){--dx:60px;--dy:-50px;animation-delay:.08s}
|
|
.piece:nth-child(3){--dx:-40px;--dy:50px;animation-delay:.16s}
|
|
.piece:nth-child(4){--dx:70px;--dy:40px;animation-delay:.24s}
|
|
.piece:nth-child(5){--dx:0;--dy:-70px;animation-delay:.32s}
|
|
.logo-wrap { animation: glow .8s ease-out 1.1s both; }
|
|
@keyframes fadeUp { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) } }
|
|
.brand { animation: fadeUp .8s ease-out 1.4s both; }
|
|
.tagline { animation: fadeUp .8s ease-out 1.7s both; }
|
|
.meta { animation: fadeUp .6s ease-out 2.1s both; }
|
|
/* shimmer */
|
|
@keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }
|
|
.shimmer {
|
|
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
|
|
background-size: 200% 100%;
|
|
-webkit-background-clip:text; background-clip:text; color:transparent;
|
|
animation: shimmer 1.8s ease-out 1.9s 1 both;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col items-center justify-center relative">
|
|
<div class="ribbon absolute top-0 left-0 right-0" style="height:4px"></div>
|
|
|
|
<!-- logo -->
|
|
<div class="logo-wrap relative" style="width:140px;height:140px">
|
|
<svg viewBox="0 0 140 140" class="absolute inset-0">
|
|
<!-- 5 geometric pieces forming an "H" -->
|
|
<rect class="piece" x="20" y="20" width="20" height="100" fill="#7c5cff"/>
|
|
<rect class="piece" x="100" y="20" width="20" height="100" fill="#7c5cff"/>
|
|
<rect class="piece" x="40" y="60" width="60" height="20" fill="#f5f5f7"/>
|
|
<circle class="piece" cx="30" cy="20" r="10" fill="#7c5cff"/>
|
|
<circle class="piece" cx="110" cy="120" r="10" fill="#f5f5f7"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- brand -->
|
|
<h1 class="brand mt-10 font-black tracking-[-0.02em] leading-[0.95]" style="font-size:84px">
|
|
<span class="shimmer">HTML Anything</span>
|
|
</h1>
|
|
|
|
<!-- tagline -->
|
|
<p class="tagline mt-4 text-[24px] opacity-70 font-medium">
|
|
Anything → <em class="not-italic accent">beautiful HTML</em>
|
|
</p>
|
|
|
|
<!-- CTA / meta -->
|
|
<div class="meta mt-12 flex items-center gap-6 text-[11px] uppercase tracking-[0.18em] opacity-50">
|
|
<span>htmlanything.dev</span>
|
|
<span class="opacity-40">·</span>
|
|
<span>@htmlanything</span>
|
|
<span class="opacity-40">·</span>
|
|
<span>2026</span>
|
|
</div>
|
|
|
|
<!-- corner timecode -->
|
|
<div class="absolute bottom-8 right-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">END · 00:03:21</div>
|
|
<div class="absolute bottom-8 left-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">FRAME · LOGO-OUTRO</div>
|
|
</body>
|
|
</html>
|