ImageCompressor/index.html at master · ja-brouil/ImageCompressor · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Image Compressor</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
  </head>
  <body>
    <div class="center">
      <h1>Image Compression</h1>
    </div>
    <div class="center">
      <div class="fillbutton blue" id="importButton">
          <p id="importText"><span class="uline">I</span>mport Folder</p>
          <input type="file" id="importChooser" webkitdirectory hidden/>
      </div>
      <div class="fillbutton red" id="exportButton">
          <p id="exportText"><span class="uline">E</span>xport Folder</p>
          <input type="file" id="exportChooser" webkitdirectory hidden/>
      </div>
      <div class="fillbutton orange" id="clearButton">
          <p id="clearButtonText"><span class="uline">C</span>lear Folders</p>
      </div>
    </div>
    <div class="center">
      <button id="start" class="fillbutton white">Start Compression</button>
    </div>
    <div class="center">
      <label for="compressionRate">Compression Rate</label>
      <input type="range" id="compressionRate" class="slider" min="0" max="100" value="20" step="1">
      <label id="compressionValue">20</label>
    </div>
    <div class="center">
      <textarea id="textArea" class="textConsole" rows="10" cols="50" wrap="hard" disabled></textarea>
    </div>
    <script>
      require('./compression.js')
    </script>
  </body>
</html>