fmard/pdf-api
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>{{ title | default("Promotional Flyer") }}</title>6 <style>7 * { margin: 0; padding: 0; box-sizing: border-box; }8 body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 40px; font-size: 14px; line-height: 1.6; color: #1a1a2e; }9 .flyer-container { border: 3px solid #4f46e5; border-radius: 16px; overflow: hidden; }10 .top-banner { background: #4f46e5; color: white; padding: 40px; text-align: center; }11 .top-banner .badge { display: inline-block; background: rgba(255,255,255,0.2); padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }12 .top-banner h1 { font-size: 36px; margin-bottom: 10px; }13 .top-banner .subtitle { font-size: 18px; opacity: 0.9; }14 .content { padding: 35px; }15 .hero-image { width: 100%; height: 200px; background: #e8eaff; border: 2px dashed #4f46e5; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #4f46e5; font-weight: bold; font-size: 14px; margin-bottom: 25px; }16 .highlight-text { font-size: 20px; color: #4f46e5; font-weight: bold; text-align: center; margin-bottom: 25px; }17 .features { display: flex; gap: 20px; margin-bottom: 30px; }18 .feature { flex: 1; text-align: center; padding: 20px; background: #f8f9ff; border-radius: 10px; }19 .feature .icon { font-size: 28px; margin-bottom: 10px; }20 .feature h3 { font-size: 14px; color: #4f46e5; margin-bottom: 6px; }21 .feature p { font-size: 12px; color: #666; }22 .offer-box { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); color: white; padding: 25px; border-radius: 10px; text-align: center; margin-bottom: 25px; }23 .offer-box .price { font-size: 36px; font-weight: bold; }24 .offer-box .original-price { text-decoration: line-through; opacity: 0.7; font-size: 18px; }25 .offer-box .offer-label { font-size: 14px; opacity: 0.9; margin-top: 5px; }26 .details-list { list-style: none; padding: 0; margin-bottom: 25px; }27 .details-list li { padding: 10px 0; border-bottom: 1px solid #eee; padding-left: 25px; position: relative; }28 .details-list li::before { content: "✓"; position: absolute; left: 0; color: #4f46e5; font-weight: bold; }29 .cta-section { text-align: center; padding: 25px; background: #f8f9ff; border-radius: 10px; }30 .cta-section h2 { color: #4f46e5; margin-bottom: 10px; font-size: 20px; }31 .cta-section p { color: #666; margin-bottom: 5px; }32 .cta-section .phone { font-size: 22px; color: #4f46e5; font-weight: bold; }33 .bottom-bar { background: #4f46e5; color: white; padding: 15px; text-align: center; font-size: 12px; }34 </style>35</head>36<body>37 <div class="flyer-container">38 <div class="top-banner">39 <div class="badge">{{ badge | default("Limited Time Offer") }}</div>40 <h1>{{ title | default("Grand Opening Sale!") }}</h1>41 <div class="subtitle">{{ subtitle | default("Don't Miss Our Biggest Event of the Year") }}</div>42 </div>43 44 <div class="content">45 <div class="hero-image">[{{ image_label | default("Event/Product Image") }}]</div>46 47 <div class="highlight-text">{{ highlight | default("Save Up to 50% on All Products & Services") }}</div>48 49 <div class="features">50 {% for feature in features | default([{"icon": "🎯", "title": "Premium Quality", "description": "Top-tier products and services"}, {"icon": "💰", "title": "Best Prices", "description": "Unbeatable value guaranteed"}, {"icon": "🚀", "title": "Fast Delivery", "description": "Same-day service available"}]) %}51 <div class="feature">52 <div class="icon">{{ feature.icon }}</div>53 <h3>{{ feature.title }}</h3>54 <p>{{ feature.description }}</p>55 </div>56 {% endfor %}57 </div>58 59 {% if show_offer | default(true) %}60 <div class="offer-box">61 <div class="original-price">{{ original_price | default("$199.99") }}</div>62 <div class="price">{{ sale_price | default("$99.99") }}</div>63 <div class="offer-label">{{ offer_label | default("Special Launch Price — This Weekend Only!") }}</div>64 </div>65 {% endif %}66 67 <ul class="details-list">68 {% for item in details | default(["Free consultation included with every purchase", "No hidden fees or contracts", "100% satisfaction guarantee", "Valid from March 1–15, 2024"]) %}69 <li>{{ item }}</li>70 {% endfor %}71 </ul>72 73 <div class="cta-section">74 <h2>{{ cta_title | default("Visit Us Today!") }}</h2>75 <p>{{ address | default("123 Main Street, Downtown, NY 10001") }}</p>76 <p class="phone">{{ phone | default("(555) 987-6543") }}</p>77 <p>{{ website | default("www.acmecorp.com/sale") }}</p>78 </div>79 </div>80 81 <div class="bottom-bar">82 {{ footer_text | default("Acme Corporation — Quality You Can Trust Since 2009") }}83 </div>84 </div>85</body>86</html>87