264 lines
9.3 KiB
HTML
264 lines
9.3 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>PlayerGuide — Texture Sheet</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet" />
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; min-height: 100%; }
|
||
body {
|
||
font-family: 'EB Garamond', Georgia, serif;
|
||
background:
|
||
radial-gradient(ellipse at 50% 0%, #1c2c48 0%, transparent 60%),
|
||
radial-gradient(ellipse at 100% 100%, #0d1422 0%, transparent 70%),
|
||
linear-gradient(180deg, #0a1018 0%, #050810 100%);
|
||
color: #d8c8a0;
|
||
padding: 60px 50px 80px;
|
||
}
|
||
h1 {
|
||
font-family: 'Cinzel', serif; font-weight: 700;
|
||
font-size: 36px; margin: 0 0 6px;
|
||
color: #ffd76a;
|
||
text-shadow: 0 0 14px rgba(197,151,46,0.5), 0 2px 0 #000;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.sub {
|
||
font-style: italic; color: #a89878;
|
||
margin: 0 0 36px; font-size: 16px;
|
||
}
|
||
.group {
|
||
margin: 0 0 44px;
|
||
}
|
||
.group-title {
|
||
font-family: 'Cinzel', serif; font-weight: 700;
|
||
font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
|
||
color: #ffd76a; text-shadow: 0 1px 0 #000;
|
||
display: flex; align-items: center; gap: 12px;
|
||
margin: 0 0 18px;
|
||
}
|
||
.group-title::before {
|
||
content: ''; width: 3px; height: 14px;
|
||
background: #ffd76a; box-shadow: 0 0 6px #ffd76a88;
|
||
}
|
||
.group-title::after {
|
||
content: ''; flex: 1; height: 1px;
|
||
background: linear-gradient(90deg, rgba(138,106,38,0.5), transparent);
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.item {
|
||
background: linear-gradient(180deg, rgba(28,44,72,0.4), rgba(10,16,24,0.4));
|
||
border: 1px solid rgba(255,215,106,0.18);
|
||
border-radius: 3px;
|
||
padding: 12px 12px 10px;
|
||
display: flex; flex-direction: column; align-items: center;
|
||
}
|
||
.preview {
|
||
width: 100%; aspect-ratio: 1 / 1;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background:
|
||
linear-gradient(45deg, #0d0905 25%, transparent 25%),
|
||
linear-gradient(-45deg, #0d0905 25%, transparent 25%),
|
||
linear-gradient(45deg, transparent 75%, #0d0905 75%),
|
||
linear-gradient(-45deg, transparent 75%, #0d0905 75%);
|
||
background-size: 16px 16px;
|
||
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
|
||
background-color: #18120a;
|
||
border: 1px solid rgba(125,90,42,0.4);
|
||
margin-bottom: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.preview.wide { aspect-ratio: 2 / 1; }
|
||
.preview.bar { aspect-ratio: 4 / 1; }
|
||
.preview img {
|
||
max-width: 100%; max-height: 100%;
|
||
image-rendering: pixelated;
|
||
}
|
||
.name {
|
||
font-family: 'Cinzel', serif; font-weight: 600;
|
||
font-size: 11px; color: #ffe9a0;
|
||
text-shadow: 0 1px 0 #000;
|
||
letter-spacing: 0.04em; text-align: center;
|
||
line-height: 1.2;
|
||
}
|
||
.size {
|
||
font-size: 10px; color: #a89878;
|
||
font-style: italic; margin-top: 3px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
/* Showcase row */
|
||
.showcase {
|
||
margin: 24px 0 40px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
.showcase-card {
|
||
background: linear-gradient(180deg, rgba(60,40,18,0.35), rgba(25,15,8,0.55));
|
||
border: 1px solid #5a4220;
|
||
box-shadow: inset 0 1px 0 rgba(255,200,100,0.18), 0 4px 12px rgba(0,0,0,0.5);
|
||
border-radius: 2px;
|
||
padding: 18px;
|
||
display: flex; gap: 14px; align-items: stretch;
|
||
}
|
||
.showcase-card h3 {
|
||
margin: 0 0 4px;
|
||
font-family: 'Cinzel', serif; font-weight: 700;
|
||
font-size: 14px; color: #ffe9a0; text-shadow: 0 1px 0 #000;
|
||
}
|
||
.showcase-card p {
|
||
margin: 0; font-style: italic; font-size: 12px; color: #a89878;
|
||
}
|
||
.progress-demo {
|
||
margin-top: 10px;
|
||
height: 14px; width: 100%; position: relative;
|
||
background: url('Card-Background.png');
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>PlayerGuide — лист текстур</h1>
|
||
<p class="sub">33 PNG-файла, готовы к конвертации в BLP. Шахматный фон под превью = прозрачность.</p>
|
||
|
||
<!-- Demo: показываем как они стыкуются вместе -->
|
||
<div class="group">
|
||
<div class="group-title">Демонстрация (как это смотрится в карточке)</div>
|
||
<div class="showcase">
|
||
<div class="showcase-card">
|
||
<img src="TypeIcon-Dungeon.png" width="44" height="44" alt="" />
|
||
<div style="flex:1;">
|
||
<h3>Пройти Кузню Крови</h3>
|
||
<p>Цитадель Адского Пламени • рек. уровень 61—64</p>
|
||
<div style="margin-top:8px; display:flex; gap:8px; align-items:center;">
|
||
<div style="flex:1; height:8px; background: url('ProgressBar-BG.png'); position:relative;">
|
||
<div style="width:35%; height:100%; background: url('ProgressBar-Fill.png');"></div>
|
||
</div>
|
||
<span style="font-family:Cinzel,serif; font-size:11px; color:#caa760;">0 / 1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-card" style="background: url('Card-Background.png'); border-color: #5a4220;">
|
||
<img src="StageBadge-Active.png" width="48" height="48" alt="" />
|
||
<div style="flex:1;">
|
||
<h3 style="color:#ffd76a;">Подготовка к Нордсколу</h3>
|
||
<p>Этап V из VII · 62% завершено</p>
|
||
<div style="margin-top:10px; height:14px; position:relative; background: url('ProgressBar-BG.png');">
|
||
<div style="width:62%; height:100%; background: url('ProgressBar-Fill.png');"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Группы текстур -->
|
||
<div class="group">
|
||
<div class="group-title">Бейджи этапов</div>
|
||
<div class="grid" id="stage"></div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-title">Прогресс-бар</div>
|
||
<div class="grid" id="progress"></div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-title">Карточка</div>
|
||
<div class="grid" id="card"></div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-title">Декор</div>
|
||
<div class="grid" id="decor"></div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-title">Обложки рекомендаций (биомы)</div>
|
||
<div class="grid" id="biome"></div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-title">Иконки типов целей</div>
|
||
<div class="grid" id="types"></div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-title">Иконки статусов</div>
|
||
<div class="grid" id="status"></div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-title">Кнопки</div>
|
||
<div class="grid" id="buttons"></div>
|
||
</div>
|
||
|
||
<script>
|
||
const groups = {
|
||
stage: [
|
||
['StageBadge-Active', '64×64'],
|
||
['StageBadge-Done', '64×64'],
|
||
['StageBadge-Locked', '64×64'],
|
||
],
|
||
progress: [
|
||
['ProgressBar-Fill', '128×16', 'bar'],
|
||
['ProgressBar-BG', '128×16', 'bar'],
|
||
],
|
||
card: [
|
||
['Card-Background', '256×256'],
|
||
['Card-Border', '256×32', 'bar'],
|
||
],
|
||
decor: [
|
||
['Section-Divider', '256×16', 'bar'],
|
||
['Corner-Ornament', '64×64'],
|
||
['Top-Wave-Glow', '512×64', 'bar'],
|
||
],
|
||
biome: [
|
||
['Biome-Fire', '256×128', 'wide'],
|
||
['Biome-Arcane', '256×128', 'wide'],
|
||
['Biome-Storm', '256×128', 'wide'],
|
||
['Biome-Shadow', '256×128', 'wide'],
|
||
['Biome-Nature', '256×128', 'wide'],
|
||
['Biome-Holy', '256×128', 'wide'],
|
||
],
|
||
types: [
|
||
['TypeIcon-Level', '64×64'],
|
||
['TypeIcon-Quest', '64×64'],
|
||
['TypeIcon-QuestChain', '64×64'],
|
||
['TypeIcon-Dungeon', '64×64'],
|
||
['TypeIcon-Raid', '64×64'],
|
||
['TypeIcon-Boss', '64×64'],
|
||
['TypeIcon-Achievement', '64×64'],
|
||
['TypeIcon-Reputation', '64×64'],
|
||
['TypeIcon-Profession', '64×64'],
|
||
['TypeIcon-Item', '64×64'],
|
||
['TypeIcon-Currency', '64×64'],
|
||
['TypeIcon-Custom', '64×64'],
|
||
],
|
||
status: [
|
||
['TypeIcon-Done', '64×64'],
|
||
['TypeIcon-Locked', '64×64'],
|
||
],
|
||
buttons: [
|
||
['Button-Up', '128×32', 'bar'],
|
||
['Button-Down', '128×32', 'bar'],
|
||
['Button-Highlight', '128×32', 'bar'],
|
||
],
|
||
};
|
||
|
||
for (const [groupId, items] of Object.entries(groups)) {
|
||
const el = document.getElementById(groupId);
|
||
for (const [name, size, shape] of items) {
|
||
const item = document.createElement('div');
|
||
item.className = 'item';
|
||
item.innerHTML = `
|
||
<div class="preview ${shape || ''}">
|
||
<img src="${name}.png" alt="${name}" />
|
||
</div>
|
||
<div class="name">${name}</div>
|
||
<div class="size">${size}</div>
|
||
`;
|
||
el.appendChild(item);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|