Skip to content

Commit e91cb44

Browse files
rupesh1310rupesh1310
authored
html formatted
1 parent 3b847bf commit e91cb44

File tree

1 file changed

+107
-128
lines changed

1 file changed

+107
-128
lines changed

‎index.html

Lines changed: 107 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,115 @@
11

2+
23
<!DOCTYPE html>
34
<html lang="en">
4-
<head>
5-
<link rel="stylesheet" href="style.css">
6-
<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
7-
<title>Filter Plus</title>
8-
</head>
9-
<body>
10-
<nav class="navbar navbar-dark bg-info mb-5">
11-
<div class="container">
5+
<head>
6+
<link rel="stylesheet" href="style.css">
7+
<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
8+
<title>Filter Plus</title>
9+
</head>
10+
<body>
11+
<nav class="navbar navbar-dark bg-info mb-5">
12+
<div class="container">
1213
<a href="#" class="navbar-brand">Online Image Filter.</a>
13-
</div>
14-
</nav>
15-
<div class="container">
16-
<div class="row">
14+
</div>
15+
</nav>
16+
<div class="container">
17+
<div class="row">
1718
<div class="col-md-10 m-auto">
18-
<div class="custom-file mb-3">
19-
<input type="file" class="custom-file-input"
20-
id="upload-file">
21-
<label for="upload-file" class="custom-file-label">Choose Image</label>
22-
</div>
23-
<canvas id="canvas"></canvas>
24-
25-
<h4 class="text-center my-3">Filters</h4>
26-
<div class="row text-center my-4">
27-
<div class="col-md-3">
28-
<div class="btn-group btn-group-sm">
29-
<button class="filter-btn
30-
brightness-remove btn btn-info">-</button>
31-
<button class="btn btn-secondary btn-disabled" disabled>Brightness</button>
32-
<button class="filter-btn brightness-add btn btn-info">+</button>
33-
</div>
34-
</div>
35-
36-
37-
<div class="col-md-3">
38-
<div class="btn-group btn-group-sm">
39-
<button class="filter-btn
40-
contrast-remove btn btn-info">-</button>
41-
<button class="btn btn-secondary btn-disabled" disabled>Contrast</button>
42-
<button class="filter-btn contrast-add btn btn-info">+</button>
43-
</div>
44-
</div>
45-
46-
47-
<div class="col-md-3">
48-
<div class="btn-group btn-group-sm">
49-
<button class="filter-btn
50-
saturation-remove btn btn-info">-</button>
51-
<button class="btn btn-secondary btn-disabled" disabled>Saturation</button>
52-
<button class="filter-btn saturation-add btn btn-info">+</button>
53-
</div>
54-
</div>
55-
56-
57-
58-
<div class="col-md-3">
59-
<div class="btn-group btn-group-sm">
60-
<button class="filter-btn
61-
vibrance-remove btn btn-info">-</button>
62-
<button class="btn btn-secondary btn-disabled" disabled>Vibrance</button>
63-
<button class="filter-btn vibrance-add btn btn-info">+</button>
64-
</div>
65-
</div>
66-
</div><!-- ./row-->
67-
<h4 class="text-center my-3">Effects</h4>
68-
69-
<div class="row mb-3">
70-
<div class="col-md-3">
71-
<button class="filter-btn vintage-add btn
72-
btn-dark btn-block">Vintage</button>
73-
</div>
74-
75-
<div class="col-md-3">
76-
<button class="filter-btn lomo-add btn
77-
btn-dark btn-block">Lomo</button>
78-
</div>
79-
80-
81-
<div class="col-md-3">
82-
<button class="filter-btn clarity-add btn
83-
btn-dark btn-block">Clarity</button>
84-
</div>
85-
86-
87-
<div class="col-md-3">
88-
<button class="filter-btn sincity-add btn
89-
btn-dark btn-block">Sin City</button>
90-
</div>
91-
</div> <!-- ./row -->
92-
93-
<div class="row mb-3">
94-
<div class="col-md-3">
95-
<button class="filter-btn crossprocess-add btn
96-
btn-dark btn-block">Cross Process</button>
97-
</div>
98-
99-
<div class="col-md-3">
100-
<button class="filter-btn pinhole-add btn
101-
btn-dark btn-block">Pinhole</button>
102-
</div>
103-
104-
105-
<div class="col-md-3">
106-
<button class="filter-btn nostalgia-add btn
107-
btn-dark btn-block">Nostalgia</button>
108-
</div>
109-
110-
111-
<div class="col-md-3">
112-
<button class="filter-btn hermajesty-add btn
113-
btn-dark btn-block">Her Majesty</button>
114-
</div>
115-
</div> <!-- ./row -->
116-
117-
<div class="row my-5">
118-
<div class="col-md-6">
119-
<button id="download-btn" class="btn btn-primary btn-block">Download Image</button>
120-
</div>
121-
<div class="col-md-6">
122-
<button id="revert-btn" class="btn btn-danger btn-block">Remove Filters</button>
123-
</div>
124-
</div>
125-
</div>
126-
</div>
127-
</div>
128-
129-
130-
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
131-
<script src="main.js"></script>
132-
19+
<div class="custom-file mb-3">
20+
<input type="file" class="custom-file-input"
21+
id="upload-file">
22+
<label for="upload-file" class="custom-file-label">Choose Image</label>
23+
</div>
24+
<canvas id="canvas"></canvas>
25+
<h4 class="text-center my-3">Filters</h4>
26+
<div class="row text-center my-4">
27+
<div class="col-md-3">
28+
<div class="btn-group btn-group-sm">
29+
<button class="filter-btn
30+
brightness-remove btn btn-info">-</button>
31+
<button class="btn btn-secondary btn-disabled" disabled>Brightness</button>
32+
<button class="filter-btn brightness-add btn btn-info">+</button>
33+
</div>
34+
</div>
35+
<div class="col-md-3">
36+
<div class="btn-group btn-group-sm">
37+
<button class="filter-btn
38+
contrast-remove btn btn-info">-</button>
39+
<button class="btn btn-secondary btn-disabled" disabled>Contrast</button>
40+
<button class="filter-btn contrast-add btn btn-info">+</button>
41+
</div>
42+
</div>
43+
<div class="col-md-3">
44+
<div class="btn-group btn-group-sm">
45+
<button class="filter-btn
46+
saturation-remove btn btn-info">-</button>
47+
<button class="btn btn-secondary btn-disabled" disabled>Saturation</button>
48+
<button class="filter-btn saturation-add btn btn-info">+</button>
49+
</div>
50+
</div>
51+
<div class="col-md-3">
52+
<div class="btn-group btn-group-sm">
53+
<button class="filter-btn
54+
vibrance-remove btn btn-info">-</button>
55+
<button class="btn btn-secondary btn-disabled" disabled>Vibrance</button>
56+
<button class="filter-btn vibrance-add btn btn-info">+</button>
57+
</div>
58+
</div>
59+
</div>
60+
<!-- ./row-->
61+
<h4 class="text-center my-3">Effects</h4>
62+
<div class="row mb-3">
63+
<div class="col-md-3">
64+
<button class="filter-btn vintage-add btn
65+
btn-dark btn-block">Vintage</button>
66+
</div>
67+
<div class="col-md-3">
68+
<button class="filter-btn lomo-add btn
69+
btn-dark btn-block">Lomo</button>
70+
</div>
71+
<div class="col-md-3">
72+
<button class="filter-btn clarity-add btn
73+
btn-dark btn-block">Clarity</button>
74+
</div>
75+
<div class="col-md-3">
76+
<button class="filter-btn sincity-add btn
77+
btn-dark btn-block">Sin City</button>
78+
</div>
79+
</div>
80+
<!-- ./row -->
81+
<div class="row mb-3">
82+
<div class="col-md-3">
83+
<button class="filter-btn crossprocess-add btn
84+
btn-dark btn-block">Cross Process</button>
85+
</div>
86+
<div class="col-md-3">
87+
<button class="filter-btn pinhole-add btn
88+
btn-dark btn-block">Pinhole</button>
89+
</div>
90+
<div class="col-md-3">
91+
<button class="filter-btn nostalgia-add btn
92+
btn-dark btn-block">Nostalgia</button>
93+
</div>
94+
<div class="col-md-3">
95+
<button class="filter-btn hermajesty-add btn
96+
btn-dark btn-block">Her Majesty</button>
97+
</div>
98+
</div>
99+
<!-- ./row -->
100+
<div class="row my-5">
101+
<div class="col-md-6">
102+
<button id="download-btn" class="btn btn-primary btn-block">Download Image</button>
103+
</div>
104+
<div class="col-md-6">
105+
<button id="revert-btn" class="btn btn-danger btn-block">Remove Filters</button>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
112+
<script src="main.js"></script>
133113
</body>
134114
</html>
135115

136-

0 commit comments

Comments
 (0)