imop-web/index.html at main · Likeur/imop-web · 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
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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./dist/output.css" rel="stylesheet" />
    <title>imop-web</title>
    <link rel="stylesheet" href="css/output.css" />
  </head>
  <body
    class="bg-zinc-950 text-white flex flex-col items-center p-4 lg:p-8 w-screen overflow-x-hidden"
  >
    <main class="lg:p-5 w-full lg:w-[40vw] mx-auto">
      <header class="w-full">
        <div class="border-b border-dashed border-zinc-50/10 pb-4">
          <a href="" class="flex items-center gap-2">
            <span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="size-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672Zm-7.518-.267A8.25 8.25 0 1 1 20.25 10.5M8.288 14.212A5.25 5.25 0 1 1 17.25 10.5"
                />
              </svg>
            </span>
            <span> <b>imop</b>Webp </span>
          </a>
        </div>
      </header>
      <div class="mb-16 mt-10 ">
        <h1 class="text-3xl font-bold">image to webp</h1>
        <p>Upload your images and let the magic happen</p>
      </div>

      <div
        id="drop-area"
        class="w-full border-1 bg-white/5 border-dashed border-gray-200/10 p-12 text-center rounded-lg cursor-pointer transition-colors hover:border-blue-500 hover:bg-blue-500/10"
      >
        <p class="text-lg text-zinc-100 flex flex-col items-center gap-2">
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1"
              stroke="currentColor"
              class="size-12 text-white/60"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
              />
            </svg>
          </span>
          <span>
            Drag and drop your images here or <br />
            <label
              for="file-input"
              class="text-blue-600 hover:text-blue-800 cursor-pointer font-semibold"
            >
              choose files
            </label>
          </span>
        </p>

        <p class="text-sm text-zinc-400">accept jpeg, png, gif, webp</p>
        <input
          type="file"
          id="file-input"
          class="hidden"
          multiple
          accept="image/jpeg, image/png, image/gif, image/webp"
        />
      </div>

      <p id="status-message" class="mt-4 text-zinc-200"></p>
      <div
        id="progress-container"
        class="w-full max-w-2xl bg-zinc-200/10 rounded-full h-1 mt-2 hidden"
      >
        <div
          class="progress-bar bg-blue-600 h-1 rounded-full"
          style="width: 0%"
        ></div>
      </div>

      <div
        class="flex gap-4 flex-col mt-8 items-center lg:flex-row lg:justify-center"
      >
        <button
          id="optimize-button"
          class="px-8 py-2 bg-blue-600 border border-white/20 ring-1 ring-blue-600 text-white rounded-lg font-bold shadow-lg transition-colors hover:bg-blue-700 disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
          disabled
        >
          Optimize images
        </button>

        <button
          id="zip-download"
          class="px-8 py-2 bg-zinc-600 text-white rounded-lg font-bold shadow-lg transition-colors hover:bg-gray-700 ring-1 ring-zinc-600 border border-white/20"
          style="display: none"
        >
          Download all (Zip)
        </button>
      </div>

      <div
        id="image-preview"
        class="w-full max-w-2xl mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
      ></div>

      <div id="download-area" class="w-full max-w-2xl mt-8"></div>

      <div
        class="fixed bottom-4 right-4 bg-gray-800 text-white p-1 text-sm px-4 rounded-full shadow-lg"
      >
        <p>
          coded with love by
          <a href="https://github.com/Likeur" class="underline text-blue-500"
            >Likeur</a
          >
        </p>
      </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>