-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·151 lines (147 loc) · 7.42 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
148
149
150
151
<!doctype html>
<html lang="en">
<head>
<title>ImageAdapter</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" type="image/x-icon" href="src/favicon.ico" />
<link rel="stylesheet" href="css/simple-grid.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/granim.min.js" type="text/javascript"></script>
<script src="js/jszip.min.js" type="text/javascript"></script>
<script src="js/FileSaver.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="col-8 main">
<div class="col-xs-12 main-title">
<h3>No Image Selected</h3>
</div>
<div class="col-12 main-img"></div>
<form autocomplete="off">
<div class="settings">
<div class="col-12 settings-title">Select Method</div>
<button type="button" id="tileimg" class="col-4 methodbtn">Image Tiles</button>
<button type="button" id="reszimg" class="col-4 methodbtn">Resize Image</button>
<button type="button" id="cropimg" class="col-4 methodbtn">Crop Image</button>
</div>
<div class="main-settings">
<div class="settings-category imgtilelayout">
<div class="col-12 settings-title">Image Layout</div>
<div class="settings-info">Specify the amount of horizontal and vertical cuts for the image.</div>
<div class="row">
<div class="col-6">
<label for="amount-hor">Horizontal</label>
<input class="slider" type="range" min="0" max="32" name="rangeInput_hor" />
<input class="box" type="text" value="1" name="amount_hor" />
</div>
<div class="col-6">
<label for="amount-vert">Vertical</label>
<input class="slider" type="range" min="0" max="32" name="rangeInput_vert" />
<input type="text" class="box" value="1" name="amount_vert" />
</div>
</div>
<div class="row">
<div class="equal-box">
<input type="checkbox" id="keepeql" class="checkbox" name=keepeql>
<label for="keepeql">Keep Equal</label>
</div>
</div>
</div>
<div class="settings-category imgtilesize">
<div class="col-12 settings-title">Tile Size</div>
<div class="row">
<div class="settings-info">Assign the resolution for one image tile. Leave this blank for proportional tiles based on input image width and height. Images can get distorted. </div>
</div>
<div class="row">
<div class="col-12">
<label for="tileresx">Width:</label>
<input type="text" name="tileresx" placeholder="width in px">
<label for="tileresy">Height:</label>
<input type="text" name="tileresy" placeholder="height in px">
<div class="equal-box">
<input type="checkbox" id="keepasp1" class="checkbox keepasp" name=keepasp1>
<label for="keepasp1">Keep aspect ratio
</div>
</div>
</div>
</div>
<div class="settings-category imgresolution">
<div class="col-12 settings-title"> Image Resolution</div>
<div class="row">
<div class="settings-info">Assign the needed resolution for the image.</div>
</div>
<div class="row">
<div class="col-12">
<label for="resx">Width:</label>
<input type="text" name="resx" placeholder="Width in px">
<label for="resy">Height:</label>
<input type="text" name="resy" placeholder="Height in px">
<div class="equal-box">
<input type="checkbox" id="keepasp2" class="checkbox keepasp" name=keepasp2>
<label for="keepasp2">Keep aspect ratio</label>
</div>
</div>
</div>
</div>
<div class="settings-category imgcrop">
<div class="col-12 settings-title"> Image Information</div>
<div class="row">
<div class="settings-info">Use the selection above or the text input below to select the area needed.</div>
</div>
<label for="leftcrop">Left:</label>
<input type="text" name="leftcrop" placeholder="Width from the left edge in px">
<label for="topcrop">Top:</label>
<input type="text" name="topcrop" placeholder="Height from the top edge in px">
<label for="widthcrop">Width:</label>
<input type="text" name="widthcrop" placeholder="Cropping width in px">
<label for="heightcrop">Height:</label>
<input type="text" name="heightcrop" placeholder="Cropping height in px">
<div class="col-12 settings-box">
</div>
</div>
</div>
<button type="button" id="downloadbtn" class="col-12 btn"><h3>Download</h3></button>
<div id="credit">
<div class="row">
<div class="col-6 author">
<a href="https://github.com/Ijee/ImageAdapter"><span style="padding: 3px;color:white;">Ijee</span></a>
</div>
<div class="col-6 author">
<a href="https://unsplash.com/@zanonluca?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Luca Zanon"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title></title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg><span style="padding: 3px; color:white;">Luca Zanon </span></a>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Popup -->
<div id="myModal" class="popup">
<form autocomplete="off">
<div class="col-6 popup-content">
<div class="popup-header">
<span class="close">×</span>
<h2>LOAD IMAGE</h2></div>
<div class="popup-body">
<input type="text" name="usrurl" placeholder="Paste the direct link..."><br>
<div class="settings-title">- or upload your own image -</div>
<input type="file" id="file">
<!-- <input type='button' id='load-file' value='Load'> -->
<button type="button" id="loadbtn" class="col-12 btn"><h3>O.K.!</h3></button>
</div>
</div>
</form>
</div>
<div id="tip" class="popup">
<div class="col-6 popup-content">
<div class="popup-header">
<span class="close">×</span>
<h2>INFORMATION</h2></div>
<div class="popup-body">
Please select an image by clicking on the picture frame.
</div>
</div>
</div>
</body>
</html>