mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
d3d95121f3
- Updated the `sortByVisualAppeal` function to prioritize featured ranks, ensuring that curated plugins are displayed prominently. - Added tests to verify the new sorting logic, ensuring that plugins with numeric featured ranks are sorted correctly ahead of others. - Introduced new example templates for a magazine article layout, a Twitter share card, and a Xiaohongshu card, expanding the available options for users. - Enhanced the overall plugin preview experience by integrating these new templates, providing users with more visually appealing and functional examples. This update significantly improves the plugin sorting mechanism and enriches the template offerings, enhancing user engagement and experience.
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>
|