Spaces:

ReikerXx
/

uex

Running

File size: 19,271 Bytes

b8e67a5

<!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>