PearBoard/index.html at main · Codesamp-Rohan/PearBoard · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Whiteboard — Vanilla JS</title>
  <link rel="stylesheet" href="./style.css" />
  <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body>
<button id="state-details" type="button">!</button>

<div id="titlebar">
  <pear-ctrl></pear-ctrl>
  <p id="version">1.0.7</p>
</div>

<!--Canvas Create/Join Setup-->
<div id="setup" style="z-index: 999; overflow: hidden">
  <div id="rooms-list-container">
    <div style="display: flex; flex-direction: column; gap: 16px; height: 90%">
    <h5 style="padding: 0 8px">Canvas Room History</h5>
    <div id="rooms-list" class="">
    </div>
    </div>
    <div class="account-details hidden" style="display: flex; flex-direction: row; align-items: center; gap: 4px;">
      <button id="logout-btn" type="button">Logout <i class="fas fa-sign-out icon" title="Logout icon"></i></button>
      <button id="account-btn" type="button">Account Info ! </button>
    </div>
  </div>
  <div id="create-join-container">
    <div id="room-name-form" class="hidden" style="display: flex; flex-direction: row; gap: 4px;">
      <button class="button"  type="button" id="room-name-btn"><img class="icon" src="assets/icons/join.png" alt="icon" />Add Name</button>
      <input required id="room-name-input" type="text" placeholder="Canvas Name!!!" />
    </div>
  <div>
    <button class="button" id="create-canvas"><img class="icon" src="assets/icons/create.png" alt="icon" />Create</button>
  </div>
  <div id="or">
    - or -
  </div>
  <div id="join-form" style="display: flex; flex-direction: row; gap: 4px;">
    <button class="button"  type="button" id="join-canvas"><img class="icon" src="assets/icons/join.png" alt="icon" />Join</button>
    <input required id="join-canvas-topic" type="text" placeholder="Canvas Topic!!!" />
  </div>
  </div>
</div>
<div id="loading" class="hidden">Loading ...</div>
<header class="toolbar hidden" role="toolbar" aria-label="Whiteboard toolbar">
  <div class="btn--container">
  <div class="group" id="tools" style="gap: 4px;">
    <button class="btn active" data-tool="pen" title="Pen (P)"><img class="icon" src="assets/icons/pen.png" alt="icon" /></button>
    <button class="btn" data-tool="eraser" title="Eraser (E)">🧽</button>
    <button class="btn" data-tool="line" title="Line (L)">／</button>
    <button class="btn" data-tool="rect" title="Rectangle (R)">▭</button>
    <button class="btn" data-tool="ellipse" title="Ellipse (O)">⬭</button>
    <button class="btn" data-tool="diamond" title="Diamond (D)">⬥</button>
    <button class="btn" data-tool="text" title="Text (T)">🅣</button>
    <button class="btn" data-tool="hand" title="Hand (H)">✋🏿</button>
    <button id="undo" class="btn" title="Undo (Ctrl/Cmd+Z)"><i class="fas fa-undo undo-icon" title="Undo"></i></button>
    <button id="redo" class="btn" title="Redo (Ctrl/Cmd+Shift+Z)"><i class="fas fa-redo redo-icon" title="Redo"></i></button>
    <button id="clear" class="btn" title="Clear"><img src="./assets/icons/clean.png" class="icon" alt="clean-icon"></button>
    <button id="save" class="btn" title="Save PNG"><i class="fas fa-download download-icon" title="Download room"></i></button>
    <button id="save-state" class="btn" title="Save State">Save State</button>
    <button id="delete-state" class="btn" title="Delete State">❌</button>
  </div>
  </div>
  <div class="drawing-controls">
    <button type="button" id="toggleControls" class="controls-toggle" aria-label="Toggle drawing controls" aria-expanded="false">
      <img class="icon" src="assets/icons/options.png" alt="Drawing options" />
      <h5>Brush Settings</h5>
    </button>

    <div class="controls-container" id="controlsContainer">
      <div class="group column" id="colorGroup">
        <label class="label">Stroke</label>
        <div style="width: 100%; display: flex; flex-direction: row; align-items: center; gap: 4px;">
          <span style="width: 20px; height: 20px; overflow: hidden; border-radius: 12px;position: relative">
            <input id="color" type="color" value="#111111" style="position: absolute;padding: 0;border: none;top: 50%;left: 50%;transform: translate(-50%, -46%);scale: 1.1;"/>
          </span>
          <p id="color-text">#111111</p>
        </div>
      </div>

      <div class="group column" id="sizeGroup">
        <div style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between">
          <label class="label">Size: </label>
          <p id="size-text">6px</p>
        </div>
        <input id="size" type="range" min="1" max="100" value="6" />
      </div>

      <div class="group column" id="opacityGroup">
        <div style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between">
          <label for="opacity-control" class="label">Opacity: </label>
          <p id="opacity-text">1</p>
        </div>
        <input type="range" id="opacity-control" min="0" max="1" step="0.05" value="1" />
      </div>
    </div>
  </div>
</header>

<!--Canvas Board-->
<main class="board-wrap hidden">

  <!--Floaters-->
  <div class="left-top-data">
    <p class="drag-msg">Use <b>shift</b> to drag</p>
<!--    Buttons-->
    <button class="load-state-btn" type="button">
      <p>💾 Load State</p>
    </button>
    <button class="slide-state-btn" type="button">
      <p>💾 Slide State</p>
    </button>
    <button class="canvas-room-key hidden" type="button">
      <p>Canvas Topic</p><p id="canvas-topic"></p><img class="icon" src="./assets/icons/copy.png" alt="copy-img">
    </button>
    <button class="group hidden" type="button" id="peer-count-btn">
      <p>Peers Count : </p><p id="peers-count">1</p>
    </button>
    <div>
      <button style="display: flex; flex-direction: row; align-items: center; gap: 4px;" class="button peer-name-container" type="button">
        <p id="local-peer-name" class="name--btn"></p>
        <img class="icon" src="./assets/icons/arrow.png" alt="copy-img">
      </button>
      <div class="hidden" id="name--input--popup">
        <input style="font-size: 12px;" id="username-input" placeholder="Enter your name" />
        <button style="font-size: 12px;" id="username-submit">Submit</button>
      </div>
    </div>
  </div>
  <div id="slide-state-container" class="hidden">
    <button id="slide-state-close-btn">Close</button>
  </div>
  <div id="zoom-scale-display" style="">
    <button class="zoom_min">-</button>100%<button class="zoom_max">+</button>
  </div>
  <canvas id="board" aria-label="Drawing canvas"></canvas>
  <p id="mouse-follower">You</p>
</main>

<script src="/app.js" type="module"></script>
</body>
</html>