Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Change Detection Report</title> | |
| </head> | |
| <body style="margin:0; padding:0; background:#f4f4f7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;"> | |
| <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f7; padding:40px 0;"> | |
| <tr> | |
| <td align="center"> | |
| <table width="600" cellpadding="0" cellspacing="0" style="background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.08);"> | |
| <!-- Header --> | |
| <tr> | |
| <td style="background:linear-gradient(135deg,#2e33c5,#cf2040); padding:32px 40px; text-align:center;"> | |
| <h1 style="margin:0; color:#ffffff; font-size:22px; font-weight:700; letter-spacing:-0.02em;"> | |
| AI Change Detection | |
| </h1> | |
| <p style="margin:6px 0 0; color:rgba(255,255,255,0.8); font-size:13px;"> | |
| Detection Run Complete — Report Summary | |
| </p> | |
| </td> | |
| </tr> | |
| <!-- Body --> | |
| <tr> | |
| <td style="padding:32px 40px;"> | |
| <p style="margin:0 0 18px; color:#333; font-size:15px; line-height:1.6;"> | |
| Hello, | |
| </p> | |
| <p style="margin:0 0 18px; color:#333; font-size:15px; line-height:1.6;"> | |
| A change detection run has been completed. Here are the results: | |
| </p> | |
| <!-- Stats table --> | |
| <table width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 24px; border:1px solid #e8e8ec; border-radius:8px; overflow:hidden;"> | |
| <tr style="background:#f9f9fb;"> | |
| <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Run Title</td> | |
| <td style="padding:10px 16px; font-size:14px; color:#222; font-weight:600; border-bottom:1px solid #e8e8ec;">{{title}}</td> | |
| </tr> | |
| <tr> | |
| <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Method</td> | |
| <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{method}}</td> | |
| </tr> | |
| <tr style="background:#f9f9fb;"> | |
| <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Location</td> | |
| <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{location}}</td> | |
| </tr> | |
| <tr> | |
| <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Change Percentage</td> | |
| <td style="padding:10px 16px; font-size:14px; color:#cf2040; font-weight:700; border-bottom:1px solid #e8e8ec;">{{change_pct}}%</td> | |
| </tr> | |
| <tr style="background:#f9f9fb;"> | |
| <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Changed Pixels</td> | |
| <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{changed_px}}</td> | |
| </tr> | |
| <tr> | |
| <td style="padding:10px 16px; font-size:13px; color:#666; border-bottom:1px solid #e8e8ec;">Total Pixels</td> | |
| <td style="padding:10px 16px; font-size:14px; color:#222; border-bottom:1px solid #e8e8ec;">{{total_px}}</td> | |
| </tr> | |
| <tr style="background:#f9f9fb;"> | |
| <td style="padding:10px 16px; font-size:13px; color:#666;">Regions Detected</td> | |
| <td style="padding:10px 16px; font-size:14px; color:#222;">{{regions_count}}</td> | |
| </tr> | |
| </table> | |
| <!-- Region details (if any) --> | |
| {{#regions}} | |
| <h3 style="margin:0 0 12px; font-size:14px; color:#2e33c5; font-weight:600;">Detected Regions</h3> | |
| <table width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 24px; border:1px solid #e8e8ec; border-radius:8px; overflow:hidden; font-size:12px;"> | |
| <tr style="background:#2e33c5; color:#fff;"> | |
| <th style="padding:8px 10px; text-align:left;">#</th> | |
| <th style="padding:8px 10px; text-align:left;">Type</th> | |
| <th style="padding:8px 10px; text-align:left;">Sub-Type</th> | |
| <th style="padding:8px 10px; text-align:left;">Confidence</th> | |
| <th style="padding:8px 10px; text-align:right;">Area</th> | |
| </tr> | |
| {{region_rows}} | |
| </table> | |
| {{/regions}} | |
| <p style="margin:24px 0 0; color:#333; font-size:15px; line-height:1.6;"> | |
| You can view the full overlay image and detailed results by logging in to the application. | |
| </p> | |
| </td> | |
| </tr> | |
| <!-- Footer --> | |
| <tr> | |
| <td style="background:#f9f9fb; padding:20px 40px; border-top:1px solid #e8e8ec; text-align:center;"> | |
| <p style="margin:0; color:#999; font-size:12px;"> | |
| This is an automated notification from AI Change Detection. | |
| </p> | |
| <p style="margin:4px 0 0; color:#bbb; font-size:11px;"> | |
| {{timestamp}} | |
| </p> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |