@@ -6,51 +6,52 @@ eleventyNavigation:
66 key: img
77---
88
9- {% addScript ' img' %}
10- {% addStyle ' webutils' %}
11-
12- <label for =" img-input" class =" info" >convert </label >
13- <input type =" file" id =" img-input" accept =" image/png, image/jpeg, image/svg+xml, image/webp, image/ico, image/bmp" />
14- <label for =" img-format" class =" info" > to </label >
15- <select id =" img-format" >
16- <option value =" png" >png</option >
17- <option value =" jpeg" >jpg</option >
18- <option value =" webp" >webp</option >
19- <option value =" ico" >ico</option >
20- <option value =" bmp" >bmp</option >
21- </select >
22- <span id =" img-formatInfo" class =" warning hidden" title =" not supported by all browsers & platforms" >⚠️</span >
23- <br > <br >
24- <table id =" img-options" class =" disabled" >
25- <caption >options</caption >
26- <thead hidden >
27- <tr >
28- <th >option</th >
29- <th >value</th >
9+ <span style =" color : lightgreen ; font-weight : bold ;" >NEW: drag and drop below!</span >
10+ <div id =" img-drop" >
11+ <div id =" img-convert" >
12+ <label for =" img-input" class =" info" >convert </label >
13+ <input type =" file" id =" img-input" accept =" image/png, image/jpeg, image/svg+xml, image/webp, image/ico, image/bmp" >
14+ <label for =" img-format" class =" info" > to </label >
15+ <select id =" img-format" >
16+ <option value =" png" >png</option >
17+ <option value =" jpeg" >jpg</option >
18+ <option value =" webp" >webp</option >
19+ <option value =" ico" >ico</option >
20+ <option value =" bmp" >bmp</option >
21+ </select >
22+ <span id =" img-formatInfo" class =" warning hidden" title =" not supported by all browsers & platforms" >⚠️</span >
23+ </div >
24+ <table id =" img-options" class =" disabled" >
25+ <caption ><h3 >options</h3 ></caption >
26+ <thead hidden >
27+ <tr >
28+ <th >option</th >
29+ <th >value</th >
30+ </tr >
31+ </thead >
32+ <tr id =" quality" >
33+ <td ><label for =" qualitySlider" class =" info" >quality</label ></td >
34+ <td >
35+ <input type =" range" min =" 0" max =" 100" value =" 100" step =" 10" id =" qualitySlider" disabled >
36+ <span id =" qualityValue" >loseless</span >
37+ </td >
38+ </tr >
39+ <tr id =" width" >
40+ <td ><label for =" widthInput" class =" info" >width</label ></td >
41+ <td ><input type =" number" min =" 0" max =" 5000" value =" 0" id =" widthInput" disabled > px</td >
42+ </tr >
43+ <tr id =" height" >
44+ <td ><label for =" heightInput" class =" info" >height</label ></td >
45+ <td ><input type =" number" min =" 0" max =" 5000" value =" 0" id =" heightInput" disabled > px</td >
46+ </tr >
47+ <tr id =" keepRatioRow" >
48+ <td ><label for =" keepRatio" class =" info" >keep ratio</label ></td >
49+ <td ><input type =" checkbox" id =" keepRatio" checked disabled /></td >
3050 </tr >
31- </thead >
32- <tr id =" quality" >
33- <td ><label for =" qualitySlider" class =" info" >quality</label ></td >
34- <td >
35- <input type =" range" min =" 0" max =" 100" value =" 100" step =" 10" id =" qualitySlider" disabled />
36- <span id =" qualityValue" >loseless</span >
37- </td >
38- </tr >
39- <tr id =" width" >
40- <td ><label for =" widthInput" class =" info" >width</label ></td >
41- <td ><input type =" number" min =" 0" max =" 5000" value =" 0" id =" widthInput" disabled /> px</td >
42- </tr >
43- <tr id =" height" >
44- <td ><label for =" heightInput" class =" info" >height</label ></td >
45- <td ><input type =" number" min =" 0" max =" 5000" value =" 0" id =" heightInput" disabled /> px</td >
46- </tr >
47- <tr id =" keepRatioRow" >
48- <td ><label for =" keepRatio" class =" info" >keep ratio</label ></td >
49- <td ><input type =" checkbox" id =" keepRatio" checked disabled /></td >
50- </tr >
51- </table >
52- <br >
53- <span class =" button disabled" id =" img-convert" >convert</span >
51+ </table >
52+ <br >
53+ </div >
54+ <span class =" button disabled" id =" img-button" >convert</span >
5455<hr >
5556<a class =" button hidden" id =" img-download" ><img src =" /assets/icons/misc/download.svg" class =" icon invert" alt =" " > download</a > <br >
5657<span class =" info" id =" img-filename" ></span ><br >
0 commit comments