drawing.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drawing App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="color-options">
      <input type="color" id="color" />
      <div
        class="color-option"
        style="background-color: #1abc9c"
        data-color="#1abc9c"
      ></div>
      <div
        class="color-option"
        style="background-color: #2ecc71"
        data-color="#2ecc71"
      ></div>
      <div
        class="color-option"
        style="background-color: #3498db"
        data-color="#3498db"
      ></div>
      <div
        class="color-option"
        style="background-color: #9b59b6"
        data-color="#9b59b6"
      ></div>
      <div
        class="color-option"
        style="background-color: #34495e"
        data-color="#34495e"
      ></div>
      <div
        class="color-option"
        style="background-color: #16a085"
        data-color="#16a085"
      ></div>
      <div
        class="color-option"
        style="background-color: #27ae60"
        data-color="#27ae60"
      ></div>
      <div
        class="color-option"
        style="background-color: #2980b9"
        data-color="#2980b9"
      ></div>
      <div
        class="color-option"
        style="background-color: #8e44ad"
        data-color="#8e44ad"
      ></div>
      <div
        class="color-option"
        style="background-color: #2c3e50"
        data-color="#2c3e50"
      ></div>
      <div
        class="color-option"
        style="background-color: #f1c40f"
        data-color="#f1c40f"
      ></div>
      <div
        class="color-option"
        style="background-color: #e67e22"
        data-color="#e67e22"
      ></div>
      <div
        class="color-option"
        style="background-color: #e74c3c"
        data-color="#e74c3c"
      ></div>
      <div
        class="color-option"
        style="background-color: #ecf0f1"
        data-color="#ecf0f1"
      ></div>
      <div
        class="color-option"
        style="background-color: #95a5a6"
        data-color="#95a5a6"
      ></div>
      <div
        class="color-option"
        style="background-color: #f39c12"
        data-color="#f39c12"
      ></div>
      <div
        class="color-option"
        style="background-color: #d35400"
        data-color="#d35400"
      ></div>
      <div
        class="color-option"
        style="background-color: #c0392b"
        data-color="#c0392b"
      ></div>
      <div
        class="color-option"
        style="background-color: #7f8c8d"
        data-color="#7f8c8d"
      ></div>
    </div>
    <div class="main-container">
      <canvas></canvas>
      <div class="btns">
        <div class="thickness-container">
          <div class="thickness-label">Thickness:</div>
          <input
            id="line-width"
            type="range"
            min="1"
            max="10"
            value="5"
            step="0.1"
          />
          <span id="thickness-value">5.0</span>
        </div>
        <div class="draw-mode-container">
          <button id="draw-btn" class="mode-btn active">✍🏻Draw</button>
          <button id="fill-btn" class="mode-btn">✋🏻DrawFill</button>
        </div>

        <button id="fillscreen-btn">📮FillScreen</button>
        <hr />
        <input type="text" id="text" placeholder="텍스트를 입력하세요!" />
        <button id="textfill-btn">👆TextFill</button>
        <hr />
        <button id="undo-btn">↩️ Undo</button>
        <button id="destroy-btn">✊🏿Destroy</button>
        <button id="eraser-btn">❌Erase</button>
        <hr />
        <label for="file">
          ✚Add Local Background
          <input type="file" accept="image/*" id="file"
        /></label>
        <button id="background-btn">🖼️Search & Apply Background</button>
        <button id="save">📲Save Image</button>   
        </div>
    </div>
    <div id="image-search-modal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>Search Images</h2>
          <span class="close">&times;</span>
        </div>
        <div class="search-container">
          <input type="text" id="image-search" placeholder="Search images...">
          <button id="search-btn">Search</button>
        </div>
        <div class="images-grid"></div>
        <div class="modal-footer">
          <button id="load-more">Load More</button>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>