Spectrum Momi: Mini Paint

Ya chikos aqui esta el super mini paint, uno de los gagdets más entretenidos en mi opinion, ojala les sirva muchooo.

CÓDIGO:

<div class="momi-paint-widget-left">
  <!-- Barra de título clásica -->
  <div class="paint-window-bar">
    <span class="paint-title">🎨 untitled - Paint</span>
    <div class="paint-window-controls">
      <span class="paint-btn-mini">_</span>
      <span class="paint-btn-mini">✕</span>
    </div>
  </div>

  <!-- Barra de Menú -->
  <div class="paint-menu-bar">
    <span>File</span><span>Edit</span><span>View</span><span onclick="clearCanvas()" class="clear-menu-btn">Clear</span>
  </div>

  <div class="paint-body">
    <!-- Lienzo interactivo -->
    <canvas id="momiPaintCanvasLeft" width="232" height="170"></canvas>
  </div>

  <!-- PALETA COMPLETA DE DOS FILAS -->
  <div class="paint-footer-palette">
    <!-- Indicador de color seleccionado a la izquierda -->
    <div class="selected-indicator-box">
      <div id="momiCurrentColorPreview" style="background: #000000;"></div>
    </div>
    
    <!-- Contenedor de la cuadrícula de colores -->
    <div class="colors-grid-container">
      <!-- FILA SUPERIOR -->
      <div class="color-pixel" style="background: #000000;" onclick="selectPaintColor('#000000')"></div>
      <div class="color-pixel" style="background: #808080;" onclick="selectPaintColor('#808080')"></div>
      <div class="color-pixel" style="background: #800000;" onclick="selectPaintColor('#800000')"></div>
      <div class="color-pixel" style="background: #808000;" onclick="selectPaintColor('#808000')"></div>
      <div class="color-pixel" style="background: #008000;" onclick="selectPaintColor('#008000')"></div>
      <div class="color-pixel" style="background: #008080;" onclick="selectPaintColor('#008080')"></div>
      <div class="color-pixel" style="background: #000080;" onclick="selectPaintColor('#000080')"></div>
      <div class="color-pixel" style="background: #800080;" onclick="selectPaintColor('#800080')"></div>
      <div class="color-pixel" style="background: #808040;" onclick="selectPaintColor('#808040')"></div>
      <div class="color-pixel" style="background: #004040;" onclick="selectPaintColor('#004040')"></div>
      <div class="color-pixel" style="background: #0080ff;" onclick="selectPaintColor('#0080ff')"></div>
      <div class="color-pixel" style="background: #004080;" onclick="selectPaintColor('#004080')"></div>
      <div class="color-pixel" style="background: #400080;" onclick="selectPaintColor('#400080')"></div>
      <div class="color-pixel" style="background: #804000;" onclick="selectPaintColor('#804000')"></div>

      <!-- FILA INFERIOR -->
      <div class="color-pixel" style="background: #ffffff;" onclick="selectPaintColor('#ffffff')"></div>
      <div class="color-pixel" style="background: #c0c0c0;" onclick="selectPaintColor('#c0c0c0')"></div>
      <div class="color-pixel" style="background: #ff0000;" onclick="selectPaintColor('#ff0000')"></div>
      <div class="color-pixel" style="background: #ffff00;" onclick="selectPaintColor('#ffff00')"></div>
      <div class="color-pixel" style="background: #00ff00;" onclick="selectPaintColor('#00ff00')"></div>
      <div class="color-pixel" style="background: #00ffff;" onclick="selectPaintColor('#00ffff')"></div>
      <div class="color-pixel" style="background: #0000ff;" onclick="selectPaintColor('#0000ff')"></div>
      <div class="color-pixel" style="background: #ff00ff;" onclick="selectPaintColor('#ff00ff')"></div>
      <div class="color-pixel" style="background: #ffff80;" onclick="selectPaintColor('#ffff80')"></div>
      <div class="color-pixel" style="background: #00ff80;" onclick="selectPaintColor('#00ff80')"></div>
      <div class="color-pixel" style="background: #e0f7fa;" onclick="selectPaintColor('#e0f7fa')"></div>
      <div class="color-pixel" style="background: #aab6ff;" onclick="selectPaintColor('#aab6ff')"></div>
      <div class="color-pixel" style="background: #ffa07a;" onclick="selectPaintColor('#ffa07a')"></div>
      <div class="color-pixel" style="background: #ffb6c1;" onclick="selectPaintColor('#ffb6c1')"></div>
    </div>
  </div>
