Spaces:

ReikerXx
/

uex

Running

App Files Files Community

Reaperxxxx commited on Oct 17, 2025

Commit

b8e67a5

verified ·

1 Parent(s): 276a6d5

Create Can.html

Browse files

Files changed (1) hide show

Can.html +482 -0

Can.html ADDED Viewed

	@@ -0,0 +1,482 @@

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