Hugging Face's logo

Spaces:
Chasme
/
auto-clic
Running

App Files Community
Chasme commited on
Commit
cac422f
·
verified ·
1 Parent(s): 447dbf5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +686 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Auto Clic
3
- emoji: 🚀
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: auto-clic
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,686 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Auto-Clic Avancé</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --bg-dark: #1a202c;
12
+ --bg-darker: #121826;
13
+ --primary: #4f46e5;
14
+ --primary-hover: #4338ca;
15
+ --text-light: #e2e8f0;
16
+ --text-lighter: #f8fafc;
17
+ --border-dark: #2d3748;
18
+ }
19
+
20
+ body {
21
+ background-color: var(--bg-dark);
22
+ color: var(--text-light);
23
+ min-height: 100vh;
24
+ padding-bottom: 80px;
25
+ }
26
+
27
+ .btn-primary {
28
+ background-color: var(--primary);
29
+ color: white;
30
+ }
31
+
32
+ .btn-primary:hover {
33
+ background-color: var(--primary-hover);
34
+ }
35
+
36
+ .card {
37
+ background-color: var(--bg-darker);
38
+ border: 1px solid var(--border-dark);
39
+ border-radius: 0.5rem;
40
+ }
41
+
42
+ input, select {
43
+ background-color: var(--bg-darker);
44
+ border: 1px solid var(--border-dark);
45
+ color: var(--text-light);
46
+ }
47
+
48
+ input:focus, select:focus {
49
+ outline: none;
50
+ border-color: var(--primary);
51
+ }
52
+
53
+ .tooltip {
54
+ position: relative;
55
+ }
56
+
57
+ .tooltip:hover .tooltip-text {
58
+ visibility: visible;
59
+ opacity: 1;
60
+ }
61
+
62
+ .tooltip-text {
63
+ visibility: hidden;
64
+ width: 200px;
65
+ background-color: var(--bg-darker);
66
+ color: var(--text-light);
67
+ text-align: center;
68
+ border-radius: 6px;
69
+ padding: 5px;
70
+ position: absolute;
71
+ z-index: 1;
72
+ bottom: 125%;
73
+ left: 50%;
74
+ margin-left: -100px;
75
+ opacity: 0;
76
+ transition: opacity 0.3s;
77
+ border: 1px solid var(--border-dark);
78
+ font-size: 0.8rem;
79
+ }
80
+
81
+ .active-btn {
82
+ animation: pulse 1.5s infinite;
83
+ }
84
+
85
+ @keyframes pulse {
86
+ 0% {
87
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
88
+ }
89
+ 70% {
90
+ box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
91
+ }
92
+ 100% {
93
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
94
+ }
95
+ }
96
+
97
+ .modal {
98
+ display: none;
99
+ position: fixed;
100
+ z-index: 100;
101
+ left: 0;
102
+ top: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ overflow: auto;
106
+ background-color: rgba(0,0,0,0.8);
107
+ }
108
+
109
+ .modal-content {
110
+ background-color: var(--bg-darker);
111
+ margin: 10% auto;
112
+ padding: 20px;
113
+ border: 1px solid var(--border-dark);
114
+ width: 90%;
115
+ max-width: 500px;
116
+ border-radius: 0.5rem;
117
+ }
118
+
119
+ .close {
120
+ color: #aaa;
121
+ float: right;
122
+ font-size: 28px;
123
+ font-weight: bold;
124
+ cursor: pointer;
125
+ }
126
+
127
+ .close:hover {
128
+ color: var(--text-light);
129
+ }
130
+ </style>
131
+ </head>
132
+ <body>
133
+ <div class="container mx-auto px-4 py-6">
134
+ <!-- En-tête -->
135
+ <header class="flex justify-between items-center mb-8">
136
+ <h1 class="text-2xl font-bold text-indigo-400">
137
+ <i class="fas fa-mouse-pointer mr-2"></i>Auto-Clic Avancé
138
+ </h1>
139
+ <div class="flex space-x-2">
140
+ <button id="helpBtn" class="p-2 rounded-full bg-gray-700 hover:bg-gray-600">
141
+ <i class="fas fa-question-circle"></i>
142
+ </button>
143
+ <button id="addBtn" class="btn-primary px-4 py-2 rounded-lg flex items-center">
144
+ <i class="fas fa-plus mr-2"></i> Ajouter
145
+ </button>
146
+ </div>
147
+ </header>
148
+
149
+ <!-- Liste des boutons -->
150
+ <div id="buttonsContainer" class="space-y-4">
151
+ <!-- Les boutons seront ajoutés ici dynamiquement -->
152
+ </div>
153
+
154
+ <!-- Barre d'outils -->
155
+ <div class="fixed bottom-0 left-0 right-0 bg-gray-800 py-3 px-4 flex justify-between items-center border-t border-gray-700">
156
+ <div class="flex space-x-2">
157
+ <button id="saveProfileBtn" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg">
158
+ <i class="fas fa-save mr-1"></i> Sauvegarder
159
+ </button>
160
+ <button id="loadProfileBtn" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg">
161
+ <i class="fas fa-folder-open mr-1"></i> Charger
162
+ </button>
163
+ </div>
164
+ <div class="flex space-x-2">
165
+ <button id="startAllBtn" class="btn-primary px-4 py-2 rounded-lg">
166
+ <i class="fas fa-play mr-1"></i> Tout démarrer
167
+ </button>
168
+ <button id="stopAllBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg">
169
+ <i class="fas fa-stop mr-1"></i> Tout arrêter
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Modal pour ajouter un bouton -->
176
+ <div id="addButtonModal" class="modal">
177
+ <div class="modal-content">
178
+ <span class="close">&times;</span>
179
+ <h2 class="text-xl font-bold mb-4">Ajouter un bouton d'auto-clic</h2>
180
+ <form id="buttonForm" class="space-y-4">
181
+ <div>
182
+ <label for="buttonName" class="block mb-1">Nom du bouton</label>
183
+ <input type="text" id="buttonName" class="w-full p-2 rounded" placeholder="Ex: Bouton rapide" required>
184
+ </div>
185
+
186
+ <div>
187
+ <label for="clickType" class="block mb-1">Type de clic</label>
188
+ <select id="clickType" class="w-full p-2 rounded">
189
+ <option value="simple">Clic simple</option>
190
+ <option value="double">Double clic</option>
191
+ <option value="long">Clic long (1s)</option>
192
+ </select>
193
+ </div>
194
+
195
+ <div>
196
+ <label for="clickInterval" class="block mb-1 tooltip">
197
+ Intervalle entre les clics (secondes)
198
+ <span class="tooltip-text">Temps en secondes entre chaque action de clic</span>
199
+ </label>
200
+ <input type="number" id="clickInterval" min="0.1" step="0.1" value="1" class="w-full p-2 rounded" required>
201
+ </div>
202
+
203
+ <div>
204
+ <label for="clickCount" class="block mb-1 tooltip">
205
+ Nombre de clics
206
+ <span class="tooltip-text">Mettez 0 pour un nombre infini de clics</span>
207
+ </label>
208
+ <input type="number" id="clickCount" min="0" value="50" class="w-full p-2 rounded" required>
209
+ </div>
210
+
211
+ <button type="submit" class="btn-primary w-full py-2 rounded-lg">
212
+ <i class="fas fa-check mr-1"></i> Créer le bouton
213
+ </button>
214
+ </form>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Modal pour sauvegarder/charger -->
219
+ <div id="profileModal" class="modal">
220
+ <div class="modal-content">
221
+ <span class="close">&times;</span>
222
+ <h2 class="text-xl font-bold mb-4" id="profileModalTitle">Sauvegarder le profil</h2>
223
+ <div id="profileForm" class="space-y-4">
224
+ <div>
225
+ <label for="profileName" class="block mb-1">Nom du profil</label>
226
+ <input type="text" id="profileName" class="w-full p-2 rounded" placeholder="Ex: Configuration jeu" required>
227
+ </div>
228
+ <div id="profilesList" class="max-h-60 overflow-y-auto">
229
+ <!-- Les profils seront listés ici -->
230
+ </div>
231
+ <button id="confirmProfileBtn" class="btn-primary w-full py-2 rounded-lg">
232
+ <i class="fas fa-check mr-1"></i> Confirmer
233
+ </button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Modal d'aide -->
239
+ <div id="helpModal" class="modal">
240
+ <div class="modal-content">
241
+ <span class="close">&times;</span>
242
+ <h2 class="text-xl font-bold mb-4">Comment utiliser Auto-Clic Avancé</h2>
243
+ <div class="space-y-4">
244
+ <div>
245
+ <h3 class="font-semibold text-indigo-300">Ajouter un bouton</h3>
246
+ <p>Cliquez sur le bouton "Ajouter" pour créer un nouveau bouton d'auto-clic. Donnez-lui un nom, choisissez le type de clic, l'intervalle en secondes et le nombre de clics.</p>
247
+ </div>
248
+
249
+ <div>
250
+ <h3 class="font-semibold text-indigo-300">Types de clic</h3>
251
+ <ul class="list-disc pl-5 space-y-1">
252
+ <li><strong>Clic simple</strong>: Un clic standard</li>
253
+ <li><strong>Double clic</strong>: Deux clics rapides</li>
254
+ <li><strong>Clic long</strong>: Un clic maintenu pendant 1 seconde</li>
255
+ </ul>
256
+ </div>
257
+
258
+ <div>
259
+ <h3 class="font-semibold text-indigo-300">Intervalles</h3>
260
+ <p>L'intervalle est le temps en secondes entre chaque action de clic. Vous pouvez utiliser des valeurs décimales (ex: 0.5 pour un demi-seconde).</p>
261
+ </div>
262
+
263
+ <div>
264
+ <h3 class="font-semibold text-indigo-300">Sauvegarde/Chargement</h3>
265
+ <p>Vous pouvez sauvegarder vos configurations de boutons dans des profils pour les réutiliser plus tard.</p>
266
+ </div>
267
+
268
+ <div>
269
+ <h3 class="font-semibold text-indigo-300">Contrôles globaux</h3>
270
+ <p>Utilisez les boutons "Tout démarrer" et "Tout arrêter" pour contrôler tous les boutons simultanément.</p>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <script>
277
+ document.addEventListener('DOMContentLoaded', function() {
278
+ // Variables globales
279
+ let buttons = [];
280
+ let activeButtons = [];
281
+ let isSavingProfile = false;
282
+
283
+ // Éléments du DOM
284
+ const buttonsContainer = document.getElementById('buttonsContainer');
285
+ const addBtn = document.getElementById('addBtn');
286
+ const addButtonModal = document.getElementById('addButtonModal');
287
+ const buttonForm = document.getElementById('buttonForm');
288
+ const profileModal = document.getElementById('profileModal');
289
+ const profileModalTitle = document.getElementById('profileModalTitle');
290
+ const profileForm = document.getElementById('profileForm');
291
+ const profilesList = document.getElementById('profilesList');
292
+ const confirmProfileBtn = document.getElementById('confirmProfileBtn');
293
+ const saveProfileBtn = document.getElementById('saveProfileBtn');
294
+ const loadProfileBtn = document.getElementById('loadProfileBtn');
295
+ const startAllBtn = document.getElementById('startAllBtn');
296
+ const stopAllBtn = document.getElementById('stopAllBtn');
297
+ const helpBtn = document.getElementById('helpBtn');
298
+ const helpModal = document.getElementById('helpModal');
299
+
300
+ // Fermeture des modals
301
+ const closeButtons = document.getElementsByClassName('close');
302
+ for (let btn of closeButtons) {
303
+ btn.addEventListener('click', function() {
304
+ document.querySelectorAll('.modal').forEach(modal => {
305
+ modal.style.display = 'none';
306
+ });
307
+ });
308
+ }
309
+
310
+ // Fermeture des modals en cliquant à l'extérieur
311
+ window.addEventListener('click', function(event) {
312
+ if (event.target.classList.contains('modal')) {
313
+ event.target.style.display = 'none';
314
+ }
315
+ });
316
+
317
+ // Gestion des événements
318
+ addBtn.addEventListener('click', function() {
319
+ addButtonModal.style.display = 'block';
320
+ });
321
+
322
+ helpBtn.addEventListener('click', function() {
323
+ helpModal.style.display = 'block';
324
+ });
325
+
326
+ saveProfileBtn.addEventListener('click', function() {
327
+ isSavingProfile = true;
328
+ profileModalTitle.textContent = 'Sauvegarder le profil';
329
+ document.getElementById('profileName').value = '';
330
+ profilesList.innerHTML = '';
331
+ profileModal.style.display = 'block';
332
+ });
333
+
334
+ loadProfileBtn.addEventListener('click', function() {
335
+ isSavingProfile = false;
336
+ profileModalTitle.textContent = 'Charger un profil';
337
+ document.getElementById('profileName').value = '';
338
+ loadProfilesList();
339
+ profileModal.style.display = 'block';
340
+ });
341
+
342
+ startAllBtn.addEventListener('click', function() {
343
+ buttons.forEach(button => {
344
+ if (!button.isActive) {
345
+ startButton(button.id);
346
+ }
347
+ });
348
+ });
349
+
350
+ stopAllBtn.addEventListener('click', function() {
351
+ buttons.forEach(button => {
352
+ if (button.isActive) {
353
+ stopButton(button.id);
354
+ }
355
+ });
356
+ });
357
+
358
+ buttonForm.addEventListener('submit', function(e) {
359
+ e.preventDefault();
360
+ createButton();
361
+ addButtonModal.style.display = 'none';
362
+ buttonForm.reset();
363
+ });
364
+
365
+ confirmProfileBtn.addEventListener('click', function(e) {
366
+ e.preventDefault();
367
+ const profileName = document.getElementById('profileName').value.trim();
368
+
369
+ if (!profileName) {
370
+ alert('Veuillez entrer un nom de profil');
371
+ return;
372
+ }
373
+
374
+ if (isSavingProfile) {
375
+ saveProfile(profileName);
376
+ } else {
377
+ loadProfile(profileName);
378
+ }
379
+
380
+ profileModal.style.display = 'none';
381
+ });
382
+
383
+ // Fonctions
384
+
385
+ function createButton() {
386
+ const buttonName = document.getElementById('buttonName').value || 'Nouveau bouton';
387
+ const clickType = document.getElementById('clickType').value;
388
+ const clickInterval = parseFloat(document.getElementById('clickInterval').value) || 1;
389
+ const clickCount = parseInt(document.getElementById('clickCount').value) || 0;
390
+
391
+ const buttonId = Date.now().toString();
392
+
393
+ const button = {
394
+ id: buttonId,
395
+ name: buttonName,
396
+ type: clickType,
397
+ interval: clickInterval,
398
+ count: clickCount,
399
+ clicksDone: 0,
400
+ isActive: false,
401
+ timer: null
402
+ };
403
+
404
+ buttons.push(button);
405
+ renderButton(button);
406
+ }
407
+
408
+ function renderButton(button) {
409
+ const buttonElement = document.createElement('div');
410
+ buttonElement.className = 'card p-4';
411
+ buttonElement.id = `button-${button.id}`;
412
+
413
+ let timeRemaining = '';
414
+ if (button.count > 0) {
415
+ timeRemaining = ` | Temps restant: ${(button.count - button.clicksDone) * button.interval}s`;
416
+ }
417
+
418
+ buttonElement.innerHTML = `
419
+ <div class="flex justify-between items-start mb-3">
420
+ <h3 class="font-semibold text-lg">${button.name}</h3>
421
+ <div class="flex space-x-2">
422
+ <button class="delete-btn p-2 text-gray-400 hover:text-red-400" data-id="${button.id}">
423
+ <i class="fas fa-trash"></i>
424
+ </button>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="grid grid-cols-2 gap-2 mb-3">
429
+ <div>
430
+ <span class="text-gray-400">Type:</span>
431
+ <span>${getClickTypeName(button.type)}</span>
432
+ </div>
433
+ <div>
434
+ <span class="text-gray-400">Intervalle:</span>
435
+ <span>${button.interval}s</span>
436
+ </div>
437
+ <div>
438
+ <span class="text-gray-400">Clics:</span>
439
+ <span>${button.count === 0 ? '∞' : button.count}</span>
440
+ </div>
441
+ <div>
442
+ <span class="text-gray-400">Effectués:</span>
443
+ <span>${button.clicksDone}</span>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="flex justify-between items-center">
448
+ <div class="text-sm text-gray-400">
449
+ ${button.isActive ?
450
+ `<span class="text-green-400"><i class="fas fa-circle mr-1"></i> Actif</span>${timeRemaining}` :
451
+ '<span class="text-gray-400"><i class="far fa-circle mr-1"></i> Inactif</span>'}
452
+ </div>
453
+ <div class="flex space-x-2">
454
+ <button class="stop-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded ${!button.isActive ? 'hidden' : ''}" data-id="${button.id}">
455
+ <i class="fas fa-stop mr-1"></i> Arrêter
456
+ </button>
457
+ <button class="start-btn btn-primary px-3 py-1 rounded ${button.isActive ? 'hidden' : ''}" data-id="${button.id}">
458
+ <i class="fas fa-play mr-1"></i> Démarrer
459
+ </button>
460
+ </div>
461
+ </div>
462
+ `;
463
+
464
+ buttonsContainer.appendChild(buttonElement);
465
+
466
+ // Ajout des événements
467
+ buttonElement.querySelector('.start-btn').addEventListener('click', function() {
468
+ startButton(button.id);
469
+ });
470
+
471
+ buttonElement.querySelector('.stop-btn').addEventListener('click', function() {
472
+ stopButton(button.id);
473
+ });
474
+
475
+ buttonElement.querySelector('.delete-btn').addEventListener('click', function() {
476
+ deleteButton(button.id);
477
+ });
478
+ }
479
+
480
+ function getClickTypeName(type) {
481
+ switch(type) {
482
+ case 'simple': return 'Clic simple';
483
+ case 'double': return 'Double clic';
484
+ case 'long': return 'Clic long';
485
+ default: return type;
486
+ }
487
+ }
488
+
489
+ function startButton(buttonId) {
490
+ const button = buttons.find(b => b.id === buttonId);
491
+ if (!button || button.isActive) return;
492
+
493
+ button.isActive = true;
494
+ button.clicksDone = 0;
495
+
496
+ // Mise à jour de l'interface
497
+ updateButtonUI(button);
498
+
499
+ // Démarrer le clic automatique
500
+ const intervalMs = button.interval * 1000;
501
+
502
+ button.timer = setInterval(function() {
503
+ if (button.count > 0 && button.clicksDone >= button.count) {
504
+ stopButton(button.id);
505
+ return;
506
+ }
507
+
508
+ // Simuler le clic
509
+ simulateClick(button.type);
510
+
511
+ button.clicksDone++;
512
+
513
+ // Mise à jour de l'interface
514
+ updateButtonUI(button);
515
+
516
+ }, intervalMs);
517
+
518
+ // Premier clic immédiat
519
+ simulateClick(button.type);
520
+ button.clicksDone++;
521
+ updateButtonUI(button);
522
+
523
+ // Ajouter aux boutons actifs
524
+ if (!activeButtons.includes(buttonId)) {
525
+ activeButtons.push(buttonId);
526
+ }
527
+ }
528
+
529
+ function stopButton(buttonId) {
530
+ const button = buttons.find(b => b.id === buttonId);
531
+ if (!button || !button.isActive) return;
532
+
533
+ button.isActive = false;
534
+
535
+ // Arrêter le timer
536
+ if (button.timer) {
537
+ clearInterval(button.timer);
538
+ button.timer = null;
539
+ }
540
+
541
+ // Mise à jour de l'interface
542
+ updateButtonUI(button);
543
+
544
+ // Retirer des boutons actifs
545
+ activeButtons = activeButtons.filter(id => id !== buttonId);
546
+ }
547
+
548
+ function deleteButton(buttonId) {
549
+ // Arrêter le bouton s'il est actif
550
+ stopButton(buttonId);
551
+
552
+ // Supprimer de la liste
553
+ buttons = buttons.filter(b => b.id !== buttonId);
554
+
555
+ // Supprimer de l'interface
556
+ const buttonElement = document.getElementById(`button-${buttonId}`);
557
+ if (buttonElement) {
558
+ buttonElement.remove();
559
+ }
560
+ }
561
+
562
+ function updateButtonUI(button) {
563
+ const buttonElement = document.getElementById(`button-${button.id}`);
564
+ if (!buttonElement) return;
565
+
566
+ let timeRemaining = '';
567
+ if (button.count > 0) {
568
+ timeRemaining = ` | Temps restant: ${(button.count - button.clicksDone) * button.interval}s`;
569
+ }
570
+
571
+ // Mise à jour de l'état
572
+ const statusElement = buttonElement.querySelector('.text-sm');
573
+ if (statusElement) {
574
+ statusElement.innerHTML = button.isActive ?
575
+ `<span class="text-green-400"><i class="fas fa-circle mr-1"></i> Actif</span>${timeRemaining}` :
576
+ '<span class="text-gray-400"><i class="far fa-circle mr-1"></i> Inactif</span>';
577
+ }
578
+
579
+ // Mise à jour des boutons
580
+ const startBtn = buttonElement.querySelector('.start-btn');
581
+ const stopBtn = buttonElement.querySelector('.stop-btn');
582
+
583
+ if (startBtn) startBtn.classList.toggle('hidden', button.isActive);
584
+ if (stopBtn) stopBtn.classList.toggle('hidden', !button.isActive);
585
+
586
+ // Mise à jour du compteur
587
+ const clicksDoneElement = buttonElement.querySelectorAll('span')[7]; // Index du span des clics effectués
588
+ if (clicksDoneElement) {
589
+ clicksDoneElement.textContent = button.clicksDone;
590
+ }
591
+
592
+ // Animation pour les boutons actifs
593
+ if (button.isActive) {
594
+ buttonElement.classList.add('active-btn');
595
+ } else {
596
+ buttonElement.classList.remove('active-btn');
597
+ }
598
+ }
599
+
600
+ function simulateClick(type) {
601
+ // Dans une vraie application, vous utiliseriez element.click() ou des événements
602
+ // Pour cette démo, nous allons simplement enregistrer dans la console
603
+ switch(type) {
604
+ case 'simple':
605
+ console.log('Clic simple simulé');
606
+ break;
607
+ case 'double':
608
+ console.log('Double clic simulé');
609
+ break;
610
+ case 'long':
611
+ console.log('Clic long (1s) simulé');
612
+ break;
613
+ }
614
+ }
615
+
616
+ function saveProfile(profileName) {
617
+ const profiles = JSON.parse(localStorage.getItem('autoClickerProfiles')) || {};
618
+ profiles[profileName] = buttons;
619
+ localStorage.setItem('autoClickerProfiles', JSON.stringify(profiles));
620
+ alert(`Profil "${profileName}" sauvegardé avec succès!`);
621
+ }
622
+
623
+ function loadProfile(profileName) {
624
+ const profiles = JSON.parse(localStorage.getItem('autoClickerProfiles')) || {};
625
+ const savedButtons = profiles[profileName];
626
+
627
+ if (!savedButtons) {
628
+ alert(`Le profil "${profileName}" n'existe pas!`);
629
+ return;
630
+ }
631
+
632
+ // Arrêter tous les boutons actuels
633
+ buttons.forEach(button => {
634
+ if (button.isActive) {
635
+ stopButton(button.id);
636
+ }
637
+ });
638
+
639
+ // Vider le conteneur
640
+ buttonsContainer.innerHTML = '';
641
+
642
+ // Charger les boutons sauvegardés
643
+ buttons = JSON.parse(JSON.stringify(savedButtons));
644
+
645
+ // Réinitialiser l'état des boutons
646
+ buttons.forEach(button => {
647
+ button.isActive = false;
648
+ button.timer = null;
649
+ button.clicksDone = 0;
650
+ renderButton(button);
651
+ });
652
+
653
+ alert(`Profil "${profileName}" chargé avec succès!`);
654
+ }
655
+
656
+ function loadProfilesList() {
657
+ const profiles = JSON.parse(localStorage.getItem('autoClickerProfiles')) || {};
658
+ profilesList.innerHTML = '';
659
+
660
+ if (Object.keys(profiles).length === 0) {
661
+ profilesList.innerHTML = '<p class="text-gray-400 text-center py-4">Aucun profil sauvegardé</p>';
662
+ return;
663
+ }
664
+
665
+ for (const [name, profileButtons] of Object.entries(profiles)) {
666
+ const profileElement = document.createElement('div');
667
+ profileElement.className = 'p-3 border-b border-gray-700 hover:bg-gray-700 cursor-pointer';
668
+ profileElement.textContent = `${name} (${profileButtons.length} bouton${profileButtons.length !== 1 ? 's' : ''})`;
669
+ profileElement.addEventListener('click', function() {
670
+ document.getElementById('profileName').value = name;
671
+ });
672
+ profilesList.appendChild(profileElement);
673
+ }
674
+ }
675
+
676
+ // Charger les boutons sauvegardés au démarrage (si existants)
677
+ const savedProfiles = JSON.parse(localStorage.getItem('autoClickerProfiles')) || {};
678
+ if (Object.keys(savedProfiles).length > 0) {
679
+ // Charger le premier profil par défaut
680
+ const firstProfile = Object.keys(savedProfiles)[0];
681
+ loadProfile(firstProfile);
682
+ }
683
+ });
684
+ </script>
685
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Chasme/auto-clic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
686
+ </html>