有AI真好，重新改了下大佬分享的邮箱页面，分享下

（原帖图片：image.webp；upload/attach/202502/4_1738765333355.webp）

演示地址

 

        * {             box-sizing: border-box;             margin: 0;             padding: 0;         }

        body {             font-family: 'Helvetica', Arial, sans-serif;             background: var(--primary-color);             color: var(--text-color);         }

        .container {             max-width: 800px;             margin: 2rem auto;             padding: 2rem;             background: var(--primary-color);             border-radius: 12px;             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);         }

        h1 {             color: var(--secondary-color);             text-align: center;             margin-bottom: 2rem;             font-size: 2.2rem;         }

        .search-box {             display: grid;             grid-template-columns: 1fr auto auto;             gap: 1rem;             margin-bottom: 2rem;         }

        input, select, button {             padding: 0.8rem 1.2rem;             border: 1px solid var(--border-color);             border-radius: 8px;             font-size: 1rem;         }

        #domain-input {             flex: 1;             border-color: var(--secondary-color);         }

        #domain-suffix {             min-width: 120px;             background: white;         }

        #check-btn {             background: var(--secondary-color);             color: white;             border: none;             cursor: pointer;             transition: background 0.3s;         }

        #check-btn:hover {             background: #0050d1;         }

        .result-card {             padding: 1.5rem;             border-radius: 8px;             margin-bottom: 2rem;             text-align: center;             font-size: 1.1rem;         }

        .available {             background: #e8f5e9;             color: #4caf50;         }

        .unavailable {             background: #ffebee;             color: #e53935;         }

        #register-btn {             width: 100%;             padding: 1rem;             background: var(--secondary-color);             color: white;             border: none;             border-radius: 8px;             font-size: 1.1rem;             cursor: pointer;             transition: background 0.3s;         }

        #register-btn:hover {             background: #0050d1;         }

        /* 域名卡片样式 */         .domain-cards-container {             margin: 2rem 0;         }

        .domain-cards-container h2 {             color: var(--secondary-color);             margin-bottom: 1.5rem;             font-size: 1.5rem;             text-align: center;         }

        .domain-cards {             display: grid;             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));             gap: 1rem;         }

        .domain-card {             padding: 1.2rem;             border-radius: 8px;             border: 1px solid var(--border-color);             background: #f5f5f5;             text-align: center;             transition: transform 0.2s;             cursor: pointer;         }

        .domain-card:hover {             transform: translateY(-3px);             background: #f0f0f0;         }

        .domain-suffix {             font-size: 1.2rem;             margin-bottom: 0.5rem;             font-weight: 500;             color: var(--secondary-color);         }

        .domain-status {             font-size: 0.9rem;             color: #4caf50;         }

        /* 模态框样式 */         .modal {             display: none;             position: fixed;             top: 0;             left: 0;             width: 100%;             height: 100%;             background: rgba(0, 0, 0, 0.5);             justify-content: center;             align-items: center;         }

        .modal-content {             background: white;             padding: 2rem;             border-radius: 12px;             text-align: center;             position: relative;         }

        .close-btn {             position: absolute;             top: 1rem;             right: 1rem;             font-size: 1.5rem;             cursor: pointer;         }

        /* 移动端适配 */         @media (max-width: 768px) {             .container {                 margin: 1rem;                 padding: 1rem;             }

            .search-box {                 grid-template-columns: 1fr;             }

            h1 {                 font-size: 1.8rem;             }         }    

       

                            Registered Domain Names                    

        Apply For Registration Now    

                        ×             Contact Us                             Email: e@mail.today                         WorkDay 9:00-18:00            

            // 模拟已注册的邮箱数据         const registeredEmails = [             "e@mail.today",             "i@mail.money",         ];

        // 域名后缀配置         const DOMAIN_SUFFIXES = [             "@mail.today", "@mail.money",             "@email.wtf", "@your.email"         ];

        // 检查邮箱是否已注册         async function checkAvailability(prefix, suffix) {             const email = ${prefix}@${suffix};             return new Promise((resolve) => {                 setTimeout(() => {                     // 检查邮箱是否在已注册列表中                     const isAvailable = !registeredEmails.includes(email);                     resolve(isAvailable);                 }, 500); // 模拟网络延迟             });         }

        // 获取所有可注册域名         async function getAvailableDomains() {             const availableDomains = [];             for (const suffix of DOMAIN_SUFFIXES) {                 const isAvailable = await checkAvailability ("demo", suffix); // 使用 demo 前缀检查                 if (isAvailable) {                     availableDomains.push(suffix);                 }             }             return availableDomains;         }

        // 价格体系配置         const PRICE_TABLE = {             single: 88,    // 单字符价格             multi: 8.8      // 多字符价格         };

        // 元素引用         const resultDiv = document.getElementById('result');         const modal = document.getElementById('contact-modal');

        // 查询功能         document.getElementById('check-btn').addEventListener('click', async () => {             const prefix = document.getElementById('domain-input').value.trim();             const suffix = document.getElementById('domain-suffix').value;                          if(!prefix) {                 alert('Please Enter Email Prefix');                 return;             }

            const isAvailable = await checkAvailability(prefix, suffix);             showResult(${prefix}@${suffix}, isAvailable, prefix.length);         });

        // 显示结果         function showResult(email, available, prefixLength) {             resultDiv.className = result-card ${available ? 'available' : 'unavailable'};                          const price = prefixLength === 1 ? PRICE_TABLE.single : PRICE_TABLE.multi;             const priceHTML = available ?                  <p>Annual fee price: <strong>$${price}</strong></p> : '';

            resultDiv.innerHTML = `                 email address: ${email}                 state: ${available ? '