-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
71 lines (69 loc) · 3.51 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FotoQuick by Abhiraj</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
</head>
<body>
<div class="sidebar">
<div class="image_filters">
<h2 type="button" data-toggle="collapse" data-target="#filters">Image Filters <span class="drop-down">▼</span></h2>
<div class="collapse" id="filters">
<button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="grayscale()">GrayScale</button>
<button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="bright()">Brighen</button>
<br>
<br>
<button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="dark()">Darken</button>
<button class="btn btn-primary" id="btn" style="font-size: 25px;" onclick="blur_effect()">Blur Effect</button>
<br>
<br>
<button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="emboss()">Emboss</button>
<button class='btn btn-primary' id="btn" style="font-size: 25px;" onclick="sharp()">Sharpen</button>
</div>
<div class="breaks">
<br>
<br>
</div>
</div>
<div class="import_and_export">
<h2 type="button" data-toggle="collapse" data-target="#import_export">Import and Export <span class="drop-down">▼</span></h2>
<div class="import_and_export_buttons">
<div class="collapse" id="import_export">
<div class="btn btn-primary" style="font-size: 25px;" onclick="selectImage()">
<input type="file" id="foto-file" accept="image/png"/>
Import Image
</div>
<button class="btn btn-primary" style="font-size: 25px;" onclick="download()">Export Image</button>
</div>
</div>
</div>
<div class="breaks">
<br>
<br>
</div>
<div class="edit">
<h2 type="button" data-toggle="collapse" data-target="#edit">Editing <span class="drop-down">▼</span></h2>
<div class="collapse" id="edit">
<button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="crop()">Crop Image</button>
<button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="flip_img()">Flip Image</button>
<br><br>
<button class="btn btn-primary" onclick="makeTransparent()" style="font-size: 25px;" id="btn"><div id="color-preview"></div>Transparent</button>
<input type="color" id="colorize-color-picker" value="#00000" oninput="makeColorize(this)">
<button class="btn btn-primary" style="font-size: 25px;" id="btn" onclick="openColorPicker()">Colorize</button>
</div>
</div>
</div>
<div class="img-container">
<img id="foto-image" class="image"/>
</div>
<script src="https://rawcdn.githack.com/kousik19/foto.js/045defe1a5ce06220e084e4e6f6fbaccb7621841/foto.min.js"></script>
<script src="script.js"></script>
</body>
</html>