st.pdf/index.html at main · ma-serra/st.pdf · 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
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Catálogo Visual em PDF</title>
  <link rel="stylesheet" href="./styles.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <header class="app-header">
    <h1>Catálogo Visual</h1>
  </header>

  <main class="container">
    <section class="panel">
      <h2>1) Imagens</h2>
      <div class="uploader">
        <label class="btn primary" for="fileInput">Selecionar imagens</label>
        <input id="fileInput" type="file" multiple accept="image/jpeg,image/png" />
        <div id="dropZone" class="drop-zone" aria-label="Solte as imagens aqui">
          Toque ou arraste as imagens aqui
        </div>
        <div class="uploader-actions">
          <button id="sortNameBtn" class="btn">Ordenar por nome</button>
          <button id="sortDateBtn" class="btn">Ordenar por data</button>
          <button id="clearBtn" class="btn danger">Limpar</button>
        </div>
        <div id="thumbGrid" class="thumb-grid" aria-live="polite"></div>
      </div>
    </section>

    <section class="panel">
      <h2>2) Layout e Configurações</h2>
      <div class="options-grid">
        <div class="field">
          <label for="titleInput">Título do catálogo</label>
          <input id="titleInput" type="text" placeholder="Ex.: Coleção Verão 2025" />
        </div>

        <div class="field">
          <label for="layoutSelect">Layout por página</label>
          <select id="layoutSelect">
            <option value="1_center">1 por página (centralizada)</option>
            <option value="2_row">2 por página (lado a lado)</option>
            <option value="3_row">3 por página (em linha)</option>
            <option value="3_col">3 por página (em coluna)</option>
            <option value="4_grid">4 por página (2x2)</option>
            <option value="5_col">5 por página (em coluna)</option>
            <option value="6_grid">6 por página (2x3)</option>
            <option value="4x3">12 por página (4x3)</option>
            <option value="3x4">12 por página (3x4)</option>
            <option value="4x4">16 por página (4x4)</option>
            <option value="4x5">20 por página (4x5)</option>
            <option value="4x6">24 por página (4x6)</option>
            <option value="hero">Destaque (imagem principal + menores)</option>
            <option value="mosaic">Mosaico (estilo Pinterest)</option>
          </select>
        </div>

        <div class="field">
          <label for="captionModeSelect">Legenda</label>
          <select id="captionModeSelect">
            <option value="below">Abaixo da imagem</option>
            <option value="side">Lateral direita</option>
            <option value="overlay">Sobreposta (faixa)</option>
            <option value="none">Sem legenda</option>
          </select>
        </div>

        <div class="field">
          <label for="pageSizeSelect">Tamanho da página</label>
          <select id="pageSizeSelect">
            <option value="a4">A4</option>
            <option value="letter">Carta</option>
            <option value="legal">Ofício (Legal)</option>
          </select>
        </div>

        <div class="field">
          <label for="orientationSelect">Orientação</label>
          <select id="orientationSelect">
            <option value="portrait">Retrato</option>
            <option value="landscape">Paisagem</option>
          </select>
        </div>

        <div class="field">
          <label for="marginInput">Margem (mm)</label>
          <input id="marginInput" type="number" min="0" max="50" step="1" value="15" />
        </div>

        <div class="field row">
          <label class="checkbox">
            <input id="removeBgChk" type="checkbox" />
            Remover fundo automaticamente
          </label>
          <label class="checkbox">
            <input id="enhanceChk" type="checkbox" />
            Otimizar contraste e nitidez
          </label>
        </div>

        <div class="field row">
          <label class="checkbox">
            <input id="autoLayoutChk" type="checkbox" />
            Sugerir layout automaticamente (IA)
          </label>
        </div>

        <div class="field">
          <label>Remoção de fundo via API (opcional)</label>
          <div class="field">
            <label class="checkbox">
              <input id="useRemoveBgApiChk" type="checkbox" />
              Usar Remove.bg API
            </label>
            <input id="removeBgApiKey" type="password" placeholder="Insira sua API key do Remove.bg" />
          </div>
        </div>

        <div class="field">
          <label>Pré-visualização do layout</label>
          <canvas id="layoutPreview" width="600" height="400" class="layout-preview" aria-label="Prévia do layout"></canvas>
        </div>
      </div>
    </section>

    <section class="panel">
      <h2>3) Gerar PDF</h2>
      <div class="actions">
        <button id="generateBtn" class="btn primary">Gerar PDF</button>
        <a id="downloadLink" class="btn" href="#" download="catalogo.pdf" style="display:none;">Baixar PDF</a>
      </div>
      <div id="previewWrap" class="preview-wrap">
        <iframe id="pdfPreview" title="Prévia do PDF" aria-label="Prévia do PDF"></iframe>
      </div>
    </section>
  </main>

  <footer class="app-footer">
    <span>Feito para montar catálogos de forma simples e rápida.</span>
  </footer>

  <script type="importmap">
  {
    "imports": {
      "sortablejs": "https://esm.sh/[email protected]",
      "jspdf": "https://esm.sh/[email protected]",
      "tesseract.js": "https://esm.sh/[email protected]"
    }
  }
  </script>
  <script type="module" src="./main.js"></script>
</body>
</html>