<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>offline notification</title>
</head>
<body>
    <div class="container" role="region" aria-label="M2POOL offline notification" tabindex="0"
         th:style="'background-image: url(' + @{${imagePrefix} + '/img/email/bg1.png'} + '); width:100%;  max-width:600px; height:auto; min-height:100vh; margin:0 auto; position:relative; overflow:hidden; padding:2%; background-color:#f5f5f5; background-size:cover; background-repeat:no-repeat;box-sizing:border-box;'">
        <!-- 顶部品牌标识 -->
        <div class="brand" aria-label="M2POOL brand logo">
           <img th:src= "@{${imagePrefix} + '/img/email/logo.png'}" alt="logo" style="width:120px; height:auto; margin-left:10%; margin-top:6%;">
        </div>

        <!-- 中心验证码卡片 -->
        <section class="card" aria-label="Offline Notification Card" th:style="'background-image: url(' + @{${imagePrefix} + '/img/email/daio.png'} + ');width:100%; max-width:310px; height:auto; min-height:240px; margin:0 auto; margin-top:10vh; box-shadow:0 8px 24px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.06); position:relative; overflow:hidden; padding:44px 40px 36px; text-align:center; background-color:#ffffff;  background-size:105% 112%; background-position:center; background-repeat:no-repeat; border-radius:12px;'">
            <p class="notice" style="color:rgba(0,0,0,0.8); font-size:18px; margin-bottom:15px;">Your <span class="account-name" th:text="${coin}" style="color:#F94D87; font-weight:900; font-size:20px;"></span> mining account: &nbsp; <span class="account-name"  style="color:#F94D87; font-weight:900; font-size:20px;" th:text="${user}"></span> </p>
            <p class="notice" style="color:rgba(0,0,0,0.8); font-size:18px; margin-bottom:15px;"> <span class="account-name" th:text="${offOnlineNumbers}" style="color:#F94D87; font-weight:900; font-size:20px;"></span> mining machines are offline!</p>
            <p class="notice" style="color:rgba(0,0,0,0.8); font-size:18px;">If your mining rig has been abnormally disconnected, please address it promptly!</p>
        </section>

        <!-- 底部帮助与联系入口 -->
        <footer class="page-footer" style="margin-top:18vh; width:100%; height:auto; text-align:center;">
            <div class="divider" aria-hidden="true" style="width:100%; height:3px; background:#DDDDDD; margin:8px 0 20px;"></div>
            <p style="margin:0; padding:0; font-size:14px; color:#777777;">
                Thank you for choosing M2POOL. Need help?
                <a class="contact-link" style="color:#111827; font-weight:800; text-decoration:none; border-bottom:2px solid #111827; outline:none;" href="mailto:support@m2pool.com" aria-label="Contact Customer Service Email">Please contact customer service.</a>
            </p>
        </footer>
    </div>

    <script>

    </script>
</body>
</html>
