-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
136 lines (121 loc) · 6.19 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for SEO -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="The official Whiteboard SDK for Agora.io made using Agora RTM.">
<meta name="keywords" content="Agora, RTM, Real Time Messaging, SDK, Whiteboard, School.">
<meta name="author" content="Akshat Gupta">
<meta name="copyright" content="Akshat Gupta">
<meta name="language" content="en">
<meta name="url" content="https://whiteboard.akshatvg.com">
<meta name="category" content="General">
<meta name="coverage" content="Worldwide">
<meta name="rating" content="General">
<meta name="og:email" content="akshatvg23@gmail.com">
<meta name="og:country-name" content="India, China, USA, UK, Canada, Japan">
<meta name="og:site_name" content="Agora Whiteboard SDK">
<meta property="og:type" content="website">
<meta property="og:title" content="Agora Whiteboard SDK">
<meta property="og:description" content="The official Whiteboard SDK for Agora.io made using Agora RTM.">
<meta name="theme-color" content="#ff4d1c">
<meta property="og:url" content="https://whiteboard.akshatvg.com">
<meta property="og:site_name" content="Agora Whiteboard SDK">
<meta name="twitter:card" content="website">
<meta name="twitter:site" content="Agora Whiteboard SDK">
<meta name="twitter:title" content="Agora Whiteboard SDK">
<meta name="twitter:description" content="The official Whiteboard SDK for Agora.io made using Agora RTM.">
<meta name="twitter:creator" content="@akshatvg">
<meta itemprop="name" content="Agora Whiteboard SDK">
<meta itemprop="description" content="The official Whiteboard SDK for Agora.io made using Agora RTM.">
<link rel="canonical" href="https://whiteboard.akshatvg.com">
<!-- Linking Favicon, Apple Touch Icon, Font Awesome, AOS, Materialize & CSS -->
<link rel="icon" href="assets/img/favicon.png" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png" type="image/png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
defer>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="assets/css/index.css">
<!-- Title -->
<title>Agora Whiteboard SDK</title>
<!-- No Script -->
<noscript>Please enable JavaScript to open this page.</noscript>
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<div class="nav-wrapper">
<a href="/" class="font-size-big">Agora Whiteboard SDK</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="modal-trigger" href="#joinChannelModal">Join Channel</a></li>
<ul class="right hide-on-med-and-down">
<li><a href="#!" onclick="leaveChannel();">Leave Channel</a></li>
</ul>
</ul>
</div>
</nav>
<!-- Sidenav -->
<ul class="sidenav" id="mobile-demo">
<li class="center">
<h4>Agora Whiteboard SDK</h4>
</li>
<li class="center"><a class="modal-trigger waves-effect grey lighten-4" href="#joinChannelModal">Join
Channel</a></li>
<li class="center"><a href="#!" onclick="leaveChannel();">Leave Channel</a></li>
</ul>
<!-- Tools -->
<div id="tools">
<!-- Color Change -->
<div id="colorChangeDiv">
<button id="colorChange" onclick="changeColor();" class="btn waves-effect colorBtn z-depth-0 my-2"><i
class="material-icons">color_lens</i></button>
<input type="color" id="colorPicker" class="d-none" value="#000000">
</div>
<!-- Eraser -->
<div id="clearScreenDiv">
<button id="eraseColor" onclick="startErasing();" class="btn waves-effect eraserBtn z-depth-0 my-2"><i
class="fa fa-eraser"></i></button>
</div>
</div>
<!-- Div to Center -->
<div class="center p-20">
<!-- Canvas -->
<div id="outer-div">
<canvas id="whiteboard-canvas">
Your browser does not support the canvas element.
</canvas>
</div>
</div>
<!-- Channel Join Modal -->
<div id="joinChannelModal" class="modal">
<div class="modal-content">
<h4 class="center">Join Channel</h4>
<label for="appid">Agora App ID</label>
<input type="text" placeholder="Agora App ID" id="appid" />
<label for="accountName">User Name</label>
<input type="text" placeholder="User Name" id="accountName" />
<label for="channelNameInput">Channel Name</label>
<input type="text" placeholder="Channel Name" id="channelNameInput" />
</div>
<div class="modal-footer">
<button id="joinChannelBtn" class="modal-close btn waves-effect">Join Channel</button>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src=" https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/agora-rtm-sdk@1.3.1/index.js"></script>
<script src="assets/js/index.js"></script>
</body>
</html>