@moneybar.online/moneybar 3.2.0 → 3.4.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.
package/dist/index.cjs.js DELETED
@@ -1,3058 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var supabaseJs = require('@supabase/supabase-js');
6
-
7
- /**
8
- * MoneyBar - The navbar of monetization
9
- *
10
- * Fix the 3 money-blocking stages that stop revenue:
11
- * 1. Forced sign-ins before value → Value-first trials
12
- * 2. Silent drop-offs → Exit feedback capture
13
- * 3. Broken payment flows → Seamless Google Auth + payments
14
- *
15
- * Features:
16
- * - Server-side usage tracking (incognito-proof)
17
- * - Google OAuth authentication
18
- * - Payment integration with DodoPayments
19
- * - User feedback collection
20
- * - Automatic UI management (paywall, auth, status)
21
- * - User context for personalization
22
- *
23
- * @example Simple Usage (Recommended):
24
- * ```javascript
25
- * import { MoneyBar } from '@moneybar.online/moneybar';
26
- *
27
- * const moneyBar = new MoneyBar({
28
- * appId: 'my-pdf-app',
29
- * freeDownloadLimit: 3,
30
- * supabase: { url: 'https://xyz.supabase.co', anonKey: 'anon_key' },
31
- * payment: { productId: 'prod_xyz' }
32
- * });
33
- *
34
- * // Single button - handles all monetization automatically
35
- * moneyBar.attachToButton('#download-btn', (userContext) => {
36
- * // Your action logic here - with user context for personalization
37
- * if (userContext.isPremium) {
38
- * generatePremiumPDF();
39
- * } else {
40
- * generateBasicPDF();
41
- * }
42
- * });
43
- * ```
44
- *
45
- * @example Multiple Buttons:
46
- * ```javascript
47
- * moneyBar.attachToButtons({
48
- * buttons: [
49
- * {
50
- * selector: '#free-btn',
51
- * downloadCallback: (ctx) => downloadFreeTemplate(ctx),
52
- * isPremium: false
53
- * },
54
- * {
55
- * selector: '#premium-btn',
56
- * downloadCallback: (ctx) => downloadPremiumTemplate(ctx),
57
- * isPremium: true
58
- * }
59
- * ]
60
- * });
61
- * ```
62
- */
63
- class MoneyBar {
64
- mergeConfigs(config) {
65
- // Try to get config from window.APP_CONFIG
66
- const windowConfig = typeof window !== 'undefined' ? window.APP_CONFIG : null;
67
- if (!config && !windowConfig) {
68
- throw new Error('MoneyBar: No configuration provided. Either pass config to constructor or set window.APP_CONFIG');
69
- }
70
- // If no constructor config provided, use window config entirely
71
- if (!config) {
72
- return windowConfig;
73
- }
74
- // If no window config, use constructor config entirely
75
- if (!windowConfig) {
76
- return config;
77
- }
78
- // Merge configs: constructor config takes precedence over window config
79
- return {
80
- ...windowConfig,
81
- ...config
82
- };
83
- }
84
- constructor(config) {
85
- this.currentUser = null;
86
- this.userFingerprint = null;
87
- this.eventListeners = new Map();
88
- this.supabaseConnectionFailed = false;
89
- this.paymentConnectionFailed = false;
90
- this.cachedStatus = null;
91
- this.statusCacheTime = 0;
92
- this.STATUS_CACHE_DURATION = 5000; // 5 seconds cache
93
- this.initializationPromise = null;
94
- this.cachedPremiumStatus = null;
95
- this.premiumStatusCacheTime = 0;
96
- // Auto-load from window.APP_CONFIG if no config provided, or merge configs
97
- this.config = this.mergeConfigs(config);
98
- if (this.config.options?.debug) ;
99
- this.validateConfig();
100
- this.initializeSupabase();
101
- this.initializePayment();
102
- this.initializeFingerprint();
103
- this.setupAuthListener();
104
- this.checkPaymentStatus();
105
- }
106
- /**
107
- * Main method to handle download attempts
108
- * Call this from your download button's click handler
109
- */
110
- async handleDownload() {
111
- try {
112
- // Security check: if Supabase connection failed, disable downloads to prevent localStorage bypass
113
- if (this.supabaseConnectionFailed) {
114
- this.config.callbacks?.onError?.(new Error('Server connection required for download verification. Please check your configuration.'));
115
- return;
116
- }
117
- // Security check: if payment configuration is invalid, disable downloads
118
- if (this.config.payment && this.paymentConnectionFailed) {
119
- this.config.callbacks?.onError?.(new Error('Payment configuration error. Please contact support.'));
120
- return;
121
- }
122
- // Check if user is premium first (if authenticated)
123
- if (this.currentUser) {
124
- const isPremium = await this.checkPremiumStatus(this.currentUser.email);
125
- if (isPremium) {
126
- this.config.callbacks?.onPremiumDownload();
127
- return;
128
- }
129
- }
130
- // Check usage limits (works for both authenticated and anonymous users)
131
- const status = await this.getDownloadStatus();
132
- if (status.currentCount >= status.limit) {
133
- // Limit reached - show paywall/limit message
134
- this.config.callbacks?.onLimitReached(status.currentCount, status.limit);
135
- return;
136
- }
137
- // Increment counter and proceed with action
138
- await this.incrementDownloadCount();
139
- this.config.callbacks?.onDownloadAllowed();
140
- // Invalidate cache since count changed
141
- this.cachedStatus = null;
142
- // Check if limit reached after increment
143
- const newStatus = await this.getDownloadStatus();
144
- this.emit('countChanged', { count: newStatus.currentCount, limit: newStatus.limit });
145
- if (newStatus.currentCount >= newStatus.limit) {
146
- // Show paywall for next time
147
- setTimeout(() => {
148
- this.config.callbacks?.onLimitReached(newStatus.currentCount, newStatus.limit);
149
- }, 100);
150
- }
151
- }
152
- catch (error) {
153
- this.handleError(error);
154
- }
155
- }
156
- /**
157
- * Get current download status for the user
158
- */
159
- async getDownloadStatus(forceRefresh = false) {
160
- console.log(`🔍 [INIT] getDownloadStatus called (forceRefresh: ${forceRefresh}) at ${new Date().toISOString()}`);
161
- // Check if we can use cached status
162
- const cacheAge = this.cachedStatus ? Date.now() - this.statusCacheTime : -1;
163
- const canUseCache = !forceRefresh && this.cachedStatus && cacheAge < this.STATUS_CACHE_DURATION;
164
- if (canUseCache) {
165
- console.log(`🔍 [INIT] Using cached status (age: ${cacheAge}ms)`);
166
- return this.cachedStatus;
167
- }
168
- // If there's already an initialization in progress and it's not forced refresh, wait for it
169
- if (!forceRefresh && this.initializationPromise) {
170
- console.log(`🔍 [INIT] Waiting for existing initialization promise`);
171
- return await this.initializationPromise;
172
- }
173
- console.log(`🔍 [INIT] Starting new status fetch (cache age: ${cacheAge}ms)`);
174
- // Create the initialization promise
175
- this.initializationPromise = this.fetchFreshStatus(forceRefresh);
176
- try {
177
- const result = await this.initializationPromise;
178
- console.log(`🔍 [INIT] Status fetch completed successfully`);
179
- return result;
180
- }
181
- finally {
182
- // Clear the promise after completion
183
- this.initializationPromise = null;
184
- }
185
- }
186
- async fetchFreshStatus(forceRefresh) {
187
- try {
188
- let count = 0;
189
- let isPremium = false;
190
- // Only call API if we really need fresh data
191
- if (forceRefresh || !this.cachedStatus) {
192
- // Get download count only if we don't have it cached
193
- count = await this.getDownloadCount();
194
- }
195
- else {
196
- // Use cached count if available to avoid unnecessary API call
197
- count = this.cachedStatus.currentCount;
198
- }
199
- // Check premium status only for authenticated users, and only when needed
200
- if (this.currentUser) {
201
- const premiumCacheValid = this.cachedPremiumStatus !== null && (Date.now() - this.premiumStatusCacheTime) < this.STATUS_CACHE_DURATION;
202
- if (forceRefresh || !premiumCacheValid) {
203
- console.log(`🔥 [SUPABASE API] About to call checkPremiumStatus from getDownloadStatus (forceRefresh: ${forceRefresh}, cacheValid: ${premiumCacheValid})`);
204
- isPremium = await this.checkPremiumStatus(this.currentUser.email);
205
- // Update cache
206
- this.cachedPremiumStatus = isPremium;
207
- this.premiumStatusCacheTime = Date.now();
208
- }
209
- else {
210
- // Use cached premium status to avoid unnecessary API call
211
- isPremium = this.cachedPremiumStatus; // We know it's not null because premiumCacheValid is true
212
- console.log(`🔍 [CACHE] Using cached premium status from getDownloadStatus: ${isPremium}`);
213
- }
214
- }
215
- else {
216
- // Unauthenticated users cannot be premium
217
- isPremium = false;
218
- }
219
- const status = {
220
- currentCount: count,
221
- limit: this.config.freeDownloadLimit,
222
- isPremium,
223
- isAuthenticated: !!this.currentUser,
224
- remaining: Math.max(0, this.config.freeDownloadLimit - count)
225
- };
226
- // Cache the status
227
- this.cachedStatus = status;
228
- this.statusCacheTime = Date.now();
229
- return status;
230
- }
231
- catch (error) {
232
- this.handleError(error);
233
- // Return safe defaults on error
234
- const errorStatus = {
235
- currentCount: 0,
236
- limit: this.config.freeDownloadLimit,
237
- isPremium: false,
238
- isAuthenticated: false,
239
- remaining: this.config.freeDownloadLimit
240
- };
241
- // Cache error status for short time to avoid repeated failures
242
- this.cachedStatus = errorStatus;
243
- this.statusCacheTime = Date.now();
244
- return errorStatus;
245
- }
246
- }
247
- /**
248
- * Creates a UserContext object with current user information
249
- */
250
- async getUserContext() {
251
- const status = await this.getDownloadStatus();
252
- return {
253
- isPremium: status.isPremium,
254
- isAuthenticated: status.isAuthenticated,
255
- email: this.currentUser?.email,
256
- name: this.currentUser?.user_metadata?.full_name || this.currentUser?.user_metadata?.name,
257
- currentCount: status.currentCount,
258
- remaining: status.remaining,
259
- limit: status.limit,
260
- user: this.currentUser
261
- };
262
- }
263
- /**
264
- * Manually trigger Google sign-in
265
- */
266
- async signIn() {
267
- try {
268
- const { error } = await this.supabase.auth.signInWithOAuth({
269
- provider: 'google',
270
- options: {
271
- redirectTo: `${window.location.origin}${window.location.pathname}`
272
- }
273
- });
274
- if (error)
275
- throw error;
276
- }
277
- catch (error) {
278
- this.handleError(error);
279
- }
280
- }
281
- /**
282
- * Sign out current user
283
- */
284
- async signOut() {
285
- try {
286
- await this.supabase.auth.signOut();
287
- this.currentUser = null;
288
- this.emit('authChanged', { user: null, isPremium: false });
289
- }
290
- catch (error) {
291
- this.handleError(error);
292
- }
293
- }
294
- /**
295
- * Create payment for premium upgrade
296
- */
297
- async createPayment() {
298
- if (!this.currentUser) {
299
- throw new Error('User must be signed in to create payment');
300
- }
301
- if (!this.config.payment) {
302
- throw new Error('Payment configuration not provided');
303
- }
304
- const requestBody = {
305
- email: this.currentUser.email,
306
- product_id: this.config.payment.productId,
307
- mode: this.config.payment.mode || 'test',
308
- app_id: this.config.appId,
309
- return_url: `${window.location.origin}${window.location.pathname}?payment=success`
310
- };
311
- console.log(`🔥 [SUPABASE API] createPayment called for email: ${this.currentUser.email} | Time: ${new Date().toISOString()}`);
312
- try {
313
- const response = await fetch(`${this.config.supabase.url}/functions/v1/create-payment`, {
314
- method: 'POST',
315
- headers: {
316
- 'Content-Type': 'application/json',
317
- 'Authorization': `Bearer ${this.config.supabase.anonKey}`
318
- },
319
- body: JSON.stringify(requestBody)
320
- });
321
- console.log(`🔥 [SUPABASE API] createPayment response: ${response.status}`);
322
- if (this.config.options?.debug) {
323
- //console.log('🔍 DEBUG: createPayment response status:', response.status);
324
- }
325
- if (!response.ok) {
326
- const errorText = await response.text();
327
- if (this.config.options?.debug) {
328
- console.error('🔍 DEBUG: createPayment error response:', errorText);
329
- }
330
- let errorData;
331
- try {
332
- errorData = JSON.parse(errorText);
333
- }
334
- catch {
335
- errorData = { error: errorText };
336
- }
337
- // Check if this is a product ID error (invalid config)
338
- if (errorText.includes('404') || errorText.includes('could not be found')) {
339
- this.paymentConnectionFailed = true;
340
- if (this.config.options?.debug) {
341
- console.warn('Invalid payment product ID detected, disabling downloads');
342
- }
343
- // Update UI to show disabled state
344
- this.updateStatusDisplays();
345
- }
346
- throw new Error(errorData.error || 'Payment creation failed');
347
- }
348
- const result = await response.json();
349
- if (this.config.options?.debug) {
350
- //console.log('🔍 DEBUG: createPayment success response:', result);
351
- }
352
- return result;
353
- }
354
- catch (error) {
355
- this.handleError(error);
356
- return null;
357
- }
358
- }
359
- /**
360
- * Simplified API: Attach download limiting to a single button
361
- * Handles all UI logic automatically (paywall, auth, payment flow)
362
- */
363
- attachToButton(selector, downloadCallback) {
364
- //console.log('🎨 [THEME DEBUG] attachToButton called');
365
- //console.log('🎨 [THEME DEBUG] Full config:', JSON.stringify(this.config, null, 2));
366
- const button = document.querySelector(selector);
367
- if (!button) {
368
- throw new Error(`Button not found: ${selector}`);
369
- }
370
- // Store original button text (for potential future use)
371
- // const originalText = button.textContent || 'Download';
372
- // Create and inject UI elements
373
- this.injectBaseStyles();
374
- this.createTitleBar(); // Always create title bar first
375
- this.createPaywallModal();
376
- this.createSuccessModal();
377
- this.createAuthUI();
378
- this.createStatusDisplay();
379
- // Set up button click handler
380
- // Mark button as attached by LeadFast
381
- button.setAttribute('data-leadfast-attached', 'true');
382
- button.onclick = async (e) => {
383
- e.preventDefault();
384
- await this.handleButtonClick(downloadCallback);
385
- };
386
- // Update UI based on auth state
387
- this.setupUIUpdates();
388
- }
389
- /**
390
- * Simplified API: Attach download limiting to multiple buttons
391
- * Each button can have different download callbacks and premium status
392
- */
393
- attachToButtons(config) {
394
- this.injectBaseStyles();
395
- this.createTitleBar(); // Always create title bar first
396
- this.createPaywallModal();
397
- this.createSuccessModal();
398
- this.createAuthUI();
399
- config.buttons.forEach(buttonConfig => {
400
- const button = document.querySelector(buttonConfig.selector);
401
- if (!button) {
402
- console.warn(`Button not found: ${buttonConfig.selector}`);
403
- return;
404
- }
405
- // Store original text for potential future use
406
- // const originalText = button.textContent || 'Download';
407
- // Set up click handler - all buttons use the same logic now
408
- // Mark button as attached by LeadFast
409
- button.setAttribute('data-leadfast-attached', 'true');
410
- button.onclick = async (e) => {
411
- e.preventDefault();
412
- await this.handleButtonClick(buttonConfig.downloadCallback);
413
- };
414
- this.setupUIUpdates();
415
- });
416
- // Add global status display
417
- this.createGlobalStatusDisplay();
418
- }
419
- async handleButtonClick(downloadCallback) {
420
- // Prevent rapid clicks/race conditions
421
- const button = document.querySelector('[data-leadfast-attached="true"]');
422
- if (button && button.disabled) {
423
- console.log('⚠️ Button click ignored - operation already in progress');
424
- return;
425
- }
426
- if (button) {
427
- button.disabled = true;
428
- button.style.opacity = '0.6';
429
- }
430
- try {
431
- await this.handleButtonClickInternal(downloadCallback);
432
- }
433
- finally {
434
- // Re-enable button
435
- if (button) {
436
- button.disabled = false;
437
- button.style.opacity = '1';
438
- }
439
- }
440
- }
441
- async handleButtonClickInternal(downloadCallback) {
442
- // const clickTime = Date.now();
443
- // console.log(`🕐 [TIMING] Button click started at: ${new Date(clickTime).toISOString()}`);
444
- // Security check: if Supabase connection failed, disable downloads to prevent localStorage bypass
445
- if (this.supabaseConnectionFailed) {
446
- // console.log(`🕐 [TIMING] Connection failed check: ${Date.now() - clickTime}ms`);
447
- this.showConnectionError();
448
- return;
449
- }
450
- // Security check: if payment configuration is invalid, disable downloads
451
- if (this.config.payment && this.paymentConnectionFailed) {
452
- // console.log(`🕐 [TIMING] Payment config failed check: ${Date.now() - clickTime}ms`);
453
- this.showPaymentConfigError();
454
- return;
455
- }
456
- // Check cache status
457
- const cacheValid = this.cachedStatus && (Date.now() - this.statusCacheTime) < this.STATUS_CACHE_DURATION;
458
- // console.log(`🕐 [CACHE] Cache valid: ${cacheValid}, age: ${this.cachedStatus ? Date.now() - this.statusCacheTime : 'no cache'}ms`);
459
- // console.log(`🕐 [CACHE] Cached status:`, this.cachedStatus);
460
- // const statusStartTime = Date.now();
461
- // Use cached status if available (since it's already displayed in title bar)
462
- const status = cacheValid
463
- ? this.cachedStatus
464
- : await this.getDownloadStatus();
465
- // console.log(`🕐 [TIMING] Status check completed: ${Date.now() - statusStartTime}ms (total: ${Date.now() - clickTime}ms)`);
466
- // console.log(`🕐 [STATUS] Final status:`, status);
467
- // Check if user is premium first (quick check from cached status)
468
- if (status.isPremium) {
469
- // console.log(`🕐 [TIMING] Premium user - callback executed: ${Date.now() - clickTime}ms`);
470
- // Get user context for premium users too
471
- const userContext = await this.getUserContext();
472
- // Check if callback expects user context parameter
473
- if (downloadCallback.length > 0) {
474
- // Callback expects user context parameter
475
- downloadCallback(userContext);
476
- }
477
- else {
478
- // Legacy callback with no parameters
479
- downloadCallback();
480
- }
481
- return;
482
- }
483
- // Quick limit check from cached status - show paywall immediately if needed
484
- if (status.currentCount >= status.limit) {
485
- // console.log(`🕐 [TIMING] Limit reached (${status.currentCount}/${status.limit}) - showing paywall: ${Date.now() - clickTime}ms`);
486
- // Limit reached - show paywall instantly (no additional API calls)
487
- // const paywallStartTime = Date.now();
488
- this.showPaywallInstant(status);
489
- // console.log(`🕐 [TIMING] Paywall shown: ${Date.now() - paywallStartTime}ms (total: ${Date.now() - clickTime}ms)`);
490
- return;
491
- }
492
- // console.log(`🕐 [TIMING] Limit not reached (${status.currentCount}/${status.limit}) - proceeding with action`);
493
- // Allow action and increment counter
494
- // const incrementStartTime = Date.now();
495
- // Execute user's function first - only increment count if it succeeds
496
- try {
497
- // Check if callback expects user context parameter
498
- if (downloadCallback.length > 0) {
499
- // Get user context BEFORE increment for callback
500
- const userContext = await this.getUserContext();
501
- // For non-premium users, simulate the increment so user context matches UI
502
- if (!userContext.isPremium) {
503
- userContext.currentCount += 1;
504
- userContext.remaining = Math.max(0, userContext.limit - userContext.currentCount);
505
- }
506
- // Callback expects user context parameter
507
- downloadCallback(userContext);
508
- }
509
- else {
510
- // Legacy callback with no parameters
511
- downloadCallback();
512
- }
513
- // Double-check limit before increment (race condition protection)
514
- const freshStatus = await this.getDownloadStatus(true); // Force refresh
515
- if (freshStatus.currentCount >= freshStatus.limit) {
516
- console.warn(`⚠️ Limit reached during execution (${freshStatus.currentCount}/${freshStatus.limit}) - canceling increment`);
517
- // User reached limit while their function was executing
518
- alert('⚠️ You reached the limit while this action was processing. No attempt was counted.');
519
- return;
520
- }
521
- // Only increment count after successful execution - with limit check
522
- const newCount = await this.incrementDownloadCount();
523
- // Double-check: if server returned count exceeding limit, something went wrong
524
- if (newCount > this.config.freeDownloadLimit) {
525
- console.error(`⚠️ Server returned count (${newCount}) exceeding limit (${this.config.freeDownloadLimit})`);
526
- // Don't update UI with invalid state
527
- return;
528
- }
529
- // console.log(`🕐 [TIMING] Count incremented: ${Date.now() - incrementStartTime}ms`);
530
- // Show success message only if explicitly enabled in config
531
- if (this.config.successMessage?.enabled === true) {
532
- const title = this.config.successMessage?.title || 'Action Completed!';
533
- const message = this.config.successMessage?.message || 'Your action completed successfully!';
534
- this.showSuccess(title, message);
535
- }
536
- }
537
- catch (error) {
538
- console.error('User function failed:', error);
539
- // Don't increment count on error - user shouldn't lose an attempt
540
- alert('Action failed. Please check the console for details. No attempt was counted.');
541
- return; // Exit early, don't update UI
542
- }
543
- // Update UI with fresh status (invalidate cache since count changed)
544
- // console.log(`🕐 [CACHE] Invalidating cache due to count change (was: ${this.cachedStatus ? 'cached' : 'null'})`);
545
- this.cachedStatus = null;
546
- this.updateStatusDisplays();
547
- // console.log(`🕐 [TIMING] Button click completed: ${Date.now() - clickTime}ms`);
548
- }
549
- injectBaseStyles() {
550
- //console.log('🎨 [THEME DEBUG] injectBaseStyles called');
551
- if (document.getElementById('lead-fast-styles')) {
552
- //console.log('🎨 [THEME DEBUG] Styles already injected, skipping');
553
- return;
554
- }
555
- // Inject DaisyUI CDN if theme is specified
556
- if (this.config.theme?.name) {
557
- //console.log('🎨 [THEME DEBUG] Theme specified, calling injectDaisyUI');
558
- this.injectDaisyUI();
559
- }
560
- const styles = document.createElement('style');
561
- styles.id = 'lead-fast-styles';
562
- const primaryColor = this.config.theme?.primaryColor || '#3182ce';
563
- styles.textContent = `
564
- /* User Profile Card - Top Right */
565
- .lead-fast-profile {
566
- position: fixed;
567
- top: 20px;
568
- left: 50%;
569
- transform: translateX(-50%);
570
- z-index: 1000;
571
- font-family: system-ui, -apple-system, sans-serif;
572
- width: 90%;
573
- max-width: 1200px;
574
- }
575
-
576
- .lead-fast-title-bar {
577
- background: rgba(250, 247, 245, 0.9) !important;
578
- border: 1px solid rgba(231, 226, 223, 0.6) !important;
579
- color: #291334 !important;
580
- border-radius: 16px;
581
- padding: 12px 24px;
582
- box-shadow: 0 8px 32px rgb(0 0 0 / 0.1), 0 2px 8px rgb(0 0 0 / 0.05);
583
- backdrop-filter: blur(20px);
584
- display: flex;
585
- align-items: center;
586
- justify-content: space-between;
587
- min-height: 60px;
588
- font-family: system-ui, -apple-system, sans-serif;
589
- }
590
-
591
- /* Theme variations for floating title bar */
592
- [data-theme="bumblebee"] .lead-fast-title-bar {
593
- background: rgba(255, 248, 220, 0.9) !important;
594
- border-color: rgba(254, 215, 170, 0.6) !important;
595
- color: #1c1917 !important;
596
- }
597
-
598
- [data-theme="garden"] .lead-fast-title-bar {
599
- background: rgba(240, 253, 244, 0.9) !important;
600
- border-color: rgba(134, 239, 172, 0.6) !important;
601
- color: #14532d !important;
602
- }
603
-
604
- [data-theme="emerald"] .lead-fast-title-bar {
605
- background: rgba(236, 253, 245, 0.9) !important;
606
- border-color: rgba(167, 243, 208, 0.6) !important;
607
- color: #065f46 !important;
608
- }
609
-
610
- [data-theme="corporate"] .lead-fast-title-bar {
611
- background: rgba(248, 250, 252, 0.9) !important;
612
- border-color: rgba(226, 232, 240, 0.6) !important;
613
- color: #1e293b !important;
614
- }
615
-
616
- [data-theme="dark"] .lead-fast-title-bar {
617
- background: rgba(31, 41, 55, 0.9) !important;
618
- border-color: rgba(55, 65, 81, 0.6) !important;
619
- color: #f9fafb !important;
620
- }
621
-
622
- [data-theme="cyberpunk"] .lead-fast-title-bar {
623
- background: rgba(0, 20, 36, 0.9) !important;
624
- border-color: rgba(7, 89, 133, 0.6) !important;
625
- color: #0ea5e9 !important;
626
- box-shadow: 0 8px 32px rgba(14, 165, 233, 0.2), 0 2px 8px rgba(14, 165, 233, 0.1);
627
- }
628
-
629
- [data-theme="valentine"] .lead-fast-title-bar {
630
- background: rgba(233, 30, 122, 0.15) !important;
631
- border-color: rgba(233, 30, 122, 0.6) !important;
632
- color: #831843 !important;
633
- }
634
-
635
- [data-theme="synthwave"] .lead-fast-title-bar {
636
- background: rgba(32, 20, 64, 0.9) !important;
637
- border-color: rgba(186, 85, 211, 0.6) !important;
638
- color: #ff00ff !important;
639
- box-shadow: 0 8px 32px rgba(255, 0, 255, 0.2), 0 2px 8px rgba(255, 0, 255, 0.1);
640
- }
641
-
642
- [data-theme="dracula"] .lead-fast-title-bar {
643
- background: rgba(40, 42, 54, 0.9) !important;
644
- border-color: rgba(98, 114, 164, 0.6) !important;
645
- color: #f8f8f2 !important;
646
- }
647
-
648
- [data-theme="halloween"] .lead-fast-title-bar {
649
- background: rgba(26, 26, 26, 0.9) !important;
650
- border-color: rgba(255, 165, 0, 0.6) !important;
651
- color: #ff6600 !important;
652
- }
653
-
654
- [data-theme="forest"] .lead-fast-title-bar {
655
- background: rgba(23, 46, 23, 0.9) !important;
656
- border-color: rgba(34, 197, 94, 0.6) !important;
657
- color: #22c55e !important;
658
- }
659
-
660
- [data-theme="luxury"] .lead-fast-title-bar {
661
- background: rgba(9, 9, 11, 0.9) !important;
662
- border-color: rgba(212, 175, 55, 0.6) !important;
663
- color: #d4af37 !important;
664
- }
665
-
666
- [data-theme="night"] .lead-fast-title-bar {
667
- background: rgba(15, 23, 42, 0.9) !important;
668
- border-color: rgba(30, 58, 138, 0.6) !important;
669
- color: #60a5fa !important;
670
- }
671
-
672
- [data-theme="light"] .lead-fast-title-bar {
673
- background: rgba(255, 255, 255, 0.9) !important;
674
- border-color: rgba(229, 231, 235, 0.6) !important;
675
- color: #1f2937 !important;
676
- }
677
-
678
- [data-theme="cupcake"] .lead-fast-title-bar {
679
- background: rgba(250, 235, 215, 0.9) !important;
680
- border-color: rgba(219, 185, 156, 0.6) !important;
681
- color: #8b4513 !important;
682
- }
683
-
684
- [data-theme="retro"] .lead-fast-title-bar {
685
- background: rgba(212, 165, 116, 0.9) !important;
686
- border-color: rgba(185, 144, 102, 0.6) !important;
687
- color: #5d4037 !important;
688
- }
689
-
690
- [data-theme="aqua"] .lead-fast-title-bar {
691
- background: rgba(240, 253, 250, 0.9) !important;
692
- border-color: rgba(125, 211, 252, 0.6) !important;
693
- color: #155e75 !important;
694
- }
695
-
696
- [data-theme="lofi"] .lead-fast-title-bar {
697
- background: rgba(248, 248, 248, 0.9) !important;
698
- border-color: rgba(68, 68, 68, 0.6) !important;
699
- color: #1a1a1a !important;
700
- }
701
-
702
- [data-theme="pastel"] .lead-fast-title-bar {
703
- background: rgba(254, 251, 255, 0.9) !important;
704
- border-color: rgba(209, 196, 233, 0.6) !important;
705
- color: #7c3aed !important;
706
- }
707
-
708
- [data-theme="fantasy"] .lead-fast-title-bar {
709
- background: rgba(255, 247, 237, 0.9) !important;
710
- border-color: rgba(249, 168, 212, 0.6) !important;
711
- color: #be185d !important;
712
- }
713
-
714
- [data-theme="wireframe"] .lead-fast-title-bar {
715
- background: rgba(223, 223, 223, 0.9) !important;
716
- border-color: rgba(0, 0, 0, 0.3) !important;
717
- color: #000000 !important;
718
- }
719
-
720
- [data-theme="black"] .lead-fast-title-bar {
721
- background: rgba(0, 0, 0, 0.9) !important;
722
- border-color: rgba(55, 55, 55, 0.6) !important;
723
- color: #ffffff !important;
724
- }
725
-
726
- [data-theme="cmyk"] .lead-fast-title-bar {
727
- background: rgba(0, 255, 255, 0.9) !important;
728
- border-color: rgba(255, 0, 255, 0.6) !important;
729
- color: #000000 !important;
730
- }
731
-
732
- [data-theme="autumn"] .lead-fast-title-bar {
733
- background: rgba(139, 69, 19, 0.9) !important;
734
- border-color: rgba(255, 140, 0, 0.6) !important;
735
- color: #ff8c00 !important;
736
- }
737
-
738
- [data-theme="business"] .lead-fast-title-bar {
739
- background: rgba(29, 78, 216, 0.9) !important;
740
- border-color: rgba(59, 130, 246, 0.6) !important;
741
- color: #3b82f6 !important;
742
- }
743
-
744
- [data-theme="acid"] .lead-fast-title-bar {
745
- background: rgba(255, 255, 0, 0.9) !important;
746
- border-color: rgba(255, 0, 255, 0.6) !important;
747
- color: #000000 !important;
748
- }
749
-
750
- [data-theme="lemonade"] .lead-fast-title-bar {
751
- background: rgba(255, 255, 224, 0.9) !important;
752
- border-color: rgba(34, 197, 94, 0.6) !important;
753
- color: #15803d !important;
754
- }
755
-
756
- [data-theme="coffee"] .lead-fast-title-bar {
757
- background: rgba(101, 67, 33, 0.9) !important;
758
- border-color: rgba(160, 82, 45, 0.6) !important;
759
- color: #d2b48c !important;
760
- }
761
-
762
- [data-theme="winter"] .lead-fast-title-bar {
763
- background: rgba(248, 250, 252, 0.9) !important;
764
- border-color: rgba(59, 130, 246, 0.6) !important;
765
- color: #1e40af !important;
766
- }
767
-
768
- .lead-fast-title-section {
769
- display: flex;
770
- align-items: center;
771
- gap: 16px;
772
- }
773
-
774
- .lead-fast-logo {
775
- font-size: 20px;
776
- font-weight: 700;
777
- display: flex;
778
- align-items: center;
779
- gap: 8px;
780
- color: inherit;
781
- text-decoration: none;
782
- }
783
-
784
- .lead-fast-logo img {
785
- width: 32px;
786
- height: 32px;
787
- border-radius: 6px;
788
- }
789
-
790
- .lead-fast-nav {
791
- display: flex;
792
- align-items: center;
793
- gap: 32px;
794
- margin-left: 24px;
795
- }
796
-
797
- .lead-fast-nav-link {
798
- color: inherit;
799
- text-decoration: none;
800
- font-weight: 500;
801
- font-size: 14px;
802
- opacity: 0.8;
803
- transition: all 0.2s;
804
- }
805
-
806
- .lead-fast-nav-link:hover {
807
- opacity: 1;
808
- text-decoration: none;
809
- }
810
-
811
- .lead-fast-user-section {
812
- display: flex;
813
- align-items: center;
814
- gap: 12px;
815
- }
816
-
817
- .lead-fast-avatar {
818
- width: 36px;
819
- height: 36px;
820
- border-radius: 50%;
821
- background: linear-gradient(135deg, ${primaryColor}, #4f46e5);
822
- display: flex;
823
- align-items: center;
824
- justify-content: center;
825
- color: white;
826
- font-weight: 600;
827
- font-size: 14px;
828
- }
829
-
830
- .lead-fast-user-info {
831
- display: flex;
832
- flex-direction: column;
833
- align-items: flex-start;
834
- gap: 2px;
835
- }
836
-
837
- .lead-fast-user-email {
838
- color: inherit !important;
839
- font-size: 13px;
840
- font-weight: 500;
841
- line-height: 1;
842
- }
843
-
844
- .lead-fast-user-status {
845
- display: flex;
846
- align-items: center;
847
- gap: 6px;
848
- }
849
-
850
- .lead-fast-badge {
851
- padding: 2px 6px;
852
- border-radius: 12px;
853
- font-size: 10px;
854
- font-weight: 600;
855
- text-transform: uppercase;
856
- letter-spacing: 0.025em;
857
- line-height: 1;
858
- }
859
-
860
- .lead-fast-badge.premium {
861
- background: #10b981 !important;
862
- color: #ffffff !important;
863
- }
864
-
865
- .lead-fast-badge.free {
866
- background: #65c3c8 !important;
867
- color: #291334 !important;
868
- }
869
-
870
- [data-theme="dark"] .lead-fast-badge.premium {
871
- background: #059669 !important;
872
- color: #ffffff !important;
873
- }
874
-
875
- [data-theme="dark"] .lead-fast-badge.free {
876
- background: #374151 !important;
877
- color: #f9fafb !important;
878
- }
879
-
880
- .lead-fast-count {
881
- font-size: 10px;
882
- color: inherit !important;
883
- opacity: 0.7;
884
- line-height: 1;
885
- }
886
-
887
- .lead-fast-signout {
888
- background: rgba(0, 0, 0, 0.1) !important;
889
- border: none;
890
- color: inherit !important;
891
- cursor: pointer;
892
- padding: 6px 12px;
893
- border-radius: 8px;
894
- transition: all 0.2s;
895
- font-size: 11px;
896
- font-weight: 500;
897
- margin-left: 8px;
898
- }
899
-
900
- [data-theme="dark"] .lead-fast-signout {
901
- background: rgba(255, 255, 255, 0.1) !important;
902
- }
903
-
904
- [data-theme="cyberpunk"] .lead-fast-signout {
905
- background: rgba(14, 165, 233, 0.2) !important;
906
- }
907
-
908
- .lead-fast-signout:hover {
909
- background: rgba(0, 0, 0, 0.2) !important;
910
- transform: translateY(-1px);
911
- }
912
-
913
- [data-theme="dark"] .lead-fast-signout:hover {
914
- background: rgba(255, 255, 255, 0.2) !important;
915
- }
916
-
917
- [data-theme="cyberpunk"] .lead-fast-signout:hover {
918
- background: rgba(14, 165, 233, 0.3) !important;
919
- }
920
-
921
- .lead-fast-branding {
922
- position: absolute;
923
- bottom: -20px;
924
- left: 24px;
925
- font-size: 9px;
926
- color: inherit !important;
927
- opacity: 0.4;
928
- font-weight: 500;
929
- letter-spacing: 0.05em;
930
- text-transform: lowercase;
931
- background: rgba(255, 255, 255, 0.8);
932
- padding: 2px 6px;
933
- border-radius: 4px;
934
- backdrop-filter: blur(8px);
935
- }
936
-
937
- [data-theme="dark"] .lead-fast-branding {
938
- background: rgba(0, 0, 0, 0.6);
939
- }
940
-
941
- [data-theme="cyberpunk"] .lead-fast-branding {
942
- background: rgba(0, 20, 36, 0.8);
943
- }
944
-
945
- /* Modal Theming */
946
- .download-limiter-modal {
947
- display: none;
948
- position: fixed;
949
- top: 0;
950
- left: 0;
951
- width: 100%;
952
- height: 100%;
953
- background: rgba(0,0,0,0.5);
954
- z-index: 9999;
955
- align-items: center;
956
- justify-content: center;
957
- }
958
- .download-limiter-modal.show { display: flex; }
959
-
960
- .download-limiter-content {
961
- background: #faf7f5 !important;
962
- color: #291334 !important;
963
- padding: 2rem;
964
- border-radius: 12px;
965
- max-width: 400px;
966
- text-align: center;
967
- box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
968
- border: 1px solid #e7e2df !important;
969
- font-family: system-ui, -apple-system, sans-serif;
970
- }
971
-
972
- [data-theme="dark"] .download-limiter-content {
973
- background: #1f2937 !important;
974
- color: #f9fafb !important;
975
- border-color: #374151 !important;
976
- }
977
-
978
- [data-theme="cyberpunk"] .download-limiter-content {
979
- background: #001424 !important;
980
- color: #0ea5e9 !important;
981
- border-color: #075985 !important;
982
- }
983
-
984
- [data-theme="valentine"] .download-limiter-content {
985
- background: rgba(233, 30, 122, 0.05) !important;
986
- color: #831843 !important;
987
- border-color: #e91e7a !important;
988
- }
989
-
990
- [data-theme="bumblebee"] .download-limiter-content {
991
- background: rgba(255, 248, 220, 0.95) !important;
992
- color: #1c1917 !important;
993
- border-color: rgba(254, 215, 170, 0.8) !important;
994
- }
995
-
996
- [data-theme="garden"] .download-limiter-content {
997
- background: rgba(240, 253, 244, 0.95) !important;
998
- color: #14532d !important;
999
- border-color: rgba(134, 239, 172, 0.8) !important;
1000
- }
1001
-
1002
- [data-theme="emerald"] .download-limiter-content {
1003
- background: rgba(236, 253, 245, 0.95) !important;
1004
- color: #065f46 !important;
1005
- border-color: rgba(167, 243, 208, 0.8) !important;
1006
- }
1007
-
1008
- [data-theme="corporate"] .download-limiter-content {
1009
- background: rgba(248, 250, 252, 0.95) !important;
1010
- color: #1e293b !important;
1011
- border-color: rgba(226, 232, 240, 0.8) !important;
1012
- }
1013
-
1014
- [data-theme="forest"] .download-limiter-content {
1015
- background: rgba(23, 46, 23, 0.95) !important;
1016
- color: #22c55e !important;
1017
- border-color: rgba(34, 197, 94, 0.8) !important;
1018
- }
1019
-
1020
- [data-theme="halloween"] .download-limiter-content {
1021
- background: rgba(26, 26, 26, 0.95) !important;
1022
- color: #ff6500 !important;
1023
- border-color: rgba(255, 165, 0, 0.3) !important;
1024
- }
1025
-
1026
- [data-theme="synthwave"] .download-limiter-content {
1027
- background: rgba(32, 20, 64, 0.95) !important;
1028
- color: #ba55d3 !important;
1029
- border-color: rgba(186, 85, 211, 0.3) !important;
1030
- }
1031
-
1032
- [data-theme="dracula"] .download-limiter-content {
1033
- background: rgba(40, 42, 54, 0.95) !important;
1034
- color: #f8f8f2 !important;
1035
- border-color: rgba(98, 114, 164, 0.3) !important;
1036
- }
1037
-
1038
- [data-theme="luxury"] .download-limiter-content {
1039
- background: rgba(9, 9, 11, 0.95) !important;
1040
- color: #d4af37 !important;
1041
- border-color: rgba(212, 175, 55, 0.3) !important;
1042
- }
1043
-
1044
- [data-theme="night"] .download-limiter-content {
1045
- background: rgba(15, 23, 42, 0.95) !important;
1046
- color: #1e40af !important;
1047
- border-color: rgba(30, 58, 138, 0.3) !important;
1048
- }
1049
-
1050
- [data-theme="light"] .download-limiter-content {
1051
- background: rgba(255, 255, 255, 0.95) !important;
1052
- color: #1f2937 !important;
1053
- border-color: rgba(229, 231, 235, 0.8) !important;
1054
- }
1055
-
1056
- [data-theme="cupcake"] .download-limiter-content {
1057
- background: rgba(250, 235, 215, 0.95) !important;
1058
- color: #8b4513 !important;
1059
- border-color: rgba(219, 185, 156, 0.8) !important;
1060
- }
1061
-
1062
- [data-theme="retro"] .download-limiter-content {
1063
- background: rgba(212, 165, 116, 0.95) !important;
1064
- color: #5d4037 !important;
1065
- border-color: rgba(185, 144, 102, 0.8) !important;
1066
- }
1067
-
1068
- [data-theme="aqua"] .download-limiter-content {
1069
- background: rgba(240, 253, 250, 0.95) !important;
1070
- color: #155e75 !important;
1071
- border-color: rgba(125, 211, 252, 0.8) !important;
1072
- }
1073
-
1074
- [data-theme="lofi"] .download-limiter-content {
1075
- background: rgba(248, 248, 248, 0.95) !important;
1076
- color: #1a1a1a !important;
1077
- border-color: rgba(68, 68, 68, 0.8) !important;
1078
- }
1079
-
1080
- [data-theme="pastel"] .download-limiter-content {
1081
- background: rgba(254, 251, 255, 0.95) !important;
1082
- color: #7c3aed !important;
1083
- border-color: rgba(209, 196, 233, 0.8) !important;
1084
- }
1085
-
1086
- [data-theme="fantasy"] .download-limiter-content {
1087
- background: rgba(255, 247, 237, 0.95) !important;
1088
- color: #be185d !important;
1089
- border-color: rgba(249, 168, 212, 0.8) !important;
1090
- }
1091
-
1092
- [data-theme="wireframe"] .download-limiter-content {
1093
- background: rgba(255, 255, 255, 0.95) !important;
1094
- color: #000000 !important;
1095
- border-color: rgba(0, 0, 0, 0.3) !important;
1096
- }
1097
-
1098
- [data-theme="black"] .download-limiter-content {
1099
- background: rgba(0, 0, 0, 0.95) !important;
1100
- color: #ffffff !important;
1101
- border-color: rgba(55, 55, 55, 0.8) !important;
1102
- }
1103
-
1104
- [data-theme="cmyk"] .download-limiter-content {
1105
- background: rgba(0, 255, 255, 0.95) !important;
1106
- color: #000000 !important;
1107
- border-color: rgba(255, 0, 255, 0.8) !important;
1108
- }
1109
-
1110
- [data-theme="autumn"] .download-limiter-content {
1111
- background: rgba(139, 69, 19, 0.95) !important;
1112
- color: #ff8c00 !important;
1113
- border-color: rgba(255, 140, 0, 0.8) !important;
1114
- }
1115
-
1116
- [data-theme="business"] .download-limiter-content {
1117
- background: rgba(29, 78, 216, 0.95) !important;
1118
- color: #3b82f6 !important;
1119
- border-color: rgba(59, 130, 246, 0.8) !important;
1120
- }
1121
-
1122
- [data-theme="acid"] .download-limiter-content {
1123
- background: rgba(255, 255, 0, 0.95) !important;
1124
- color: #000000 !important;
1125
- border-color: rgba(255, 0, 255, 0.8) !important;
1126
- }
1127
-
1128
- [data-theme="lemonade"] .download-limiter-content {
1129
- background: rgba(255, 255, 224, 0.95) !important;
1130
- color: #15803d !important;
1131
- border-color: rgba(34, 197, 94, 0.8) !important;
1132
- }
1133
-
1134
- [data-theme="coffee"] .download-limiter-content {
1135
- background: rgba(101, 67, 33, 0.95) !important;
1136
- color: #d2b48c !important;
1137
- border-color: rgba(160, 82, 45, 0.8) !important;
1138
- }
1139
-
1140
- [data-theme="winter"] .download-limiter-content {
1141
- background: rgba(248, 250, 252, 0.95) !important;
1142
- color: #1e40af !important;
1143
- border-color: rgba(59, 130, 246, 0.8) !important;
1144
- }
1145
-
1146
- .download-limiter-content h2 {
1147
- color: inherit !important;
1148
- margin: 0 0 1rem 0;
1149
- font-size: 1.5rem;
1150
- font-weight: 600;
1151
- }
1152
- .download-limiter-content p {
1153
- color: inherit !important;
1154
- margin: 0 0 1.5rem 0;
1155
- line-height: 1.6;
1156
- }
1157
- .download-limiter-signin-btn {
1158
- display: inline-flex;
1159
- align-items: center;
1160
- gap: 8px;
1161
- background: #65c3c8 !important;
1162
- color: #291334 !important;
1163
- border: none;
1164
- padding: 12px 20px;
1165
- border-radius: 8px;
1166
- font-size: 14px;
1167
- font-weight: 500;
1168
- cursor: pointer;
1169
- text-decoration: none;
1170
- transition: all 0.2s;
1171
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
1172
- }
1173
-
1174
- [data-theme="dark"] .download-limiter-signin-btn {
1175
- background: #3b82f6 !important;
1176
- color: #ffffff !important;
1177
- }
1178
-
1179
- [data-theme="cyberpunk"] .download-limiter-signin-btn {
1180
- background: #f59e0b !important;
1181
- color: #000000 !important;
1182
- }
1183
-
1184
- [data-theme="valentine"] .download-limiter-signin-btn {
1185
- background: #e91e7a !important;
1186
- color: #ffffff !important;
1187
- }
1188
-
1189
- [data-theme="bumblebee"] .download-limiter-signin-btn {
1190
- background: #fbbf24 !important;
1191
- color: #1c1917 !important;
1192
- }
1193
-
1194
- [data-theme="garden"] .download-limiter-signin-btn {
1195
- background: #22c55e !important;
1196
- color: #ffffff !important;
1197
- }
1198
-
1199
- [data-theme="emerald"] .download-limiter-signin-btn {
1200
- background: #10b981 !important;
1201
- color: #ffffff !important;
1202
- }
1203
-
1204
- [data-theme="corporate"] .download-limiter-signin-btn {
1205
- background: #3b82f6 !important;
1206
- color: #ffffff !important;
1207
- }
1208
-
1209
- [data-theme="forest"] .download-limiter-signin-btn {
1210
- background: #22c55e !important;
1211
- color: #1a1a1a !important;
1212
- }
1213
-
1214
- [data-theme="halloween"] .download-limiter-signin-btn {
1215
- background: #ff6500 !important;
1216
- color: #1a1a1a !important;
1217
- }
1218
-
1219
- [data-theme="synthwave"] .download-limiter-signin-btn {
1220
- background: #ba55d3 !important;
1221
- color: #201040 !important;
1222
- }
1223
-
1224
- [data-theme="dracula"] .download-limiter-signin-btn {
1225
- background: #8be9fd !important;
1226
- color: #282a36 !important;
1227
- }
1228
-
1229
- [data-theme="luxury"] .download-limiter-signin-btn {
1230
- background: #d4af37 !important;
1231
- color: #09090b !important;
1232
- }
1233
-
1234
- [data-theme="night"] .download-limiter-signin-btn {
1235
- background: #1e40af !important;
1236
- color: #ffffff !important;
1237
- }
1238
-
1239
- [data-theme="light"] .download-limiter-signin-btn {
1240
- background: #3b82f6 !important;
1241
- color: #ffffff !important;
1242
- }
1243
-
1244
- [data-theme="cupcake"] .download-limiter-signin-btn {
1245
- background: #8b4513 !important;
1246
- color: #ffffff !important;
1247
- }
1248
-
1249
- [data-theme="retro"] .download-limiter-signin-btn {
1250
- background: #d4a574 !important;
1251
- color: #ffffff !important;
1252
- }
1253
-
1254
- [data-theme="aqua"] .download-limiter-signin-btn {
1255
- background: #0891b2 !important;
1256
- color: #ffffff !important;
1257
- }
1258
-
1259
- [data-theme="lofi"] .download-limiter-signin-btn {
1260
- background: #1a1a1a !important;
1261
- color: #ffffff !important;
1262
- }
1263
-
1264
- [data-theme="pastel"] .download-limiter-signin-btn {
1265
- background: #7c3aed !important;
1266
- color: #ffffff !important;
1267
- }
1268
-
1269
- [data-theme="fantasy"] .download-limiter-signin-btn {
1270
- background: #be185d !important;
1271
- color: #ffffff !important;
1272
- }
1273
-
1274
- [data-theme="wireframe"] .download-limiter-signin-btn {
1275
- background: #dfdfdf !important;
1276
- color: #000000 !important;
1277
- border: 1px solid #000000 !important;
1278
- }
1279
-
1280
- [data-theme="black"] .download-limiter-signin-btn {
1281
- background: #ffffff !important;
1282
- color: #000000 !important;
1283
- }
1284
-
1285
- [data-theme="cmyk"] .download-limiter-signin-btn {
1286
- background: #ff00ff !important;
1287
- color: #000000 !important;
1288
- }
1289
-
1290
- [data-theme="autumn"] .download-limiter-signin-btn {
1291
- background: #ff8c00 !important;
1292
- color: #ffffff !important;
1293
- }
1294
-
1295
- [data-theme="business"] .download-limiter-signin-btn {
1296
- background: #3b82f6 !important;
1297
- color: #ffffff !important;
1298
- }
1299
-
1300
- [data-theme="acid"] .download-limiter-signin-btn {
1301
- background: #ff00ff !important;
1302
- color: #000000 !important;
1303
- }
1304
-
1305
- [data-theme="lemonade"] .download-limiter-signin-btn {
1306
- background: #22c55e !important;
1307
- color: #ffffff !important;
1308
- }
1309
-
1310
- [data-theme="coffee"] .download-limiter-signin-btn {
1311
- background: #a0522d !important;
1312
- color: #ffffff !important;
1313
- }
1314
-
1315
- [data-theme="winter"] .download-limiter-signin-btn {
1316
- background: #3b82f6 !important;
1317
- color: #ffffff !important;
1318
- }
1319
-
1320
- .download-limiter-signin-btn:hover {
1321
- opacity: 0.9;
1322
- transform: translateY(-1px);
1323
- box-shadow: 0 4px 8px rgba(0,0,0,0.15);
1324
- }
1325
-
1326
- /* Upgrade Button Styles for All Themes */
1327
- [data-theme="dark"] .upgrade-btn {
1328
- background: #3b82f6 !important;
1329
- color: #ffffff !important;
1330
- }
1331
-
1332
- [data-theme="cyberpunk"] .upgrade-btn {
1333
- background: #ff073a !important;
1334
- color: #ffffff !important;
1335
- }
1336
-
1337
- [data-theme="valentine"] .upgrade-btn {
1338
- background: #e91e7a !important;
1339
- color: #ffffff !important;
1340
- }
1341
-
1342
- [data-theme="bumblebee"] .upgrade-btn {
1343
- background: #f59e0b !important;
1344
- color: #ffffff !important;
1345
- }
1346
-
1347
- [data-theme="garden"] .upgrade-btn {
1348
- background: #10b981 !important;
1349
- color: #ffffff !important;
1350
- }
1351
-
1352
- [data-theme="emerald"] .upgrade-btn {
1353
- background: #10b981 !important;
1354
- color: #ffffff !important;
1355
- }
1356
-
1357
- [data-theme="corporate"] .upgrade-btn {
1358
- background: #3b82f6 !important;
1359
- color: #ffffff !important;
1360
- }
1361
-
1362
- [data-theme="forest"] .upgrade-btn {
1363
- background: #10b981 !important;
1364
- color: #ffffff !important;
1365
- }
1366
-
1367
- [data-theme="halloween"] .upgrade-btn {
1368
- background: #ff7b00 !important;
1369
- color: #000000 !important;
1370
- }
1371
-
1372
- [data-theme="synthwave"] .upgrade-btn {
1373
- background: #e879f9 !important;
1374
- color: #ffffff !important;
1375
- }
1376
-
1377
- [data-theme="dracula"] .upgrade-btn {
1378
- background: #bd93f9 !important;
1379
- color: #ffffff !important;
1380
- }
1381
-
1382
- [data-theme="luxury"] .upgrade-btn {
1383
- background: #d4af37 !important;
1384
- color: #000000 !important;
1385
- }
1386
-
1387
- [data-theme="night"] .upgrade-btn {
1388
- background: #38bdf8 !important;
1389
- color: #ffffff !important;
1390
- }
1391
-
1392
- [data-theme="light"] .upgrade-btn {
1393
- background: #3b82f6 !important;
1394
- color: #ffffff !important;
1395
- }
1396
-
1397
- [data-theme="cupcake"] .upgrade-btn {
1398
- background: #f472b6 !important;
1399
- color: #ffffff !important;
1400
- }
1401
-
1402
- [data-theme="retro"] .upgrade-btn {
1403
- background: #d4a574 !important;
1404
- color: #ffffff !important;
1405
- }
1406
-
1407
- [data-theme="aqua"] .upgrade-btn {
1408
- background: #06b6d4 !important;
1409
- color: #ffffff !important;
1410
- }
1411
-
1412
- [data-theme="lofi"] .upgrade-btn {
1413
- background: #a3a3a3 !important;
1414
- color: #000000 !important;
1415
- }
1416
-
1417
- [data-theme="pastel"] .upgrade-btn {
1418
- background: #a78bfa !important;
1419
- color: #ffffff !important;
1420
- }
1421
-
1422
- [data-theme="fantasy"] .upgrade-btn {
1423
- background: #f472b6 !important;
1424
- color: #ffffff !important;
1425
- }
1426
-
1427
- [data-theme="wireframe"] .upgrade-btn {
1428
- background: #dfdfdf !important;
1429
- color: #000000 !important;
1430
- border: 1px solid #000000 !important;
1431
- }
1432
-
1433
- [data-theme="black"] .upgrade-btn {
1434
- background: #ffffff !important;
1435
- color: #000000 !important;
1436
- }
1437
-
1438
- [data-theme="cmyk"] .upgrade-btn {
1439
- background: #0891b2 !important;
1440
- color: #ffffff !important;
1441
- }
1442
-
1443
- [data-theme="autumn"] .upgrade-btn {
1444
- background: #d97706 !important;
1445
- color: #ffffff !important;
1446
- }
1447
-
1448
- [data-theme="business"] .upgrade-btn {
1449
- background: #3b82f6 !important;
1450
- color: #ffffff !important;
1451
- }
1452
-
1453
- [data-theme="acid"] .upgrade-btn {
1454
- background: #84cc16 !important;
1455
- color: #000000 !important;
1456
- }
1457
-
1458
- [data-theme="lemonade"] .upgrade-btn {
1459
- background: #22c55e !important;
1460
- color: #ffffff !important;
1461
- }
1462
-
1463
- [data-theme="coffee"] .upgrade-btn {
1464
- background: #a0522d !important;
1465
- color: #ffffff !important;
1466
- }
1467
-
1468
- [data-theme="winter"] .upgrade-btn {
1469
- background: #3b82f6 !important;
1470
- color: #ffffff !important;
1471
- }
1472
-
1473
- /* Cancel Button Styles for All Themes */
1474
- [data-theme="dark"] .cancel-btn {
1475
- background: #4b5563 !important;
1476
- color: #ffffff !important;
1477
- }
1478
-
1479
- [data-theme="cyberpunk"] .cancel-btn {
1480
- background: #7e22ce !important;
1481
- color: #ffffff !important;
1482
- }
1483
-
1484
- [data-theme="valentine"] .cancel-btn {
1485
- background: #c11560 !important;
1486
- color: #ffffff !important;
1487
- }
1488
-
1489
- [data-theme="bumblebee"] .cancel-btn {
1490
- background: #d97706 !important;
1491
- color: #ffffff !important;
1492
- }
1493
-
1494
- [data-theme="garden"] .cancel-btn {
1495
- background: #059669 !important;
1496
- color: #ffffff !important;
1497
- }
1498
-
1499
- [data-theme="emerald"] .cancel-btn {
1500
- background: #059669 !important;
1501
- color: #ffffff !important;
1502
- }
1503
-
1504
- [data-theme="corporate"] .cancel-btn {
1505
- background: #6b7280 !important;
1506
- color: #ffffff !important;
1507
- }
1508
-
1509
- [data-theme="forest"] .cancel-btn {
1510
- background: #059669 !important;
1511
- color: #ffffff !important;
1512
- }
1513
-
1514
- [data-theme="halloween"] .cancel-btn {
1515
- background: #7c3aed !important;
1516
- color: #ffffff !important;
1517
- }
1518
-
1519
- [data-theme="synthwave"] .cancel-btn {
1520
- background: #7e22ce !important;
1521
- color: #ffffff !important;
1522
- }
1523
-
1524
- [data-theme="dracula"] .cancel-btn {
1525
- background: #6272a4 !important;
1526
- color: #ffffff !important;
1527
- }
1528
-
1529
- [data-theme="luxury"] .cancel-btn {
1530
- background: #8b5cf6 !important;
1531
- color: #ffffff !important;
1532
- }
1533
-
1534
- [data-theme="night"] .cancel-btn {
1535
- background: #0284c7 !important;
1536
- color: #ffffff !important;
1537
- }
1538
-
1539
- [data-theme="light"] .cancel-btn {
1540
- background: #6b7280 !important;
1541
- color: #ffffff !important;
1542
- }
1543
-
1544
- [data-theme="cupcake"] .cancel-btn {
1545
- background: #ec4899 !important;
1546
- color: #ffffff !important;
1547
- }
1548
-
1549
- [data-theme="retro"] .cancel-btn {
1550
- background: #b8925c !important;
1551
- color: #ffffff !important;
1552
- }
1553
-
1554
- [data-theme="aqua"] .cancel-btn {
1555
- background: #0891b2 !important;
1556
- color: #ffffff !important;
1557
- }
1558
-
1559
- [data-theme="lofi"] .cancel-btn {
1560
- background: #6b7280 !important;
1561
- color: #ffffff !important;
1562
- }
1563
-
1564
- [data-theme="pastel"] .cancel-btn {
1565
- background: #8b5cf6 !important;
1566
- color: #ffffff !important;
1567
- }
1568
-
1569
- [data-theme="fantasy"] .cancel-btn {
1570
- background: #ec4899 !important;
1571
- color: #ffffff !important;
1572
- }
1573
-
1574
- [data-theme="wireframe"] .cancel-btn {
1575
- background: #f5f5f5 !important;
1576
- color: #000000 !important;
1577
- border: 1px solid #000000 !important;
1578
- }
1579
-
1580
- [data-theme="black"] .cancel-btn {
1581
- background: #6b7280 !important;
1582
- color: #ffffff !important;
1583
- }
1584
-
1585
- [data-theme="cmyk"] .cancel-btn {
1586
- background: #0369a1 !important;
1587
- color: #ffffff !important;
1588
- }
1589
-
1590
- [data-theme="autumn"] .cancel-btn {
1591
- background: #c2410c !important;
1592
- color: #ffffff !important;
1593
- }
1594
-
1595
- [data-theme="business"] .cancel-btn {
1596
- background: #6b7280 !important;
1597
- color: #ffffff !important;
1598
- }
1599
-
1600
- [data-theme="acid"] .cancel-btn {
1601
- background: #65a30d !important;
1602
- color: #ffffff !important;
1603
- }
1604
-
1605
- [data-theme="lemonade"] .cancel-btn {
1606
- background: #16a34a !important;
1607
- color: #ffffff !important;
1608
- }
1609
-
1610
- [data-theme="coffee"] .cancel-btn {
1611
- background: #8b4513 !important;
1612
- color: #ffffff !important;
1613
- }
1614
-
1615
- [data-theme="winter"] .cancel-btn {
1616
- background: #1e40af !important;
1617
- color: #ffffff !important;
1618
- }
1619
-
1620
- /* Success Button Styles for All Themes */
1621
- [data-theme="dark"] .success-btn {
1622
- background: #10b981 !important;
1623
- color: #ffffff !important;
1624
- }
1625
-
1626
- [data-theme="cyberpunk"] .success-btn {
1627
- background: #00ff41 !important;
1628
- color: #000000 !important;
1629
- }
1630
-
1631
- [data-theme="valentine"] .success-btn {
1632
- background: #e91e7a !important;
1633
- color: #ffffff !important;
1634
- }
1635
-
1636
- [data-theme="bumblebee"] .success-btn {
1637
- background: #f59e0b !important;
1638
- color: #ffffff !important;
1639
- }
1640
-
1641
- [data-theme="garden"] .success-btn {
1642
- background: #10b981 !important;
1643
- color: #ffffff !important;
1644
- }
1645
-
1646
- [data-theme="emerald"] .success-btn {
1647
- background: #10b981 !important;
1648
- color: #ffffff !important;
1649
- }
1650
-
1651
- [data-theme="corporate"] .success-btn {
1652
- background: #10b981 !important;
1653
- color: #ffffff !important;
1654
- }
1655
-
1656
- [data-theme="forest"] .success-btn {
1657
- background: #10b981 !important;
1658
- color: #ffffff !important;
1659
- }
1660
-
1661
- [data-theme="halloween"] .success-btn {
1662
- background: #ff7b00 !important;
1663
- color: #000000 !important;
1664
- }
1665
-
1666
- [data-theme="synthwave"] .success-btn {
1667
- background: #00ff41 !important;
1668
- color: #000000 !important;
1669
- }
1670
-
1671
- [data-theme="dracula"] .success-btn {
1672
- background: #50fa7b !important;
1673
- color: #000000 !important;
1674
- }
1675
-
1676
- [data-theme="luxury"] .success-btn {
1677
- background: #d4af37 !important;
1678
- color: #000000 !important;
1679
- }
1680
-
1681
- [data-theme="night"] .success-btn {
1682
- background: #22d3ee !important;
1683
- color: #ffffff !important;
1684
- }
1685
-
1686
- [data-theme="light"] .success-btn {
1687
- background: #10b981 !important;
1688
- color: #ffffff !important;
1689
- }
1690
-
1691
- [data-theme="cupcake"] .success-btn {
1692
- background: #f472b6 !important;
1693
- color: #ffffff !important;
1694
- }
1695
-
1696
- [data-theme="retro"] .success-btn {
1697
- background: #d4a574 !important;
1698
- color: #ffffff !important;
1699
- }
1700
-
1701
- [data-theme="aqua"] .success-btn {
1702
- background: #06b6d4 !important;
1703
- color: #ffffff !important;
1704
- }
1705
-
1706
- [data-theme="lofi"] .success-btn {
1707
- background: #10b981 !important;
1708
- color: #ffffff !important;
1709
- }
1710
-
1711
- [data-theme="pastel"] .success-btn {
1712
- background: #34d399 !important;
1713
- color: #ffffff !important;
1714
- }
1715
-
1716
- [data-theme="fantasy"] .success-btn {
1717
- background: #f472b6 !important;
1718
- color: #ffffff !important;
1719
- }
1720
-
1721
- [data-theme="wireframe"] .success-btn {
1722
- background: #dfdfdf !important;
1723
- color: #000000 !important;
1724
- border: 1px solid #000000 !important;
1725
- }
1726
-
1727
- [data-theme="black"] .success-btn {
1728
- background: #10b981 !important;
1729
- color: #ffffff !important;
1730
- }
1731
-
1732
- [data-theme="cmyk"] .success-btn {
1733
- background: #06b6d4 !important;
1734
- color: #ffffff !important;
1735
- }
1736
-
1737
- [data-theme="autumn"] .success-btn {
1738
- background: #d97706 !important;
1739
- color: #ffffff !important;
1740
- }
1741
-
1742
- [data-theme="business"] .success-btn {
1743
- background: #10b981 !important;
1744
- color: #ffffff !important;
1745
- }
1746
-
1747
- [data-theme="acid"] .success-btn {
1748
- background: #84cc16 !important;
1749
- color: #000000 !important;
1750
- }
1751
-
1752
- [data-theme="lemonade"] .success-btn {
1753
- background: #22c55e !important;
1754
- color: #ffffff !important;
1755
- }
1756
-
1757
- [data-theme="coffee"] .success-btn {
1758
- background: #a0522d !important;
1759
- color: #ffffff !important;
1760
- }
1761
-
1762
- [data-theme="winter"] .success-btn {
1763
- background: #3b82f6 !important;
1764
- color: #ffffff !important;
1765
- }
1766
- .download-limiter-signout-btn {
1767
- background: #dc3545;
1768
- color: white;
1769
- border: none;
1770
- padding: 6px 12px;
1771
- border-radius: 4px;
1772
- font-size: 12px;
1773
- cursor: pointer;
1774
- margin-left: 8px;
1775
- }
1776
- .download-limiter-premium-badge {
1777
- background: linear-gradient(45deg, #f39c12, #e74c3c);
1778
- color: white;
1779
- padding: 2px 6px;
1780
- border-radius: 3px;
1781
- font-size: 10px;
1782
- margin-left: 8px;
1783
- font-weight: bold;
1784
- }
1785
- .download-limiter-btn-premium {
1786
- opacity: 0.7;
1787
- }
1788
- .download-limiter-success-modal {
1789
- display: none;
1790
- position: fixed;
1791
- top: 0;
1792
- left: 0;
1793
- width: 100%;
1794
- height: 100%;
1795
- background: rgba(0,0,0,0.5);
1796
- z-index: 10000;
1797
- align-items: center;
1798
- justify-content: center;
1799
- }
1800
- .download-limiter-success-modal.show { display: flex; }
1801
- .download-limiter-success-content {
1802
- background: white;
1803
- padding: 2rem;
1804
- border-radius: 8px;
1805
- max-width: 400px;
1806
- text-align: center;
1807
- box-shadow: 0 4px 20px rgba(0,0,0,0.15);
1808
- border-left: 4px solid #38a169;
1809
- }
1810
-
1811
- /* Single upgrade flow styles */
1812
- .single-upgrade-container {
1813
- margin: 20px 0;
1814
- text-align: center;
1815
- }
1816
-
1817
- .single-upgrade-content .upgrade-btn {
1818
- background: linear-gradient(135deg, #059669, #0d9488) !important;
1819
- color: white !important;
1820
- border: none !important;
1821
- padding: 16px 32px !important;
1822
- border-radius: 12px !important;
1823
- font-size: 18px !important;
1824
- font-weight: 600 !important;
1825
- cursor: pointer !important;
1826
- transition: all 0.3s ease !important;
1827
- box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
1828
- margin-bottom: 16px !important;
1829
- min-width: 200px !important;
1830
- }
1831
-
1832
- .single-upgrade-content .upgrade-btn:hover {
1833
- background: linear-gradient(135deg, #047857, #0f766e) !important;
1834
- transform: translateY(-2px) !important;
1835
- box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4) !important;
1836
- }
1837
-
1838
- .single-upgrade-content .upgrade-description {
1839
- font-size: 14px !important;
1840
- color: #6b7280 !important;
1841
- margin: 12px 0 0 0 !important;
1842
- line-height: 1.5 !important;
1843
- max-width: 300px !important;
1844
- margin-left: auto !important;
1845
- margin-right: auto !important;
1846
- }
1847
-
1848
- /* Anonymous user usage count styles */
1849
- .lead-fast-anonymous-status {
1850
- display: flex;
1851
- align-items: center;
1852
- gap: 12px;
1853
- }
1854
-
1855
- .lead-fast-anonymous-status .lead-fast-count {
1856
- background: rgba(59, 130, 246, 0.1);
1857
- color: #1d4ed8;
1858
- padding: 6px 12px;
1859
- border-radius: 8px;
1860
- font-size: 14px;
1861
- font-weight: 500;
1862
- border: 1px solid rgba(59, 130, 246, 0.2);
1863
- }
1864
-
1865
- /* Success button theming */
1866
- .download-limiter-btn.success-btn {
1867
- background: #059669 !important;
1868
- color: white !important;
1869
- border: none !important;
1870
- padding: 12px 24px !important;
1871
- border-radius: 8px !important;
1872
- cursor: pointer !important;
1873
- margin-top: 20px !important;
1874
- font-size: 16px !important;
1875
- font-weight: 500 !important;
1876
- transition: all 0.2s ease !important;
1877
- }
1878
-
1879
- .download-limiter-btn.success-btn:hover {
1880
- background: #047857 !important;
1881
- transform: translateY(-1px) !important;
1882
- }
1883
-
1884
- /* Theme-specific success button colors */
1885
- [data-theme="cyberpunk"] .download-limiter-btn.success-btn {
1886
- background: #0ea5e9 !important;
1887
- box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
1888
- }
1889
-
1890
- [data-theme="cyberpunk"] .download-limiter-btn.success-btn:hover {
1891
- background: #0284c7 !important;
1892
- }
1893
-
1894
- [data-theme="valentine"] .download-limiter-btn.success-btn {
1895
- background: #be185d !important;
1896
- }
1897
-
1898
- [data-theme="valentine"] .download-limiter-btn.success-btn:hover {
1899
- background: #9d174d !important;
1900
- }
1901
-
1902
- [data-theme="bumblebee"] .download-limiter-btn.success-btn {
1903
- background: #f59e0b !important;
1904
- }
1905
-
1906
- [data-theme="bumblebee"] .download-limiter-btn.success-btn:hover {
1907
- background: #d97706 !important;
1908
- }
1909
-
1910
- [data-theme="garden"] .download-limiter-btn.success-btn {
1911
- background: #16a34a !important;
1912
- }
1913
-
1914
- [data-theme="garden"] .download-limiter-btn.success-btn:hover {
1915
- background: #15803d !important;
1916
- }
1917
-
1918
- /* Google Sign-in button theming */
1919
- .download-limiter-btn.google-signin-btn {
1920
- background: #4285f4 !important;
1921
- color: white !important;
1922
- border: none !important;
1923
- padding: 12px 24px !important;
1924
- border-radius: 8px !important;
1925
- cursor: pointer !important;
1926
- margin-right: 10px !important;
1927
- display: inline-flex !important;
1928
- align-items: center !important;
1929
- gap: 8px !important;
1930
- font-size: 14px !important;
1931
- font-weight: 500 !important;
1932
- transition: all 0.2s ease !important;
1933
- }
1934
-
1935
- .download-limiter-btn.google-signin-btn:hover {
1936
- background: #3367d6 !important;
1937
- transform: translateY(-1px) !important;
1938
- }
1939
-
1940
- /* Upgrade button theming */
1941
- .download-limiter-btn.upgrade-btn {
1942
- background: #059669 !important;
1943
- color: white !important;
1944
- border: none !important;
1945
- padding: 12px 24px !important;
1946
- border-radius: 8px !important;
1947
- cursor: pointer !important;
1948
- margin-right: 10px !important;
1949
- font-size: 16px !important;
1950
- font-weight: 500 !important;
1951
- transition: all 0.2s ease !important;
1952
- }
1953
-
1954
- .download-limiter-btn.upgrade-btn:hover {
1955
- background: #047857 !important;
1956
- transform: translateY(-1px) !important;
1957
- }
1958
-
1959
- /* Theme-specific button colors */
1960
- [data-theme="cyberpunk"] .download-limiter-btn.upgrade-btn {
1961
- background: #0ea5e9 !important;
1962
- box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
1963
- }
1964
-
1965
- [data-theme="valentine"] .download-limiter-btn.upgrade-btn {
1966
- background: #be185d !important;
1967
- }
1968
-
1969
- [data-theme="bumblebee"] .download-limiter-btn.upgrade-btn {
1970
- background: #f59e0b !important;
1971
- }
1972
-
1973
- [data-theme="garden"] .download-limiter-btn.upgrade-btn {
1974
- background: #16a34a !important;
1975
- }
1976
-
1977
- /* Cancel button container and styling - positioned at very bottom */
1978
- .download-limiter-cancel-container {
1979
- margin-top: 30px !important;
1980
- padding-top: 20px !important;
1981
- border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
1982
- text-align: center !important;
1983
- position: relative !important;
1984
- bottom: 0 !important;
1985
- }
1986
-
1987
- .download-limiter-btn.cancel-btn {
1988
- background: transparent !important;
1989
- color: #6b7280 !important;
1990
- border: none !important;
1991
- padding: 8px 16px !important;
1992
- border-radius: 6px !important;
1993
- cursor: pointer !important;
1994
- font-size: 13px !important;
1995
- font-weight: 400 !important;
1996
- transition: all 0.2s ease !important;
1997
- text-decoration: underline !important;
1998
- margin: 0 auto !important;
1999
- display: block !important;
2000
- }
2001
-
2002
- .download-limiter-btn.cancel-btn:hover {
2003
- color: #374151 !important;
2004
- background: rgba(107, 114, 128, 0.1) !important;
2005
- text-decoration: none !important;
2006
- }
2007
-
2008
- /* Theme-specific cancel button border */
2009
- [data-theme="dark"] .download-limiter-cancel-container {
2010
- border-top-color: rgba(255, 255, 255, 0.1) !important;
2011
- }
2012
-
2013
- [data-theme="dark"] .download-limiter-btn.cancel-btn {
2014
- color: #9ca3af !important;
2015
- }
2016
-
2017
- [data-theme="dark"] .download-limiter-btn.cancel-btn:hover {
2018
- color: #d1d5db !important;
2019
- background: rgba(156, 163, 175, 0.1) !important;
2020
- }
2021
-
2022
- [data-theme="cyberpunk"] .download-limiter-cancel-container {
2023
- border-top-color: rgba(14, 165, 233, 0.2) !important;
2024
- }
2025
-
2026
- [data-theme="cyberpunk"] .download-limiter-btn.cancel-btn {
2027
- color: #0ea5e9 !important;
2028
- }
2029
-
2030
- [data-theme="cyberpunk"] .download-limiter-btn.cancel-btn:hover {
2031
- color: #38bdf8 !important;
2032
- background: rgba(14, 165, 233, 0.1) !important;
2033
- }
2034
- `;
2035
- document.head.appendChild(styles);
2036
- }
2037
- injectDaisyUI() {
2038
- //console.log('🎨 [THEME DEBUG] injectDaisyUI called');
2039
- //console.log('🎨 [THEME DEBUG] Theme config:', this.config.theme);
2040
- // Check if DaisyUI is already loaded
2041
- const existingLink = document.querySelector('link[href*="daisyui"]');
2042
- if (existingLink) {
2043
- //console.log('🎨 [THEME DEBUG] DaisyUI already exists:', existingLink);
2044
- // Apply theme if DaisyUI already exists
2045
- if (this.config.theme?.name) {
2046
- const themeName = this.config.theme.name.toLowerCase();
2047
- //console.log('🎨 [THEME DEBUG] Setting existing theme:', themeName);
2048
- document.documentElement.setAttribute('data-theme', themeName);
2049
- //console.log('🎨 [THEME DEBUG] Current data-theme attribute:', document.documentElement.getAttribute('data-theme'));
2050
- }
2051
- return;
2052
- }
2053
- //console.log('🎨 [THEME DEBUG] No existing DaisyUI found, injecting...');
2054
- // Note: Tailwind CSS is not needed as we use custom CSS for all styling
2055
- // Apply theme directly using our custom CSS - no external dependencies needed
2056
- if (this.config.theme?.name) {
2057
- const themeName = this.config.theme.name.toLowerCase();
2058
- document.documentElement.setAttribute('data-theme', themeName);
2059
- // Update status displays immediately since no CSS loading is needed
2060
- this.updateStatusDisplays();
2061
- }
2062
- }
2063
- createPaywallModal() {
2064
- if (document.getElementById('download-limiter-paywall'))
2065
- return;
2066
- const modal = document.createElement('div');
2067
- modal.id = 'download-limiter-paywall';
2068
- modal.className = 'download-limiter-modal';
2069
- modal.innerHTML = `
2070
- <div class="download-limiter-content">
2071
- <h3 id="download-limiter-paywall-title">Usage Limit Reached</h3>
2072
- <p id="download-limiter-paywall-subtitle">You've used all your free attempts. Upgrade to premium for unlimited usage!</p>
2073
-
2074
- <!-- Auth Section (shows when not signed in) -->
2075
- <div id="download-limiter-auth-section" style="margin: 20px 0;">
2076
- <p>Sign in to continue or upgrade to premium</p>
2077
- <button id="download-limiter-signin-btn" class="download-limiter-btn google-signin-btn">
2078
- <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
2079
- <path d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a8.8 8.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18z" fill="white"/>
2080
- <path d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2.04a4.8 4.8 0 0 1-2.7.75 4.8 4.8 0 0 1-4.52-3.4H1.83v2.07A8 8 0 0 0 8.98 17z" fill="white"/>
2081
- <path d="M4.46 10.37a4.8 4.8 0 0 1-.25-1.37c0-.48.09-.94.25-1.37V5.56H1.83a8 8 0 0 0 0 6.88l2.63-2.07z" fill="white"/>
2082
- <path d="M8.98 3.77c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.94.64 11.66 0 8.98 0A8 8 0 0 0 1.83 5.56l2.63 2.07c.61-1.8 2.26-3.86 4.52-3.86z" fill="white"/>
2083
- </svg>
2084
- Sign in with Google
2085
- </button>
2086
- </div>
2087
-
2088
- <!-- Payment Section (shows when signed in) -->
2089
- <div id="download-limiter-payment-section" style="margin: 20px 0; display: none;">
2090
- <button id="download-limiter-upgrade-btn" class="download-limiter-btn upgrade-btn">
2091
- Upgrade to Premium
2092
- </button>
2093
- </div>
2094
-
2095
- <div class="download-limiter-cancel-container">
2096
- <button id="download-limiter-close-btn" class="download-limiter-btn cancel-btn">
2097
- Cancel
2098
- </button>
2099
- </div>
2100
- </div>
2101
- `;
2102
- document.body.appendChild(modal);
2103
- // Set up event handlers
2104
- modal.querySelector('#download-limiter-signin-btn').addEventListener('click', async () => {
2105
- await this.signIn();
2106
- });
2107
- modal.querySelector('#download-limiter-upgrade-btn').addEventListener('click', async () => {
2108
- const payment = await this.createPayment();
2109
- if (payment?.checkout_url) {
2110
- window.location.href = payment.checkout_url;
2111
- }
2112
- });
2113
- modal.querySelector('#download-limiter-close-btn').addEventListener('click', () => {
2114
- if (this.config.options?.debug) {
2115
- console.log('🔍 DEBUG: Cancel button clicked');
2116
- console.log('🔍 DEBUG: this.config.feedback:', this.config.feedback);
2117
- console.log('🔍 DEBUG: this.config.email:', this.config.email);
2118
- console.log('🔍 DEBUG: Feedback config exists:', !!(this.config.feedback || this.config.email));
2119
- }
2120
- // Show feedback form if feedback config exists, otherwise just close
2121
- if (this.config.feedback || this.config.email) {
2122
- if (this.config.options?.debug) {
2123
- console.log('🔍 DEBUG: Showing feedback form');
2124
- }
2125
- this.showFeedbackForm();
2126
- }
2127
- else {
2128
- if (this.config.options?.debug) {
2129
- console.log('🔍 DEBUG: No email config, just closing modal');
2130
- }
2131
- modal.classList.remove('show');
2132
- }
2133
- });
2134
- // Removed click-outside-to-close behavior to encourage users to use the Cancel button
2135
- // which triggers the feedback form. This improves feedback collection.
2136
- }
2137
- createSuccessModal() {
2138
- if (document.getElementById('download-limiter-success'))
2139
- return;
2140
- const modal = document.createElement('div');
2141
- modal.id = 'download-limiter-success';
2142
- modal.className = 'download-limiter-modal'; // Use same modal class as paywall
2143
- modal.innerHTML = `
2144
- <div class="download-limiter-content"> <!-- Use same content class as paywall for theming -->
2145
- <h3 id="download-limiter-success-title">Action Started!</h3>
2146
- <p id="download-limiter-success-message">Your action completed successfully!</p>
2147
- <button id="download-limiter-success-close" class="download-limiter-btn success-btn">
2148
- OK
2149
- </button>
2150
- </div>
2151
- `;
2152
- document.body.appendChild(modal);
2153
- // Set up event handlers
2154
- modal.querySelector('#download-limiter-success-close').addEventListener('click', () => {
2155
- modal.classList.remove('show');
2156
- });
2157
- modal.addEventListener('click', (e) => {
2158
- if (e.target === modal) {
2159
- modal.classList.remove('show');
2160
- }
2161
- });
2162
- }
2163
- showFeedbackForm() {
2164
- // const feedbackStartTime = Date.now();
2165
- // console.log(`🕐 [FEEDBACK] showFeedbackForm called: ${new Date(feedbackStartTime).toISOString()}`);
2166
- // Hide paywall first
2167
- // const paywallHideStart = Date.now();
2168
- const paywall = document.getElementById('download-limiter-paywall');
2169
- if (paywall) {
2170
- paywall.classList.remove('show');
2171
- // console.log(`🕐 [FEEDBACK] Paywall hidden: ${Date.now() - paywallHideStart}ms`);
2172
- }
2173
- // Create or show feedback modal
2174
- // const createFeedbackStart = Date.now();
2175
- this.createFeedbackModal();
2176
- // console.log(`🕐 [FEEDBACK] createFeedbackModal completed: ${Date.now() - createFeedbackStart}ms`);
2177
- const modal = document.getElementById('download-limiter-feedback');
2178
- if (modal) {
2179
- modal.classList.add('show');
2180
- // console.log(`🕐 [FEEDBACK] Feedback modal shown: ${Date.now() - feedbackStartTime}ms total`);
2181
- }
2182
- }
2183
- createFeedbackModal() {
2184
- if (document.getElementById('download-limiter-feedback')) {
2185
- if (this.config.options?.debug) {
2186
- console.log('🔍 DEBUG: Feedback modal already exists');
2187
- }
2188
- return;
2189
- }
2190
- // Get feedback configuration or fallback to legacy email config
2191
- const feedbackConfig = this.config.feedback || (this.config.email ? {
2192
- form: {
2193
- title: 'Quick Feedback',
2194
- description: 'Why didn\'t you upgrade?',
2195
- option1: 'Not useful for my needs',
2196
- option2: 'Didn\'t find what I was looking for',
2197
- option3: 'Just trying it out'
2198
- },
2199
- email: this.config.email
2200
- } : null);
2201
- if (this.config.options?.debug) {
2202
- console.log('🔍 DEBUG: Feedback config:', feedbackConfig);
2203
- console.log('🔍 DEBUG: this.config.feedback:', this.config.feedback);
2204
- console.log('🔍 DEBUG: this.config.email:', this.config.email);
2205
- }
2206
- if (!feedbackConfig) {
2207
- if (this.config.options?.debug) {
2208
- console.log('🔍 DEBUG: No feedback config found, not creating modal');
2209
- }
2210
- return;
2211
- }
2212
- const modal = document.createElement('div');
2213
- modal.id = 'download-limiter-feedback';
2214
- modal.className = 'download-limiter-modal';
2215
- modal.innerHTML = `
2216
- <div class="download-limiter-content">
2217
- <h3>${feedbackConfig.form.title}</h3>
2218
- <p style="margin-bottom: 20px;">${feedbackConfig.form.description}</p>
2219
-
2220
- <form id="feedback-form" style="text-align: left;">
2221
- <div style="margin-bottom: 15px;">
2222
- <label style="display: block; margin-bottom: 8px;">
2223
- <input type="radio" name="reason" value="option1" style="margin-right: 8px;">
2224
- ${feedbackConfig.form.option1}
2225
- </label>
2226
- <label style="display: block; margin-bottom: 8px;">
2227
- <input type="radio" name="reason" value="option2" style="margin-right: 8px;">
2228
- ${feedbackConfig.form.option2}
2229
- </label>
2230
- <label style="display: block; margin-bottom: 8px;">
2231
- <input type="radio" name="reason" value="option3" style="margin-right: 8px;">
2232
- ${feedbackConfig.form.option3}
2233
- </label>
2234
- </div>
2235
-
2236
- <div style="margin-bottom: 15px;">
2237
- <label for="feedback-details" style="display: block; margin-bottom: 5px;">Tell us more:</label>
2238
- <textarea
2239
- id="feedback-details"
2240
- name="details"
2241
- rows="3"
2242
- style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
2243
- placeholder="Your feedback helps us improve..." maxlength="200"></textarea>
2244
- </div>
2245
-
2246
- <div style="margin-bottom: 20px;">
2247
- <label for="feedback-email" style="display: block; margin-bottom: 5px;">
2248
- Email (optional):
2249
- </label>
2250
- <input
2251
- type="email"
2252
- id="feedback-email"
2253
- name="email"
2254
- style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
2255
- placeholder="your@email.com">
2256
- <small style="color: #666; display: block; margin-top: 4px;">
2257
- Only if you want us to reach out about what you mentioned above. We don't follow up unless you want us to
2258
- </small>
2259
- </div>
2260
-
2261
-
2262
- <div style="text-align: center;">
2263
- <button type="submit" class="download-limiter-btn success-btn" style="margin-right: 10px;">
2264
- Submit Feedback
2265
- </button>
2266
- <button type="button" id="feedback-skip-btn" class="download-limiter-btn cancel-btn">
2267
- Skip
2268
- </button>
2269
- </div>
2270
- </form>
2271
- </div>
2272
- `;
2273
- document.body.appendChild(modal);
2274
- if (this.config.options?.debug) {
2275
- console.log('🔍 DEBUG: Feedback modal created and added to DOM');
2276
- }
2277
- // Set up event listeners
2278
- const form = modal.querySelector('#feedback-form');
2279
- form.addEventListener('submit', (e) => {
2280
- e.preventDefault();
2281
- this.submitFeedback(form);
2282
- });
2283
- modal.querySelector('#feedback-skip-btn').addEventListener('click', () => {
2284
- modal.classList.remove('show');
2285
- });
2286
- modal.addEventListener('click', (e) => {
2287
- if (e.target === modal) {
2288
- modal.classList.remove('show');
2289
- }
2290
- });
2291
- }
2292
- async submitFeedback(form) {
2293
- const formData = new FormData(form);
2294
- const reason = formData.get('reason');
2295
- const details = formData.get('details');
2296
- const email = formData.get('email');
2297
- if (!reason) {
2298
- alert('Please select a reason');
2299
- return;
2300
- }
2301
- const feedbackData = {
2302
- reason,
2303
- details,
2304
- email: email || undefined,
2305
- timestamp: new Date().toISOString(),
2306
- userAgent: navigator.userAgent,
2307
- appId: this.config.appId
2308
- };
2309
- try {
2310
- await this.sendFeedbackEmail(feedbackData);
2311
- // Close feedback modal
2312
- const modal = document.getElementById('download-limiter-feedback');
2313
- if (modal) {
2314
- modal.classList.remove('show');
2315
- }
2316
- // Show thank you message
2317
- alert('Thank you for your feedback!');
2318
- }
2319
- catch (error) {
2320
- console.error('Failed to send feedback:', error);
2321
- alert('Failed to send feedback. Please try again.');
2322
- }
2323
- }
2324
- async sendFeedbackEmail(feedbackData) {
2325
- const emailConfig = this.config.feedback?.email || this.config.email;
2326
- if (!emailConfig) {
2327
- throw new Error('Email configuration not available');
2328
- }
2329
- const emailBody = `
2330
- New Feedback from ${this.config.appId}
2331
-
2332
- Reason: ${feedbackData.reason}
2333
- Details: ${feedbackData.details}
2334
- User Email: ${feedbackData.email || 'Not provided'}
2335
- Timestamp: ${feedbackData.timestamp}
2336
- User Agent: ${feedbackData.userAgent}
2337
- `.trim();
2338
- const response = await fetch('https://api.resend.com/emails', {
2339
- method: 'POST',
2340
- headers: {
2341
- 'Content-Type': 'application/json',
2342
- 'Authorization': `Bearer ${emailConfig.resendApiKey}`
2343
- },
2344
- body: JSON.stringify({
2345
- from: emailConfig.fromEmail,
2346
- to: [emailConfig.fromEmail], // Send feedback to yourself
2347
- subject: `Feedback from ${this.config.appId}`,
2348
- text: emailBody
2349
- })
2350
- });
2351
- if (!response.ok) {
2352
- throw new Error(`Email API error: ${response.status}`);
2353
- }
2354
- }
2355
- createAuthUI() {
2356
- if (document.getElementById('lead-fast-profile'))
2357
- return;
2358
- const profileContainer = document.createElement('div');
2359
- profileContainer.id = 'lead-fast-profile';
2360
- profileContainer.className = 'lead-fast-profile';
2361
- document.body.appendChild(profileContainer);
2362
- }
2363
- createStatusDisplay() {
2364
- if (document.getElementById('download-limiter-status'))
2365
- return;
2366
- const statusDiv = document.createElement('div');
2367
- statusDiv.id = 'download-limiter-status';
2368
- statusDiv.className = 'download-limiter-status';
2369
- document.body.appendChild(statusDiv);
2370
- }
2371
- createGlobalStatusDisplay() {
2372
- this.createStatusDisplay();
2373
- }
2374
- showPaywallInstant(status) {
2375
- // const showStartTime = Date.now();
2376
- // console.log(`🕐 [MODAL] showPaywallInstant started: ${new Date(showStartTime).toISOString()}`);
2377
- // Ensure modal exists before trying to show it
2378
- // const createStartTime = Date.now();
2379
- this.createPaywallModal();
2380
- // console.log(`🕐 [MODAL] createPaywallModal completed: ${Date.now() - createStartTime}ms`);
2381
- const modal = document.getElementById('download-limiter-paywall');
2382
- if (modal) {
2383
- // console.log(`🕐 [MODAL] Modal found in DOM: ${Date.now() - showStartTime}ms`);
2384
- // Update paywall title with exact count (no API call needed)
2385
- const titleEl = modal.querySelector('#download-limiter-paywall-title');
2386
- if (titleEl) {
2387
- titleEl.textContent = `You've used ${status.limit} free attempts`;
2388
- // console.log(`🕐 [MODAL] Title updated: ${Date.now() - showStartTime}ms`);
2389
- }
2390
- // Show appropriate section based on auth state
2391
- const authSection = modal.querySelector('#download-limiter-auth-section');
2392
- const paymentSection = modal.querySelector('#download-limiter-payment-section');
2393
- if (!this.currentUser) {
2394
- // console.log(`🕐 [MODAL] Setting up anonymous user flow: ${Date.now() - showStartTime}ms`);
2395
- // Anonymous user - show single upgrade flow
2396
- const subtitleEl = modal.querySelector('#download-limiter-paywall-subtitle');
2397
- if (subtitleEl) {
2398
- subtitleEl.textContent = 'Sign in to continue. If you\'re already premium, you\'ll get unlimited access. New users can upgrade after signing in.';
2399
- }
2400
- // Hide separate auth/payment sections and show single upgrade button
2401
- authSection.style.display = 'none';
2402
- paymentSection.style.display = 'none';
2403
- // Show single upgrade button
2404
- // const upgradeStartTime = Date.now();
2405
- this.showSingleUpgradeFlow(modal);
2406
- // console.log(`🕐 [MODAL] Single upgrade flow setup: ${Date.now() - upgradeStartTime}ms`);
2407
- }
2408
- else {
2409
- // console.log(`🕐 [MODAL] Setting up signed-in user flow: ${Date.now() - showStartTime}ms`);
2410
- // Existing flow for signed-in users - direct to payment
2411
- authSection.style.display = 'none';
2412
- paymentSection.style.display = 'block';
2413
- }
2414
- modal.classList.add('show');
2415
- // console.log(`🕐 [MODAL] Modal shown (classList.add('show')): ${Date.now() - showStartTime}ms`);
2416
- }
2417
- }
2418
- async showPaywall() {
2419
- // Get current status if not cached
2420
- const status = await this.getDownloadStatus();
2421
- this.showPaywallInstant(status);
2422
- }
2423
- showSingleUpgradeFlow(modal) {
2424
- // Create single upgrade button that handles both login and payment
2425
- let upgradeContainer = modal.querySelector('.single-upgrade-container');
2426
- if (!upgradeContainer) {
2427
- upgradeContainer = document.createElement('div');
2428
- upgradeContainer.className = 'single-upgrade-container';
2429
- upgradeContainer.innerHTML = `
2430
- <div class="single-upgrade-content">
2431
- <button class="download-limiter-btn upgrade-btn" id="single-upgrade-btn">
2432
- Continue with Google
2433
- </button>
2434
- <!--<p class="upgrade-description">
2435
- Sign in to restore access. Premium members get unlimited usage immediately.
2436
- </p>-->
2437
- </div>
2438
- `;
2439
- // Insert before the cancel container to keep cancel at the bottom
2440
- const cancelContainer = modal.querySelector('.download-limiter-cancel-container');
2441
- if (cancelContainer) {
2442
- modal.querySelector('.download-limiter-content')?.insertBefore(upgradeContainer, cancelContainer);
2443
- }
2444
- else {
2445
- modal.querySelector('.download-limiter-content')?.appendChild(upgradeContainer);
2446
- }
2447
- }
2448
- upgradeContainer.style.display = 'block';
2449
- // Add click handler for single upgrade flow
2450
- const upgradeBtn = modal.querySelector('#single-upgrade-btn');
2451
- if (upgradeBtn) {
2452
- upgradeBtn.replaceWith(upgradeBtn.cloneNode(true)); // Remove existing listeners
2453
- const newUpgradeBtn = modal.querySelector('#single-upgrade-btn');
2454
- newUpgradeBtn?.addEventListener('click', async () => {
2455
- try {
2456
- // Step 1: Sign in with Google
2457
- const { error } = await this.supabase.auth.signInWithOAuth({
2458
- provider: 'google',
2459
- options: {
2460
- redirectTo: `${window.location.origin}${window.location.pathname}?upgrade=true`
2461
- }
2462
- });
2463
- if (error) {
2464
- console.error('Sign in error:', error);
2465
- this.showError('Sign In Failed', 'Failed to sign in with Google. Please try again.');
2466
- }
2467
- // OAuth will redirect, so no further action needed here
2468
- }
2469
- catch (error) {
2470
- console.error('Upgrade flow error:', error);
2471
- this.showError('Upgrade Failed', 'Failed to start upgrade process. Please try again.');
2472
- }
2473
- });
2474
- }
2475
- }
2476
- showSuccess(title, message) {
2477
- const modal = document.getElementById('download-limiter-success');
2478
- if (modal) {
2479
- const titleEl = modal.querySelector('#download-limiter-success-title');
2480
- const messageEl = modal.querySelector('#download-limiter-success-message');
2481
- if (titleEl)
2482
- titleEl.textContent = title;
2483
- if (messageEl)
2484
- messageEl.textContent = message;
2485
- modal.classList.add('show');
2486
- // No auto-hide - let user dismiss manually
2487
- }
2488
- }
2489
- showError(title, message) {
2490
- // Create a clean error toast instead of alert
2491
- const toast = document.createElement('div');
2492
- toast.style.cssText = `
2493
- position: fixed;
2494
- top: 20px;
2495
- right: 20px;
2496
- background: #fee2e2;
2497
- border: 1px solid #fecaca;
2498
- color: #dc2626;
2499
- padding: 12px 16px;
2500
- border-radius: 8px;
2501
- font-size: 14px;
2502
- font-weight: 500;
2503
- line-height: 1.4;
2504
- max-width: 300px;
2505
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2506
- z-index: 10000;
2507
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
2508
- `;
2509
- toast.innerHTML = `
2510
- <div style="font-weight: 600; margin-bottom: 4px;">${title}</div>
2511
- <div style="font-size: 13px; opacity: 0.9;">${message}</div>
2512
- `;
2513
- document.body.appendChild(toast);
2514
- // Auto-remove after 5 seconds
2515
- setTimeout(() => {
2516
- if (toast.parentNode) {
2517
- toast.parentNode.removeChild(toast);
2518
- }
2519
- }, 5000);
2520
- // Click to dismiss
2521
- toast.addEventListener('click', () => {
2522
- if (toast.parentNode) {
2523
- toast.parentNode.removeChild(toast);
2524
- }
2525
- });
2526
- }
2527
- showConnectionError() {
2528
- this.showError('Connection Error', 'Server connection required for download verification. Please check your configuration and try again.');
2529
- }
2530
- showPaymentConfigError() {
2531
- this.showError('Payment Configuration Error', 'Payment system is not properly configured. Please contact support.');
2532
- }
2533
- disableDownloadButtons(errorType) {
2534
- // Find all buttons that were attached by the library
2535
- const buttons = document.querySelectorAll('[data-leadfast-attached]');
2536
- const errorMessages = {
2537
- connection: 'Download disabled: Server connection required',
2538
- payment: 'Download disabled: Payment configuration error'
2539
- };
2540
- const statusMessages = {
2541
- connection: '⚠️ Connection Error - Downloads Disabled',
2542
- payment: '⚠️ Payment Config Error - Downloads Disabled'
2543
- };
2544
- buttons.forEach(button => {
2545
- const btnElement = button;
2546
- btnElement.disabled = true;
2547
- btnElement.style.opacity = '0.5';
2548
- btnElement.style.cursor = 'not-allowed';
2549
- btnElement.title = errorMessages[errorType];
2550
- });
2551
- // Update user section to show error
2552
- const userSection = document.querySelector('.lead-fast-user-section');
2553
- if (userSection) {
2554
- userSection.innerHTML = `
2555
- <div style="
2556
- color: #ef4444;
2557
- padding: 6px 8px;
2558
- font-size: 12px;
2559
- font-weight: 500;
2560
- line-height: 1.2;
2561
- border-radius: 4px;
2562
- background: rgba(239, 68, 68, 0.05);
2563
- border: 1px solid rgba(239, 68, 68, 0.2);
2564
- max-width: 200px;
2565
- text-align: center;
2566
- ">
2567
- ${statusMessages[errorType]}
2568
- </div>
2569
- `;
2570
- }
2571
- }
2572
- async updateStatusDisplays() {
2573
- //console.log('🎨 [THEME DEBUG] updateStatusDisplays called');
2574
- // If connection failed, disable all download buttons
2575
- if (this.supabaseConnectionFailed) {
2576
- this.disableDownloadButtons('connection');
2577
- return;
2578
- }
2579
- // If payment configuration is invalid, disable all download buttons
2580
- if (this.config.payment && this.paymentConnectionFailed) {
2581
- this.disableDownloadButtons('payment');
2582
- return;
2583
- }
2584
- const status = await this.getDownloadStatus();
2585
- this.updateUserSection(status);
2586
- }
2587
- createTitleBar() {
2588
- //console.log('🎨 [THEME DEBUG] Creating title bar');
2589
- // Create the profile div if it doesn't exist
2590
- let profileDiv = document.getElementById('lead-fast-profile');
2591
- if (!profileDiv) {
2592
- profileDiv = document.createElement('div');
2593
- profileDiv.id = 'lead-fast-profile';
2594
- profileDiv.className = 'lead-fast-profile';
2595
- document.body.appendChild(profileDiv);
2596
- }
2597
- // Get title bar configuration
2598
- const titleConfig = this.config.titleBar || {};
2599
- const title = titleConfig.title || 'My App';
2600
- const titleImage = titleConfig.titleImage;
2601
- const links = titleConfig.links || [];
2602
- // Always create title bar with logo and navigation
2603
- profileDiv.innerHTML = `
2604
- <div class="lead-fast-title-bar">
2605
- <div class="lead-fast-title-section">
2606
- <a href="#" class="lead-fast-logo">
2607
- ${titleImage ? `<img src="${titleImage}" alt="${title}">` : ''}
2608
- <span>${title}</span>
2609
- </a>
2610
- <nav class="lead-fast-nav">
2611
- ${links.map(link => `
2612
- <a href="${link.url}" class="lead-fast-nav-link" ${link.target ? `target="${link.target}"` : ''}>
2613
- ${link.text}
2614
- </a>
2615
- `).join('')}
2616
- </nav>
2617
- </div>
2618
-
2619
- <div class="lead-fast-user-section" id="lead-fast-user-section">
2620
- <!-- User section will be populated when logged in -->
2621
- </div>
2622
-
2623
- <!-- <a href="https://www.moneyfast.bar" target="_blank" class="lead-fast-branding" style="text-decoration: none; color: inherit;">moneyfast.bar</a>-->
2624
- </div>
2625
- `;
2626
- }
2627
- updateUserSection(status) {
2628
- //console.log('🎨 [THEME DEBUG] updateUserSection called');
2629
- //console.log('🎨 [THEME DEBUG] Current data-theme:', document.documentElement.getAttribute('data-theme'));
2630
- const userSection = document.getElementById('lead-fast-user-section');
2631
- if (!userSection) {
2632
- //console.log('🎨 [THEME DEBUG] User section not found!');
2633
- return;
2634
- }
2635
- if (this.currentUser) {
2636
- // User is signed in - show user info
2637
- const userInitial = this.currentUser.email.charAt(0).toUpperCase();
2638
- const userEmail = this.currentUser.email;
2639
- const badgeClass = status.isPremium ? 'premium' : 'free';
2640
- const badgeText = status.isPremium ? 'Premium' : 'Free';
2641
- const countText = status.isPremium ? 'Unlimited' : `${status.currentCount}/${status.limit}`;
2642
- //console.log('🎨 [THEME DEBUG] Populating user section');
2643
- userSection.innerHTML = `
2644
- <div class="lead-fast-avatar">${userInitial}</div>
2645
- <div class="lead-fast-user-info">
2646
- <div class="lead-fast-user-email">${userEmail}</div>
2647
- <div class="lead-fast-user-status">
2648
- <span class="lead-fast-badge ${badgeClass}">${badgeText}</span>
2649
- <span class="lead-fast-count">${countText}</span>
2650
- </div>
2651
- </div>
2652
- <button class="lead-fast-signout">signout</button>
2653
- `;
2654
- // Debug CSS variables after updating user section
2655
- const titleBar = document.querySelector('.lead-fast-title-bar');
2656
- if (titleBar) {
2657
- getComputedStyle(titleBar);
2658
- //console.log('🎨 [THEME DEBUG] Title bar background color:', computedStyle.backgroundColor);
2659
- //console.log('🎨 [THEME DEBUG] Title bar border color:', computedStyle.borderColor);
2660
- }
2661
- // Add sign out functionality
2662
- const signoutBtn = userSection.querySelector('.lead-fast-signout');
2663
- if (signoutBtn) {
2664
- signoutBtn.addEventListener('click', () => {
2665
- this.signOut();
2666
- });
2667
- }
2668
- }
2669
- else {
2670
- // Anonymous user - show usage count
2671
- //console.log('🎨 [THEME DEBUG] Showing anonymous user usage count');
2672
- const countText = `Attempts: ${status.currentCount}/${status.limit}`;
2673
- userSection.innerHTML = `
2674
- <div class="lead-fast-anonymous-status">
2675
- <span class="lead-fast-count">${countText}</span>
2676
- </div>
2677
- `;
2678
- }
2679
- }
2680
- setupUIUpdates() {
2681
- // Update UI on auth changes
2682
- this.on('authChanged', async () => {
2683
- // Invalidate cache when auth state changes
2684
- // console.log(`🕐 [CACHE] Invalidating cache due to auth change (was: ${this.cachedStatus ? 'cached' : 'null'})`);
2685
- this.cachedStatus = null;
2686
- this.updateStatusDisplays();
2687
- // Update paywall display if it's currently shown
2688
- const modal = document.getElementById('download-limiter-paywall');
2689
- if (modal && modal.classList.contains('show')) {
2690
- this.updatePaywallDisplay();
2691
- // Auto-redirect to payment after sign-in from paywall (if not already premium)
2692
- if (this.currentUser && this.config.payment) {
2693
- setTimeout(async () => {
2694
- const isPremium = await this.checkPremiumStatus(this.currentUser.email);
2695
- if (!isPremium) {
2696
- // User is not premium, redirect to payment
2697
- const payment = await this.createPayment();
2698
- if (payment?.checkout_url) {
2699
- window.location.href = payment.checkout_url;
2700
- }
2701
- }
2702
- else {
2703
- // User is already premium, just close paywall and stay on page
2704
- modal.classList.remove('show');
2705
- }
2706
- }, 1000); // Small delay to let UI update
2707
- }
2708
- }
2709
- });
2710
- // Update UI on count changes
2711
- this.on('countChanged', () => {
2712
- this.updateStatusDisplays();
2713
- });
2714
- // Initial update
2715
- this.updateStatusDisplays();
2716
- }
2717
- updatePaywallDisplay() {
2718
- const modal = document.getElementById('download-limiter-paywall');
2719
- if (!modal)
2720
- return;
2721
- const authSection = modal.querySelector('#download-limiter-auth-section');
2722
- const paymentSection = modal.querySelector('#download-limiter-payment-section');
2723
- if (!this.currentUser) {
2724
- // Not signed in - show auth section
2725
- authSection.style.display = 'block';
2726
- paymentSection.style.display = 'none';
2727
- }
2728
- else {
2729
- // Signed in - show payment section
2730
- authSection.style.display = 'none';
2731
- paymentSection.style.display = 'block';
2732
- }
2733
- }
2734
- /**
2735
- * Event listener management
2736
- */
2737
- on(event, listener) {
2738
- if (!this.eventListeners.has(event)) {
2739
- this.eventListeners.set(event, []);
2740
- }
2741
- this.eventListeners.get(event).push(listener);
2742
- }
2743
- off(event, listener) {
2744
- const listeners = this.eventListeners.get(event);
2745
- if (listeners) {
2746
- const index = listeners.indexOf(listener);
2747
- if (index > -1) {
2748
- listeners.splice(index, 1);
2749
- }
2750
- }
2751
- }
2752
- emit(event, data) {
2753
- const listeners = this.eventListeners.get(event);
2754
- if (listeners) {
2755
- listeners.forEach(listener => {
2756
- try {
2757
- listener(data);
2758
- }
2759
- catch (error) {
2760
- console.error(`Error in ${event} listener:`, error);
2761
- }
2762
- });
2763
- }
2764
- }
2765
- validateConfig() {
2766
- if (!this.config.appId)
2767
- throw new Error('appId is required');
2768
- if (!this.config.supabase?.url)
2769
- throw new Error('supabase.url is required');
2770
- if (!this.config.supabase?.anonKey)
2771
- throw new Error('supabase.anonKey is required');
2772
- if (typeof this.config.freeDownloadLimit !== 'number' || this.config.freeDownloadLimit < 0) {
2773
- throw new Error('freeDownloadLimit must be a non-negative number');
2774
- }
2775
- }
2776
- async initializeSupabase() {
2777
- try {
2778
- this.supabase = supabaseJs.createClient(this.config.supabase.url, this.config.supabase.anonKey);
2779
- // Skip connection test - we'll detect connection issues during actual API calls
2780
- this.supabaseConnectionFailed = false;
2781
- }
2782
- catch (error) {
2783
- console.error('Failed to initialize Supabase:', error);
2784
- this.supabaseConnectionFailed = true;
2785
- }
2786
- }
2787
- async initializePayment() {
2788
- // Skip if no payment configuration
2789
- if (!this.config.payment) {
2790
- return;
2791
- }
2792
- // Validate product ID format
2793
- const productId = this.config.payment.productId;
2794
- if (!productId || !productId.startsWith('pdt_') || productId.length < 10) {
2795
- this.paymentConnectionFailed = true;
2796
- if (this.config.options?.debug) {
2797
- console.warn('Invalid payment product ID format:', productId);
2798
- }
2799
- return;
2800
- }
2801
- // For now, skip payment gateway connectivity test
2802
- // Only validate product ID format (which we already did above)
2803
- // In production, you can add actual DodoPayments API test here
2804
- this.paymentConnectionFailed = false;
2805
- }
2806
- async initializeFingerprint() {
2807
- try {
2808
- this.userFingerprint = await this.generateFingerprint();
2809
- }
2810
- catch (error) {
2811
- this.userFingerprint = crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
2812
- if (this.config.options?.debug) {
2813
- console.warn('Fingerprint generation failed, using fallback:', error);
2814
- }
2815
- }
2816
- }
2817
- async generateFingerprint() {
2818
- const ua = navigator.userAgent || '';
2819
- const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
2820
- const screenSize = `${screen.width}x${screen.height}`;
2821
- const lang = navigator.language || '';
2822
- const raw = `${ua}||${tz}||${screenSize}||${lang}`;
2823
- const buf = new TextEncoder().encode(raw);
2824
- const hashBuffer = await crypto.subtle.digest('SHA-256', buf);
2825
- const hashArray = Array.from(new Uint8Array(hashBuffer));
2826
- return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
2827
- }
2828
- async setupAuthListener() {
2829
- this.supabase.auth.onAuthStateChange(async (event, session) => {
2830
- const previousUser = this.currentUser;
2831
- this.currentUser = session?.user || null;
2832
- let isPremium = false;
2833
- if (this.currentUser) {
2834
- // Only check premium status if user changed or cache is expired
2835
- const userChanged = !previousUser || previousUser.email !== this.currentUser.email;
2836
- const cacheExpired = !this.cachedPremiumStatus || (Date.now() - this.premiumStatusCacheTime) > this.STATUS_CACHE_DURATION;
2837
- if (userChanged || cacheExpired) {
2838
- console.log(`🔥 [SUPABASE API] About to call checkPremiumStatus from setupAuthListener (userChanged: ${userChanged}, cacheExpired: ${cacheExpired})`);
2839
- isPremium = await this.checkPremiumStatus(this.currentUser.email);
2840
- // Cache the result
2841
- this.cachedPremiumStatus = isPremium;
2842
- this.premiumStatusCacheTime = Date.now();
2843
- }
2844
- else {
2845
- // Use cached result
2846
- isPremium = this.cachedPremiumStatus; // We know it's not null because cacheExpired is false
2847
- console.log(`🔍 [CACHE] Using cached premium status from auth listener: ${isPremium}`);
2848
- }
2849
- }
2850
- else {
2851
- // Clear cache when user logs out
2852
- this.cachedPremiumStatus = null;
2853
- this.premiumStatusCacheTime = 0;
2854
- }
2855
- // Check if user just signed in for upgrade flow
2856
- const urlParams = new URLSearchParams(window.location.search);
2857
- const isUpgradeFlow = urlParams.get('upgrade') === 'true';
2858
- if (event === 'SIGNED_IN' && !previousUser && this.currentUser && this.config.payment) {
2859
- // Check if this is an upgrade flow (from anonymous trial)
2860
- if (isUpgradeFlow) {
2861
- if (!isPremium) {
2862
- // User signed in for upgrade - redirect to payment immediately
2863
- const payment = await this.createPayment();
2864
- if (payment?.checkout_url) {
2865
- // Clean URL before redirect
2866
- window.history.replaceState({}, document.title, window.location.pathname);
2867
- window.location.href = payment.checkout_url;
2868
- }
2869
- }
2870
- else {
2871
- // User is already premium, just clean URL and close modal
2872
- window.history.replaceState({}, document.title, window.location.pathname);
2873
- const modal = document.getElementById('download-limiter-paywall');
2874
- if (modal) {
2875
- modal.classList.remove('show');
2876
- }
2877
- }
2878
- }
2879
- }
2880
- this.emit('authChanged', { user: this.currentUser, isPremium });
2881
- });
2882
- // Get initial auth state
2883
- const { data: { user } } = await this.supabase.auth.getUser();
2884
- this.currentUser = user;
2885
- }
2886
- async getDownloadCount() {
2887
- if (!this.userFingerprint)
2888
- return 0;
2889
- console.log(`🔥 [SUPABASE API] getDownloadCount called | Time: ${new Date().toISOString()}`);
2890
- try {
2891
- const response = await fetch(`${this.config.supabase.url}/functions/v1/check-download-limit`, {
2892
- method: 'POST',
2893
- headers: {
2894
- 'Content-Type': 'application/json',
2895
- 'Authorization': `Bearer ${this.config.supabase.anonKey}`
2896
- },
2897
- body: JSON.stringify({
2898
- fingerprint: this.userFingerprint,
2899
- app_id: this.config.appId,
2900
- action: 'check'
2901
- })
2902
- });
2903
- console.log(`🔥 [SUPABASE API] getDownloadCount response: ${response.status}`);
2904
- if (response.ok) {
2905
- const data = await response.json();
2906
- this.supabaseConnectionFailed = false; // Connection successful
2907
- return data.current_count || 0;
2908
- }
2909
- else {
2910
- // Handle auth errors (401/403) as connection failures
2911
- if (response.status === 401 || response.status === 403) {
2912
- console.warn(`Supabase authentication failed: ${response.status} - Invalid anon key`);
2913
- this.supabaseConnectionFailed = true;
2914
- }
2915
- }
2916
- }
2917
- catch (error) {
2918
- this.supabaseConnectionFailed = true; // Mark connection as failed
2919
- if (this.config.options?.debug) {
2920
- console.warn('Failed to get server usage count, connection failed:', error);
2921
- }
2922
- }
2923
- // Security: Do not fallback to localStorage when server connection fails
2924
- // This prevents users from bypassing limits by manipulating localStorage
2925
- return 0;
2926
- }
2927
- async incrementDownloadCount() {
2928
- if (!this.userFingerprint) {
2929
- // if (this.config.options?.debug) {
2930
- // console.warn('🔍 DEBUG: No userFingerprint available for incrementDownloadCount');
2931
- // }
2932
- return 0;
2933
- }
2934
- const requestBody = {
2935
- fingerprint: this.userFingerprint,
2936
- app_id: this.config.appId,
2937
- action: 'increment'
2938
- };
2939
- console.log(`🔥 [SUPABASE API] incrementDownloadCount called | Time: ${new Date().toISOString()}`);
2940
- try {
2941
- const response = await fetch(`${this.config.supabase.url}/functions/v1/check-download-limit`, {
2942
- method: 'POST',
2943
- headers: {
2944
- 'Content-Type': 'application/json',
2945
- 'Authorization': `Bearer ${this.config.supabase.anonKey}`
2946
- },
2947
- body: JSON.stringify(requestBody)
2948
- });
2949
- console.log(`🔥 [SUPABASE API] incrementDownloadCount response: ${response.status}`);
2950
- if (this.config.options?.debug) {
2951
- //console.log('🔍 DEBUG: Response status:', response.status);
2952
- if (!response.ok) {
2953
- const errorText = await response.text();
2954
- console.error('🔍 DEBUG: Error response:', errorText);
2955
- }
2956
- }
2957
- if (response.ok) {
2958
- const data = await response.json();
2959
- this.supabaseConnectionFailed = false; // Connection successful
2960
- return data.new_count || 0;
2961
- }
2962
- else {
2963
- // Handle auth errors (401/403) as connection failures
2964
- if (response.status === 401 || response.status === 403) {
2965
- console.warn(`Supabase authentication failed: ${response.status} - Invalid anon key`);
2966
- this.supabaseConnectionFailed = true;
2967
- }
2968
- }
2969
- }
2970
- catch (error) {
2971
- this.supabaseConnectionFailed = true; // Mark connection as failed
2972
- if (this.config.options?.debug) {
2973
- console.warn('Failed to increment server count, connection failed:', error);
2974
- }
2975
- }
2976
- // Security: Do not fallback to localStorage when server connection fails
2977
- // This prevents users from bypassing limits by manipulating localStorage
2978
- return 0;
2979
- }
2980
- async checkPremiumStatus(email) {
2981
- console.log(`🔥 [SUPABASE API] checkPremiumStatus called for email: ${email} | Time: ${new Date().toISOString()}`);
2982
- try {
2983
- const response = await fetch(`${this.config.supabase.url}/functions/v1/check-payment-status`, {
2984
- method: 'POST',
2985
- headers: {
2986
- 'Content-Type': 'application/json',
2987
- 'Authorization': `Bearer ${this.config.supabase.anonKey}`
2988
- },
2989
- body: JSON.stringify({
2990
- email,
2991
- app_id: this.config.appId
2992
- })
2993
- });
2994
- console.log(`🔥 [SUPABASE API] checkPremiumStatus response: ${response.status}`);
2995
- if (response.ok) {
2996
- const data = await response.json();
2997
- return data.status === 'completed';
2998
- }
2999
- }
3000
- catch (error) {
3001
- if (this.config.options?.debug) {
3002
- console.warn('Failed to check premium status:', error);
3003
- }
3004
- }
3005
- return false;
3006
- }
3007
- getLocalDownloadCount() {
3008
- const key = `download_count_${this.config.appId}`;
3009
- const val = parseInt(localStorage.getItem(key) || '0', 10);
3010
- return isNaN(val) ? 0 : val;
3011
- }
3012
- incrementLocalDownloadCount() {
3013
- const key = `download_count_${this.config.appId}`;
3014
- const next = this.getLocalDownloadCount() + 1;
3015
- localStorage.setItem(key, String(next));
3016
- return next;
3017
- }
3018
- handleError(error) {
3019
- if (this.config.options?.debug) {
3020
- console.error('Lead Fast Error:', error);
3021
- }
3022
- if (this.config.callbacks?.onError) {
3023
- this.config.callbacks.onError(error);
3024
- }
3025
- else {
3026
- // Default error handling
3027
- console.error('Lead Fast:', error.message);
3028
- }
3029
- this.emit('error', error);
3030
- }
3031
- async checkPaymentStatus() {
3032
- // Check if user returned from payment
3033
- const urlParams = new URLSearchParams(window.location.search);
3034
- if (urlParams.get('payment') === 'success') {
3035
- // Wait for auth to be ready
3036
- setTimeout(async () => {
3037
- if (this.currentUser) {
3038
- const isPremium = await this.checkPremiumStatus(this.currentUser.email);
3039
- if (isPremium) {
3040
- this.showSuccess('Payment Successful!', 'Welcome to premium! You now have unlimited usage.');
3041
- }
3042
- else {
3043
- this.showSuccess('Processing Payment', 'Payment is being processed. Please refresh in a few moments.');
3044
- }
3045
- }
3046
- else {
3047
- this.showSuccess('Processing Payment', 'Please wait while we verify your payment...');
3048
- }
3049
- // Clean up URL
3050
- const cleanUrl = window.location.href.split('?')[0];
3051
- window.history.replaceState({}, document.title, cleanUrl);
3052
- }, 2000);
3053
- }
3054
- }
3055
- }
3056
-
3057
- exports.MoneyBar = MoneyBar;
3058
- //# sourceMappingURL=index.cjs.js.map