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 / elegant.php

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

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