البريد المؤقت Temp Mail 2026 | شرح كامل وسكربت بريد مؤقت جاهز

<!-- نموذج البريد المؤقت المتوسط المطوّر -->
<div class="mini-mail-card">
  <div class="mini-header">
    <div class="mini-brand">
      <span class="live-dot"></span>
      <span class="brand-title">نظام البريد المؤقت</span>
    </div>
    <div class="mini-timer-pill" id="mini-timer">60:00</div>
  </div>

  <div class="email-box-glow">
    <span id="mini-email-text" class="email-address">جاري الاتصال بالسيرفر...</span>
    <button class="icon-copy-btn" onclick="miniCopyMail()" title="نسخ">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
      <span>نسخ</span>
    </button>
  </div>

  <div class="mini-actions-grid">
    <button class="action-chip" onclick="miniRefreshInbox()">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
      تحديث
    </button>
    <button class="action-chip" onclick="miniCreateNewAccount()">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
      تغيير البريد
    </button>
    <button class="action-chip danger" onclick="miniDeleteAcc()">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
      حذف البريد
    </button>
  </div>

  <!-- صندوق الرسائل المطوّر بحجم أوسع -->
  <div class="inbox-container">
    <div class="sync-line-bar"><div id="mini-sync-bar"></div></div>
    <div class="inbox-header-title">صندوق الوارد المباشر</div>
    <div id="mini-msg-list" class="messages-scroll">
      <div class="empty-state">
        <div class="radar-spinner"></div>
        <span>بانتظار وصول رسائل جديدة...</span>
      </div>
    </div>
  </div>

  <!-- نافذة عرض الرسالة -->
  <div id="mini-modal" class="mini-modal">
    <div class="modal-card">
      <div class="modal-head">
        <span id="mini-msg-sub">تفاصيل الرسالة</span>
        <button onclick="miniCloseModal()" class="close-btn">&times;</button>
      </div>
      <iframe id="mini-msg-frame" src="about:blank"></iframe>
    </div>
  </div>

  <div id="mini-toast" class="toast-popup">تم النسخ بنجاح!</div>
</div>

<style>
/* --- التكبير والتنسيق المطوّر --- */
.mini-mail-card {
  max-width: 520px;
  margin: 20px auto;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 15px 35px -10px rgba(79, 70, 229, 0.15), 0 5px 15px -3px rgba(0, 0, 0, 0.04);
  font-family: 'Tajawal', sans-serif;
  direction: rtl;
  color: #1e293b;
  position: relative;
  overflow: hidden;
}

.mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-title {
  font-weight: 800;
  font-size: 16px;
  color: #0f172a;
}

.live-dot {
  width: 10px;
  height: 10px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.mini-timer-pill {
  background: #eef2ff;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.2);
}

.email-box-glow {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  transition: all 0.25s ease;
}

.email-box-glow:hover {
  border-color: #6366f1;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.18);
}

.email-address {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.icon-copy-btn {
  background: #4f46e5;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.icon-copy-btn:hover {
  background: #4338ca;
  transform: translateY(-1px);
}

.mini-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.action-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 8px 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.action-chip:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f5f3ff;
  transform: translateY(-1px);
}

.action-chip.danger:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

.inbox-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.inbox-header-title {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  padding: 8px 12px 2px;
  text-transform: uppercase;
}

.sync-line-bar {
  width: 100%;
  height: 3px;
  background: #f1f5f9;
}

#mini-sync-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  transition: width 0.1s linear;
}

.messages-scroll {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

.radar-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.msg-item-card {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  background: #f8fafc;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msg-item-card:hover {
  background: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateX(-3px);
}

.msg-sender-name {
  font-weight: 800;
  font-size: 12px;
  color: #0f172a;
}

.msg-sub-text {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.toast-popup {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #10b981;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  display: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.mini-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 15px;
}

.modal-card {
  background: #fff;
  width: 100%;
  max-width: 600px;
  height: 450px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 30px -5px rgba(0,0,0,0.25);
}

.modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 14px;
  background: #f8fafc;
}

.close-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: #ef4444;
  cursor: pointer;
  font-weight: 900;
}

