Check out this Pen I made!
<!DOCTYPE html>
<style>
:root {
--primary-color: #0d6efd;
--secondary-color: #0dcaf0;
--dark-color: #1e293b;
--light-color: #f8fafc;
--card-bg: #ffffff;
--text-color: #1e293b;
--muted-text: #64748b;
--border-color: #e2e8f0;
}
/* أنماط الوضع الليلي */
body.dark-mode {
--light-color: #0f172a;
--card-bg: #1e293b;
--text-color: #f8fafc;
--muted-text: #94a3b8;
--border-color: #334155;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Cairo', sans-serif;
scroll-behavior: smooth;
}
body {
background-color: var(--light-color);
color: var(--text-color);
line-height: 1.6;
transition: background 0.3s, color 0.3s;
}
header {
background-color: var(--card-bg);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--border-color);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
.logo {
font-size: 24px;
font-weight: 900;
color: var(--primary-color);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.nav-right {
display: flex;
align-items: center;
gap: 20px;
}
.nav-links {
display: flex;
list-style: none;
gap: 20px;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 600;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary-color);
}
/* زر الوضع الليلي وزر المشرف */
.icon-btn {
background: none;
border: none;
color: var(--text-color);
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: background 0.3s;
}
.icon-btn:hover {
background-color: var(--border-color);
}
.hero {
padding: 160px 20px 60px 20px;
background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, transparent 100%);
text-align: center;
}
.hero h1 {
font-size: 42px;
font-weight: 900;
margin-bottom: 20px;
}
.hero h1 span {
color: var(--primary-color);
}
/* العداد التنازلي للامتحانات */
.countdown-container {
background: var(--card-bg);
border: 1px solid var(--border-color);
max-width: 500px;
margin: 20px auto 0 auto;
padding: 15px;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.countdown-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: var(--primary-color);
}
.countdown {
display: flex;
justify-content: center;
gap: 15px;
}
.time-box {
background: var(--light-color);
padding: 7px 15px;
border-radius: 8px;
min-width: 70px;
}
.time-box span {
display: block;
font-size: 20px;
font-weight: bold;
}
.time-box label {
font-size: 11px;
color: var(--muted-text);
}
/* شريط البحث والفلاتر */
.search-filter-container {
max-width: 800px;
margin: 40px auto 20px auto;
padding: 0 20px;
}
.search-box {
position: relative;
margin-bottom: 20px;
}
.search-box input {
width: 100%;
padding: 15px 50px 15px 20px;
border-radius: 50px;
border: 2px solid var(--border-color);
background: var(--card-bg);
color: var(--text-color);
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}
.search-box input:focus {
border-color: var(--primary-color);
}
.search-box i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--muted-text);
font-size: 18px;
}
.filters {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 18px;
border-radius: 20px;
border: 1px solid var(--border-color);
background: var(--card-bg);
color: var(--text-color);
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.filter-btn.active, .filter-btn:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* الإحصائيات */
.stats {
max-width: 1200px;
margin: 20px auto 60px auto;
background: var(--card-bg);
padding: 30px;
border-radius: 15px;
border: 1px solid var(--border-color);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
text-align: center;
}
.stat-item h3 {
font-size: 32px;
color: var(--primary-color);
}
/* كروت المحاضرات */
.lectures-section {
max-width: 1200px;
margin: 0 auto 80px auto;
padding: 0 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.card {
background: var(--card-bg);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-color);
transition: transform 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card:hover {
transform: translateY(-5px);
}
.card-body {
padding: 25px;
}
.pdf-icon {
color: #ef4444;
font-size: 35px;
margin-bottom: 15px;
}
.card h3 {
font-size: 20px;
margin-bottom: 10px;
}
.card p {
color: var(--muted-text);
font-size: 14px;
margin-bottom: 20px;
}
.badge {
display: inline-block;
padding: 4px 10px;
background: rgba(13, 110, 253, 0.1);
color: var(--primary-color);
border-radius: 4px;
font-size: 12px;
font-weight: bold;
margin-bottom: 10px;
}
.card-footer {
padding: 15px 25px;
background-color: var(--light-color);
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.download-btn {
background-color: #22c55e;
color: white;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
/* لوحة تحكم المشرف (مخفية تلقائياً) */
.admin-panel {
display: none;
max-width: 800px;
margin: 100px auto 40px auto;
background: #fff3cd;
border: 2px dashed #ffc107;
padding: 25px;
border-radius: 12px;
color: #664d03;
}
body.dark-mode .admin-panel {
background: #2c2512;
border-color: #ffc107;
color: #ffe69c;
}
.admin-panel h2 { margin-bottom: 15px; display: flex; justify-content: space-between; }
.admin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.admin-form input, .admin-form select, .admin-form textarea {
padding: 10px; border-radius: 6px; border: 1px solid #ffc107; background: var(--card-bg); color: var(--text-color);
}
.admin-form textarea, .admin-form .full-w { grid-column: span 2; }
.admin-form button { background: #ffc107; color: #000; font-weight: bold; padding: 12px; border: none; border-radius: 6px; cursor: pointer; grid-column: span 2; }
.contact-section { background-color: var(--card-bg); padding: 60px 20px; text-align: center; border-top: 1px solid var(--border-color); }
.social-icons { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }
.social-icons a { width: 50px; height: 50px; background-color: var(--light-color); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; }
footer { background-color: #1e293b; color: white; text-align: center; padding: 20px; font-size: 14px; }
</style>
<header>
<div class="nav-container">
<a href="#" class="logo"><i class="fa-solid fa-graduation-cap"></i> الفرات ميد</a>
<div class="nav-right">
<ul class="nav-links">
<li><a href="#home">الرئيسية</a></li>
<li><a href="#lectures">المحاضرات</a></li>
</ul>
<!-- زر التبديل للوضع الليلي -->
<button class="icon-btn" id="theme-toggle" title="تبديل الوضع الليلي"><i class="fa-solid fa-moon"></i></button>
<!-- زر دخول المشرف -->
<button class="icon-btn" id="admin-login-btn" title="دخول المشرف" onclick="loginAdmin()"><i class="fa-solid fa-user-gear"></i></button>
</div>
</div>
</header>
<!-- لوحة تحكم المشرف (تظهر عند إدخال الرمز الصحيح) -->
<div class="admin-panel" id="adminPanel">
<h2><span><i class="fa-solid fa-lock-open"></i> لوحة تحكم المشرف (الفرات ميد)</span> <button onclick="logoutAdmin()" style="font-size:12px; padding:5px; cursor:pointer;">خروج</button></h2>
<p style="margin-bottom: 15px;">مرحباً أيها المشرف، يمكنك من هنا إضافة ملفات ومحاضرات جديدة للموقع فوراً.</p>
<div class="admin-form">
<input type="text" id="lectureTitle" placeholder="عنوان المحاضرة (مثال: تشريح الصدر)" required>
<select id="lectureLevel">
<option value="first">المرحلة الأولى</option>
<option value="second">المرحلة الثانية</option>
<option value="third">المرحلة الثالثة</option>
</select>
<input type="text" id="lectureSize" placeholder="حجم الملف (مثال: 4.5 MB)" value="4.0 MB">
<input type="text" id="lectureLink" placeholder="رابط الـ PDF المرفوع (جوجل درايف أو تليجرام)" value="#">
<textarea id="lectureDesc" placeholder="وصف مختصر للمحاضرة ومحتوياتها..." rows="2"></textarea>
<input type="text" id="editStat1" class="full-w" placeholder="تعديل عداد الـ PDFs الحالي" value="500">
<button onclick="addCustomLecture()">نشر التحديثات والمحاضرة للموقع</button>
</div>
</div>
<section class="hero" id="home">
<h1>مرحباً بكم في منصة <span>الفرات ميد</span></h1>
<p>فريق متخصص في تنظيم وتوفير المحاضرات الطبية والجامعية على شكل ملفات PDF عالية الجودة.</p>
<!-- العداد التنازلي للامتحانات -->
<div class="countdown-container">
<div class="countdown-title"><i class="fa-regular fa-clock"></i> المتبقي على الامتحانات النهائية</div>
<div class="countdown">
<div class="time-box"><span id="days">00</span><label>أيام</label></div>
<div class="time-box"><span id="hours">00</span><label>ساعات</label></div>
<div class="time-box"><span id="minutes">00</span><label>دقائق</label></div>
</div>
</div>
</section>
<!-- شريط البحث الذكي والفلاتر -->
<div class="search-filter-container">
<div class="search-box">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" id="searchInput" onkeyup="searchLectures()" placeholder="ابحث عن اسم المحاضرة أو المادة الدارسیة...">
</div>
<div class="filters">
<button class="filter-btn active" onclick="filterLevel('all')">الكل</button>
<button class="filter-btn" onclick="filterLevel('first')">المرحلة الأولى</button>
<button class="filter-btn" onclick="filterLevel('second')">المرحلة الثانية</button>
<button class="filter-btn" onclick="filterLevel('third')">المرحلة الثالثة</button>
</div>
</div>
<div class="stats">
<div class="stat-item"><h3 id="statFiles">+500</h3><p>ملف PDF جاهز</p></div>
<div class="stat-item"><h3>+10,000</h3><p>تحميل للمحاضرات</p></div>
<div class="stat-item"><h3>24/7</h3><p>تحديث مستمر</p></div>
</div>
<section class="lectures-section" id="lectures">
<div class="grid-container" id="lecturesGrid">
<!-- المحاضرات الافتراضية (ستتحدث تلقائياً عند إضافة المشرف لأي كارت) -->
<div class="card" data-level="second" data-title="محاضرة علم الأمراض المقدمة">
<div class="card-body">
<span class="badge">المرحلة الثانية</span>
<div class="pdf-icon"><i class="fa-solid fa-file-pdf"></i></div>
<h3>محاضرة علم الأمراض - المقدمة</h3>
<p>تشمل هذه المحاضرة المفاهيم الأساسية لعلم الأمراض العام مخصصة لطلاب المرحلة الثانية.</p>
</div>
<div class="card-footer">
<span class="file-size">4.2 MB</span>
<a href="#" class="download-btn"><i class="fa-solid fa-arrow-down"></i> تحميل</a>
</div>
</div>
<div class="card" data-level="third" data-title="محاضرة علم الأدوية الجزء الأول">
<div class="card-body">
<span class="badge">المرحلة الثالثة</span>
<div class="pdf-icon"><i class="fa-solid fa-file-pdf"></i></div>
<h3>محاضرة علم الأدوية - الجزء الأول</h3>
<p>ملخص شامل لآليات عمل الأدوية الأساسية وتصنيفاتها الطبية بطريقة مبسطة.</p>
</div>
<div class="card-footer">
<span class="file-size">5.8 MB</span>
<a href="#" class="download-btn"><i class="fa-solid fa-arrow-down"></i> تحميل</a>
</div>
</div>
</div>
</section>
<footer>
<p>جميع الحقوق محفوظة © 2026 لفريق الفرات ميد | لوحة تحكم محمية</p>
</footer>
<script>
// 1. ميزة الوضع الليلي
const themeToggle = document.getElementById('theme-toggle');
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
const icon = themeToggle.querySelector('i');
if(document.body.classList.contains('dark-mode')) {
icon.className = 'fa-solid fa-sun';
} else {
icon.className = 'fa-solid fa-moon';
}
});
// 2. ميزة شريط البحث الذكي
function searchLectures() {
let input = document.getElementById('searchInput').value.toLowerCase();
let cards = document.getElementsByClassName('card');
for (let i = 0; i < cards.length; i++) {
let title = cards[i].getAttribute('data-title').toLowerCase();
if (title.includes(input)) {
cards[i].style.display = "";
} else {
cards[i].style.display = "none";
}
}
}
// 3. ميزة الفلاتر بحسب المراحل
function filterLevel(level) {
let cards = document.getElementsByClassName('card');
let buttons = document.getElementsByClassName('filter-btn');
for (let btn of buttons) btn.classList.remove('active');
event.target.classList.add('active');
for (let i = 0; i < cards.length; i++) {
if (level === 'all' || cards[i].getAttribute('data-level') === level) {
cards[i].style.display = "";
} else {
cards[i].style.display = "none";
}
}
}
// 4. ميزة العداد التنازلي للامتحانات (محدد لـ 30 يوماً كمثال)
let examDate = new Date().getTime() + (30 * 24 * 60 * 60 * 1000);
setInterval(function() {
let now = new Date().getTime();
let diff = examDate - now;
let d = Math.floor(diff / (1000 * 60 * 60 * 24));
let h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
document.getElementById("days").innerText = d;
document.getElementById("hours").innerText = h;
document.getElementById("minutes").innerText = m;
}, 1000);
// 5. ميزة التحكم والإدارة (خاصة بالمشرف)
// كلمة المرور الافتراضية للدخول هي: 1234
function loginAdmin() {
let password = prompt("الرجاء إدخال كلمة مرور المشرف لرؤية لوحة التحكم:");
if (password === "1234") {
document.getElementById('adminPanel').style.display = "block";
window.scrollTo(0, 0);
} else {
alert("كلمة المرور خاطئة! صلاحية الدخول للمشرفين فقط.");
}
}
function logoutAdmin() {
document.getElementById('adminPanel').style.display = "none";
}
// وظيفة إضافة ملف ومحاضرة جديدة من المشرف فوراً
function addCustomLecture() {
let title = document.getElementById('lectureTitle').value;
let level = document.getElementById('lectureLevel').value;
let size = document.getElementById('lectureSize').value;
let link = document.getElementById('lectureLink').value;
let desc = document.getElementById('lectureDesc').value;
let statNum = document.getElementById('editStat1').value;
if(!title || !desc) { alert("يرجى ملء اسم المحاضرة ووصفها أولاً"); return; }
// تحديث الإحصائيات
document.getElementById('statFiles').innerText = "+" + statNum;
// إنشاء الكارت الجديد ديناميكياً
let grid = document.getElementById('lecturesGrid');
let levelText = level === 'first' ? 'المرحلة الأولى' : level === 'second' ? 'المرحلة الثان
For further actions, you may consider blocking this person and/or reporting abuse
