toaster/index.html at main · MegaMind-Solution/toaster · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Toaster v4.0 | A Modern Tooltip Library</title>
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #eef2ff;
            --bg: #f8fafc;
            --text-dark: #1e293b;
            --text-light: #64748b;
            --code-bg: #1e293b;
            --border-color: #e2e8f0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg);
            color: var(--text-dark);
            margin: 0;
            line-height: 1.7;
        }

        /* --- LAYOUT & TYPOGRAPHY --- */
        .hero {
            background: white;
            padding: 80px 20px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
        }

        .hero h1 {
            font-size: 3.5rem;
            letter-spacing: -2px;
            margin: 0;
            background: linear-gradient(45deg, var(--primary), #7c3aed);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-light);
            max-width: 700px;
            margin: 20px auto 0;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px;
        }

        section {
            padding-top: 40px;
            margin-bottom: 50px;
        }

        h2 {
            font-size: 2rem;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
            margin-bottom: 25px;
            text-align: center;
        }

        /* --- UI COMPONENTS --- */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
        }

        .card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
        }

        .card-content {
            flex-grow: 1;
        }

        .card h3 {
            margin-top: 0;
            color: var(--primary);
            font-size: 1.2rem;
        }

        .card p {
            color: var(--text-light);
            font-size: 0.95rem;
        }

        .btn-demo {
            background: white;
            border: 1px solid #cbd5e1;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s;
            display: block;
            width: 100%;
            text-align: center;
            margin-top: auto;
        }

        .btn-demo:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: var(--primary-light);
            transform: translateY(-2px);
        }

        code {
            padding: 3px 7px;
            border-radius: 5px;
            color: #16a64c;
            font-size: 0.9em;
            font-family: 'SF Mono', Consolas, monospace;
        }

        pre {
            background: var(--code-bg);
            color: #cbd5e1;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
        }
    </style>
</head>

<body>
    <div class="hero">
        <h1>Universal Toaster</h1>
        <p>A lightweight, API-driven library to transform boring native tooltips into rich, interactive, and modern UI
            elements for any web project.</p>
    </div>

    <div class="container">

        <!-- OVERVIEW SECTION -->
        <section id="overview">
            <h2>Why Choose Universal Toaster?</h2>
            <div class="grid">
                <div class="card">
                    <h3>🚀 API Driven</h3>
                    <p>Control the entire lifecycle with <code>init()</code>, <code>destroy()</code>, and
                        <code>updateConfig()</code>. Perfect for SPAs (React, Vue, Svelte) and extensions.
                    </p>
                </div>
                <div class="card">
                    <h3>🎨 Rich Text Engine</h3>
                    <p>Go beyond plain text. Add lists, links, icons, images, custom fonts, and colors directly inside
                        your <code>title</code> attribute using simple shortcodes.</p>
                </div>
                <div class="card">
                    <h3>💡 Web App Ready</h3>
                    <p>With Shadow DOM support and a `MutationObserver`, tooltips work reliably on dynamic content and
                        complex web components out of the box.</p>
                </div>
            </div>
        </section>

        <!-- GUIDE SECTION -->
        <section id="guide">
            <h2>Developer's Guide</h2>
            <h3>How It Works</h3>
            <p>The library works in three simple steps:</p>
            <ol>
                <li><strong>Scan & Swap:</strong> On initialization, it scans the DOM for elements with a `title`
                    attribute. It moves the content to a `data-toaster-title` attribute to prevent the native browser
                    tooltip from appearing.</li>
                <li><strong>Listen & Parse:</strong> It listens for `mouseover` events. When you hover over a target
                    element, it reads the data attribute and parses any rich text shortcodes into styled HTML.</li>
                <li><strong>Position & Display:</strong> It calculates the optimal position for the tooltip, ensuring it
                    never goes off-screen (even on mobile), and displays it with a subtle fade-in effect.</li>
            </ol>

            <h3>API Controls</h3>
            <p>Control the library programmatically. Here are the core methods:</p>
            <pre><code><span style="color:#64748b;">// Initialize the library with custom settings</span>
UniversalToaster.init({
  delay: 200,          <span style="color:#64748b;">// ms before showing</span>
  backgroundColor: null,   <span style="color:#64748b;">// e.g. "#333"</span>
  textColor: null,   <span style="color:#64748b;">// e.g. "#fff"</span>
  <span style="color:#64748b;">// TYPOGRAPHY</span>
  fontFamily: "inherit", <span style="color:#64748b;">// Uses page font</span>
  fontSize: "13px",
  fontWeight: "500",
  <span style="color:#64748b;">// SHAPE</span>
  borderRadius: "6px",
  padding: "8px 12px",
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)"
});

<span style="color:#64748b;">// Update settings on the fly</span>
UniversalToaster.updateConfig({ borderRadius: '20px' });

<span style="color:#64748b;">// Cleanly remove all listeners and elements (for SPAs)</span>
UniversalToaster.destroy();
</code></pre>
            <p>
                <button class="btn-demo" style="display:inline-block; width:auto;"
                    onclick="UniversalToaster.updateConfig({borderRadius: '50px', padding: '15px 25px'})"
                    title="Updates the global config to use a pill shape">Try updateConfig()</button>
                <button class="btn-demo" style="display:inline-block; width:auto;" onclick="UniversalToaster.destroy()"
                    title="Disables all tooltips on the page">Try destroy()</button>
            </p>
        </section>

        <!-- DEMO SECTION -->
        <section id="demos">
            <h2>Live Demos & Examples</h2>
            <div class="grid">
                <!-- Demo 1: Lists -->
                <div class="card">
                    <h3>✅ Checklists & Dividers</h3>
                    <p>Use lists and horizontal rules (<code>&hr;</code>) to structure information clearly.</p>
                    <div class="card-content"></div>
                    <button class="btn-demo"
                        title="&fw=bold;Deployment Steps&fw;&hr;&li=✅;Build Project&li;&li=✅;Run Tests&li;&li=⏳;Deploy to Staging&li;&li=◻️;Deploy to Production&li;">
                        Hover: Deployment Checklist
                    </button>
                </div>

                <!-- Demo 2: Interactive -->
                <div class="card">
                    <h3>🔗 Interactive Links</h3>
                    <p>Using <code>&lnk=;</code> makes the tooltip interactive, allowing users to hover and click links.
                    </p>
                    <div class="card-content"></div>
                    <button class="btn-demo"
                        title="&icon=info; Your free trial is ending soon. &lnk=#;Upgrade your account&lnk; to keep your projects active.">
                        Hover: Interactive Alert
                    </button>
                </div>

                <!-- Demo 3: User Card -->
                <div class="card">
                    <h3>🖼️ Rich User Profile</h3>
                    <p>Combine images, icons, and text styles to create detailed profile cards.</p>
                    <div class="card-content"></div>
                    <button class="btn-demo"
                        title="&img=https://i.pravatar.cc/120;&fw=bold; John Doe&fw; &cl=gray;@sarah.c&cl;&hr;&icon=info; Last seen: 2 hours ago&li=📍;Los Angeles, CA&li;">
                        Hover: User Profile
                    </button>
                </div>

                <!-- Demo 4: E-commerce -->
                <div class="card">
                    <h3>🛍️ Product Preview</h3>
                    <p>Perfect for e-commerce sites to show quick product details without a full modal.</p>
                    <div class="card-content"></div>
                    <button class="btn-demo"
                        title="&fn=Oswald;Vintage Leather Watch&fn;&img=https://images.unsplash.com/photo-1523170335258-f5ed11844a49?w=300&q=80;&li=⭐;4.8 (320 reviews)&li;&li=💰;$199.99&li;&bgcl=#16a34a;&cl=white; In Stock &cl;&bgcl;">
                        Hover: Product Details
                    </button>
                </div>

                <!-- Demo 5: Width Override -->
                <div class="card">
                    <h3>↔️ Custom Width</h3>
                    <p>Use <code>&w=400px;</code> to override the default width for content like code snippets.</p>
                    <div class="card-content"></div>
                    <button class="btn-demo" title="&w=400px;&fw=bold;Code Snippet&fw;&hr;&cl=#a5b4fc;const toaster = UniversalToaster.init({
  delay: 200
});&cl;">
                        Hover: Code Snippet
                    </button>
                </div>

                <!-- Demo 6: Dark Mode -->
                <div class="card" style="background:var(--code-bg); color:white;">
                    <h3 style="color:#a5b4fc;">🌓 Auto-Theme</h3>
                    <p style="color:#94a3b8;">The library detects the dark background and automatically inverts the
                        tooltip colors for high contrast.</p>
                    <div class="card-content"></div>
                    <button class="btn-demo" style="background:#334155; color:white; border:none;"
                        title="💡 My colors flipped automatically!">
                        Hover: Dark Mode Test
                    </button>
                </div>
            </div>
        </section>
    </div>

    <!-- Initialize The Library -->
    <script src="src/toaster.js"></script>
    <script>
        UniversalToaster.init({
            delay: 100
        });
    </script>
</body>

</html>