Webleb - Extraits de Code - Créateur de logo d'introduction Oddbods en ligne

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Oddbods Intro Logo Maker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Oddbods Intro Logo Maker</h1>
  <label>Choose character:
    <select id="characterSelect">
      <option value="izza">Izza</option>
      <option value="mekhi">Mekhi</option>
      <option value="marshmallow">Marshmallow</option>
      <option value="thatcher">Thatcher</option>
      <option value="pinku">Pinku</option>
    </select>
  </label>
  <label>Your text: <input id="customText" maxlength="20"></label>
  <button id="generateBtn">Generate Logo</button>
  <canvas id="logoCanvas" width="600" height="300"></canvas>
  <button id="downloadBtn">Download Logo</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oddbods Intro Logo Maker</title>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
    <style>
        :root {
            --pogo-blue: #00AEEF;
            --newt-pink: #EC008C;
            --bubbles-yellow: #FFF200;
            --fuse-red: #ED1C24;
            --zee-green: #8DC63F;
            --jeff-purple: #662D91;
            --slick-orange: #F7941D;
        }

body {
            font-family: 'Fredoka One', cursive;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0;
        }

.container {
            background: white;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 100%;
            text-align: center;
        }

h1 {
            color: var(--pogo-blue);
            text-shadow: 2px 2px var(--fuse-red);
            margin-bottom: 20px;
        }

#canvas-container {
            margin-bottom: 20px;
            border: 5px solid #333;
            border-radius: 15px;
            overflow: hidden;
            background: #fff;
            display: inline-block;
        }

.controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            text-align: left;
        }

.input-group {
            display: flex;
            flex-direction: column;
        }

label {
            margin-bottom: 5px;
            color: #555;
        }

input, select {
            padding: 10px;
            border-radius: 8px;
            border: 2px solid #ddd;
            font-family: 'Fredoka One', cursive;
        }

.color-palette {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: center;
            grid-column: span 2;
        }

.color-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid white;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: transform 0.2s;
        }

.color-btn:hover {
            transform: scale(1.1);
        }

.btn-download {
            grid-column: span 2;
            background: #8DC63F;
            color: white;
            padding: 15px;
            border: none;
            border-radius: 10px;
            font-size: 1.2rem;
            cursor: pointer;
            margin-top: 10px;
            transition: background 0.3s;
        }

.btn-download:hover {
            background: #76a835;
        }
    </style>
</head>
<body>

<div class="container">
        <h1>ODDBODS INTRO MAKER</h1>
        
        <div id="canvas-container">
            <canvas id="logoCanvas" width="600" height="300"></canvas>
        </div>

<div class="controls">
            <div class="input-group">
                <label>Intro Text</label>
                <input type="text" id="textInput" placeholder="Enter Name" value="POGO">
            </div>
            
            <div class="input-group">
                <label>Font Size</label>
                <input type="range" id="fontSize" min="40" max="150" value="100">
            </div>

<button class="btn-download" onclick="downloadLogo()">Download Intro Logo</button>
        </div>
    </div>

function changeTheme(variable) {
            currentColor = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
            draw();
        }

function draw() {
            const text = textInput.value.toUpperCase();
            const fontSize = fontSizeInput.value;

// Clear Canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Background Pattern (Oddbods Style)
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Draw colorful circle behind text
            ctx.beginPath();
            ctx.arc(canvas.width/2, canvas.height/2, 120, 0, Math.PI * 2);
            ctx.fillStyle = currentColor + '22'; // Transparent version
            ctx.fill();

// Text Settings
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = `bold ${fontSize}px 'Fredoka One'`;

// Draw Shadow/Stroke
            ctx.lineJoin = 'round';
            ctx.miterLimit = 2;
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 12;
            ctx.strokeText(text, canvas.width / 2, canvas.height / 2);

// Draw Main Text
            ctx.fillStyle = currentColor;
            ctx.fillText(text, canvas.width / 2, canvas.height / 2);

// Add "Eyes" detail to represent Oddbods
            drawEyes(canvas.width / 2, (canvas.height / 2) - (fontSize / 1.5));
        }

function drawEyes(x, y) {
            const eyeSpacing = 30;
            // White of eyes
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(x - eyeSpacing, y, 15, 0, Math.PI * 2);
            ctx.arc(x + eyeSpacing, y, 15, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();

// Pupils
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(x - eyeSpacing, y, 6, 0, Math.PI * 2);
            ctx.arc(x + eyeSpacing, y, 6, 0, Math.PI * 2);
            ctx.fill();
        }

function downloadLogo() {
            const link = document.createElement('a');
            link.download = 'oddbods-logo.png';
            link.href = canvas.toDataURL();
            link.click();
        }

// Event Listeners
        textInput.addEventListener('input', draw);
        fontSizeInput.addEventListener('input', draw);

// Initial Draw
        window.onload = () => {
            // Small delay to ensure font loads
            setTimeout(draw, 500);
        };
    </script>
</body>
</html>

const characterSelect = document.getElementById('characterSelect');
const customText = document.getElementById('customText');
const generateBtn = document.getElementById('generateBtn');
const logoCanvas = document.getElementById('logoCanvas');
const downloadBtn = document.getElementById('downloadBtn');
const ctx = logoCanvas.getContext('2d');

// Example character images mapping
const characters = {
  izza: 'https://mehkihenrywebsites.nekoweb.org/Oddbods Intro Logo Maker/images/izza.png',
  mekhi: 'https://mehkihenrywebsites.nekoweb.org/Oddbods Intro Logo Maker/images/mekhi.png',
  marshmallow: 'https://mehkihenrywebsites.nekoweb.org/Oddbods Intro Logo Maker/images/marshmallow.png',
  thatcher: 'https://mehkihenrywebsites.nekoweb.org/Oddbods Intro Logo Maker/images/thatcher.png',
  pinku: 'https://mehkihenrywebsites.nekoweb.org/Oddbods Intro Logo Maker/images/pinku.png',
};

function drawLogo() {
  ctx.clearRect(0, 0, logoCanvas.width, logoCanvas.height);
  const img = new Image();
  img.src = characters[characterSelect.value];
  img.onload = function () {
    // Draw character
    ctx.drawImage(img, 50, 50, 200, 200);
    // Draw text
    ctx.font = 'bold 48px Arial';
    ctx.fillStyle = '#ff5fa2';
    ctx.fillText(customText.value, 300, 150);
  }
}

generateBtn.onclick = drawLogo;

downloadBtn.onclick = function() {
  const link = document.createElement('a');
  link.download = 'oddbods_logo.png';
  link.href = logoCanvas.toDataURL();
  link.click();
};

Preview

Open Advanced Editor Full Screen