442 lines
17 KiB
HTML
442 lines
17 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; }
|
|
|
|
.section-label {
|
|
max-width: 1100px;
|
|
margin: 40px auto 16px;
|
|
padding-left: 4px;
|
|
}
|
|
.section-label h2 {
|
|
font-size: 18px;
|
|
color: #aaa;
|
|
border-left: 3px solid;
|
|
padding-left: 10px;
|
|
}
|
|
.section-label.sub { margin-top: 50px; }
|
|
.section-label.sub h2 { border-color: #D4423A; color: #D4423A; }
|
|
.section-label.old h2 { border-color: #6C63FF; color: #8B83FF; }
|
|
.section-label p { font-size: 13px; color: #666; margin-top: 4px; padding-left: 13px; }
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
.card {
|
|
background: #1a1a2e;
|
|
border-radius: 16px;
|
|
padding: 28px 20px 22px;
|
|
text-align: center;
|
|
border: 1px solid #2a2a3e;
|
|
transition: transform 0.2s, border-color 0.2s, box-shadow 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: '\2713 \5DF2\u9009\u62E9';
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
}
|
|
.card-icon {
|
|
width: 88px;
|
|
height: 88px;
|
|
margin: 0 auto 14px;
|
|
}
|
|
.card h3 {
|
|
font-size: 16px;
|
|
margin-bottom: 6px;
|
|
color: #fff;
|
|
}
|
|
.card .desc {
|
|
font-size: 12px;
|
|
color: #888;
|
|
line-height: 1.6;
|
|
margin-bottom: 12px;
|
|
}
|
|
.tags {
|
|
display: flex;
|
|
gap: 6px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tag {
|
|
background: rgba(108, 99, 255, 0.12);
|
|
color: #8B83FF;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
}
|
|
.tag.cola {
|
|
background: rgba(212, 66, 58, 0.12);
|
|
color: #E74C3C;
|
|
}
|
|
|
|
.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="section-label sub">
|
|
<h2>新设计 - 微妒可乐元素</h2>
|
|
<p>帖妒蓝入可乐色调、气波、水体等元素，但保持充分克制，不直取可乐</p>
|
|
</div>
|
|
<div class="grid" id="new-grid">
|
|
<div class="card" data-file="icon-c-letter-v2.svg" onclick="selectCard(this)">
|
|
<img class="card-icon" src="icon-c-letter-v2.svg" alt="V2 C">
|
|
<h3>杂志 C 标识</h3>
|
|
<p class="desc">深色背景上纯繁的 C 字母，右上角一个微小红点暗示气波。充分保持充分工具感，可乐元素只作点缀。</p>
|
|
<div class="tags">
|
|
<span class="tag">极简</span>
|
|
<span class="tag">C字母</span>
|
|
<span class="tag cola">微妒可乐色</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-file="icon-colared-wrench.svg" onclick="selectCard(this)">
|
|
<img class="card-icon" src="icon-colared-wrench.svg" alt="可乐红打扎">
|
|
<h3>红色打扎</h3>
|
|
<p class="desc">深色背景上简纯的打扎工具，右下角有一把微妒的深红色水把，像可乐的一点印记。</p>
|
|
<div class="tags">
|
|
<span class="tag">工具</span>
|
|
<span class="tag">简纯</span>
|
|
<span class="tag cola">可乐红点缀</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-file="icon-wave-square.svg" onclick="selectCard(this)">
|
|
<img class="card-icon" src="icon-wave-square.svg" alt="波波方块">
|
|
<h3>波波工具盒</h3>
|
|
<p class="desc">方块内上单部留白，底部有可乐色的水面波波和气波。中央白色千字符号表示工具属性。</p>
|
|
<div class="tags">
|
|
<span class="tag">工具平台</span>
|
|
<span class="tag">抽象设计</span>
|
|
<span class="tag cola">可乐波波</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-file="icon-ring-colared.svg" onclick="selectCard(this)">
|
|
<img class="card-icon" src="icon-ring-colared.svg" alt="可乐环">
|
|
<h3>红环星辰</h3>
|
|
<p class="desc">可乐红色外环包被深色内围，中央金色星辰符号。可乐色只作为外框存在，内部保持工具感。</p>
|
|
<div class="tags">
|
|
<span class="tag">几何</span>
|
|
<span class="tag">外环设计</span>
|
|
<span class="tag cola">可乐红框</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label old" style="margin-top:56px;">
|
|
<h2>原有设计</h2>
|
|
<p>较为直揍的风格设计，可乐元素表达更直揍</p>
|
|
</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 cola">可乐色调</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 cola">可乐框</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>深蓝紫背 + 红色C</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>
|
|
<tr>
|
|
<td>红环星辰</td>
|
|
<td>几何外环形</td>
|
|
<td>红色外环 + 金色星辰</td>
|
|
<td>红色圆环</td>
|
|
<td>精纯八边性最强</td>
|
|
</tr>
|
|
<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>
|
|
var selectedFile = null;
|
|
|
|
function selectCard(card) {
|
|
var cards = document.querySelectorAll('.card');
|
|
for (var i = 0; i < cards.length; i++) cards[i].classList.remove('selected');
|
|
card.classList.add('selected');
|
|
selectedFile = card.getAttribute('data-file');
|
|
var btn = document.getElementById('applyBtn');
|
|
btn.disabled = false;
|
|
btn.textContent = '\u5E94\u7528 "' + card.querySelector('h3').textContent + '" \u4E3A\u9879\u76EE\u56FE\u6807';
|
|
showSizes(selectedFile);
|
|
}
|
|
|
|
function showSizes(file) {
|
|
var grid = document.getElementById('sizes-grid');
|
|
grid.style.display = 'flex';
|
|
var sizes = [
|
|
{ w: 16, h: 16, label: '16x16 \u6D4F\u89C8\u5668\u6807\u7B7E' },
|
|
{ w: 32, h: 32, label: '32x32 \u6807\u51C6' },
|
|
{ w: 48, h: 48, label: '48x48 \u63A8\u8350' },
|
|
{ w: 64, h: 64, label: '64x64 \u6536\u85CF\u5939' },
|
|
{ w: 128, h: 128, label: '128x128 \u9AD8\u6E05' }
|
|
];
|
|
var html = '';
|
|
for (var i = 0; i < sizes.length; i++) {
|
|
var s = sizes[i];
|
|
html += '<div class="size-group">' +
|
|
'<img src="' + file + '" width="' + s.w + '" height="' + s.h + '">' +
|
|
'<div class="size-label">' + s.label + '</div>' +
|
|
'</div>';
|
|
}
|
|
grid.innerHTML = html;
|
|
}
|
|
|
|
function applyIcon() {
|
|
if (!selectedFile) return;
|
|
var name = card.querySelector('h3').textContent;
|
|
fetch(selectedFile).then(function(r) { return r.text(); }).then(function(svg) {
|
|
var blob = new Blob([svg], { type: 'image/svg+xml' });
|
|
var url = URL.createObjectURL(blob);
|
|
var a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'favicon.svg';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |