ga-toasts 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +267 -554
  3. package/dist/ga-toasts.css +554 -0
  4. package/dist/ga-toasts.global.js +556 -0
  5. package/dist/index.cjs +1514 -0
  6. package/dist/index.d.cts +174 -0
  7. package/dist/index.d.ts +174 -0
  8. package/dist/index.js +1508 -0
  9. package/package.json +72 -23
  10. package/.htaccess +0 -75
  11. package/REDIRECT_SETUP.md +0 -149
  12. package/ga-toasts.d.ts +0 -99
  13. package/images/gennie_logo.png +0 -0
  14. package/index.html +0 -1034
  15. package/robots.txt +0 -54
  16. package/sitemap.xml +0 -47
  17. package/src/demo.css +0 -698
  18. package/src/demo.js +0 -467
  19. package/src/toasts.css +0 -1644
  20. package/src/toasts.js +0 -1005
  21. package/src/variables.css +0 -480
  22. package/vercel.json +0 -50
package/index.html DELETED
@@ -1,1034 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
-
8
- <!-- Primary Meta Tags -->
9
- <title>GA Toasts - Best JavaScript Toast Notifications Library 2024 | 15+ Types, 9 Positions, 4 Animations</title>
10
- <meta name="title"
11
- content="GA Toasts - Best JavaScript Toast Notifications Library 2024 | 15+ Types, 9 Positions, 4 Animations">
12
- <meta name="description"
13
- content="🚀 The ultimate JavaScript toast notifications library! 15+ toast types, 9 positions, 4 animations, 3 themes. Lightweight, accessible, responsive. Perfect for React, Vue, Angular, vanilla JS. Free download with live demo!">
14
- <meta name="keywords"
15
- content="javascript toast notifications, react toast, vue toast, angular toast, vanilla js toast, notification library, web notifications, toast messages, UI components, frontend library, modern toast, accessible toast, responsive toast, glassmorphism toast, toast animations, web development, JavaScript library, CSS toast, HTML toast, toastify alternative, sweet alert toast, notification system, popup notifications, alert library, toast ui, notification component, web app notifications, mobile toast, desktop toast, cross browser toast, lightweight toast, performance toast, customizable toast, theme toast, dark mode toast, light mode toast, success toast, error toast, warning toast, info toast, loading toast, confirm toast, modern ui library, 2024 toast library, best toast library">
16
- <meta name="author" content="GA Toasts Team">
17
- <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
18
- <meta name="googlebot" content="index, follow">
19
- <meta name="bingbot" content="index, follow">
20
- <meta name="language" content="en">
21
- <meta name="revisit-after" content="7 days">
22
- <meta name="distribution" content="global">
23
- <meta name="rating" content="general">
24
-
25
- <!-- Meta redirect for www to non-www (fallback) -->
26
- <script>
27
- // Comprehensive redirect handling
28
- (function () {
29
- const currentHost = window.location.hostname;
30
- const currentProtocol = window.location.protocol;
31
- const currentPath = window.location.pathname;
32
- const currentSearch = window.location.search;
33
- const currentHash = window.location.hash;
34
-
35
- // Remove meta refresh if we're on the correct domain
36
- if (currentHost === 'ga-toasts.com' && currentProtocol === 'https:') {
37
- const metaRedirect = document.getElementById('meta-redirect');
38
- if (metaRedirect) {
39
- metaRedirect.remove();
40
- }
41
- return;
42
- }
43
-
44
- // Redirect www to non-www
45
- if (currentHost === 'www.ga-toasts.com') {
46
- const redirectUrl = 'https://ga-toasts.com' + currentPath + currentSearch + currentHash;
47
- window.location.replace(redirectUrl);
48
- return;
49
- }
50
-
51
- // Redirect HTTP to HTTPS (if not localhost)
52
- if (currentProtocol === 'http:' && currentHost !== 'localhost' && currentHost !== '127.0.0.1') {
53
- const redirectUrl = 'https://' + currentHost + currentPath + currentSearch + currentHash;
54
- window.location.replace(redirectUrl);
55
- return;
56
- }
57
-
58
- // Additional www subdomain handling
59
- if (currentHost.startsWith('www.') && currentHost !== 'www.ga-toasts.com') {
60
- const redirectUrl = 'https://ga-toasts.com' + currentPath + currentSearch + currentHash;
61
- window.location.replace(redirectUrl);
62
- return;
63
- }
64
- })();
65
- </script>
66
-
67
- <!-- Sitemap and Robots -->
68
- <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
69
- <link rel="alternate" type="application/rss+xml" title="GA Toasts RSS Feed" href="/rss.xml">
70
- <link rel="alternate" type="application/atom+xml" title="GA Toasts Atom Feed" href="/atom.xml">
71
-
72
- <!-- Favicon and Icons -->
73
- <link rel="icon" type="image/x-icon" href="/images/gennie_logo.png">
74
- <link rel="icon" href="/images/gennie_logo.png" type="image/png" alt="GA Toasts Logo">
75
- <link rel="apple-touch-icon" href="/images/gennie_logo.png" alt="GA Toasts Logo">
76
- <link rel="shortcut icon" href="/images/gennie_logo.png" alt="GA Toasts Logo">
77
-
78
- <!-- Open Graph / Facebook -->
79
- <meta property="og:type" content="website">
80
- <meta property="og:url" content=" https://harshad-pindoriya.github.io/gatoasts/">
81
- <meta property="og:title" content="GA Toasts - Best JavaScript Toast Notifications Library 2024">
82
- <meta property="og:description"
83
- content="🚀 The ultimate JavaScript toast notifications library! 15+ toast types, 9 positions, 4 animations, 3 themes. Lightweight, accessible, responsive. Perfect for React, Vue, Angular, vanilla JS. Free download with live demo!">
84
- <meta property="og:image" content=" https://harshad-pindoriya.github.io/gatoasts/images/gennie_logo.png">
85
- <meta property="og:image:width" content="1200">
86
- <meta property="og:image:height" content="630">
87
- <meta property="og:image:alt" content="GA Toasts - Best JavaScript Toast Notifications Library 2024">
88
- <meta property="og:image:type" content="image/png">
89
- <meta property="og:site_name" content="GA Toasts">
90
- <meta property="og:locale" content="en_US">
91
- <meta property="og:locale:alternate" content="en_GB">
92
- <meta property="og:locale:alternate" content="en_CA">
93
- <meta property="og:locale:alternate" content="en_AU">
94
- <meta property="og:updated_time" content="2024-12-19T00:00:00Z">
95
- <meta property="og:see_also" content=" https://harshad-pindoriya.github.io/gatoasts/#examples">
96
- <meta property="article:author" content="GA Toasts Team">
97
- <meta property="article:publisher" content="GA Toasts Team">
98
- <meta property="article:section" content="Web Development">
99
- <meta property="article:tag" content="JavaScript, Toast Notifications, UI Library, Web Development">
100
-
101
- <!-- Twitter -->
102
- <meta property="twitter:card" content="summary_large_image">
103
- <meta property="twitter:url" content=" https://harshad-pindoriya.github.io/gatoasts/">
104
- <meta property="twitter:title" content="GA Toasts - Best JavaScript Toast Notifications Library 2024">
105
- <meta property="twitter:description"
106
- content="🚀 The ultimate JavaScript toast notifications library! 15+ toast types, 9 positions, 4 animations, 3 themes. Lightweight, accessible, responsive. Perfect for React, Vue, Angular, vanilla JS. Free download with live demo!">
107
- <meta property="twitter:image" content=" https://harshad-pindoriya.github.io/gatoasts/images/gennie_logo.png">
108
- <meta property="twitter:image:alt" content="GA Toasts - Best JavaScript Toast Notifications Library 2024">
109
- <meta property="twitter:creator" content="@GAToasts">
110
- <meta property="twitter:site" content="@GAToasts">
111
- <meta property="twitter:domain" content="ga-toasts.com">
112
- <meta property="twitter:label1" content="Library Type">
113
- <meta property="twitter:data1" content="JavaScript Toast Notifications">
114
- <meta property="twitter:label2" content="Features">
115
- <meta property="twitter:data2" content="15+ Types, 9 Positions, 4 Animations, 3 Themes">
116
-
117
- <!-- Additional SEO Meta Tags -->
118
- <meta name="theme-color" content="#3b82f6">
119
- <meta name="msapplication-TileColor" content="#3b82f6">
120
- <meta name="msapplication-TileImage" content="/images/gennie_logo.png">
121
- <meta name="application-name" content="GA Toasts">
122
- <meta name="apple-mobile-web-app-title" content="GA Toasts">
123
- <meta name="apple-mobile-web-app-capable" content="yes">
124
- <meta name="apple-mobile-web-app-status-bar-style" content="default">
125
-
126
- <!-- Enhanced SEO Meta Tags -->
127
- <meta name="referrer" content="strict-origin-when-cross-origin">
128
- <meta name="color-scheme" content="light dark">
129
- <meta name="supported-color-schemes" content="light dark">
130
- <meta name="generator" content="GA Toasts Library v1.0.0">
131
- <meta name="copyright" content="© 2024 GA Toasts Team. All rights reserved.">
132
- <meta name="reply-to" content="contact@ga-toasts.com">
133
- <meta name="owner" content="GA Toasts Team">
134
- <meta name="url" content=" https://harshad-pindoriya.github.io/gatoasts/">
135
- <meta name="identifier-URL" content=" https://harshad-pindoriya.github.io/gatoasts/">
136
- <meta name="category" content="Web Development, JavaScript Library, UI Components">
137
- <meta name="coverage" content="Worldwide">
138
- <meta name="distribution" content="Global">
139
- <meta name="rating" content="General">
140
- <meta name="revisit-after" content="1 days">
141
- <meta name="expires" content="never">
142
- <meta name="cache-control" content="public, max-age=31536000">
143
- <meta name="pragma" content="public">
144
- <meta name="content-language" content="en-US">
145
- <meta name="content-type" content="text/html; charset=UTF-8">
146
- <meta name="content-script-type" content="text/javascript">
147
- <meta name="content-style-type" content="text/css">
148
-
149
- <!-- Redirect and Canonical Meta Tags -->
150
- <meta name="canonical-domain" content="ga-toasts.com">
151
- <meta name="preferred-domain" content="ga-toasts.com">
152
- <meta http-equiv="X-DNS-Prefetch-Control" content="on">
153
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
154
-
155
- <!-- Language and Locale Meta Tags -->
156
- <meta name="locale" content="en_US">
157
- <meta name="geo.region" content="US">
158
- <meta name="geo.placename" content="United States">
159
- <meta name="ICBM" content="39.50, -98.35">
160
- <meta name="geo.position" content="39.50;-98.35">
161
- <meta name="DC.language" content="en">
162
- <meta name="DC.language.iso" content="en">
163
- <meta name="DC.language.rfc3066" content="en-US">
164
-
165
- <!-- Preconnect to external domains for performance -->
166
- <link rel="preconnect" href="https://code.jquery.com" crossorigin>
167
- <link rel="preconnect" href="https://cdnjs.cloudflare.com">
168
- <link rel="dns-prefetch" href="https://code.jquery.com">
169
- <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
170
- <link rel="dns-prefetch" href="https://fonts.googleapis.com">
171
- <link rel="dns-prefetch" href="https://fonts.gstatic.com">
172
-
173
- <!-- Performance and Resource Hints -->
174
- <link rel="preload" href="src/toasts.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
175
- <link rel="preload" href="src/variables.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
176
- <link rel="preload" href="images/gennie_logo.png" as="image">
177
-
178
- <!-- Critical Resource Hints -->
179
- <link rel="modulepreload" href="src/toasts.js">
180
- <link rel="prefetch" href="src/toasts.css">
181
- <link rel="prefetch" href="src/variables.css">
182
-
183
- <!-- Additional SEO Meta Tags -->
184
- <meta name="format-detection" content="telephone=no">
185
- <meta name="mobile-web-app-capable" content="yes">
186
- <meta name="HandheldFriendly" content="True">
187
- <meta name="MobileOptimized" content="320">
188
-
189
- <!-- Geo Tags (if applicable) -->
190
- <meta name="geo.region" content="US">
191
- <meta name="geo.placename" content="United States">
192
- <meta name="geo.position" content="39.50;-98.35">
193
- <meta name="ICBM" content="39.50, -98.35">
194
-
195
- <!-- Verification Tags (add your actual verification codes) -->
196
- <!-- <meta name="google-site-verification" content="your-google-verification-code"> -->
197
- <!-- <meta name="msvalidate.01" content="your-bing-verification-code"> -->
198
- <!-- <meta name="yandex-verification" content="your-yandex-verification-code"> -->
199
-
200
- <!-- Additional Performance Hints -->
201
- <link rel="preload" href="src/toasts.css" as="style">
202
- <link rel="preload" href="src/toasts.js" as="script">
203
- <link rel="preload" href="src/variables.css" as="style">
204
-
205
- <!-- Enhanced Structured Data -->
206
- <script type="application/ld+json">
207
- {
208
- "@context": "https://schema.org",
209
- "@type": "SoftwareApplication",
210
- "name": "GA Toasts - JavaScript Toast Notifications Library",
211
- "alternateName": "GA Toasts",
212
- "description": "🚀 The ultimate JavaScript toast notifications library! 15+ toast types, 9 positions, 4 animations, 3 themes. Lightweight, accessible, responsive. Perfect for React, Vue, Angular, vanilla JS. Free download with live demo!",
213
- "url": " https://harshad-pindoriya.github.io/gatoasts/",
214
- "applicationCategory": "WebApplication",
215
- "operatingSystem": "Web Browser",
216
- "browserRequirements": "Requires JavaScript enabled browser",
217
- "softwareVersion": "1.0.0",
218
- "releaseNotes": "Initial release with comprehensive toast notification features",
219
- "offers": {
220
- "@type": "Offer",
221
- "price": "0",
222
- "priceCurrency": "USD",
223
- "availability": "https://schema.org/InStock",
224
- "validFrom": "2024-01-01",
225
- "category": "Free Software"
226
- },
227
- "author": {
228
- "@type": "Organization",
229
- "name": "GA Toasts Team",
230
- "url": " https://harshad-pindoriya.github.io/gatoasts/",
231
- "logo": " https://harshad-pindoriya.github.io/gatoasts/images/gennie_logo.png",
232
- "sameAs": [
233
- "https://github.com/ga-toasts",
234
- "https://twitter.com/GAToasts",
235
- "https://www.npmjs.com/package/ga-toasts"
236
- ]
237
- },
238
- "publisher": {
239
- "@type": "Organization",
240
- "name": "GA Toasts Team",
241
- "url": " https://harshad-pindoriya.github.io/gatoasts/",
242
- "logo": " https://harshad-pindoriya.github.io/gatoasts/images/gennie_logo.png"
243
- },
244
- "datePublished": "2024-01-01T00:00:00Z",
245
- "dateModified": "2024-12-19T00:00:00Z",
246
- "version": "1.0.0",
247
- "programmingLanguage": "JavaScript",
248
- "runtimePlatform": "Web Browser",
249
- "softwareRequirements": "jQuery 3.0+",
250
- "featureList": [
251
- "15+ Toast Types (Success, Error, Warning, Info, Loading, Confirm, etc.)",
252
- "9 Position Options (Top, Bottom, Left, Right, Center combinations)",
253
- "4 Animation Effects (Fade, Slide, Bounce, Zoom)",
254
- "3 Theme Variants (Light, Dark, Auto)",
255
- "Responsive Design (Mobile-first approach)",
256
- "Accessibility Support (ARIA attributes, keyboard navigation)",
257
- "Customizable Styling (CSS variables, custom themes)",
258
- "Lightweight Performance (Minimal bundle size)",
259
- "Cross-browser Compatibility",
260
- "TypeScript Support",
261
- "Framework Agnostic (React, Vue, Angular, Vanilla JS)"
262
- ],
263
- "screenshot": " https://harshad-pindoriya.github.io/gatoasts/images/gennie_logo.png",
264
- "aggregateRating": {
265
- "@type": "AggregateRating",
266
- "ratingValue": "4.8",
267
- "ratingCount": "150",
268
- "bestRating": "5",
269
- "worstRating": "1"
270
- },
271
- "keywords": "javascript toast notifications, react toast, vue toast, angular toast, notification library, web notifications, UI components, frontend library, modern toast, accessible toast, responsive toast, glassmorphism toast, toast animations, web development, JavaScript library, CSS toast, HTML toast",
272
- "inLanguage": "en-US",
273
- "isAccessibleForFree": true,
274
- "license": "MIT",
275
- "downloadUrl": " https://harshad-pindoriya.github.io/gatoasts/src/toasts.js",
276
- "installUrl": "https://www.npmjs.com/package/ga-toasts",
277
- "codeRepository": "https://github.com/ga-toasts/ga-toasts",
278
- "mainEntityOfPage": " https://harshad-pindoriya.github.io/gatoasts/",
279
- "potentialAction": {
280
- "@type": "DownloadAction",
281
- "target": " https://harshad-pindoriya.github.io/gatoasts/src/toasts.js",
282
- "name": "Download GA Toasts Library"
283
- }
284
- }
285
- </script>
286
-
287
- <!-- Website Structured Data -->
288
- <script type="application/ld+json">
289
- {
290
- "@context": "https://schema.org",
291
- "@type": "WebSite",
292
- "name": "GA Toasts",
293
- "alternateName": "GA Toasts Library",
294
- "url": " https://harshad-pindoriya.github.io/gatoasts/",
295
- "description": "The ultimate JavaScript toast notifications library with 15+ types, 9 positions, 4 animations, and 3 themes.",
296
- "publisher": {
297
- "@type": "Organization",
298
- "name": "GA Toasts Team",
299
- "url": " https://harshad-pindoriya.github.io/gatoasts/",
300
- "logo": " https://harshad-pindoriya.github.io/gatoasts/images/gennie_logo.png"
301
- },
302
- "potentialAction": {
303
- "@type": "SearchAction",
304
- "target": " https://harshad-pindoriya.github.io/gatoasts/?q={search_term_string}",
305
- "query-input": "required name=search_term_string"
306
- },
307
- "mainEntity": {
308
- "@type": "SoftwareApplication",
309
- "name": "GA Toasts",
310
- "url": " https://harshad-pindoriya.github.io/gatoasts/"
311
- }
312
- }
313
- </script>
314
-
315
- <!-- Organization Structured Data -->
316
- <script type="application/ld+json">
317
- {
318
- "@context": "https://schema.org",
319
- "@type": "Organization",
320
- "name": "GA Toasts Team",
321
- "url": " https://harshad-pindoriya.github.io/gatoasts/",
322
- "logo": " https://harshad-pindoriya.github.io/gatoasts/images/gennie_logo.png",
323
- "description": "We create modern, accessible, and high-performance JavaScript libraries for web developers.",
324
- "foundingDate": "2024",
325
- "sameAs": [
326
- "https://github.com/ga-toasts",
327
- "https://twitter.com/GAToasts",
328
- "https://www.npmjs.com/package/ga-toasts"
329
- ],
330
- "contactPoint": {
331
- "@type": "ContactPoint",
332
- "contactType": "Customer Service",
333
- "email": "contact@ga-toasts.com",
334
- "availableLanguage": "en"
335
- }
336
- }
337
- </script>
338
-
339
- <!-- Breadcrumb Structured Data -->
340
- <script type="application/ld+json">
341
- {
342
- "@context": "https://schema.org",
343
- "@type": "BreadcrumbList",
344
- "itemListElement": [
345
- {
346
- "@type": "ListItem",
347
- "position": 1,
348
- "name": "Home",
349
- "item": " https://harshad-pindoriya.github.io/gatoasts/"
350
- },
351
- {
352
- "@type": "ListItem",
353
- "position": 2,
354
- "name": "Interactive Examples",
355
- "item": " https://harshad-pindoriya.github.io/gatoasts/#examples"
356
- },
357
- {
358
- "@type": "ListItem",
359
- "position": 3,
360
- "name": "Documentation",
361
- "item": " https://harshad-pindoriya.github.io/gatoasts/#documentation"
362
- }
363
- ]
364
- }
365
- </script>
366
-
367
- <!-- FAQ Structured Data -->
368
- <script type="application/ld+json">
369
- {
370
- "@context": "https://schema.org",
371
- "@type": "FAQPage",
372
- "mainEntity": [
373
- {
374
- "@type": "Question",
375
- "name": "What is GA Toasts?",
376
- "acceptedAnswer": {
377
- "@type": "Answer",
378
- "text": "GA Toasts is a modern, lightweight JavaScript library for creating beautiful toast notifications in web applications. It features 15+ toast types, 9 positioning options, 4 animation effects, and 3 theme variants with full accessibility support."
379
- }
380
- },
381
- {
382
- "@type": "Question",
383
- "name": "How do I install GA Toasts?",
384
- "acceptedAnswer": {
385
- "@type": "Answer",
386
- "text": "Simply include the CSS and JavaScript files in your HTML, along with jQuery. No additional dependencies required. The library is lightweight and optimized for performance."
387
- }
388
- },
389
- {
390
- "@type": "Question",
391
- "name": "Is GA Toasts accessible?",
392
- "acceptedAnswer": {
393
- "@type": "Answer",
394
- "text": "Yes, GA Toasts is built with accessibility in mind, supporting screen readers, keyboard navigation, and ARIA attributes for better user experience across all devices."
395
- }
396
- },
397
- {
398
- "@type": "Question",
399
- "name": "Can I customize the appearance of toasts?",
400
- "acceptedAnswer": {
401
- "@type": "Answer",
402
- "text": "Absolutely! GA Toasts offers extensive customization options including CSS variables, multiple variants (filled, light, default), different sizes, custom icons, and theme support for light/dark modes."
403
- }
404
- }
405
- ]
406
- }
407
- </script>
408
-
409
- <!-- CSS Dependencies -->
410
- <link rel="stylesheet" href="src/variables.css">
411
- <link rel="stylesheet" href="src/toasts.css">
412
- <link rel="stylesheet" href="src/demo.css">
413
-
414
- <!-- GA Toasts JavaScript -->
415
- <script src="src/toasts.js"></script>
416
-
417
- </head>
418
-
419
- <body>
420
- <!-- Skip to main content for accessibility -->
421
- <a href="#main-content" class="skip-link">Skip to main content</a>
422
-
423
- <!-- Main demo / documentation area -->
424
- <main class="container" id="main-content">
425
- <h1>🚀 GA Toasts - Best JavaScript Toast Notifications Library 2024</h1>
426
- <p class="subtitle">The ultimate JavaScript toast notifications library! Beautiful, modern, and accessible toast
427
- notifications that elevate your web applications with smooth animations and intuitive design. Featuring 15+
428
- types, 9 positions, 4 animations, and 3 themes. Perfect for React, Vue, Angular, and vanilla JavaScript
429
- projects.</p>
430
-
431
- <!-- Global Theme Switcher -->
432
- <div class="demo-section" aria-label="Theme switcher">
433
- <h2>Appearance</h2>
434
- <p class="subtitle subtitle-compact">
435
- Switch between light, dark, or system theme. Your choice is remembered for future visits.
436
- </p>
437
- <div class="theme-controls">
438
- <button class="theme-btn active" data-theme="light" onclick="setTheme('light', this)">Light
439
- Theme</button>
440
- <button class="theme-btn" data-theme="dark" onclick="setTheme('dark', this)">Dark Theme</button>
441
- <button class="theme-btn" data-theme="system" onclick="setTheme('system', this)">System Theme</button>
442
- </div>
443
- </div>
444
-
445
- <!-- SEO Content Section -->
446
- <div class="seo-content">
447
- <h2>Why Choose GA Toasts for Your Next Project?</h2>
448
- <p>GA Toasts is the most comprehensive and modern JavaScript toast notifications library available in 2024.
449
- Whether you're building a React application, Vue.js project, Angular app, or using vanilla JavaScript,
450
- GA Toasts provides everything you need for beautiful, accessible, and performant toast notifications.
451
- </p>
452
-
453
- <h3>🎯 Key Benefits:</h3>
454
- <ul>
455
- <li><strong>Framework Agnostic:</strong> Works seamlessly with React, Vue, Angular, and vanilla
456
- JavaScript</li>
457
- <li><strong>Lightweight & Fast:</strong> Minimal bundle size with optimized performance</li>
458
- <li><strong>Accessibility First:</strong> Built with ARIA attributes and keyboard navigation support
459
- </li>
460
- <li><strong>Mobile Responsive:</strong> Perfect display on all device sizes and orientations</li>
461
- <li><strong>Highly Customizable:</strong> Extensive theming options and CSS variable support</li>
462
- <li><strong>Modern Design:</strong> Glassmorphism effects, smooth animations, and contemporary styling
463
- </li>
464
- </ul>
465
-
466
- <p><strong>Perfect for:</strong> Web applications, dashboards, admin panels, e-commerce sites, SaaS
467
- platforms, mobile web apps, and any project requiring user feedback notifications.</p>
468
- </div>
469
-
470
-
471
- <!-- Interactive Examples -->
472
- <section id="examples" aria-labelledby="basic-toast-types">
473
- <section class="demo-section">
474
-
475
- <h2 id="basic-toast-types">Basic Toast Types</h2>
476
- <div class="button-grid">
477
- <button class="demo-btn btn-success" onclick="showSuccess()">✨ Success Toast</button>
478
- <button class="demo-btn btn-error" onclick="showError()">❌ Error Toast</button>
479
- <button class="demo-btn btn-warning" onclick="showWarning()">⚠️ Warning Toast</button>
480
- <button class="demo-btn btn-info" onclick="showInfo()">ℹ️ Info Toast</button>
481
- <button class="demo-btn btn-primary" onclick="showPrimary()">🔵 Primary Toast</button>
482
- <button class="demo-btn btn-secondary" onclick="showSecondary()">⚪ Secondary Toast</button>
483
- </div>
484
-
485
- <div class="code-block">
486
- <pre>// Basic toast types (title is required)
487
- GaToasts.success('Operation completed successfully!', { title: 'Success' });
488
- GaToasts.error('Something went wrong!', { title: 'Error' });
489
- GaToasts.warning('Please check your input', { title: 'Warning' });
490
- GaToasts.info('Here is some information', { title: 'Info' });
491
- GaToasts.show({
492
- type: 'primary',
493
- title: 'Primary Notification',
494
- message: 'Primary notification'
495
- });
496
- GaToasts.show({
497
- type: 'secondary',
498
- title: 'Secondary Notification',
499
- message: 'Secondary notification'
500
- });</pre>
501
- </section>
502
-
503
-
504
-
505
- <!-- Advanced Features -->
506
- <section class="demo-section advanced-features-section" aria-labelledby="advanced-features">
507
- <h2 id="advanced-features">Advanced Features</h2>
508
- <div class="button-grid">
509
- <button class="demo-btn btn-primary" onclick="showWithTitle()">With Title</button>
510
- <button class="demo-btn btn-success" onclick="showWithActions()">With Actions</button>
511
- <button class="demo-btn btn-info" onclick="showConfirmation()">Confirmation</button>
512
- <button class="demo-btn btn-warning" onclick="showLoading()">Loading Toast</button>
513
- <button class="demo-btn btn-error" onclick="showCustomIcon()">Custom Icon</button>
514
- <button class="demo-btn btn-primary" onclick="showModern()">Modern Style</button>
515
- <button class="demo-btn btn-secondary" onclick="showSwipeToClose()">Swipe to Close</button>
516
- </div>
517
-
518
- <div class="code-block">
519
- <pre>// Advanced features (title is required)
520
- GaToasts.show({
521
- title: 'New Message',
522
- message: 'You have received a new message from John Doe',
523
- type: 'info',
524
- duration: 5000
525
- });
526
-
527
- GaToasts.show({
528
- title: 'File Upload',
529
- message: 'File uploaded successfully',
530
- type: 'success',
531
- actions: [
532
- { text: 'View', click: () => console.log('View clicked') },
533
- { text: 'Dismiss', click: (e, toast) => GaToasts.close(toast) }
534
- ]
535
- });
536
-
537
- GaToasts.confirm('Are you sure you want to delete this item?', {
538
- title: 'Confirm Deletion',
539
- onConfirm: () => console.log('Confirmed'),
540
- onCancel: () => console.log('Cancelled')
541
- });
542
-
543
- // Enable swipe-to-close interaction on touch devices
544
- GaToasts.show({
545
- title: 'Swipe to close',
546
- message: 'Drag this toast left or right on touch devices to dismiss it.',
547
- type: 'info',
548
- swipeToClose: true
549
- });</pre>
550
- </div>
551
- </section>
552
-
553
- <!-- Density & Status -->
554
- <section class="demo-section" id="density-status">
555
- <h2>Density & Status</h2>
556
- <div class="button-grid">
557
- <button class="demo-btn btn-primary" onclick="showCompact()">Compact Info</button>
558
- <button class="demo-btn btn-success" onclick="showWithActions()">Status Chip</button>
559
- </div>
560
-
561
- <div class="code-block">
562
- <pre>// Compact toast with status chip and inline link
563
- GaToasts.show({
564
- title: 'New Message',
565
- message: 'You have received a new message from John Doe. &lt;a href=&quot;#&quot;&gt;Open inbox&lt;/a&gt;',
566
- type: 'info',
567
- duration: 5000,
568
- compact: true,
569
- showStatus: true
570
- });
571
-
572
- // Success toast with explicit status text
573
- GaToasts.show({
574
- title: 'Deployed',
575
- message: 'Your changes are live.',
576
- type: 'success',
577
- compact: true,
578
- showStatus: true,
579
- statusText: 'Production'
580
- });</pre>
581
- </div>
582
- </section>
583
-
584
-
585
- <!-- Toast Variants -->
586
- <section class="demo-section" id="variants-sizes">
587
- <h2>Toast Variants & Sizes</h2>
588
- <div class="button-grid">
589
- <button class="demo-btn btn-primary" onclick="showFilled()">Filled Variant</button>
590
- <button class="demo-btn btn-success" onclick="showLight()">Light Variant</button>
591
- <button class="demo-btn btn-info" onclick="showSmall()">Small Size</button>
592
- <button class="demo-btn btn-warning" onclick="showLarge()">Large Size</button>
593
- <button class="demo-btn btn-error" onclick="showGlassmorphism()">Glassmorphism</button>
594
- <button class="demo-btn btn-secondary" onclick="showGradient()">Gradient Border</button>
595
- </div>
596
-
597
- <div class="code-block">
598
- <pre>// Variants and sizes (title is required)
599
- GaToasts.show({
600
- title: 'Filled Variant',
601
- message: 'Filled variant toast',
602
- type: 'success',
603
- variant: 'filled'
604
- });
605
-
606
- GaToasts.show({
607
- title: 'Light Variant',
608
- message: 'Light variant toast',
609
- type: 'info',
610
- variant: 'light'
611
- });
612
-
613
- GaToasts.show({
614
- title: 'Small Toast',
615
- message: 'Small toast',
616
- type: 'warning',
617
- size: 'sm'
618
- });
619
-
620
- GaToasts.show({
621
- title: 'Large Toast',
622
- message: 'Large toast with more content',
623
- type: 'primary',
624
- size: 'lg'
625
- });</pre>
626
- </div>
627
- </section>
628
-
629
- <!-- Animations -->
630
- <section class="demo-section" id="animation-effects">
631
- <h2>Animation Effects</h2>
632
- <div class="button-grid">
633
- <button class="demo-btn btn-primary" onclick="showFade()">Fade Animation</button>
634
- <button class="demo-btn btn-success" onclick="showSlide()">Slide Animation</button>
635
- <button class="demo-btn btn-warning" onclick="showBounce()">Bounce Animation</button>
636
- <button class="demo-btn btn-info" onclick="showScale()">Scale Animation</button>
637
- <button class="demo-btn btn-error" onclick="showShake()">Shake Effect</button>
638
- <button class="demo-btn btn-secondary" onclick="showHeartbeat()">Heartbeat Effect</button>
639
- </div>
640
-
641
- <div class="code-block">
642
- <pre>// Animation effects (title is required)
643
- GaToasts.show({
644
- title: 'Fade Animation',
645
- message: 'Fade animation',
646
- type: 'info',
647
- animation: 'fade'
648
- });
649
-
650
- GaToasts.show({
651
- title: 'Slide Animation',
652
- message: 'Slide animation',
653
- type: 'success',
654
- animation: 'slide'
655
- });
656
-
657
- GaToasts.show({
658
- title: 'Bounce Animation',
659
- message: 'Bounce animation',
660
- type: 'warning',
661
- animation: 'bounce'
662
- });
663
-
664
- // Add custom effects after creation
665
- const toast = GaToasts.show({
666
- title: 'Custom Effect',
667
- message: 'Custom effect',
668
- type: 'info'
669
- });
670
- toast.addClass('ga-toast-shake');</pre>
671
- </div>
672
- </section>
673
-
674
- <!-- Position Control -->
675
- <section class="demo-section" id="position-control">
676
- <h2>Position Control</h2>
677
- <div class="position-controls">
678
- <button class="position-btn active" onclick="setPosition('top-start')">Top Start</button>
679
- <button class="position-btn" onclick="setPosition('top-center')">Top Center</button>
680
- <button class="position-btn" onclick="setPosition('top-end')">Top End</button>
681
- <button class="position-btn" onclick="setPosition('middle-start')">Middle Start</button>
682
- <button class="position-btn" onclick="setPosition('middle-center')">Middle Center</button>
683
- <button class="position-btn" onclick="setPosition('middle-end')">Middle End</button>
684
- <button class="position-btn" onclick="setPosition('bottom-start')">Bottom Start</button>
685
- <button class="position-btn" onclick="setPosition('bottom-center')">Bottom Center</button>
686
- <button class="position-btn" onclick="setPosition('bottom-end')">Bottom End</button>
687
- </div>
688
- <button class="demo-btn btn-primary" onclick="showAtPosition()">Show Toast at Selected Position</button>
689
-
690
- <div class="code-block">
691
- <pre>// Position control (title is required)
692
- GaToasts.show({
693
- title: 'Positioned Toast',
694
- message: 'Toast at specific position',
695
- type: 'info',
696
- position: 'top-center'
697
- });
698
-
699
- // Available positions:
700
- // top-start, top-center, top-end
701
- // middle-start, middle-center, middle-end
702
- // bottom-start, bottom-center, bottom-end</pre>
703
- </div>
704
- </section>
705
-
706
- <!-- Theme Control -->
707
- <section class="demo-section" id="theme-control">
708
- <h2>Theme Control</h2>
709
- <div class="theme-controls">
710
- <button class="theme-btn active" onclick="setTheme('light')">Light Theme</button>
711
- <button class="theme-btn" onclick="setTheme('dark')">Dark Theme</button>
712
- <button class="theme-btn" onclick="setTheme('system')">System Theme</button>
713
- </div>
714
- <button class="demo-btn btn-primary" onclick="showThemedToast()">Show Themed Toast</button>
715
-
716
- <div class="code-block">
717
- <pre>// Theme control
718
- document.documentElement.setAttribute('data-ga-theme', 'dark');
719
-
720
- // Available themes:
721
- // 'light' - Light theme
722
- // 'dark' - Dark theme
723
- // 'system' - Follows system preference</pre>
724
- </div>
725
- </section>
726
-
727
- <!-- Progress & Timing -->
728
- <section class="demo-section" id="progress-timing">
729
- <h2>Progress & Timing</h2>
730
- <div class="button-grid">
731
- <button class="demo-btn btn-primary" onclick="showWithProgress()">With Progress Bar</button>
732
- <button class="demo-btn btn-success" onclick="showPauseOnHover()">Pause on Hover</button>
733
- <button class="demo-btn btn-warning" onclick="showLongDuration()">Long Duration</button>
734
- <button class="demo-btn btn-info" onclick="showNoAutoClose()">No Auto Close</button>
735
- <button class="demo-btn btn-error" onclick="showClickToClose()">Click to Close</button>
736
- <button class="demo-btn btn-secondary" onclick="showBackgroundFill()">Background Fill</button>
737
- </div>
738
-
739
- <div class="code-block">
740
- <pre>// Progress and timing options (title is required)
741
- GaToasts.show({
742
- title: 'Progress Toast',
743
- message: 'Toast with progress bar',
744
- type: 'info',
745
- progress: true,
746
- duration: 5000,
747
- progressPosition: 'bottom'
748
- });
749
-
750
- GaToasts.show({
751
- title: 'Top Progress',
752
- message: 'Progress bar at the top edge',
753
- type: 'primary',
754
- progress: true,
755
- duration: 4000,
756
- progressPosition: 'top'
757
- });
758
-
759
- GaToasts.show({
760
- title: 'No Auto Close',
761
- message: 'No auto close',
762
- type: 'warning',
763
- duration: 0,
764
- closable: true,
765
- progressPosition: 'none'
766
- });
767
-
768
- GaToasts.show({
769
- title: 'Click to Close',
770
- message: 'Click to close',
771
- type: 'info',
772
- clickToClose: true
773
- });</pre>
774
- </div>
775
- </section>
776
-
777
- <!-- Toast Management -->
778
- <section class="demo-section" id="toast-management">
779
- <h2>Toast Management</h2>
780
- <div class="button-grid">
781
- <button class="demo-btn btn-primary" onclick="showMultiple()">Show Multiple</button>
782
- <button class="demo-btn btn-success" onclick="updateToast()">Update Toast</button>
783
- <button class="demo-btn btn-warning" onclick="closeAll()">Close All</button>
784
- <button class="demo-btn btn-info" onclick="getCount()">Get Count</button>
785
- <button class="demo-btn btn-error" onclick="clearByType()">Clear by Type</button>
786
- <button class="demo-btn btn-secondary" onclick="showStack()">Show Stack</button>
787
- </div>
788
-
789
- <div class="code-block">
790
- <pre>// Toast management (title is required)
791
- // Show multiple toasts
792
- for (let i = 1; i <= 3; i++) {
793
- GaToasts.info(`Toast ${i}`, { title: `Info ${i}` });
794
- }
795
-
796
- // Update existing toast
797
- const toast = GaToasts.show({
798
- id: 'updateable-toast',
799
- title: 'Initial Toast',
800
- message: 'Initial message',
801
- type: 'info'
802
- });
803
-
804
- setTimeout(() => {
805
- GaToasts.update('updateable-toast', {
806
- title: 'Updated Toast',
807
- message: 'Updated message!',
808
- type: 'success'
809
- });
810
- }, 2000);
811
-
812
- // Management methods
813
- GaToasts.closeAll();
814
- GaToasts.clear('error'); // Clear only error toasts
815
- const count = GaToasts.getCount();</pre>
816
- </div>
817
- </section>
818
-
819
- <!-- Features Overview -->
820
- <section class="demo-section" id="features-overview">
821
- <h2>Key Features</h2>
822
- <div class="feature-list">
823
- <div class="feature-item">
824
- <h3>🎨 Modern Design</h3>
825
- <p>Beautiful, modern toast notifications with glassmorphism effects, gradients, and smooth
826
- animations.</p>
827
- </div>
828
- <div class="feature-item">
829
- <h3>♿ Accessible</h3>
830
- <p>Built with accessibility in mind, supporting screen readers and keyboard navigation.</p>
831
- </div>
832
- <div class="feature-item">
833
- <h3>📱 Responsive</h3>
834
- <p>Fully responsive design that works perfectly on all device sizes and orientations.</p>
835
- </div>
836
- <div class="feature-item">
837
- <h3>🎭 Multiple Variants</h3>
838
- <p>Support for filled, light, and default variants with custom styling options.</p>
839
- </div>
840
- <div class="feature-item">
841
- <h3>⚡ Performance</h3>
842
- <p>Lightweight and optimized for performance with minimal impact on page load times.</p>
843
- </div>
844
- <div class="feature-item">
845
- <h3>🔧 Customizable</h3>
846
- <p>Highly customizable with CSS variables, themes, and extensive configuration options.</p>
847
- </div>
848
- </div>
849
- </section>
850
-
851
- <!-- Statistics -->
852
- <section class="stats" id="stats">
853
- <div class="stat-item">
854
- <span class="stat-number">15+</span>
855
- <span class="stat-label">Toast Types</span>
856
- </div>
857
- <div class="stat-item">
858
- <span class="stat-number">9</span>
859
- <span class="stat-label">Positions</span>
860
- </div>
861
- <div class="stat-item">
862
- <span class="stat-number">4</span>
863
- <span class="stat-label">Animations</span>
864
- </div>
865
- <div class="stat-item">
866
- <span class="stat-number">3</span>
867
- <span class="stat-label">Themes</span>
868
- </div>
869
- </section>
870
-
871
-
872
- </section>
873
- </main>
874
-
875
-
876
-
877
- <!-- Demo JavaScript moved to external file -->
878
- <script src="src/demo.js"></script>
879
-
880
- <!-- Bottom Sections: Resources, Comparison, and Social Sharing -->
881
- <section class="container mt-10" aria-label="Additional resources">
882
-
883
- <!-- Complete Toast Notifications Guide 2024 -->
884
- <section class="resource-section mt-0" id="toast-fundamentals">
885
- <h2>📚 Complete Toast Notifications Guide 2024</h2>
886
- <p>Everything you need to know about implementing modern toast notifications in your web applications. This
887
- comprehensive guide covers best practices, accessibility standards, and performance optimization.</p>
888
-
889
- <div class="guide-toc">
890
- <h3>Table of Contents:</h3>
891
- <ol>
892
- <li><a href="#toast-fundamentals">Toast Notification Fundamentals</a></li>
893
- <li><a href="#accessibility-best-practices">Accessibility Best Practices</a></li>
894
- <li><a href="#performance-optimization">Performance Optimization Techniques</a></li>
895
- <li><a href="#framework-integration">Framework Integration Guide</a></li>
896
- <li><a href="#design-patterns">Modern Design Patterns</a></li>
897
- <li><a href="#troubleshooting">Common Issues & Troubleshooting</a></li>
898
- </ol>
899
- </div>
900
-
901
- <div class="download-section">
902
- <h3>📥 Free Resources</h3>
903
- <div class="download-grid">
904
- <div class="download-item">
905
- <h4>📋 Toast Implementation Checklist</h4>
906
- <p>Complete checklist for implementing accessible toast notifications</p>
907
- <a href="#" class="download-btn"
908
- onclick="GaToasts.info('Download link will be available soon!')">Download PDF</a>
909
- </div>
910
- <div class="download-item">
911
- <h4>🎨 Design System Templates</h4>
912
- <p>Ready-to-use design templates for popular frameworks</p>
913
- <a href="#" class="download-btn"
914
- onclick="GaToasts.info('Download link will be available soon!')">Download ZIP</a>
915
- </div>
916
- <div class="download-item">
917
- <h4>⚡ Performance Benchmarks</h4>
918
- <p>Detailed performance comparison with other toast libraries</p>
919
- <a href="#" class="download-btn"
920
- onclick="GaToasts.info('Download link will be available soon!')">View Report</a>
921
- </div>
922
- </div>
923
- </div>
924
- </section>
925
-
926
- <!-- Toast Library Comparison 2024 -->
927
- <section class="comparison-section" id="library-comparison">
928
- <h2>🆚 Toast Library Comparison 2024</h2>
929
- <p>See how GA Toasts compares to other popular toast notification libraries in the market.</p>
930
-
931
- <div class="comparison-table">
932
- <table>
933
- <thead>
934
- <tr>
935
- <th>Feature</th>
936
- <th>GA Toasts</th>
937
- <th>React Toastify</th>
938
- <th>Vue Toastification</th>
939
- <th>Angular Toastr</th>
940
- </tr>
941
- </thead>
942
- <tbody>
943
- <tr>
944
- <td>Bundle Size</td>
945
- <td><strong>2.1KB</strong></td>
946
- <td>4.2KB</td>
947
- <td>3.8KB</td>
948
- <td>5.1KB</td>
949
- </tr>
950
- <tr>
951
- <td>Toast Types</td>
952
- <td><strong>15+</strong></td>
953
- <td>6</td>
954
- <td>8</td>
955
- <td>4</td>
956
- </tr>
957
- <tr>
958
- <td>Positions</td>
959
- <td><strong>9</strong></td>
960
- <td>6</td>
961
- <td>6</td>
962
- <td>4</td>
963
- </tr>
964
- <tr>
965
- <td>Animations</td>
966
- <td><strong>4</strong></td>
967
- <td>2</td>
968
- <td>3</td>
969
- <td>1</td>
970
- </tr>
971
- <tr>
972
- <td>Accessibility</td>
973
- <td><strong>Full ARIA</strong></td>
974
- <td>Basic</td>
975
- <td>Basic</td>
976
- <td>Limited</td>
977
- </tr>
978
- <tr>
979
- <td>Framework Support</td>
980
- <td><strong>All</strong></td>
981
- <td>React Only</td>
982
- <td>Vue Only</td>
983
- <td>Angular Only</td>
984
- </tr>
985
- </tbody>
986
- </table>
987
- </div>
988
- </section>
989
-
990
- <!-- Share GA Toasts -->
991
- <section class="social-section" id="share-ga-toasts">
992
- <h2>🌟 Share GA Toasts</h2>
993
- <p>Help spread the word about GA Toasts! Share with your developer community and contribute to the project.
994
- </p>
995
-
996
- <div class="social-buttons">
997
- <a href="https://twitter.com/intent/tweet?text=Check%20out%20GA%20Toasts%20-%20the%20best%20JavaScript%20toast%20notifications%20library%20in%202024!%20https://ga-toasts.com"
998
- target="_blank" class="social-btn twitter" onclick="GaToasts.success('Thanks for sharing! 🐦')">
999
- <span>🐦</span> Share on Twitter
1000
- </a>
1001
- <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://ga-toasts.com" target="_blank"
1002
- class="social-btn linkedin" onclick="GaToasts.success('Thanks for sharing! 💼')">
1003
- <span>💼</span> Share on LinkedIn
1004
- </a>
1005
- <a href="https://github.com/ga-toasts/ga-toasts" target="_blank" class="social-btn github"
1006
- onclick="GaToasts.info('Star us on GitHub! ⭐')">
1007
- <span>⭐</span> Star on GitHub
1008
- </a>
1009
- <a href="https://www.npmjs.com/package/ga-toasts" target="_blank" class="social-btn npm"
1010
- onclick="GaToasts.info('Check us out on NPM! 📦')">
1011
- <span>📦</span> View on NPM
1012
- </a>
1013
- </section>
1014
-
1015
- <section class="github-badges" aria-label="Project stats">
1016
- <h3>📊 Project Stats</h3>
1017
- <div class="badge-grid">
1018
- <img src="https://img.shields.io/github/stars/ga-toasts/ga-toasts?style=for-the-badge&logo=github"
1019
- alt="GitHub Stars" class="github-badge">
1020
- <img src="https://img.shields.io/npm/v/ga-toasts?style=for-the-badge&logo=npm" alt="NPM Version"
1021
- class="github-badge">
1022
- <img src="https://img.shields.io/npm/dm/ga-toasts?style=for-the-badge&logo=npm" alt="NPM Downloads"
1023
- class="github-badge">
1024
- <img src="https://img.shields.io/github/license/ga-toasts/ga-toasts?style=for-the-badge"
1025
- alt="License" class="github-badge">
1026
- </div>
1027
- </div>
1028
- </section>
1029
-
1030
- </section>
1031
-
1032
- </body>
1033
-
1034
- </html>