fmard/pdf-api
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>Event Proposal - {{ event_name | default("Tech Summit 2024") }}</title>6 <style>7 * { margin: 0; padding: 0; box-sizing: border-box; }8 body {9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;10 color: #333;11 font-size: 14px;12 line-height: 1.6;13 padding: 40px;14 }15 .header {16 display: flex;17 justify-content: space-between;18 align-items: flex-start;19 margin-bottom: 30px;20 padding-bottom: 20px;21 border-bottom: 3px solid #4f46e5;22 }23 .company-info h1 { font-size: 22px; color: #4f46e5; margin-bottom: 5px; }24 .company-info p { color: #666; font-size: 13px; }25 .doc-meta { text-align: right; }26 .doc-meta h2 { font-size: 16px; color: #333; }27 .doc-meta p { font-size: 13px; color: #666; }28 .event-banner {29 background: linear-gradient(135deg, #4f46e5, #6366f1);30 color: white;31 padding: 25px;32 border-radius: 10px;33 text-align: center;34 margin-bottom: 30px;35 }36 .event-banner h2 { font-size: 22px; margin-bottom: 5px; }37 .event-banner p { opacity: 0.9; font-size: 14px; }38 .section-title {39 font-size: 16px;40 color: #4f46e5;41 margin-bottom: 12px;42 margin-top: 30px;43 padding-bottom: 6px;44 border-bottom: 2px solid #e5e7eb;45 }46 .info-grid {47 display: grid;48 grid-template-columns: repeat(2, 1fr);49 gap: 12px;50 margin-bottom: 25px;51 }52 .info-item {53 padding: 12px 15px;54 background: #f9fafb;55 border-radius: 6px;56 }57 .info-item .label { font-size: 11px; text-transform: uppercase; color: #999; }58 .info-item .value { font-weight: 600; }59 .concept-box {60 background: #f9fafb;61 padding: 20px;62 border-radius: 8px;63 border-left: 4px solid #4f46e5;64 margin-bottom: 25px;65 }66 table {67 width: 100%;68 border-collapse: collapse;69 margin-bottom: 25px;70 }71 thead th {72 background: #4f46e5;73 color: white;74 padding: 10px 12px;75 font-size: 11px;76 text-transform: uppercase;77 text-align: left;78 }79 tbody td { padding: 10px 12px; border-bottom: 1px solid #eee; font-size: 13px; }80 tbody tr:nth-child(even) { background: #f9fafb; }81 .total-row { font-weight: bold; background: #f0f0ff !important; }82 .timeline-item {83 display: flex;84 margin-bottom: 12px;85 padding: 10px 15px;86 background: #f9fafb;87 border-radius: 6px;88 border-left: 3px solid #4f46e5;89 }90 .timeline-date { width: 130px; font-weight: bold; color: #4f46e5; font-size: 13px; flex-shrink: 0; }91 .timeline-task { flex: 1; font-size: 13px; }92 .vendor-card {93 display: flex;94 gap: 15px;95 margin-bottom: 10px;96 padding: 12px;97 background: #f9fafb;98 border-radius: 6px;99 }100 .vendor-card .name { font-weight: bold; width: 200px; }101 .vendor-card .service { flex: 1; color: #666; }102 </style>103</head>104<body>105 <div class="header">106 <div class="company-info">107 <h1>{{ organizer_name | default("Momentum Events Co.") }}</h1>108 <p>Professional Event Management</p>109 <p>{{ organizer_address | default("Jl. Gatot Subroto Kav. 18, Jakarta 12930") }}</p>110 </div>111 <div class="doc-meta">112 <h2>EVENT PROPOSAL</h2>113 <p>Proposal No: {{ proposal_no | default("EVP-2024-0045") }}</p>114 <p>Date: {{ proposal_date | default("2024-02-01") }}</p>115 <p>Prepared for: {{ client_name | default("PT Global Teknologi") }}</p>116 </div>117 </div>118 119 <div class="event-banner">120 <h2>{{ event_name | default("Indonesia Tech Summit 2024") }}</h2>121 <p>{{ event_tagline | default("Connecting Innovation, Driving Transformation") }}</p>122 </div>123 124 <h3 class="section-title">Event Overview</h3>125 <div class="info-grid">126 <div class="info-item">127 <div class="label">Event Type</div>128 <div class="value">{{ event_type | default("Corporate Conference & Expo") }}</div>129 </div>130 <div class="info-item">131 <div class="label">Date</div>132 <div class="value">{{ event_date | default("March 20-21, 2024") }}</div>133 </div>134 <div class="info-item">135 <div class="label">Venue</div>136 <div class="value">{{ venue | default("Jakarta Convention Center, Hall A") }}</div>137 </div>138 <div class="info-item">139 <div class="label">Expected Attendees</div>140 <div class="value">{{ attendees | default("500-600 pax") }}</div>141 </div>142 <div class="info-item">143 <div class="label">Target Audience</div>144 <div class="value">{{ audience | default("C-level executives, IT Directors, Tech entrepreneurs") }}</div>145 </div>146 <div class="info-item">147 <div class="label">Format</div>148 <div class="value">{{ format | default("Keynotes, Panel Discussions, Expo Booths, Networking") }}</div>149 </div>150 </div>151 152 <h3 class="section-title">Event Concept</h3>153 <div class="concept-box">154 <p>{{ concept | default("Indonesia Tech Summit 2024 brings together the nation's leading technology innovators, corporate decision-makers, and startup ecosystem players for two days of knowledge sharing, networking, and business matchmaking. The event features world-class keynote speakers, interactive panel discussions on AI, Cloud, and Digital Transformation, a technology expo showcasing 30+ companies, and curated networking sessions designed to foster meaningful business connections.") }}</p>155 </div>156 157 <h3 class="section-title">Event Objectives</h3>158 <ul style="padding-left: 20px; margin-bottom: 25px;">159 {% for objective in objectives | default(["Position client as thought leader in Indonesia's tech ecosystem", "Generate 200+ qualified leads for sales pipeline", "Strengthen partnerships with 10 key technology vendors", "Achieve 90%+ attendee satisfaction rating", "Secure media coverage in 5+ tier-1 publications"]) %}160 <li style="margin-bottom: 6px;">{{ objective }}</li>161 {% endfor %}162 </ul>163 164 <h3 class="section-title">Budget Breakdown</h3>165 <table>166 <thead>167 <tr>168 <th>Category</th>169 <th>Description</th>170 <th>Amount (IDR)</th>171 <th>%</th>172 </tr>173 </thead>174 <tbody>175 {% for item in budget | default([176 {"category": "Venue & Facilities", "description": "Hall rental, AV equipment, furniture", "amount": "120,000,000", "pct": "24%"},177 {"category": "Catering", "description": "Lunch, coffee breaks, gala dinner (600 pax)", "amount": "90,000,000", "pct": "18%"},178 {"category": "Production", "description": "Stage, lighting, LED screens, sound", "amount": "85,000,000", "pct": "17%"},179 {"category": "Speakers & Talent", "description": "Honorarium, travel, accommodation", "amount": "60,000,000", "pct": "12%"},180 {"category": "Marketing & PR", "description": "Digital ads, media, printed materials", "amount": "50,000,000", "pct": "10%"},181 {"category": "Decoration & Branding", "description": "Booth design, signage, flowers", "amount": "35,000,000", "pct": "7%"},182 {"category": "Technology", "description": "Registration system, live streaming, app", "amount": "25,000,000", "pct": "5%"},183 {"category": "Management Fee", "description": "Planning, coordination, execution", "amount": "25,000,000", "pct": "5%"},184 {"category": "Contingency", "description": "Unexpected costs buffer", "amount": "10,000,000", "pct": "2%"}185 ]) %}186 <tr>187 <td><strong>{{ item.category }}</strong></td>188 <td>{{ item.description }}</td>189 <td style="text-align: right;">{{ item.amount }}</td>190 <td>{{ item.pct }}</td>191 </tr>192 {% endfor %}193 <tr class="total-row">194 <td colspan="2">TOTAL BUDGET</td>195 <td style="text-align: right;">{{ total_budget | default("500,000,000") }}</td>196 <td>100%</td>197 </tr>198 </tbody>199 </table>200 201 <h3 class="section-title">Project Timeline</h3>202 {% for milestone in timeline | default([203 {"date": "Feb 1-15", "task": "Proposal approval & contract signing"},204 {"date": "Feb 16-28", "task": "Venue booking, speaker confirmation, vendor selection"},205 {"date": "Mar 1-7", "task": "Marketing launch, registration opens, sponsor outreach"},206 {"date": "Mar 8-14", "task": "Content finalization, production planning, rehearsal scheduling"},207 {"date": "Mar 15-19", "task": "Setup, technical rehearsal, final coordination"},208 {"date": "Mar 20-21", "task": "EVENT DAYS - Execution"},209 {"date": "Mar 22-31", "task": "Post-event report, feedback analysis, vendor settlement"}210 ]) %}211 <div class="timeline-item">212 <div class="timeline-date">{{ milestone.date }}</div>213 <div class="timeline-task">{{ milestone.task }}</div>214 </div>215 {% endfor %}216 217 <h3 class="section-title">Recommended Vendors</h3>218 {% for vendor in vendors | default([219 {"name": "SoundVision Pro", "service": "Audio visual, staging, LED screens"},220 {"name": "Gourmet Catering Co.", "service": "F&B, coffee breaks, gala dinner"},221 {"name": "Digital First Agency", "service": "Marketing, social media, PR"},222 {"name": "EventTech Solutions", "service": "Registration platform, event app, live streaming"},223 {"name": "Flora & Décor", "service": "Venue decoration, floral arrangements, signage"}224 ]) %}225 <div class="vendor-card">226 <div class="name">{{ vendor.name }}</div>227 <div class="service">{{ vendor.service }}</div>228 </div>229 {% endfor %}230 231 <h3 class="section-title" style="margin-top: 30px;">Terms</h3>232 <div style="font-size: 13px; color: #555;">233 <ul style="padding-left: 20px;">234 <li>This proposal is valid for {{ validity | default("14 days") }} from the date of issue.</li>235 <li>50% deposit required upon confirmation, balance due 7 days before event.</li>236 <li>Prices exclude VAT (11%) unless otherwise stated.</li>237 <li>Changes to scope after confirmation may incur additional charges.</li>238 </ul>239 </div>240 241 <div style="margin-top: 40px; display: flex; justify-content: space-between;">242 <div style="width: 40%; text-align: center;">243 <div style="border-top: 1px solid #333; margin-top: 50px; padding-top: 8px; font-size: 12px;">244 {{ proposer_name | default("Sarah Natasha") }}<br>245 <small>Event Director, {{ organizer_name | default("Momentum Events Co.") }}</small>246 </div>247 </div>248 <div style="width: 40%; text-align: center;">249 <div style="border-top: 1px solid #333; margin-top: 50px; padding-top: 8px; font-size: 12px;">250 {{ client_rep | default("Mr. Hendro Kusuma") }}<br>251 <small>Accepted by Client</small>252 </div>253 </div>254 </div>255</body>256</html>257