PluginProbe
Easy Invoice – Invoice Generator, PDF Quotes & Payments / 2.2.0
Easy Invoice – Invoice Generator, PDF Quotes & Payments v2.2.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.2.0, at templates/invoice-templates/creative.php

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