282 lines
7.4 KiB
HTML
282 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Avatar Renderer</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
background: #1a1a2e;
|
|
color: #eee;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.control-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.control-group label {
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
input[type="color"] {
|
|
width: 60px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-preview {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.avatar-grid-3x3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 120px);
|
|
grid-template-rows: repeat(3, 120px);
|
|
gap: 0;
|
|
}
|
|
|
|
.avatar-grid-3x3 .cell {
|
|
width: 120px;
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.avatar-grid-3x3 .cell > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-container img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
background: #16213e;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.avatar-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.avatar-card.selected {
|
|
outline: 3px solid #4cc9f0;
|
|
}
|
|
|
|
.avatar-card .avatar-small {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.avatar-card .avatar-small img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-card span {
|
|
font-size: 0.875rem;
|
|
text-transform: capitalize;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Avatar Renderer</h1>
|
|
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label for="primaryColor">Face Color</label>
|
|
<input type="color" id="primaryColor" value="#FFCC00">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="highlightColor">Highlight</label>
|
|
<input type="color" id="highlightColor" value="#FFE566">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="shadowColor">Shadow</label>
|
|
<input type="color" id="shadowColor" value="#CC9900">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="avatar-preview">
|
|
<div class="avatar-grid-3x3">
|
|
<div class="cell"></div>
|
|
<div class="cell"></div>
|
|
<div class="cell"></div>
|
|
<div class="cell"></div>
|
|
<div class="cell center">
|
|
<div class="avatar-container" id="mainAvatar">
|
|
<img src="face.svg" alt="Face base" class="face-layer">
|
|
<img src="smile.svg" alt="Expression" class="expression-layer">
|
|
</div>
|
|
</div>
|
|
<div class="cell"></div>
|
|
<div class="cell"></div>
|
|
<div class="cell">
|
|
<img src="body-torso.svg" alt="Torso">
|
|
</div>
|
|
<div class="cell"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="text-align: center; margin-bottom: 1rem;">Expressions</h2>
|
|
|
|
<div class="avatar-grid" id="avatarGrid"></div>
|
|
|
|
<script>
|
|
const expressions = [
|
|
'smile',
|
|
'neutral',
|
|
'angry',
|
|
'sad',
|
|
'laughing',
|
|
'surprised',
|
|
'confused',
|
|
'love',
|
|
'wink',
|
|
'thinking',
|
|
'sleeping',
|
|
'crying'
|
|
];
|
|
|
|
const avatarGrid = document.getElementById('avatarGrid');
|
|
const mainAvatar = document.getElementById('mainAvatar');
|
|
const primaryColorInput = document.getElementById('primaryColor');
|
|
const highlightColorInput = document.getElementById('highlightColor');
|
|
const shadowColorInput = document.getElementById('shadowColor');
|
|
|
|
let currentExpression = 'smile';
|
|
|
|
// Create avatar cards
|
|
expressions.forEach(expression => {
|
|
const card = document.createElement('div');
|
|
card.className = 'avatar-card' + (expression === 'smile' ? ' selected' : '');
|
|
card.dataset.expression = expression;
|
|
card.innerHTML = `
|
|
<div class="avatar-small">
|
|
<img src="face.svg" alt="Face base" class="face-layer">
|
|
<img src="${expression}.svg" alt="${expression}" class="expression-layer">
|
|
</div>
|
|
<span>${expression}</span>
|
|
`;
|
|
card.addEventListener('click', () => selectExpression(expression));
|
|
avatarGrid.appendChild(card);
|
|
});
|
|
|
|
function selectExpression(expression) {
|
|
currentExpression = expression;
|
|
|
|
// Update main preview
|
|
mainAvatar.querySelector('.expression-layer').src = `${expression}.svg`;
|
|
|
|
// Update selected state
|
|
document.querySelectorAll('.avatar-card').forEach(card => {
|
|
card.classList.toggle('selected', card.dataset.expression === expression);
|
|
});
|
|
}
|
|
|
|
// Color manipulation
|
|
async function updateColors() {
|
|
const primary = primaryColorInput.value;
|
|
const highlight = highlightColorInput.value;
|
|
const shadow = shadowColorInput.value;
|
|
|
|
// Fetch and modify the face SVG
|
|
const response = await fetch('face.svg');
|
|
const svgText = await response.text();
|
|
|
|
// Replace the CSS variable defaults with our colors
|
|
const modifiedSvg = svgText
|
|
.replace(/--face-primary:\s*#[A-Fa-f0-9]+/g, `--face-primary: ${primary}`)
|
|
.replace(/--face-highlight:\s*#[A-Fa-f0-9]+/g, `--face-highlight: ${highlight}`)
|
|
.replace(/--face-shadow:\s*#[A-Fa-f0-9]+/g, `--face-shadow: ${shadow}`)
|
|
// Also update the hardcoded gradient colors in defs
|
|
.replace(/stop-color="#FFFFFF"/g, 'stop-color="#FFFFFF"') // Keep white
|
|
.replace(/<stop offset="50%" class="face-highlight"\/>/g, `<stop offset="50%" stop-color="${highlight}"/>`)
|
|
.replace(/<stop offset="100%" class="face-primary"\/>/g, `<stop offset="100%" stop-color="${primary}"/>`)
|
|
.replace(/<stop offset="60%" class="face-primary"\/>/g, `<stop offset="60%" stop-color="${primary}"/>`)
|
|
.replace(/<stop offset="100%" class="face-shadow"\/>/g, `<stop offset="100%" stop-color="${shadow}"/>`);
|
|
|
|
// Create blob URL for modified SVG
|
|
const blob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
// Update all face layers
|
|
document.querySelectorAll('.face-layer').forEach(img => {
|
|
// Revoke old blob URL if exists
|
|
if (img.dataset.blobUrl) {
|
|
URL.revokeObjectURL(img.dataset.blobUrl);
|
|
}
|
|
img.src = url;
|
|
img.dataset.blobUrl = url;
|
|
});
|
|
}
|
|
|
|
primaryColorInput.addEventListener('input', updateColors);
|
|
highlightColorInput.addEventListener('input', updateColors);
|
|
shadowColorInput.addEventListener('input', updateColors);
|
|
</script>
|
|
</body>
|
|
</html>
|