Spaces:

namec
/

reportrocket-mailer

Running

App Files Files Community

namec commited on Sep 26, 2025

Commit

0820a67

verified ·

1 Parent(s): 8497af2

please a clean and professional mail template for notifying the user that a report is attached to the mail with it's name

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +120 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Reportrocket Mailer
-emoji: 💻
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ReportRocket Mailer  🚀
+colorFrom: pink
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,121 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>