362 lines
16 KiB
HTML
362 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Extra2D Logo Preview - Geometric Design</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||
min-height: 100vh;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: white;
|
||
font-size: 2.5rem;
|
||
margin-bottom: 10px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #888;
|
||
margin-bottom: 50px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.preview-section {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.section-title {
|
||
color: white;
|
||
font-size: 1.3rem;
|
||
margin-bottom: 20px;
|
||
padding-left: 15px;
|
||
border-left: 4px solid #E60012;
|
||
}
|
||
|
||
.preview-box {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 300px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.preview-box.light {
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
|
||
}
|
||
|
||
.preview-box.dark {
|
||
background: linear-gradient(135deg, #2d3436 0%, #1a1a2e 100%);
|
||
}
|
||
|
||
.icon-preview {
|
||
width: 220px;
|
||
height: 220px;
|
||
}
|
||
|
||
.text-preview {
|
||
width: 100%;
|
||
max-width: 700px;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
}
|
||
|
||
.color-info {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
margin-top: 30px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.color-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: white;
|
||
}
|
||
|
||
.color-dot {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(255,255,255,0.3);
|
||
}
|
||
|
||
.features {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.feature-card h3 {
|
||
color: white;
|
||
margin-bottom: 10px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: #888;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.size-preview {
|
||
display: flex;
|
||
gap: 40px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.size-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.size-label {
|
||
color: #888;
|
||
font-size: 0.9rem;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.reference-logos {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
margin-top: 30px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.ref-item {
|
||
text-align: center;
|
||
color: #888;
|
||
}
|
||
|
||
.ref-item img {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-bottom: 10px;
|
||
opacity: 0.7;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>Extra2D Logo Design</h1>
|
||
<p class="subtitle">Geometric Style - Nintendo Switch Game Engine</p>
|
||
|
||
<!-- 主图标预览 -->
|
||
<div class="preview-section">
|
||
<h2 class="section-title">主图标 (App Icon) - 六边形设计</h2>
|
||
<div class="preview-box dark">
|
||
<svg class="icon-preview" viewBox="0 0 512 512">
|
||
<defs>
|
||
<linearGradient id="mainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#E60012;stop-opacity:1" />
|
||
<stop offset="50%" style="stop-color:#FF4757;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#00C3E3;stop-opacity:1" />
|
||
</linearGradient>
|
||
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feDropShadow dx="4" dy="8" stdDeviation="12" flood-color="rgba(0,0,0,0.25)"/>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(256, 256)" filter="url(#shadow)">
|
||
<path d="M-200 -100 L-200 100 L0 200 L200 100 L200 -100 L0 -200 Z" fill="url(#mainGradient)" />
|
||
<path d="M-180 -90 L-180 90 L-60 150 L-60 -150 Z" fill="#E60012" opacity="0.3"/>
|
||
<path d="M60 -150 L60 150 L180 90 L180 -90 Z" fill="#00C3E3" opacity="0.3"/>
|
||
<path d="M-120 -60 L-120 60 L0 120 L120 60 L120 -60 L0 -120 Z" fill="white" opacity="0.95"/>
|
||
<path d="M-200 -100 L-200 100 L0 200 L200 100 L200 -100 L0 -200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="4"/>
|
||
</g>
|
||
<g transform="translate(256, 270)">
|
||
<text x="-85" y="25" font-family="Arial Black, Arial, sans-serif" font-size="130" font-weight="900" fill="#2D3436" style="letter-spacing: -5px;">E</text>
|
||
<text x="5" y="25" font-family="Arial Black, Arial, sans-serif" font-size="110" font-weight="900" fill="#E60012">2</text>
|
||
<text x="75" y="25" font-family="Arial Black, Arial, sans-serif" font-size="110" font-weight="900" fill="#00C3E3">D</text>
|
||
</g>
|
||
<g transform="translate(256, 256)" opacity="0.4">
|
||
<path d="M-180 -90 L0 -180 L180 -90 L160 -80 L0 -160 L-160 -80 Z" fill="white"/>
|
||
</g>
|
||
<g transform="translate(80, 400)" opacity="0.6">
|
||
<rect x="0" y="0" width="16" height="16" fill="#E60012" rx="2"/>
|
||
<rect x="20" y="0" width="16" height="16" fill="#E60012" rx="2"/>
|
||
<rect x="40" y="0" width="16" height="16" fill="#E60012" rx="2"/>
|
||
</g>
|
||
<g transform="translate(376, 400)" opacity="0.6">
|
||
<rect x="0" y="0" width="16" height="16" fill="#00C3E3" rx="2"/>
|
||
<rect x="20" y="0" width="16" height="16" fill="#00C3E3" rx="2"/>
|
||
<rect x="40" y="0" width="16" height="16" fill="#00C3E3" rx="2"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="size-preview" style="margin-top: 30px;">
|
||
<div class="size-item">
|
||
<svg width="64" height="64" viewBox="0 0 512 512">
|
||
<g transform="translate(256, 256)">
|
||
<path d="M-200 -100 L-200 100 L0 200 L200 100 L200 -100 L0 -200 Z" fill="url(#mainGradient)" />
|
||
<path d="M-120 -60 L-120 60 L0 120 L120 60 L120 -60 L0 -120 Z" fill="white" opacity="0.95"/>
|
||
</g>
|
||
<text x="256" y="280" text-anchor="middle" font-family="Arial Black, Arial, sans-serif" font-size="130" font-weight="900" fill="#2D3436">E</text>
|
||
</svg>
|
||
<div class="size-label">64x64</div>
|
||
</div>
|
||
<div class="size-item">
|
||
<svg width="128" height="128" viewBox="0 0 512 512">
|
||
<g transform="translate(256, 256)">
|
||
<path d="M-200 -100 L-200 100 L0 200 L200 100 L200 -100 L0 -200 Z" fill="url(#mainGradient)" />
|
||
<path d="M-120 -60 L-120 60 L0 120 L120 60 L120 -60 L0 -120 Z" fill="white" opacity="0.95"/>
|
||
</g>
|
||
<text x="256" y="280" text-anchor="middle" font-family="Arial Black, Arial, sans-serif" font-size="130" font-weight="900" fill="#2D3436">E</text>
|
||
</svg>
|
||
<div class="size-label">128x128</div>
|
||
</div>
|
||
<div class="size-item">
|
||
<svg width="256" height="256" viewBox="0 0 512 512">
|
||
<g transform="translate(256, 256)">
|
||
<path d="M-200 -100 L-200 100 L0 200 L200 100 L200 -100 L0 -200 Z" fill="url(#mainGradient)" />
|
||
<path d="M-120 -60 L-120 60 L0 120 L120 60 L120 -60 L0 -120 Z" fill="white" opacity="0.95"/>
|
||
</g>
|
||
<text x="256" y="280" text-anchor="middle" font-family="Arial Black, Arial, sans-serif" font-size="130" font-weight="900" fill="#2D3436">E</text>
|
||
</svg>
|
||
<div class="size-label">256x256</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文字 Logo 预览 -->
|
||
<div class="preview-section">
|
||
<h2 class="section-title">文字 Logo - 深色背景</h2>
|
||
<div class="preview-box dark">
|
||
<svg class="text-preview" viewBox="0 0 800 300">
|
||
<defs>
|
||
<linearGradient id="textGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#E60012;stop-opacity:1" />
|
||
<stop offset="50%" style="stop-color:#FF4757;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#00C3E3;stop-opacity:1" />
|
||
</linearGradient>
|
||
<filter id="textShadow" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feDropShadow dx="3" dy="6" stdDeviation="8" flood-color="rgba(0,0,0,0.3)"/>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(100, 150)" filter="url(#textShadow)">
|
||
<path d="M-60 -35 L-60 35 L0 70 L60 35 L60 -35 L0 -70 Z" fill="url(#textGradient1)" />
|
||
<path d="M-40 -23 L-40 23 L0 46 L40 23 L40 -23 L0 -46 Z" fill="white" opacity="0.95"/>
|
||
<path d="M-60 -35 L-60 35 L0 70 L60 35 L60 -35 L0 -70 Z" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<text x="-22" y="18" font-family="Arial Black, Arial, sans-serif" font-size="45" font-weight="900" fill="#2D3436">E</text>
|
||
<text x="8" y="12" font-family="Arial Black, Arial, sans-serif" font-size="24" font-weight="900" fill="#E60012">2</text>
|
||
<text x="8" y="32" font-family="Arial Black, Arial, sans-serif" font-size="20" font-weight="900" fill="#00C3E3">D</text>
|
||
</g>
|
||
<g transform="translate(200, 145)">
|
||
<text x="0" y="20" font-family="Arial, sans-serif" font-size="70" font-weight="800" fill="white">Extra</text>
|
||
<text x="215" y="20" font-family="Arial, sans-serif" font-size="70" font-weight="800" fill="#E60012">2</text>
|
||
<text x="265" y="20" font-family="Arial, sans-serif" font-size="70" font-weight="800" fill="#00C3E3">D</text>
|
||
</g>
|
||
<g transform="translate(200, 190)">
|
||
<text x="0" y="0" font-family="Arial, sans-serif" font-size="18" font-weight="500" fill="#888" letter-spacing="4">SWITCH GAME ENGINE</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-section">
|
||
<h2 class="section-title">文字 Logo - 浅色背景</h2>
|
||
<div class="preview-box light">
|
||
<svg class="text-preview" viewBox="0 0 800 300">
|
||
<defs>
|
||
<linearGradient id="textGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#E60012;stop-opacity:1" />
|
||
<stop offset="50%" style="stop-color:#FF4757;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#00C3E3;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<g transform="translate(100, 150)" filter="url(#shadow)">
|
||
<path d="M-60 -35 L-60 35 L0 70 L60 35 L60 -35 L0 -70 Z" fill="url(#textGradient2)" />
|
||
<path d="M-40 -23 L-40 23 L0 46 L40 23 L40 -23 L0 -46 Z" fill="white" opacity="0.95"/>
|
||
<path d="M-60 -35 L-60 35 L0 70 L60 35 L60 -35 L0 -70 Z" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<text x="-22" y="18" font-family="Arial Black, Arial, sans-serif" font-size="45" font-weight="900" fill="#2D3436">E</text>
|
||
<text x="8" y="12" font-family="Arial Black, Arial, sans-serif" font-size="24" font-weight="900" fill="#E60012">2</text>
|
||
<text x="8" y="32" font-family="Arial Black, Arial, sans-serif" font-size="20" font-weight="900" fill="#00C3E3">D</text>
|
||
</g>
|
||
<g transform="translate(200, 145)">
|
||
<text x="0" y="20" font-family="Arial, sans-serif" font-size="70" font-weight="800" fill="#2D3436">Extra</text>
|
||
<text x="215" y="20" font-family="Arial, sans-serif" font-size="70" font-weight="800" fill="#E60012">2</text>
|
||
<text x="265" y="20" font-family="Arial, sans-serif" font-size="70" font-weight="800" fill="#00C3E3">D</text>
|
||
</g>
|
||
<g transform="translate(200, 190)">
|
||
<text x="0" y="0" font-family="Arial, sans-serif" font-size="18" font-weight="500" fill="#636E72" letter-spacing="4">SWITCH GAME ENGINE</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配色方案 -->
|
||
<div class="preview-section">
|
||
<h2 class="section-title">配色方案</h2>
|
||
<div class="color-info">
|
||
<div class="color-item">
|
||
<div class="color-dot" style="background: #E60012;"></div>
|
||
<span>Nintendo Red #E60012</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-dot" style="background: #FF4757;"></div>
|
||
<span>Coral #FF4757</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-dot" style="background: #00C3E3;"></div>
|
||
<span>Nintendo Blue #00C3E3</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设计特点 -->
|
||
<div class="features">
|
||
<div class="feature-card">
|
||
<h3>🔷 几何风格</h3>
|
||
<p>采用六边形设计，类似 Godot、Cocos2d 等流行引擎的几何 logo 风格</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h3>🎮 Switch 配色</h3>
|
||
<p>红蓝渐变配色致敬 Nintendo Switch，左红右蓝的视觉分割</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h3>✨ 现代扁平</h3>
|
||
<p>扁平化设计配合微妙阴影，符合现代游戏引擎的审美趋势</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h3>🎯 清晰识别</h3>
|
||
<p>E2D 字母组合清晰醒目，在各种尺寸下都能保持辨识度</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |