<!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>Email code</title>
</head>

<body style="margin:0; padding:0;">
<!-- 合并 th:style 属性 -->
<div class="container" role="region" aria-label="M2POOL Email verification code page" 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; box-sizing:border-box; padding:5%; position:relative; overflow:hidden; background-color:#f5f5f5; background-size:cover; background-repeat:no-repeat; '">
    <!-- 顶部品牌标识 -->
    <div class="brand" aria-label="M2POOL brand logo" style="width:100%;">
        <img th:src= "@{${imagePrefix} + '/img/email/logo.png'}" alt="logo" style="width: 8vw; height: auto; margin-left: 10%; margin-top: 6%;">
    </div>

    <!-- 中心验证码卡片 -->
    <!-- 合并 th:style 属性 -->
    <section class="card" aria-label="Verification code card"
             th:style="'background-image: url(' + @{${imagePrefix} + '/img/email/daio.png'} + '); width:100%; max-width:320px; height:auto; min-height:250px; 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; display:block; text-align:center; background-color:#ffffff; background-size:120% auto; background-position:center; background-repeat:no-repeat; border-radius:12px; padding:5%;'">
        <!-- 合并 th:style 属性 -->
        <p class="notice" th:text="${text}" style="color:rgba(0,0,0,0.7); font-size:18px; margin-top:10%; text-align:center;"></p>
        <!-- 合并 th:style 属性 -->
        <div class="code-box" aria-live="polite" aria-label="CAPTCHA"
             style="position:relative; display:inline-flex; align-items:center; justify-content:center; margin-top:2vh; width:80%; max-width:300px; height:50px; border-radius:12px; background:#ffffff; border:3px solid #651EFE;">
            <!-- 合并 th:style 属性 -->
            <span class="code-text js-code-text" data-default-code="4MKM6AX" th:text="${code}"
                  style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-weight:800; font-size:24px; letter-spacing:0.18em; color:#111827;margin:auto;"></span>
        </div>
    </section>

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

</html>
