forked from vishanurag/Canvas-Editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (94 loc) · 7.03 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
<!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="nav-bar">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/photo-editor-app-icon-design-template-4422455fe13e1c4e7008958f0b058eb5_screen.jpg?ts=1577021462" style="max-width: 690px; margin-left: 30px; height:90px; width:100px;">
<h2 class="project-name">CANVAS EDITOR</h2>
<div class="contents">
<p><a href="" >Sign UP</a></p>
<p><a href="">Log In</a></p>
<p><a href="" >ABOUT US</a></p>
<p><a href="">Saved Files</a></p>
</div>
</div>
<div class="container ">
<div class="mt-4 mb-3 buttons">
<button class="btn btn-outline-danger " id="undoButton" title="Undo" style=" font-size: 20px; font-weight: bold;" > UNDO
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 20 20">
<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" style=" font-size: 20px;font-weight: bold;">REDO
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 20 20">
<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>
</div>
<div class="d-flex justify-content-center gap-3 main-sec m-0">
<canvas id="mainCanvas" class="m-0 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-responsive bg-dark rounded w-100 shadow designing-area ">
<h2 class="txt">DESIGNING AREA</h2>
<form id="userForm" class=" h-80-responsive flex-column justify-content-evenly ">
<div class="gap-3 px-3 ">
<label for="textSize" class=" text-light p-0" style="font-size:larger" >Size : </label>
<select name="tSize" class="rounded w-50 " id="textSize" required>
</select>
<label for="colorPicker" class="text text-light p-0" style="font-size:larger">Color :</label>
<input type="color" name="colorPicker" class="rounded mt-2 w-40" id="colorPicker">
</div>
<!-- added feature - Background -->
<div class="d-flex gap-3 px-3">
<!-- Background Image Upload -->
<label for="bgImageUpload" class="text-light p-0" style="font-size:larger">Background Image:</label>
<input type="file" id="bgImageUpload" accept="image/*">
<!-- Background Color Picker -->
<label for="bgColorPicker" class="text-light p-0" style="font-size:larger">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>
<div class=" justify-content-center gap-1">
<input type="text" placeholder="Enter Text " name="textData" id="textData" class="form-control mw-100 w-100 fullWidth h-50">
<button class="btn btn-primary mt-3" style="width:30%">Save</button>
<!-- added features -->
<button class="btn btn-primary mt-3" id="clear" style="width:30%">clear</button>
<button type="button" class="btn btn-primary mt-3" id="download" title="Download" style="width:20%">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<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>