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>