Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ReportRocket | Email Template</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f3f4f6; | |
| } | |
| .email-container { | |
| max-width: 600px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .attachment-card { | |
| transition: all 0.3s ease; | |
| } | |
| .attachment-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="mx-auto email-container bg-white rounded-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-indigo-600 px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i data-feather="send" class="text-white mr-2"></i> | |
| <h1 class="text-xl font-bold text-white">ReportRocket</h1> | |
| </div> | |
| <span class="text-indigo-200 text-sm">Email Template</span> | |
| </div> | |
| </div> | |
| <!-- Email Content --> | |
| <div class="px-6 py-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Your Requested Report is Attached</h2> | |
| <p class="text-gray-600 mb-6">Dear [Recipient's Name],</p> | |
| <div class="prose prose-indigo max-w-none text-gray-600 mb-6"> | |
| <p>We hope this message finds you well.</p> | |
| <p>As requested, please find attached the report titled <span class="font-medium text-indigo-600">[Report Name]</span> for your review. This document contains the latest insights and data relevant to your logistics and telematics operations within our SaaS platform.</p> | |
| </div> | |
| <!-- Attachment Card --> | |
| <div class="attachment-card bg-gray-50 border border-gray-200 rounded-lg p-4 mb-8 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-lg mr-4"> | |
| <i data-feather="file-text" class="text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">[Report Name].pdf</h3> | |
| <p class="text-sm text-gray-500">2.4 MB • PDF Document</p> | |
| <button class="mt-2 text-sm font-medium text-indigo-600 hover:text-indigo-500 flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="prose prose-indigo max-w-none text-gray-600 mb-8"> | |
| <p>Should you have any questions or require further assistance, feel free to reach out to our support team at <span class="font-medium">[Support Email]</span> or <span class="font-medium">[Support Phone Number]</span>.</p> | |
| <p>Thank you for using our services.</p> | |
| </div> | |
| <!-- Signature --> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <p class="text-gray-800 font-medium mb-1">Best regards,</p> | |
| <p class="text-gray-600 mb-1">[Your Name]</p> | |
| <p class="text-gray-600 mb-1">[Your Position]</p> | |
| <p class="text-gray-600 mb-1">[Company Name]</p> | |
| <p class="text-gray-600">[Company Website]</p> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="bg-gray-50 px-6 py-4 border-t border-gray-200"> | |
| <p class="text-xs text-gray-500 italic mb-2">Note: This email is sent in undefined mode. For any visual preferences, please adjust your settings accordingly.</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <div> | |
| <span class="font-medium">Primary Color:</span> undefined (eg: bg-undefined-500) | | |
| <span class="font-medium">Secondary Color:</span> undefined (eg: bg-undefined-500) | | |
| <span class="font-medium">Theme:</span> undefined mode | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-500">Unsubscribe</a> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-500">Preferences</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Simple animation for the attachment card | |
| document.querySelector('.attachment-card').addEventListener('mouseenter', function() { | |
| anime({ | |
| targets: this, | |
| scale: 1.02, | |
| duration: 200, | |
| easing: 'easeInOutQuad' | |
| }); | |
| }); | |
| document.querySelector('.attachment-card').addEventListener('mouseleave', function() { | |
| anime({ | |
| targets: this, | |
| scale: 1, | |
| duration: 200, | |
| easing: 'easeInOutQuad' | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |