|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Desk</title>
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
|
|
|
|
|
|
<link rel="shortcut icon" href="icons/favicon.svg" id="favicon">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="default.css?v=38">
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="aux.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="math.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="tools.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_geometry.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_shaders.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_listeners.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_draw.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="index.js?v=38"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="client_send.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="client_recv.js?v=38"></script>
|
|
|
|
|
<script type="text/javascript" src="websocket.js?v=38"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<canvas id="c"></canvas>
|
|
|
|
|
|
|
|
|
|
<!-- <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" style="position: absolute; left:0; top: 0; pointer-events: none;">
|
|
|
|
|
<polyline points="150,150 225,230 280,120" / fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="5">
|
|
|
|
|
</svg> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="sizer-wrapper">
|
|
|
|
|
<div class="sizer">
|
|
|
|
|
<input type="range" class="slider" id="stroke-width" min="1" max="64">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="stroke-preview" class="dhide"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="pallete-wrapper">
|
|
|
|
|
<div class="pallete">
|
|
|
|
|
<div class="color" data-color="000000"><div class="color-pane" style="background: #000000;"></div></div>
|
|
|
|
|
<div class="color" data-color="ffffff"><div class="color-pane" style="background: #ffffff;"></div></div>
|
|
|
|
|
<div class="color" data-color="d65c5c"><div class="color-pane" style="background: #d65c5c;"></div></div>
|
|
|
|
|
<div class="color" data-color="d6835c"><div class="color-pane" style="background: #d6835c;"></div></div>
|
|
|
|
|
<div class="color" data-color="72d65c"><div class="color-pane" style="background: #72d65c;"></div></div>
|
|
|
|
|
<div class="color" data-color="5cd6ce"><div class="color-pane" style="background: #5cd6ce;"></div></div>
|
|
|
|
|
<div class="color" data-color="5c89d6"><div class="color-pane" style="background: #5c89d6;"></div></div>
|
|
|
|
|
<div class="color" data-color="6e5cd6"><div class="color-pane" style="background: #6e5cd6;"></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tools-wrapper">
|
|
|
|
|
<div class="tools">
|
|
|
|
|
<div class="tool active" data-tool="pencil"><img draggable="false" src="icons/draw.svg"></div>
|
|
|
|
|
<div class="tool" data-tool="ruler"><img draggable="false" src="icons/ruler.svg"></div>
|
|
|
|
|
<div class="tool" data-tool="eraser"><img draggable="false" src="icons/erase.svg"></div>
|
|
|
|
|
<div class="tool" data-tool="undo"><img draggable="false" src="icons/undo.svg"></div>
|
|
|
|
|
<!-- <div class="tool" data-tool="redo"><img draggable="false" src="icons/redo.svg"></div> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="phone-extra-controls">
|
|
|
|
|
<img draggable="false" src="icons/cheeseburga.svg">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="offline-toast hidden">
|
|
|
|
|
Whiteboard offline
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
