index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Elo 0.0.6</title>
    <link rel="stylesheet" type="text/css" href="elo.css">
  </head>
  <body style="display:flex;flex-direction:column;">
    <div id="log">
      <div id="log-content">
      </div>
      <button id="log-close" onclick="elo.closeLogEv()">닫기</button>
    </div>
    <div id="modal">
      <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
        <div id="modal-box" class="grey">
          <div>
            <select id="modal-menu-input"></select>
            <input id="modal-input" />
            <button id="modal-apply">생성</button>
          </div>
          <div id="modal-guide" style="font-size:0.8rem;color:#444444;padding:0.3rem 0 0.7rem 0;"></div>
          <div style="display:flex;flex-direction:column;">
            <button id="modal-close" onclick="elo.closeModalEv()">닫기</button>
          </div>
        </div>
      </div>
    </div>
    <div style="display:flex;margin:0.5rem 0 1.5rem 0;align-items:center;">
      <div style="flex:1;"></div>
      <div style="margin-right:0.5em;">카테고리</div>
      <select id="category-menu" class="grey" style="min-width:6em" onchange="elo.saveCategory()"></select>
    </div>
    <div style="flex:1;display:flex;">
      <div class="box-container">
        <div class="box-label"><div>쇼</div><div class="add-button" onclick="elo.openModalEv('show')">[+]</div></div>
        <div id="show-box" class="grey item-box"></div>
      </div>
      <!-- 샷 컨테이너 -->
      <div class="box-container">
        <div class="box-label"><div>그룹</div><div class="add-button" onclick="elo.openModalEv('group')">[+]</div></div>
        <div id="group-box" class="grey item-box"></div>
      </div>
      <div class="box-container">
        <div class="box-label"><div id="unit-label">유닛</div><div class="add-button" onclick="elo.openModalEv('unit')">[+]</div></div>
        <div id="unit-box" class="grey item-box"></div>
      </div>
      <div class="box-container">
        <div class="box-label"><div>파트</div><div class="add-button" onclick="elo.openModalEv('part')">[+]</div></div>
        <div id="part-box" class="grey item-box"></div>
      </div>
      <div class="box-container">
        <div class="box-label"><div>태스크</div><div class="add-button" onclick="elo.openModalEv('task')">[+]</div></div>
        <div id="task-box" class="grey item-box"></div>
      </div>
    </div>
    <div id="notifier-wrap" class="darkgrey" style="display:flex;padding:0.5rem;height:1.4rem;color:white;margin:0.5rem;">
      <div id="notifier"></div>
      <button id="console-btn" onclick="elo.openLogEv()" style="border:solid 1px black;border-radius:1px;padding:2px;background-color:#444444;color:black;display:flex;padding:4px;align-items:center;justify-content:center;"><div>···</div></button>
    </div>
    <template id="item-tmpl">
      <div class="item" style="flex:1;display:flex;">
        <div class="item-val" style="flex:1;"></div>
        <div class="item-mark"></div>
      </div>
    </template>
    <script>
      // You can also require other files to run in this process
      let elo = require('./elo.js');
    </script>
  </body>
</html>