Hugging Face's logo

Spaces:
ReikerXx
/
uex
Running

App Files Community
uex / Can.html
Reaperxxxx's picture
Reaperxxxx
Create Can.html
b8e67a5 verified
Raw History Blame Contribute Delete
19.3 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Reiker Gamer — Logo Maker</title>
<!-- Google Fonts (Orbitron is nice for gamer logos) -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@400;700&family=Bangers&display=swap" rel="stylesheet">
<style>
:root{
--bg:#0f1724;
--card:#0b1220;
--muted:#94a3b8;
--accent:#7c3aed;
--glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
body{
margin:0;
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto;
background: linear-gradient(180deg,#071029 0%, #081428 50%, #071129 100%);
color:#e6eef8;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:28px;
}
.wrap{
width:100%;
max-width:1100px;
display:grid;
grid-template-columns:420px 1fr;
gap:20px;
align-items:start;
}
.panel{
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius:12px;
padding:18px;
box-shadow: 0 6px 24px rgba(2,6,23,0.6);
border:1px solid rgba(255,255,255,0.03);
}
h1{font-size:18px;margin:0 0 12px 0}
label{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.row{display:flex;gap:8px;align-items:center}
input[type="text"], select, input[type="number"]{
width:100%;
padding:8px 10px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.04);
background:var(--glass);
color:inherit;
font-size:14px;
}
input[type="color"]{width:48px;height:42px;padding:0;border-radius:8px;border:0}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
canvas{
width:100%;
height:380px;
display:block;
background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
border-radius:10px;
border:1px solid rgba(255,255,255,0.03);
}
.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
button{
background:linear-gradient(90deg,var(--accent),#4c1d95);
color:white;padding:10px 14px;border-radius:10px;border:0;font-weight:600;cursor:pointer;
box-shadow: 0 6px 18px rgba(124,58,237,0.12);
}
.muted{color:var(--muted);font-size:13px;margin-top:6px}
.small{font-size:13px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02)}
footer{font-size:12px;color:var(--muted);margin-top:10px}
@media (max-width:980px){
.wrap{grid-template-columns:1fr; padding-bottom:30px}
canvas{height:320px}
}
</style>
</head>
<body>
<div class="wrap">
<!-- Left: Controls -->
<div class="panel">
<h1>Reiker Gamer — Logo Generator</h1>
<div>
<label>Brand Text</label>
<input id="brandText" type="text" value="Reiker Gamer" maxlength="24">
<label>Font</label>
<select id="fontSelect" class="small">
<option value="Orbitron, sans-serif">Orbitron (Gamer)</option>
<option value="Bangers, cursive">Bangers (Bold)</option>
<option value="Poppins, sans-serif">Poppins (Modern)</option>
</select>
<label class="row">Gradient Colors <span style="margin-left:auto;font-size:12px;color:var(--muted)">Left → Right</span></label>
<div class="row">
<input id="colorA" type="color" value="#7c3aed">
<input id="colorB" type="color" value="#06b6d4">
<input id="bgColor" type="color" value="#071129" title="Background color" style="margin-left:8px">
</div>
<label class="row">Badge Shape</label>
<div class="row" style="margin-top:6px">
<select id="shape" class="small">
<option value="none">No Badge</option>
<option value="circle">Circle</option>
<option value="shield">Shield</option>
<option value="hex">Hexagon</option>
</select>
<select id="iconStyle" class="small">
<option value="none">No Icon</option>
<option value="headset">Headset</option>
<option value="controller">Controller</option>
<option value="eye">Fierce Eye</option>
</select>
</div>
<label class="row">Effects</label>
<div class="controls">
<div>
<label>Glow Intensity <span class="muted" id="glowLabel">0.8</span></label>
<input id="glow" type="range" min="0" max="2" step="0.05" value="0.8">
</div>
<div>
<label>Shadow Blur <span class="muted" id="shLabel">10</span></label>
<input id="shadow" type="range" min="0" max="40" step="1" value="10">
</div>
</div>
<label class="row">Sizes / Export</label>
<div class="row" style="margin-top:6px">
<input id="canvasW" type="number" value="1200" min="400" class="small" style="width:120px" />
<input id="canvasH" type="number" value="600" min="200" class="small" style="width:120px" />
<button id="resizeBtn" style="background:#0ea5a4">Resize</button>
</div>
<div class="actions">
<button id="downloadPng">Download PNG</button>
<button id="downloadSvg">Download SVG</button>
<button id="randomBtn" style="background:#f59e0b">Surprise Me</button>
<button id="resetBtn" style="background:#334155">Reset</button>
</div>
<div class="muted">
Tip: Use "VIP" or "Gamer Tag" as text. SVG preserves vector quality for large prints.
</div>
<footer>Made for <strong>Reiker Gamer</strong> — tweak colors, shapes, and download. 🎮</footer>
</div>
</div>
<!-- Right: Canvas preview -->
<div class="panel" style="display:flex;flex-direction:column;gap:12px">
<canvas id="preview" width="1200" height="600"></canvas>
<div class="row" style="justify-content:space-between;align-items:center">
<div class="muted">Preview — live render</div>
<div class="muted">Canvas: <span id="csize">1200×600</span></div>
</div>
</div>
</div>
<script>
// Helpers and UI elements
const canvas = document.getElementById('preview');
const ctx = canvas.getContext('2d', { alpha: false });
const brandText = document.getElementById('brandText');
const colorA = document.getElementById('colorA');
const colorB = document.getElementById('colorB');
const bgColor = document.getElementById('bgColor');
const fontSelect = document.getElementById('fontSelect');
const glow = document.getElementById('glow');
const shadow = document.getElementById('shadow');
const shape = document.getElementById('shape');
const iconStyle = document.getElementById('iconStyle');
const downloadPng = document.getElementById('downloadPng');
const downloadSvg = document.getElementById('downloadSvg');
const randomBtn = document.getElementById('randomBtn');
const resetBtn = document.getElementById('resetBtn');
const resizeBtn = document.getElementById('resizeBtn');
const canvasW = document.getElementById('canvasW');
const canvasH = document.getElementById('canvasH');
const csize = document.getElementById('csize');
const glowLabel = document.getElementById('glowLabel');
const shLabel = document.getElementById('shLabel');
// Retina scaling function
function setCanvasSize(w,h){
const dpr = Math.max(1, window.devicePixelRatio || 1);
canvas.width = Math.round(w * dpr);
canvas.height = Math.round(h * dpr);
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
ctx.setTransform(dpr,0,0,dpr,0,0);
csize.textContent = `${w}×${h}`;
}
setCanvasSize(1200,600);
// Default render
function drawLogo(){
const w = canvas.width / (window.devicePixelRatio || 1);
const h = canvas.height / (window.devicePixelRatio || 1);
// background
ctx.fillStyle = bgColor.value;
ctx.fillRect(0,0,w,h);
// gradient text and badge
const grad = ctx.createLinearGradient(0,0,w,0);
grad.addColorStop(0, colorA.value);
grad.addColorStop(1, colorB.value);
// Badge drawing
if(shape.value !== 'none'){
drawBadge(shape.value, w, h);
}
// glow/shadow settings
const g = parseFloat(glow.value);
const sh = parseFloat(shadow.value);
// big brand text
const fontFamily = fontSelect.value;
const baseSize = Math.round(Math.min(w, h) * 0.18);
ctx.font = `900 ${baseSize}px ${fontFamily}`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// text shadow (glow)
ctx.shadowColor = hexToRgba(colorB.value, 0.85);
ctx.shadowBlur = g * 32 + sh * 0.3;
ctx.fillStyle = grad;
// stroke for separation
ctx.lineWidth = Math.max(2, Math.floor(baseSize * 0.04));
ctx.strokeStyle = 'rgba(0,0,0,0.45)';
ctx.strokeText(brandText.value, w*0.63, h*0.52);
ctx.fillText(brandText.value, w*0.63, h*0.52);
// small tagline
ctx.shadowBlur = 0;
ctx.font = `600 ${Math.round(baseSize*0.28)}px ${fontFamily}`;
ctx.fillStyle = 'rgba(255,255,255,0.88)';
ctx.fillText('GAMER', w*0.63, h*0.68);
// optional icon overlay (on left badge)
if(iconStyle.value !== 'none' && shape.value !== 'none'){
drawIcon(iconStyle.value, w, h);
}
}
// Badge shapes
function drawBadge(type, w, h){
const cx = w*0.25;
const cy = h*0.5;
const radius = Math.min(w,h)*0.28;
ctx.save();
ctx.translate(cx,cy);
// background radial glow
const rg = ctx.createRadialGradient(0,0,radius*0.1,0,0,radius*1.1);
rg.addColorStop(0, hexToRgba(colorA.value,0.45));
rg.addColorStop(1, hexToRgba(colorB.value,0.05));
ctx.fillStyle = rg;
ctx.beginPath();
ctx.ellipse(0,0,radius*1.15,radius*0.8,0,0,Math.PI*2);
ctx.fill();
// shape
ctx.fillStyle = hexToRgba('#0b1220', 0.85);
ctx.strokeStyle = hexToRgba('#ffffff', 0.06);
ctx.lineWidth = 2;
if(type === 'circle'){
ctx.beginPath(); ctx.arc(0,0,radius,0,Math.PI*2); ctx.fill(); ctx.stroke();
} else if(type === 'shield'){
// simple shield
const w2 = radius*0.9;
ctx.beginPath();
ctx.moveTo(-w2*0.9, -radius*0.7);
ctx.lineTo(w2*0.9, -radius*0.7);
ctx.lineTo(w2*0.9, radius*0.1);
ctx.quadraticCurveTo(0, radius*1.1, -w2*0.9, radius*0.1);
ctx.closePath();
ctx.fill(); ctx.stroke();
} else if(type === 'hex'){
ctx.beginPath();
for(let i=0;i<6;i++){
const a = Math.PI/3 * i - Math.PI/6;
const x = Math.cos(a)*radius;
const y = Math.sin(a)*radius*0.8;
if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
}
ctx.closePath(); ctx.fill(); ctx.stroke();
}
ctx.restore();
}
// Simple icons (vector-like)
function drawIcon(name, w, h){
const cx = w*0.25;
const cy = h*0.5;
const size = Math.min(w,h)*0.14;
ctx.save();
ctx.translate(cx,cy);
ctx.fillStyle = colorB.value;
ctx.strokeStyle = hexToRgba('#000',0.45);
ctx.lineWidth = Math.max(2, Math.floor(size*0.06));
if(name === 'headset'){
// ear cups
ctx.beginPath();
ctx.ellipse(-size*0.4,0,size*0.36,size*0.46,0,0,Math.PI*2);
ctx.ellipse(size*0.4,0,size*0.36,size*0.46,0,0,Math.PI*2);
ctx.fill();
// band
ctx.beginPath(); ctx.moveTo(-size, -size*0.45); ctx.quadraticCurveTo(0, -size*0.95, size, -size*0.45); ctx.stroke();
// mic
ctx.beginPath(); ctx.moveTo(size*0.6,size*0.2); ctx.lineTo(size*1.05,size*0.45); ctx.stroke();
} else if(name === 'controller'){
// base shape
ctx.beginPath();
ctx.moveTo(-size*0.9,0);
ctx.quadraticCurveTo(-size*0.6,-size*0.6, -size*0.1,-size*0.5);
ctx.quadraticCurveTo(size*0.1,-size*0.6, size*0.4,-size*0.35);
ctx.quadraticCurveTo(size*0.9,-size*0.05, size*0.9,size*0.35);
ctx.quadraticCurveTo(size*0.6,size*0.7, 0,size*0.6);
ctx.quadraticCurveTo(-size*0.25,size*0.75, -size*0.6,size*0.45);
ctx.closePath();
ctx.fill();
// buttons
ctx.fillStyle = '#fff';
ctx.beginPath(); ctx.arc(size*0.45,-size*0.05,size*0.06,0,Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(size*0.2, size*0.06,size*0.06,0,Math.PI*2); ctx.fill();
ctx.fillStyle = colorB.value;
} else if(name === 'eye'){
ctx.beginPath();
ctx.ellipse(0,0,size*0.9,size*0.5,0,0,Math.PI*2);
ctx.fill();
ctx.fillStyle = '#fff';
ctx.beginPath(); ctx.ellipse(0,0,size*0.36,size*0.36,0,0,Math.PI*2); ctx.fill();
ctx.fillStyle = '#000';
ctx.beginPath(); ctx.ellipse(0,0,size*0.12,size*0.12,0,0,Math.PI*2); ctx.fill();
}
ctx.restore();
}
// tiny util
function hexToRgba(hex, alpha=1){
const c = hex.replace('#','');
const bigint = parseInt(c, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgba(${r},${g},${b},${alpha})`;
}
// SVG generation - builds a simple SVG that approximates the canvas look
function buildSVG(){
const w = parseInt(canvas.style.width);
const h = parseInt(canvas.style.height);
const fontFamily = fontSelect.options[fontSelect.selectedIndex].text;
const brand = escapeXml(brandText.value);
const gradId = 'g1';
const svg = [];
svg.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`);
svg.push(`<defs>`);
svg.push(`<linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="${colorA.value}"/><stop offset="100%" stop-color="${colorB.value}"/></linearGradient>`);
svg.push(`</defs>`);
svg.push(`<rect width="${w}" height="${h}" fill="${bgColor.value}"/>`);
// badge (simple circle/shield/hex)
if(shape.value !== 'none'){
const cx = Math.round(w*0.25), cy = Math.round(h*0.5);
const r = Math.round(Math.min(w,h)*0.28);
if(shape.value === 'circle'){
svg.push(`<circle cx="${cx}" cy="${cy}" r="${r}" fill="#0b1220" stroke="rgba(255,255,255,0.06)" stroke-width="2"/>`);
} else if(shape.value === 'shield'){
// approximate shield path
const p = `${cx - r*0.9},${cy - r*0.7} ${cx + r*0.9},${cy - r*0.7} ${cx + r*0.9},${cy + r*0.1} ${cx},${cy + r*1.1} ${cx - r*0.9},${cy + r*0.1}`;
svg.push(`<path d="M ${p} Z" fill="#0b1220" stroke="rgba(255,255,255,0.06)" stroke-width="2"/>`);
} else if(shape.value === 'hex'){
let pts = [];
for(let i=0;i<6;i++){
const a = Math.PI/3 * i - Math.PI/6;
const x = Math.cos(a)*r + cx;
const y = Math.sin(a)*r*0.8 + cy;
pts.push(`${x},${y}`);
}
svg.push(`<polygon points="${pts.join(' ')}" fill="#0b1220" stroke="rgba(255,255,255,0.06)" stroke-width="2"/>`);
}
}
// text (center-right)
const fontFamilyCss = (fontSelect.value.split(',')[0]);
const fontSize = Math.round(Math.min(w,h)*0.18);
svg.push(`<text x="${Math.round(w*0.63)}" y="${Math.round(h*0.52)}" text-anchor="middle" dominant-baseline="middle" font-family="${fontFamilyCss}" font-weight="900" font-size="${fontSize}" fill="url(#${gradId})" stroke="rgba(0,0,0,0.45)" stroke-width="${Math.max(1,Math.floor(fontSize*0.04))}">${brand}</text>`);
svg.push(`<text x="${Math.round(w*0.63)}" y="${Math.round(h*0.68)}" text-anchor="middle" dominant-baseline="middle" font-family="${fontFamilyCss}" font-weight="600" font-size="${Math.round(fontSize*0.28)}" fill="rgba(255,255,255,0.9)">GAMER</text>`);
svg.push(`</svg>`);
return svg.join('');
}
function escapeXml(str){ return str.replace(/[<&>'"]/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'}[c]; }); }
// download helpers
function downloadBlob(blob, filename){
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = filename; document.body.appendChild(a); a.click();
setTimeout(()=>{ URL.revokeObjectURL(url); a.remove(); }, 500);
}
// Draw initial
drawLogo();
// UI events
[brandText, colorA, colorB, bgColor, fontSelect, glow, shadow, shape, iconStyle].forEach(el=>{
el.addEventListener('input', () => { drawLogo(); glowLabel.textContent = glow.value; shLabel.textContent = shadow.value; });
});
downloadPng.addEventListener('click', ()=>{
// create a PNG from canvas
const dataUrl = canvas.toDataURL('image/png');
fetch(dataUrl).then(res=>res.blob()).then(blob=>downloadBlob(blob, `reiker_gamer.png`));
});
downloadSvg.addEventListener('click', ()=>{
const svg = buildSVG();
const blob = new Blob([svg], {type:'image/svg+xml;charset=utf-8'});
downloadBlob(blob, 'reiker_gamer.svg');
});
randomBtn.addEventListener('click', ()=>{
// randomize a few settings
const colors = ['#ef4444','#f97316','#f59e0b','#06b6d4','#7c3aed','#06b6d4','#06b6d4','#ef4444','#14b8a6'];
colorA.value = colors[Math.floor(Math.random()*colors.length)];
colorB.value = colors[Math.floor(Math.random()*colors.length)];
shape.value = ['none','circle','shield','hex'][Math.floor(Math.random()*4)];
iconStyle.value = ['none','headset','controller','eye'][Math.floor(Math.random()*4)];
brandText.value = ['Reiker','ReikerG','REIKER','Reiker Gamer','Reik3r'][Math.floor(Math.random()*5)];
fontSelect.value = ['Orbitron, sans-serif','Bangers, cursive','Poppins, sans-serif'][Math.floor(Math.random()*3)];
glow.value = (Math.random()*1.2+0.2).toFixed(2);
shadow.value = Math.floor(Math.random()*28);
drawLogo();
});
resetBtn.addEventListener('click', ()=>{
brandText.value = 'Reiker Gamer';
colorA.value = '#7c3aed';
colorB.value = '#06b6d4';
bgColor.value = '#071129';
fontSelect.value = 'Orbitron, sans-serif';
glow.value = 0.8;
shadow.value = 10;
shape.value = 'circle';
iconStyle.value = 'headset';
canvasW.value = 1200; canvasH.value = 600;
setCanvasSize(1200,600);
drawLogo();
});
resizeBtn.addEventListener('click', ()=>{
const w = Math.max(400, parseInt(canvasW.value) || 1200);
const h = Math.max(200, parseInt(canvasH.value) || 600);
setCanvasSize(w,h);
drawLogo();
});
// keep canvas responsive on window resize (scale only display size)
window.addEventListener('resize', () => {
// no auto-resize of actual canvas to retain export size
});
// initial defaults
resetBtn.click();
</script>
</body>
</html>