forked from vishanurag/Canvas-Editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (89 loc) · 6.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celebrases Assignment by ANURAG VISHWAKARMA</title>
<link rel="stylesheet" href="./src/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./src/Styles/Style.css">
<link rel="stylesheet" href="./src/Styles/Responsive.css">
</head>
<body>
<div class="container pt-2">
<div class="mt-2 mb-5">
<button class="btn btn-outline-danger" id="undoButton" title="Undo">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
</svg>
</button>
<button class="btn btn-outline-primary mx-2" id="redoButton" title="Redo">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
</svg>
</button>
<button class="btn btn-primary" id="addText">Add Text</button>
</div>
<div class="d-md-flex justify-content-center gap-3 align-items-center flex-column flex-md-row">
<canvas id="mainCanvas" class="h-80 h-80-responsive border border-gray shadow rounded" onclick="dragContentStart(event)" onmousemove="dragContent(event)">
Canvas Not Supported by the Browser...
</canvas>
<div class="h-80 h-80-responsive p-1 bg-dark rounded w-100 shadow">
<form id="userForm" class="h-80 h-80-responsive d-flex flex-column justify-content-evenly">
<div class="d-flex gap-3 px-3">
<label for="textSize" class="text-light">Size :</label>
<select name="tSize" class="rounded" id="textSize" required></select>
<label for="colorPicker" class="text-light">Color :</label>
<input type="color" name="colorPicker" class="rounded" id="colorPicker">
</div>
<!-- added feature - Background -->
<div class="d-flex gap-3 px-3">
<!-- Background Image Upload -->
<label for="bgImageUpload" class="text-light">Background Image:</label>
<input type="file" id="bgImageUpload" accept="image/*">
<!-- Background Color Picker -->
<label for="bgColorPicker" class="text-light">Background Color:</label>
<input type="color" id="bgColorPicker" class="rounded">
</div>
<div class="d-md-flex justify-content-evenly gap-1">
<button class="btn btn-primary" id="capital">A</button>
<button class="btn btn-primary" id="small">a</button>
<button class="btn btn-primary" id="bold">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
</svg>
</button>
<button class="btn btn-primary" id="italic">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
<path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
</svg>
</button>
</div>
<p >Shape Pallete</p>
<div class="palette">
<p >Shape Palette : </p>
<button id="rectangleBtn">Rectangle</button>
<button id="circleBtn">Circle</button>
<button id="lineBtn">Line</button>
</div>
<div class="d-md-flex justify-content-center gap-1">
<input type="text" placeholder="Enter Text " name="textData" id="textData" class="form-control mw-100 w-75 fullWidth">
<button type="submit" class="btn btn-primary">Save</button>
<!-- added features -->
<button class="btn btn-primary" id="clear">clear</button>
<button type="button" class="btn btn-primary" id="download" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
</svg>
</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="./src/Scripts/Canvas.js"></script>
</body>
</html>