348 lines
9.8 KiB
HTML
348 lines
9.8 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>图标模板预览 - 可乐项目</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: #0f0f1a;
|
||
color: #e0e0e0;
|
||
min-height: 100vh;
|
||
padding: 40px 20px;
|
||
}
|
||
h1 {
|
||
text-align: center;
|
||
font-size: 28px;
|
||
margin-bottom: 8px;
|
||
background: linear-gradient(135deg, #FF6B35, #6C63FF);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #888;
|
||
margin-bottom: 40px;
|
||
font-size: 14px;
|
||
}
|
||
.current-section {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
border: 1px solid #333;
|
||
border-radius: 12px;
|
||
background: #1a1a2e;
|
||
}
|
||
.current-section h2 { font-size: 16px; color: #ff4444; margin-bottom: 12px; }
|
||
.current-section .current-icon { width: 64px; height: 64px; }
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 24px;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
.card {
|
||
background: #1a1a2e;
|
||
border-radius: 16px;
|
||
padding: 30px 20px 24px;
|
||
text-align: center;
|
||
border: 1px solid #2a2a3e;
|
||
transition: transform 0.2s, border-color 0.2s;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
.card:hover {
|
||
transform: translateY(-4px);
|
||
border-color: #6C63FF;
|
||
}
|
||
.card.selected {
|
||
border-color: #4CAF50;
|
||
box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
|
||
}
|
||
.card.selected::after {
|
||
content: '✓ 已选择';
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
background: #4CAF50;
|
||
color: white;
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
}
|
||
.card-icon {
|
||
width: 96px;
|
||
height: 96px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
.card h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
color: #fff;
|
||
}
|
||
.card .desc {
|
||
font-size: 13px;
|
||
color: #999;
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
.tags {
|
||
display: flex;
|
||
gap: 6px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.tag {
|
||
background: rgba(108, 99, 255, 0.15);
|
||
color: #8B83FF;
|
||
padding: 3px 10px;
|
||
border-radius: 20px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.sizes-section {
|
||
max-width: 1100px;
|
||
margin: 50px auto 0;
|
||
text-align: center;
|
||
}
|
||
.sizes-section h2 {
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
color: #ccc;
|
||
}
|
||
.sizes-grid {
|
||
display: flex;
|
||
gap: 40px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.size-group { text-align: center; }
|
||
.size-group .size-label {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-top: 8px;
|
||
}
|
||
.size-group img, .size-group svg {
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.compare-table {
|
||
max-width: 1100px;
|
||
margin: 50px auto 0;
|
||
}
|
||
.compare-table h2 {
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
color: #ccc;
|
||
text-align: center;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: #1a1a2e;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
th {
|
||
background: #252540;
|
||
padding: 12px 16px;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
color: #aaa;
|
||
}
|
||
td {
|
||
padding: 12px 16px;
|
||
border-top: 1px solid #2a2a3e;
|
||
font-size: 13px;
|
||
}
|
||
td:first-child { color: #fff; font-weight: 600; }
|
||
|
||
.apply-btn {
|
||
display: block;
|
||
margin: 40px auto 0;
|
||
padding: 12px 32px;
|
||
background: linear-gradient(135deg, #6C63FF, #3F8BFC);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.apply-btn:hover { opacity: 0.9; }
|
||
.apply-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>可乐项目 - 图标模板预览</h1>
|
||
<p class="subtitle">点击选择你喜欢的图标设计，然后应用为项目 Favicon</p>
|
||
|
||
<!-- 当前图标 -->
|
||
<div class="current-section">
|
||
<h2>当前图标</h2>
|
||
<img class="current-icon" src="/favicon.svg" alt="当前图标">
|
||
</div>
|
||
|
||
<!-- 新图标选项 -->
|
||
<div class="grid">
|
||
<div class="card" data-file="icon-c-letter.svg" onclick="selectCard(this)">
|
||
<img class="card-icon" src="icon-c-letter.svg" alt="C字母图标">
|
||
<h3>字母 C 标识</h3>
|
||
<p class="desc">圆润加粗的"C"字母，搭配气泡装饰，呼应可乐品牌。橙红到深红的渐变色调，温暖而有辨识度。</p>
|
||
<div class="tags">
|
||
<span class="tag">品牌辨识</span>
|
||
<span class="tag">极简</span>
|
||
<span class="tag">可乐色调</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-file="icon-toolbox.svg" onclick="selectCard(this)">
|
||
<img class="card-icon" src="icon-toolbox.svg" alt="工具箱图标">
|
||
<h3>等距工具箱</h3>
|
||
<p class="desc">3D等距视角的彩色工具箱，珊瑚色/青色/紫色多面体设计，展现平台多工具属性，现代科技感。</p>
|
||
<div class="tags">
|
||
<span class="tag">3D等距</span>
|
||
<span class="tag">多色</span>
|
||
<span class="tag">工具平台</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-file="icon-colabubbles.svg" onclick="selectCard(this)">
|
||
<img class="card-icon" src="icon-colabubbles.svg" alt="气泡可乐图标">
|
||
<h3>抽象气泡杯</h3>
|
||
<p class="desc">深色背景上的极简可乐杯，液体中冒出的气泡传递活力感。暗色系设计，科技感十足。</p>
|
||
<div class="tags">
|
||
<span class="tag">暗色系</span>
|
||
<span class="tag">抽象</span>
|
||
<span class="tag">活力</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-file="icon-hextool.svg" onclick="selectCard(this)">
|
||
<img class="card-icon" src="icon-hextool.svg" alt="六边形工具图标">
|
||
<h3>六边形齿轮</h3>
|
||
<p class="desc">六边形底座搭配齿轮符号，紫蓝渐变光效。传达精密工具与技术平台的气质，科技前沿感。</p>
|
||
<div class="tags">
|
||
<span class="tag">科技感</span>
|
||
<span class="tag">几何</span>
|
||
<span class="tag">工具符号</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 多尺寸预览 -->
|
||
<div class="sizes-section">
|
||
<h2>不同尺寸预览</h2>
|
||
<div id="sizes-grid" class="sizes-grid" style="display:none;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 特性对比 -->
|
||
<div class="compare-table">
|
||
<h2>设计特性对比</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>图标</th>
|
||
<th>风格</th>
|
||
<th>配色</th>
|
||
<th>适用场景</th>
|
||
<th>辨识度</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>字母 C</td>
|
||
<td>扁平极简</td>
|
||
<td>暖色系（橙红→深红）</td>
|
||
<td>品牌一致性最强，适合正式场合</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>等距工具箱</td>
|
||
<td>3D 等距</td>
|
||
<td>多色（珊瑚+青+紫）</td>
|
||
<td>展现工具多样性，视觉冲击力强</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>气泡可乐杯</td>
|
||
<td>暗色抽象</td>
|
||
<td>暗色系（深棕+焦糖）</td>
|
||
<td>暗色主题搭配最佳，独特有记忆点</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>六边形齿轮</td>
|
||
<td>科技几何</td>
|
||
<td>冷色系（紫→蓝）</td>
|
||
<td>技术平台定位，专业现代</td>
|
||
<td>⭐⭐⭐⭐</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<button class="apply-btn" id="applyBtn" disabled onclick="applyIcon()">
|
||
选择一个图标后点击应用
|
||
</button>
|
||
|
||
<script>
|
||
let selectedFile = null;
|
||
|
||
function selectCard(card) {
|
||
document.querySelectorAll('.card').forEach(c => c.classList.remove('selected'));
|
||
card.classList.add('selected');
|
||
selectedFile = card.dataset.file;
|
||
|
||
const btn = document.getElementById('applyBtn');
|
||
btn.disabled = false;
|
||
btn.textContent = `应用 "${card.querySelector('h3').textContent}" 为项目图标`;
|
||
|
||
// 展示多尺寸预览
|
||
showSizes(selectedFile);
|
||
}
|
||
|
||
function showSizes(file) {
|
||
const grid = document.getElementById('sizes-grid');
|
||
grid.style.display = 'flex';
|
||
const sizes = [
|
||
{ w: 16, h: 16, label: '16×16 浏览器标签' },
|
||
{ w: 32, h: 32, label: '32×32 标准' },
|
||
{ w: 48, h: 48, label: '48×48 推荐' },
|
||
{ w: 64, h: 64, label: '64×64 收藏夹' },
|
||
{ w: 128, h: 128, label: '128×128 高清' },
|
||
];
|
||
grid.innerHTML = sizes.map(s =>
|
||
`<div class="size-group">
|
||
<img src="${file}" width="${s.w}" height="${s.h}" alt="${s.label}">
|
||
<div class="size-label">${s.label}</div>
|
||
</div>`
|
||
).join('');
|
||
}
|
||
|
||
function applyIcon() {
|
||
if (!selectedFile) return;
|
||
if (confirm(`确认将项目图标替换为 "${selectedFile}"？\n\n原 favicon.svg 将被替换。`)) {
|
||
// 复制文件
|
||
fetch(selectedFile).then(r => r.text()).then(svg => {
|
||
const blob = new Blob([svg], { type: 'image/svg+xml' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'favicon.svg';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
alert('已下载新图标文件 favicon.svg\n请将它替换到 public/ 目录下覆盖原文件。');
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |