-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathemail-template.json
More file actions
3 lines (3 loc) · 6.92 KB
/
email-template.json
File metadata and controls
3 lines (3 loc) · 6.92 KB
1
2
3
{
"otpEmailTemplate": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Your Agentforce Ice Cream Login Code</title>\n <style>\n body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: linear-gradient(135deg, #D8E6FE, #BEC7F6, #E5B9FE);\n min-height: 100vh;\n }\n \n .email-container {\n max-width: 600px;\n margin: 0 auto;\n padding: 40px 20px;\n }\n \n .email-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(12px);\n border-radius: 16px;\n padding: 40px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n text-align: center;\n }\n \n .brand-header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n margin-bottom: 32px;\n }\n \n .brand-icon {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #129cd8, #00e1ca, #ed92ff);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n }\n \n .brand-text {\n font-size: 24px;\n font-weight: 700;\n background: linear-gradient(135deg, #129cd8, #00e1ca, #ed92ff);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin: 0;\n }\n \n .email-title {\n font-size: 28px;\n font-weight: 700;\n color: #032D60;\n margin: 0 0 16px 0;\n line-height: 1.2;\n }\n \n .email-subtitle {\n font-size: 16px;\n color: #034A69;\n margin: 0 0 32px 0;\n line-height: 1.5;\n }\n \n .otp-container {\n background: linear-gradient(135deg, #129cd8, #00e1ca, #ed92ff);\n border-radius: 16px;\n padding: 32px;\n margin: 32px 0;\n }\n \n .otp-label {\n font-size: 14px;\n color: white;\n font-weight: 600;\n margin: 0 0 12px 0;\n text-transform: uppercase;\n letter-spacing: 1px;\n opacity: 0.9;\n }\n \n .otp-code {\n font-size: 36px;\n font-weight: 700;\n color: white;\n font-family: 'Monaco', 'Consolas', monospace;\n letter-spacing: 8px;\n margin: 0;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n \n .instructions {\n background: rgba(216, 230, 254, 0.3);\n border-radius: 12px;\n padding: 24px;\n margin: 32px 0;\n border: 1px solid rgba(18, 156, 216, 0.2);\n }\n \n .instructions-title {\n font-size: 16px;\n font-weight: 600;\n color: #032D60;\n margin: 0 0 12px 0;\n }\n \n .instructions-text {\n font-size: 14px;\n color: #034A69;\n margin: 0;\n line-height: 1.5;\n }\n \n .footer {\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid rgba(3, 45, 96, 0.1);\n }\n \n .footer-text {\n font-size: 12px;\n color: #034A69;\n margin: 0;\n line-height: 1.5;\n }\n \n .security-note {\n background: rgba(255, 248, 220, 0.8);\n border: 1px solid rgba(255, 193, 7, 0.3);\n border-radius: 8px;\n padding: 16px;\n margin: 24px 0;\n }\n \n .security-note-text {\n font-size: 13px;\n color: #856404;\n margin: 0;\n line-height: 1.4;\n }\n \n @media (max-width: 640px) {\n .email-container {\n padding: 20px 16px;\n }\n \n .email-card {\n padding: 24px;\n }\n \n .brand-header {\n flex-direction: column;\n gap: 8px;\n }\n \n .brand-text {\n font-size: 20px;\n }\n \n .email-title {\n font-size: 24px;\n }\n \n .otp-code {\n font-size: 28px;\n letter-spacing: 4px;\n }\n }\n </style>\n</head>\n<body>\n <div class=\"email-container\">\n <div class=\"email-card\">\n <div class=\"brand-header\">\n <div class=\"brand-icon\">🍦</div>\n <h1 class=\"brand-text\">Agentforce Ice Cream</h1>\n </div>\n \n <h2 class=\"email-title\">Your Login Code</h2>\n <p class=\"email-subtitle\">\n Welcome to the Cannes Lions AI experience!<br>\n Use this code to access your personalized ice cream recommendation.\n </p>\n \n <div class=\"otp-container\">\n <p class=\"otp-label\">Your Login Code</p>\n <p class=\"otp-code\">{{ .Token }}</p>\n </div>\n \n <div class=\"instructions\">\n <p class=\"instructions-title\">How to use this code:</p>\n <p class=\"instructions-text\">\n 1. Return to the Agentforce Ice Cream app<br>\n 2. Enter this 6-digit code when prompted<br>\n 3. Start your AI-powered ice cream journey!\n </p>\n </div>\n \n <div class=\"security-note\">\n <p class=\"security-note-text\">\n 🔒 This code will expire in 10 minutes for your security. \n Only use this code if you requested it.\n </p>\n </div>\n \n <div class=\"footer\">\n <p class=\"footer-text\">\n This email was sent because you requested access to the Agentforce Ice Cream experience at Cannes Lions Festival. \n If you didn't request this code, please ignore this email.\n </p>\n <br>\n <p class=\"footer-text\">\n <strong>Salesforce Agentforce</strong> • Cannes Lions Festival 2024\n </p>\n </div>\n </div>\n </div>\n</body>\n</html>"
}