Pensela/controller.html at master · PyrusMasquerade/Pensela · 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
63
64
<!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>Pensela</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="panel">
      <div class="logo"></div>
      <div class="tool-container text tool-item" title="Add Text">T</div>
      <div class="tool-container color">
        <div class="tool-item color main" colorData="b4deff"></div>
        <div class="tool-item color secondary one" colorData="ffb4bd"></div>
        <div class="tool-item color secondary two" colorData="b3fdd7"></div>
        <div class="tool-item color secondary three" colorData="fff2b9"></div>
        <div class="tool-item color secondary four" colorData="000"></div>
        <div
          class="tool-item color secondary transparent"
          colorData="00000000"
        ></div>
        <div class="tool-item color secondary custom" title="Choose A Custom Color"></div>
      </div>
      <div class="tool-container shapes">
        <div class="tool-item shapes polygon" title="Polygon"></div>
        <div class="tool-item shapes main line" title="Line"></div>
        <div class="tool-item shapes square" title="Square"></div>
        <div class="tool-item shapes triangle" title="Triangle"></div>
        <div class="tool-item shapes circle" title="Ellipse"></div>
      </div>
      <div class="tool-container sticker">
        <div class="tool-item sticker tick" title="Tick"></div>
        <div class="tool-item sticker cross" title="Cross"></div>
        <div class="tool-item sticker star" title="Star"></div>
        <div class="tool-item sticker pen main" title="Draw Freehand"></div>
        <div class="tool-item sticker eraser" title="Eraser"></div>
        <div class="tool-item sticker arrow single" title="Single Sided Arrow"></div>
        <div class="tool-item sticker arrow double" title="Double Sided Arrow"></div>
        <div class="tool-item sticker highlighter" title="Highlighter"></div>
        <div class="tool-item sticker clear" title="Clear All Drawings"></div>
      </div>
      <div class="tool-container bg tool-item" title="Choose Background Color"></div>
      <div class="tool-container win-controls">
        <div class="tool-item win-controls mouse main selected"></div>
        <div class="tool-item win-controls drag" title="drag"></div>
        <div class="tool-item win-controls screenshot" title="screenshot"></div>
        <div class="tool-item win-controls laser" title="laser pen"></div>
        <div class="tool-item win-controls visibility visible" title="Toggle Visibility"></div>
      </div>
      <div class="tool-container alt-controls">
        <div class="tool-item alt-controls redo" title="redo"></div>
        <div class="tool-item alt-controls stroke increase" title="increase stroke">▲</div>
        <div class="tool-item alt-controls exit">✖</div>
        <div class="tool-item alt-controls undo" title="undo"></div>
        <div class="tool-item alt-controls stroke decrease" title="decrease stroke">▼</div>
        <div class="tool-item alt-controls minimize">_</div>
      </div>
    </div>
  </body>
  <script src="./scripts/controller.js"></script>
</html>