Hugging Face's logo

Spaces:
evoluxsa
/
trzt
Running

App Files Community
evoluxsa commited on
Commit
5280596
·
verified ·
1 Parent(s): 13afe70

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +428 -218
index.html CHANGED
@@ -3,262 +3,472 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Pomodoro Game</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
- .progress-ring__circle {
11
- transition: stroke-dashoffset 0.35s;
12
- transform: rotate(-90deg);
13
- transform-origin: 50% 50%;
14
  }
15
- .pulse-animation {
16
- animation: pulse 1.5s infinite;
 
 
 
 
 
 
 
17
  }
18
- @keyframes pulse {
19
- 0% { transform: scale(1); }
20
- 50% { transform: scale(1.05); }
21
- 100% { transform: scale(1); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
  </style>
24
  </head>
25
- <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
26
- <div class="max-w-md w-full bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
27
- <!-- Header -->
28
- <div class="bg-indigo-600 p-6 text-center">
29
- <h1 class="text-3xl font-bold">Pomodoro Game</h1>
30
- <p class="mt-2 opacity-90">Boostez votre productivité</p>
31
  </div>
32
-
33
- <!-- Timer Display -->
34
- <div class="p-8 flex flex-col items-center">
35
- <div class="relative w-64 h-64 mb-8">
36
- <svg class="w-full h-full" viewBox="0 0 100 100">
37
- <circle class="text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
38
- <circle class="progress-ring__circle text-indigo-500" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
39
- </svg>
40
- <div class="absolute inset-0 flex items-center justify-center flex-col">
41
- <div id="time-display" class="text-5xl font-mono font-bold">25:00</div>
42
- <div id="timer-state" class="mt-2 text-lg font-medium text-indigo-400">Prêt à travailler</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
44
  </div>
45
 
46
- <!-- Controls -->
47
- <div class="flex space-x-4 mb-6">
48
- <button id="start-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-full font-semibold transition flex items-center">
49
- <i class="fas fa-play mr-2"></i> Démarrer
50
- </button>
51
- <button id="reset-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-full font-semibold transition flex items-center">
52
- <i class="fas fa-redo mr-2"></i> Réinitialiser
53
- </button>
54
- </div>
55
- </div>
56
-
57
- <!-- Settings -->
58
- <div class="bg-gray-700 p-6">
59
- <div class="grid grid-cols-2 gap-4 mb-4">
60
- <div>
61
- <label for="work-duration" class="block text-sm font-medium mb-1">Travail (minutes)</label>
62
- <input type="number" id="work-duration" min="1" max="60" value="25" class="w-full bg-gray-800 rounded px-3 py-2 text-center">
63
  </div>
64
- <div>
65
- <label for="break-duration" class="block text-sm font-medium mb-1">Pause (minutes)</label>
66
- <input type="number" id="break-duration" min="1" max="30" value="5" class="w-full bg-gray-800 rounded px-3 py-2 text-center">
67
  </div>
68
- </div>
69
-
70
- <div class="flex justify-between items-center">
71
  <div>
72
- <span class="text-sm font-medium">Sessions complétées:</span>
73
- <span id="sessions-count" class="ml-2 font-bold">0</span>
74
  </div>
75
- <button id="apply-settings" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-medium">
76
- Appliquer
77
- </button>
78
  </div>
79
  </div>
80
  </div>
81
-
82
- <!-- Notification Sound -->
83
- <audio id="notification-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3" preload="auto"></audio>
84
-
85
  <script>
86
- document.addEventListener('DOMContentLoaded', () => {
87
  // Elements
88
- const timeDisplay = document.getElementById('time-display');
89
- const timerState = document.getElementById('timer-state');
90
- const startBtn = document.getElementById('start-btn');
91
- const resetBtn = document.getElementById('reset-btn');
92
- const workDurationInput = document.getElementById('work-duration');
93
- const breakDurationInput = document.getElementById('break-duration');
94
- const applySettingsBtn = document.getElementById('apply-settings');
95
- const sessionsCount = document.getElementById('sessions-count');
96
- const notificationSound = document.getElementById('notification-sound');
97
- const progressCircle = document.querySelector('.progress-ring__circle');
 
 
 
98
 
99
- // Variables
100
- let workDuration = 25 * 60;
101
- let breakDuration = 5 * 60;
102
- let timeLeft = workDuration;
103
- let timer;
104
- let isRunning = false;
105
- let isWorkTime = true;
106
- let completedSessions = 0;
107
 
108
- // Set circle progress
109
- const radius = progressCircle.r.baseVal.value;
110
- const circumference = 2 * Math.PI * radius;
111
- progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
112
- progressCircle.style.strokeDashoffset = circumference;
113
 
114
- // Update circle progress
115
- function setProgress(percent) {
116
- const offset = circumference - (percent / 100) * circumference;
117
- progressCircle.style.strokeDashoffset = offset;
118
- }
119
 
120
- // Format time (seconds to MM:SS)
121
- function formatTime(seconds) {
122
- const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
123
- const secs = (seconds % 60).toString().padStart(2, '0');
124
- return `${mins}:${secs}`;
125
- }
126
 
127
- // Update display
128
- function updateDisplay() {
129
- timeDisplay.textContent = formatTime(timeLeft);
130
- const percent = (timeLeft / (isWorkTime ? workDuration : breakDuration)) * 100;
131
- setProgress(percent);
132
-
133
- // Add pulse animation when time is running low
134
- if (timeLeft <= 10 && isRunning) {
135
- timeDisplay.classList.add('text-red-400', 'pulse-animation');
 
 
 
 
 
136
  } else {
137
- timeDisplay.classList.remove('text-red-400', 'pulse-animation');
 
 
 
138
  }
139
- }
140
-
141
- // Start timer
142
- function startTimer() {
143
- if (isRunning) return;
144
-
145
- isRunning = true;
146
- startBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
147
- startBtn.classList.remove('bg-indigo-600');
148
- startBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
149
-
150
- timer = setInterval(() => {
151
- timeLeft--;
152
- updateDisplay();
153
-
154
- if (timeLeft <= 0) {
155
- clearInterval(timer);
156
- notificationSound.play();
157
-
158
- if (isWorkTime) {
159
- completedSessions++;
160
- sessionsCount.textContent = completedSessions;
161
- timerState.textContent = 'Pause terminée!';
162
- startBtn.classList.add('hidden');
163
-
164
- // Auto-start break after 3 seconds
165
- setTimeout(() => {
166
- isWorkTime = false;
167
- timeLeft = breakDuration;
168
- timerState.textContent = 'Pause en cours';
169
- startBtn.classList.remove('hidden');
170
- startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Démarrer';
171
- startBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
172
- startBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
173
- isRunning = false;
174
- updateDisplay();
175
- }, 3000);
176
- } else {
177
- timerState.textContent = 'Session terminée!';
178
- startBtn.classList.add('hidden');
179
-
180
- // Auto-start work after 3 seconds
181
- setTimeout(() => {
182
- isWorkTime = true;
183
- timeLeft = workDuration;
184
- timerState.textContent = 'Travail en cours';
185
- startBtn.classList.remove('hidden');
186
- startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Démarrer';
187
- startBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
188
- startBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
189
- isRunning = false;
190
- updateDisplay();
191
- }, 3000);
192
- }
193
- }
194
- }, 1000);
195
- }
196
-
197
- // Pause timer
198
- function pauseTimer() {
199
- clearInterval(timer);
200
- isRunning = false;
201
- startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Reprendre';
202
- startBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
203
- startBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
204
- }
205
 
206
- // Reset timer
207
- function resetTimer() {
208
- clearInterval(timer);
209
- isRunning = false;
210
- isWorkTime = true;
211
- timeLeft = workDuration;
212
- startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Démarrer';
213
- startBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
214
- startBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
215
- timerState.textContent = 'Prêt à travailler';
216
- updateDisplay();
217
- }
218
 
219
- // Apply settings
220
- function applySettings() {
221
- const newWorkDuration = parseInt(workDurationInput.value) * 60;
222
- const newBreakDuration = parseInt(breakDurationInput.value) * 60;
223
-
224
- if (newWorkDuration > 0 && newBreakDuration > 0) {
225
- workDuration = newWorkDuration;
226
- breakDuration = newBreakDuration;
227
-
228
- if (!isRunning) {
229
- timeLeft = isWorkTime ? workDuration : breakDuration;
230
- updateDisplay();
231
  }
232
 
233
- // Show confirmation
234
- const originalText = applySettingsBtn.textContent;
235
- applySettingsBtn.textContent = '✓ Appliqué!';
236
- applySettingsBtn.classList.remove('bg-indigo-600');
237
- applySettingsBtn.classList.add('bg-green-600');
238
-
239
- setTimeout(() => {
240
- applySettingsBtn.textContent = originalText;
241
- applySettingsBtn.classList.remove('bg-green-600');
242
- applySettingsBtn.classList.add('bg-indigo-600');
243
- }, 2000);
244
  }
245
- }
246
 
247
- // Event listeners
248
- startBtn.addEventListener('click', () => {
249
- if (isRunning) {
250
- pauseTimer();
251
- } else {
252
- startTimer();
253
- timerState.textContent = isWorkTime ? 'Travail en cours' : 'Pause en cours';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
255
  });
256
 
257
- resetBtn.addEventListener('click', resetTimer);
258
- applySettingsBtn.addEventListener('click', applySettings);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
259
 
260
- // Initialize
261
- updateDisplay();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
262
  });
263
  </script>
264
  <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=evoluxsa/trzt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Générateur de Signature Email Professionnelle</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
+ .signature-preview {
11
+ min-height: 150px;
12
+ border-left: 4px solid #3b82f6;
13
+ background-color: #f8fafc;
14
  }
15
+ .color-picker {
16
+ -webkit-appearance: none;
17
+ -moz-appearance: none;
18
+ appearance: none;
19
+ width: 40px;
20
+ height: 40px;
21
+ border: none;
22
+ cursor: pointer;
23
+ background-color: transparent;
24
  }
25
+ .color-picker::-webkit-color-swatch {
26
+ border-radius: 50%;
27
+ border: 2px solid #e2e8f0;
28
+ }
29
+ .color-picker::-moz-color-swatch {
30
+ border-radius: 50%;
31
+ border: 2px solid #e2e8f0;
32
+ }
33
+ .social-icon {
34
+ transition: all 0.3s ease;
35
+ }
36
+ .social-icon:hover {
37
+ transform: translateY(-3px);
38
+ }
39
+ #copyBtn.copied {
40
+ background-color: #10b981;
41
+ }
42
+ .image-preview {
43
+ width: 100px;
44
+ height: 100px;
45
+ object-fit: cover;
46
+ border-radius: 50%;
47
+ display: none;
48
+ }
49
+ .banner-preview {
50
+ width: 100%;
51
+ height: 60px;
52
+ object-fit: cover;
53
+ display: none;
54
+ margin-bottom: 15px;
55
  }
56
  </style>
57
  </head>
58
+ <body class="bg-gray-50">
59
+ <div class="container mx-auto px-4 py-12 max-w-6xl">
60
+ <div class="text-center mb-12">
61
+ <h1 class="text-4xl font-bold text-blue-600 mb-4">Générateur de Signature Email</h1>
62
+ <p class="text-lg text-gray-600">Créez une signature professionnelle en quelques clics</p>
 
63
  </div>
64
+
65
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
66
+ <!-- Form Section -->
67
+ <div class="bg-white rounded-xl shadow-md p-6">
68
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Informations Personnelles</h2>
69
+
70
+ <div class="space-y-6">
71
+ <div>
72
+ <label class="block text-sm font-medium text-gray-700 mb-1">URL de la photo de profil</label>
73
+ <div class="flex items-center space-x-4">
74
+ <img id="photoPreview" class="image-preview" alt="Aperçu photo">
75
+ <div class="flex-1">
76
+ <input type="url" id="photoUrl" placeholder="https://exemple.com/photo.jpg" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
77
+ <button id="updatePhotoBtn" class="mt-2 bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 px-3 rounded-lg">
78
+ Mettre à jour
79
+ </button>
80
+ <button id="removePhotoBtn" class="mt-2 ml-2 text-sm text-red-500 hidden">Supprimer</button>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <div>
86
+ <label class="block text-sm font-medium text-gray-700 mb-1">URL de la bannière (optionnelle)</label>
87
+ <div>
88
+ <img id="bannerPreview" class="banner-preview" alt="Aperçu bannière">
89
+ <input type="url" id="bannerUrl" placeholder="https://exemple.com/banniere.jpg" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
90
+ <div class="mt-2">
91
+ <button id="updateBannerBtn" class="bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 px-3 rounded-lg">
92
+ Mettre à jour
93
+ </button>
94
+ <button id="removeBannerBtn" class="ml-2 text-sm text-red-500 hidden">Supprimer</button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nom Complet</label>
101
+ <input type="text" id="fullName" placeholder="Jean Dupont" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
102
+ </div>
103
+
104
+ <div>
105
+ <label class="block text-sm font-medium text-gray-700 mb-1">Poste</label>
106
+ <input type="text" id="jobTitle" placeholder="Directeur Marketing" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
107
+ </div>
108
+
109
+ <div>
110
+ <label class="block text-sm font-medium text-gray-700 mb-1">Entreprise</label>
111
+ <input type="text" id="company" placeholder="Société XYZ" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
112
+ </div>
113
+
114
+ <div>
115
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
116
+ <input type="email" id="email" placeholder="contact@exemple.com" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
117
+ </div>
118
+
119
+ <div>
120
+ <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
121
+ <input type="tel" id="phone" placeholder="+33 6 12 34 56 78" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
122
+ </div>
123
+
124
+ <div>
125
+ <label class="block text-sm font-medium text-gray-700 mb-1">Site Web</label>
126
+ <input type="url" id="website" placeholder="https://www.exemple.com" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
127
+ </div>
128
+
129
+ <div>
130
+ <label class="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
131
+ <textarea id="address" rows="2" placeholder="123 Rue de la République, 75001 Paris" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
132
+ </div>
133
+
134
+ <div>
135
+ <label class="block text-sm font-medium text-gray-700 mb-1">Couleur Principale</label>
136
+ <div class="flex items-center space-x-4">
137
+ <input type="color" id="primaryColor" value="#3b82f6" class="color-picker">
138
+ <span id="colorValue" class="text-sm text-gray-600">#3b82f6</span>
139
+ </div>
140
+ </div>
141
+
142
+ <div>
143
+ <label class="block text-sm font-medium text-gray-700 mb-1">Réseaux Sociaux</label>
144
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mt-2">
145
+ <div class="flex items-center">
146
+ <input type="checkbox" id="linkedin" class="mr-2">
147
+ <label for="linkedin" class="text-sm text-gray-700">LinkedIn</label>
148
+ </div>
149
+ <div class="flex items-center">
150
+ <input type="checkbox" id="twitter" class="mr-2">
151
+ <label for="twitter" class="text-sm text-gray-700">Twitter</label>
152
+ </div>
153
+ <div class="flex items-center">
154
+ <input type="checkbox" id="facebook" class="mr-2">
155
+ <label for="facebook" class="text-sm text-gray-700">Facebook</label>
156
+ </div>
157
+ <div class="flex items-center">
158
+ <input type="checkbox" id="instagram" class="mr-2">
159
+ <label for="instagram" class="text-sm text-gray-700">Instagram</label>
160
+ </div>
161
+ <div class="flex items-center">
162
+ <input type="checkbox" id="youtube" class="mr-2">
163
+ <label for="youtube" class="text-sm text-gray-700">YouTube</label>
164
+ </div>
165
+ <div class="flex items-center">
166
+ <input type="checkbox" id="whatsapp" class="mr-2">
167
+ <label for="whatsapp" class="text-sm text-gray-700">WhatsApp</label>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="pt-2">
173
+ <button id="generateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
174
+ Générer la Signature
175
+ </button>
176
+ </div>
177
  </div>
178
  </div>
179
 
180
+ <!-- Preview Section -->
181
+ <div class="bg-white rounded-xl shadow-md p-6">
182
+ <div class="flex justify-between items-center mb-6">
183
+ <h2 class="text-2xl font-semibold text-gray-800">Aperçu</h2>
184
+ <button id="copyBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300">
185
+ Copier le code HTML
186
+ </button>
 
 
 
 
 
 
 
 
 
 
187
  </div>
188
+
189
+ <div class="signature-preview p-6 rounded-lg mb-6" id="signaturePreview">
190
+ <p class="text-gray-500 italic">Votre signature apparaîtra ici</p>
191
  </div>
192
+
 
 
193
  <div>
194
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Code HTML</h3>
195
+ <textarea id="htmlCode" rows="10" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50 font-mono text-sm" readonly></textarea>
196
  </div>
 
 
 
197
  </div>
198
  </div>
199
  </div>
200
+
 
 
 
201
  <script>
202
+ document.addEventListener('DOMContentLoaded', function() {
203
  // Elements
204
+ const fullNameEl = document.getElementById('fullName');
205
+ const jobTitleEl = document.getElementById('jobTitle');
206
+ const companyEl = document.getElementById('company');
207
+ const emailEl = document.getElementById('email');
208
+ const phoneEl = document.getElementById('phone');
209
+ const websiteEl = document.getElementById('website');
210
+ const addressEl = document.getElementById('address');
211
+ const primaryColorEl = document.getElementById('primaryColor');
212
+ const colorValueEl = document.getElementById('colorValue');
213
+ const generateBtn = document.getElementById('generateBtn');
214
+ const signaturePreview = document.getElementById('signaturePreview');
215
+ const htmlCodeEl = document.getElementById('htmlCode');
216
+ const copyBtn = document.getElementById('copyBtn');
217
 
218
+ // Photo elements
219
+ const photoUrlEl = document.getElementById('photoUrl');
220
+ const photoPreviewEl = document.getElementById('photoPreview');
221
+ const updatePhotoBtn = document.getElementById('updatePhotoBtn');
222
+ const removePhotoBtn = document.getElementById('removePhotoBtn');
 
 
 
223
 
224
+ // Banner elements
225
+ const bannerUrlEl = document.getElementById('bannerUrl');
226
+ const bannerPreviewEl = document.getElementById('bannerPreview');
227
+ const updateBannerBtn = document.getElementById('updateBannerBtn');
228
+ const removeBannerBtn = document.getElementById('removeBannerBtn');
229
 
230
+ // Variables to store image URLs
231
+ let photoUrl = null;
232
+ let bannerUrl = null;
 
 
233
 
234
+ // Update color value display
235
+ primaryColorEl.addEventListener('input', function() {
236
+ colorValueEl.textContent = this.value;
237
+ });
 
 
238
 
239
+ // Handle photo URL update
240
+ updatePhotoBtn.addEventListener('click', function() {
241
+ const url = photoUrlEl.value.trim();
242
+ if (url) {
243
+ // Basic URL validation
244
+ if (!url.startsWith('http://') && !url.startsWith('https://')) {
245
+ alert('Veuillez entrer une URL valide commençant par http:// ou https://');
246
+ return;
247
+ }
248
+
249
+ photoUrl = url;
250
+ photoPreviewEl.src = url;
251
+ photoPreviewEl.style.display = 'block';
252
+ removePhotoBtn.style.display = 'inline-block';
253
  } else {
254
+ photoUrl = null;
255
+ photoPreviewEl.src = '';
256
+ photoPreviewEl.style.display = 'none';
257
+ removePhotoBtn.style.display = 'none';
258
  }
259
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
260
 
261
+ // Remove photo
262
+ removePhotoBtn.addEventListener('click', function() {
263
+ photoUrl = null;
264
+ photoUrlEl.value = '';
265
+ photoPreviewEl.src = '';
266
+ photoPreviewEl.style.display = 'none';
267
+ removePhotoBtn.style.display = 'none';
268
+ });
 
 
 
 
269
 
270
+ // Handle banner URL update
271
+ updateBannerBtn.addEventListener('click', function() {
272
+ const url = bannerUrlEl.value.trim();
273
+ if (url) {
274
+ // Basic URL validation
275
+ if (!url.startsWith('http://') && !url.startsWith('https://')) {
276
+ alert('Veuillez entrer une URL valide commençant par http:// ou https://');
277
+ return;
 
 
 
 
278
  }
279
 
280
+ bannerUrl = url;
281
+ bannerPreviewEl.src = url;
282
+ bannerPreviewEl.style.display = 'block';
283
+ removeBannerBtn.style.display = 'inline-block';
284
+ } else {
285
+ bannerUrl = null;
286
+ bannerPreviewEl.src = '';
287
+ bannerPreviewEl.style.display = 'none';
288
+ removeBannerBtn.style.display = 'none';
 
 
289
  }
290
+ });
291
 
292
+ // Remove banner
293
+ removeBannerBtn.addEventListener('click', function() {
294
+ bannerUrl = null;
295
+ bannerUrlEl.value = '';
296
+ bannerPreviewEl.src = '';
297
+ bannerPreviewEl.style.display = 'none';
298
+ removeBannerBtn.style.display = 'none';
299
+ });
300
+
301
+ // Generate signature
302
+ generateBtn.addEventListener('click', function() {
303
+ const fullName = fullNameEl.value.trim();
304
+ const jobTitle = jobTitleEl.value.trim();
305
+ const company = companyEl.value.trim();
306
+ const email = emailEl.value.trim();
307
+ const phone = phoneEl.value.trim();
308
+ const website = websiteEl.value.trim();
309
+ const address = addressEl.value.trim();
310
+ const primaryColor = primaryColorEl.value;
311
+
312
+ if (!fullName) {
313
+ alert('Veuillez entrer votre nom complet');
314
+ return;
315
  }
316
+
317
+ // Get selected social networks
318
+ const socialNetworks = [];
319
+ if (document.getElementById('linkedin').checked) socialNetworks.push('linkedin');
320
+ if (document.getElementById('twitter').checked) socialNetworks.push('twitter');
321
+ if (document.getElementById('facebook').checked) socialNetworks.push('facebook');
322
+ if (document.getElementById('instagram').checked) socialNetworks.push('instagram');
323
+ if (document.getElementById('youtube').checked) socialNetworks.push('youtube');
324
+ if (document.getElementById('whatsapp').checked) socialNetworks.push('whatsapp');
325
+
326
+ // Generate signature HTML
327
+ const signatureHTML = generateSignatureHTML({
328
+ fullName,
329
+ jobTitle,
330
+ company,
331
+ email,
332
+ phone,
333
+ website,
334
+ address,
335
+ primaryColor,
336
+ socialNetworks,
337
+ photoUrl,
338
+ bannerUrl
339
+ });
340
+
341
+ // Update preview and code
342
+ signaturePreview.innerHTML = signatureHTML;
343
+ htmlCodeEl.value = signatureHTML;
344
  });
345
 
346
+ // Copy HTML code
347
+ copyBtn.addEventListener('click', function() {
348
+ if (!htmlCodeEl.value) {
349
+ alert('Générez d\'abord une signature');
350
+ return;
351
+ }
352
+
353
+ htmlCodeEl.select();
354
+ document.execCommand('copy');
355
+
356
+ // Visual feedback
357
+ this.textContent = 'Copié!';
358
+ this.classList.add('copied');
359
+
360
+ setTimeout(() => {
361
+ this.textContent = 'Copier le code HTML';
362
+ this.classList.remove('copied');
363
+ }, 2000);
364
+ });
365
 
366
+ // Signature generator function
367
+ function generateSignatureHTML(data) {
368
+ const socialIcons = {
369
+ linkedin: { icon: 'fab fa-linkedin-in', url: 'https://linkedin.com/in/YOURPROFILE' },
370
+ twitter: { icon: 'fab fa-twitter', url: 'https://twitter.com/YOURPROFILE' },
371
+ facebook: { icon: 'fab fa-facebook-f', url: 'https://facebook.com/YOURPROFILE' },
372
+ instagram: { icon: 'fab fa-instagram', url: 'https://instagram.com/YOURPROFILE' },
373
+ youtube: { icon: 'fab fa-youtube', url: 'https://youtube.com/YOURPROFILE' },
374
+ whatsapp: { icon: 'fab fa-whatsapp', url: 'https://wa.me/YOURNUMBER' }
375
+ };
376
+
377
+ let socialLinksHTML = '';
378
+ if (data.socialNetworks.length > 0) {
379
+ socialLinksHTML = `<div style="margin-top: 15px; display: flex; gap: 8px;">`;
380
+ data.socialNetworks.forEach(network => {
381
+ socialLinksHTML += `
382
+ <a href="${socialIcons[network].url}" target="_blank" style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: ${data.primaryColor}; border-radius: 50%; color: white; text-decoration: none;">
383
+ <i class="${socialIcons[network].icon}" style="font-size: 12px;"></i>
384
+ </a>
385
+ `;
386
+ });
387
+ socialLinksHTML += `</div>`;
388
+ }
389
+
390
+ // Generate initials if no photo
391
+ const initials = data.fullName.split(' ').map(n => n[0]).join('').toUpperCase();
392
+
393
+ return `
394
+ <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; width: 100%; max-width: 600px; font-family: Arial, sans-serif;">
395
+ ${data.bannerUrl ? `
396
+ <tr>
397
+ <td colspan="2">
398
+ <img src="${data.bannerUrl}" style="width: 100%; height: 60px; object-fit: cover; margin-bottom: 15px;" alt="Bannière">
399
+ </td>
400
+ </tr>
401
+ ` : ''}
402
+
403
+ <tr>
404
+ <td style="padding-right: 20px; vertical-align: top; width: 100px;">
405
+ ${data.photoUrl ? `
406
+ <img src="${data.photoUrl}" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;" alt="Photo de profil">
407
+ ` : `
408
+ <div style="width: 80px; height: 80px; background-color: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: ${data.primaryColor}; font-size: 24px; font-weight: bold;">
409
+ ${initials}
410
+ </div>
411
+ `}
412
+ </td>
413
+ <td style="vertical-align: top;">
414
+ <div style="font-family: Arial, sans-serif;">
415
+ <h3 style="color: ${data.primaryColor}; font-size: 18px; font-weight: bold; margin: 0 0 5px 0;">${data.fullName}</h3>
416
+ <p style="color: #4b5563; font-size: 14px; margin: 0 0 3px 0;">${data.jobTitle}</p>
417
+ <p style="color: #4b5563; font-size: 14px; margin: 0 0 10px 0; font-weight: bold;">${data.company}</p>
418
+
419
+ <table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; margin-top: 5px;">
420
+ ${data.email ? `
421
+ <tr>
422
+ <td style="padding-right: 10px; vertical-align: top; padding-top: 3px;">
423
+ <i class="fas fa-envelope" style="color: ${data.primaryColor}; font-size: 12px;"></i>
424
+ </td>
425
+ <td style="padding-top: 3px;">
426
+ <a href="mailto:${data.email}" style="color: #3b82f6; text-decoration: none; font-size: 13px;">${data.email}</a>
427
+ </td>
428
+ </tr>
429
+ ` : ''}
430
+
431
+ ${data.phone ? `
432
+ <tr>
433
+ <td style="padding-right: 10px; vertical-align: top; padding-top: 5px;">
434
+ <i class="fas fa-phone-alt" style="color: ${data.primaryColor}; font-size: 12px;"></i>
435
+ </td>
436
+ <td style="padding-top: 5px;">
437
+ <a href="tel:${data.phone.replace(/[^0-9+]/g, '')}" style="color: #3b82f6; text-decoration: none; font-size: 13px;">${data.phone}</a>
438
+ </td>
439
+ </tr>
440
+ ` : ''}
441
+
442
+ ${data.website ? `
443
+ <tr>
444
+ <td style="padding-right: 10px; vertical-align: top; padding-top: 5px;">
445
+ <i class="fas fa-globe" style="color: ${data.primaryColor}; font-size: 12px;"></i>
446
+ </td>
447
+ <td style="padding-top: 5px;">
448
+ <a href="${data.website.startsWith('http') ? data.website : 'https://' + data.website}" target="_blank" style="color: #3b82f6; text-decoration: none; font-size: 13px;">${data.website.replace(/^https?:\/\//, '')}</a>
449
+ </td>
450
+ </tr>
451
+ ` : ''}
452
+
453
+ ${data.address ? `
454
+ <tr>
455
+ <td style="padding-right: 10px; vertical-align: top; padding-top: 5px;">
456
+ <i class="fas fa-map-marker-alt" style="color: ${data.primaryColor}; font-size: 12px;"></i>
457
+ </td>
458
+ <td style="padding-top: 5px;">
459
+ <span style="color: #4b5563; font-size: 13px;">${data.address}</span>
460
+ </td>
461
+ </tr>
462
+ ` : ''}
463
+ </table>
464
+
465
+ ${socialLinksHTML}
466
+ </div>
467
+ </td>
468
+ </tr>
469
+ </table>
470
+ `;
471
+ }
472
  });
473
  </script>
474
  <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=evoluxsa/trzt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>