|
|
|
|
<!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=67">
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="aux.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="heapify.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="bvh.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="math.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="tools.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_geometry.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_shaders.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_listeners.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_draw.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="index.js?v=67"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="client_send.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="client_recv.js?v=67"></script>
|
|
|
|
|
<script type="text/javascript" src="websocket.js?v=67"></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="debug-window dhide">
|
|
|
|
|
<div id="debug-stats" class="flexcol"></div>
|
|
|
|
|
<div class="debug-timings flexcol">
|
|
|
|
|
<div class="cpu"></div>
|
|
|
|
|
<div class="gpu"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<label><input type="checkbox" id="debug-red">Simple shader</label>
|
|
|
|
|
<label><input type="checkbox" id="debug-do-prepass">Depth prepass</label>
|
|
|
|
|
|
|
|
|
|
<div class="flexcol">
|
|
|
|
|
<label><input type="checkbox" id="debug-limit-from">Limit events from</label>
|
|
|
|
|
<input type="range" min="0" max="0" value="0" id="debug-render-from">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flexcol">
|
|
|
|
|
<label><input type="checkbox" id="debug-limit-to">Limit events to</label>
|
|
|
|
|
<input type="range" min="0" max="0" value="0" id="debug-render-to">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button id="debug-begin-benchmark" title="Do not forget to enable recording in your browser!">Benchmark</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sizer-wrapper">
|
|
|
|
|
<div class="sizer">
|
|
|
|
|
<input type="range" class="slider" id="stroke-width" min="0.01" step="0.01" 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/pen.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>
|
|
|
|
|
|
|
|
|
|
<div class="loader">
|
|
|
|
|
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<!-- <circle cx="64" cy="64" r="32" fill="none" stroke="black" opacity="0.5" stroke-width="3" stroke-linecap="round"/> -->
|
|
|
|
|
<path id="spinner-path" fill="none" stroke="#aaaaaa" stroke-width="3" stroke-linecap="round"/>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
