-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (131 loc) · 4.34 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
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en" data-theme="dim">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drawing App</title>
</head>
<body>
<div id="app-container" class="relative">
<!-- <h1>Radhey Shyam</h1> -->
<!-- Nav -->
<div
id="nav-bg"
class="absolute top-0 w-full grid place-content-center py-3 px-2 rounded z-[100]"
>
<div class="flex items-center gap-3">
<div>
<div data-toolbar role="tablist" class="tabs tabs-boxed gap-2">
<a data-tool data-tool-name="selector" role="tab" class="tab"
><span class="material-symbols-outlined">
arrow_selector_tool
</span></a
>
<a data-tool data-tool-name="brush" role="tab" class="tab"
><span class="material-symbols-outlined"> brush </span></a
>
<a data-tool data-tool-name="eraser" role="tab" class="tab"
><span class="material-symbols-outlined"> ink_eraser </span></a
>
<a data-tool data-tool-name="rect" role="tab" class="tab"
><span class="material-symbols-outlined"> crop_square </span></a
>
<a data-tool data-tool-name="circle" role="tab" class="tab"
><span class="material-symbols-outlined"> circle </span></a
>
<a data-tool data-tool-name="texture" role="tab" class="tab"
><span class="material-symbols-outlined"> texture </span></a
>
<a data-tool data-tool-name="line" role="tab" class="tab"
><span class="material-symbols-outlined">
horizontal_rule
</span></a
>
<a data-tool data-tool-name="highlighter" role="tab" class="tab"
><span class="material-symbols-outlined">
stylus_laser_pointer
</span></a
>
</div>
</div>
<!-- Buttons -->
<div class="flex items-center gap-2">
<button class="btn btn-circle" data-clear-all-btn>
<span class="material-symbols-outlined"> clear_all </span>
</button>
<!-- Drop Down -->
<div class="dropdown">
<div tabindex="0" role="button" class="btn m-1">
<span class="material-symbols-outlined"> instant_mix </span>
</div>
<div
tabindex="0"
class="dropdown-content z-[1] card card-compact w-64 p-2 mt-3 bg-slate-800 text-gray-300"
>
<div class="card-body gap-3">
<h4 class="font-bold">Stroke</h4>
<div id="strokeColor" class="flex flex-wrap gap-2"></div>
<h4 class="font-bold">Background</h4>
<div id="fillColor" class="flex flex-wrap gap-2"></div>
<h4 class="font-bold">Stroke Width</h4>
<input
id="pen-size"
type="range"
min="1"
max="20"
value="4"
class="range range-primary"
/>
</div>
</div>
</div>
<!-- Drop Down End -->
</div>
</div>
</div>
<!-- Zoom Level -->
<div class="absolute bottom-4 left-7 flex items-center gap-4 z-[100]">
<div class="shadow flex items-center">
<div class="lg:tooltip" data-tip="Zoom In">
<button id="zoom-in-btn" class="btn btn-ghost btn-xs">
<span class="material-symbols-outlined"> add </span>
</button>
</div>
<div class="min-w-[4rem] text-center">
<div
id="zoom-display-value"
class="stat-value text-base select-none"
>
100%
</div>
</div>
<div class="lg:tooltip" data-tip="Zoom Out">
<button id="zoom-out-btn" class="btn btn-ghost btn-xs">
<span class="material-symbols-outlined"> remove </span>
</button>
</div>
</div>
<div class="lg:tooltip" data-tip="Undo">
<button class="btn btn-sm btn-circle" data-undo-btn>
<span class="material-symbols-outlined"> undo </span>
</button>
</div>
<div class="lg:tooltip" data-tip="Redo">
<button class="btn btn-sm btn-circle" data-redo-btn>
<span class="material-symbols-outlined"> redo </span>
</button>
</div>
</div>
<div
class="bg-black min-h-screen overflow-hidden"
id="canvas-container"
></div>
</div>
</body>
<script type="module" src="/src/main.ts"></script>
</html>