<!DOCTYPE html>
|
<html lang="zh-Hans">
|
<head>
|
<meta charset="utf-8">
|
<title>TagLauncher Hero Render</title>
|
<style>
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
html, body {
|
width: 2880px;
|
height: 1800px;
|
overflow: hidden;
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
|
background: #07080f;
|
}
|
.stage {
|
position: relative;
|
width: 2880px;
|
height: 1800px;
|
overflow: hidden;
|
background:
|
radial-gradient(ellipse 90% 70% at 18% 12%, rgba(88, 86, 214, 0.45), transparent 58%),
|
radial-gradient(ellipse 75% 55% at 88% 18%, rgba(90, 200, 250, 0.32), transparent 52%),
|
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 149, 0, 0.12), transparent 55%),
|
linear-gradient(155deg, #0c0e18 0%, #121528 42%, #0a0b12 100%);
|
}
|
.stage::before {
|
content: "";
|
position: absolute;
|
inset: 0;
|
background-image:
|
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0 1px, transparent 1px),
|
radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 0 1px, transparent 1px);
|
background-size: 48px 48px, 64px 64px;
|
opacity: 0.35;
|
pointer-events: none;
|
}
|
.glow {
|
position: absolute;
|
border-radius: 50%;
|
filter: blur(80px);
|
pointer-events: none;
|
}
|
.glow-a { width: 720px; height: 720px; left: -120px; top: 200px; background: rgba(88, 86, 214, 0.35); }
|
.glow-b { width: 640px; height: 640px; right: -80px; top: 80px; background: rgba(48, 176, 255, 0.28); }
|
.glow-c { width: 900px; height: 400px; left: 50%; bottom: -80px; transform: translateX(-50%);
|
background: rgba(255, 255, 255, 0.06); filter: blur(100px); }
|
|
.scene {
|
position: absolute;
|
left: 50%;
|
top: 52%;
|
width: 2400px;
|
height: 1200px;
|
transform: translate(-50%, -50%);
|
perspective: 2200px;
|
perspective-origin: 50% 42%;
|
}
|
|
.icon-orb {
|
position: absolute;
|
left: 120px;
|
top: 80px;
|
z-index: 30;
|
transform: translateZ(120px) rotate(-8deg);
|
filter: drop-shadow(0 28px 60px rgba(0, 113, 227, 0.45));
|
}
|
.icon-orb img {
|
width: 200px;
|
height: 200px;
|
border-radius: 44px;
|
display: block;
|
}
|
|
.panel {
|
position: absolute;
|
border-radius: 28px;
|
overflow: hidden;
|
transform-style: preserve-3d;
|
box-shadow:
|
0 1px 0 rgba(255, 255, 255, 0.22) inset,
|
0 40px 100px rgba(0, 0, 0, 0.55),
|
0 12px 32px rgba(0, 0, 0, 0.35);
|
}
|
.panel::after {
|
content: "";
|
position: absolute;
|
inset: 0;
|
background: linear-gradient(125deg, rgba(255,255,255,0.18) 0%, transparent 38%, transparent 62%, rgba(255,255,255,0.06) 100%);
|
pointer-events: none;
|
border-radius: inherit;
|
}
|
.panel img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.panel-main {
|
left: 280px;
|
top: 120px;
|
width: 1680px;
|
height: 1050px;
|
transform: rotateY(-10deg) rotateX(6deg) translateZ(40px);
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
}
|
|
.panel-memo {
|
right: 140px;
|
bottom: 40px;
|
width: 920px;
|
height: 575px;
|
transform: rotateY(14deg) rotateX(-4deg) translateZ(180px);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
z-index: 20;
|
}
|
|
.tag-ribbon {
|
position: absolute;
|
right: 200px;
|
top: 40px;
|
display: flex;
|
flex-direction: column;
|
gap: 14px;
|
z-index: 25;
|
transform: rotateY(-18deg) translateZ(200px);
|
}
|
.tag-ribbon span {
|
display: block;
|
height: 22px;
|
border-radius: 11px;
|
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
|
}
|
.tag-ribbon span:nth-child(1) { width: 180px; background: linear-gradient(90deg, #ff6b9d, #ff8f4a); }
|
.tag-ribbon span:nth-child(2) { width: 200px; background: linear-gradient(90deg, #ffb347, #ffe066); margin-left: 12px; }
|
.tag-ribbon span:nth-child(3) { width: 190px; background: linear-gradient(90deg, #7bed9f, #48dbfb); margin-left: 24px; }
|
.tag-ribbon span:nth-child(4) { width: 210px; background: linear-gradient(90deg, #54a0ff, #5f27cd); margin-left: 8px; }
|
.tag-ribbon span:nth-child(5) { width: 175px; background: linear-gradient(90deg, #a29bfe, #6c5ce7); margin-left: 20px; }
|
|
.floor-reflection {
|
position: absolute;
|
left: 50%;
|
bottom: 0;
|
width: 2200px;
|
height: 280px;
|
transform: translateX(-50%);
|
background: linear-gradient(to top, rgba(255,255,255,0.08), transparent);
|
filter: blur(2px);
|
opacity: 0.5;
|
}
|
|
.tagline {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 420px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: flex-end;
|
padding-bottom: 88px;
|
text-align: center;
|
z-index: 40;
|
background: linear-gradient(to top, rgba(7, 8, 15, 0.92) 0%, rgba(7, 8, 15, 0.55) 45%, transparent 100%);
|
pointer-events: none;
|
}
|
.tagline h1 {
|
margin: 0;
|
font-size: 72px;
|
font-weight: 650;
|
letter-spacing: -0.03em;
|
line-height: 1.12;
|
color: #f5f5f7;
|
text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
|
max-width: 16em;
|
}
|
.tagline p {
|
margin: 18px 0 0;
|
font-size: 32px;
|
font-weight: 500;
|
color: rgba(245, 245, 247, 0.72);
|
letter-spacing: 0.02em;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="stage" id="stage">
|
<div class="glow glow-a"></div>
|
<div class="glow glow-b"></div>
|
<div class="glow glow-c"></div>
|
<div class="scene">
|
<div class="icon-orb">
|
<img src="assets/app-icon-256.png" alt="">
|
</div>
|
<div class="tag-ribbon" aria-hidden="true">
|
<span></span><span></span><span></span><span></span><span></span>
|
</div>
|
<figure class="panel panel-main">
|
<img src="assets/screenshot-app-grid.jpg" alt="">
|
</figure>
|
<figure class="panel panel-memo">
|
<img src="assets/screenshot-notes.jpg" alt="">
|
</figure>
|
</div>
|
<div class="floor-reflection" aria-hidden="true"></div>
|
<div class="tagline" id="tagline-zh">
|
<h1>用标签，而不是文件夹，整理你的 Mac 应用</h1>
|
<p>一屏滚动 · 多标签归类 · 应用备忘 · 布局备份</p>
|
</div>
|
</div>
|
</body>
|
</html>
|
