---
layout: default
title: Pixel Art - Shivering Playground
description: Create pixel art with an interactive grid canvas
---

<style>
  .pixelart-wrapper {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
  }

  .pixelart-wrapper h1 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--text-primary);
  }

  .pixelart-wrapper .subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 30px;
  }

  .back-link {
    display: inline-block;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1em;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .back-link:hover {
    background: var(--primary);
    color: white;
  }

  .wrapper {
    background: var(--surface);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 16px var(--shadow);
    border: 1px solid var(--border);
  }

  .options {
    margin-bottom: 20px;
  }

  .opt-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
  }

  .slider {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
  }

  .slider label {
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
  }

  .slider input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    outline: none;
  }

  .slider input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
  }

  .slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
  }

  .slider span {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 30px;
    text-align: center;
  }

  button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
  }

  button:active {
    transform: translateY(0);
  }

  #clear-grid {
    background: #ef4444;
  }

  #clear-grid:hover {
    background: #dc2626;
  }

  #erase-btn {
    background: #f59e0b;
  }

  #erase-btn:hover {
    background: #d97706;
  }

  #paint-btn {
    background: #10b981;
  }

  #paint-btn:hover {
    background: #059669;
  }

  input[type="color"] {
    appearance: none;
    background: transparent;
    width: 60px;
    height: 42px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
  }

  input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  input[type="color"]::-webkit-color-swatch {
    border: 2px solid var(--border);
    border-radius: 6px;
  }

  input[type="color"]::-moz-color-swatch {
    border: 2px solid var(--border);
    border-radius: 6px;
  }

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: var(--background);
    border-radius: 8px;
    padding: 20px;
  }

  .gridCol {
    height: 20px;
    width: 20px;
    border: 1px solid var(--border);
    cursor: crosshair;
  }

  .gridRow {
    display: flex;
  }

  @media (max-width: 768px) {
    .opt-wrapper {
      flex-direction: column;
      align-items: stretch;
    }

    .slider {
      min-width: 100%;
    }

    button {
      width: 100%;
    }

    .gridCol {
      height: 15px;
      width: 15px;
    }
  }
</style>

<div class="pixelart-wrapper">
  <a href="/playground/" class="back-link">← Back to Playground</a>

  <h1>🎨 Pixel Art</h1>
  <p class="subtitle">Create pixel art with an interactive grid</p>

  <div class="wrapper">
    <div class="options">
      <div class="opt-wrapper">
        <div class="slider">
          <label for="width-range">Width</label>
          <input type="range" id="width-range" min="1" max="35" value="16" />
          <span id="width-value">16</span>
        </div>
        <div class="slider">
          <label for="height-range">Height</label>
          <input type="range" id="height-range" min="1" max="35" value="16" />
          <span id="height-value">16</span>
        </div>
      </div>
      <div class="opt-wrapper">
        <button id="submit-grid">Create Grid</button>
        <button id="clear-grid">Clear Grid</button>
        <input type="color" id="color-input" value="#667eea" title="Paint Color" />
        <input type="color" id="bg-color-input" value="#ffffff" title="Canvas Background" style="border: 2px dashed var(--border);" />
        <button id="erase-btn">Erase</button>
        <button id="paint-btn">Paint</button>
      </div>
      <div class="opt-wrapper">
        <button id="save-btn" style="background: #8b5cf6;">💾 Save</button>
        <button id="download-btn" style="background: #06b6d4;">📥 Download PNG</button>
        <button id="gallery-btn" style="background: #ec4899;">🖼️ Gallery</button>
      </div>
    </div>
    <div class="container"></div>
  </div>

  <!-- Gallery Modal -->
  <div id="gallery-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 1000; padding: 20px; overflow-y: auto;">
    <div style="max-width: 1000px; margin: 0 auto; background: var(--surface); border-radius: 16px; padding: 30px;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h2 style="margin: 0; color: var(--text-primary);">🖼️ Saved Pixel Art</h2>
        <button id="close-gallery" style="background: #ef4444; padding: 8px 16px;">✕ Close</button>
      </div>
      <div id="gallery-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;">
        <!-- Gallery items will be inserted here -->
      </div>
      <p id="empty-gallery" style="text-align: center; color: var(--text-secondary); padding: 40px; display: none;">
        No saved artwork yet. Create something and click Save!
      </p>
    </div>
  </div>
</div>

<script src="script.js"></script>