paintjs/index.html at main · eunji0124/paintjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>PaintJS</title>
</head>
<body>
  <canvas id="jsCanvas" class="canvas"></canvas>
  <div class="controls">
    <div class="controls__range">
      <p>brush size</p>
      <input type="range" id="jsRange" min="0.1" max="10" step="0.1" value="2.5">
    </div>
    <div class="controls__btn">
      <button id="jsMode">Fill</button>
      <button id="jsSave">Save</button>
    </div>
    <div class="controls__colors" id="jsColors">
      <div class="controls__color jsColor" style="background-color: #2c2c2c;"></div>
      <div class="controls__color jsColor" style="background-color: #6a6a6a;"></div>
      <div class="controls__color jsColor" style="background-color: #aeaeae;"></div>
      <div class="controls__color jsColor" style="background-color: white;"></div>
      <div class="controls__color jsColor" style="background-color: #db1641;"></div>
      <div class="controls__color jsColor" style="background-color: #e44e6e;"></div>
      <div class="controls__color jsColor" style="background-color: #ea6d30;"></div>
      <div class="controls__color jsColor" style="background-color: #f59b6e;"></div>
      <div class="controls__color jsColor" style="background-color: #933202;"></div>
      <div class="controls__color jsColor" style="background-color: #743404;"></div>
      <div class="controls__color jsColor" style="background-color: #f9c804;"></div>
      <div class="controls__color jsColor" style="background-color: #fade6d;"></div>
      <div class="controls__color jsColor" style="background-color: #c0ca61;"></div>
      <div class="controls__color jsColor" style="background-color: #35523c;"></div>
      <div class="controls__color jsColor" style="background-color: blue;"></div>
      <div class="controls__color jsColor" style="background-color: rgb(60, 60, 187);"></div>
      <div class="controls__color jsColor" style="background-color: rgb(135, 164, 228);"></div>
      <div class="controls__color jsColor" style="background-color: purple;"></div>
      <div class="controls__color jsColor" style="background-color: plum;"></div>
    </div>
  </div>
  <!-- 라이브리 시티 설치 코드 -->
<div class="messageBox" id="lv-container" data-id="city" data-uid="MTAyMC81MjI4OS8yODc2OA==">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 라이브리 댓글 작성을 위해 JavaScript를 활성화 해주세요</noscript>
</div>
<!-- 시티 설치 코드 끝 -->
  <script src="app.js"></script>
</body>
</html>