-
-
Notifications
You must be signed in to change notification settings - Fork 39
/
Copy pathindex.html
135 lines (122 loc) · 7.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Drawing Board</title>
<link rel="stylesheet" href="styles.css" />
<link rel="icon" type="image/x-icon" href="assets/ico/favicon.ico" />
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body w-100 mb-5" data-bs-theme="dark">
<div class="container-fluid px-3">
<a class="navbar-brand" href="#">Drawing Board</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 d-flex w-100 justify-content-end gap-5 pr-4">
<li class="nav-item">
<div class="sign-in">
<span id="g_id_onload" data-callback="handleCredentialResponse" data-auto_prompt="false"></span>
<span class="g_id_signin" id="g_id_signin" data-type="standard" data-size="medium" data-theme="filled_black" data-text="sign_in_with" data-shape="square" data-logo_alignment="left"></span>
<button onclick="signOut()" id="g_id_signout" style="display: none">Sign Out</button>
</div>
</li>
<li class="nav-item">
<span id="g_id_user" style="display: none"></span>
<a class="github-button" href="https://github.com/DhanushNehru/board" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star DhanushNehru/board on GitHub">Star</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="drawing-controls">
<div class="selectors">
<div class="color-selection board-color">
<label class="color-header" for="board-color">Board Colour:</label>
<input type="color" name="boardColor" id="board-color" value="#FFFFFF" />
</div>
<div class="color-selection pen-color">
<label class="color-header" for="pen-color">Pen Colour:</label>
<input type="color" name="penColor" id="pen-color" />
</div>
<div class="color-selection pen-thickness">
<label class="color-header" for="pen-thickness">Pen Thickness:</label>
<input type="range" name="penThickness" id="pen-thickness" min="1" max="10" value="5" />
</div>
<div class="color-selection eraser">
<label class="color-header" for="eraser-btn">Eraser:</label>
<button id="eraser-btn">Enable Eraser</button>
</div>
<div class="color-selection eraser-thickness">
<label class="color-header" for="eraser-thickness">Eraser Thickness:</label>
<input type="range" name="eraserThickness" id="eraser-thickness" min="5" max="30" value="10" />
</div>
</div>
</section>
<section class="canvas-container">
<canvas id="black-board"></canvas>
</section>
<section class="action-buttons">
<div class="clear-download-undo-button">
<button class="btn btn-secondary clear" title="Clear Board" onclick="onClear()">Clear</button>
<button class="btn btn-success undo" title="Undo Board" onclick="onUndo()">Undo</button>
<button id="download" class="btn btn-primary" title="Download">
<img src="/assets/ico/download.svg" alt="Download" />
</button>
</div>
</section>
</main>
<section class="footer">
<div> <strong> Sponsor this Project :</strong>
<a href="https://patreon.com/dhanushnehru" target="_blank" style="text-decoration: none;" class="box">
<img width="32" height="32" alt="patreon.com/dhanushnehru" src="https://github.githubassets.com/assets/patreon-96b15b9db4b9.svg" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s;" />patreon.com/dhanushnehru
</a>
<a href="https://ko-fi.com/dhanushnehru" target="_blank" style="text-decoration: none;" class="box">
<img width="32" height="32" alt="ko-fi.com/dhanushnehru" src="https://github.githubassets.com/assets/ko_fi-53a60c17e75c.svg" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s;" />ko-fi.com/dhanushnehru
</a>
<a href="https://www.buymeacoffee.com/dhanushnehru" target="_blank" style="text-decoration: none;" class="box">
<img src="https://github.githubassets.com/assets/buy_me_a_coffee-63ed78263f6e.svg" width="32" height="32" alt="Buy me a coffee" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s;" />
buymeacoffee.com/dhanushnehru
</a>
<a href="https://thanks.dev/dhanushnehru" target="_blank" style="text-decoration: none;" class="box">
<img width="32" height="32" alt="thanks.dev/dhanushnehru" src="https://github.githubassets.com/assets/thanks_dev-0fe87803d1ed.svg" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s;" />thanks.dev/dhanushnehru
</a>
</div>
</section>
<div class="shareBtnDiv">
<button id="shareBtn">
<i class="fa-solid fa-share"></i>
<span class="btn-label">Share</span>
</button>
<div id="allOptions">
<a href="whatsapp://send?text=https://board-dhanushnehru.netlify.app/" data-action="share/whatsapp/share">
<img width="40" id="whatsAppBtn" src="https://cdn.iconscout.com/icon/free/png-512/free-whatsapp-42-189793.png?f=webp&w=512" alt="WhatsApp" />
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://board-dhanushnehru.netlify.app/" target="_blank" rel="noopener">
<img width="40" id="gmailBtn" src="https://cdn-icons-png.flaticon.com/512/5968/5968764.png?ga=GA1.1.942035619.1696882171" alt="Facebook" />
</a>
<a onclick="copyClipFun()" id="copyCopy">
<div id="copyStatDiv">Copy to clipboard</div>
<img width="40" id="linkCopyBtn" src="https://cdn.iconscout.com/icon/free/png-512/free-link-1439747-1214319.png?f=webp&w=512" alt="Copy Link" />
</a>
</div>
</div>
<script src="script.js"></script>
<script src="colorChanges.js"></script>
<script>
var time_stamp = new Date().getTime();
var scriptElement = document.createElement("script");
scriptElement.src = "https://accounts.google.com/gsi/client?nocache=" + time_stamp;
scriptElement.async = true;
scriptElement.defer = true;
document.body.appendChild(scriptElement);
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>