Я написал наш EMAIL HTML, который мы хотим отправить после авторизации.
С первой попытки у меня были CSS стили в тегах <style> </style>, но после исследования я понял, что CSS должен быть встроен в теги HTML.
Поэтому я переписал весь код с нуля и поместил все мои стили CSS во встроенные теги HTML.
Вот код
<html>
<head>
</head>
<div class="main-container" style=" width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;">
<span class="flex-container" style="
display: flex;
flex-direction: column;
max-width: 720px;
width: 100%;
height: auto;
justify-content: center;
align-items: center;
padding: 16;
">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 9.33332V12H12V9.33332C12 7.12418 13.7909 5.33332 16 5.33332C18.2091 5.33332 20 7.12418 20 9.33332ZM7.99999 12H9.33333L9.33333 9.33332C9.33333 5.65142 12.3181 2.66666 16 2.66666C19.6819 2.66666 22.6667 5.65143 22.6667 9.33332V12H24C25.4728 12 26.6667 13.1939 26.6667 14.6667V24C26.6667 25.4727 25.4728 26.6667 24 26.6667H8C6.52724 26.6667 5.33333 25.4727 5.33333 24V14.6667C5.33333 13.1939 6.52724 12 7.99999 12ZM15.9999 18C14.8954 18 14 18.8955 14 20C14 21.1046 14.8954 22 15.9999 22C17.1045 22 17.9999 21.1046 17.9999 20C17.9999 18.8955 17.1045 18 15.9999 18Z" fill="#9AA0A6" />
</svg>
<span class="titleSpan" style="margin-top: 16;
color: gray;
font-size: 16px;
">To finish the security check, tap or manually enter the code below:</span>
<div onclick="copyToClipboard()" class="clickDiv" style="width: 80%;
height: 54px;
background-color: #3E87F6;
display: flex;
justify-content: center;
border-radius: 4px;
align-items: center;
margin-top: 15px;
">
<span id="codeSpan" style=" color: white;
font-size: 20px;">
[securitycode]
</span>
</div>
<div class="textContentDiv" style=" width: 100%;
height: auto;
margin-top: 80px;">
<span style="color:#3C4043;">
If the button above doesn’t work, copy this link and paste it into your web browser:
</span>
<a style="color:#3E87F6 ;" href="[magiclink1]">[magiclink2]</a>
<p style="color:#C4C4C4;margin-top:25px">
The code and the button link are temporary and will expire in 30 minutes. If you don’t use it in time, you will need to request another one.
</p>
<p style="color:#C4C4C4;margin-top:25px">
If you don’t know why you got this email,
please reach us at support@saldoapps.com
</p>
<span style="color:#C4C4C4;margin-top:25px">Best</span>
</br>
<span style="color:#C4C4C4;font-weight: bold;font-size: 18px;">Invoice Maker</span>
</div>
</div>
</body>
</html>
Самое странное, что он отлично работает практически на всех других клиентах MAIL. Например, Airmail3, Edison, Thunderbird, но не работает на GMAIL.
Вот пример для Airmail, и он отлично работает
Но вот пример GMAIL
