PluginProbe
Easy Invoice – Invoice Generator, PDF Quotes & Payments / 2.4.0
Easy Invoice – Invoice Generator, PDF Quotes & Payments v2.4.0
2.4.0 2.4.1 2.3.8 2.3.7 2.3.6 2.3.5 2.3.4 2.3.3 2.3.2 2.3.1 2.2.0 2.1.21 2.1.20 2.1.19 2.1.18 2.1.0 2.1.1 2.1.10 2.1.11 2.1.12 2.1.13 2.1.14 2.1.15 2.1.16 2.1.2 All 57 releases
easy-invoice / templates / invoice-templates / creative.php

creative.php in Easy Invoice – Invoice Generator, PDF Quotes & Payments 2.4.0, at templates/invoice-templates/creative.php

636 lines 21.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Creative Template - Artistic Design
4 * Creative, artistic, and innovative invoice template
5 */
6
7 if ( ! defined( 'ABSPATH' ) ) {
8 exit;
9 }
10 $text_settings = \EasyInvoice\Helpers\TemplateTextHelper::forDocument(\EasyInvoice\Helpers\TemplateTextHelper::getInvoiceTextSettings(), $invoice);
11 $ei_is_credit_note = \EasyInvoice\Helpers\TemplateTextHelper::isCreditNote($invoice);
12 $company_info = \EasyInvoice\Helpers\TemplateTextHelper::getCompanyInfo();
13 ?>
14 <style>
15 /* Creative Template - Artistic Design */
16 :root {
17 --primary-color: #8b5cf6;
18 --primary-light: #d946ef;
19 --primary-dark: #7c3aed;
20 --secondary-color: #06b6d4;
21 --accent-color: #f59e0b;
22 --success-color: #10b981;
23 --warning-color: #f59e0b;
24 --error-color: #ef4444;
25 --text-primary: #1e293b;
26 --text-secondary: #64748b;
27 --text-muted: #94a3b8;
28 --border-color: #e2e8f0;
29 --border-light: #f1f5f9;
30 --background-primary: #ffffff;
31 --background-secondary: #f8fafc;
32 --background-accent: #f1f5f9;
33
34 --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
35 --font-family-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
36
37 --font-size-xs: 0.75rem;
38 --font-size-sm: 0.875rem;
39 --font-size-base: 1rem;
40 --font-size-lg: 1.125rem;
41 --font-size-xl: 1.25rem;
42 --font-size-2xl: 1.5rem;
43 --font-size-3xl: 1.875rem;
44 --font-size-4xl: 2.25rem;
45
46 --spacing-1: 0.25rem;
47 --spacing-2: 0.5rem;
48 --spacing-3: 0.75rem;
49 --spacing-4: 1rem;
50 --spacing-5: 1.25rem;
51 --spacing-6: 1.5rem;
52 --spacing-8: 2rem;
53 --spacing-10: 2.5rem;
54 --spacing-12: 3rem;
55 --spacing-16: 4rem;
56 --spacing-20: 5rem;
57
58 --radius-sm: 0.25rem;
59 --radius-md: 0.375rem;
60 --radius-lg: 0.5rem;
61 --radius-xl: 0.75rem;
62 --radius-2xl: 1rem;
63
64 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
65 --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
66 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
67 --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
68 --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
69 }
70
71 .template-creative {
72 font-family: var(--font-family);
73 background: var(--background-primary);
74 color: var(--text-primary);
75 max-width: 1000px;
76 margin: 0 auto;
77 padding: var(--spacing-8);
78 box-shadow: var(--shadow-2xl);
79 border-radius: var(--radius-2xl);
80 line-height: 1.6;
81 position: relative;
82 overflow: hidden;
83 }
84
85 .template-creative::before {
86 content: '';
87 position: absolute;
88 top: 0;
89 left: 0;
90 right: 0;
91 height: 8px;
92 background: var(--primary-color);
93 }
94
95 /* Header Section */
96 .template-creative .invoice-header {
97 display: grid;
98 grid-template-columns: 1fr auto;
99 gap: var(--spacing-8);
100 margin-bottom: var(--spacing-12);
101 padding-bottom: var(--spacing-8);
102 border-bottom: 2px solid var(--border-light);
103 position: relative;
104 }
105
106 .template-creative .invoice-header::after {
107 content: '';
108 position: absolute;
109 bottom: -2px;
110 left: 0;
111 width: 120px;
112 height: 2px;
113 background: var(--primary-color);
114 border-radius: var(--radius-sm);
115 }
116
117 .template-creative .company-info {
118 display: flex;
119 flex-direction: column;
120 gap: var(--spacing-4);
121 }
122
123 .template-creative .company-logo {
124 margin-bottom: 0;
125 }
126
127 .template-creative .logo-image {
128 max-height: 60px;
129 max-width: 200px;
130 object-fit: contain;
131 filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
132 }
133
134 .template-creative .company-name {
135 font-family: var(--font-family-heading);
136 font-size: var(--font-size-2xl);
137 font-weight: 700;
138 color: var(--text-primary);
139 margin-bottom: var(--spacing-3);
140 line-height: 1.2;
141 }
142
143 .template-creative .company-details {
144 color: var(--text-secondary);
145 font-size: var(--font-size-sm);
146 line-height: 1.5;
147 }
148
149 .template-creative .invoice-meta {
150 display: flex;
151 flex-direction: column;
152 gap: var(--spacing-4);
153 background: var(--background-secondary);
154 padding: var(--spacing-6);
155 border-radius: var(--radius-lg);
156 border: 1px solid var(--border-color);
157 min-width: 300px;
158 box-shadow: var(--shadow-md);
159 position: relative;
160 overflow: hidden;
161 }
162
163 .template-creative .invoice-meta::before {
164 content: '';
165 position: absolute;
166 top: 0;
167 left: 0;
168 right: 0;
169 height: 3px;
170 background: var(--primary-color);
171 }
172
173 .template-creative .invoice-title {
174 font-family: var(--font-family-heading);
175 font-size: var(--font-size-2xl);
176 font-weight: 700;
177 color: var(--primary-color);
178 margin-bottom: var(--spacing-4);
179 text-align: center;
180 text-transform: uppercase;
181 letter-spacing: -0.025em;
182 }
183
184 .template-creative .meta-item {
185 display: flex;
186 justify-content: space-between;
187 align-items: center;
188 padding: var(--spacing-3) 0;
189 border-bottom: 1px solid var(--border-light);
190 }
191
192 .template-creative .meta-item:last-child {
193 border-bottom: none;
194 }
195
196 .template-creative .meta-label {
197 font-size: var(--font-size-sm);
198 color: var(--text-secondary);
199 font-weight: 500;
200 }
201
202 .template-creative .meta-value {
203 font-size: var(--font-size-base);
204 color: var(--text-primary);
205 font-weight: 600;
206 }
207
208 /* Address Section */
209 .template-creative .address-section {
210 display: grid;
211 grid-template-columns: 1fr 1fr;
212 gap: var(--spacing-8);
213 margin-bottom: var(--spacing-12);
214 }
215
216 .template-creative .address-block {
217 background: var(--background-secondary);
218 padding: var(--spacing-6);
219 border-radius: var(--radius-lg);
220 border: 1px solid var(--border-color);
221 position: relative;
222 overflow: hidden;
223 }
224
225 .template-creative .address-block::before {
226 content: '';
227 position: absolute;
228 top: 0;
229 left: 0;
230 right: 0;
231 height: 3px;
232 background: var(--primary-color);
233 }
234
235 .template-creative .address-block h2 {
236 font-family: var(--font-family-heading);
237 font-size: var(--font-size-lg);
238 font-weight: 600;
239 color: var(--text-primary);
240 margin-bottom: var(--spacing-4);
241 text-transform: uppercase;
242 letter-spacing: 0.05em;
243 }
244
245 .template-creative .client-name {
246 font-weight: 600;
247 color: var(--text-primary);
248 font-size: var(--font-size-base);
249 margin-bottom: var(--spacing-2);
250 }
251
252 .template-creative .address-content {
253 color: var(--text-secondary);
254 font-size: var(--font-size-sm);
255 line-height: 1.5;
256 }
257
258 /* Invoice Items Table */
259 .template-creative .invoice-items {
260 width: 100%;
261 border-collapse: collapse;
262 margin-bottom: var(--spacing-12);
263 background: var(--background-primary);
264 border-radius: var(--radius-lg);
265 overflow: hidden;
266 box-shadow: var(--shadow-lg);
267 border: 1px solid var(--border-color);
268 }
269
270 .template-creative .invoice-items th {
271 background: var(--primary-color);
272 color: white;
273 font-weight: 600;
274 text-align: left;
275 padding: var(--spacing-4) var(--spacing-6);
276 font-size: var(--font-size-sm);
277 text-transform: uppercase;
278 letter-spacing: 0.05em;
279 }
280
281 .template-creative .invoice-items td {
282 padding: var(--spacing-4) var(--spacing-6);
283 border-bottom: 1px solid var(--border-light);
284 vertical-align: top;
285 }
286
287 .template-creative .invoice-items tr:last-child td {
288 border-bottom: none;
289 }
290
291 .template-creative .invoice-items tr:hover {
292 background: var(--background-accent);
293 }
294
295 .template-creative .item-name .item-title {
296 font-weight: 600;
297 color: var(--text-primary);
298 margin-bottom: var(--spacing-1);
299 }
300
301 .template-creative .item-description {
302 color: var(--text-muted);
303 font-size: var(--font-size-sm);
304 line-height: 1.4;
305 font-weight: normal;
306 }
307
308 .template-creative .item-quantity,
309 .template-creative .item-price,
310 .template-creative .item-total {
311 text-align: right;
312 font-weight: 500;
313 color: var(--text-primary);
314 }
315
316 /* Invoice Totals */
317 .template-creative .invoice-totals {
318 margin-left: auto;
319 width: 400px;
320 background: var(--background-secondary);
321 padding: var(--spacing-8);
322 border-radius: var(--radius-lg);
323 border: 1px solid var(--border-color);
324 box-shadow: var(--shadow-md);
325 position: relative;
326 overflow: hidden;
327 }
328
329 .template-creative .invoice-totals::before {
330 content: '';
331 position: absolute;
332 top: 0;
333 left: 0;
334 right: 0;
335 height: 3px;
336 background: var(--primary-color);
337 }
338
339 .template-creative .invoice-total-row {
340 display: flex;
341 justify-content: space-between;
342 align-items: center;
343 padding: var(--spacing-3) 0;
344 border-bottom: 1px solid var(--border-light);
345 }
346
347 .template-creative .invoice-total-row:last-child {
348 border-bottom: none;
349 }
350
351 .template-creative .invoice-total-label {
352 font-weight: 500;
353 color: var(--text-secondary);
354 }
355
356 .template-creative .invoice-total-value {
357 font-weight: 600;
358 color: var(--text-primary);
359 }
360
361 .template-creative .invoice-totals .invoice-grand-total {
362 font-size: var(--font-size-xl);
363 font-weight: 700;
364 color: var(--primary-color);
365 border-top: 2px solid var(--primary-color);
366 padding-top: var(--spacing-4);
367 margin-top: var(--spacing-4);
368 }
369
370 /* Notes Section */
371 .template-creative .invoice-notes {
372 margin-top: var(--spacing-8);
373 padding: var(--spacing-6);
374 background: var(--background-secondary);
375 border-radius: var(--radius-lg);
376 border: 1px solid var(--border-color);
377 }
378
379 .template-creative .invoice-notes h3 {
380 font-family: var(--font-family-heading);
381 font-size: var(--font-size-lg);
382 font-weight: 600;
383 color: var(--text-primary);
384 margin-bottom: var(--spacing-3);
385 border-bottom: 1px solid var(--border-color);
386 padding-bottom: var(--spacing-2);
387 }
388
389 .template-creative .notes-content {
390 color: var(--text-secondary);
391 font-size: var(--font-size-sm);
392 line-height: 1.6;
393 }
394
395 .template-creative .invoice-terms {
396 margin-top: var(--spacing-8);
397 padding: var(--spacing-6);
398 background: var(--background-secondary);
399 border-radius: var(--radius-lg);
400 border: 1px solid var(--border-color);
401 }
402
403 .template-creative .invoice-terms h3 {
404 font-family: var(--font-family-heading);
405 font-size: var(--font-size-lg);
406 font-weight: 600;
407 color: var(--text-primary);
408 margin-bottom: var(--spacing-3);
409 border-bottom: 1px solid var(--border-color);
410 padding-bottom: var(--spacing-2);
411 }
412
413 .template-creative .terms-content {
414 color: var(--text-secondary);
415 font-size: var(--font-size-sm);
416 line-height: 1.6;
417 }
418
419 .template-creative .invoice-footer {
420 margin-top: var(--spacing-8);
421 padding-top: var(--spacing-6);
422 border-top: 2px solid var(--border-light);
423 text-align: center;
424 color: var(--text-secondary);
425 font-size: var(--font-size-sm);
426 }
427
428 /* Responsive Design */
429 @media (max-width: 768px) {
430 .template-creative {
431 padding: var(--spacing-4);
432 }
433
434 .template-creative .invoice-header {
435 grid-template-columns: 1fr;
436 gap: var(--spacing-6);
437 }
438
439 .template-creative .invoice-meta {
440 min-width: auto;
441 }
442
443 .template-creative .address-section {
444 grid-template-columns: 1fr;
445 gap: var(--spacing-6);
446 }
447
448 .template-creative .invoice-totals {
449 width: 100%;
450 }
451 }
452
453 /* Shared polish: numbers line up, numeric headings sit over their figures. */
454 .template-creative .invoice-items th + th { text-align: right; }
455 .template-creative .invoice-items .item-quantity,
456 .template-creative .invoice-items .item-price,
457 .template-creative .invoice-items .item-adjust,
458 .template-creative .invoice-items .item-total,
459 .template-creative .invoice-total-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
460 .template-creative .meta-value { white-space: nowrap; }
461 .template-creative .invoice-items .item-adjust { text-align: right; }
462 .template-creative .client-contact { font-weight: 500; margin-bottom: 0.15em; }
463 .template-creative .client-tax-number,
464 .template-creative .company-tax-number { margin-top: 0.35em; }
465 .template-creative .invoice-items .item-description { white-space: pre-line; }
466
467 /* Creative: one bold gradient carries the character; everything else stays quiet. */
468 .template-creative::before { height: 10px; background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); }
469 .template-creative .invoice-header::after { background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); }
470 .template-creative .invoice-meta { border-radius: var(--radius-xl); }
471 .template-creative .invoice-title { color: var(--primary-dark); }
472 .template-creative .address-block { border-radius: var(--radius-xl); }
473 .template-creative .address-block::before { background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); }
474 .template-creative .invoice-items { border-radius: var(--radius-xl); }
475 .template-creative .invoice-items thead { background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); }
476 .template-creative .invoice-items th { background: transparent; }
477 .template-creative .invoice-items tbody tr:nth-child(even) td { background: var(--background-accent); }
478 .template-creative .invoice-items tr:hover { background: transparent; }
479 .template-creative .invoice-totals { border-radius: var(--radius-xl); }
480 .template-creative .invoice-totals .invoice-grand-total { color: var(--primary-dark); border-top: 2px solid var(--primary-light); }
481 .template-creative .invoice-notes, .template-creative .invoice-terms { border-radius: var(--radius-xl); }
482 .template-creative .document-kind { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted, #8a8a8a); font-family: var(--font-family-body, inherit); font-style: normal; margin-bottom: 0.3em; line-height: 1.2; }
483 .template-creative .invoice-totals .invoice-paid-row .invoice-total-value { color: var(--success-color, #047857); }
484 .template-creative .invoice-totals .invoice-balance-due { font-weight: 700; }
485 .template-creative .invoice-totals .invoice-balance-due .invoice-total-label { color: inherit; font-weight: 700; }
486 .template-creative .meta-amount-due .meta-value { font-weight: 700; font-size: 1.08em; }
487 </style>
488
489 <div class="template template-creative">
490 <div class="invoice-header">
491 <div class="company-info">
492 <?php if (!empty($company_info['logo'])): ?>
493 <div class="company-logo">
494 <img src="<?php echo esc_url($company_info['logo']); ?>" alt="<?php echo esc_attr($company_info['name']); ?>" class="logo-image" onerror="this.parentNode.parentNode.removeChild(this.parentNode)">
495 </div>
496 <?php endif; ?>
497 <div class="company-name"><?php echo esc_html($company_info['name']); ?></div>
498 <div class="company-details">
499 <?php echo wp_kses_post(\EasyInvoice\Helpers\TemplateTextHelper::generateFromSection($company_info, false, 'details-only')); ?>
500 </div>
501 </div>
502
503 <div class="invoice-meta">
504 <?php $ei_kind = \EasyInvoice\Helpers\TemplateTextHelper::documentKind($invoice); $ei_title = trim((string) $invoice->getTitle()); ?>
505 <div class="invoice-title"><?php if ('' !== $ei_title && 0 !== strcasecmp($ei_title, $ei_kind)) : ?><span class="document-kind"><?php echo esc_html($ei_kind); ?></span><?php endif; ?><?php echo esc_html('' !== $ei_title ? $ei_title : $ei_kind); ?></div>
506 <div class="meta-item">
507 <span class="meta-label"><?php echo esc_html($text_settings['invoice_number']); ?></span>
508 <span class="meta-value"><?php echo esc_html($invoice->getNumber()); ?></span>
509 </div>
510 <div class="meta-item">
511 <span class="meta-label"><?php echo esc_html($text_settings['invoice_date']); ?></span>
512 <span class="meta-value"><?php echo esc_html(\EasyInvoice\Controllers\SettingsController::formatDate($invoice->getIssueDate())); ?></span>
513 </div>
514 <?php if (empty($ei_is_credit_note)) : ?>
515 <div class="meta-item">
516 <span class="meta-label"><?php echo esc_html($text_settings['due_date']); ?></span>
517 <span class="meta-value"><?php echo esc_html(\EasyInvoice\Controllers\SettingsController::formatDate($invoice->getDueDate())); ?></span>
518 </div>
519 <?php endif; ?>
520 <?php if (empty($ei_is_credit_note)) : ?>
521 <div class="meta-item meta-amount-due">
522 <span class="meta-label"><?php echo esc_html($text_settings['total_due']); ?></span>
523 <span class="meta-value"><?php echo esc_html($formatter->format(\EasyInvoice\Helpers\TemplateTextHelper::amountDue($invoice))); ?></span>
524 </div>
525 <?php endif; ?>
526 </div>
527 </div>
528
529 <?php $ei_client_html = \EasyInvoice\Helpers\TemplateTextHelper::generateClientBlock($invoice); if ('' !== $ei_client_html) : ?>
530 <div class="address-section">
531 <div class="address-block">
532 <h2><?php echo esc_html($text_settings['to']); ?></h2>
533 <div class="address-content">
534 <?php echo wp_kses_post($ei_client_html); ?>
535 </div>
536 </div>
537 </div>
538 <?php endif; ?>
539
540 <?php
541 // The adjustment column appears only when at least one line uses it.
542 $ei_show_adjust = \EasyInvoice\Controllers\SettingsController::shouldShowInvoiceAdjustField();
543 if ($ei_show_adjust) {
544 $ei_show_adjust = false;
545 foreach ($invoice->getItems() as $ei_item) {
546 if ((float) $ei_item->getAdjustPercentage() != 0.0) { $ei_show_adjust = true; break; }
547 }
548 }
549 ?>
550 <table class="invoice-items">
551 <thead>
552 <tr>
553 <th><?php echo esc_html($text_settings['service']); ?></th>
554 <th><?php echo esc_html($text_settings['qty']); ?></th>
555 <th><?php echo esc_html($text_settings['rate_price']); ?></th>
556 <?php if ($ei_show_adjust): ?>
557 <th><?php echo esc_html($text_settings['adjust']); ?> (%)</th>
558 <?php endif; ?>
559 <th><?php echo esc_html($text_settings['line_total'] ?? $text_settings['total']); ?></th>
560 </tr>
561 </thead>
562 <tbody>
563 <?php if (!$invoice->getItems()) : ?>
564 <tr class="no-items"><td colspan="<?php echo $ei_show_adjust ? 5 : 4; ?>" style="text-align:center;color:#9ca3af;padding:18px;"><?php esc_html_e('No items yet.', 'easy-invoice'); ?></td></tr>
565 <?php endif; ?>
566 <?php foreach ($invoice->getItems() as $item): ?>
567 <tr>
568 <td class="item-name">
569 <div class="item-title"><?php echo esc_html($item->getName()); ?></div>
570 <?php if ($item->getDescription()): ?>
571 <div class="item-description"><?php echo esc_html($item->getDescription()); ?></div>
572 <?php endif; ?>
573 </td>
574 <td class="item-quantity"><?php echo esc_html($item->getQuantity() ?: '0'); ?></td>
575 <td class="item-price"><?php echo esc_html($formatter->format($item->getPrice())); ?></td>
576 <?php if ($ei_show_adjust): ?>
577 <td class="item-adjust"><?php
578 $adjust_percentage = $item->getAdjustPercentage();
579 if ($adjust_percentage != 0) {
580 echo esc_html($adjust_percentage > 0 ? '+' : '') . esc_html($adjust_percentage) . '%';
581 } else {
582 echo esc_html__('—', 'easy-invoice');
583 }
584 ?></td>
585 <?php endif; ?>
586 <td class="item-total"><?php echo esc_html($formatter->format($item->getAmount())); ?></td>
587 </tr>
588 <?php endforeach; ?>
589 </tbody>
590 </table>
591
592 <div class="invoice-totals">
593 <?php echo wp_kses_post(\EasyInvoice\Helpers\TemplateTextHelper::generateTotalsSection($invoice, $text_settings, $formatter, 'invoice')); ?>
594 </div>
595
596 <?php if ($invoice->getNotes()): ?>
597 <div class="invoice-notes">
598 <h3><?php esc_html_e('Notes', 'easy-invoice'); ?></h3>
599 <div class="notes-content">
600 <?php echo wp_kses_post($invoice->getNotes() ?: ''); ?>
601 </div>
602 </div>
603 <?php endif; ?>
604
605 <?php
606 $terms_conditions = empty($ei_is_credit_note) ? ($invoice->getTerms() ?: \EasyInvoice\Controllers\SettingsController::getInvoiceTermsConditions()) : '';
607 if ($terms_conditions):
608 ?>
609 <div class="invoice-terms">
610 <h3><?php esc_html_e('Terms & Conditions', 'easy-invoice'); ?></h3>
611 <div class="terms-content">
612 <?php echo wp_kses_post($terms_conditions); ?>
613 </div>
614 </div>
615 <?php endif; ?>
616
617 <?php
618 /**
619 * Fires inside the document card, after notes and terms and before the
620 * footer text: attachments, the signature block, e-invoicing notes. Being
621 * inside the card, it is part of what "Download as PDF" captures.
622 *
623 * @param object $document The invoice model.
624 * @param string $type 'invoice'.
625 */
626 do_action('easy_invoice_document_body_after', $invoice, 'invoice');
627
628 $ei_footer_text = \EasyInvoice\Helpers\TemplateTextHelper::footerText($invoice, 'invoice');
629 if ('' !== trim(wp_strip_all_tags((string) $ei_footer_text))) :
630 ?>
631 <div class="invoice-footer">
632 <p><?php echo wp_kses_post($ei_footer_text); ?></p>
633 </div>
634 <?php endif; ?>
635 </div>
636