|
|
|
|
<!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">
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="math.js?v=4"></script>
|
|
|
|
|
<script type="text/javascript" src="aux.js?v=4"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_geometry.js?v=4"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_shaders.js?v=4"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl_listeners.js?v=5"></script>
|
|
|
|
|
<script type="text/javascript" src="webgl.js?v=4"></script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html, body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
cursor: crosshair;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas.movemode {
|
|
|
|
|
cursor: grab;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas.movemode.moving {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tools-wrapper {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 32px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: end;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tools {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background: #333;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
height: 42px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tool {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: #333;
|
|
|
|
|
transition: transform .1s ease-in-out;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tool:hover {
|
|
|
|
|
background: #888;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tool.active {
|
|
|
|
|
transform: translateY(-10px);
|
|
|
|
|
border-top-right-radius: 5px;
|
|
|
|
|
border-top-left-radius: 5px;
|
|
|
|
|
background: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tool img {
|
|
|
|
|
height: 24px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
filter: invert(100%);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<canvas id="c"></canvas>
|
|
|
|
|
|
|
|
|
|
<div class="tools-wrapper">
|
|
|
|
|
<div class="tools">
|
|
|
|
|
<div class="tool" 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>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
