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

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

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