Video call

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:sans-serif}
.phone{width:380px;height:760px;background:#111;border-radius:40px;position:relative;overflow:hidden;border:6px solid #222}
.video-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=800') center/cover}
.overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7))}
.notifications-area{position:absolute;top:45px;left:10px;right:10px;z-index:20;display:flex;flex-direction:column;gap:8px}
.notif{background:rgba(255,255,255,0.92);border-radius:18px;padding:10px 12px;display:flex;gap:10px;transform:translateY(-120%);opacity:0;transition:all 0.5s}
.notif.show{transform:translateY(0);opacity:1}
.notif-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.controls{position:absolute;bottom:25px;left:0;right:0;display:flex;justify-content:space-evenly;z-index:5}
.ctrl{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.2);border:none;color:white;font-size:22px}
.ctrl.end{background:#FF3B30;width:68px;height:68px}
</style>
</head>
<body>
<div class="phone">
  <div class="video-bg"></div><div class="overlay"></div>
  <div class="notifications-area" id="notifArea"></div>
  <div style="position:absolute;bottom:120px;left:20px;color:white;z-index:5">
    <h2>Sara Khan 💖</h2><p>00:12 • Video call</p>
  </div>
  <div class="controls">
    <button class="ctrl">🎙️</button>
    <button class="ctrl">📷</button>
    <button class="ctrl end">✕</button>
    <button class="ctrl">🔊</button>
  </div>
</div>
<script>
const notifications=[
 {app:"Messages",icon:"💬",bg:"#25D366",title:"Ammii",text:"Beta kahan ho? Call pick karo"},
 {app:"WhatsApp",icon:"💚",bg:"#25D366",title:"Bestie",text:"Oye teri video call chal rahi hai 😂"},
 {app:"Messages",icon:"📩",bg:"#007AFF",title:"+92 300 1234567",text:"Your OTP is 458921."},
 {app:"Instagram",icon:"💜",bg:"#E1306C",title:"Instagram",text:"sara.khan_ liked your story ❤️"},
 {app:"JazzCash",icon:"💳",bg:"red",title:"JazzCash",text:"You received Rs. 500"},
];
const area=document.getElementById('notifArea');let i=0;
function showNext(){
 if(i>=notifications.length) return;
 const n=notifications[i];const div=document.createElement('div');div.className='notif';
 div.innerHTML=`<div class="notif-icon" style="background:${n.bg}">${n.icon}</div><div><div style="font-size:12px;opacity:0.5">${n.app} • now</div><div style="font-weight:600;font-size:13px">${n.title}</div><div style="font-size:12px;opacity:0.8">${n.text}</div></div>`;
 area.appendChild(div);setTimeout(()=>div.classList.add('show'),100);
 setTimeout(()=>{div.classList.remove('show');setTimeout(()=>div.remove(),500)},3500);
 i++;setTimeout(showNext,1800);
}
setTimeout(showNext,1200);
</script>
</body>
</html>