Hugging Face's logo

Spaces:
sudo-soldier
/
toast
Running

App Files Community
sudo-soldier commited on
Commit
14660bc
·
verified ·
1 Parent(s): 9ae6f83

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +824 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Toast
3
- emoji: 📚
4
  colorFrom: pink
5
- colorTo: red
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: toast
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: purple
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,825 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Toast Notification Playground</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
+ .toast-container {
11
+ position: fixed;
12
+ z-index: 9999;
13
+ transition: all 0.3s ease;
14
+ }
15
+ .toast-container.top-right {
16
+ top: 20px;
17
+ right: 20px;
18
+ }
19
+ .toast-container.top-left {
20
+ top: 20px;
21
+ left: 20px;
22
+ }
23
+ .toast-container.bottom-right {
24
+ bottom: 20px;
25
+ right: 20px;
26
+ }
27
+ .toast-container.bottom-left {
28
+ bottom: 20px;
29
+ left: 20px;
30
+ }
31
+ .toast-container.center {
32
+ top: 50%;
33
+ left: 50%;
34
+ transform: translate(-50%, -50%);
35
+ }
36
+ .toast {
37
+ position: relative;
38
+ overflow: hidden;
39
+ margin-bottom: 10px;
40
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
41
+ transition: all 0.3s ease;
42
+ opacity: 0;
43
+ transform: translateY(20px);
44
+ }
45
+ .toast.show {
46
+ opacity: 1;
47
+ transform: translateY(0);
48
+ }
49
+ .toast.hide {
50
+ opacity: 0;
51
+ transform: translateY(-20px);
52
+ }
53
+ .toast-progress {
54
+ position: absolute;
55
+ bottom: 0;
56
+ left: 0;
57
+ height: 4px;
58
+ background-color: rgba(255, 255, 255, 0.7);
59
+ width: 100%;
60
+ transform: scaleX(1);
61
+ transform-origin: left;
62
+ transition: transform linear;
63
+ }
64
+ .custom-font-preview {
65
+ font-size: 1.2rem;
66
+ padding: 10px;
67
+ border: 1px dashed #ccc;
68
+ margin-top: 5px;
69
+ }
70
+ .color-picker-container {
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 10px;
74
+ }
75
+ .color-preview {
76
+ width: 30px;
77
+ height: 30px;
78
+ border-radius: 4px;
79
+ border: 1px solid #ccc;
80
+ }
81
+ .export-code {
82
+ background-color: #f8f9fa;
83
+ border: 1px solid #dee2e6;
84
+ border-radius: 4px;
85
+ padding: 15px;
86
+ font-family: monospace;
87
+ white-space: pre-wrap;
88
+ max-height: 200px;
89
+ overflow-y: auto;
90
+ }
91
+ </style>
92
+ </head>
93
+ <body class="bg-gray-100 min-h-screen">
94
+ <div class="container mx-auto px-4 py-8">
95
+ <h1 class="text-4xl font-bold text-center mb-8 text-indigo-700">Toast Notification Playground</h1>
96
+
97
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
98
+ <!-- Configuration Panel -->
99
+ <div class="bg-white rounded-lg shadow-lg p-6 col-span-1">
100
+ <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Configuration</h2>
101
+
102
+ <div class="space-y-6">
103
+ <!-- Message Content -->
104
+ <div>
105
+ <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
106
+ <textarea id="message" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" rows="3">This is a toast notification!</textarea>
107
+ </div>
108
+
109
+ <!-- Toast Type -->
110
+ <div>
111
+ <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
112
+ <div class="grid grid-cols-4 gap-2">
113
+ <button data-type="info" class="toast-type-btn py-2 px-3 rounded-md bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200">Info</button>
114
+ <button data-type="success" class="toast-type-btn py-2 px-3 rounded-md bg-green-100 text-green-800 border border-green-200 hover:bg-green-200">Success</button>
115
+ <button data-type="warning" class="toast-type-btn py-2 px-3 rounded-md bg-yellow-100 text-yellow-800 border border-yellow-200 hover:bg-yellow-200">Warning</button>
116
+ <button data-type="error" class="toast-type-btn py-2 px-3 rounded-md bg-red-100 text-red-800 border border-red-200 hover:bg-red-200">Error</button>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Position -->
121
+ <div>
122
+ <label class="block text-sm font-medium text-gray-700 mb-1">Position</label>
123
+ <div class="grid grid-cols-3 gap-2">
124
+ <button data-position="top-left" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Top Left</button>
125
+ <button data-position="top-right" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Top Right</button>
126
+ <button data-position="center" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Center</button>
127
+ <button data-position="bottom-left" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Bottom Left</button>
128
+ <button data-position="bottom-right" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Bottom Right</button>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Duration -->
133
+ <div>
134
+ <label class="block text-sm font-medium text-gray-700 mb-1">Duration (ms)</label>
135
+ <input type="range" id="duration" min="1000" max="10000" step="500" value="5000" class="w-full">
136
+ <div class="flex justify-between text-xs text-gray-500">
137
+ <span>1s</span>
138
+ <span>5s</span>
139
+ <span>10s</span>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Animation -->
144
+ <div>
145
+ <label class="block text-sm font-medium text-gray-700 mb-1">Animation</label>
146
+ <select id="animation" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
147
+ <option value="fade">Fade</option>
148
+ <option value="slide">Slide</option>
149
+ <option value="zoom">Zoom</option>
150
+ </select>
151
+ </div>
152
+
153
+ <!-- Show Progress Bar -->
154
+ <div class="flex items-center">
155
+ <input type="checkbox" id="progressBar" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
156
+ <label for="progressBar" class="ml-2 block text-sm text-gray-700">Show Progress Bar</label>
157
+ </div>
158
+
159
+ <!-- Show Close Button -->
160
+ <div class="flex items-center">
161
+ <input type="checkbox" id="closeButton" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
162
+ <label for="closeButton" class="ml-2 block text-sm text-gray-700">Show Close Button</label>
163
+ </div>
164
+
165
+ <!-- Show Icon -->
166
+ <div class="flex items-center">
167
+ <input type="checkbox" id="showIcon" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
168
+ <label for="showIcon" class="ml-2 block text-sm text-gray-700">Show Icon</label>
169
+ </div>
170
+
171
+ <!-- Custom Colors -->
172
+ <div>
173
+ <label class="block text-sm font-medium text-gray-700 mb-1">Custom Colors</label>
174
+ <div class="space-y-2">
175
+ <div class="color-picker-container">
176
+ <span class="text-sm">Background:</span>
177
+ <input type="color" id="bgColor" value="#4f46e5" class="h-8 w-8">
178
+ <div id="bgColorPreview" class="color-preview" style="background-color: #4f46e5;"></div>
179
+ </div>
180
+ <div class="color-picker-container">
181
+ <span class="text-sm">Text:</span>
182
+ <input type="color" id="textColor" value="#ffffff" class="h-8 w-8">
183
+ <div id="textColorPreview" class="color-preview" style="background-color: #ffffff;"></div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Font Family -->
189
+ <div>
190
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label>
191
+ <select id="fontFamily" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
192
+ <option value="sans-serif">Sans-serif</option>
193
+ <option value="serif">Serif</option>
194
+ <option value="monospace">Monospace</option>
195
+ <option value="cursive">Cursive</option>
196
+ <option value="fantasy">Fantasy</option>
197
+ <option value="Arial">Arial</option>
198
+ <option value="Verdana">Verdana</option>
199
+ <option value="Georgia">Georgia</option>
200
+ <option value="Courier New">Courier New</option>
201
+ </select>
202
+ <div id="fontPreview" class="custom-font-preview" style="font-family: sans-serif;">Font Preview</div>
203
+ </div>
204
+
205
+ <!-- Font Size -->
206
+ <div>
207
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Size (px)</label>
208
+ <input type="range" id="fontSize" min="12" max="24" step="1" value="16" class="w-full">
209
+ <div class="flex justify-between text-xs text-gray-500">
210
+ <span>12px</span>
211
+ <span>18px</span>
212
+ <span>24px</span>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Show Toast Button -->
217
+ <button id="showToastBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md shadow-sm transition duration-150 ease-in-out">
218
+ Show Toast
219
+ </button>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Preview Panel -->
224
+ <div class="bg-white rounded-lg shadow-lg p-6 col-span-1">
225
+ <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Preview</h2>
226
+
227
+ <div id="toastPreview" class="mb-6 p-4 rounded-md bg-indigo-600 text-white flex items-start">
228
+ <div class="mr-3">
229
+ <i class="fas fa-info-circle text-xl"></i>
230
+ </div>
231
+ <div class="flex-1">
232
+ <p class="font-medium">This is a toast notification!</p>
233
+ </div>
234
+ <button class="ml-3 text-white opacity-70 hover:opacity-100">
235
+ <i class="fas fa-times"></i>
236
+ </button>
237
+ </div>
238
+
239
+ <div class="mt-6">
240
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Export Code</h3>
241
+ <div class="mb-4">
242
+ <button id="copyCodeBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-1 px-3 rounded-md text-sm shadow-sm transition duration-150 ease-in-out">
243
+ Copy Code
244
+ </button>
245
+ <button id="downloadCodeBtn" class="ml-2 bg-green-600 hover:bg-green-700 text-white font-medium py-1 px-3 rounded-md text-sm shadow-sm transition duration-150 ease-in-out">
246
+ Download
247
+ </button>
248
+ </div>
249
+ <div id="exportCode" class="export-code">
250
+ <!-- Code will be inserted here -->
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Live Demo Panel -->
256
+ <div class="bg-white rounded-lg shadow-lg p-6 col-span-1 relative">
257
+ <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Live Demo</h2>
258
+
259
+ <div class="flex flex-wrap gap-2 mb-6">
260
+ <button id="demoInfo" class="py-1 px-3 rounded-md bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200">Info</button>
261
+ <button id="demoSuccess" class="py-1 px-3 rounded-md bg-green-100 text-green-800 border border-green-200 hover:bg-green-200">Success</button>
262
+ <button id="demoWarning" class="py-1 px-3 rounded-md bg-yellow-100 text-yellow-800 border border-yellow-200 hover:bg-yellow-200">Warning</button>
263
+ <button id="demoError" class="py-1 px-3 rounded-md bg-red-100 text-red-800 border border-red-200 hover:bg-red-200">Error</button>
264
+ <button id="demoCustom" class="py-1 px-3 rounded-md bg-purple-100 text-purple-800 border border-purple-200 hover:bg-purple-200">Custom</button>
265
+ <button id="clearAll" class="py-1 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Clear All</button>
266
+ </div>
267
+
268
+ <div id="toastContainer" class="toast-container top-right"></div>
269
+
270
+ <div class="mt-6">
271
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Recent Toasts</h3>
272
+ <div id="toastHistory" class="space-y-2 max-h-60 overflow-y-auto">
273
+ <!-- Toast history will be added here -->
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <script>
281
+ document.addEventListener('DOMContentLoaded', function() {
282
+ // Configuration variables
283
+ let currentType = 'info';
284
+ let currentPosition = 'top-right';
285
+ let currentAnimation = 'fade';
286
+ let currentBgColor = '#4f46e5';
287
+ let currentTextColor = '#ffffff';
288
+ let currentFontFamily = 'sans-serif';
289
+ let currentFontSize = '16px';
290
+
291
+ // DOM Elements
292
+ const toastContainer = document.getElementById('toastContainer');
293
+ const toastPreview = document.getElementById('toastPreview');
294
+ const exportCode = document.getElementById('exportCode');
295
+
296
+ // Initialize
297
+ updatePreview();
298
+ generateExportCode();
299
+
300
+ // Event Listeners
301
+ document.querySelectorAll('.toast-type-btn').forEach(btn => {
302
+ btn.addEventListener('click', function() {
303
+ currentType = this.dataset.type;
304
+ updateTypeStyles(currentType);
305
+ updatePreview();
306
+ generateExportCode();
307
+ });
308
+ });
309
+
310
+ document.querySelectorAll('.position-btn').forEach(btn => {
311
+ btn.addEventListener('click', function() {
312
+ currentPosition = this.dataset.position;
313
+ toastContainer.className = `toast-container ${currentPosition}`;
314
+ updatePreview();
315
+ generateExportCode();
316
+ });
317
+ });
318
+
319
+ document.getElementById('message').addEventListener('input', function() {
320
+ updatePreview();
321
+ generateExportCode();
322
+ });
323
+
324
+ document.getElementById('duration').addEventListener('input', function() {
325
+ generateExportCode();
326
+ });
327
+
328
+ document.getElementById('animation').addEventListener('change', function() {
329
+ currentAnimation = this.value;
330
+ generateExportCode();
331
+ });
332
+
333
+ document.getElementById('progressBar').addEventListener('change', function() {
334
+ updatePreview();
335
+ generateExportCode();
336
+ });
337
+
338
+ document.getElementById('closeButton').addEventListener('change', function() {
339
+ updatePreview();
340
+ generateExportCode();
341
+ });
342
+
343
+ document.getElementById('showIcon').addEventListener('change', function() {
344
+ updatePreview();
345
+ generateExportCode();
346
+ });
347
+
348
+ document.getElementById('bgColor').addEventListener('input', function() {
349
+ currentBgColor = this.value;
350
+ document.getElementById('bgColorPreview').style.backgroundColor = currentBgColor;
351
+ updatePreview();
352
+ generateExportCode();
353
+ });
354
+
355
+ document.getElementById('textColor').addEventListener('input', function() {
356
+ currentTextColor = this.value;
357
+ document.getElementById('textColorPreview').style.backgroundColor = currentTextColor;
358
+ updatePreview();
359
+ generateExportCode();
360
+ });
361
+
362
+ document.getElementById('fontFamily').addEventListener('change', function() {
363
+ currentFontFamily = this.value;
364
+ document.getElementById('fontPreview').style.fontFamily = currentFontFamily;
365
+ updatePreview();
366
+ generateExportCode();
367
+ });
368
+
369
+ document.getElementById('fontSize').addEventListener('input', function() {
370
+ currentFontSize = `${this.value}px`;
371
+ document.getElementById('fontPreview').style.fontSize = currentFontSize;
372
+ updatePreview();
373
+ generateExportCode();
374
+ });
375
+
376
+ document.getElementById('showToastBtn').addEventListener('click', function() {
377
+ showToast();
378
+ });
379
+
380
+ // Demo buttons
381
+ document.getElementById('demoInfo').addEventListener('click', function() {
382
+ showDemoToast('info', 'Information', 'This is an information toast.');
383
+ });
384
+
385
+ document.getElementById('demoSuccess').addEventListener('click', function() {
386
+ showDemoToast('success', 'Success', 'Operation completed successfully!');
387
+ });
388
+
389
+ document.getElementById('demoWarning').addEventListener('click', function() {
390
+ showDemoToast('warning', 'Warning', 'This is a warning message.');
391
+ });
392
+
393
+ document.getElementById('demoError').addEventListener('click', function() {
394
+ showDemoToast('error', 'Error', 'Something went wrong!');
395
+ });
396
+
397
+ document.getElementById('demoCustom').addEventListener('click', function() {
398
+ showDemoToast('custom', 'Custom', 'This is a custom styled toast.', {
399
+ bgColor: '#8b5cf6',
400
+ textColor: '#ffffff',
401
+ icon: 'fas fa-star'
402
+ });
403
+ });
404
+
405
+ document.getElementById('clearAll').addEventListener('click', function() {
406
+ clearAllToasts();
407
+ });
408
+
409
+ // Copy and Download buttons
410
+ document.getElementById('copyCodeBtn').addEventListener('click', function() {
411
+ copyToClipboard(exportCode.textContent);
412
+ showToast('success', 'Copied to clipboard!');
413
+ });
414
+
415
+ document.getElementById('downloadCodeBtn').addEventListener('click', function() {
416
+ downloadCode();
417
+ });
418
+
419
+ // Functions
420
+ function updateTypeStyles(type) {
421
+ let bgColor, textColor, icon;
422
+
423
+ switch(type) {
424
+ case 'info':
425
+ bgColor = '#3b82f6';
426
+ textColor = '#ffffff';
427
+ icon = 'fas fa-info-circle';
428
+ break;
429
+ case 'success':
430
+ bgColor = '#10b981';
431
+ textColor = '#ffffff';
432
+ icon = 'fas fa-check-circle';
433
+ break;
434
+ case 'warning':
435
+ bgColor = '#f59e0b';
436
+ textColor = '#ffffff';
437
+ icon = 'fas fa-exclamation-triangle';
438
+ break;
439
+ case 'error':
440
+ bgColor = '#ef4444';
441
+ textColor = '#ffffff';
442
+ icon = 'fas fa-times-circle';
443
+ break;
444
+ default:
445
+ bgColor = currentBgColor;
446
+ textColor = currentTextColor;
447
+ icon = 'fas fa-info-circle';
448
+ }
449
+
450
+ document.getElementById('bgColor').value = bgColor;
451
+ document.getElementById('textColor').value = textColor;
452
+ document.getElementById('bgColorPreview').style.backgroundColor = bgColor;
453
+ document.getElementById('textColorPreview').style.backgroundColor = textColor;
454
+
455
+ currentBgColor = bgColor;
456
+ currentTextColor = textColor;
457
+
458
+ return { bgColor, textColor, icon };
459
+ }
460
+
461
+ function updatePreview() {
462
+ const message = document.getElementById('message').value;
463
+ const showProgressBar = document.getElementById('progressBar').checked;
464
+ const showCloseButton = document.getElementById('closeButton').checked;
465
+ const showIcon = document.getElementById('showIcon').checked;
466
+
467
+ const typeStyles = updateTypeStyles(currentType);
468
+
469
+ // Update preview toast
470
+ toastPreview.style.backgroundColor = typeStyles.bgColor;
471
+ toastPreview.style.color = typeStyles.textColor;
472
+ toastPreview.style.fontFamily = currentFontFamily;
473
+ toastPreview.style.fontSize = currentFontSize;
474
+
475
+ // Update message
476
+ toastPreview.querySelector('p').textContent = message;
477
+
478
+ // Update icon
479
+ const iconElement = toastPreview.querySelector('i');
480
+ iconElement.className = `${typeStyles.icon} text-xl`;
481
+ iconElement.style.display = showIcon ? 'block' : 'none';
482
+
483
+ // Update close button
484
+ const closeBtn = toastPreview.querySelector('button');
485
+ closeBtn.style.display = showCloseButton ? 'block' : 'none';
486
+
487
+ // Add progress bar if needed
488
+ let progressBar = toastPreview.querySelector('.toast-progress');
489
+ if (showProgressBar) {
490
+ if (!progressBar) {
491
+ progressBar = document.createElement('div');
492
+ progressBar.className = 'toast-progress';
493
+ toastPreview.appendChild(progressBar);
494
+ }
495
+ progressBar.style.backgroundColor = `rgba(255, 255, 255, 0.7)`;
496
+ } else if (progressBar) {
497
+ progressBar.remove();
498
+ }
499
+ }
500
+
501
+ function showToast(customType, customMessage) {
502
+ const type = customType || currentType;
503
+ const message = customMessage || document.getElementById('message').value;
504
+ const duration = parseInt(document.getElementById('duration').value);
505
+ const showProgressBar = document.getElementById('progressBar').checked;
506
+ const showCloseButton = document.getElementById('closeButton').checked;
507
+ const showIcon = document.getElementById('showIcon').checked;
508
+ const animation = currentAnimation;
509
+
510
+ const typeStyles = type === 'custom' ?
511
+ { bgColor: currentBgColor, textColor: currentTextColor, icon: 'fas fa-info-circle' } :
512
+ updateTypeStyles(type);
513
+
514
+ // Create toast element
515
+ const toast = document.createElement('div');
516
+ toast.className = `toast ${animation}`;
517
+ toast.style.backgroundColor = typeStyles.bgColor;
518
+ toast.style.color = typeStyles.textColor;
519
+ toast.style.fontFamily = currentFontFamily;
520
+ toast.style.fontSize = currentFontSize;
521
+ toast.style.borderRadius = '0.375rem';
522
+ toast.style.padding = '1rem';
523
+ toast.style.display = 'flex';
524
+ toast.style.alignItems = 'flex-start';
525
+ toast.style.maxWidth = '350px';
526
+
527
+ // Add icon
528
+ if (showIcon) {
529
+ const icon = document.createElement('div');
530
+ icon.className = 'mr-3';
531
+ const iconElement = document.createElement('i');
532
+ iconElement.className = `${typeStyles.icon} text-xl`;
533
+ icon.appendChild(iconElement);
534
+ toast.appendChild(icon);
535
+ }
536
+
537
+ // Add content
538
+ const content = document.createElement('div');
539
+ content.className = 'flex-1';
540
+ const messageElement = document.createElement('p');
541
+ messageElement.className = 'font-medium';
542
+ messageElement.textContent = message;
543
+ content.appendChild(messageElement);
544
+ toast.appendChild(content);
545
+
546
+ // Add close button
547
+ if (showCloseButton) {
548
+ const closeBtn = document.createElement('button');
549
+ closeBtn.className = 'ml-3 opacity-70 hover:opacity-100';
550
+ closeBtn.innerHTML = '<i class="fas fa-times"></i>';
551
+ closeBtn.addEventListener('click', function() {
552
+ hideToast(toast);
553
+ });
554
+ toast.appendChild(closeBtn);
555
+ }
556
+
557
+ // Add progress bar
558
+ if (showProgressBar) {
559
+ const progressBar = document.createElement('div');
560
+ progressBar.className = 'toast-progress';
561
+ progressBar.style.backgroundColor = `rgba(255, 255, 255, 0.7)`;
562
+ toast.appendChild(progressBar);
563
+
564
+ // Animate progress bar
565
+ progressBar.style.transform = 'scaleX(1)';
566
+ progressBar.style.transition = `transform ${duration}ms linear`;
567
+ setTimeout(() => {
568
+ progressBar.style.transform = 'scaleX(0)';
569
+ }, 10);
570
+ }
571
+
572
+ // Add to container
573
+ toastContainer.appendChild(toast);
574
+
575
+ // Show toast with animation
576
+ setTimeout(() => {
577
+ toast.classList.add('show');
578
+ }, 10);
579
+
580
+ // Auto hide after duration
581
+ if (duration > 0) {
582
+ setTimeout(() => {
583
+ hideToast(toast);
584
+ }, duration);
585
+ }
586
+
587
+ // Add to history
588
+ addToHistory(type, message);
589
+
590
+ return toast;
591
+ }
592
+
593
+ function showDemoToast(type, title, message, customStyles = {}) {
594
+ const toast = showToast(type, message);
595
+
596
+ if (customStyles.bgColor) {
597
+ toast.style.backgroundColor = customStyles.bgColor;
598
+ }
599
+ if (customStyles.textColor) {
600
+ toast.style.color = customStyles.textColor;
601
+ }
602
+ if (customStyles.icon) {
603
+ const icon = toast.querySelector('i');
604
+ if (icon) {
605
+ icon.className = `${customStyles.icon} text-xl`;
606
+ }
607
+ }
608
+
609
+ // Update title if provided
610
+ const content = toast.querySelector('.flex-1');
611
+ if (content && title) {
612
+ const titleElement = document.createElement('p');
613
+ titleElement.className = 'font-bold';
614
+ titleElement.textContent = title;
615
+ content.insertBefore(titleElement, content.firstChild);
616
+ }
617
+ }
618
+
619
+ function hideToast(toast) {
620
+ toast.classList.remove('show');
621
+ toast.classList.add('hide');
622
+
623
+ setTimeout(() => {
624
+ toast.remove();
625
+ }, 300);
626
+ }
627
+
628
+ function clearAllToasts() {
629
+ const toasts = toastContainer.querySelectorAll('.toast');
630
+ toasts.forEach(toast => {
631
+ hideToast(toast);
632
+ });
633
+ }
634
+
635
+ function addToHistory(type, message) {
636
+ const historyContainer = document.getElementById('toastHistory');
637
+ const historyItem = document.createElement('div');
638
+ historyItem.className = 'flex items-center p-2 bg-gray-50 rounded-md';
639
+
640
+ // Add type indicator
641
+ const typeIndicator = document.createElement('div');
642
+ typeIndicator.className = `w-3 h-3 rounded-full mr-2 ${
643
+ type === 'info' ? 'bg-blue-500' :
644
+ type === 'success' ? 'bg-green-500' :
645
+ type === 'warning' ? 'bg-yellow-500' :
646
+ type === 'error' ? 'bg-red-500' : 'bg-purple-500'
647
+ }`;
648
+ historyItem.appendChild(typeIndicator);
649
+
650
+ // Add message
651
+ const messageElement = document.createElement('span');
652
+ messageElement.className = 'text-sm text-gray-700';
653
+ messageElement.textContent = message.length > 50 ? message.substring(0, 50) + '...' : message;
654
+ historyItem.appendChild(messageElement);
655
+
656
+ // Add timestamp
657
+ const timestamp = document.createElement('span');
658
+ timestamp.className = 'ml-auto text-xs text-gray-500';
659
+ timestamp.textContent = new Date().toLocaleTimeString();
660
+ historyItem.appendChild(timestamp);
661
+
662
+ // Add to history
663
+ historyContainer.insertBefore(historyItem, historyContainer.firstChild);
664
+
665
+ // Limit history items
666
+ if (historyContainer.children.length > 10) {
667
+ historyContainer.removeChild(historyContainer.lastChild);
668
+ }
669
+ }
670
+
671
+ function generateExportCode() {
672
+ const message = document.getElementById('message').value;
673
+ const duration = document.getElementById('duration').value;
674
+ const showProgressBar = document.getElementById('progressBar').checked;
675
+ const showCloseButton = document.getElementById('closeButton').checked;
676
+ const showIcon = document.getElementById('showIcon').checked;
677
+
678
+ const code = `
679
+ // Toast Configuration
680
+ const toastConfig = {
681
+ type: '${currentType}',
682
+ message: '${message.replace(/'/g, "\\'")}',
683
+ position: '${currentPosition}',
684
+ duration: ${duration},
685
+ animation: '${currentAnimation}',
686
+ showProgressBar: ${showProgressBar},
687
+ showCloseButton: ${showCloseButton},
688
+ showIcon: ${showIcon},
689
+ backgroundColor: '${currentBgColor}',
690
+ textColor: '${currentTextColor}',
691
+ fontFamily: '${currentFontFamily}',
692
+ fontSize: '${currentFontSize}'
693
+ };
694
+
695
+ // Function to show toast
696
+ function showToast(config) {
697
+ const toast = document.createElement('div');
698
+ toast.className = \`toast \${config.animation}\`;
699
+ toast.style.backgroundColor = config.backgroundColor;
700
+ toast.style.color = config.textColor;
701
+ toast.style.fontFamily = config.fontFamily;
702
+ toast.style.fontSize = config.fontSize;
703
+ toast.style.borderRadius = '0.375rem';
704
+ toast.style.padding = '1rem';
705
+ toast.style.display = 'flex';
706
+ toast.style.alignItems = 'flex-start';
707
+ toast.style.maxWidth = '350px';
708
+
709
+ // Add icon
710
+ if (config.showIcon) {
711
+ const icon = document.createElement('div');
712
+ icon.className = 'mr-3';
713
+ const iconElement = document.createElement('i');
714
+ iconElement.className = \`\${getIconClass(config.type)} text-xl\`;
715
+ icon.appendChild(iconElement);
716
+ toast.appendChild(icon);
717
+ }
718
+
719
+ // Add content
720
+ const content = document.createElement('div');
721
+ content.className = 'flex-1';
722
+ const messageElement = document.createElement('p');
723
+ messageElement.className = 'font-medium';
724
+ messageElement.textContent = config.message;
725
+ content.appendChild(messageElement);
726
+ toast.appendChild(content);
727
+
728
+ // Add close button
729
+ if (config.showCloseButton) {
730
+ const closeBtn = document.createElement('button');
731
+ closeBtn.className = 'ml-3 opacity-70 hover:opacity-100';
732
+ closeBtn.innerHTML = '<i class="fas fa-times"></i>';
733
+ closeBtn.addEventListener('click', function() {
734
+ hideToast(toast);
735
+ });
736
+ toast.appendChild(closeBtn);
737
+ }
738
+
739
+ // Add progress bar
740
+ if (config.showProgressBar) {
741
+ const progressBar = document.createElement('div');
742
+ progressBar.className = 'toast-progress';
743
+ progressBar.style.backgroundColor = \`rgba(255, 255, 255, 0.7)\`;
744
+ toast.appendChild(progressBar);
745
+
746
+ // Animate progress bar
747
+ progressBar.style.transform = 'scaleX(1)';
748
+ progressBar.style.transition = \`transform \${config.duration}ms linear\`;
749
+ setTimeout(() => {
750
+ progressBar.style.transform = 'scaleX(0)';
751
+ }, 10);
752
+ }
753
+
754
+ // Add to container
755
+ const container = document.querySelector(\`.toast-container.\${config.position.replace(' ', '-')}\`);
756
+ container.appendChild(toast);
757
+
758
+ // Show toast with animation
759
+ setTimeout(() => {
760
+ toast.classList.add('show');
761
+ }, 10);
762
+
763
+ // Auto hide after duration
764
+ if (config.duration > 0) {
765
+ setTimeout(() => {
766
+ hideToast(toast);
767
+ }, config.duration);
768
+ }
769
+ }
770
+
771
+ // Helper function to get icon class
772
+ function getIconClass(type) {
773
+ switch(type) {
774
+ case 'info': return 'fas fa-info-circle';
775
+ case 'success': return 'fas fa-check-circle';
776
+ case 'warning': return 'fas fa-exclamation-triangle';
777
+ case 'error': return 'fas fa-times-circle';
778
+ default: return 'fas fa-info-circle';
779
+ }
780
+ }
781
+
782
+ // Function to hide toast
783
+ function hideToast(toast) {
784
+ toast.classList.remove('show');
785
+ toast.classList.add('hide');
786
+
787
+ setTimeout(() => {
788
+ toast.remove();
789
+ }, 300);
790
+ }
791
+
792
+ // Example usage
793
+ showToast(toastConfig);
794
+ `;
795
+
796
+ exportCode.textContent = code;
797
+ }
798
+
799
+ function copyToClipboard(text) {
800
+ const textarea = document.createElement('textarea');
801
+ textarea.value = text;
802
+ document.body.appendChild(textarea);
803
+ textarea.select();
804
+ document.execCommand('copy');
805
+ document.body.removeChild(textarea);
806
+ }
807
+
808
+ function downloadCode() {
809
+ const code = exportCode.textContent;
810
+ const blob = new Blob([code], { type: 'text/javascript' });
811
+ const url = URL.createObjectURL(blob);
812
+ const a = document.createElement('a');
813
+ a.href = url;
814
+ a.download = 'toast-notification.js';
815
+ document.body.appendChild(a);
816
+ a.click();
817
+ document.body.removeChild(a);
818
+ URL.revokeObjectURL(url);
819
+
820
+ showToast('success', 'Code downloaded successfully!');
821
+ }
822
+ });
823
+ </script>
824
+ <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=sudo-soldier/toast" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
825
  </html>
prompts.txt ADDED
File without changes