⚡Landing page script

byDIN ALAMIN -
⚡ নোটিস: নিচের টেক্সট কপি করুন অথবা ডাউনলোড করুন

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>Unified Modal Download Mobile-Friendly</title>

<style>

:root{

  --page-bg:#f4f7fb;

  --card-bg:#fff;

  --notice-bg:#fff8e1;

  --accent:#007bff;

  --shadow:0 10px 30px rgba(15,23,42,0.08);

}

*{box-sizing:border-box}

body{

  margin:0;

  padding:16px;

  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;

  background:var(--page-bg);

  display:flex;

  flex-direction:column;

  align-items:center;

  min-height:100vh;

}

.notice-card{

  width:100%;

  max-width:820px;

  background:var(--notice-bg);

  border-left:6px solid #ff9800;

  border-radius:10px;

  padding:14px 18px;

  margin-bottom:16px;

  box-shadow:0 6px 18px rgba(0,0,0,0.06);

  color:#333;

  font-size:14px;

}

.notice-card strong{color:#e65100}

.card{

  width:100%;

  max-width:420px;

  background:var(--card-bg);

  border-radius:14px;

  padding:20px;

  box-shadow:var(--shadow);

  text-align:center;

}

.title{font-size:20px;margin:0 0 10px;font-weight:700}

.desc{font-size:15px;color:#556;margin:0 0 16px}

.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{

  min-width:120px;padding:14px 16px;border-radius:999px;border:0;font-weight:700;color:#fff;cursor:pointer;

  display:inline-flex;align-items:center;justify-content:center;gap:8px;

  transition:transform .16s ease, box-shadow .16s ease;

  font-size:16px;

}

.btn:active{transform:translateY(1px)}

.btn:hover{transform:translateY(-3px)}

.btn-download{background:linear-gradient(135deg,#ff416c,#ff4b2b)}

.btn-watch{background:linear-gradient(135deg,#4facfe,#00f2fe)}

.btn-contact{background:linear-gradient(135deg,#f7971e,#ffd166);color:#111}

.note{font-size:13px;color:#6b7280;margin-top:14px;text-align:center}

.overlay{

  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;

  background:rgba(0,0,0,0.45);visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;

  z-index:2000;padding:16px;

}

.overlay.show{visibility:visible;opacity:1}

.modal{

  width:100%;max-width:95%;border-radius:12px;background:#fff;overflow:hidden;

  box-shadow:0 20px 60px rgba(2,6,23,0.3);transform:scale(.98);opacity:0;transition:all .28s ease;

}

.overlay.show .modal{transform:scale(1);opacity:1}

.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee}

.modal-title{margin:0;font-weight:700;font-size:18px}

.modal-close{background:transparent;border:0;font-size:22px;cursor:pointer;color:#555;padding:6px;border-radius:8px}

.modal-close:hover{background:#f3f4f6}

.tabbar{display:flex}

.tab{flex:1;padding:12px;font-size:15px;border:0;background:#f1f5f9;cursor:pointer;font-weight:600}

.tab.active{background:#fff;border-bottom:2px solid var(--accent)}

.modal-body{padding:16px}

.tab-content{display:none}

.tab-content.active{display:block}

.count-number{font-size:36px;font-weight:800;margin:10px 0;text-align:center}

.progress-bar{width:100%;height:12px;background:#eef2ff;border-radius:999px;overflow:hidden;margin-top:10px}

.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff416c,#ff4b2b);transition:width .12s linear}

.manual-download{display:inline-block;margin-top:14px;padding:10px 14px;border-radius:999px;background:#0f172a;color:#fff;text-decoration:none;font-weight:700;font-size:16px}

.video-wrap{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000}

.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.contact-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}

.contact-btn{

  display:flex;align-items:center;gap:10px;justify-content:center;padding:12px;border-radius:999px;

  color:#fff;text-decoration:none;font-weight:700;transition:transform .14s;box-shadow:0 6px 18px rgba(2,6,23,0.06)

}

.contact-btn:hover{transform:translateY(-3px)}

.icon{width:20px;height:20px;flex:0 0 20px;display:inline-block}

.btn-email{background:linear-gradient(135deg,#667eea,#764ba2)}

.btn-telegram{background:linear-gradient(135deg,#0088cc,#00c6ff)}

.btn-whatsapp{background:linear-gradient(135deg,#25d366,#128c7e)}

.confetti{position:fixed;pointer-events:none;z-index:2500;left:0;top:0;width:100%;height:0;overflow:visible}

.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0.95;transform-origin:center;animation:confettiFall linear forwards}

@keyframes confettiFall{to{transform:translateY(100vh) rotate(720deg); opacity:0}}

@media (max-width:480px){

  .btn{min-width:100px;font-size:15px;padding:12px 14px}

  .manual-download{font-size:15px;padding:10px 12px}

}

</style>

</head>

<body>


<div class="notice-card">

  <strong>⚠️Notice:</strong>ডাউনলোড বাটনে ক্লিক করলে ১০ সেকেন্ডের কাউন্টডাউন শুরু হবে</div>


<div class="card">

  <h2 class="title">🚀 Quick Access</h2>

  <p class="desc">নিচের বাটনগুলো ব্যবহার করে সরাসরি ডাউনলোড করুন, দেখুন বা যোগাযোগ করুন।</p>

  <div class="btn-row">

    <button id="downloadBtn" class="btn btn-download">🚀 Download</button>

    <button id="watchBtn" class="btn btn-watch">▶ Watch</button>

    <button id="contactBtn" class="btn btn-contact">📩 Contact</button>

  </div>

  <p class="note">ডাউনলোড করতে অথবা ভিডিও দেখতে যদি কোনো সমস্যা হয় তাহলে Contact বাটনে ক্লিক করে যোগাযোগ করুন .</p>

</div>


<div id="overlay" class="overlay" aria-hidden="true">

  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">

    <div class="modal-header">

      <h3 id="modalTitle" class="modal-title">Popup</h3>

      <button id="closeModal" class="modal-close" aria-label="Close">✕</button>

    </div>

    <div class="tabbar">

      <button id="tabDownload" class="tab active">Download</button>

      <button id="tabWatch" class="tab">Watch</button>

      <button id="tabContact" class="tab">Contact</button>

    </div>

    <div class="modal-body">

      <div id="downloadTab" class="tab-content active">

        <div class="count-number" id="countNumber">10</div>

        <div class="progress-bar">

          <div id="progressFill" class="progress-fill"></div>

        </div>

        <div style="text-align:center">

          <a id="manualLink" class="manual-download" href="#" style="display:none">Download Now</a>

        </div>

      </div>

      <div id="watchTab" class="tab-content">

        <div class="video-wrap">

          <iframe id="videoFrame" src="" title="Video player" allowfullscreen></iframe>

        </div>

      </div>

      <div id="contactTab" class="tab-content">

        <div class="contact-list">

          <a id="emailBtn" class="contact-btn btn-email" href="mailto:someone@example.com">Email</a>

          <a id="telegramBtn" class="contact-btn btn-telegram" href="#" target="_blank">Telegram</a>

          <a id="whatsappBtn" class="contact-btn btn-whatsapp" href="#" target="_blank">WhatsApp</a>

        </div>

      </div>

    </div>

  </div>

</div>


<div id="confetti" class="confetti"></div>


<script>

/* ==== JS CODE SAME AS BEFORE ==== */

const DOWNLOAD_URL = "https://example.com/app.apk";

const WATCH_EMBED = "https://www.youtube.com/embed/dQw4w9WgXcQ";

const TELEGRAM_LINK = "https://t.me/YourTelegramUsername";

const WHATSAPP_LINK = "https://wa.me/1234567890";

const EMAIL_LINK = "mailto:someone@example.com";


const overlay = document.getElementById('overlay');

const closeModal = document.getElementById('closeModal');

const tabDownload = document.getElementById('tabDownload');

const tabWatch = document.getElementById('tabWatch');

const tabContact = document.getElementById('tabContact');

const downloadBtn = document.getElementById('downloadBtn');

const watchBtn = document.getElementById('watchBtn');

const contactBtn = document.getElementById('contactBtn');

const downloadTab = document.getElementById('downloadTab');

const watchTab = document.getElementById('watchTab');

const contactTab = document.getElementById('contactTab');

const countNumber = document.getElementById('countNumber');

const progressFill = document.getElementById('progressFill');

const manualLink = document.getElementById('manualLink');

const videoFrame = document.getElementById('videoFrame');

const telegramBtn = document.getElementById('telegramBtn');

const whatsappBtn = document.getElementById('whatsappBtn');

const emailBtn = document.getElementById('emailBtn');

const confettiRoot = document.getElementById('confetti');


let countdownInterval = null;

const COUNT_MS = 10000;

const CONFETTI_COUNT = 220;


function showModal(tab){

  overlay.classList.add('show');

  overlay.setAttribute('aria-hidden','false');

  if(tab==='download') activateTab(tabDownload);

  else if(tab==='watch') activateTab(tabWatch);

  else activateTab(tabContact);

}

function hideModal(){

  overlay.classList.remove('show');

  overlay.setAttribute('aria-hidden','true');

  stopCountdown();

  videoFrame.src = "";

}

function activateTab(btnElem){

  [tabDownload, tabWatch, tabContact].forEach(b=>b.classList.remove('active'));

  [downloadTab, watchTab, contactTab].forEach(s=>s.classList.remove('active'));

  if(btnElem === tabDownload){

    tabDownload.classList.add('active'); downloadTab.classList.add('active'); document.getElementById('modalTitle').textContent = 'Preparing Download';

    startCountdown();

  } else if(btnElem === tabWatch){

    tabWatch.classList.add('active'); watchTab.classList.add('active'); document.getElementById('modalTitle').textContent = 'Watch Video';

    stopCountdown();

    videoFrame.src = WATCH_EMBED + "?autoplay=1";

  } else {

    tabContact.classList.add('active'); contactTab.classList.add('active'); document.getElementById('modalTitle').textContent = 'Contact Us';

    stopCountdown();

  }

}

function startCountdown(){

  stopCountdown();

  manualLink.style.display = 'none';

  const start = Date.now();

  countNumber.textContent = Math.ceil(COUNT_MS/1000);

  countdownInterval = setInterval(()=>{

    const elapsed = Date.now() - start;

    const pct = Math.min(1, elapsed / COUNT_MS);

    progressFill.style.width = (pct*100) + '%';

    const secLeft = Math.max(0, Math.ceil((COUNT_MS - elapsed)/1000));

    countNumber.textContent = secLeft;

    if(pct >= 1){

      finishCountdown();

    }

  }, 100);

}

function stopCountdown(){

  if(countdownInterval){ clearInterval(countdownInterval); countdownInterval = null; }

  progressFill.style.width = "0%";

  countNumber.textContent = Math.ceil(COUNT_MS/1000);

}

function finishCountdown(){

  stopCountdown();

  manualLink.style.display = 'inline-block';

  // direct in-popup download

  fetch(DOWNLOAD_URL)

    .then(r=>r.blob())

    .then(blob=>{

      const url = URL.createObjectURL(blob);

      manualLink.href = url;

      manualLink.download = "";

      manualLink.click();

      launchConfetti(CONFETTI_COUNT);

      setTimeout(()=> URL.revokeObjectURL(url), 3000);

    }).catch(()=>{

      manualLink.href = DOWNLOAD_URL;

      manualLink.download = "";

      manualLink.click();

      launchConfetti(CONFETTI_COUNT);

    });

}


function launchConfetti(n){

  const colors = ['#FFD700','#FF69B4','#00FFFF','#32CD32','#FF8C00','#8A2BE2','#FF5D5D'];

  for(let i=0;i<n;i++){

    const el = document.createElement('div');

    el.className = 'confetti-piece';

    const size = Math.random()*10 + 6;

    el.style.width = size + 'px';

    el.style.height = size + 'px';

    el.style.left = Math.random()*window.innerWidth + 'px';

    el.style.top = Math.random()*60 - 20 + 'px';

    el.style.background = colors[Math.floor(Math.random()*colors.length)];

    el.style.opacity = (Math.random()*0.5 + 0.6).toString();

    el.style.transform = 'rotate(' + (Math.random()*360) + 'deg)';

    el.style.animationDuration = (Math.random()*1.2 + 1.2) + 's';

    confettiRoot.appendChild(el);

    setTimeout(()=>{ el.remove(); }, 2200);

  }

}


downloadBtn.addEventListener('click', e=>{ e.preventDefault(); showModal('download'); });

watchBtn.addEventListener('click', e=>{ e.preventDefault(); showModal('watch'); });

contactBtn.addEventListener('click', e=>{ e.preventDefault(); showModal('contact'); });

tabDownload.addEventListener('click', ()=>activateTab(tabDownload));

tabWatch.addEventListener('click', ()=>activateTab(tabWatch));

tabContact.addEventListener('click', ()=>activateTab(tabContact));

closeModal.addEventListener('click', hideModal);

overlay.addEventListener('click', (e)=>{ if(e.target === overlay) hideModal(); });

document.addEventListener('keydown', e=>{ if(e.key === 'Escape'){ hideModal(); } });


telegramBtn.href = TELEGRAM_LINK;

whatsappBtn.href = WHATSAPP_LINK;

emailBtn.href = EMAIL_LINK;

countNumber.textContent = Math.ceil(COUNT_MS/1000);

manualLink.style.display = 'none';

</script>


</body>

</html>

কোড ব্যবহারের নির্দেশিকা:

✅এই কোডটি কপি অথবা ডাউনলোড বাটনে ক্লিক করে সংরক্ষণ করুন

✅ব্লগারে পোস্ট তৈরি করে html ভিউতে যেয়ে একটি পেস্ট করুন 

✅এডিট শেষে পোস্ট পাবলিশ করুন

✅ভিজিটররা কপি/ডাউনলোড বাটন ব্যবহার করতে পারবে

You might like

View all
Previous Post Next Post
Share to other apps
Copy Post Link