JIT
Creating an app like Procreate called GlitchPaint
Log in
@that1kid
Lets make an app Just like procreate called GlitchPaint
DeepSeek V3

I'll help you create a simplified version of Procreate called GlitchPaint. We'll build a canvas-based drawing app with basic tools and a glitch effect feature.

Updated files
v1
@that1kid
MORE LIKE PROCREATE
DeepSeek V3

I'll enhance GlitchPaint to be more like Procreate with layers, more tools, and advanced features. Here's the improved version:

Updated files
v2
@that1kid
MORE LIKE PROCREATE
DeepSeek V3

I'll create a more advanced version of GlitchPaint with features similar to Procreate, including layers, brushes, and a more polished UI.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GlitchPaint Pro</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary: #1a1a1a;
      --secondary: #2a2a2a;
      --accent: #007aff;
      --text: #f0f0f0;
      --toolbar-bg: #1e1e1e;
      --panel-bg: #2a2a2a;
      --panel-border: #333;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }
    
    body {
      margin: 0;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--primary);
      color: var(--text);
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    #app {
      display: flex;
      flex: 1;
      height: 100%;
    }
    
    #main-toolbar {
      width: 60px;
      background: var(--toolbar-bg);
      padding: 10px 5px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      border-right: 1px solid var(--panel-border);
      z-index: 10;
    }
    
    #secondary-toolbar {
      width: 240px;
      background: var(--panel-bg);
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      border-right: 1px solid var(--panel-border);
      overflow-y: auto;
    }
    
    .tool {
      width: 50px;
      height: 50px;
      background: var(--panel-bg);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      cursor: pointer;
      font-size: 20px;
      transition: all 0.2s;
      position: relative;
    }
    
    .tool:hover {
      background: #333;
    }
    
    .tool.active {
      background: var(--accent);
    }
    
    .tool-badge {
      position: absolute;
      bottom: 2px;
      right: 2px;
      font-size: 10px;
      background: rgba(0,0,0,0.5);
      border-radius: 4px;
      padding: 1px 3px;
    }
    
    #canvas-container {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: #333;
      background-image: 
        linear-gradient(45deg, #444 25%, transparent 25%),
        linear-gradient(-45deg, #444 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #444 75%),
        linear-gradient(-45deg, transparent 75%, #444 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      image-rendering: pixelated;
      touch-action: none;
    }
    
    .panel-section {
      background: var(--panel-bg);
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 15px;
    }
    
    .panel-title {
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #999;
      text-transform: uppercase;
    }
    
    .slider-container {
      margin-bottom: 10px;
    }
    
    .slider-container label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      font-size: 12px;
    }
    
    input[type="range"] {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      background: #444;
      border-radius: 2px;
      outline: none;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      background: var(--accent);
      border-radius: 50%;
      cursor: pointer;
    }
    
    #color-picker {
      width: 100%;
      height: 30px;
      border: none;
      cursor: pointer;
      background: transparent;
      padding: 0;
    }
    
    #color-palette {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 10px;
    }
    
    .color-swatch {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      cursor: pointer;
      border*