games/tools/Pixel art studio/index.html

<style>
  * {
    box-sizing: border-box;
  }
  
  body {
    --space: clamp(1rem, 2vw, 2.5rem);
    --shadow: 0.6rem 0.6rem 0;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    margin: 0;
    padding: calc(var(--space) * 2) var(--space);
    background: lightblue;
    accent-color: turquoise;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  button {
    font-family: inherit;
    font-size: inherit;
    background: orchid;
    border: 0.22rem solid;
    border-radius: 0.3rem;
    padding: 0.2rem 1rem;
    box-shadow: 0.2rem 0.2rem 0;
  }
  
  button:hover,
  button:focus-visible {
    background: orange;
  }
  
  input[type="color"] {
    border: 0.22rem solid;
    border-radius: 0.3rem;
    box-shadow: 0.2rem 0.2rem 0;
    margin-right: 2rem;
  }
  
  h1 {
    font-family: 'Press Start 2P', cursive;
    font-weight: 400;
    margin: 0 0 var(--space);
    text-shadow: 0.1em 0.1em 0 orange;
  }
  
  p {
    margin: 0;
  }
  
  header {
    outline: 0.3rem solid;
    padding: var(--space);
    margin-bottom: calc(var(--space) * 2);
    box-shadow: var(--shadow);
    background: peachpuff;
  }
  
  .wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  
  @media (min-width: 70em) {
    .wrapper {
      max-width: 1200px;
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 0 2rem;
    }
  }
  
  .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: calc(var(--space) * 1.5);
    grid-column: 1;
  }
  
  .canvas {
    --sizeX: var(--cellSizeCol, calc(100% / var(--colCount, 40)));
    --sizeY: var(--cellSizeRow, calc(100% / var(--rowCount, 30)));
    
    grid-column: 1;
    position: relative;
    outline: 0.3rem solid;
    box-shadow: var(--shadow);
    margin-bottom: calc(var(--space) * 2);
    background: linear-gradient(to right, transparent calc(100% - 1px), lightgrey 0),
      linear-gradient(to bottom, transparent calc(100% - 1px), lightgrey 0), white;
    background-size: var(--sizeX) 100%, 100% var(--sizeY);
  }
  
  .draw-area {
    position: relative;
    aspect-ratio: 4 / 3;
    background-repeat: no-repeat;
    background-size: var(--sizeX) var(--sizeY);
  }
  
  .marker {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, var(--bg, black), var(--bg, black));
    aspect-ratio: 1;
    background-size: var(--sizeX) var(--sizeY);
    background-repeat: no-repeat;
    opacity: 0;
  }
  
  .css label {
    display: block;
  }
  
  textarea {
    display: block;
    width: 100%;
    border: 0.3rem 0.3rem 0;
    box-shadow: var(--shadow);
    margin-bottom: var(--space);
    padding: 0 1rem;
  }
  
  [data-undo] {
    background: orange;
  }
</style>
<script src="index.js"></script>
<div class="wrapper">
    <header>
      <h1>Pixel Art Studio</h1>
      <p>Make your own single-div pixel art with CSS.</p>
    </header>
    <div class="controls">
      <label for="colorPicker">Color picker</label>
      <input type="color" id="colorPicker">
      <label for="cellSize">Columns</label>
      <input type="range" min="10" max="60" id="columns" step="10" value="30">
      <button data-undo>Undo</button>
      <button data-clear>Clear</button>
      <button data-save>Save</button>
    </div>
    <div class="canvas">
      <div class="draw-area">
        <div class="marker"></div>
      </div>
    </div>
    <div class="css">
      <label for="css">CSS:</label>
      <textarea name="cssCode" id="css" rows="10"></textarea>
      <button data-copy>Copy to clipboard</button>
    </div>
</div>