(inspirationId, title, htmlContent, cssContent)
| 431 | } |
| 432 | |
| 433 | async generateCompleteDemo(inspirationId, title, htmlContent, cssContent) { |
| 434 | if (!cssContent) return; |
| 435 | |
| 436 | const completeHTML = `<!DOCTYPE html> |
| 437 | <html lang="zh-CN"> |
| 438 | <head> |
| 439 | <meta charset="UTF-8"> |
| 440 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 441 | <title>${title}</title> |
| 442 | <style> |
| 443 | * { |
| 444 | margin: 0; |
| 445 | padding: 0; |
| 446 | box-sizing: border-box; |
| 447 | } |
| 448 | |
| 449 | body { |
| 450 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
| 451 | min-height: 100vh; |
| 452 | display: flex; |
| 453 | align-items: center; |
| 454 | justify-content: center; |
| 455 | background: #f5f5f5; |
| 456 | } |
| 457 | |
| 458 | ${cssContent} |
| 459 | </style> |
| 460 | </head> |
| 461 | <body> |
| 462 | ${htmlContent || '<div class="demo-container">CSS Demo</div>'} |
| 463 | </body> |
| 464 | </html>`; |
| 465 | |
| 466 | const insertDemoSQL = ` |
| 467 | INSERT OR REPLACE INTO demo_styles |
| 468 | (inspiration_id, complete_html, complete_css, is_interactive) |
| 469 | VALUES (?, ?, ?, ?) |
| 470 | `; |
| 471 | |
| 472 | const isInteractive = cssContent.includes(':hover') || |
| 473 | cssContent.includes('animation') || |
| 474 | cssContent.includes('transition'); |
| 475 | |
| 476 | await new Promise((resolve, reject) => { |
| 477 | this.db.run( |
| 478 | insertDemoSQL, |
| 479 | [inspirationId, completeHTML, cssContent, isInteractive ? 1 : 0], |
| 480 | (err) => { |
| 481 | if (err) reject(err); |
| 482 | else resolve(); |
| 483 | } |
| 484 | ); |
| 485 | }); |
| 486 | } |
| 487 | |
| 488 | async fetchAllInspirations() { |
| 489 | console.log('🚀 Starting to fetch CSS-Inspiration repository contents...'); |
no test coverage detected