File manager - Edit - /home/linknsbh/linkat.online/public/linkat.html
Back
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>لينكات أونلاين - دليلك الشامل</title> <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #6366f1; --secondary: #8b5cf6; --accent: #06b6d4; --dark: #0f172a; --light: #f8fafc; --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } body { font-family: 'Tajawal', sans-serif; background: var(--dark); color: var(--light); overflow: hidden; height: 100vh; } .presentation { width: 100%; height: 100vh; position: relative; } .slide { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; opacity: 0; visibility: hidden; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(0.9) translateY(50px); } .slide.active { opacity: 1; visibility: visible; transform: scale(1) translateY(0); } .slide.prev { transform: translateX(-100%); opacity: 0; } .slide.next { transform: translateX(100%); opacity: 0; } /* Animated Background */ .bg-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: var(--dark); overflow: hidden; } .bg-animation::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.2) 0%, transparent 40%); animation: bgMove 20s ease-in-out infinite; } @keyframes bgMove { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } /* Floating Particles */ .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; animation: float 15s infinite; } @keyframes float { 0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; } } /* Slide 1: Cover */ .cover-slide { text-align: center; } .logo-container { position: relative; margin-bottom: 2rem; } .logo { width: 150px; height: 150px; background: var(--gradient-1); border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: white; box-shadow: 0 20px 60px rgba(99, 102, 241, 0.4); animation: logoPulse 2s ease-in-out infinite; position: relative; z-index: 2; } .logo::before { content: ''; position: absolute; inset: -10px; background: var(--gradient-1); border-radius: 40px; opacity: 0.3; z-index: -1; animation: logoGlow 2s ease-in-out infinite; } @keyframes logoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes logoGlow { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.1; } } .main-title { font-size: 4rem; font-weight: 900; background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; text-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); } .subtitle { font-size: 1.5rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; } .tagline { display: inline-flex; gap: 1rem; background: rgba(255, 255, 255, 0.1); padding: 1rem 2rem; border-radius: 50px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .tagline span { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } /* Slide 2: Intro */ .intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; width: 100%; } .feature-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2rem; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient-1); transform: scaleX(0); transition: transform 0.3s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.1); } .feature-icon { width: 80px; height: 80px; background: var(--gradient-1); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; color: white; } .feature-card:nth-child(2) .feature-icon { background: var(--gradient-2); } .feature-card:nth-child(3) .feature-icon { background: var(--gradient-3); } .feature-card:nth-child(4) .feature-icon { background: var(--gradient-4); } .feature-card:nth-child(5) .feature-icon { background: var(--gradient-1); } .feature-card:nth-child(6) .feature-icon { background: var(--gradient-2); } /* Slide 3: Pricing */ .pricing-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1400px; width: 100%; } .pricing-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 1.5rem; text-align: center; position: relative; transition: all 0.3s ease; } .pricing-card.featured { background: var(--gradient-1); transform: scale(1.05); border: none; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-5px); } .plan-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; } .plan-price { font-size: 2rem; font-weight: 900; margin-bottom: 0.5rem; } .plan-period { font-size: 0.9rem; opacity: 0.7; margin-bottom: 1rem; } .plan-badge { position: absolute; top: -10px; right: 20px; background: #fbbf24; color: #000; padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; } /* Slide 4: Dashboard Overview */ .dashboard-preview { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; max-width: 1200px; width: 100%; height: 70vh; } .sidebar-preview { background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-title { font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .menu-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; margin-bottom: 0.5rem; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; } .menu-item:hover { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; } .menu-item i { width: 20px; text-align: center; } .main-preview { background: rgba(255, 255, 255, 0.03); border-radius: 20px; padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-content: start; } .stat-card { background: rgba(255, 255, 255, 0.05); border-radius: 15px; padding: 1.5rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); } .stat-card.blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05)); } .stat-card.orange { background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.05)); } .stat-card.green { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); } .stat-card.dark { background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(30, 41, 59, 0.2)); } .stat-number { font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem; } .stat-label { font-size: 1rem; opacity: 0.8; } /* Slide 5: Menu Details */ .menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1200px; width: 100%; } .menu-detail-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 1.5rem; transition: all 0.3s ease; } .menu-detail-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.08); border-color: rgba(99, 102, 241, 0.5); } .menu-icon-large { width: 50px; height: 50px; background: var(--gradient-1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.3rem; } .menu-detail-card:nth-child(2) .menu-icon-large { background: var(--gradient-2); } .menu-detail-card:nth-child(3) .menu-icon-large { background: var(--gradient-3); } .menu-detail-card:nth-child(4) .menu-icon-large { background: var(--gradient-4); } .menu-detail-card:nth-child(5) .menu-icon-large { background: var(--gradient-1); } .menu-detail-card:nth-child(6) .menu-icon-large { background: var(--gradient-2); } .menu-detail-card:nth-child(7) .menu-icon-large { background: var(--gradient-3); } .menu-detail-card:nth-child(8) .menu-icon-large { background: var(--gradient-4); } .menu-detail-card:nth-child(9) .menu-icon-large { background: var(--gradient-1); } /* Slide 6: Steps */ .steps-container { display: flex; justify-content: space-between; max-width: 1000px; width: 100%; position: relative; } .steps-container::before { content: ''; position: absolute; top: 40px; left: 10%; right: 10%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); z-index: 0; } .step-item { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; flex: 1; } .step-number { width: 80px; height: 80px; background: var(--gradient-1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; margin-bottom: 1rem; border: 4px solid var(--dark); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3); } .step-item:nth-child(2) .step-number { background: var(--gradient-2); box-shadow: 0 0 0 4px rgba(245, 87, 108, 0.3); } .step-item:nth-child(3) .step-number { background: var(--gradient-3); box-shadow: 0 0 0 4px rgba(0, 242, 254, 0.3); } .step-item:nth-child(4) .step-number { background: var(--gradient-4); box-shadow: 0 0 0 4px rgba(56, 249, 215, 0.3); } .step-title { font-size: 1.1rem; font-weight: 700; text-align: center; } /* Slide 7: VCards */ .vcard-showcase { display: flex; gap: 3rem; align-items: center; max-width: 1000px; } .vcard-preview { width: 300px; height: 500px; background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 30px; padding: 2rem; border: 2px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .vcard-preview::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: var(--gradient-1); opacity: 0.1; animation: rotate 10s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .vcard-content { position: relative; z-index: 1; text-align: center; } .vcard-avatar { width: 100px; height: 100px; background: var(--gradient-1); border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 3rem; } .vcard-features { flex: 1; } .vcard-feature-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border-right: 3px solid var(--primary); } /* Slide 8: Marketing Tools */ .tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 900px; width: 100%; } .tool-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2rem; display: flex; align-items: center; gap: 1.5rem; transition: all 0.3s ease; } .tool-card:hover { transform: scale(1.02); background: rgba(255, 255, 255, 0.08); } .tool-icon { width: 70px; height: 70px; background: var(--gradient-1); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; } /* Slide 9: Final */ .final-content { text-align: center; } .cta-button { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gradient-1); color: white; padding: 1rem 3rem; border-radius: 50px; font-size: 1.2rem; font-weight: 700; text-decoration: none; margin-top: 2rem; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4); } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5); } /* Navigation */ .nav-controls { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; z-index: 1000; } .nav-btn { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s ease; backdrop-filter: blur(10px); } .nav-btn:hover { background: rgba(99, 102, 241, 0.5); transform: scale(1.1); } .slide-counter { display: flex; align-items: center; padding: 0 1.5rem; background: rgba(255, 255, 255, 0.1); border-radius: 25px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.2); } /* Progress Bar */ .progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: var(--gradient-1); transition: width 0.3s ease; z-index: 1001; } /* Section Title */ .section-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 3rem; text-align: center; background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Responsive */ @media (max-width: 768px) { .main-title { font-size: 2.5rem; } .intro-grid { grid-template-columns: 1fr; } .pricing-container { grid-template-columns: 1fr; } .dashboard-preview { grid-template-columns: 1fr; } .menu-grid { grid-template-columns: 1fr; } .steps-container { flex-direction: column; gap: 2rem; } .steps-container::before { display: none; } .vcard-showcase { flex-direction: column; } .tools-grid { grid-template-columns: 1fr; } } /* Animations */ .fade-in-up { animation: fadeInUp 0.6s ease forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } </style> <base target="_blank"> </head> <body> <div class="bg-animation"></div> <div class="particles" id="particles"></div> <div class="progress-bar" id="progressBar"></div> <div class="presentation"> <!-- Slide 1: Cover --> <div class="slide active cover-slide"> <div class="logo-container"> <div class="logo"> <i class="fas fa-link"></i> </div> </div> <h1 class="main-title">لينكات أونلاين</h1> <p class="subtitle">منصتك العربية لبناء المواقع والبطاقات الرقمية</p> <div class="tagline"> <span><i class="fas fa-globe"></i> بدون دومين</span> <span><i class="fas fa-server"></i> بدون استضافة</span> <span><i class="fas fa-code"></i> بدون برمجة</span> </div> </div> <!-- Slide 2: Introduction --> <div class="slide"> <h2 class="section-title">ما هي لينكات أونلاين؟</h2> <div class="intro-grid"> <div class="feature-card fade-in-up delay-1"> <div class="feature-icon"><i class="fas fa-store"></i></div> <h3>متجر إلكتروني</h3> <p>أنشئ متجرك الخاص بكل سهولة مع نظام دفع متكامل</p> </div> <div class="feature-card fade-in-up delay-2"> <div class="feature-icon"><i class="fas fa-hotel"></i></div> <h3>حجز فنادق</h3> <p>نظام متكامل لإدارة حجوزات الفنادق والسياحة</p> </div> <div class="feature-card fade-in-up delay-3"> <div class="feature-icon"><i class="fas fa-graduation-cap"></i></div> <h3>منصة تعليمية</h3> <p>أنشئ كورساتك ودروسك اونلاين باحترافية</p> </div> <div class="feature-card fade-in-up delay-1"> <div class="feature-icon"><i class="fas fa-id-card"></i></div> <h3>بطاقات رقمية</h3> <p>فيكارد احترافية مع QR Code مخصص</p> </div> <div class="feature-card fade-in-up delay-2"> <div class="feature-icon"><i class="fas fa-qrcode"></i></div> <h3>منشئ QR</h3> <p>أنشئ رموز استجابة سريعة بتصميم فريد</p> </div> <div class="feature-card fade-in-up delay-3"> <div class="feature-icon"><i class="fas fa-mobile-alt"></i></div> <h3>موقع محمول</h3> <p>تصميم متجاوب يعمل على جميع الأجهزة</p> </div> </div> </div> <!-- Slide 3: Pricing --> <div class="slide"> <h2 class="section-title">خطط الأسعار</h2> <div class="pricing-container"> <div class="pricing-card"> <div class="plan-name">مجاني</div> <div class="plan-price">0 ج.م</div> <div class="plan-period">للتجربة</div> </div> <div class="pricing-card"> <div class="plan-name">بطاقات رقمية</div> <div class="plan-price">250 ج</div> <div class="plan-period">سنويا</div> </div> <div class="pricing-card featured"> <span class="plan-badge">الأفضل</span> <div class="plan-name">Companies</div> <div class="plan-price">400 ج</div> <div class="plan-period">شهرياً</div> </div> <div class="pricing-card"> <div class="plan-name">Commercial</div> <div class="plan-price">500 ج</div> <div class="plan-period">شهرياً</div> </div> <div class="pricing-card"> <div class="plan-name">تجارة الكترونية</div> <div class="plan-price">2999 ج</div> <div class="plan-period">سنوي</div> </div> <div class="pricing-card"> <div class="plan-name">كورسات و دورات</div> <div class="plan-price">1999 ج</div> <div class="plan-period">سنوي</div> </div> <div class="pricing-card"> <div class="plan-name">السياحة و البوكينج</div> <div class="plan-price">2599 ج</div> <div class="plan-period">سنوي</div> </div> <div class="pricing-card featured"> <span class="plan-badge">مدى الحياة</span> <div class="plan-name">اعمال متعددة</div> <div class="plan-price">3999 ج</div> <div class="plan-period">دائم</div> </div> </div> </div> <!-- Slide 4: Dashboard Overview --> <div class="slide"> <h2 class="section-title">لوحة التحكم - نظرة عامة</h2> <div class="dashboard-preview"> <div class="sidebar-preview"> <div class="sidebar-title">القائمة الرئيسية</div> <div class="menu-item"><i class="fas fa-home"></i> الرئيسية</div> <div class="menu-item"><i class="fas fa-cog"></i> الإعدادات</div> <div class="menu-item"><i class="fas fa-users"></i> المستخدمين</div> <div class="menu-item"><i class="fas fa-store"></i> إدارة المتاجر</div> <div class="menu-item"><i class="fas fa-box"></i> المنتجات</div> <div class="menu-item"><i class="fas fa-shopping-cart"></i> الطلبات</div> <div class="menu-item"><i class="fas fa-chart-bar"></i> التقارير</div> <div class="menu-item"><i class="fas fa-id-card"></i> البطاقات</div> </div> <div class="main-preview"> <div class="stat-card blue"> <div class="stat-number">5</div> <div class="stat-label">خدمات</div> </div> <div class="stat-card orange"> <div class="stat-number">6</div> <div class="stat-label">محافظ</div> </div> <div class="stat-card"> <div class="stat-number">0</div> <div class="stat-label">مهارات</div> </div> <div class="stat-card blue"> <div class="stat-number">3</div> <div class="stat-label">تالى</div> </div> <div class="stat-card dark"> <div class="stat-number">0</div> <div class="stat-label">أتباع</div> </div> <div class="stat-card green"> <div class="stat-number">6</div> <div class="stat-label">المدونات</div> </div> </div> </div> </div> <!-- Slide 5: Menu Details --> <div class="slide"> <h2 class="section-title">القائمة الجانبية - التفاصيل</h2> <div class="menu-grid"> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-file-alt"></i></div> <h4>صفحة مخصصة</h4> <p>إنشاء صفحات مخصصة للموقع</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-quote-right"></i></div> <h4>اقتباس الإدارة</h4> <p>إدارة الاقتباسات والشهادات</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-qrcode"></i></div> <h4>رموز QR</h4> <p>إنشاء وإدارة رموز QR</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-address-card"></i></div> <h4>VCards</h4> <p>إدارة البطاقات الرقمية</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-network-wired"></i></div> <h4>أتباع/تتبع</h4> <p>نظام التسويق بالعمولة</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-newspaper"></i></div> <h4>المشتركين</h4> <p>إدارة قائمة المشتركين</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-language"></i></div> <h4>إدارة اللغة</h4> <p>تعديل وإضافة لغات</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-question-circle"></i></div> <h4>الأسئلة الشائعة</h4> <p>إدارة FAQ</p> </div> <div class="menu-detail-card"> <div class="menu-icon-large"><i class="fas fa-envelope"></i></div> <h4>صفحة اتصال</h4> <p>إعداد نموذج التواصل</p> </div> </div> </div> <!-- Slide 6: Steps --> <div class="slide"> <h2 class="section-title">خطوات إنشاء موقعك</h2> <div class="steps-container"> <div class="step-item"> <div class="step-number">1</div> <div class="step-title">التسجيل</div> </div> <div class="step-item"> <div class="step-number">2</div> <div class="step-title">اختيار القالب</div> </div> <div class="step-item"> <div class="step-number">3</div> <div class="step-title">تخصيص التصميم</div> </div> <div class="step-item"> <div class="step-number">4</div> <div class="step-title">النشر</div> </div> </div> </div> <!-- Slide 7: VCards --> <div class="slide"> <h2 class="section-title">البطاقات الرقمية (VCards)</h2> <div class="vcard-showcase"> <div class="vcard-preview"> <div class="vcard-content"> <div class="vcard-avatar"><i class="fas fa-user"></i></div> <h3>محمد أحمد</h3> <p>مصمم جرافيك</p> <div style="margin-top: 2rem; text-align: right;"> <p><i class="fas fa-phone"></i> 0123456789</p> <p><i class="fas fa-envelope"></i> email@example.com</p> <p><i class="fas fa-map-marker-alt"></i> القاهرة، مصر</p> </div> <div style="margin-top: 2rem;"> <i class="fas fa-qrcode" style="font-size: 4rem;"></i> </div> </div> </div> <div class="vcard-features"> <div class="vcard-feature-item"> <i class="fas fa-palette" style="font-size: 1.5rem; color: var(--primary);"></i> <div> <h4>تصميم مخصص</h4> <p>ألوان وخطوط حسب هويتك</p> </div> </div> <div class="vcard-feature-item"> <i class="fas fa-qrcode" style="font-size: 1.5rem; color: var(--secondary);"></i> <div> <h4>QR Code ذكي</h4> <p>مسح سريع ومشاركة سهلة</p> </div> </div> <div class="vcard-feature-item"> <i class="fas fa-share-alt" style="font-size: 1.5rem; color: var(--accent);"></i> <div> <h4>مشاركة فورية</h4> <p>عبر الواتساب والسوشيال ميديا</p> </div> </div> <div class="vcard-feature-item"> <i class="fas fa-edit" style="font-size: 1.5rem; color: #22c55e;"></i> <div> <h4>تحديث فوري</h4> <p>تعديل البيانات في أي وقت</p> </div> </div> </div> </div> </div> <!-- Slide 8: Marketing Tools --> <div class="slide"> <h2 class="section-title">أدوات التسويق المتكاملة</h2> <div class="tools-grid"> <div class="tool-card"> <div class="tool-icon"><i class="fas fa-link"></i></div> <div> <h3>لينكات ذكية</h3> <p>تتبع النقرات وتحليل الأداء</p> </div> </div> <div class="tool-card"> <div class="tool-icon" style="background: var(--gradient-2);"><i class="fas fa-bullhorn"></i></div> <div> <h3>إعلانات مدمجة</h3> <p>نظام إعلاني داخل الموقع</p> </div> </div> <div class="tool-card"> <div class="tool-icon" style="background: var(--gradient-3);"><i class="fas fa-users"></i></div> <div> <h3>نظام الأتباع</h3> <p>تسويق بالعمولة وتتبع المبيعات</p> </div> </div> <div class="tool-card"> <div class="tool-icon" style="background: var(--gradient-4);"><i class="fas fa-chart-line"></i></div> <div> <h3>تقارير analytics</h3> <p>إحصائيات دقيقة لزوارك</p> </div> </div> </div> </div> <!-- Slide 9: Final --> <div class="slide"> <div class="final-content"> <div class="logo" style="margin: 0 auto 2rem;"> <i class="fas fa-rocket"></i> </div> <h2 class="section-title">ابدأ رحلتك الرقمية الآن</h2> <p style="font-size: 1.3rem; margin-bottom: 2rem; opacity: 0.8;"> انضم لآلاف المستخدمين الذين يثقون بنا<br> وابنِ موقعك في دقائق معدودة </p> <a href="https://linkat.online" class="cta-button" target="_blank"> <i class="fas fa-external-link-alt"></i> ابدأ مجاناً الآن </a> <div style="margin-top: 3rem; display: flex; gap: 2rem; justify-content: center;"> <div style="text-align: center;"> <i class="fas fa-check-circle" style="color: #22c55e; font-size: 1.5rem;"></i> <p>تجربة مجانية</p> </div> <div style="text-align: center;"> <i class="fas fa-check-circle" style="color: #22c55e; font-size: 1.5rem;"></i> <p>دعم فني 24/7</p> </div> <div style="text-align: center;"> <i class="fas fa-check-circle" style="color: #22c55e; font-size: 1.5rem;"></i> <p>تحديثات مستمرة</p> </div> </div> </div> </div> </div> <!-- Navigation Controls --> <div class="nav-controls"> <button class="nav-btn" onclick="prevSlide()"> <i class="fas fa-chevron-right"></i> </button> <div class="slide-counter"> <span id="currentSlide">1</span> / <span id="totalSlides">9</span> </div> <button class="nav-btn" onclick="nextSlide()"> <i class="fas fa-chevron-left"></i> </button> </div> <script> let currentSlide = 0; const slides = document.querySelectorAll('.slide'); const totalSlides = slides.length; // Create particles const particlesContainer = document.getElementById('particles'); for (let i = 0; i < 50; i++) { const particle = document.createElement('div'); particle.className = 'particle'; particle.style.left = Math.random() * 100 + '%'; particle.style.animationDelay = Math.random() * 15 + 's'; particle.style.animationDuration = (10 + Math.random() * 10) + 's'; particlesContainer.appendChild(particle); } function updateSlide() { slides.forEach((slide, index) => { slide.classList.remove('active', 'prev', 'next'); if (index === currentSlide) { slide.classList.add('active'); } else if (index < currentSlide) { slide.classList.add('prev'); } else { slide.classList.add('next'); } }); document.getElementById('currentSlide').textContent = currentSlide + 1; document.getElementById('progressBar').style.width = ((currentSlide + 1) / totalSlides * 100) + '%'; } function nextSlide() { if (currentSlide < totalSlides - 1) { currentSlide++; updateSlide(); } } function prevSlide() { if (currentSlide > 0) { currentSlide--; updateSlide(); } } // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') nextSlide(); if (e.key === 'ArrowRight') prevSlide(); }); // Touch navigation let touchStartX = 0; document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; }); document.addEventListener('touchend', (e) => { const touchEndX = e.changedTouches[0].clientX; const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { if (diff > 0) nextSlide(); else prevSlide(); } }); // Initialize document.getElementById('totalSlides').textContent = totalSlides; updateSlide(); // Auto-animate elements on slide change const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.target.classList.contains('active')) { const animatedElements = mutation.target.querySelectorAll('.fade-in-up'); animatedElements.forEach((el, index) => { el.style.animation = 'none'; setTimeout(() => { el.style.animation = `fadeInUp 0.6s ease forwards ${index * 0.1}s`; }, 10); }); } }); }); slides.forEach(slide => { observer.observe(slide, { attributes: true, attributeFilter: ['class'] }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 8.2.31 | Generation time: 1.4 |
proxy
|
phpinfo
|
Settings