ClaudeandClaude Opus 5.5
e3daffffa3
Die 21 HTML-Vorlagen aus dem Claude-Design-Projekt "Webklar Bestätigungsmail gestalten" (Ordner WEBklar-Mail-Vorlagen), Byte für Byte wie im Export. K01–K10 gehen an Kunden, T01–T11 intern ans Team. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
49 lines
5.0 KiB
HTML
49 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!--
|
|
T01 · Neue Chatnachricht im Portal
|
|
Betreff: Neue Portalnachricht von {{kunde_name}}
|
|
Absender: „WEBklar Kundenportal“ <Portal-Postfach>
|
|
Empfänger: kenso@webklar.com, andrej@webklar.com
|
|
Platzhalter: {{kunde_name}}, {{nachricht}}
|
|
|
|
-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="light dark">
|
|
<meta name="supported-color-schemes" content="light dark">
|
|
<title>Neue Portalnachricht von {{kunde_name}}</title>
|
|
<!--[if mso]><style>table,td{font-family:Arial,Helvetica,sans-serif!important;}</style><![endif]-->
|
|
<style>
|
|
a{color:#111111;}
|
|
@media (max-width:620px){.w{width:100%!important;}.px{padding-left:24px!important;padding-right:24px!important;}.lbl{display:block!important;width:100%!important;padding-bottom:2px!important;border-bottom:0!important;}.val{display:block!important;width:100%!important;padding-top:0!important;}}
|
|
@media (prefers-color-scheme:dark){.bg{background:#161615!important;}.card{background:#1f1f1e!important;}.ink{color:#f2f1ee!important;}.mut{color:#a8a6a0!important;}.box{background:#2a2a28!important;border-color:#3a3a37!important;}.btn{background:#f2f1ee!important;}.btn a{color:#161615!important;}.rowline{border-color:#3a3a37!important;}}
|
|
</style>
|
|
</head>
|
|
<body style="margin:0;padding:0;background:#f1f0ec;">
|
|
<span style="display:none;max-height:0;overflow:hidden;opacity:0;mso-hide:all;font-size:1px;line-height:1px;color:#f1f0ec;">{{nachricht}} ͏ ͏ ͏</span>
|
|
<table role="presentation" class="bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f1f0ec;">
|
|
<tr><td align="center" style="padding:32px 12px;">
|
|
<table role="presentation" class="w" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:600px;">
|
|
<tr><td class="px" style="padding:0 40px 20px 40px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
|
|
<td><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" style="padding-right:10px;"><img src="https://project.webklar.com/webklar-logo.png" width="40" height="40" alt="WEBklar" style="display:block;width:40px;height:40px;border:0;outline:none;text-decoration:none;border-radius:10px;"></td><td valign="middle" class="ink" style="font-family:Arial,Helvetica,sans-serif;font-size:26px;font-weight:bold;letter-spacing:-1px;color:#111111;">WEBklar</td></tr></table></td>
|
|
<td align="right" class="mut" style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#6b6964;">Intern · Kundenportal</td>
|
|
</tr></table></td></tr>
|
|
<tr><td class="card" style="background:#ffffff;border-radius:16px;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr><td class="px" style="padding:44px 40px 8px 40px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td style="background:#efe6fb;border-radius:100px;padding:6px 12px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#5a2a91;">Neue Nachricht</td></tr></table></td></tr>
|
|
<tr><td class="px ink" style="padding:16px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:28px;line-height:34px;mso-line-height-rule:exactly;font-weight:bold;letter-spacing:-0.5px;color:#111111;">{{kunde_name}} hat im Kundenportal geschrieben</td></tr>
|
|
<tr><td class="px" style="padding:24px 40px 0 40px;"><table role="presentation" class="box" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f7f6f3;border:1px solid #e8e6e0;border-radius:12px;"><tr><td class="ink" style="padding:20px 22px;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:21px;color:#111111;"><div class="ink" style="font-size:16px;line-height:25px;color:#111111;">{{nachricht}}</div></td></tr></table></td></tr>
|
|
<tr><td class="px" style="padding:28px 40px 0 40px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="btn" bgcolor="#111111" style="background:#111111;border-radius:10px;"><a href="https://project.webklar.com/admin.html" style="display:block;padding:14px 26px;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;color:#ffffff;text-decoration:none;">Im Admin-Bereich antworten →</a></td></tr></table></td></tr>
|
|
<tr><td class="px mut" style="padding:10px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;mso-line-height-rule:exactly;color:#6b6964;">Tab „Chat“. Höchstens eine Benachrichtigung je Kunde alle 15 Minuten.</td></tr>
|
|
<tr><td style="padding:0 0 44px 0;font-size:0;line-height:0;"> </td></tr>
|
|
</table>
|
|
</td></tr>
|
|
<tr><td class="px mut" align="center" style="padding:24px 40px 0 40px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:19px;color:#6b6964;">Automatische Benachrichtigung aus dem WEBklar Kundenportal · <a class="mut" href="https://project.webklar.com/admin.html" style="color:#4a4843;text-decoration:underline;">Admin-Bereich</a></td></tr>
|
|
</table>
|
|
</td></tr>
|
|
</table>
|
|
</body>
|
|
</html>
|