update stock props
This commit is contained in:
parent
fe40fd32ab
commit
98590f63e7
18 changed files with 898 additions and 1 deletions
282
stock/avatar/index.html
Normal file
282
stock/avatar/index.html
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue