-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (86 loc) · 4.6 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EYGEZS6L61"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-EYGEZS6L61');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" type="image/png" sizes="32x32">
<title>Free Online Whiteboard for Meetings, Classes and Tutorials | Quick and Easy to Use</title>
<meta name="description" content="A quick and easy to use online whiteboard for online meetings, classes and tutorials">
<meta name="robots" content="index, follow">
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/jpg" href="./favicon.ico" />
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"></script>
</head>
<body>
<div class="overlay-spinner" id="overlay-spinner">
<img src="images\spinner.gif" alt="Loading">
</div>
<div class="wrapper">
<div class="header">
<div class="tools">
<div id="title"><a href="https://graphboard.netlify.app/">Graph Board</a></div>
<div class="colorpallete" id="colorpallete">
<input type="button" id="blue" class="color" style="background: #246bad;" value="#246bad">
<input type="button" id="purple" class="color" style="background: #660066a6;" value="#660066a6">
<input type="button" id="green" class="color" style="background: #0aa30abb;" value="#0aa30abb">
<input type="button" id="aqua" class="color" style="background: #00c6e0c0;" value="#00c6e0c0">
<input type="button" id="red" class="color" style="background: #df2727;" value="#df2727">
<input type="button" id="orange" class="color" style="background: #ffa500; " value="#ffa500">
<input type="button" id="yellow" class="color" style="background: #ffff00;" value="#ffff00">
<input type="button" id="brown" class="color" style="background: #808080;" value="#808080">
<input type="button" id="black" class="color" style="background: #303030f1;" value="#303030f1">
</div>
<button class="collapse-btn"><i class="fas fa-chevron-right"></i></button>
<button class="lg-button" id="draw"><i class="fas fa-pen"></i></button>
<button class="lg-button" id="clear"><i class="far fa-trash-alt"></i></button>
<button class="lg-button" id="erase"><i class="fas fa-eraser"></i></button>
<button class="lg-button" id="select"><i class="fas fa-arrows-alt"></i></button>
<button class="lg-button" id="undo"><i class="fas fa-undo"></i></button>
<button class="lg-button" id="redo"><i class="fas fa-redo"></i></button>
<button class="lg-button" id="save"><i class="far fa-save"></i></button>
<!-- <div class="grid-toggle">
<label for="grid">Grid</label>
<input type="checkbox" checked name="grid" id="grid">
</div> -->
</div>
</div>
<div class="content">
<div class="artboard" id="artboard">
<canvas class="canvas" id="canvas"></canvas>
</div>
</div>
<div class="modal-bg" id="modal-bg">
<div class="modal">
<label for="filename">Save As</label>
<input type="text" name="filename" id="filename" value="my-work" placeholder="Filename">
<button id="save-img"><i class="far fa-file-image"></i> Download as JPEG</button>
<button id="save-pdf"><i class="far fa-file-pdf"></i></i> Download as PDF</button>
<span class="modal-close" id="modal-close"><i class="fas fa-times"></i></span>
</div>
</div>
<div class="download-status" id="download-status">
<p>Downloading...</p>
</div>
<!-- Scroll Pad -->
<div class="scroll-pad">
<p>Scroll</p>
</div>
</div>
<script src="js/fabric.js" type="text/javascript"></script>
<script src="js/undo-redo.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>