<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="ipcweb.co.jp">
    <!-- <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    /> -->
    <meta
    name="viewport"
    content="width=310, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  />
    <meta name="author" content="ipc">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/paint.css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/script.js"></script>

    <title>Pandom Board</title>
  </head>

  <body oncontextmenu="return false;">
    <div id="container">
      <div id="start-page">
        <p>PANDOM BOARD</p>
        <img class="panda-icon" src="images/main/chara_panda_stand0.png" alt="">
        <div id="setting-area">
          <div class="setting1">
            <label for="soundon">SOUND<input type="checkbox" name="soundon" id="soundon" checked></label>
          </div>
        </div>
        <div id="start-btn">
        </div>
        <div id="created">
          <img src="images/main/created.png" alt="">
        </div>
        <div id="ipc-link">
          <p>Thank you for playing!</p>
          <div><a href="http://www.ipcweb.co.jp/"><img class="logo" src="images/main/logo.png" alt=""></a></div>
          <img class="cancel-icon" src="images/main/cancel.png" alt="">
        </div>
      </div>
      <div id="main-page">
        <div id="frame-area">
          <div id="main-area">
            <div id="finish-area">
              <div id="note-area">
                <div id="note-left-area">
                  <img id="board-left" src="images/main/brankColor.png">
                    <div id="stamp-left"></div>
                  </img>
                  <div id="click-anime-left"></div>
                </div>
                <div id="note-right-area">
                  <img id="board-right" src="images/main/brankColor.png">
                    <div id="stamp-right"></div>
                  </img>
                  <div id="click-anime-right"></div>
                </div>
              </div>
              <div id="click-area">
                <div id="click-left-area"></div>
                <div id="click-right-area"></div>
                <div id="pin1"></div>
                <div id="pin2"></div>
              </div>
            </div>
            <div id="cout-down-area"></div>
          </div>
          <div id="start-btn-area">
            <img src="images/main/btn_start01.png" alt="" />
          </div>
          <div id="reset-btn-area">
            <img src="images/main/btn_reset01.png" alt="" />
          </div>      
    
        </div>
      </div>
      <div id="paint-page">

        <!-- 手書きエリア -->
        <div id="draw-area">
          <div id="draw-paper">
            <canvas id="draw-canvas-left"></canvas>
            <canvas id="draw-canvas-right"></canvas>
            <img id= "draw-clear-img" src="" alt="">
          </div>
          <div id="draw-btn-area">
            <div id="return-btn">
              <img src="images/paint/btn_comp_off.png" alt="" />
            </div>
            <div id="pallet-btn">
              <img src="images/paint/btn_pen_off.png" alt="" />
            </div>
            <div id="clear-btn">
              <img src="images/paint/btn_clear_off.png" alt="" />
            </div>
          </div>
        </div>

        <!-- パレット背景カバー -->
        <div id="pallet-cover">
          <!-- パレットエリア -->
          <div id="paint-area">
            <div id="paint-paper">
              <div id="paint-sample-text">sample</div>
              
              <!-- <canvas id="paint-canvas-left"></canvas>
              <canvas id="paint-canvas-right"></canvas> -->
            </div>
            <div id="width-range">
              <input id="range-bar" type="range" min="1" max="40" step="1" />
            </div>
            <div id="color-pallet">
              <table id="pallet-pattern">
                <tr>
                  <td class="select-color" id="RED"></td>
                  <td class="select-color" id="YELLOW"></td>
                  <td class="select-color" id="GREEN"></td>
                  <td class="select-color" id="AQUA"></td>
                  <td class="select-color" id="BLUE"></td>
                  <td class="select-color" id="MAGENTA"></td>
                </tr>
                <tr>
                  <td class="select-color" id="ORANGE"></td>
                  <td class="select-color" id="LIME"></td>
                  <td class="select-color" id="LIGHTGREEN"></td>
                  <td class="select-color" id="DODGERBLUE"></td>
                  <td class="select-color" id="BLUEVIOLET"></td>
                  <td
                    class="select-color color-pallet-selected"
                    id="BLACK"
                  ></td>
                </tr>
              </table>
            </div>
            <div id="pen-type-area">
              <div class="pen-type" data-font="0">
                <img src="images/paint/font0.png" alt="" />
              </div>
              <div class="pen-type" data-font="1">
                <img src="images/paint/font1.png" alt="" />
              </div>
              <div class="pen-type pen-type-selected"  data-font="2">
                <img src="images/paint/font2.png" alt="" />
              </div>
              <div class="pen-type" data-font="3">
                <img src="images/paint/font3.png" alt="" />
              </div>
            </div>
            <div id="button-area">
              <button id="paint-ok-btn">OK</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
