image-optimizer/index.html at main · zzever/image-optimizer · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Optimizer</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header>
    <h1>🖼️ Image Optimizer</h1>
    <p>Optimiza logos, retratos, paisajes y elimina fondos en local</p>
  </header>

  <main>
    <section class="card" id="step-type">
      <h2>1. Tipo de imagen</h2>
      <div class="type-grid four-cols">
        <button class="type-btn active" data-type="logo">
          <span class="icon">🔷</span>
          <strong>Logo</strong>
          <small>SVG optimizado + Base64</small>
        </button>
        <button class="type-btn" data-type="retrato">
          <span class="icon">👤</span>
          <strong>Retrato</strong>
          <small>WebP / JPEG alta fidelidad</small>
        </button>
        <button class="type-btn" data-type="paisaje">
          <span class="icon">🏔️</span>
          <strong>Paisaje</strong>
          <small>Responsive + blur placeholder</small>
        </button>
        <button class="type-btn" data-type="remove-bg">
          <span class="icon">✂️</span>
          <strong>Quitar fondo</strong>
          <small>PNG transparente + Base64</small>
        </button>
      </div>
    </section>

    <section class="card" id="step-upload">
      <h2>2. Sube tu imagen</h2>
      <div class="drop-zone" id="dropZone">
        <span class="drop-icon">📂</span>
        <p>Arrastra aquí o <label for="fileInput" class="link">selecciona un archivo</label></p>
        <p class="hint" id="formatHint">SVG, PNG, JPG, WebP — máx. 20 MB</p>
        <input type="file" id="fileInput" accept="image/*,.svg" hidden />
      </div>

      <div class="upload-status" id="uploadStatus" hidden aria-live="polite">
        <div class="upload-feedback" id="uploadFeedback"></div>
        <label class="upload-progress-label" for="uploadProgress">Cargando archivo</label>
        <progress id="uploadProgress" max="100" value="0"></progress>
        <span id="uploadProgressText">0%</span>
      </div>

      <div class="preview-wrap" id="previewWrap" hidden>
        <img id="previewImg" alt="Vista previa" />
        <div class="file-meta" id="fileMeta"></div>
      </div>
    </section>

    <section class="card" id="step-options">
      <h2>3. Opciones de conversión</h2>
      <div id="optionsLogo" class="options-panel">
        <label>Salida:
          <select id="logoOutput">
            <option value="svg-min">SVG minificado</option>
            <option value="base64-svg">SVG → Base64 Data URI</option>
            <option value="base64-png">PNG → Base64 Data URI</option>
          </select>
        </label>
        <label class="toggle-wrap">
          <input type="checkbox" id="logoInline" checked />
          Generar código HTML inline
        </label>
      </div>

      <div id="optionsRetrato" class="options-panel" hidden>
        <label>Formato de salida:
          <select id="retratoFormat">
            <option value="webp">WebP</option>
            <option value="jpeg">JPEG optimizado</option>
          </select>
        </label>
        <label>Calidad: <span id="retratoQualityVal">82</span>%
          <input type="range" id="retratoQuality" min="60" max="100" value="82" />
        </label>
        <label class="toggle-wrap">
          <input type="checkbox" id="retratoBase64" />
          También generar Base64 Data URI
        </label>
      </div>

      <div id="optionsPaisaje" class="options-panel" hidden>
        <label>Formato de salida:
          <select id="paisajeFormat">
            <option value="webp">WebP</option>
            <option value="jpeg">JPEG optimizado</option>
          </select>
        </label>
        <label>Calidad: <span id="paisajeQualityVal">80</span>%
          <input type="range" id="paisajeQuality" min="50" max="100" value="80" />
        </label>
        <label>Ancho máximo (px):
          <input type="number" id="paisajeMaxWidth" value="1920" min="400" max="4000" step="100" />
        </label>
        <label class="toggle-wrap">
          <input type="checkbox" id="paisajePlaceholder" checked />
          Generar placeholder Base64 (blur-up, 20px)
        </label>
      </div>

      <div id="optionsRemoveBg" class="options-panel" hidden>
        <label>Salida:
          <select id="removeBgOutput">
            <option value="png">PNG transparente</option>
            <option value="png-base64">PNG + Base64 Data URI</option>
          </select>
        </label>
        <label class="toggle-wrap">
          <input type="checkbox" id="removeBgPreview" checked />
          Mostrar comparación antes / después
        </label>
        <p class="hint">⚠️ La primera ejecución puede tardar más por la descarga y caché del modelo (~45 MB).</p>
      </div>
    </section>

    <section class="card" id="step-convert">
      <h2>4. Convertir</h2>
      <button class="btn-primary" id="convertBtn" disabled>⚡ Procesar imagen</button>
      <div class="progress-wrap" id="progressWrap" hidden>
        <div class="progress-bar" id="progressBar"></div>
        <span id="progressText">Procesando...</span>
      </div>
    </section>

    <section class="card" id="step-results" hidden>
      <h2>5. Resultados</h2>
      <div class="results-grid" id="resultsGrid"></div>
    </section>
  </main>

  <footer>
    <p>Image Optimizer · Sin servidor · Todo en el navegador · <a href="https://github.com/zzever/image-optimizer" target="_blank">GitHub</a></p>
  </footer>

  <script type="module" src="app.js"></script>
</body>
</html>