-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (78 loc) · 3.41 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./src/output.css" rel="stylesheet" />
<title>Canviz</title>
</head>
<body class="w-full">
<!-- header -->
<nav class="w-full overflow-hidden bg-nav p-4 px-6 border-b flex justify-between border-bnav h-12">
<!-- <p class="text-red-600">fdfsd</p> -->
<ul class="flex gap-x-8">
<li><button><img src="/assets/icons/undo.svg" alt=""></button></li>
<li><button><img src="/assets/icons/redo.svg" alt=""></button></li>
<li><button><img src="/assets/icons/save.svg" alt=""></button></li>
<li><button><img src="/assets/icons/clear.svg" alt=""></button></li>
<li><button><img src="/assets/icons/delete.svg" alt=""></button></li>
<li><button><img src="/assets/icons/newboard.svg" alt=""></button></li>
</ul>
<ul class="flex gap-x-4">
<li>
<button class="" id="darkModeToggle">
<img src="/assets/icons/darkmode.svg" alt="" />
</button>
</li>
<li class=""><img src="" class="rounded-full h-4 w-4" alt="img" /></li>
</ul>
</nav>
<!-- tab for -->
<div class="relative -bottom-[32.5rem] flex justify-center">
<div class="border-2 rounded-3xl w-[40rem] h-20 flex bg-white">
<div class="m-0 p-0 border-r">
<div
class="h-[2.4rem] hover:bg-slate-300 w-12 m-0 p-0 flex justify-center rounded-tl-2xl items-center bg-slate-200">
<img src="/assets/icons/pointer.svg" alt="" class="h-8 w-8" />
</div>
<div
class="h-[2.4rem] hover:bg-slate-300 w-12 m-0 p-0 flex justify-center rounded-bl-2xl items-center bg-slate-200">
<img src="/assets/icons/handtool.svg" alt="" class="h-10 w-10" />
</div>
</div>
<!-- pencil -->
<div class="flex border-r w-56">
<div>
<img src="/assets/icons/pencil.svg" alt="" class="hue-rotate-30 rotate-[135deg] h-20 mt-2 w-24" />
</div>
<!-- shapes -->
<div class="flex flex-wrap w-24 mt-1">
<img src="/assets/shapes/circle.svg" alt="" class="h-10 w-12" /><img src="/assets/shapes/square.svg" alt=""
class="h-10 w-12" /><img src="/assets/shapes/triangle.svg" alt="" class="h-10 w-12" /><img
src="/assets/shapes/arrow.svg" alt="" class="h-9 w-12" />
</div>
</div>
<!-- -->
<div class="flex justify-center items-center mx-2 gap-x-2 w-56 border-r">
<div class="bg-slate-200 w-12 h-12 flex justify-center items-center">
<img src="/assets/icons/text.svg" alt="" class="w-10 h-10" />
</div>
<div class="flex justify-center bg-slate-200 w-12 h-12 items-center">
<img src="/assets/icons/stamp.svg" alt="" class="w-10 h-10" />
</div>
<div><img src="" alt="" /></div>
<div><img src="" alt="" /></div>
</div>
<!-- -->
<div class="flex flex-wrap space-x-0 rounded-r-2xl">
<img src="/assets/images/camera.png" alt="" class="h-14 w-12 " />
<img src="/assets/images/code.png" alt="" class="h-14 w-14 " />
<img src="/assets/images/code1.png" alt="" class="h-12 w-12" />
<img src="/assets/images/gd.png" alt="" class="h-14 w-14 -mt-5" />
</div>
</div>
</div>
<script type="module" src="./src/main.js"></script>
<script type="module" src="./src/utils/darkmode.js"></script>
</body>
</html>