كيفية إنشاء صفحة محمية بكلمة مرور باستخدام HTML و JavaScript
إنشاء صفحة محمية بكلمة مرور هو أحد الأساليب الشائعة لحماية المحتوى على المواقع الإلكترونية. في هذا المقال، سنعرض لك كيفية بناء صفحة محمية باستخدام HTML و CSS و JavaScript. سيتم تضمين الكود كاملاً بحيث يمكنك استخدامه بسهولة في مشاريعك الخاصة.
المتطلبات الأساسية لإنشاء صفحة محمية بكلمة مرور
لتنفيذ هذا المشروع، سنحتاج إلى الأدوات التالية:
- HTML: لتحديد هيكل الصفحة.
- CSS: لتنسيق وتجميل المظهر.
- JavaScript: للتحقق من كلمة المرور وتنفيذ التفاعل مع المستخدم.
الكود الكامل لإنشاء صفحة محمية بكلمة مرور انقر مرتين للنسخ
<h4 style="height: 0px; text-align: right;"><br /></h4>
<div>
<ol style="text-align: right;">
<li>ادخل مفتاح الاشتراك الخاص بك.</li>
<li>سيوجهك مباشرة الى الاشتراك.</li>
<li>اضغط على زر تحميل.</li>
</ol>
<div>
<ul style="text-align: right;">
<li><b>يوزر الشرح: 0000 <a href="https://t.me/0000_شرح">رابط الشرح</a></b></li>
</ul>
</div>
</div>
<div><br /></div>
<html lang="ar">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>رابط محمي بكلمة مرور</title>
<style>
/* تنسيق البطاقة المخصصة */
.custom-card {
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 30px;
max-width: 100%;
text-align: center;
margin: 20px auto;
}
/* تنسيق العنوان */
.custom-card h2 {
margin-bottom: 20px;
font-size: 24px;
}
/* تنسيق الصورة */
.custom-card img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 20px;
}
/* تنسيق حقل الإدخال */
.custom-card input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
/* تنسيق الزر */
.custom-card button {
background-color: #ff8c00;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 100%;
}
/* التأثير عند التمرير على الزر */
.custom-card button:hover {
opacity: 0.8;
}
/* تنسيق رسالة الخطأ */
.custom-card .error {
color: red;
margin-top: 10px;
}
/* تنسيق النافذة المنبثقة (Modal) */
.custom-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
justify-content: center;
align-items: center;
}
.custom-modal-content {
background-color: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 400px;
text-align: center;
position: relative;
}
.custom-modal-content h3 {
margin-bottom: 20px;
}
.countdown {
font-size: 18px;
margin-bottom: 20px;
}
.custom-modal-content .open-link {
background-color: #ff8c00;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
width: 100%;
}
.open-link:hover {
opacity: 0.8;
}
/* تنسيق علامة الإغلاق */
.close-btn {
position: absolute;
top: 5px;
left: 5px;
width: 25px;
height: 25px;
background-color: white;
border-radius: 50%;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 18px;
color: #ff0000;
}
.close-btn:hover {
background-color: #f0f0f0;
}
/* فقاعات الهدايا */
.bubble {
position: absolute;
background-color: #ff8c00;
border-radius: 50%;
width: 20px;
height: 20px;
opacity: 0.8;
animation: rise 2s forwards;
}
/* نجوم */
.star {
position: absolute;
width: 15px;
height: 15px;
background: yellow;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: twinkle 1.5s infinite;
}
/* حركة الفقاعات */
@keyframes rise {
0% { transform: translateY(0); }
100% { transform: translateY(-100px); opacity: 0; }
}
/* حركة النجوم */
@keyframes twinkle {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
/* مناسب للأجهزة المحمولة */
@media (max-width: 768px) {
.custom-card {
width: 90%;
max-width: 400px;
}
.custom-modal-content {
width: 90%;
max-width: 400px;
}
}
</style>
</head>
<body>
<div class="custom-card">
<h4>تحديث هاكات VIP</h4>
<img alt="صورة عينة" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9NCswveKB3dINtk1ayDQXnEN-GEEVNecTeuRMRjZNBXDqR5GTIdJmhi3o2NVoKpG-ouOofAYfHVOWrSPD3gvf6hte5GPXglRF93DF5VUEetCcPUl_U8euY572mwnJhwsX09FcG3XLVv2wPTqFnN9L0uUfcjvKg3O6tddj4xvWwEh3FCZAfidnMbZ4Ug/s736/IMG_%D9%A2%D9%A0%D9%A2%D9%A4%D9%A1%D9%A0%D9%A0%D9%A8_%D9%A0%D9%A8%D9%A3%D9%A5%D9%A3%D9%A6.jpg" />
<input id="password" placeholder="أدخل مفتاح الملف" type="password" />
<button onclick="checkPassword()">دخول</button>
<div class="error" id="error-message"></div>
</div>
<div class="custom-modal" id="modal">
<div class="custom-modal-content">
<div class="close-btn" onclick="closeModal()">×</div>
<h3>الوقت المتبقي للاشتراك:</h3>
<div class="countdown" id="countdown"></div>
<button class="open-link" onclick="openLink()">تحميل الهاك</button>
<div id="gift-bubbles"></div> <!-- فقاعات الهدايا -->
<div id="stars"></div> <!-- النجوم -->
</div>
</div>
<script>
// حذف جميع اليوزرات والاحتفاظ بيوزر واحد للشرح برمز "0000"
const validPasswords = [
{ password: "0000", expiry: new Date("2025-12-31T23:59:59") }
];
const sharedLink = "ضع الرابط هنا"; // رابط واحد لجميع كلمات المرور
let currentLink = "";
let countdownInterval;
function checkPassword() {
const inputPassword = document.getElementById('password').value;
const currentTime = new Date();
let valid = false;
validPasswords.forEach(({ password, expiry }) => {
if (inputPassword === password && currentTime <= expiry) {
valid = true;
currentLink = sharedLink; // استخدام الرابط المشترك
startCountdown(expiry); // بدء العد التنازلي
openModal();
}
});
const errorMessage = document.getElementById('error-message');
if (!valid) {
errorMessage.textContent = 'مفتاح غير صحيح أو منتهي.';
} else {
errorMessage.textContent = '';
}
}
function startCountdown(expiry) {
clearInterval(countdownInterval); // مسح أي عد تنازلي سابق
countdownInterval = setInterval(() => {
const currentTime = new Date();
const timeRemaining = expiry - currentTime;
if (timeRemaining <= 0) {
clearInterval(countdownInterval);
document.getElementById('countdown').textContent = "انتهت صلاحية الاشتراك.";
return;
}
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
document.getElementById('countdown').textContent = `${days} يوم ${hours} ساعة ${minutes} دقيقة ${seconds} ثانية`;
}, 1000);
}
function openModal() {
const modal = document.getElementById('modal');
modal.style.display = 'flex';
modal.scrollIntoView({ behavior: 'smooth', block: 'center' });
// إنشاء الفقاعات والنجوم عند فتح النافذة
for (let i = 0; i < 10; i++) {
createBubble();
createStar();
}
}
function closeModal() {
const modal = document.getElementById('modal');
modal.style.display = 'none';
document.getElementById('password').value = ''; // مسح كلمة المرور
clearInterval(countdownInterval); // إيقاف العد التنازلي
}
function openLink() {
window.location.href = currentLink; // فتح الرابط المشترك
}
function createBubble() {
const bubble = document.createElement('div');
bubble.classList.add('bubble');
bubble.style.left = Math.random() * 100 + 'vw';
bubble.style.bottom = '0';
document.getElementById('gift-bubbles').appendChild(bubble);
setTimeout(() => {
bubble.remove();
}, 2000);
}
function createStar() {
const star = document.createElement('div');
star.classList.add('star');
star.style.left = Math.random() * 100 + 'vw';
star.style.bottom = Math.random() * 100 + 'vh';
document.getElementById('stars').appendChild(star);
setTimeout(() => {
star.remove();
}, 1500);
}
</script>
</body>
</html>
كيفية استخدام الكود في مشاريعك
لتنفيذ هذا الكود في مشروعك، يمكنك نسخ الكود أعلاه ولصقه في ملف HTML جديد. تأكد من تغيير النصوص والصور حسب احتياجاتك.