Inboxes List

Create an inbox to save and track emails. It's free!

+New inbox
Back
Back
Back 
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   Document Status Update
  </title>
  <style>
   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f4f7fc;
            line-height: 1.5;
        }
        
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        /* Header */
        .email-header {
            background: linear-gradient(135deg, #1a4d8c 0%, #0f3b6a 100%);
            padding: 32px 32px 28px;
            text-align: center;
        }
        
        .logo {
            width: 48px;
            height: 48px;
            background-color: rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        
        .logo svg {
            width: 28px;
            height: 28px;
            color: white;
        }
        
        .company-name {
            font-size: 20px;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: -0.3px;
        }
        
        /* Content */
        .email-content {
            padding: 32px;
        }
        
        .title {
            font-size: 26px;
            font-weight: 700;
            color: #1a2c3e;
            margin-bottom: 8px;
            letter-spacing: -0.5px;
        }
        
        .subtitle {
            font-size: 16px;
            color: #5a6874;
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .greeting {
            margin-bottom: 24px;
        }
        
        .greeting p {
            font-size: 15px;
            color: #2c3e44;
            margin-bottom: 12px;
        }
        
        .update-badge {
            background-color: #eef2ff;
            border-left: 4px solid #1a4d8c;
            padding: 14px 18px;
            border-radius: 10px;
            margin-bottom: 28px;
        }
        
        .update-badge p {
            font-size: 15px;
            color: #1e3a5f;
            margin: 0;
        }
        
        .update-badge strong {
            color: #1a4d8c;
            font-weight: 600;
        }
        
        /* Button */
        .button-container {
            text-align: center;
            margin: 28px 0 32px;
        }
        
        .btn {
            display: inline-block;
            background: linear-gradient(135deg, #1a4d8c 0%, #0f3b6a 100%);
            color: #ffffff;
            text-decoration: none;
            padding: 12px 32px;
            font-weight: 500;
            font-size: 15px;
            border-radius: 40px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(26, 77, 140, 0.2);
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(26, 77, 140, 0.25);
        }
        
        /* Status Card */
        .status-card {
            background-color: #f8fafc;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 24px;
            border: 1px solid #e9ecef;
        }
        
        .status-header {
            font-size: 14px;
            font-weight: 600;
            color: #4a5b6e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }
        
        .status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .status-item:last-child {
            border-bottom: none;
        }
        
        .status-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 500;
            color: #1e3a5f;
        }
        
        .status-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #10b981;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .status-icon svg {
            width: 12px;
            height: 12px;
            color: white;
        }
        
        .status-count {
            font-size: 20px;
            font-weight: 700;
            color: #1a4d8c;
        }
        
        .notice {
            background-color: #fef9e6;
            border-radius: 10px;
            padding: 12px 16px;
            margin: 20px 0 28px;
        }
        
        .notice p {
            font-size: 12px;
            color: #b45309;
            margin: 0;
            line-height: 1.4;
        }
        
        /* Signature */
        .signature {
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }
        
        .signature p {
            font-size: 14px;
            color: #4a5b6e;
            margin-bottom: 6px;
        }
        
        .signature .name {
            font-weight: 600;
            color: #1a2c3e;
        }
        
        .preferences-link {
            font-size: 12px;
            color: #7c8b9c;
            margin-top: 16px;
        }
        
        .preferences-link a {
            color: #1a4d8c;
            text-decoration: none;
        }
        
        .preferences-link a:hover {
            text-decoration: underline;
        }
        
        /* Footer */
        .email-footer {
            background-color: #f8fafc;
            padding: 20px 32px;
            text-align: center;
            border-top: 1px solid #e9ecef;
        }
        
        .footer-text {
            font-size: 11px;
            color: #8c9aa8;
            margin: 0;
        }
        
        /* Responsive */
        @media (max-width: 600px) {
            .email-content {
                padding: 24px;
            }
            
            .title {
                font-size: 22px;
            }
            
            .btn {
                padding: 10px 28px;
                font-size: 14px;
            }
        }
  </style>
 </head>
 <body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f4f7fc;
            line-height: 1.5; margin: 0px; padding: 32px 16px; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; background-color: rgb(244, 247, 252);">
  <div class="email-container" style="max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)">
   <!-- Header -->
   <div class="email-header">
    <div class="logo">
     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewbox="0 0 24 24" xmlns="//www.w3.org/2000/svg">
      <path d="M 14 2 H 6 a 2 2 0 0 0 -2 2 v 16 a 2 2 0 0 0 2 2 h 12 a 2 2 0 0 0 2 -2 V 8 Z">
      </path>
      <polyline points="14,2 14,8 20,8">
      </polyline>
      <line x1="16" x2="8" y1="13" y2="13">
      </line>
      <line x1="16" x2="8" y1="17" y2="17">
      </line>
      <polyline points="10,9 9,9 8,9">
      </polyline>
     </svg>
    </div>
    <div class="company-name" style="font-size: 20px;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: -0.3px">
     DocuTrack
    </div>
   </div>
   <!-- Content -->
   <div class="email-content" style="padding: 32px">
    <h1 class="title">
     Document Status Update
    </h1>
    <div class="subtitle">
     Real-time notification from your document management system
    </div>
    <div class="greeting">
     <p>
      Hello,
     </p>
     <p>
      We're sending you this notification to keep you informed about recent activity in your document portal.
     </p>
    </div>
    <div class="update-badge">
     <p>
      📄
      <strong>
       1 new status update
      </strong>
      has been recorded for your submitted documents in the last 2 hours.
     </p>
    </div>
    <div class="button-container" style="text-align: center;
            margin: 28px 0 32px">
     <a class="btn">
      View Dashboard →
     </a>
    </div>
    <!-- Status Summary -->
    <div class="status-card">
     <div class="status-header" style="font-size: 14px;
            font-weight: 600;
            color: #4a5b6e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px">
      Status Summary
     </div>
     <div class="status-item" style="display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0">
      <div class="status-label" style="display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 500;
            color: #1e3a5f">
       <span class="status-icon">
        <svg fill="currentColor" viewbox="0 0 20 20" xmlns="//www.w3.org/2000/svg">
         <path clip-rule="evenodd" d="M 16.707 5.293 a 1 1 0 0 1 0 1.414 l -8 8 a 1 1 0 0 1 -1.414 0 l -4 -4 a 1 1 0 0 1 1.414 -1.414 L 8 12.586 l 7.293 -7.293 a 1 1 0 0 1 1.414 0 Z" fill-rule="evenodd">
         </path>
        </svg>
       </span>
       <span>
        Valid / Approved
       </span>
      </div>
      <div class="status-count" style="font-size: 20px;
            font-weight: 700;
            color: #1a4d8c">
       1
      </div>
     </div>
    </div>
    <div class="notice">
     <p>
      ℹ️ This is a summary of notifications received. Multiple updates may apply to the same document.
     </p>
    </div>
    <div class="signature">
     <p>
      Best regards,
     </p>
     <p class="name">
      The DocuTrack Team
     </p>
     <div class="preferences-link" style="font-size: 12px;
            color: #7c8b9c;
            margin-top: 16px">
      <a style="color: #1a4d8c;
            text-decoration: none">
       Manage notification preferences
      </a>
      •
      <a style="color: #1a4d8c;
            text-decoration: none">
       Help Center
      </a>
     </div>
    </div>
   </div>
   <!-- Footer -->
   <div class="email-footer">
    <p class="footer-text">
     © 2026 DocuTrack. All rights reserved.
    </p>
    <p class="footer-text" style="margin-top: 8px;">
     This is an automated notification. Please do not reply to this email.
    </p>
   </div>
  </div>
 </body>
</html>