let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">

  <h1 class="paintweb_appTitle">PaintWeb</h1>

  <!-- All elements with data-pwTabPanel become interactive tabbed panels which
  will also have a class name like .paintweb_tabPanel_id and a generic class
  name .paintweb_tabPanel. In this case the class names will be
  .paintweb_tabPanel_main and .paintweb_tabPanel.  -->

  <div data-pwTabPanel="main" data-pwTabDefault="main">

    <!-- All elements with data-pwTab will have a class name like
    .paintweb_tabPanelId_tabID and a generic class name .paintweb_tab. In this
    case the class names will be .paintweb_main_main and .paintweb_tab. -->
    <div data-pwTab="main">

      <!-- All elements with some #id will also have a class name like
      .paintweb_id. In this case the class name will be .paintweb_tools. -->
      <ul id="tools">

        <!-- All elements with data-pwCommand will have a class name like
        .paintweb_cmd_commandID and a generic class name .paintweb_command. In
        this case the class names will be .paintweb_cmd_historyUndo and
        .paintweb_command.  -->

        <li data-pwTool="selection" hidden>영역 선택</li>

        <span>
        	<li class="paintweb_buttonStyle" data-pwCommand="imageBright">밝게</li><br/>
        	<li class="paintweb_buttonStyle" data-pwCommand="imageDark">어둡게</li>
		</span>

		<li class="paintweb_toolSeparator">&#160;</li>

        <span>
        	<li class="paintweb_buttonStyle" data-pwCommand="selectionCrop">자르기</li><br/>
        	<li class="paintweb_buttonStyle" data-pwCommand="selectionForNumberPlate">번호판</li>
   		</span>
		<span>
			<li class="paintweb_buttonStyle" data-pwCommand="imageRotateLeft">왼쪽 회전</li><br/>
			<li class="paintweb_buttonStyle" data-pwCommand="imageRotateRight">오른쪽 회전</li>
		</span>

		<li class="paintweb_toolSeparator">&#160;</li>

		<span>
			<li class="paintweb_buttonStyle" data-pwCommand="selectionFill">가림막</li><br/>
			<li class="paintweb_buttonStyle" data-pwCommand="historyUndo">실행취소</li>
		</span>

        <li class="paintweb_toolSeparator">&#160;</li>

        <li>
        	<label class="w-px-60 pe-2 text-sm-end">차량번호</label><input type='text' id='vhrno' name='vhrno' class='form-control-sm my-1' /><br />
        	<label class="w-px-60 pe-2 text-sm-end">차량명</label><input type='text' id='vhclNm' name='vhclNm' class='form-control-sm my-1' disabled /><br />
        	<label class="w-px-60 pe-2 text-sm-end">색상</label><input type='text' id='vhclColr' name='vhclColr' class='form-control-sm my-1' disabled />
        </li>

        <li class="paintweb_toolSeparator">&#160;</li>

        <li class="paintweb_buttonStyle" data-pwCommand="imageSave">이미지 저장</li>

      </ul>


    </div>


  </div> <!-- .paintweb_tabPanel_main -->

  <div id="viewport">
    <div id="canvasContainer">
    </div>
    <div id="canvasResizer">Resize the image Canvas.</div>
  </div> <!-- .paintweb_viewport -->

  <div class="paintweb_statusbar">
    <p id="imageSize">WxH</p>

    <p id="statusZoom" title="Zoom image">
      <label>Zoom: <input id="imageZoom" type="number" min="20" max="400" value="100" step="10" /></label>
    </p>

    <p id="statusMessage">Status</p>
    <p id="viewportResizer">Resize the image viewport.</p>
  </div> <!-- .paintweb_statusbar -->

  <!-- Elements with data-pwFloatingPanel become interactive GUI components.
  These will also have two class names: .paintweb_floatingPanel and
  .paintweb_floatingPanel_id. In this case, the id is "colormixer". If you want
  to automatically hide the panel, simply use data-pwPanelHide="true".
  Additionally, you can make the panel resizable if you add
  data-pwPanelResizable="true". -->
  <div data-pwFloatingPanel="colormixer" data-pwPanelHide="true">
    <!-- Make sure you have the panel title in the h1 element. This will have
    the .paintweb_floatingPanel_title class name. -->
    <h1>Color mixer</h1>

    <!-- Wrap your content in a single div. This element will have the
    .paintweb_floatingPanel_content class name. -->
    <div>
      <ol class="paintweb_colormixer_preview">
        <li id="colormixer_colorActive"><span>&#160;</span> Active</li>
        <li id="colormixer_colorOld"><span>&#160;</span> Old</li>
      </ol>

      <ol class="paintweb_colormixer_actions">
        <li id="colormixer_btn_accept">Close</li>
        <li id="colormixer_btn_cancel">Cancel</li>
        <li id="colormixer_btn_saveColor">Save color</li>
        <li id="colormixer_btn_pickColor">Pick color</li>
      </ol>

      <div data-pwTabPanel="colormixer_selector" data-pwTabDefault="mixer">
        <div data-pwTab="mixer">
          <canvas id="colormixer_canvas" width="200" height="195">Your browser
          does not support Canvas.</canvas>
          <div id="colormixer_controls">
            <span id="colormixer_chartDot"></span>
            <span id="colormixer_slider"></span>
          </div>
        </div>

        <div data-pwTab="cpalettes">
          <select id="colormixer_cpaletteInput"></select>
          <div id="colormixer_cpaletteOutput"></div>
        </div>
      </div>

      <ol class="paintweb_colormixer_hexalpha">
        <li>
          <label>HEX
            <input id="ckey_hex" value="#RRGGBB" type="text" maxlength="7"
            pattern="#[a-f0-9]{6}" />
          </label>
        </li>
        <li>
          <label>Alpha
            <input id="ckey_alpha" value="100" type="number" min="0" max="100"
            step="1" />
          </label>
        </li>
      </ol>

      <form data-pwTabPanel="colormixer_inputs" data-pwTabDefault="rgb">
        <ol data-pwTab="rgb">
          <li>
            <input name="ckey" value="red" type="radio" />
            <label>Red
            <input name="ckey_red" value="0" type="number" min="0" max="255"
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="green" type="radio" />
            <label>Green
            <input name="ckey_green" value="0" type="number" min="0" max="255"
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="blue" type="radio" />
            <label>Blue
            <input name="ckey_blue" value="0" type="number" min="0" max="255"
            step="1" /></label>
          </li>
        </ol>

        <ol data-pwTab="hsv">
          <li>
            <input name="ckey" value="hue" type="radio" />
            <label>Hue
            <input name="ckey_hue" value="0" type="number" min="0" max="360"
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="sat" type="radio" />
            <label>Saturation
            <input name="ckey_sat" value="0" type="number" min="0" max="255"
            step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="val" type="radio" />
            <label>Value
            <input name="ckey_val" value="0" type="number" min="0" max="255"
            step="1" /></label>
          </li>
        </ol>

        <ol data-pwTab="lab">
          <li>
            <input name="ckey" value="cie_l" type="radio" />
            <label>Lightness
            <input name="ckey_cie_l" value="0" type="number" min="0"
            max="100" step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="cie_a" type="radio" />
            <label>a*
            <input name="ckey_cie_a" value="0" type="number" min="-85"
            max="94" step="1" /></label>
          </li>
          <li>
            <input name="ckey" value="cie_b" type="radio" />
            <label>b*
            <input name="ckey_cie_b" value="0" type="number" min="-109"
            max="95" step="1" /></label>
          </li>
        </ol>

        <ol data-pwTab="cmyk">
          <li>
            <label>Cyan
            <input name="ckey_cyan" value="0" type="number" min="0" max="100"
            step="1" /></label>
          </li>
          <li>
            <label>Magenta
            <input name="ckey_magenta" value="0" type="number" min="0"
            max="100" step="1" /></label>
          </li>
          <li>
            <label>Yellow
            <input name="ckey_yellow" value="0" type="number" min="0" max="100"
            step="1" /></label>
          </li>
          <li>
            <label>Key (Black)
            <input name="ckey_black" value="0" type="number" min="0" max="100"
            step="1" /></label>
          </li>
        </ol>
      </form> <!-- .paintweb_colormixer_inputs -->
    </div> <!-- content wrap -->
  </div> <!-- the colormixer floating panel -->

  <div data-pwFloatingPanel="about" data-pwPanelHide="true">
    <h1>About</h1>

    <div>
      <ul>
        <li id="version"><strong>Version:</strong> </li>
        <li><strong>Authors:</strong> <a href="http://www.robodesign.ro">Marius and Mihai Şucan (ROBO Design)</a></li>
        <li><strong>Modifier:</strong><a href="https://github.com/gujc71/imageEditor">gujc</a></li>

        <li><strong>Project site:</strong> <a href="http://code.google.com/p/paintweb">code.google.com/p/paintweb</a></li>
        <li><strong>Modified site:</strong> <a href="https://github.com/gujc71/imageEditor">github.com/gujc71/imageEditor</a></li>

        <li><strong>Code license:</strong> <a
          href="https://opensource.org/licenses/BSD-3-Clause" title="BSD License, version 3">New BSD License</a></li>
      </ul>

      <p>For user and developer documentation please check out the <a href="http://code.google.com/p/paintweb">project site</a>.</p>
    </div>
  </div>

</div>`;