</div>

<style>
.momi-paint-widget-left {
  all: initial;
  display: block;
  width: 250px;
  background: #d4d0c8;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0px #000;
  padding: 2px;
  box-sizing: border-box;
  font-family: 'Consolas', monospace;
  margin: 20px auto 20px 0;
  user-select: none;
}
.momi-paint-widget-left .paint-window-bar {
  background: #000080;
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.momi-paint-widget-left .paint-title {
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
}
.momi-paint-widget-left .paint-window-controls {
  display: flex;
  gap: 2px;
}
.momi-paint-widget-left .paint-btn-mini {
  background: #d4d0c8;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  font-size: 9px;
  padding: 0px 4px;
  color: #000;
  font-weight: bold;
}
.momi-paint-widget-left .paint-menu-bar {
  display: flex;
  gap: 8px;
  padding: 3px 4px;
  font-size: 11px;
  color: #000;
  border-bottom: 1px solid #808080;
}
.momi-paint-widget-left .clear-menu-btn {
  color: #ff3b30;
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;
}
.momi-paint-widget-left .paint-body {
  background: #808080;
  padding: 3px;
  display: flex;
  justify-content: center;
}
.momi-paint-widget-left canvas {
  background: #ffffff;
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  display: block;
  cursor: crosshair;
}
.momi-paint-widget-left .paint-footer-palette {
  display: flex;
  align-items: center;
  padding: 5px;
  background: #d4d0c8;
  gap: 6px;
  border-top: 1px solid #808080;
}
.momi-paint-widget-left .selected-indicator-box {
  width: 28px;
  height: 28px;
  background: #d4d0c8;
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.momi-paint-widget-left #momiCurrentColorPreview {
  width: 14px;
  height: 14px;
  border: 1px solid #000;
}
.momi-paint-widget-left .colors-grid-container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 1px;
  flex-grow: 1;
}
.momi-paint-widget-left .color-pixel {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('momiPaintCanvasLeft');
  const ctx = canvas.getContext('2d');
  const colorPreview = document.getElementById('momiCurrentColorPreview');
  
  let painting = false;
  let currentColor = '#000000';
  let brushSize = 3;

  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';

  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function endPosition() {
    painting = false;
    ctx.beginPath();
  }

  function draw(e) {
    if (!painting) return;
    const rect = canvas.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;

    ctx.lineWidth = brushSize;
    ctx.strokeStyle = currentColor;

    ctx.lineTo(clientX - rect.left, clientY - rect.top);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(clientX - rect.left, clientY - rect.top);
  }

  canvas.addEventListener('mousedown', startPosition);
  canvas.addEventListener('mouseup', endPosition);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseleave', endPosition);

  canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startPosition(e); });
  canvas.addEventListener('touchend', endPosition);
  canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e); });

  window.selectPaintColor = function(color) {
    currentColor = color;
    colorPreview.style.background = color;
    brushSize = (color === '#ffffff') ? 12 : 3;
  };

  window.clearCanvas = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };
});
</script>

Bueno en este código lo único que tienen que hacer es pegarlo en un gadget y debería funcionarles bien, lo que más podrían cambiar por si les queda muy pequeño o muy grande en su espacio, seria los pixeles de ancho que tiene, que es lo que puse en negritas, yo lo tengo en 250px como pueden ver, pq mi espacio es de 300x, así que ahí pueden probar y, solo si es necesario cambiarlo.

jueves, 2 de julio de 2026

Mini Paint

3 comentarios:

BANNER DE TEXTO

Translate