Skip to content

Commit b183539

Browse files
tajulafreentajulafreen
committed
Add buttons and Canva for image
1 parent 31c2dcc commit b183539

File tree

1 file changed

+85
-8
lines changed

1 file changed

+85
-8
lines changed

‎Source-Code/ImageFilter/index.html‎

Lines changed: 85 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,88 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
67
<title>Image Filter</title>
7-
</head>
8-
<body>
9-
10-
</body>
11-
</html>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
<body>
11+
<nav>
12+
<div class="container">
13+
<a href="#" class="navbar-brand">Image Filter</a>
14+
</div>
15+
</nav>
16+
<div class="container">
17+
<div class="row">
18+
<div class="col">
19+
<div class="custom-file">
20+
<input type="file" id="upload-file" />
21+
</div>
22+
<canvas id="canvas"></canvas>
23+
24+
<h4>Filters</h4>
25+
<div class="row" id="row-1">
26+
<div class="col">
27+
<div class="btn-group">
28+
<button class="filter-btn brightness-remove">-</button>
29+
<button class="btn-disabled" disabled>Brightness</button>
30+
<button class="filter-btn brightness-add">+</button>
31+
</div>
32+
</div>
33+
<div class="col">
34+
<div class="btn-group">
35+
<button class="filter-btn contrast-remove">-</button>
36+
<button class="btn-disabled" disabled>Contrast</button>
37+
<button class="filter-btn contrast-add">+</button>
38+
</div>
39+
</div>
40+
<div class="col">
41+
<div class="btn-group">
42+
<button class="filter-btn saturation-remove">-</button>
43+
<button class="btn-disabled" disabled>Saturation</button>
44+
<button class="filter-btn saturation-add">+</button>
45+
</div>
46+
</div>
47+
<div class="col">
48+
<div class="btn-group">
49+
<button class="filter-btn vibrance-remove">-</button>
50+
<button class="btn-disabled" disabled>Vibrance</button>
51+
<button class="filter-btn vibrance-add">+</button>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<h4>Effects</h4>
57+
<div class="row" id="row-2">
58+
<button class="vintage-add btn-dark">Vintage</button>
59+
60+
<button class="lomo-add btn-dark">Lomo</button>
61+
62+
<button class="clarity-add btn-dark">Clarity</button>
63+
64+
<button class="sincity-add btn-dark">Sin City</button>
65+
</div>
66+
67+
<div class="row" id="row-3">
68+
<button class="crossprocess-add btn-dark">Cross Process</button>
69+
70+
<button class="pinhole-add btn-dark">Pinhole</button>
71+
72+
<button class="nostalgia-add btn-dark">Nostalgia</button>
73+
74+
<button class="hermajesty-add btn-dark">Majesty</button>
75+
</div>
76+
<div class="row" id="row-4">
77+
<button id="download-btn" class="btn-primary">
78+
Download Image
79+
</button>
80+
81+
<button id="revert-btn" class="btn-danger">Remove Filters</button>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
<script src="./script.js"></script>
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)