<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>موقعي</title> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-serif; overflow: hidden; } .screen { width: 100%; height: 100%; position: fixed; display: flex; justify-content: center; align-items: center; font-size: 50px; font-weight: bold; z-index: 1000; transition: opacity 0.5s ease; } #yellow { background-color: yellow; color: black; } #red { background-color: red; color: white; } #x-screen { background-color: black; color: white; } #x-btn { font-size: 80px; cursor: pointer; } .content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 30px; background-color: #f0f0f0; color: #333; z-index: 1; position: relative; } </style> </head> <body> <!-- الشاشات التمهيدية --> <div id="yellow" class="screen">تحديث جديد!</div> <div id="red" class="screen" style="opacity: 0;">خصم 50%</div> <div id="x-screen" class="screen" style="opacity: 0;"> <div id="x-btn" onclick="closeIntro()">X</div> </div> <!-- المحتوى الرئيسي للموقع (يظهر بعد "بطيه") --> <div class="content" id="main-content" style="display: none;"> مرحباً في موقعك!<br> تم "بطيه" بنجاح ✅ </div> <script> // الانتقال من صفراء إلى حمراء setTimeout(() => { document.getElementById("yellow").style.opacity = "0"; setTimeout(() => { document.getElementById("red").style.opacity = "1"; }, 500); }, 2000); // من حمراء إلى X setTimeout(() => { document.getElementById("red").style.opacity = "0"; setTimeout(() => { document.getElementById("x-screen").style.opacity = "1"; }, 500); }, 4000); // عند الضغط على X: "بطيه" وإظهار المحتوى function closeIntro() { document.getElementById("x-screen").style.opacity = "0"; setTimeout(() => { document.querySelector('.screen').style.display = "none"; document.getElementById("main-content").style.display = "flex"; }, 500); } </script> </body> </html> - Initial Deployment
verified 
Rayan545454 commited on 