Sid Gifari File Manager
🏠 Root
/
home
/
u403571817
/
domains
/
medsuper.anmka.com
/
public_html
/
Editing: default.php
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>منصة medsuper - د/عمرو البركي و د/حسام عيسى</title> <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style> /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Cairo", sans-serif; direction: rtl; text-align: right; background-color: #1a0b1f; color: #ffffff; line-height: 1.6; overflow-x: hidden; } .ltr { direction: ltr; text-align: left; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Color Variables */ :root { --primary: #89CFF0; /* baby blue */ --primary-hover: #A7D8F5; --secondary: #6EC1E4; --accent: #BFE6FF; --background: #0f1620; --card-bg: #182231; --muted-bg: #122033; --text-primary: #ffffff; --text-muted: #a1b4c7; --border: #274058; --glass-bg: rgba(17, 34, 51, 0.7); --glow: rgba(137, 207, 240, 0.35); } /* Header Styles */ .header { position: fixed; top: 0; width: 100%; z-index: 1000; transition: all 0.3s ease; background: transparent; } .header.scrolled { backdrop-filter: blur(10px); background: var(--glass-bg); border-bottom: 1px solid var(--border); box-shadow: 0 4px 20px var(--glow); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .logo { display: flex; align-items: center; gap: 1rem; } .logo-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--glow); overflow: hidden; } .logo-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } .logo-icon span { font-size: 1.5rem; font-weight: bold; color: white; } .logo-text h1 { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.25rem; } .logo-text p { font-size: 0.875rem; color: var(--accent); font-weight: 500; } .nav-links { display: flex; gap: 2rem; } .nav-links a { color: var(--text-primary); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: var(--primary); } .cta-button { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .cta-button:hover { transform: scale(1.05); box-shadow: 0 4px 20px var(--glow); } .mobile-menu-btn { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; } .mobile-menu-btn span { width: 25px; height: 3px; background: var(--text-primary); transition: all 0.3s ease; } /* Hero Section */ .hero { padding: 8rem 0 5rem; background: linear-gradient(135deg, #1a0b1f 0%, #24122b 50%, #2d1a36 100%); position: relative; overflow: hidden; } .hero-bg-effects { position: absolute; inset: 0; opacity: 0.1; } .bg-circle { position: absolute; border-radius: 50%; filter: blur(60px); } .bg-circle-1 { top: 5rem; right: 5rem; width: 8rem; height: 8rem; background: var(--primary); } .bg-circle-2 { bottom: 5rem; left: 5rem; width: 10rem; height: 10rem; background: var(--secondary); } .hero-content { max-width: 1000px; margin: 0 auto; text-align: center; position: relative; } .hero-badge { display: inline-block; backdrop-filter: blur(10px); background: var(--glass-bg); border: 1px solid var(--border); padding: 0.75rem 1.5rem; border-radius: 50px; margin-bottom: 2rem; transition: transform 0.3s ease; } .hero-badge:hover { transform: translateY(-2px); } .hero-badge span { color: var(--accent); font-size: 0.875rem; font-weight: 500; } .hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: bold; margin-bottom: 1.5rem; line-height: 1.2; } .gradient-text { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; } .hero-description { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; margin-bottom: 4rem; flex-wrap: wrap; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; padding: 1rem 2rem; border-radius: 12px; font-size: 1.125rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 20px var(--glow); text-decoration: none; display: inline-block; text-align: center; } .btn-primary:hover { transform: scale(1.05); box-shadow: 0 8px 30px var(--glow); } .btn-secondary { backdrop-filter: blur(10px); background: var(--glass-bg); border: 1px solid var(--border); color: var(--text-primary); padding: 1rem 2rem; border-radius: 12px; font-size: 1.125rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .btn-secondary:hover { background: var(--primary); transform: translateY(-2px); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 4rem; } .feature-card { backdrop-filter: blur(10px); background: var(--glass-bg); border: 1px solid var(--border); padding: 2rem; border-radius: 16px; text-align: center; transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 180, 0, 0.4); } .feature-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; } .feature-icon.accent { background: linear-gradient(135deg, var(--accent), var(--secondary)); } .feature-icon.secondary { background: linear-gradient(135deg, var(--secondary), var(--primary)); } .feature-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } .feature-card p { color: var(--text-muted); line-height: 1.5; } /* Section Styles */ .section-header { text-align: center; margin-bottom: 4rem; } .section-header h2 { font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem; } .section-header p { font-size: 1.25rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; } /* About Section */ .about { padding: 5rem 0; background: var(--background); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .about-text h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; } .about-text p { color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6; } .features-list { list-style: none; } .features-list li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .check-icon { width: 24px; height: 24px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: white; } .stats-card { backdrop-filter: blur(10px); background: var(--glass-bg); border: 1px solid var(--border); padding: 2rem; border-radius: 16px; text-align: center; transition: all 0.3s ease; box-shadow: 0 0 20px var(--glow); } .stats-card:hover { transform: translateY(-5px); } .stats-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 3rem; } .stats-card h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .stat-number { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; } .stat-number.primary { color: var(--primary); } .stat-number.accent { color: var(--accent); } .stat-number.secondary { color: var(--secondary); } .stat-label { font-size: 0.875rem; color: var(--text-muted); } /* Teacher Section */ .teacher { padding: 5rem 0; background: var(--muted-bg); } .teacher-card { backdrop-filter: blur(10px); background: var(--glass-bg); border: 1px solid var(--border); border-radius: 24px; padding: 3rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; box-shadow: 0 0 20px var(--glow); transition: all 0.3s ease; } .teacher-card:hover { transform: translateY(-5px); } .teacher-avatar { width: 192px; height: 192px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 4rem; box-shadow: 0 0 20px var(--glow); } .teacher-info h3 { font-size: 2rem; font-weight: bold; margin-bottom: 1rem; } .teacher-title { color: var(--accent); font-weight: 500; margin-bottom: 1.5rem; } .teacher-description { margin-bottom: 2rem; } .teacher-description p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.6; } .teacher-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .detail-column h4 { font-weight: 600; margin-bottom: 0.5rem; } .detail-column ul { list-style: none; } .detail-column li { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.25rem; } /* Download Section */ .download { padding: 5rem 0; background: var(--background); } .download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .download-card { backdrop-filter: blur(10px); background: var(--glass-bg); border: 1px solid var(--border); padding: 2rem; border-radius: 16px; text-align: center; transition: all 0.3s ease; cursor: pointer; } .download-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 180, 0, 0.4); } .download-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; transition: transform 0.3s ease; } .download-card:hover .download-icon { transform: scale(1.1); } .download-icon.accent { background: linear-gradient(135deg, var(--accent), var(--secondary)); } .download-icon.secondary { background: linear-gradient(135deg, var(--secondary), var(--primary)); } .download-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; } .download-card p { color: var(--text-muted); margin-bottom: 1.5rem; } .download-btn { width: 100%; border: none; padding: 0.75rem; border-radius: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; text-align: center; } .download-btn.primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; } .download-btn.accent { background: linear-gradient(135deg, var(--accent), var(--secondary)); color: white; } .download-btn.secondary { background: linear-gradient(135deg, var(--secondary), var(--primary)); color: white; } .download-btn.disabled { background: #666; color: #ccc; cursor: not-allowed; } .download-btn:hover:not(.disabled) { box-shadow: 0 4px 20px var(--glow); } .app-features { backdrop-filter: blur(10px); background: var(--glass-bg); border: 1px solid var(--border); padding: 2rem; border-radius: 16px; } .app-features h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; text-align: center; } .features-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .app-feature { display: flex; align-items: center; gap: 0.75rem; } /* Footer */ .footer { background: var(--card-bg); padding: 3rem 0 1rem; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; } .footer-main { max-width: 400px; } .footer-logo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .footer-logo h3 { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.25rem; } .footer-logo p { font-size: 0.875rem; opacity: 0.8; } .footer-description { opacity: 0.8; line-height: 1.6; margin-bottom: 1.5rem; } .footer-links h4, .footer-legal h4 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; } .footer-links ul, .footer-legal ul { list-style: none; } .footer-links li, .footer-legal li { margin-bottom: 0.5rem; } .footer-links a, .footer-legal a { color: var(--text-primary); text-decoration: none; opacity: 0.8; transition: opacity 0.3s ease; } .footer-links a:hover, .footer-legal a:hover { opacity: 1; } .footer-bottom { border-top: 1px solid rgba(255, 180, 0, 0.2); padding-top: 2rem; text-align: center; } .footer-bottom p { opacity: 0.8; } /* Responsive Design */ @media (max-width: 768px) { .nav-links { display: none; } .mobile-menu-btn { display: flex; } .hero { padding: 6rem 0 3rem; } .hero-title { font-size: 2.5rem; } .hero-buttons { flex-direction: column; align-items: center; } .features-grid { grid-template-columns: 1fr; } .about-content { grid-template-columns: 1fr; } .teacher-card { grid-template-columns: 1fr; text-align: center; } .teacher-details { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; text-align: center; } .stats-grid { grid-template-columns: 1fr 1fr; } .features-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container { padding: 0 15px; } .hero-title { font-size: 2rem; } .section-header h2 { font-size: 2rem; } .teacher-card { padding: 2rem; } .teacher-avatar { width: 150px; height: 150px; font-size: 3rem; } .stats-grid { grid-template-columns: 1fr; } } </style> </head> <body> <!-- Header --> <header id="header" class="header"> <div class="container"> <nav class="nav"> <div class="logo"> <div class="logo-icon"> <img src="IMG_2266.webp" alt="منصة النبيل" style="width: 100%; height: 100%; object-fit: contain; border-radius: 12px;"> </div> <div class="logo-text"> <h1>منصة medsuper</h1> <p>التشريح - د/عمرو البركي و د/حسام عيسى</p> </div> </div> <div class="nav-links"> <a href="#about">عن المنصة</a> <a href="#teacher">المحاضر</a> <a href="#download">تحميل التطبيق</a> </div> <button class="cta-button">ابدأ الآن</button> <button class="mobile-menu-btn" id="mobileMenuBtn"> <span></span> <span></span> <span></span> </button> </nav> </div> </header> <!-- Hero Section --> <section class="hero"> <div class="hero-bg-effects"> <div class="bg-circle bg-circle-1"></div> <div class="bg-circle bg-circle-2"></div> </div> <div class="container"> <div class="hero-content"> <div class="hero-badge"> <span>منصة تعليمية متخصصة في التشريح</span> </div> <h1 class="hero-title"> medsuper <span class="gradient-text">تشريح مبسط ومنظم</span> </h1> <p class="hero-description"> تعلم أساسيات التشريح بسهولة مع د/عمرو البركي و د/حسام عيسى، من خلال محتوى منظم يساعد طلاب الكليات الطبية على الفهم والمراجعة. </p> <div class="hero-buttons"> <a href="#download" class="btn-primary">ابدأ الآن</a> </div> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon">🩻</div> <h3>محتوى تشريح مبسط</h3> <p>شروحات مرئية ومكتوبة تغطي أساسيات وأقسام التشريح الرئيسية</p> </div> <div class="feature-card"> <div class="feature-icon accent">🧠</div> <h3>مسارات تعليمية منظمة</h3> <p>وحدات متدرجة تناسب مستويات الطلاب المختلفة مع متابعة للتقدم</p> </div> <div class="feature-card"> <div class="feature-icon secondary">✅</div> <h3>تدريبات وأسئلة</h3> <p>أسئلة تفاعلية واختبارات قصيرة لترسيخ المعلومات ومراجعتها</p> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="section-header"> <h2>عن منصة medsuper</h2> <p>منصة تعليمية رائدة تهدف لتبسيط علم التشريح لطلاب الكليات الطبية بأساليب حديثة وتفاعلية</p> </div> <div class="about-content"> <div class="about-text"> <h3>رؤيتنا</h3> <p> نساعدك على فهم التشريح خطوة بخطوة عبر محتوى منظم ومؤثر يقدمه نخبة من الأساتذة، مع تدريبات تفاعلية ومتابعة للتقدم. </p> <ul class="features-list"> <li> <div class="check-icon">✓</div> <span>محتوى تشريح موثوق ومنظم</span> </li> <li> <div class="check-icon">✓</div> <span>أسئلة وتقييمات دورية لقياس التقدم</span> </li> <li> <div class="check-icon">✓</div> <span>دعم فني ومتابعة أكاديمية مستمرة</span> </li> </ul> </div> <div class="stats-card"> <div class="stats-icon">🩺</div> <h4>إحصائيات المنصة</h4> <div class="stats-grid"> <div class="stat"> <div class="stat-number primary">150+</div> <div class="stat-label">درس تشريح</div> </div> <div class="stat"> <div class="stat-number accent">2000+</div> <div class="stat-label">طالب في التخصصات الطبية</div> </div> <div class="stat"> <div class="stat-number secondary">20+</div> <div class="stat-label">وحدة وموضوع</div> </div> <div class="stat"> <div class="stat-number primary">98%</div> <div class="stat-label">رضا المستخدمين</div> </div> </div> </div> </div> </div> </section> <!-- Teacher Section --> <section id="teacher" class="teacher"> <div class="container"> <div class="section-header"> <h2>فريق المحاضرين</h2> <p>تعرف على الخبراء الذين يقودون رحلتك في التشريح</p> </div> <div class="teacher-card"> <div class="teacher-avatar"> <span>👨⚖️</span> </div> <div class="teacher-info"> <h3>د/عمرو البركي و د/حسام عيسى</h3> <p class="teacher-title">أساتذة التشريح لطلاب الكليات الطبية</p> <div class="teacher-description"> <p> خبرة تعليمية متميزة في تبسيط وفهم علم التشريح بأساليب بصرية وتفاعلية مصممة خصيصاً لطلاب الطب والعلوم الطبية. </p> <p> محتوى منظم، أمثلة إكلينيكية، وتمارين تقييم تساعدك على تثبيت المعلومات ومراجعتها بفاعلية. </p> </div> <div class="teacher-details"> <div class="detail-column"> <h4>المجالات</h4> <ul> <li>• تشريح الطرفين العلوي والسفلي</li> <li>• تشريح الجهاز العصبي</li> <li>• تشريح الجهاز الدوري والتنفس</li> <li>• تشريح الرأس والرقبة والصدر</li> </ul> </div> <div class="detail-column"> <h4>الإنجازات</h4> <ul> <li>• محتوى مرئي ومكتوب عالي الجودة</li> <li>• تدريبات وأسئلة تفاعلية</li> <li>• تبسيط مفاهيم معقدة لسهولة الفهم</li> <li>• متابعة تقدم الطلاب بشكل مستمر</li> </ul> </div> </div> </div> </div> </div> </section> <!-- Download Section --> <section id="download" class="download"> <div class="container"> <div class="section-header"> <h2>حمل التطبيق الآن</h2> <p>متوفر على المنصات المختلفة لتتعلم أينما كنت</p> </div> <div class="download-grid"> <div class="download-card"> <div class="download-icon">📱</div> <h3>iOS</h3> <p>متاح عبر TestFlight لأجهزة iPhone و iPad</p> <a href="https://testflight.apple.com/join/AWBfy48G" target="_blank" class="download-btn primary">تحميل عبر TestFlight</a> </div> <div class="download-card"> <div class="download-icon accent">🤖</div> <h3>Android</h3> <p>متوفر الآن على Google Play لأجهزة الأندرويد</p> <a href="https://play.google.com/store/apps/details?id=com.anmke.medsuper&hl=ar" target="_blank" class="download-btn accent">تحميل للأندرويد</a> </div> </div> <div class="app-features"> <h3>مميزات التطبيق</h3> <div class="features-grid-2"> <div class="app-feature"> <div class="check-icon">✓</div> <span>تعلم بدون اتصال بالإنترنت</span> </div> <div class="app-feature"> <div class="check-icon">✓</div> <span>تزامن التقدم عبر الأجهزة</span> </div> <div class="app-feature"> <div class="check-icon">✓</div> <span>إشعارات للمحاضرات والاختبارات</span> </div> <div class="app-feature"> <div class="check-icon">✓</div> <span>واجهة سهلة الاستخدام</span> </div> <div class="app-feature"> <div class="check-icon">✓</div> <span>مكتبة تشريح منظمة</span> </div> <div class="app-feature"> <div class="check-icon">✓</div> <span>اختبارات تفاعلية</span> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-main"> <div class="footer-logo"> <div class="logo-icon"> <img src="IMG_2266.webp" alt="منصة النبيل" style="width: 100%; height: 100%; object-fit: contain; border-radius: 12px;"> </div> <div class="logo-text"> <h3>منصة medsuper</h3> <p>التشريح - د/عمرو البركي و د/حسام عيسى</p> </div> </div> <p class="footer-description"> نسعى لتقديم تجربة تعليمية متميزة في مجال القانون من خلال استخدام أحدث التقنيات والأساليب التفاعلية. </p> </div> <div class="footer-links"> <h4>روابط سريعة</h4> <ul> <li><a href="#about">عن المنصة</a></li> <li><a href="#teacher">المحاضر</a></li> <li><a href="#download">تحميل التطبيق</a></li> </ul> </div> <div class="footer-legal"> <h4>معلومات</h4> <ul> <li><a href="#">سياسة الخصوصية</a></li> <li><a href="#">شروط الاستخدام</a></li> <li><a href="#">اتفاقية المستخدم</a></li> <li><a href="#">الدعم الفني</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2025 منصة medsuper - جميع الحقوق محفوظة. تصميم وتطوير: <a href="https://anmka.com" target="_blank" rel="noopener">anmka.com</a></p> </div> </div> </footer> <script> // Header scroll effect window.addEventListener("scroll", () => { const header = document.getElementById("header") if (window.scrollY > 50) { header.classList.add("scrolled") } else { header.classList.remove("scrolled") } }) // Mobile menu toggle const mobileMenuBtn = document.getElementById("mobileMenuBtn") const navLinks = document.querySelector(".nav-links") mobileMenuBtn.addEventListener("click", () => { navLinks.classList.toggle("active") mobileMenuBtn.classList.toggle("active") }) // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener("click", function (e) { e.preventDefault() const target = document.querySelector(this.getAttribute("href")) if (target) { target.scrollIntoView({ behavior: "smooth", block: "start", }) } }) }) // Add animation on scroll const observerOptions = { threshold: 0.1, rootMargin: "0px 0px -50px 0px", } const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.style.opacity = "1" entry.target.style.transform = "translateY(0)" } }) }, observerOptions) // Observe elements for animation document.querySelectorAll(".feature-card, .stats-card, .teacher-card, .download-card").forEach((el) => { el.style.opacity = "0" el.style.transform = "translateY(30px)" el.style.transition = "opacity 0.6s ease, transform 0.6s ease" observer.observe(el) }) // Add loading animation for buttons document.querySelectorAll("button").forEach((btn) => { btn.addEventListener("click", function () { if (!this.classList.contains("loading") && !this.classList.contains("disabled")) { this.classList.add("loading") setTimeout(() => { this.classList.remove("loading") }, 1000) } }) }) // Parallax effect for hero background window.addEventListener("scroll", () => { const scrolled = window.pageYOffset const parallax = document.querySelector(".hero-bg-effects") if (parallax) { const speed = scrolled * 0.5 parallax.style.transform = `translateY(${speed}px)` } }) // Add hover effects for cards document.querySelectorAll(".feature-card, .download-card, .stats-card").forEach((card) => { card.addEventListener("mouseenter", function () { this.style.transform = "translateY(-10px) scale(1.02)" }) card.addEventListener("mouseleave", function () { this.style.transform = "translateY(0) scale(1)" }) }) // Initialize page document.addEventListener("DOMContentLoaded", () => { // Add fade-in animation to page document.body.style.opacity = "0" document.body.style.transition = "opacity 0.5s ease" setTimeout(() => { document.body.style.opacity = "1" }, 100) // Initialize any other components console.log("منصة medsuper - التشريح | تم تحميل الصفحة بنجاح") }) </script> </body> </html>
Save
Cancel