.modal-card iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<script>
(function() {
  const PROXY = "https://my-mail-proxy.tech-support-app.workers.dev";
  let user = JSON.parse(localStorage.getItem('fm_mini_v3')) || null;
  let timerInt;
  let lastMsgCount = 0;

  function showToast(m) {
    const t = document.getElementById('mini-toast');
    if(!t) return;
    t.innerText = m;
    t.style.display = 'block';
    setTimeout(() => t.style.display = 'none', 2000);
  }

  async function miniInit() {
    if(!user) await miniCreateNewAccount();
    else {
      document.getElementById('mini-email-text').innerText = user.address;
      startTimer();
      miniRefreshInbox(true);
      startSyncEngine();
    }
  }

  window.miniCreateNewAccount = async function() {
    try {
      document.getElementById('mini-email-text').innerText = "جاري الاتصال بالسيرفر...";
      const dRes = await fetch(`${PROXY}/domains`);
      const dData = await dRes.json();
      const domain = dData['hydra:member'][0].domain;
      const address = `${Math.random().toString(36).substring(2, 10)}@${domain}`;
      const password = Math.random().toString(36);
      
      await fetch(`${PROXY}/accounts`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ address, password })
      });

      const tRes = await fetch(`${PROXY}/token`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ address, password })
      });
      const tData = await tRes.json();
      
      user = { address, token: tData.token, id: tData.id };
      localStorage.setItem('fm_mini_v3', JSON.stringify(user));
      localStorage.setItem('fm_mini_exp3', Date.now() + 3600000);
      miniInit();
    } catch (e) { 
      showToast("خطأ في الاتصال بالسيرفر"); 
    }
  };

  function startTimer() {
    clearInterval(timerInt);
    timerInt = setInterval(() => {
      const exp = localStorage.getItem('fm_mini_exp3') || Date.now();
      const rem = Math.max(0, Math.floor((exp - Date.now()) / 1000));
      if (rem <= 0) { clearInterval(timerInt); miniCreateNewAccount(); return; }
      document.getElementById('mini-timer').innerText = `${Math.floor(rem/60)}:${(rem%60)<10?'0':''}${rem%60}`;
    }, 1000);
  }

  function startSyncEngine() {
    let val = 0;
    setInterval(() => {
      val += 1.5;
      const sBar = document.getElementById('mini-sync-bar');
      if(sBar) sBar.style.width = val + "%";
      if(val >= 100) {
        val = 0;
        miniRefreshInbox();
      }
    }, 100);
  }

  window.miniRefreshInbox = async function(silent = false) {
    if(!user) return;
    try {
      const res = await fetch(`${PROXY}/messages`, {
        headers: { 'Authorization': `Bearer ${user.token}` }
      });
      const data = await res.json();
      const msgs = data['hydra:member'];
      
      if(!silent && msgs.length > lastMsgCount) {
        showToast("وصلت رسالة جديدة!");
      }
      lastMsgCount = msgs.length;

      const container = document.getElementById('mini-msg-list');
      if(msgs.length > 0) {
        container.innerHTML = msgs.map(m => `
          <div class="msg-item-card" onclick="miniReadMsg('${m.id}')">
            <div>
              <div class="msg-sender-name">${m.from.address}</div>
              <div class="msg-sub-text">${m.subject || '(بدون عنوان)'}</div>
            </div>
            <span style="font-size:10px; color:#94a3b8; font-weight:700;">${new Date(m.createdAt).toLocaleTimeString('ar-EG', {hour:'2-digit', minute:'2-digit'})}</span>
          </div>
        `).join('');
      } else {
        container.innerHTML = `
          <div class="empty-state">
            <div class="radar-spinner"></div>
            <span>بانتظار وصول رسائل جديدة...</span>
          </div>`;
      }
    } catch (e) {}
  };

  window.miniReadMsg = async function(id) {
    const res = await fetch(`${PROXY}/messages/${id}`, { headers: { 'Authorization': `Bearer ${user.token}` } });
    const m = await res.json();
    document.getElementById('mini-msg-sub').innerText = m.subject || "الرسالة الواردة";
    document.getElementById('mini-msg-frame').srcdoc = m.html || m.text;
    document.getElementById('mini-modal').style.display = 'flex';
  };

  window.miniCopyMail = function() {
    if(!user) return;
    navigator.clipboard.writeText(user.address);
    showToast("تم النسخ!");
  };

  window.miniCloseModal = function() {
    document.getElementById('mini-modal').style.display = 'none';
  };

  window.miniDeleteAcc = function() {
    if(confirm("تأكيد تغيير البريد؟")){
      localStorage.removeItem('fm_mini_v3');
      miniCreateNewAccount();
    }
  };

  document.addEventListener("DOMContentLoaded", miniInit);
})();
</script>