-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
231 lines (216 loc) · 12 KB
/
index.html
File metadata and controls
231 lines (216 loc) · 12 KB
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticker Studio — WhatsApp Sticker Maker</title>
<meta name="description" content="Crea sticker packs para WhatsApp directamente desde tu navegador. Sin apps, sin registro.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/cropperjs@1.6.1/dist/cropper.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Ambient background -->
<div class="ambient-bg">
<div class="ambient-orb ambient-orb--1"></div>
<div class="ambient-orb ambient-orb--2"></div>
<div class="ambient-orb ambient-orb--3"></div>
</div>
<div class="noise-overlay"></div>
<!-- Header -->
<header class="site-header">
<div class="header-inner">
<a href="#" class="logo-group">
<div class="logo-mark">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="2" y="2" width="9" height="9" rx="2" fill="#22c55e"/>
<rect x="13" y="2" width="9" height="9" rx="2" fill="#22c55e" opacity="0.6"/>
<rect x="2" y="13" width="9" height="9" rx="2" fill="#22c55e" opacity="0.6"/>
<rect x="13" y="13" width="9" height="9" rx="2" fill="#22c55e" opacity="0.3"/>
</svg>
</div>
<div class="logo-text">
<span class="logo-title">Sticker Studio</span>
<span class="logo-subtitle">para WhatsApp</span>
</div>
</a>
<div id="pack-info" class="pack-counter hidden">
<div class="counter-ring">
<svg viewBox="0 0 36 36" class="counter-svg">
<path class="counter-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
<path id="counter-progress" class="counter-fill" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
</svg>
<span id="sticker-count" class="counter-number">0</span>
</div>
<span class="counter-label">/ 30</span>
</div>
</div>
</header>
<main class="main-content">
<!-- Hero section with pack name -->
<section class="hero-section reveal-up">
<div class="hero-badge">100% en tu navegador · Sin registro</div>
<h2 class="hero-title">Crea tus stickers<br><span class="text-accent">en segundos</span></h2>
<div class="pack-name-field">
<label for="pack-name" class="field-label">Nombre del pack</label>
<input type="text" id="pack-name" placeholder="Mi Pack Favorito..."
class="pack-name-input" autocomplete="off" spellcheck="false">
</div>
</section>
<!-- Drop Zone -->
<section class="reveal-up" style="animation-delay: 0.1s">
<div id="drop-zone" class="drop-zone">
<div class="drop-zone-border"></div>
<div class="drop-zone-content">
<div class="drop-icon">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
<rect x="6" y="10" width="36" height="28" rx="4" stroke="currentColor" stroke-width="2" opacity="0.3"/>
<path d="M6 30l10-10 8 8 6-6 12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
<circle cx="32" cy="18" r="3" stroke="currentColor" stroke-width="2" opacity="0.4"/>
<path d="M24 4v12m0 0l-4-4m4 4l4-4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="drop-text">
<p class="drop-title">Arrastra tus imágenes aquí</p>
<p class="drop-hint">PNG, JPG, WebP, GIF · Hasta 30 imágenes</p>
</div>
<button class="btn-select-files" type="button">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
Seleccionar imágenes
</button>
</div>
<input type="file" id="file-input" multiple accept="image/png,image/jpeg,image/webp,image/gif" class="hidden">
</div>
</section>
<!-- Stickers Grid -->
<section id="stickers-container" class="stickers-section hidden">
<div class="section-header">
<div class="section-title-group">
<h2 class="section-title">Tus Stickers</h2>
<span class="section-badge" id="sticker-count-badge">0</span>
</div>
<button id="btn-clear-all" class="btn-ghost btn-ghost--danger">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
Limpiar todo
</button>
</div>
<div id="stickers-grid" class="stickers-grid"></div>
</section>
<!-- Action Bar -->
<section id="download-section" class="action-bar hidden">
<div class="action-bar-inner">
<div class="action-info">
<div class="action-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</div>
<div>
<h3 class="action-title">Pack listo</h3>
<p class="action-desc">512×512 WebP · Optimizado para WhatsApp</p>
</div>
</div>
<div class="action-buttons">
<button id="btn-share-all" class="btn-primary btn-whatsapp">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2zm0 18a8 8 0 01-4.29-1.24l-.308-.184-2.87.852.852-2.87-.184-.308A8 8 0 1112 20z"/></svg>
Enviar a WhatsApp
</button>
<button id="btn-download-wastickers" class="btn-primary">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
.wastickers
</button>
<button id="btn-download-zip" class="btn-secondary">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Descargar ZIP
</button>
</div>
</div>
</section>
<!-- Share Individual (mobile) -->
<section id="share-section" class="share-section hidden">
<p class="share-label">O envía stickers individuales:</p>
<div id="share-grid" class="share-grid"></div>
</section>
<!-- Instructions -->
<section class="instructions-section reveal-up" style="animation-delay: 0.2s">
<h3 class="instructions-title">Cómo funciona</h3>
<div class="instructions-grid">
<div class="instruction-card">
<div class="instruction-number">01</div>
<div class="instruction-body">
<h4>Desde el móvil</h4>
<p>Abre esta web en tu teléfono, crea tus stickers y usa "Enviar a WhatsApp" para compartirlos directamente.</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-number">02</div>
<div class="instruction-body">
<h4>Guardar en galería</h4>
<p>Descarga cada sticker individual. Envíalo en WhatsApp y el destinatario puede guardarlo como favorito.</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-number">03</div>
<div class="instruction-body">
<h4>Archivo .wastickers</h4>
<p>Descarga el <strong>.wastickers</strong> y ábrelo en tu Android. Apps como "Sticker Maker" lo importan directo a WhatsApp. Mínimo 3 stickers.</p>
</div>
</div>
<div class="instruction-card">
<div class="instruction-number">04</div>
<div class="instruction-body">
<h4>Especificaciones</h4>
<p>Cada sticker se convierte a 512×512 px en formato WebP. Máximo 30 stickers por pack.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<p>Sticker Studio · Todo se procesa en tu navegador. Ninguna imagen se sube a servidores.</p>
</footer>
<!-- Crop Modal -->
<div id="crop-modal" class="modal-overlay hidden">
<div class="modal-panel">
<div class="modal-header">
<h3 class="modal-title">Recortar sticker</h3>
<div class="modal-meta">
<span id="crop-counter" class="crop-counter"></span>
</div>
</div>
<div class="modal-body">
<div class="crop-container">
<img id="crop-image">
</div>
</div>
<div class="modal-footer">
<div class="modal-actions-left">
<button id="btn-crop-skip" class="btn-ghost">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>
Saltar
</button>
<button id="btn-skip-all" class="btn-ghost btn-ghost--warning hidden">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>
Saltar todas
</button>
</div>
<div class="modal-actions-right">
<button id="btn-remove-bg" class="btn-ghost btn-ghost--purple">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
Quitar fondo
</button>
<button id="btn-crop-confirm" class="btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
Recortar y agregar
</button>
</div>
</div>
</div>
</div>
<!-- Toast -->
<div id="toast" class="toast"></div>
<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.6.1/dist/cropper.min.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>