|
|
@@ -0,0 +1,560 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="pt-BR">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
+
|
|
|
+ <title>{{ __('email.service_completed.subject') }}</title>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: Arial, Helvetica, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background: #f5f5f7;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .email-container {
|
|
|
+ max-width: 650px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ background: linear-gradient(135deg, #7b2cff, #4d14d1);
|
|
|
+ padding: 50px 30px 30px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 140px;
|
|
|
+ margin-bottom: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-text {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 52px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .subtitle {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 1.5;
|
|
|
+ opacity: 0.95;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diarinho {
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 30px;
|
|
|
+ background: #f5f5f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 22px;
|
|
|
+ padding: 22px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 18px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: #4cd964;
|
|
|
+ color: white;
|
|
|
+ font-size: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-title {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #5a22d6;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-subtitle {
|
|
|
+ color: #6b6b6b;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 24px;
|
|
|
+ padding: 30px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 34px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #5a22d6;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-grid {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-column {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-bottom: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ color: #777;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: #1f1f1f;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .divider {
|
|
|
+ width: 1px;
|
|
|
+ background: #ececec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 25px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-total {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-total h2 {
|
|
|
+ color: #5a22d6;
|
|
|
+ font-size: 54px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-method {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+ padding: 14px 20px;
|
|
|
+ border-radius: 16px;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paid-status {
|
|
|
+ margin-left: 15px;
|
|
|
+ background: #dff7e7;
|
|
|
+ color: #1ea75d;
|
|
|
+ padding: 6px 14px;
|
|
|
+ border-radius: 999px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-card {
|
|
|
+ background: #f1ebff;
|
|
|
+ border-radius: 24px;
|
|
|
+ padding: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-diarinho {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-title {
|
|
|
+ font-size: 36px;
|
|
|
+ color: #5a22d6;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-text {
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.7;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ background: linear-gradient(135deg, #5d1ce0, #3f0fb3);
|
|
|
+ padding: 35px 30px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-logo {
|
|
|
+ width: 120px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-app {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #6de0ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-help {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-bottom {
|
|
|
+ margin-top: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(max-width: 640px) {
|
|
|
+
|
|
|
+ .header-content,
|
|
|
+ .service-grid,
|
|
|
+ .payment-wrapper,
|
|
|
+ .footer-card {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .divider {
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 42px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diarinho {
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-total h2 {
|
|
|
+ font-size: 42px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-help {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="email-container">
|
|
|
+
|
|
|
+ <!-- HEADER -->
|
|
|
+
|
|
|
+ <div class="header">
|
|
|
+
|
|
|
+ <img
|
|
|
+ src="{{ asset('logo.png') }}"
|
|
|
+ class="logo"
|
|
|
+ alt="Sob Medida"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="header-content">
|
|
|
+
|
|
|
+ <div class="header-text">
|
|
|
+
|
|
|
+ <div class="title">
|
|
|
+ {{ __('email.service_completed.title') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="subtitle">
|
|
|
+ {{ __('email.service_completed.subtitle') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <img
|
|
|
+ src="{{ asset('diarinho.png') }}"
|
|
|
+ class="diarinho"
|
|
|
+ alt="Diarinho"
|
|
|
+ />
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- CONTENT -->
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+
|
|
|
+ <!-- STATUS -->
|
|
|
+
|
|
|
+ <div class="success-card">
|
|
|
+
|
|
|
+ <div class="success-icon">
|
|
|
+ ✓
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <div class="success-title">
|
|
|
+ {{ __('email.service_completed.payment_confirmed') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="success-subtitle">
|
|
|
+ {{ __('email.service_completed.payment_confirmed_subtitle') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- RESUMO -->
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+
|
|
|
+ <div class="card-title">
|
|
|
+ {{ __('email.service_completed.service_resume') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="service-grid">
|
|
|
+
|
|
|
+ <div class="service-column">
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <div class="item-label">
|
|
|
+ {{ __('email.service_completed.client') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item-value">
|
|
|
+ {{ $client_name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <div class="item-label">
|
|
|
+ {{ __('email.service_completed.service_date') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item-value">
|
|
|
+ {{ $service_date }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+
|
|
|
+ <div class="item-label">
|
|
|
+ {{ __('email.service_completed.service_time') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item-value">
|
|
|
+ {{ $start_time }} às {{ $end_time }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="divider"></div>
|
|
|
+
|
|
|
+ <div class="service-column">
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+
|
|
|
+ <div class="item-label">
|
|
|
+ {{ __('email.service_completed.service_address') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item-value">
|
|
|
+ {{ $address }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- PAGAMENTO -->
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+
|
|
|
+ <div class="card-title">
|
|
|
+ {{ __('email.service_completed.payment_title') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="payment-wrapper">
|
|
|
+
|
|
|
+ <div class="payment-total">
|
|
|
+
|
|
|
+ <div class="item-label">
|
|
|
+ {{ __('email.service_completed.total_amount') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2>
|
|
|
+ {{ $total_amount }}
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="divider"></div>
|
|
|
+
|
|
|
+ <div class="payment-method">
|
|
|
+
|
|
|
+ <div class="item-label">
|
|
|
+ {{ __('email.service_completed.payment_method') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="payment-badge">
|
|
|
+
|
|
|
+ {{ $payment_method }}
|
|
|
+
|
|
|
+ <span class="paid-status">
|
|
|
+ {{ __('email.service_completed.paid') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ margin-top: 16px;
|
|
|
+ color: #777;
|
|
|
+ font-size: 16px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ __('email.service_completed.payment_success') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- FOOTER CARD -->
|
|
|
+
|
|
|
+ <div class="footer-card">
|
|
|
+
|
|
|
+ <img
|
|
|
+ src="{{ asset('diarinho.png') }}"
|
|
|
+ class="footer-diarinho"
|
|
|
+ alt="Diarinho"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <div class="footer-title">
|
|
|
+ {{ __('email.service_completed.footer_title') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer-text">
|
|
|
+ {{ __('email.service_completed.footer_description') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- FOOTER -->
|
|
|
+
|
|
|
+ <div class="footer">
|
|
|
+
|
|
|
+ <div class="footer-content">
|
|
|
+
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <img
|
|
|
+ src="{{ asset('logo.png') }}"
|
|
|
+ class="footer-logo"
|
|
|
+ alt="Sob Medida"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="footer-app">
|
|
|
+ diariaapp
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer-help">
|
|
|
+
|
|
|
+ {{ __('email.service_completed.footer_help') }}<br>
|
|
|
+
|
|
|
+ {{ __('email.service_completed.footer_contact') }}<br>
|
|
|
+
|
|
|
+ (11) 99999-9999
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer-bottom">
|
|
|
+ {{ __('email.service_completed.footer_note') }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
