Skip to content

Instantly share code, notes, and snippets.

@psychemedia

psychemedia/previewer.html

Last active October 23, 2025 09:37
Show Gist options
  • Save psychemedia/01c72c791ce8cd82a458e75d42ee9b03 to your computer and use it in GitHub Desktop.
Save psychemedia/01c72c791ce8cd82a458e75d42ee9b03 to your computer and use it in GitHub Desktop.
Download ZIP
PProtest Dyas Rebellion Nights template svg
Raw
previewer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Color Customizer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.header p {
opacity: 0.9;
font-size: 1.1em;
}
.content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 30px;
padding: 30px;
}
.controls {
display: flex;
flex-direction: column;
gap: 25px;
}
.color-group {
background: #f8f9fa;
padding: 20px;
border-radius: 12px;
border: 2px solid #e9ecef;
}
.color-group h3 {
margin-bottom: 15px;
color: #495057;
font-size: 1.1em;
}
.color-input {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.color-input label {
flex: 1;
font-weight: 500;
color: #495057;
}
.color-picker {
display: flex;
align-items: center;
gap: 10px;
}
input[type="color"] {
width: 60px;
height: 40px;
border: none;
border-radius: 8px;
cursor: pointer;
}
input[type="text"] {
width: 80px;
padding: 8px;
border: 2px solid #dee2e6;
border-radius: 6px;
font-family: 'Courier New', monospace;
text-transform: uppercase;
}
.preview {
display: flex;
flex-direction: column;
gap: 20px;
}
.svg-container {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
border: 2px solid #e9ecef;
}
.svg-container svg {
max-width: 100%;
height: auto;
}
.config-section {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
border: 2px solid #e9ecef;
}
.config-section h3 {
margin-bottom: 15px;
color: #495057;
}
.config-output {
background: #1e1e1e;
color: #d4d4d4;
padding: 20px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 14px;
white-space: pre;
overflow-x: auto;
line-height: 1.6;
}
.button-group {
display: flex;
gap: 10px;
margin-top: 15px;
}
button {
flex: 1;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.loading {
text-align: center;
padding: 40px;
color: #6c757d;
}
@media (max-width: 968px) {
.content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 SVG Color Customizer</h1>
<p>Customize colors for "PROTEST DAYS" & "REBELLION NIGHTS"</p>
</div>
<div class="content">
<div class="controls">
<div class="color-group">
<h3>📝 Upper Block (PROTEST DAYS)</h3>
<div class="color-input">
<label>Background:</label>
<div class="color-picker">
<input type="color" id="box1bg" value="#FF0000">
<input type="text" id="box1bg-text" value="FF0000" maxlength="6">
</div>
</div>
<div class="color-input">
<label>Text:</label>
<div class="color-picker">
<input type="color" id="box1text" value="#00FF00">
<input type="text" id="box1text-text" value="00FF00" maxlength="6">
</div>
</div>
</div>
<div class="color-group">
<h3>🌙 Lower Block (REBELLION NIGHTS)</h3>
<div class="color-input">
<label>Background:</label>
<div class="color-picker">
<input type="color" id="box2bg" value="#0000FF">
<input type="text" id="box2bg-text" value="0000FF" maxlength="6">
</div>
</div>
<div class="color-input">
<label>Text:</label>
<div class="color-picker">
<input type="color" id="box2text" value="#FF00FF">
<input type="text" id="box2text-text" value="FF00FF" maxlength="6">
</div>
</div>
</div>
</div>
<div class="preview">
<div class="svg-container" id="svg-preview">
<div class="loading">Loading SVG...</div>
</div>
<div class="config-section">
<h3>⚙️ Configuration Output</h3>
<div class="config-output" id="config-output"></div>
<div class="button-group">
<button class="btn-primary" onclick="copyConfig()">📋 Copy Config</button>
<button class="btn-primary" onclick="downloadSVG()">💾 Download SVG</button>
</div>
</div>
</div>
</div>
</div>
<script>
let svgTemplate = '';
const SVG_URL = 'https://gist.github.com/psychemedia/01c72c791ce8cd82a458e75d42ee9b03/raw/f3124add6ef1e2585516c25221cc9b0eaf4e82ba/protest_days_rebellion_nights.svg';
// Load SVG
async function loadSVG() {
try {
const response = await fetch(SVG_URL);
svgTemplate = await response.text();
updatePreview();
} catch (error) {
document.getElementById('svg-preview').innerHTML =
'<div class="loading">Error loading SVG. Please check the URL.</div>';
console.error('Error loading SVG:', error);
}
}
// Sync color picker with text input
function setupColorSync(colorId, textId) {
const colorInput = document.getElementById(colorId);
const textInput = document.getElementById(textId);
colorInput.addEventListener('input', (e) => {
const hex = e.target.value.substring(1).toUpperCase();
textInput.value = hex;
updatePreview();
});
textInput.addEventListener('input', (e) => {
let hex = e.target.value.replace(/[^0-9A-Fa-f]/g, '').substring(0, 6);
e.target.value = hex.toUpperCase();
if (hex.length === 6) {
colorInput.value = '#' + hex;
updatePreview();
}
});
}
// Update preview
function updatePreview() {
if (!svgTemplate) return;
const colors = {
box1bg: document.getElementById('box1bg-text').value,
box1text: document.getElementById('box1text-text').value,
box2bg: document.getElementById('box2bg-text').value,
box2text: document.getElementById('box2text-text').value
};
// Replace colors in SVG
let modifiedSVG = svgTemplate
.replace(/fill="rgb\(100%, 0%, 0%\)"/g, `fill="#${colors.box1bg}"`)
.replace(/fill="rgb\(0%, 100%, 0%\)"/g, `fill="#${colors.box1text}"`)
.replace(/fill="rgb\(0%, 0%, 100%\)"/g, `fill="#${colors.box2bg}"`)
.replace(/fill="rgb\(100%, 0%, 100%\)"/g, `fill="#${colors.box2text}"`);
document.getElementById('svg-preview').innerHTML = modifiedSVG;
updateConfig(colors);
}
// Update config output
function updateConfig(colors) {
const config = `colors:
box1bg: "${colors.box1bg}"
box1text: "${colors.box1text}"
box2bg: "${colors.box2bg}"
box2text: "${colors.box2text}"
pagecolor: "none"`;
document.getElementById('config-output').textContent = config;
}
// Copy config to clipboard
function copyConfig() {
const config = document.getElementById('config-output').textContent;
navigator.clipboard.writeText(config).then(() => {
alert('✅ Configuration copied to clipboard!');
});
}
// Download SVG
function downloadSVG() {
const svgElement = document.querySelector('#svg-preview svg');
if (!svgElement) return;
const svgData = new XMLSerializer().serializeToString(svgElement);
const blob = new Blob([svgData], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'protest_days_rebellion_nights_custom.svg';
link.click();
URL.revokeObjectURL(url);
}
// Initialize
setupColorSync('box1bg', 'box1bg-text');
setupColorSync('box1text', 'box1text-text');
setupColorSync('box2bg', 'box2bg-text');
setupColorSync('box2text', 'box2text-text');
loadSVG();
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
protest_days_rebellion_nights.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment