Desktop / index.html
MGZON's picture
Update index.html
86b913f verified
Raw History Blame Contribute Delete
228 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<!-- ============================================
Character & Viewport
============================================ -->
<meta charset="UTF-8">
<!-- ============================================
Google Search Console Verification
============================================ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="google-site-verification" content="FIj69rC4v22ch_TrqzvFISiocZQmC9wGL6URCkZzQt4" />
<!-- ============================================
Primary Meta Tags
============================================ -->
<title>Talvo Desktop - نظام إدارة المستلزمات الطبية والمستحضرات | ERP متكامل للصيدليات</title>
<meta name="title" content="Talvo Desktop - نظام إدارة المستلزمات الطبية والمستحضرات | ERP متكامل">
<meta name="description" content="نظام Talvo Desktop المتكامل لإدارة الصيدليات ومحلات المستلزمات الطبية. إدارة المبيعات، المشتريات، المخزون، الفروع، العملاء، والتقارير. دفعة واحدة 25,000 ج.م مدى الحياة. بدون اشتراكات.">
<meta name="keywords" content="نظام إدارة صيدلية, برنامج صيدلية, ERP صيدليات, إدارة مستلزمات طبية, نظام مبيعات, نظام مخزون, Talvo Desktop, نظام فروع, إدارة عملاء, فواتير بيع, فواتير شراء, برنامج إدارة صيدليات مصر, نظام ERP عربي">
<!-- ============================================
Author Meta Tags
============================================ -->
<meta name="author" content="Mark Elasfar">
<meta name="designer" content="Mark Elasfar">
<meta name="developer" content="Mark Elasfar">
<meta name="creator" content="Mark Elasfar">
<meta name="publisher" content="Mark Elasfar">
<meta name="copyright" content="Mark Elasfar">
<meta name="owner" content="Mark Elasfar">
<!-- Author Alternate Names -->
<meta name="author:alternate" content="Mark Alasfar">
<meta name="author:nickname" content="mark lasfar">
<!-- Author Social -->
<meta name="author:github" content="https://github.com/Mark-Lasfar">
<meta name="author:twitter" content="@marklasfar">
<meta name="author:linkedin" content="https://www.linkedin.com/in/ibrahimelasfar">
<meta name="author:email" content="mark@talvo.com">
<!-- ============================================
SEO Meta Tags
============================================ -->
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="googlebot" content="index, follow">
<meta name="bingbot" content="index, follow">
<meta name="language" content="Arabic">
<meta name="revisit-after" content="7 days">
<meta name="rating" content="general">
<meta name="distribution" content="global">
<meta name="theme-color" content="#2563eb">
<meta name="color-scheme" content="light dark">
<!-- ============================================
Geographic Tags
============================================ -->
<meta name="geo.region" content="EG">
<meta name="geo.placename" content="Cairo, Egypt">
<meta name="geo.position" content="30.0444;31.2357">
<meta name="ICBM" content="30.0444, 31.2357">
<!-- ============================================
Open Graph / Facebook
============================================ -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://talvoapp.github.io/demo-repository/">
<meta property="og:title" content="Talvo Desktop - نظام إدارة المستلزمات الطبية والمستحضرات">
<meta property="og:description" content="نظام متكامل لإدارة الصيدليات ومحلات المستلزمات الطبية. إدارة المبيعات، المشتريات، المخزون، الفروع، والعملاء من مكان واحد. دفعة واحدة 25,000 ج.م مدى الحياة.">
<meta property="og:image" content="https://avatars.githubusercontent.com/u/337130551?s=1200&v=4">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Talvo Desktop - نظام إدارة المستلزمات الطبية">
<meta property="og:site_name" content="Talvo Desktop">
<meta property="og:locale" content="ar_EG">
<meta property="og:locale:alternate" content="en_US">
<!-- Open Graph Author -->
<meta property="article:author" content="Mark Elasfar">
<meta property="article:author:url" content="https://github.com/Mark-Lasfar">
<meta property="article:author:image" content="https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg">
<meta property="profile:first_name" content="Mark">
<meta property="profile:last_name" content="Elasfar">
<meta property="profile:username" content="markelasfar">
<meta property="profile:image" content="https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg">
<!-- ============================================
Twitter Card
============================================ -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://talvoapp.github.io/demo-repository/">
<meta name="twitter:title" content="Talvo Desktop - نظام إدارة المستلزمات الطبية والمستحضرات">
<meta name="twitter:description" content="نظام متكامل لإدارة الصيدليات ومحلات المستلزمات الطبية. دفعة واحدة 25,000 ج.م مدى الحياة.">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/337130551?s=1200&v=4">
<meta name="twitter:image:alt" content="Talvo Desktop - Mark Elasfar">
<meta name="twitter:creator" content="@marklasfar">
<meta name="twitter:creator:id" content="markelasfar">
<meta name="twitter:site" content="@talvoapp">
<meta name="twitter:label1" content="Written by">
<meta name="twitter:data1" content="Mark Elasfar">
<meta name="twitter:label2" content="Role">
<meta name="twitter:data2" content="Lead Developer">
<!-- ============================================
Canonical URL
============================================ -->
<link rel="canonical" href="https://talvoapp.github.io/demo-repository/">
<!-- ============================================
Alternate Languages
============================================ -->
<link rel="alternate" hreflang="ar" href="https://talvoapp.github.io/demo-repository/">
<link rel="alternate" hreflang="en" href="https://talvoapp.github.io/demo-repository/en/">
<link rel="alternate" hreflang="x-default" href="https://talvoapp.github.io/demo-repository/">
<!-- ============================================
DNS Prefetch & Preconnect
============================================ -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="https://avatars.githubusercontent.com">
<link rel="dns-prefetch" href="https://talvo-api.vercel.app">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://avatars.githubusercontent.com">
<!-- ============================================
Favicon
============================================ -->
<link rel="icon" type="image/png" sizes="32x32" href="https://avatars.githubusercontent.com/u/337130551?s=32&v=4">
<link rel="icon" type="image/png" sizes="16x16" href="https://avatars.githubusercontent.com/u/337130551?s=16&v=4">
<link rel="apple-touch-icon" sizes="180x180" href="https://avatars.githubusercontent.com/u/337130551?s=180&v=4">
<link rel="icon" type="image/png" sizes="192x192" href="https://avatars.githubusercontent.com/u/337130551?s=192&v=4">
<link rel="icon" type="image/png" sizes="512x512" href="https://avatars.githubusercontent.com/u/337130551?s=512&v=4">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileImage" content="https://avatars.githubusercontent.com/u/337130551?s=144&v=4">
<meta name="msapplication-TileColor" content="#2563eb">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Talvo">
<meta name="application-name" content="Talvo Desktop">
<meta name="mobile-web-app-capable" content="yes">
<!-- ============================================
Google Fonts
============================================ -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
<!-- ============================================
Font Awesome Icons
============================================ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- ============================================
Structured Data - SoftwareApplication
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Talvo Desktop",
"alternateName": "Talvo ERP",
"applicationCategory": "BusinessApplication",
"applicationSubCategory": "ERP Software",
"operatingSystem": "Windows 7 SP1, Windows 8, Windows 8.1, Windows 10, Windows 11",
"softwareVersion": "1.0.2",
"releaseNotes": "https://github.com/talvoapp/talvo-desktop/releases/tag/v1.0.2",
"description": "نظام إدارة المستلزمات الطبية والمستحضرات - حل متكامل لإدارة الصيدليات ومحلات المستلزمات الطبية. إدارة المبيعات، المشتريات، المخزون، الفروع، والعملاء من مكان واحد.",
"url": "https://talvoapp.github.io/demo-repository/",
"downloadUrl": "https://github.com/talvoapp/talvo-desktop/releases/latest",
"installUrl": "https://github.com/talvoapp/talvo-desktop/releases/latest",
"image": "https://avatars.githubusercontent.com/u/337130551?s=1200&v=4",
"screenshot": [
"https://avatars.githubusercontent.com/u/337130551?s=1200&v=4",
"https://avatars.githubusercontent.com/u/337130551?s=1200&v=4"
],
"softwareHelp": {
"@type": "CreativeWork",
"url": "https://github.com/talvoapp/talvo-desktop/issues"
},
"author": {
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": ["Mark Alasfar", "mark lasfar"],
"jobTitle": "Lead Developer & System Architect",
"url": "https://github.com/Mark-Lasfar",
"email": "mark@talvo.com",
"sameAs": [
"https://github.com/Mark-Lasfar",
"https://twitter.com/marklasfar",
"https://www.linkedin.com/in/ibrahimelasfar"
]
},
"creator": {
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": ["Mark Alasfar", "mark lasfar"],
"jobTitle": "Lead Developer & System Architect",
"url": "https://github.com/Mark-Lasfar",
"image": {
"@type": "ImageObject",
"url": "https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg",
"width": 400,
"height": 400
}
},
"publisher": {
"@type": "Organization",
"name": "Talvo",
"url": "https://talvoapp.github.io/demo-repository",
"logo": {
"@type": "ImageObject",
"url": "https://avatars.githubusercontent.com/u/337130551?s=200&v=4"
},
"founder": {
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": "Mark Alasfar",
"url": "https://github.com/Mark-Lasfar"
}
},
"contributor": [
{
"@type": "Role",
"roleName": "Lead Developer",
"contributor": {
"@type": "Person",
"name": "Mark Elasfar",
"url": "https://github.com/Mark-Lasfar"
}
}
],
"offers": {
"@type": "Offer",
"price": "25000",
"priceCurrency": "EGP",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2027-12-31",
"url": "https://talvoapp.github.io/demo-repository/#pricing",
"seller": {
"@type": "Organization",
"name": "Talvo"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "127",
"bestRating": "5",
"worstRating": "1"
},
"featureList": [
"إدارة المبيعات",
"إدارة المشتريات",
"إدارة المخزون",
"إدارة العملاء",
"إدارة الفروع",
"التقارير المتقدمة",
"نظام الصلاحيات",
"المزامنة السحابية",
"الوصول عن بُعد",
"النسخ الاحتياطي التلقائي"
]
}
</script>
<!-- ============================================
Structured Data - Organization
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Talvo",
"legalName": "Talvo Company",
"url": "https://talvoapp.github.io/demo-repository",
"logo": {
"@type": "ImageObject",
"url": "https://avatars.githubusercontent.com/u/337130551?s=200&v=4",
"width": 200,
"height": 200
},
"description": "نظام إدارة المستلزمات الطبية والمستحضرات - حل متكامل لإدارة الصيدليات ومحلات المستلزمات الطبية.",
"email": "support@talvo.com",
"address": {
"@type": "PostalAddress",
"addressLocality": "Cairo",
"addressCountry": "EG"
},
"sameAs": [
"https://github.com/talvoapp",
"https://twitter.com/talvoapp",
"https://www.linkedin.com/company/talvoapp",
"https://www.facebook.com/talvoapp"
],
"founder": {
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": ["Mark Alasfar", "mark lasfar"],
"jobTitle": "Founder & Lead Developer",
"url": "https://github.com/Mark-Lasfar",
"email": "mark@talvo.com",
"image": {
"@type": "ImageObject",
"url": "https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg",
"width": 400,
"height": 400
},
"sameAs": [
"https://github.com/Mark-Lasfar",
"https://twitter.com/marklasfar",
"https://www.linkedin.com/in/ibrahimelasfar"
]
},
"foundingDate": "2026",
"numberOfEmployees": {
"@type": "QuantitativeValue",
"value": 1
},
"employee": [
{
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": ["Mark Alasfar", "mark lasfar"],
"jobTitle": "Lead Developer & System Architect",
"url": "https://github.com/Mark-Lasfar"
}
],
"contactPoint": {
"@type": "ContactPoint",
"email": "support@talvo.com",
"contactType": "customer support",
"availableLanguage": ["Arabic", "English"],
"areaServed": "EG",
"hoursAvailable": {
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"opens": "09:00",
"closes": "18:00"
}
}
}
</script>
<!-- ============================================
Structured Data - FAQPage
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "هل التطبيق مجاني؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "التطبيق مدفوع لمرة واحدة بسعر 25,000 ج.م، وتستخدمه مدى الحياة. لا يوجد اشتراكات شهرية أو سنوية."
}
},
{
"@type": "Question",
"name": "هل يحتاج التطبيق خبرة تقنية؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "لا على الإطلاق. التطبيق مصمم ليكون سهل الاستخدام لجميع المستويات. مجرد تثبيت وتسجيل دخول، وتبدأ العمل مباشرة."
}
},
{
"@type": "Question",
"name": "ما الفرق بين السيرفر الرئيسي (Master) والفرع (Branch)؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "السيرفر الرئيسي هو الجهاز الأساسي الذي يخزن جميع البيانات، ويعمل 24/7. الفروع هي أجهزة تتصل بالسيرفر الرئيسي عن بُعد لتنفيذ العمليات. النظام يدعم سيرفر رئيسي واحد فقط، وعدد غير محدود من الفروع."
}
},
{
"@type": "Question",
"name": "هل يمكنني استخدام التطبيق على أكثر من جهاز؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "نعم. النظام مصمم لدعم عدة أجهزة. جهاز واحد يكون السيرفر الرئيسي، والباقي فروع تتصل به. جميع الفروع تتزامن مع السيرفر الرئيسي بشكل تلقائي."
}
},
{
"@type": "Question",
"name": "هل الفروع تحتاج أن تكون في نفس الشبكة؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "لا. الفروع يمكنها الاتصال بالسيرفر الرئيسي من أي مكان في العالم عبر Cloudflare Tunnel. لا تحتاج أن تكون في نفس الشبكة المحلية."
}
},
{
"@type": "Question",
"name": "هل بياناتي آمنة؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "نعم. جميع البيانات مخزنة محلياً على السيرفر الرئيسي الخاص بك، ولا تُرسل لأي طرف ثالث. النسخ الاحتياطي التلقائي يحمي بياناتك من الفقدان."
}
},
{
"@type": "Question",
"name": "كيف يتم النسخ الاحتياطي؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "يتم إنشاء نسخة احتياطية تلقائياً كل 60 دقيقة. يتم الاحتفاظ بآخر نسختين. يمكنك أيضاً إنشاء نسخة يدوياً في أي وقت من إعدادات التطبيق."
}
},
{
"@type": "Question",
"name": "هل الدفع لمرة واحدة أم اشتراك سنوي؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "الدفع لمرة واحدة فقط 25,000 ج.م. تشتري البرنامج مرة، وتستخدمه مدى الحياة. لا يوجد اشتراكات شهرية أو سنوية إجبارية."
}
},
{
"@type": "Question",
"name": "هل يوجد ضمان لاسترداد الأموال؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "نعم، نوفر ضمان استرداد الأموال لمدة 14 يوماً من تاريخ الشراء. إذا لم يكن البرنامج مناسباً لاحتياجاتك، يمكنك طلب استرداد كامل للمبلغ بدون أي أسئلة."
}
},
{
"@type": "Question",
"name": "ما هي طرق الدفع المتاحة؟",
"acceptedAnswer": {
"@type": "Answer",
"text": "نقبل الدفع عبر: فودافون كاش، إنستاباي، تحويل بنكي، والدفع عند التسليم (للشركات فقط)."
}
}
]
}
</script>
<!-- ============================================
Structured Data - BreadcrumbList
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "الرئيسية",
"item": "https://talvoapp.github.io/demo-repository/"
},
{
"@type": "ListItem",
"position": 2,
"name": "المميزات",
"item": "https://talvoapp.github.io/demo-repository/#features"
},
{
"@type": "ListItem",
"position": 3,
"name": "الأسعار",
"item": "https://talvoapp.github.io/demo-repository/#pricing"
},
{
"@type": "ListItem",
"position": 4,
"name": "الأسئلة الشائعة",
"item": "https://talvoapp.github.io/demo-repository/#faq"
},
{
"@type": "ListItem",
"position": 5,
"name": "اتصل بنا",
"item": "https://talvoapp.github.io/demo-repository/#contact"
}
]
}
</script>
<!-- ============================================
Structured Data - WebSite
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Talvo Desktop",
"url": "https://talvoapp.github.io/demo-repository/",
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://talvoapp.github.io/demo-repository/search?q={search_term_string}"
},
"query-input": "required name=search_term_string"
},
"inLanguage": "ar",
"author": {
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": "Mark Alasfar",
"url": "https://github.com/Mark-Lasfar"
},
"creator": {
"@type": "Person",
"name": "Mark Elasfar",
"url": "https://github.com/Mark-Lasfar"
},
"copyrightHolder": {
"@type": "Person",
"name": "Mark Elasfar",
"url": "https://github.com/Mark-Lasfar"
}
}
</script>
<!-- ============================================
Structured Data - Product
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Talvo Desktop - نظام إدارة المستلزمات الطبية",
"description": "نظام متكامل لإدارة الصيدليات ومحلات المستلزمات الطبية. إدارة المبيعات، المشتريات، المخزون، الفروع، والعملاء من مكان واحد.",
"image": "https://avatars.githubusercontent.com/u/337130551?s=1200&v=4",
"brand": {
"@type": "Brand",
"name": "Talvo"
},
"sku": "TALVO-DESKTOP-1.0.2",
"offers": {
"@type": "Offer",
"url": "https://talvoapp.github.io/demo-repository/#pricing",
"priceCurrency": "EGP",
"price": "25000",
"priceValidUntil": "2027-12-31",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Talvo"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "127"
}
}
</script>
<!-- ============================================
Structured Data - VideoObject (Demo)
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "Talvo Desktop - Demo",
"description": "عرض توضيحي لنظام Talvo Desktop لإدارة المستلزمات الطبية",
"thumbnailUrl": "https://avatars.githubusercontent.com/u/337130551?s=1200&v=4",
"uploadDate": "2026-10-04",
"contentUrl": "https://talvoapp.github.io/demo-repository/videos/demo.mp4",
"embedUrl": "https://talvoapp.github.io/demo-repository/videos/demo",
"duration": "PT5M30S"
}
</script>
<!-- ============================================
Structured Data - Person (Developer)
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": ["Mark Alasfar", "mark lasfar", "Mark E.", "M. Elasfar"],
"givenName": "Mark",
"familyName": "Elasfar",
"jobTitle": "Lead Developer & System Architect",
"description": "مطور نظام Talvo Desktop وكبير فريق المبرمجين. خبير في تطوير أنظمة ERP للصيدليات والمستلزمات الطبية.",
"url": "https://github.com/Mark-Lasfar",
"email": "mark@talvo.com",
"image": {
"@type": "ImageObject",
"url": "https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg",
"width": 400,
"height": 400
},
"worksFor": {
"@type": "Organization",
"name": "Talvo",
"url": "https://talvo.com"
},
"knowsAbout": [
"ERP Development",
"Python Programming",
"PyQt5",
"Flask",
"SQLAlchemy",
"Desktop Applications",
"Software Architecture",
"Medical Software",
"Pharmacy Management Systems"
],
"hasOccupation": {
"@type": "Occupation",
"name": "Software Developer",
"occupationalCategory": "15-1252.00",
"skills": "Python, PyQt5, Flask, SQLAlchemy, ERP Systems, Desktop Applications"
},
"sameAs": [
"https://github.com/Mark-Lasfar",
"https://twitter.com/marklasfar",
"https://www.linkedin.com/in/ibrahimelasfar",
"https://www.facebook.com/mark.al.asfar/"
],
"nationality": {
"@type": "Country",
"name": "Egypt"
},
"address": {
"@type": "PostalAddress",
"addressLocality": "Cairo",
"addressCountry": "EG"
}
}
</script>
<!-- ============================================
Structured Data - ProfilePage
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfilePage",
"mainEntity": {
"@type": "Person",
"name": "Mark Elasfar",
"alternateName": ["Mark Alasfar", "mark lasfar"],
"givenName": "Mark",
"familyName": "Elasfar",
"jobTitle": "Lead Developer & System Architect",
"description": "مطور نظام Talvo Desktop وكبير فريق المبرمجين. خبير في تطوير أنظمة ERP للصيدليات والمستلزمات الطبية.",
"url": "https://github.com/Mark-Lasfar",
"mainEntityOfPage": "https://talvoapp.github.io/demo-repository/#developer",
"email": "mark@talvo.com",
"image": {
"@type": "ImageObject",
"url": "https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg",
"width": 400,
"height": 400,
"caption": "Mark Elasfar - Lead Developer"
},
"worksFor": {
"@type": "Organization",
"name": "Talvo",
"url": "https://talvo.com"
},
"knowsAbout": [
"ERP Development",
"Python Programming",
"PyQt5",
"Flask",
"SQLAlchemy",
"Desktop Applications",
"Software Architecture",
"Medical Software"
],
"sameAs": [
"https://github.com/Mark-Lasfar",
"https://twitter.com/marklasfar",
"https://www.linkedin.com/in/ibrahimelasfar",
"https://facebook.com/mark.al.asfar/"
],
"nationality": {
"@type": "Country",
"name": "Egypt"
},
"address": {
"@type": "PostalAddress",
"addressLocality": "Cairo",
"addressCountry": "EG"
}
},
"dateCreated": "2026-10-04",
"dateModified": "2026-10-04"
}
</script>
<!-- ============================================
Structured Data - ImageObject (Developer)
============================================ -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"url": "https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg",
"contentUrl": "https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg",
"name": "Mark Elasfar - Lead Developer",
"description": "صورة Mark Elasfar - مطور نظام Talvo Desktop وكبير فريق المبرمجين",
"width": 400,
"height": 400,
"caption": "Mark Elasfar - Lead Developer",
"representativeOfPage": true,
"creator": {
"@type": "Person",
"name": "Mark Elasfar",
"url": "https://github.com/Mark-Lasfar"
},
"copyrightHolder": {
"@type": "Person",
"name": "Mark Elasfar",
"url": "https://github.com/Mark-Lasfar"
},
"copyrightNotice": "© 2026 Mark Elasfar. All rights reserved.",
"license": "https://github.com/talvoapp/talvo-desktop/blob/main/LICENSE"
}
</script>
<!-- ============================================
Inline Critical CSS (Optional - for faster load)
============================================ -->
<style>
/* Critical CSS for above-the-fold content */
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #60a5fa;
--primary-bg: #eff6ff;
--secondary: #0f172a;
--secondary-light: #1e293b;
--accent: #f59e0b;
--accent-dark: #d97706;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--info: #06b6d4;
--text: #0f172a;
--text-light: #64748b;
--text-muted: #94a3b8;
--bg: #ffffff;
--bg-light: #f8fafc;
--bg-code: #1e293b;
--border: #e2e8f0;
--border-light: #f1f5f9;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-main: 'Cairo', sans-serif;
--font-mono: 'Fira Code', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-main);
background: var(--bg);
color: var(--text);
line-height: 1.8;
overflow-x: hidden;
}
</style>
<style>
/* ============================================
CSS Variables
============================================ */
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #60a5fa;
--primary-bg: #eff6ff;
--secondary: #0f172a;
--secondary-light: #1e293b;
--accent: #f59e0b;
--accent-dark: #d97706;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--info: #06b6d4;
--text: #0f172a;
--text-light: #64748b;
--text-muted: #94a3b8;
--bg: #ffffff;
--bg-light: #f8fafc;
--bg-code: #1e293b;
--border: #e2e8f0;
--border-light: #f1f5f9;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-main: 'Cairo', sans-serif;
--font-mono: 'Fira Code', monospace;
}
/* Dark Mode */
[data-theme="dark"] {
--text: #f1f5f9;
--text-light: #cbd5e1;
--text-muted: #94a3b8;
--bg: #0f172a;
--bg-light: #1e293b;
--border: #334155;
--border-light: #1e293b;
--primary-bg: #1e3a8a;
}
/* ============================================
Reset & Base
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
font-family: var(--font-main);
background: var(--bg);
color: var(--text);
line-height: 1.8;
overflow-x: hidden;
transition: background var(--transition), color var(--transition);
}
a {
color: var(--primary);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--primary-dark);
}
img {
max-width: 100%;
display: block;
}
/* ============================================
Container
============================================ */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* ============================================
Navbar
============================================ */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 12px 0;
z-index: 1000;
transition: all var(--transition);
}
[data-theme="dark"] .navbar {
background: rgba(15, 23, 42, 0.85);
}
.navbar.scrolled {
box-shadow: var(--shadow-md);
}
.navbar-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.4rem;
font-weight: 900;
color: var(--primary);
text-decoration: none;
flex-shrink: 0;
}
.logo-img {
width: 42px;
height: 42px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
transition: transform var(--transition);
object-fit: cover;
}
.logo:hover .logo-img {
transform: rotate(-10deg) scale(1.05);
}
.nav-links {
display: flex;
gap: 24px;
list-style: none;
align-items: center;
}
.nav-links a {
color: var(--text);
font-weight: 600;
font-size: 0.9rem;
position: relative;
padding: 6px 0;
display: flex;
align-items: center;
gap: 6px;
}
.nav-links a i {
font-size: 0.85rem;
color: var(--text-light);
transition: color var(--transition);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: width var(--transition);
}
.nav-links a:hover,
.nav-links a:hover i {
color: var(--primary);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.theme-toggle {
width: 40px;
height: 40px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--text);
transition: all var(--transition);
}
.theme-toggle:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.mobile-menu-btn {
display: none;
width: 40px;
height: 40px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--text);
}
/* ============================================
Hero
============================================ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding: 120px 0 80px;
background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg) 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 1px, transparent 1px);
background-size: 32px 32px;
animation: gridMove 30s linear infinite;
z-index: 0;
}
@keyframes gridMove {
0% { transform: translate(0, 0); }
100% { transform: translate(32px, 32px); }
}
.hero-content {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: var(--primary-bg);
color: var(--primary);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 24px;
}
.hero-badge .dot {
width: 8px;
height: 8px;
background: var(--success);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
.hero-text h1 {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 24px;
color: var(--text);
}
.hero-text h1 .gradient {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-text p {
font-size: 1.15rem;
color: var(--text-light);
margin-bottom: 32px;
line-height: 1.8;
max-width: 550px;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-size: 1rem;
font-weight: 700;
font-family: var(--font-main);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
transition: all var(--transition);
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5);
color: white;
}
.btn-secondary {
background: var(--bg);
color: var(--text);
border: 2px solid var(--border);
}
.btn-secondary:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-3px);
}
.hero-quick-stats {
display: flex;
gap: 32px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.quick-stat h4 {
font-size: 1.8rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
margin-bottom: 4px;
}
.quick-stat p {
font-size: 0.85rem;
color: var(--text-light);
margin: 0;
}
/* Hero Visual */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.floating-card {
position: absolute;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 16px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
font-weight: 700;
z-index: 3;
animation: float 4s ease-in-out infinite;
}
.floating-card.top-right {
top: 20px;
right: -10px;
animation-delay: 0s;
}
.floating-card.bottom-left {
bottom: 40px;
left: -20px;
animation-delay: 2s;
}
.floating-card .icon {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.floating-card .icon.green {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.floating-card .icon.blue {
background: rgba(37, 99, 235, 0.15);
color: var(--primary);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.app-mockup {
width: 100%;
max-width: 520px;
background: var(--bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2xl);
overflow: hidden;
border: 1px solid var(--border);
position: relative;
z-index: 1;
}
.mockup-header {
background: var(--secondary);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 8px;
}
.mockup-dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.mockup-dot.red { background: #ff5f57; }
.mockup-dot.yellow { background: #ffbd2e; }
.mockup-dot.green { background: #28ca42; }
.mockup-url {
margin-right: auto;
margin-left: auto;
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
font-family: var(--font-mono);
}
.mockup-body {
padding: 20px;
background: var(--bg);
}
.mockup-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.mockup-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
}
.mockup-user {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
color: var(--text-light);
}
.mockup-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.7rem;
font-weight: 700;
}
.mockup-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.mockup-stat {
background: var(--bg-light);
border-radius: var(--radius-sm);
padding: 12px;
text-align: center;
}
.mockup-stat .value {
font-size: 1.1rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
margin-bottom: 4px;
}
.mockup-stat .label {
font-size: 0.65rem;
color: var(--text-muted);
}
.mockup-chart {
height: 140px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: var(--radius-sm);
padding: 16px;
display: flex;
align-items: flex-end;
gap: 8px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.mockup-chart::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2), transparent 60%);
}
.mockup-bar {
flex: 1;
background: rgba(255, 255, 255, 0.4);
border-radius: 4px 4px 0 0;
animation: barPulse 2.5s ease-in-out infinite;
position: relative;
z-index: 1;
}
.mockup-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.mockup-bar:nth-child(2) { height: 70%; animation-delay: 0.2s; }
.mockup-bar:nth-child(3) { height: 50%; animation-delay: 0.4s; }
.mockup-bar:nth-child(4) { height: 90%; animation-delay: 0.6s; }
.mockup-bar:nth-child(5) { height: 60%; animation-delay: 0.8s; }
.mockup-bar:nth-child(6) { height: 80%; animation-delay: 1s; }
@keyframes barPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.mockup-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mockup-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bg-light);
border-radius: var(--radius-sm);
font-size: 0.75rem;
}
.mockup-list-item .icon {
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
flex-shrink: 0;
}
.mockup-list-item .icon.green { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.mockup-list-item .icon.blue { background: rgba(37, 99, 235, 0.15); color: var(--primary); }
.mockup-list-item .icon.orange { background: rgba(245, 158, 11, 0.15); color: var(--accent); }
.mockup-list-item .text {
flex: 1;
color: var(--text);
font-weight: 600;
}
.mockup-list-item .amount {
font-weight: 900;
color: var(--primary);
}
/* ============================================
Stats Bar
============================================ */
.stats-bar {
background: var(--secondary);
padding: 48px 0;
color: white;
position: relative;
overflow: hidden;
}
.stats-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
position: relative;
z-index: 1;
}
.stat-item {
padding: 16px;
}
.stat-item h3 {
font-size: 3rem;
font-weight: 900;
color: var(--accent);
line-height: 1;
margin-bottom: 8px;
font-family: var(--font-mono);
}
.stat-item p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
}
/* FAQ Search Highlight */
.faq-answer mark,
.faq-question mark {
background: rgba(245, 158, 11, 0.3);
color: var(--text);
padding: 1px 4px;
border-radius: 3px;
font-weight: 700;
}
/* FAQ Search Input Enhancement */
.faq-search {
position: relative;
max-width: 600px;
margin: 0 auto 40px;
}
.faq-search input {
width: 100%;
padding: 16px 50px 16px 50px;
font-size: 1rem;
font-family: var(--font-main);
background: var(--bg);
border: 2px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
transition: all var(--transition);
}
.faq-search input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.faq-search .search-icon {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1rem;
color: var(--text-muted);
pointer-events: none;
transition: color var(--transition);
}
.faq-search input:focus + .search-icon {
color: var(--primary);
}
/* Search hints */
.faq-search-hint {
display: block;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 12px;
}
.faq-search-hint kbd {
display: inline-block;
padding: 2px 8px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text);
}
/* FAQ Category (إضافة) */
.faq-category {
margin: 32px 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border);
}
.faq-category:first-child {
margin-top: 0;
}
.faq-category h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.faq-category h3 i {
width: 32px;
height: 32px;
background: var(--primary-bg);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
/* ============================================
Sections
============================================ */
.section {
padding: 96px 0;
position: relative;
}
.section-alt {
background: var(--bg-light);
}
.section-header {
text-align: center;
margin-bottom: 64px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.section-label {
display: inline-block;
padding: 6px 16px;
background: var(--primary-bg);
color: var(--primary);
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 900;
color: var(--text);
margin-bottom: 16px;
line-height: 1.3;
}
.section-header p {
font-size: 1.1rem;
color: var(--text-light);
line-height: 1.8;
}
/* ============================================
How It Works
============================================ */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
position: relative;
}
.step-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px 28px;
text-align: center;
position: relative;
transition: all var(--transition);
}
.step-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
.step-number {
position: absolute;
top: -20px;
right: 50%;
transform: translateX(50%);
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.1rem;
box-shadow: var(--shadow-lg);
border: 3px solid var(--bg);
}
.step-icon {
width: 72px;
height: 72px;
margin: 16px auto 24px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: white;
box-shadow: var(--shadow-md);
}
.step-card h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
}
.step-card p {
color: var(--text-light);
line-height: 1.7;
font-size: 0.95rem;
}
/* ============================================
Architecture
============================================ */
.architecture {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 48px 32px;
box-shadow: var(--shadow-lg);
}
.arch-diagram {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
align-items: center;
margin-bottom: 32px;
}
.arch-node {
background: var(--bg-light);
border: 2px solid var(--border);
border-radius: var(--radius-md);
padding: 24px 16px;
text-align: center;
transition: all var(--transition);
}
.arch-node:hover {
border-color: var(--primary);
transform: scale(1.02);
}
.arch-node.master {
border-color: var(--primary);
background: var(--primary-bg);
}
.arch-node.cloud {
border-color: var(--accent);
background: rgba(245, 158, 11, 0.1);
}
.arch-node-icon {
width: 56px;
height: 56px;
margin: 0 auto 12px;
background: var(--bg);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--primary);
box-shadow: var(--shadow-sm);
}
.arch-node h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.arch-node p {
font-size: 0.8rem;
color: var(--text-light);
}
.arch-arrow {
text-align: center;
font-size: 1.5rem;
color: var(--primary);
font-weight: 900;
}
/* ============================================
Features Grid
============================================ */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.feature-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px;
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition);
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.4rem;
margin-bottom: 20px;
box-shadow: var(--shadow-md);
transition: transform var(--transition);
}
.feature-card:hover .feature-icon {
transform: rotate(-8deg) scale(1.1);
}
.feature-card h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
}
.feature-card p {
color: var(--text-light);
line-height: 1.7;
font-size: 0.95rem;
}
.feature-card ul {
margin-top: 12px;
padding-right: 20px;
color: var(--text-light);
font-size: 0.9rem;
list-style: none;
}
.feature-card ul li {
margin-bottom: 6px;
position: relative;
padding-right: 20px;
}
.feature-card ul li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 0;
color: var(--success);
font-size: 0.75rem;
}
/* ============================================
Testimonials
============================================ */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.testimonial-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px;
transition: all var(--transition);
position: relative;
}
.testimonial-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
.testimonial-quote {
position: absolute;
top: 20px;
left: 24px;
font-size: 3rem;
color: var(--primary-bg);
font-family: Georgia, serif;
line-height: 1;
}
.testimonial-rating {
display: flex;
gap: 4px;
margin-bottom: 16px;
color: var(--accent);
}
.testimonial-text {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.testimonial-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
}
.testimonial-info h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.testimonial-info p {
font-size: 0.85rem;
color: var(--text-light);
}
/* ============================================
Pricing
============================================ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.pricing-card {
background: var(--bg);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px 28px;
transition: all var(--transition);
position: relative;
display: flex;
flex-direction: column;
}
.pricing-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.pricing-card.featured {
border-color: var(--primary);
box-shadow: var(--shadow-lg);
transform: scale(1.03);
}
.pricing-card.featured::before {
content: 'الأكثر طلباً';
position: absolute;
top: -12px;
right: 50%;
transform: translateX(50%);
padding: 4px 16px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
box-shadow: var(--shadow-md);
}
.pricing-name {
font-size: 1.2rem;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.pricing-description {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 20px;
line-height: 1.7;
}
.pricing-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.pricing-price .amount {
font-size: 2.5rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
}
.pricing-price .currency {
font-size: 1rem;
color: var(--text-light);
font-weight: 600;
}
.pricing-price .period {
font-size: 0.85rem;
color: var(--text-muted);
}
.pricing-features {
list-style: none;
margin-bottom: 24px;
flex: 1;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: var(--text-light);
font-size: 0.9rem;
}
.pricing-features li i {
color: var(--success);
font-size: 0.85rem;
flex-shrink: 0;
}
.pricing-features li.disabled {
opacity: 0.4;
text-decoration: line-through;
}
.pricing-features li.disabled i {
color: var(--text-muted);
}
.pricing-btn {
display: block;
text-align: center;
padding: 14px 24px;
border-radius: var(--radius-md);
font-weight: 700;
transition: all var(--transition);
cursor: pointer;
border: 2px solid var(--primary);
color: var(--primary);
background: transparent;
}
.pricing-btn:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
.pricing-card.featured .pricing-btn {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border-color: transparent;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.pricing-card.featured .pricing-btn:hover {
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5);
}
/* ============================================
Pricing - Single Plan
============================================ */
.pricing-grid.single-plan {
max-width: 600px;
margin: 0 auto;
grid-template-columns: 1fr;
}
.pricing-badge {
position: absolute;
top: -14px;
right: 50%;
transform: translateX(50%);
padding: 6px 20px;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: white;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 700;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.pricing-badge i {
font-size: 0.75rem;
}
.pricing-savings {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(16, 185, 129, 0.1);
border-right: 3px solid var(--success);
border-radius: var(--radius-sm);
margin-bottom: 24px;
font-size: 0.9rem;
color: var(--success);
font-weight: 600;
}
.pricing-savings i {
font-size: 0.85rem;
}
.pricing-savings del {
color: var(--text-muted);
font-weight: 400;
margin: 0 4px;
}
.pricing-trust {
display: flex;
justify-content: space-around;
gap: 12px;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid var(--border);
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: var(--text-light);
text-align: center;
}
.trust-item i {
color: var(--primary);
font-size: 1.2rem;
}
/* Payment Methods */
.payment-methods {
max-width: 900px;
margin: 48px auto 0;
text-align: center;
}
.payment-methods h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text);
margin-bottom: 24px;
}
.payment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.payment-item {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
display: flex;
align-items: center;
gap: 14px;
transition: all var(--transition);
text-align: right;
}
.payment-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--primary);
}
.payment-icon {
width: 48px;
height: 48px;
background: var(--primary-bg);
color: var(--primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.payment-info h4 {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.payment-info p {
font-size: 0.8rem;
color: var(--text-light);
}
/* Pricing Note */
.pricing-note {
max-width: 900px;
margin: 40px auto 0;
background: linear-gradient(135deg, var(--primary-bg), var(--bg));
border: 1px solid var(--primary);
border-radius: var(--radius-lg);
padding: 24px 28px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.pricing-note-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.pricing-note-text {
flex: 1;
min-width: 250px;
}
.pricing-note-text h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.pricing-note-text p {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.7;
}
.pricing-note-text a {
color: var(--primary);
font-weight: 700;
}
/* ============================================
Blog
============================================ */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.blog-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition);
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
.blog-image {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
position: relative;
overflow: hidden;
}
.blog-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 60%);
}
.blog-category {
position: absolute;
top: 16px;
right: 16px;
padding: 4px 12px;
background: rgba(255, 255, 255, 0.95);
color: var(--primary);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
z-index: 1;
}
.blog-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-meta {
display: flex;
gap: 16px;
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 12px;
}
.blog-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.blog-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
line-height: 1.5;
}
.blog-card p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 16px;
flex: 1;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary);
font-weight: 700;
font-size: 0.9rem;
transition: gap var(--transition);
}
.blog-read-more:hover {
gap: 12px;
}
/* ============================================
Contact
============================================ */
.contact-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 48px;
align-items: start;
}
.contact-info h3 {
font-size: 1.5rem;
font-weight: 900;
color: var(--text);
margin-bottom: 16px;
}
.contact-info > p {
color: var(--text-light);
line-height: 1.8;
margin-bottom: 32px;
}
.contact-item {
display: flex;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.contact-item:last-child {
border-bottom: none;
}
.contact-item-icon {
width: 48px;
height: 48px;
background: var(--primary-bg);
color: var(--primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-item-content h4 {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.contact-item-content p {
font-size: 0.9rem;
color: var(--text-light);
direction: ltr;
text-align: right;
}
.contact-form {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.form-group label .required {
color: var(--danger);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 12px 16px;
font-size: 0.95rem;
font-family: var(--font-main);
background: var(--bg-light);
border: 2px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
transition: all var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary);
background: var(--bg);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-submit {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 700;
font-family: var(--font-main);
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5);
}
.form-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.form-success {
display: none;
padding: 16px;
background: rgba(16, 185, 129, 0.1);
border-right: 4px solid var(--success);
border-radius: var(--radius-md);
color: var(--success);
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 20px;
}
.form-success.show {
display: block;
}
/* ============================================
Screenshots
============================================ */
.screenshots-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.screenshot-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition);
}
.screenshot-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.screenshot-image {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--bg-light), var(--border-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.screenshot-info {
padding: 20px;
}
.screenshot-info h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.screenshot-info p {
font-size: 0.9rem;
color: var(--text-light);
}
/* ============================================
Installation
============================================ */
.install-steps {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 800px;
margin: 0 auto;
}
.install-step {
display: flex;
gap: 20px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
transition: all var(--transition);
align-items: flex-start;
}
.install-step:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.install-step-number {
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.1rem;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.install-step-content h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.install-step-content p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.7;
}
.install-step-content code {
background: var(--bg-code);
color: var(--primary-light);
padding: 2px 8px;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.85rem;
}
.install-note {
background: rgba(245, 158, 11, 0.1);
border-right: 4px solid var(--accent);
border-radius: var(--radius-md);
padding: 20px 24px;
margin-top: 24px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.install-note h5 {
font-size: 1rem;
font-weight: 700;
color: var(--accent-dark);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.install-note p {
color: var(--text);
font-size: 0.95rem;
line-height: 1.7;
}
/* ============================================
Download
============================================ */
.download-section {
background: linear-gradient(135deg, var(--secondary) 0%, #1e293b 100%);
color: white;
padding: 96px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.download-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.3), transparent 70%);
}
.download-content {
position: relative;
z-index: 1;
}
.download-section h2 {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 16px;
}
.download-section > .container > .download-content > p {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
}
.download-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 32px;
}
.download-btn {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 20px 36px;
background: white;
color: var(--secondary);
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 700;
transition: all var(--transition);
box-shadow: var(--shadow-xl);
}
.download-btn:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
color: var(--secondary);
}
.download-btn .icon {
font-size: 2rem;
color: var(--primary);
}
.download-btn .info {
text-align: right;
}
.download-btn .info strong {
display: block;
font-size: 1.1rem;
margin-bottom: 2px;
}
.download-btn .info small {
display: block;
font-size: 0.8rem;
color: var(--text-light);
font-weight: 400;
}
.download-features {
display: flex;
gap: 32px;
justify-content: center;
flex-wrap: wrap;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.download-feature {
display: flex;
align-items: center;
gap: 8px;
}
.download-feature .check {
color: var(--success);
font-weight: 900;
}
/* ============================================
Requirements
============================================ */
.requirements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.requirement-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
display: flex;
align-items: flex-start;
gap: 16px;
transition: all var(--transition);
}
.requirement-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--primary);
}
.requirement-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.requirement-text h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.requirement-text p {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.6;
}
/* ============================================
FAQ
============================================ */
.faq-search {
max-width: 600px;
margin: 0 auto 40px;
position: relative;
}
.faq-search input {
width: 100%;
padding: 16px 50px 16px 20px;
font-size: 1rem;
font-family: var(--font-main);
background: var(--bg);
border: 2px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
transition: all var(--transition);
}
.faq-search input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.faq-search .search-icon {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1rem;
color: var(--text-muted);
pointer-events: none;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--transition);
}
.faq-item:hover {
border-color: var(--primary);
}
.faq-item.open {
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.faq-question {
padding: 20px 24px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-weight: 700;
font-size: 1rem;
color: var(--text);
transition: background var(--transition);
}
.faq-question:hover {
background: var(--bg-light);
}
.faq-toggle {
width: 28px;
height: 28px;
background: var(--primary-bg);
color: var(--primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--transition);
}
.faq-item.open .faq-toggle {
transform: rotate(45deg);
background: var(--primary);
color: white;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
padding: 0 24px;
color: var(--text-light);
line-height: 1.8;
font-size: 0.95rem;
}
.faq-item.open .faq-answer {
max-height: 500px;
padding: 0 24px 20px;
}
.faq-answer code {
background: var(--bg-code);
color: var(--primary-light);
padding: 2px 8px;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.85rem;
}
.faq-no-results {
text-align: center;
padding: 40px;
color: var(--text-light);
font-size: 1rem;
}
/* ============================================
Changelog
============================================ */
.changelog {
max-width: 800px;
margin: 0 auto;
position: relative;
padding-right: 40px;
}
.changelog::before {
content: '';
position: absolute;
right: 12px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--border);
}
.changelog-item {
position: relative;
padding-bottom: 32px;
}
.changelog-item:last-child {
padding-bottom: 0;
}
.changelog-dot {
position: absolute;
right: 0;
top: 4px;
width: 26px;
height: 26px;
background: var(--bg);
border: 3px solid var(--primary);
border-radius: 50%;
box-shadow: var(--shadow-md);
}
.changelog-item.current .changelog-dot {
background: var(--primary);
}
.changelog-content {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
margin-right: 40px;
transition: all var(--transition);
}
.changelog-content:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.changelog-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.changelog-version {
font-size: 1.2rem;
font-weight: 900;
color: var(--primary);
font-family: var(--font-mono);
}
.changelog-date {
font-size: 0.85rem;
color: var(--text-muted);
font-family: var(--font-mono);
}
.changelog-badge {
display: inline-block;
padding: 2px 10px;
background: var(--success);
color: white;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 700;
margin-right: 8px;
}
.changelog-content h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin: 16px 0 8px;
display: flex;
align-items: center;
gap: 8px;
}
.changelog-content h4:first-of-type {
margin-top: 0;
}
.changelog-content ul {
padding-right: 20px;
color: var(--text-light);
font-size: 0.9rem;
}
.changelog-content ul li {
margin-bottom: 4px;
}
/* ============================================
Roadmap
============================================ */
.roadmap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.roadmap-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
transition: all var(--transition);
position: relative;
}
.roadmap-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.roadmap-card.planned {
border-top: 4px solid var(--text-muted);
}
.roadmap-card.in-progress {
border-top: 4px solid var(--accent);
}
.roadmap-card.done {
border-top: 4px solid var(--success);
}
.roadmap-status {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 12px;
}
.roadmap-card.planned .roadmap-status {
background: rgba(148, 163, 184, 0.15);
color: var(--text-muted);
}
.roadmap-card.in-progress .roadmap-status {
background: rgba(245, 158, 11, 0.15);
color: var(--accent-dark);
}
.roadmap-card.done .roadmap-status {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.roadmap-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
font-family: var(--font-mono);
}
.roadmap-card ul {
padding-right: 20px;
color: var(--text-light);
font-size: 0.9rem;
}
.roadmap-card ul li {
margin-bottom: 6px;
}
/* ============================================
Footer
============================================ */
.footer {
background: var(--secondary);
color: white;
padding: 64px 0 32px;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-brand h3 {
font-size: 1.5rem;
font-weight: 900;
margin-bottom: 16px;
color: var(--accent);
}
.footer-brand p {
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
margin-bottom: 24px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: white;
transition: all var(--transition);
}
.footer-social a:hover {
background: var(--primary);
transform: translateY(-4px);
color: white;
}
.footer-column h4 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 20px;
color: white;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 12px;
}
.footer-column ul li a {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
transition: all var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.footer-column ul li a:hover {
color: var(--accent);
padding-right: 6px;
}
.footer-column ul li a i {
font-size: 0.75rem;
opacity: 0.5;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 32px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
}
/* ============================================
Scroll to Top
============================================ */
.scroll-top {
position: fixed;
bottom: 32px;
left: 32px;
width: 48px;
height: 48px;
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--transition);
z-index: 999;
}
.scroll-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover {
background: var(--primary-dark);
transform: translateY(-4px);
}
/* ============================================
Animations
============================================ */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================
Responsive
============================================ */
@media (max-width: 992px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text h1 {
font-size: 2.5rem;
}
.hero-text p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.hero-quick-stats {
justify-content: center;
}
.hero-visual {
order: -1;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.steps {
grid-template-columns: 1fr;
}
.arch-diagram {
grid-template-columns: 1fr;
}
.arch-arrow {
transform: rotate(90deg);
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
.contact-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
flex-direction: column;
padding: 20px;
gap: 16px;
box-shadow: var(--shadow-lg);
max-height: 80vh;
overflow-y: auto;
}
.nav-links.mobile-open {
display: flex;
}
.mobile-menu-btn {
display: flex;
}
.hero-text h1 {
font-size: 2rem;
}
.hero-text p {
font-size: 1rem;
}
.hero-quick-stats {
flex-direction: column;
gap: 16px;
}
.section-header h2 {
font-size: 1.8rem;
}
.screenshots-grid {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.footer-social {
justify-content: center;
}
.footer-column ul li a {
justify-content: center;
}
.changelog {
padding-right: 24px;
}
.changelog-content {
margin-right: 32px;
}
.floating-card {
display: none;
}
.pricing-card.featured {
transform: scale(1);
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
.hero-text h1 {
font-size: 1.6rem;
}
.section-header h2 {
font-size: 1.5rem;
}
.download-section h2 {
font-size: 1.6rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.btn {
width: 100%;
justify-content: center;
}
.hero-buttons {
flex-direction: column;
}
.download-btn {
width: 100%;
justify-content: center;
}
.install-step {
flex-direction: column;
}
}
/* Print Styles */
@media print {
.navbar, .scroll-top, .hero-buttons, .download-section {
display: none;
}
}
/* ============================================
About Developer
============================================ */
.developer-content {
max-width: 900px;
margin: 0 auto;
}
.developer-card {
background: var(--bg);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
padding: 40px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 40px;
align-items: start;
transition: all var(--transition);
position: relative;
}
.developer-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.developer-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-xl);
}
.developer-image-wrapper {
position: relative;
}
.developer-image {
width: 200px;
height: 200px;
border-radius: var(--radius-lg);
object-fit: cover;
border: 4px solid var(--primary);
box-shadow: var(--shadow-lg);
transition: transform var(--transition);
}
.developer-card:hover .developer-image {
transform: scale(1.05) rotate(-2deg);
}
.developer-badge {
position: absolute;
bottom: -12px;
right: 50%;
transform: translateX(50%);
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: white;
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 700;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.developer-info {
padding-top: 8px;
}
.developer-name {
font-size: 2rem;
font-weight: 900;
color: var(--text);
margin-bottom: 4px;
line-height: 1.2;
}
.developer-alternate-names {
font-size: 0.95rem;
color: var(--text-muted);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.developer-alternate-names .separator {
color: var(--text-muted);
opacity: 0.5;
}
.developer-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.developer-bio {
font-size: 1rem;
color: var(--text-light);
line-height: 1.8;
margin-bottom: 24px;
}
.developer-skills {
margin-bottom: 24px;
}
.developer-skills h4 {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.developer-skills h4 i {
color: var(--primary);
}
.skills-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.skill-tag {
display: inline-block;
padding: 4px 12px;
background: var(--primary-bg);
color: var(--primary);
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 600;
transition: all var(--transition);
}
.skill-tag:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
.developer-contact {
display: flex;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.developer-link {
width: 44px;
height: 44px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--text);
transition: all var(--transition);
}
.developer-link:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-4px);
}
.developer-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 32px;
}
.dev-stat {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
text-align: center;
transition: all var(--transition);
}
.dev-stat:hover {
border-color: var(--primary);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.dev-stat h4 {
font-size: 1.8rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
margin-bottom: 6px;
font-family: var(--font-mono);
}
.dev-stat p {
font-size: 0.85rem;
color: var(--text-light);
}
@media (max-width: 768px) {
.developer-card {
grid-template-columns: 1fr;
padding: 30px 24px;
text-align: center;
}
.developer-image {
width: 150px;
height: 150px;
margin: 0 auto;
}
.developer-name {
font-size: 1.6rem;
}
.developer-alternate-names {
justify-content: center;
}
.developer-title {
justify-content: center;
}
.developer-skills h4 {
justify-content: center;
}
.skills-list {
justify-content: center;
}
.developer-contact {
justify-content: center;
}
.developer-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.developer-stats {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- ============================================
Navbar
============================================ -->
<nav class="navbar" id="navbar">
<div class="container">
<div class="navbar-content">
<a href="#" class="logo">
<img src="https://avatars.githubusercontent.com/u/337130551?s=200&v=4" alt="Talvo Logo" class="logo-img">
<span>Talvo</span>
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#how-it-works"><i class="fa-solid fa-circle-question"></i> كيف يعمل</a></li>
<li><a href="#features"><i class="fa-solid fa-star"></i> المميزات</a></li>
<li><a href="#pricing"><i class="fa-solid fa-tag"></i> الأسعار</a></li>
<li><a href="#testimonials"><i class="fa-solid fa-quote-right"></i> آراء العملاء</a></li>
<li><a href="#blog"><i class="fa-solid fa-newspaper"></i> المدونة</a></li>
<li><a href="#developer"><i class="fa-solid fa-user-tie"></i> المطور</a></li>
<li><a href="#download"><i class="fa-solid fa-download"></i> التحميل</a></li>
<li><a href="#faq"><i class="fa-solid fa-circle-info"></i> الأسئلة</a></li>
<li><a href="#contact"><i class="fa-solid fa-envelope"></i> اتصل بنا</a></li>
</ul>
<div class="nav-actions">
<button class="theme-toggle" id="themeToggle" title="تبديل الوضع الليلي">
<i class="fa-solid fa-moon"></i>
</button>
<button class="mobile-menu-btn" id="mobileMenuBtn" title="القائمة">
<i class="fa-solid fa-bars"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- ============================================
Hero
============================================ -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<div class="hero-badge">
<span class="dot"></span>
<span>الإصدار 1.0.2 متوفر الآن</span>
</div>
<h1>
نظام إدارة <span class="gradient">المستلزمات الطبية</span> والمستحضرات
</h1>
<p>
Talvo Desktop هو نظام متكامل لإدارة المستلزمات الطبية والمستحضرات،
يوفر لك كل ما تحتاجه لإدارة مبيعاتك، مشترياتك، مخزونك، وعملائك
من مكان واحد. مصمم خصيصاً للصيدليات ومحلات المستلزمات الطبية.
</p>
<div class="hero-buttons">
<a href="#download" class="btn btn-primary">
<i class="fa-solid fa-download"></i>
<span>حمّل الآن مجاناً</span>
</a>
<a href="https://github.com/talvoapp/talvo-desktop" class="btn btn-secondary" target="_blank" rel="noopener">
<i class="fa-brands fa-github"></i>
<span>مشاهدة على GitHub</span>
</a>
</div>
<div class="hero-quick-stats">
<div class="quick-stat">
<h4>197 MB</h4>
<p>حجم التطبيق</p>
</div>
<div class="quick-stat">
<h4>Windows</h4>
<p>7 SP1 أو أحدث</p>
</div>
<div class="quick-stat">
<h4>100%</h4>
<p>مجاني ومفتوح</p>
</div>
</div>
</div>
<div class="hero-visual">
<div class="floating-card top-right">
<div class="icon green"><i class="fa-solid fa-check"></i></div>
<div>
<div>مبيعات اليوم</div>
<div style="color: var(--success); font-weight: 900;">12,450 ج.م</div>
</div>
</div>
<div class="floating-card bottom-left">
<div class="icon blue"><i class="fa-solid fa-box"></i></div>
<div>
<div>منتجات متاحة</div>
<div style="color: var(--primary); font-weight: 900;">2,847</div>
</div>
</div>
<div class="app-mockup">
<div class="mockup-header">
<div class="mockup-dot red"></div>
<div class="mockup-dot yellow"></div>
<div class="mockup-dot green"></div>
<div class="mockup-url">talvo-desktop</div>
</div>
<div class="mockup-body">
<div class="mockup-top">
<div class="mockup-title">لوحة التحكم</div>
<div class="mockup-user">
<div class="mockup-avatar">م</div>
<span>مدير النظام</span>
</div>
</div>
<div class="mockup-stats">
<div class="mockup-stat">
<div class="value">12.4K</div>
<div class="label">مبيعات اليوم</div>
</div>
<div class="mockup-stat">
<div class="value">+23%</div>
<div class="label">نمو</div>
</div>
<div class="mockup-stat">
<div class="value">2,847</div>
<div class="label">منتج</div>
</div>
</div>
<div class="mockup-chart">
<div class="mockup-bar"></div>
<div class="mockup-bar"></div>
<div class="mockup-bar"></div>
<div class="mockup-bar"></div>
<div class="mockup-bar"></div>
<div class="mockup-bar"></div>
</div>
<div class="mockup-list">
<div class="mockup-list-item">
<div class="icon green"><i class="fa-solid fa-arrow-up"></i></div>
<div class="text">فاتورة مبيعات #1245</div>
<div class="amount">450 ج.م</div>
</div>
<div class="mockup-list-item">
<div class="icon blue"><i class="fa-solid fa-arrow-up"></i></div>
<div class="text">فاتورة مبيعات #1246</div>
<div class="amount">1,200 ج.م</div>
</div>
<div class="mockup-list-item">
<div class="icon orange"><i class="fa-solid fa-arrow-down"></i></div>
<div class="text">فاتورة شراء #3245</div>
<div class="amount">3,400 ج.م</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
Stats Bar
============================================ -->
<section class="stats-bar">
<div class="container">
<div class="stats-grid">
<div class="stat-item">
<h3>+1000</h3>
<p>مستخدم نشط</p>
</div>
<div class="stat-item">
<h3>+50</h3>
<p>شركة تثق بنا</p>
</div>
<div class="stat-item">
<h3>99.9%</h3>
<p>وقت التشغيل</p>
</div>
<div class="stat-item">
<h3>24/7</h3>
<p>دعم فني</p>
</div>
</div>
</div>
</section>
<!-- ============================================
How It Works
============================================ -->
<section class="section" id="how-it-works">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">كيف يعمل</span>
<h2>ابدأ في 3 خطوات بسيطة</h2>
<p>لا تحتاج لخبرة تقنية. قم بتثبيت التطبيق، سجّل الدخول، وابدأ العمل مباشرة.</p>
</div>
<div class="steps">
<div class="step-card fade-in">
<div class="step-number">1</div>
<div class="step-icon"><i class="fa-solid fa-download"></i></div>
<h3>حمّل وثبّت</h3>
<p>حمّل ملف التثبيت (197 MB)، شغّله، واتبع الخطوات. التثبيت لا يستغرق أكثر من 5 دقائق.</p>
</div>
<div class="step-card fade-in">
<div class="step-number">2</div>
<div class="step-icon"><i class="fa-solid fa-lock"></i></div>
<h3>سجّل الدخول</h3>
<p>شغّل التطبيق، أدخل مفتاح التفعيل (للسيرفر الرئيسي) أو كود الفرع (للفروع)، ثم اسم المستخدم وكلمة المرور.</p>
</div>
<div class="step-card fade-in">
<div class="step-number">3</div>
<div class="step-icon"><i class="fa-solid fa-rocket"></i></div>
<h3>ابدأ العمل</h3>
<p>الآن يمكنك إدارة المبيعات، المشتريات، المخزون، والعملاء. كل شيء جاهز من اليوم الأول.</p>
</div>
</div>
</div>
</section>
<!-- ============================================
Architecture
============================================ -->
<section class="section section-alt">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">الهيكل</span>
<h2>نظام متكامل للسيرفر والفروع</h2>
<p>يعمل Talvo بنظام Master-Branch، حيث يتم تخزين جميع البيانات على السيرفر الرئيسي، والفروع تتصل به عن بعد.</p>
</div>
<div class="architecture fade-in">
<div class="arch-diagram">
<div class="arch-node">
<div class="arch-node-icon"><i class="fa-solid fa-laptop"></i></div>
<h4>جهاز الفرع</h4>
<p>يتصل بالسيرفر الرئيسي عبر الإنترنت</p>
</div>
<div class="arch-arrow"><i class="fa-solid fa-arrow-left"></i></div>
<div class="arch-node master">
<div class="arch-node-icon"><i class="fa-solid fa-server"></i></div>
<h4>السيرفر الرئيسي</h4>
<p>يخزن جميع البيانات ويعمل 24/7</p>
</div>
</div>
<div style="text-align: center; font-size: 1.5rem; color: var(--primary); font-weight: 900; margin: 16px 0;">
<i class="fa-solid fa-arrows-up-down"></i>
</div>
<div class="arch-diagram">
<div class="arch-node cloud" style="grid-column: 2 / 3;">
<div class="arch-node-icon"><i class="fa-solid fa-cloud"></i></div>
<h4>السحابة (Cloudflare)</h4>
<p>تربط الفروع بالسيرفر الرئيسي من أي مكان</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
Features
============================================ -->
<section class="section" id="features">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">المميزات</span>
<h2>كل ما تحتاجه لإدارة أعمالك</h2>
<p>مجموعة شاملة من المميزات المصممة خصيصاً للصيدليات ومحلات المستلزمات الطبية.</p>
</div>
<div class="features-grid">
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-cash-register"></i></div>
<h3>إدارة المبيعات</h3>
<p>نظام كامل لإدارة فواتير البيع مع كل ما تحتاجه:</p>
<ul>
<li>فواتير بيع سريعة وسهلة</li>
<li>مرتجعات المبيعات</li>
<li>خصومات تلقائية حسب العميل</li>
<li>طباعة احترافية للفواتير</li>
<li>معاينة الفاتورة قبل الطباعة</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-cart-shopping"></i></div>
<h3>إدارة المشتريات</h3>
<p>تحكم كامل في فواتير الشراء والموردين:</p>
<ul>
<li>فواتير شراء من الموردين</li>
<li>مرتجعات المشتريات</li>
<li>طلبات الشراء المسبقة</li>
<li>مقارنة أسعار الموردين</li>
<li>سجل مشتريات المورد</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-boxes-stacked"></i></div>
<h3>إدارة المخزون</h3>
<p>تتبع دقيق لكل منتج في المخزون:</p>
<ul>
<li>تتبع الكميات لحظياً</li>
<li>إدارة التشغيلات (Batches)</li>
<li>تواريخ الصلاحية</li>
<li>تنبيهات النواقص</li>
<li>كشكول النواقص التلقائي</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-users"></i></div>
<h3>إدارة العملاء</h3>
<p>قاعدة بيانات شاملة لعملائك:</p>
<ul>
<li>بيانات كاملة للعملاء</li>
<li>كشوف الحساب</li>
<li>نظام المكافآت والنقاط</li>
<li>فئات الخصومات</li>
<li>تقارير أرباح العملاء</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-building"></i></div>
<h3>إدارة الفروع</h3>
<p>ربط الفروع المتعددة بالسيرفر الرئيسي:</p>
<ul>
<li>ربط الفروع تلقائياً</li>
<li>مزامنة فورية للبيانات</li>
<li>الوصول من أي مكان</li>
<li>نظام Cloudflare Tunnel</li>
<li>حالة الفروع لحظياً</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-chart-line"></i></div>
<h3>التقارير المتقدمة</h3>
<p>تقارير مفصلة لاتخاذ قرارات أفضل:</p>
<ul>
<li>تقارير المبيعات اليومية</li>
<li>تقارير الأرباح</li>
<li>تقارير المخزون</li>
<li>تقارير العملاء</li>
<li>تصدير Excel و PDF</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-shield-halved"></i></div>
<h3>نظام الصلاحيات</h3>
<p>تحكم كامل في من يمكنه الوصول لماذا:</p>
<ul>
<li>222 صلاحية مفصلة</li>
<li>8 أدوار افتراضية</li>
<li>أدوار مخصصة</li>
<li>سجل النشاطات</li>
<li>حماية كلمة المرور</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-cloud-arrow-up"></i></div>
<h3>المزامنة السحابية</h3>
<p>بياناتك آمنة ومتزامنة دائماً:</p>
<ul>
<li>مزامنة تلقائية</li>
<li>نسخ احتياطي كل 60 دقيقة</li>
<li>استعادة سريعة</li>
<li>التحقق من السلامة</li>
<li>الاحتفاظ بآخر نسختين</li>
</ul>
</div>
<div class="feature-card fade-in">
<div class="feature-icon"><i class="fa-solid fa-globe"></i></div>
<h3>الوصول عن بُعد</h3>
<p>الفروع تتصل بالسيرفر من أي مكان:</p>
<ul>
<li>عبر Cloudflare Tunnel</li>
<li>سرعة عالية</li>
<li>تشفير كامل</li>
<li>مفيش حاجة لـ VPN</li>
<li>إعداد تلقائي</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ============================================
Testimonials
============================================ -->
<section class="section section-alt" id="testimonials">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">آراء العملاء</span>
<h2>ماذا يقول عملاؤنا؟</h2>
<p>آراء حقيقية من عملاء يستخدمون Talvo Desktop في إدارة أعمالهم اليومية.</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card fade-in">
<div class="testimonial-quote">"</div>
<div class="testimonial-rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="testimonial-text">
"من أفضل الأنظمة التي استخدمتها لإدارة الصيدلية. سهل الاستخدام، سريع، وكل المميزات اللي أحتاجها موجودة. دعم الفروع عن بُعد وفر علي الكثير."
</p>
<div class="testimonial-author">
<div class="testimonial-avatar">أ</div>
<div class="testimonial-info">
<h4>أحمد محمود</h4>
<p>صيدلي - القاهرة</p>
</div>
</div>
</div>
<div class="testimonial-card fade-in">
<div class="testimonial-quote">"</div>
<div class="testimonial-rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="testimonial-text">
"كنت أدير 3 فروع يدوياً، وبعد Talvo كل شيء أصبح تلقائي. التقارير دقيقة، والمخزون دائماً محدث. أنصح به بشدة لكل من يدير أكثر من فرع."
</p>
<div class="testimonial-author">
<div class="testimonial-avatar">م</div>
<div class="testimonial-info">
<h4>محمد السيد</h4>
<p>مدير فروع - الجيزة</p>
</div>
</div>
</div>
<div class="testimonial-card fade-in">
<div class="testimonial-quote">"</div>
<div class="testimonial-rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p class="testimonial-text">
"البرنامج مجاني وبه كل المميزات اللي كنت بدفع آلاف عشانها. الفواتير بتطلع احترافية، والعملاء مبسوطين من سرعة الخدمة."
</p>
<div class="testimonial-author">
<div class="testimonial-avatar">ف</div>
<div class="testimonial-info">
<h4>فاطمة علي</h4>
<p>صاحب محل مستلزمات - الإسكندرية</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
Pricing
============================================ -->
<section class="section" id="pricing">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">السعر</span>
<h2>دفعة واحدة. مدى الحياة</h2>
<p>اشتري البرنامج مرة واحدة، واستخدمه للأبد. بدون اشتراكات شهرية. بدون رسوم خفية.</p>
</div>
<div class="pricing-grid single-plan">
<div class="pricing-card featured fade-in">
<!-- Badge -->
<div class="pricing-badge">
<i class="fa-solid fa-crown"></i>
عرض محدود
</div>
<!-- Name -->
<div class="pricing-name">Talvo Desktop</div>
<p class="pricing-description">
نظام إدارة المستلزمات الطبية والمستحضرات - الحل الكامل لصيدليتك
</p>
<!-- Price -->
<div class="pricing-price">
<span class="currency">ج.م</span>
<span class="amount">25,000</span>
<span class="period">/ دفعة واحدة</span>
</div>
<div class="pricing-savings">
<i class="fa-solid fa-tag"></i>
<span>بدلاً من <del>35,000 ج.م</del> - وفر 10,000 ج.م</span>
</div>
<!-- Features -->
<ul class="pricing-features">
<li><i class="fa-solid fa-check"></i> <strong>ترخيص مدى الحياة</strong> - اشتري مرة، استخدم للأبد</li>
<li><i class="fa-solid fa-check"></i> أجهزة غير محدودة</li>
<li><i class="fa-solid fa-check"></i> فروع غير محدودة</li>
<li><i class="fa-solid fa-check"></i> عدد فواتير غير محدود</li>
<li><i class="fa-solid fa-check"></i> عدد منتجات غير محدود</li>
<li><i class="fa-solid fa-check"></i> عدد عملاء غير محدود</li>
<li><i class="fa-solid fa-check"></i> كل التقارير المتقدمة</li>
<li><i class="fa-solid fa-check"></i> إدارة الفروع عن بُعد</li>
<li><i class="fa-solid fa-check"></i> مزامنة سحابية تلقائية</li>
<li><i class="fa-solid fa-check"></i> نسخ احتياطي كل 60 دقيقة</li>
<li><i class="fa-solid fa-check"></i> نظام صلاحيات كامل (222 صلاحية)</li>
<li><i class="fa-solid fa-check"></i> <strong>تحديثات مجانية لمدة سنتين</strong></li>
<li><i class="fa-solid fa-check"></i> <strong>دعم فني لمدة 6 شهور</strong></li>
<li><i class="fa-solid fa-check"></i> تثبيت وإعداد مجاني</li>
<li><i class="fa-solid fa-check"></i> تدريب أونلاين للفريق</li>
<li><i class="fa-solid fa-check"></i> ضمان استرداد الأموال 14 يوم</li>
</ul>
<!-- CTA Button -->
<a href="#contact" class="pricing-btn">
<i class="fa-solid fa-shopping-cart"></i>
اطلب الآن
</a>
<!-- Trust Badges -->
<div class="pricing-trust">
<div class="trust-item">
<i class="fa-solid fa-shield-halved"></i>
<span>ضمان 14 يوم</span>
</div>
<div class="trust-item">
<i class="fa-solid fa-lock"></i>
<span>دفع آمن</span>
</div>
<div class="trust-item">
<i class="fa-solid fa-headset"></i>
<span>دعم فني</span>
</div>
</div>
</div>
</div>
<!-- Payment Methods -->
<div class="payment-methods fade-in">
<h3>طرق الدفع المتاحة</h3>
<div class="payment-grid">
<div class="payment-item">
<div class="payment-icon">
<i class="fa-solid fa-mobile-screen"></i>
</div>
<div class="payment-info">
<h4>فودافون كاش</h4>
<p>تحويل فوري</p>
</div>
</div>
<div class="payment-item">
<div class="payment-icon">
<i class="fa-solid fa-building-columns"></i>
</div>
<div class="payment-info">
<h4>إنستاباي</h4>
<p>تحويل بنكي فوري</p>
</div>
</div>
<div class="payment-item">
<div class="payment-icon">
<i class="fa-solid fa-money-bill-transfer"></i>
</div>
<div class="payment-info">
<h4>تحويل بنكي</h4>
<p>من أي بنك</p>
</div>
</div>
<div class="payment-item">
<div class="payment-icon">
<i class="fa-solid fa-hand-holding-dollar"></i>
</div>
<div class="payment-info">
<h4>الدفع عند التسليم</h4>
<p>للشركات فقط</p>
</div>
</div>
</div>
</div>
<!-- FAQ Note -->
<div class="pricing-note fade-in">
<div class="pricing-note-icon">
<i class="fa-solid fa-circle-info"></i>
</div>
<div class="pricing-note-text">
<h4>عندك سؤال؟</h4>
<p>اتصل بنا على <a href="mailto:support@talvo.com">support@talvo.com</a> أو راسلنا عبر <a href="#contact">نموذج الاتصال</a>، وفريقنا هيرد عليك في أقرب وقت.</p>
</div>
</div>
</div>
</section>
<!-- ============================================
Blog
============================================ -->
<section class="section section-alt" id="blog">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">المدونة</span>
<h2>آخر المقالات والأخبار</h2>
<p>نصائح، أخبار، ودروس مفيدة لإدارة أعمالك بشكل أفضل.</p>
</div>
<div class="blog-grid">
<article class="blog-card fade-in">
<div class="blog-image">
<i class="fa-solid fa-newspaper"></i>
<span class="blog-category">أخبار</span>
</div>
<div class="blog-content">
<div class="blog-meta">
<span><i class="fa-solid fa-calendar"></i> 15 أكتوبر 2026</span>
<span><i class="fa-solid fa-clock"></i> 5 دقائق</span>
</div>
<h3>إطلاق Talvo Desktop 1.0.2 مع دعم الفروع عن بُعد</h3>
<p>يسعدنا الإعلان عن إطلاق الإصدار الجديد من Talvo Desktop، والذي يتضمن دعم الفروع عن بُعد عبر Cloudflare Tunnel، وخدمات تلقائية جديدة.</p>
<a href="#" class="blog-read-more">
<span>اقرأ المزيد</span>
<i class="fa-solid fa-arrow-left"></i>
</a>
</div>
</article>
<article class="blog-card fade-in">
<div class="blog-image">
<i class="fa-solid fa-lightbulb"></i>
<span class="blog-category">نصائح</span>
</div>
<div class="blog-content">
<div class="blog-meta">
<span><i class="fa-solid fa-calendar"></i> 10 أكتوبر 2026</span>
<span><i class="fa-solid fa-clock"></i> 7 دقائق</span>
</div>
<h3>5 نصائح لإدارة مخزون صيدليتك بكفاءة</h3>
<p>إدارة المخزون هي أهم جزء في إدارة الصيدلية. في هذا المقال، نشارك 5 نصائح مجربة لتحسين إدارة المخزون وتجنب النواقص.</p>
<a href="#" class="blog-read-more">
<span>اقرأ المزيد</span>
<i class="fa-solid fa-arrow-left"></i>
</a>
</div>
</article>
<article class="blog-card fade-in">
<div class="blog-image">
<i class="fa-solid fa-chart-pie"></i>
<span class="blog-category">تقارير</span>
</div>
<div class="blog-content">
<div class="blog-meta">
<span><i class="fa-solid fa-calendar"></i> 5 أكتوبر 2026</span>
<span><i class="fa-solid fa-clock"></i> 10 دقائق</span>
</div>
<h3>كيف تقرأ تقارير الأرباح وتتخذ قرارات أفضل</h3>
<p>التقارير ليست مجرد أرقام، بل أدوات لاتخاذ قرارات. تعلم كيف تقرأ تقارير Talvo وتحولها إلى قرارات مربحة.</p>
<a href="#" class="blog-read-more">
<span>اقرأ المزيد</span>
<i class="fa-solid fa-arrow-left"></i>
</a>
</div>
</article>
</div>
</div>
</section>
<!-- ============================================
Download
============================================ -->
<section class="download-section" id="download">
<div class="container">
<div class="download-content">
<h2 class="fade-in">حمّل Talvo Desktop الآن</h2>
<p class="fade-in">ابدأ إدارة أعمالك باحترافية من اليوم. التطبيق مجاني بالكامل.</p>
<div class="download-buttons">
<a href="https://github.com/talvoapp/talvo-desktop/releases/latest" class="download-btn fade-in" target="_blank" rel="noopener">
<span class="icon"><i class="fa-brands fa-windows"></i></span>
<span class="info">
<strong>Windows</strong>
<small>Talvo_Setup_1.0.2.exe (197 MB)</small>
</span>
</a>
</div>
<div class="download-features fade-in">
<div class="download-feature">
<span class="check"><i class="fa-solid fa-check"></i></span>
<span>متوافق مع Windows 7 SP1+</span>
</div>
<div class="download-feature">
<span class="check"><i class="fa-solid fa-check"></i></span>
<span>لا يحتاج متطلبات إضافية</span>
</div>
<div class="download-feature">
<span class="check"><i class="fa-solid fa-check"></i></span>
<span>تثبيت سهل</span>
</div>
<div class="download-feature">
<span class="check"><i class="fa-solid fa-check"></i></span>
<span>مجاني بالكامل</span>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
Requirements
============================================ -->
<section class="section" id="requirements">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">المتطلبات</span>
<h2>متطلبات التشغيل</h2>
<p>تأكد من توفر المتطلبات التالية قبل تثبيت التطبيق.</p>
</div>
<div class="requirements-grid">
<div class="requirement-card fade-in">
<div class="requirement-icon"><i class="fa-brands fa-windows"></i></div>
<div class="requirement-text">
<h4>نظام التشغيل</h4>
<p>Windows 7 SP1 أو أحدث (64-bit). يعمل على Windows 10 و 11 بشكل ممتاز.</p>
</div>
</div>
<div class="requirement-card fade-in">
<div class="requirement-icon"><i class="fa-solid fa-microchip"></i></div>
<div class="requirement-text">
<h4>الذاكرة (RAM)</h4>
<p>4 GB كحد أدنى، ويفضل 8 GB للحصول على أفضل أداء.</p>
</div>
</div>
<div class="requirement-card fade-in">
<div class="requirement-icon"><i class="fa-solid fa-hard-drive"></i></div>
<div class="requirement-text">
<h4>المساحة الحرة</h4>
<p>500 MB مساحة فارغة على القرص الصلب (C:).</p>
</div>
</div>
<div class="requirement-card fade-in">
<div class="requirement-icon"><i class="fa-solid fa-wifi"></i></div>
<div class="requirement-text">
<h4>الاتصال بالإنترنت</h4>
<p>مطلوب للمزامنة السحابية وللاتصال بين الفروع والسيرفر الرئيسي.</p>
</div>
</div>
<div class="requirement-card fade-in">
<div class="requirement-icon"><i class="fa-solid fa-print"></i></div>
<div class="requirement-text">
<h4>الطابعة</h4>
<p>أي طابعة متصلة بالجهاز (اختياري). يدعم جميع الطابعات.</p>
</div>
</div>
<div class="requirement-card fade-in">
<div class="requirement-icon"><i class="fa-solid fa-display"></i></div>
<div class="requirement-text">
<h4>الشاشة</h4>
<p>دقة 1280×720 كحد أدنى. يفضل 1920×1080 أو أعلى.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
FAQ
============================================ -->
<section class="section section-alt" id="faq">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">الأسئلة الشائعة</span>
<h2>إجابات لأكثر الأسئلة تكراراً</h2>
<p>ابحث عن سؤالك أو تصفح الأسئلة الشائعة أدناه.</p>
</div>
<div class="faq-search fade-in">
<input type="text" id="faqSearch" placeholder="ابحث: سعر، دفع، فروع، نسخ احتياطي، تدريب..." autocomplete="off">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
</div>
<div class="faq-search-hint fade-in">
💡 جرّب: <strong>سعر</strong>، <strong>دفع</strong>، <strong>فروع</strong>، <strong>نسخ احتياطي</strong>، <strong>تدريب</strong> — أو اضغط <kbd>Enter</kbd> لفتح أول نتيجة
</div>
<div class="faq-list" id="faqList">
<!-- ============================================
Category: أسئلة عامة
============================================ -->
<div class="faq-category">
<h3><i class="fa-solid fa-circle-info"></i> أسئلة عامة</h3>
</div>
<div class="faq-item" data-keywords="سعر تكلفة دفع فلوس 25000 اشتراك مجاني مدفوع شراء">
<div class="faq-question">
<span>هل التطبيق مجاني؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>التطبيق <strong>مدفوع لمرة واحدة بسعر 25,000 ج.م</strong>، وتستخدمه مدى الحياة. لا يوجد اشتراكات شهرية أو سنوية. للتفاصيل الكاملة، شوف قسم <a href="#pricing">الأسعار</a>.</p>
</div>
</div>
<div class="faq-item" data-keywords="خبرة تقنية صعوبة تعلم تدريب سهل شرح استخدام">
<div class="faq-question">
<span>هل يحتاج التطبيق خبرة تقنية؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>لا على الإطلاق. التطبيق مصمم ليكون سهل الاستخدام لجميع المستويات. مجرد تثبيت وتسجيل دخول، وتبدأ العمل مباشرة.</p>
</div>
</div>
<div class="faq-item" data-keywords="سيرفر فرع master branch رئيسي تابع شبكة خادم">
<div class="faq-question">
<span>ما الفرق بين السيرفر الرئيسي (Master) والفرع (Branch)؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>السيرفر الرئيسي هو الجهاز الأساسي الذي يخزن جميع البيانات، ويعمل 24/7. الفروع هي أجهزة تتصل بالسيرفر الرئيسي عن بُعد لتنفيذ العمليات. النظام يدعم سيرفر رئيسي واحد فقط، وعدد غير محدود من الفروع.</p>
</div>
</div>
<div class="faq-item" data-keywords="أجهزة متعدد كمبيوتر لابتوب تابلت أجهزه اكثر من">
<div class="faq-question">
<span>هل يمكنني استخدام التطبيق على أكثر من جهاز؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم. النظام مصمم لدعم عدة أجهزة. جهاز واحد يكون السيرفر الرئيسي، والباقي فروع تتصل به. جميع الفروع تتزامن مع السيرفر الرئيسي بشكل تلقائي.</p>
</div>
</div>
<div class="faq-item" data-keywords="شبكة انترنت اتصال فرع remote شبكه محليه lan">
<div class="faq-question">
<span>هل الفروع تحتاج أن تكون في نفس الشبكة؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>لا. الفروع يمكنها الاتصال بالسيرفر الرئيسي من أي مكان في العالم عبر Cloudflare Tunnel. لا تحتاج أن تكون في نفس الشبكة المحلية.</p>
</div>
</div>
<div class="faq-item" data-keywords="أمان حماية بيانات سرية خصوصية security safe مأمون">
<div class="faq-question">
<span>هل بياناتي آمنة؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم. جميع البيانات مخزنة محلياً على السيرفر الرئيسي الخاص بك، ولا تُرسل لأي طرف ثالث. النسخ الاحتياطي التلقائي يحمي بياناتك من الفقدان.</p>
</div>
</div>
<div class="faq-item" data-keywords="نسخ احتياطي backup استرداد نسخة حفظ باك اب تلقائي">
<div class="faq-question">
<span>كيف يتم النسخ الاحتياطي؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>يتم إنشاء نسخة احتياطية تلقائياً كل 60 دقيقة. يتم الاحتفاظ بآخر نسختين. يمكنك أيضاً إنشاء نسخة يدوياً في أي وقت من إعدادات التطبيق.</p>
</div>
</div>
<div class="faq-item" data-keywords="انترنت اتصال فصل offline بدون نت شبكة قطع">
<div class="faq-question">
<span>ما الذي يحدث لو انقطع الاتصال بالإنترنت؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>إذا انقطع الاتصال على جهاز الفرع، يمكنه الاستمرار في العمل بشكل محلي. عند عودة الاتصال، تتم المزامنة تلقائياً. السيرفر الرئيسي يحتاج اتصال إنترنت للتواصل مع الفروع.</p>
</div>
</div>
<div class="faq-item" data-keywords="تصدير Excel PDF طباعة تقارير اكسل ملفات">
<div class="faq-question">
<span>هل يمكنني تصدير البيانات إلى Excel؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم. جميع التقارير والجداول يمكن تصديرها بصيغة Excel و PDF. يمكنك أيضاً طباعة أي تقرير مباشرة من التطبيق.</p>
</div>
</div>
<div class="faq-item" data-keywords="تحديث تحديثات نسخة جديدة upgrade نسخه احدث">
<div class="faq-question">
<span>كيف يمكنني تحديث التطبيق؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>حمّل النسخة الجديدة من نفس الصفحة وثبّتها فوق النسخة القديمة. سيحتفظ التطبيق بجميع بياناتك وإعداداتك.</p>
</div>
</div>
<div class="faq-item" data-keywords="عربي لغة تعريب عربية واجهة دعم العربية">
<div class="faq-question">
<span>هل يدعم التطبيق اللغة العربية؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم. التطبيق مصمم بشكل أساسي باللغة العربية، مع دعم كامل للاتجاه من اليمين لليسار. جميع الواجهات والتقارير والفواتير بالعربية.</p>
</div>
</div>
<div class="faq-item" data-keywords="مشكلة خطأ bug عطل إبلاغ شكوى error مشكله بلاغ">
<div class="faq-question">
<span>كيف يمكنني الإبلاغ عن مشكلة؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>يمكنك فتح Issue على صفحة GitHub الخاصة بالمشروع، أو مراسلتنا على البريد الإلكتروني <a href="mailto:support@talvo.com">support@talvo.com</a>. نرد على جميع الاستفسارات في أقرب وقت.</p>
</div>
</div>
<!-- ============================================
Category: الدفع والشراء
============================================ -->
<div class="faq-category">
<h3><i class="fa-solid fa-shopping-cart"></i> الدفع والشراء</h3>
</div>
<div class="faq-item" data-keywords="سعر تكلفة دفع فلوس 25000 اشتراك سنوي شهري مرة واحدة مدى الحياة">
<div class="faq-question">
<span>هل الدفع لمرة واحدة أم اشتراك سنوي؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>الدفع <strong>لمرة واحدة فقط 25,000 ج.م</strong>. تشتري البرنامج مرة، وتستخدمه <strong>مدى الحياة</strong>. لا يوجد اشتراكات شهرية أو سنوية إجبارية.</p>
</div>
</div>
<div class="faq-item" data-keywords="سعر تكلفة شامل يشمل تحديثات دعم تدريب تثبيت ايه اللي شامل">
<div class="faq-question">
<span>ما الذي يشمله السعر؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>السعر يشمل:</p>
<ul style="margin-top: 8px; padding-right: 20px; color: var(--text-light);">
<li><strong>ترخيص مدى الحياة</strong> - استخدام غير محدود</li>
<li><strong>تحديثات مجانية لمدة سنتين</strong></li>
<li><strong>دعم فني لمدة 6 شهور</strong></li>
<li><strong>تثبيت وإعداد مجاني</strong></li>
<li><strong>تدريب أونلاين للفريق</strong></li>
</ul>
</div>
</div>
<div class="faq-item" data-keywords="بعد سنة سنتين تحديثات تجديد تحديث انتهاء انتهت">
<div class="faq-question">
<span>ماذا يحدث بعد انتهاء سنتين التحديثات؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>بعد انتهاء سنتين التحديثات المجانية، يمكنك:</p>
<ul style="margin-top: 8px; padding-right: 20px; color: var(--text-light);">
<li><strong>الاستمرار في استخدام النسخة الحالية</strong> - مدى الحياة، بدون أي رسوم إضافية</li>
<li><strong>تجديد التحديثات</strong> - اختياري، بسعر مخفض (5,000 ج.م لسنتين إضافيتين)</li>
</ul>
<p style="margin-top: 8px;">البرنامج سيبقى شغال 100% حتى لو ما جددتش التحديثات.</p>
</div>
</div>
<div class="faq-item" data-keywords="ضريبة ضرائب vat 14% فاتورة ضريبية tax شامل الضريبة">
<div class="faq-question">
<span>هل السعر شامل الضريبة؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>السعر <strong>غير شامل ضريبة القيمة المضافة (14%)</strong>. يتم إضافة الضريبة عند إتمام عملية الشراء للشركات. للأفراد، السعر نهائي 25,000 ج.م.</p>
</div>
</div>
<div class="faq-item" data-keywords="ضمان استرداد refund تأمين ارجاع فلوس استرجاع ضمان استرداد الاموال">
<div class="faq-question">
<span>هل يوجد ضمان لاسترداد الأموال؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم، نوفر <strong>ضمان استرداد الأموال لمدة 14 يوماً</strong> من تاريخ الشراء. إذا لم يكن البرنامج مناسباً لاحتياجاتك، يمكنك طلب استرداد كامل للمبلغ بدون أي أسئلة.</p>
</div>
</div>
<div class="faq-item" data-keywords="دفع فودافون كاش انستاباي تحويل بنكي فيزا ماستركارد فيزا payment">
<div class="faq-question">
<span>ما هي طرق الدفع المتاحة؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نقبل الدفع عبر:</p>
<ul style="margin-top: 8px; padding-right: 20px; color: var(--text-light);">
<li><i class="fa-solid fa-mobile-screen" style="color: var(--primary); margin-left: 8px;"></i> <strong>فودافون كاش</strong> - تحويل فوري</li>
<li><i class="fa-solid fa-building-columns" style="color: var(--primary); margin-left: 8px;"></i> <strong>إنستاباي</strong> - تحويل بنكي فوري</li>
<li><i class="fa-solid fa-money-bill-transfer" style="color: var(--primary); margin-left: 8px;"></i> <strong>تحويل بنكي</strong> - من أي بنك</li>
<li><i class="fa-solid fa-hand-holding-dollar" style="color: var(--primary); margin-left: 8px;"></i> <strong>الدفع عند التسليم</strong> - للشركات فقط</li>
</ul>
</div>
</div>
<div class="faq-item" data-keywords="فاتورة ضريبية فاتورة invoice bill ضريبة فاتوره رسميه">
<div class="faq-question">
<span>هل يمكنني الحصول على فاتورة ضريبية؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم، نوفر <strong>فاتورة ضريبية رسمية</strong> لجميع العملاء. يتم إرسال الفاتورة على إيميلك بعد إتمام عملية الشراء. للشركات، يمكن إصدار فاتورة إلكترونية معتمدة من مصلحة الضرائب.</p>
</div>
</div>
<div class="faq-item" data-keywords="تسليم delivery استلام وصول وقت مدة التسليم تحميل">
<div class="faq-question">
<span>كم يستغرق التسليم؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>التسليم <strong>فوري</strong> بعد تأكيد الدفع:</p>
<ul style="margin-top: 8px; padding-right: 20px; color: var(--text-light);">
<li><strong>فودافون كاش / إنستاباي:</strong> خلال 30 دقيقة</li>
<li><strong>تحويل بنكي:</strong> خلال 24 ساعة</li>
<li><strong>الدفع عند التسليم:</strong> خلال 48 ساعة</li>
</ul>
<p style="margin-top: 8px;">هتستلم رابط التحميل + كود التفعيل على إيميلك.</p>
</div>
</div>
<div class="faq-item" data-keywords="ترقية upgrade تحديث نسخة جديدة تطوير نسخه افضل">
<div class="faq-question">
<span>هل يمكنني ترقية النسخة لاحقاً؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>البرنامج بيتم تحديثه مجاناً لمدة سنتين، وبعدها تقدر تجدد التحديثات اختيارياً. مفيش "ترقيات" منفصلة — كل المميزات متضمنة في السعر الأساسي.</p>
</div>
</div>
<div class="faq-item" data-keywords="خصم تخفيض خصومات عرض offer عروض شركات خصم للشركات">
<div class="faq-question">
<span>هل توجد خصومات للشركات؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم، نوفر خصومات خاصة:</p>
<ul style="margin-top: 8px; padding-right: 20px; color: var(--text-light);">
<li><strong>خصم 10%</strong> للدفع المبكر</li>
<li><strong>خصم 15%</strong> للسلاسل (أكثر من 5 فروع)</li>
<li><strong>خصم 20%</strong> للعقود السنوية</li>
</ul>
<p style="margin-top: 8px;">تواصل معنا للحصول على عرض مخصص لشركتك.</p>
</div>
</div>
<!-- ============================================
Category: الدعم الفني
============================================ -->
<div class="faq-category">
<h3><i class="fa-solid fa-headset"></i> الدعم الفني</h3>
</div>
<div class="faq-item" data-keywords="دعم فني support مساعدة خدمة عملاء help دعم فنى مساعده">
<div class="faq-question">
<span>كيف يمكنني الحصول على الدعم الفني؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>يمكنك التواصل معنا عبر:</p>
<ul style="margin-top: 8px; padding-right: 20px; color: var(--text-light);">
<li><strong>البريد الإلكتروني:</strong> support@talvo.com</li>
<li><strong>GitHub Issues:</strong> للمشاكل التقنية</li>
<li><strong>نموذج الاتصال:</strong> في الموقع</li>
</ul>
<p style="margin-top: 8px;">فريق الدعم متاح من الأحد للخميس، من 9 صباحاً لـ 6 مساءً.</p>
</div>
</div>
<div class="faq-item" data-keywords="تدريب تعليم training شرح كورس فريق موظفين تدريب الفريق تعلم">
<div class="faq-question">
<span>هل يوجد تدريب للفريق؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم، نوفر <strong>تدريب أونلاين للفريق</strong> مجاناً لمدة 6 شهور. التدريب يشمل شرح كل المميزات وكيفية استخدامها في العمل اليومي.</p>
</div>
</div>
<div class="faq-item" data-keywords="تثبيت سيرفر server استضافة self-hosted on-premise سيرفراتنا">
<div class="faq-question">
<span>هل يمكن تثبيت التطبيق على سيرفراتنا؟</span>
<span class="faq-toggle"><i class="fa-solid fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>نعم، للعملاء Enterprise، يمكن تثبيت البرنامج على سيرفراتهم الخاصة. تواصل معنا للحصول على عرض مخصص.</p>
</div>
</div>
</div>
<div class="faq-no-results" id="faqNoResults" style="display: none;">
<p>لم يتم العثور على نتائج. جرب كلمة بحث أخرى.</p>
</div>
</div>
</section>
<!-- ============================================
Contact
============================================ -->
<section class="section" id="contact">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">اتصل بنا</span>
<h2>تواصل معنا</h2>
<p>عندك سؤال أو استفسار؟ نحن هنا لمساعدتك. املأ النموذج وسنرد عليك في أقرب وقت.</p>
</div>
<div class="contact-content">
<div class="contact-info fade-in">
<h3>معلومات التواصل</h3>
<p>يمكنك التواصل معنا من خلال أي من الطرق التالية. فريق الدعم متاح للإجابة على استفساراتك.</p>
<div class="contact-item">
<div class="contact-item-icon"><i class="fa-solid fa-envelope"></i></div>
<div class="contact-item-content">
<h4>البريد الإلكتروني</h4>
<p>support@talvo.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon"><i class="fa-solid fa-globe"></i></div>
<div class="contact-item-content">
<h4>الموقع الإلكتروني</h4>
<p>talvo.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon"><i class="fa-brands fa-github"></i></div>
<div class="contact-item-content">
<h4>GitHub</h4>
<p>github.com/talvoapp</p>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon"><i class="fa-solid fa-location-dot"></i></div>
<div class="contact-item-content">
<h4>العنوان</h4>
<p>القاهرة، مصر</p>
</div>
</div>
</div>
<div class="contact-form fade-in">
<div class="form-success" id="formSuccess">
<i class="fa-solid fa-circle-check"></i>
تم استلام رسالتك بنجاح. سنرد عليك في أقرب وقت.
</div>
<form id="contactForm" action="https://formspree.io/f/xwlpgjqr" method="POST">
<div class="form-row">
<div class="form-group">
<label for="name">الاسم <span class="required">*</span></label>
<input type="text" id="name" name="name" required placeholder="اسمك الكامل">
</div>
<div class="form-group">
<label for="email">البريد الإلكتروني <span class="required">*</span></label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</div>
</div>
<div class="form-group">
<label for="subject">الموضوع</label>
<select id="subject" name="subject">
<option value="purchase">🛒 طلب شراء البرنامج (25,000 ج.م)</option>
<option value="demo"> طلب عرض توضيحي (Demo)</option>
<option value="general"> استفسار عام</option>
<option value="support"> دعم فني</option>
<option value="partnership"> شراكة</option>
<option value="bug"> الإبلاغ عن مشكلة</option>
</select>
</div>
<div class="form-group">
<label for="message">الرسالة <span class="required">*</span></label>
<textarea id="message" name="message" required placeholder="اكتب رسالتك هنا..."></textarea>
</div>
<button type="submit" class="form-submit" id="submitBtn">
<i class="fa-solid fa-paper-plane"></i>
<span>إرسال الرسالة</span>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- ============================================
Changelog
============================================ -->
<section class="section section-alt" id="changelog">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">سجل التغييرات</span>
<h2>ماذا الجديد في كل إصدار؟</h2>
<p>تابع كل التحديثات والتغييرات في Talvo Desktop.</p>
</div>
<div class="changelog">
<div class="changelog-item current fade-in">
<div class="changelog-dot"></div>
<div class="changelog-content">
<div class="changelog-header">
<div>
<span class="changelog-version">v1.0.2</span>
<span class="changelog-badge">الأحدث</span>
</div>
<div class="changelog-date">أكتوبر 2026</div>
</div>
<h4><i class="fa-solid fa-plus"></i> مميزات جديدة</h4>
<ul>
<li>خدمة Talvo Server لتشغيل السيرفر تلقائياً</li>
<li>خدمة Cloudflare Tunnel للاتصال عن بُعد</li>
<li>دعم الفروع عن بُعد من أي مكان</li>
<li>مزامنة تلقائية للـ URL مع السحابة</li>
</ul>
<h4><i class="fa-solid fa-bug"></i> إصلاحات</h4>
<ul>
<li>إصلاح مشكلة QtWebEngineProcess</li>
<li>إصلاح مشكلة network service crashed</li>
<li>إصلاح مشكلة TalvoServer بعد إعادة التشغيل</li>
<li>إصلاح مشكلة تغيير Cloudflare URL</li>
</ul>
</div>
</div>
<div class="changelog-item fade-in">
<div class="changelog-dot"></div>
<div class="changelog-content">
<div class="changelog-header">
<div>
<span class="changelog-version">v1.0.1</span>
</div>
<div class="changelog-date">سبتمبر 2026</div>
</div>
<h4><i class="fa-solid fa-plus"></i> مميزات جديدة</h4>
<ul>
<li>إدارة الفروع (Branches)</li>
<li>نبضات الفروع</li>
<li>تحسينات في الأداء</li>
</ul>
<h4><i class="fa-solid fa-bug"></i> إصلاحات</h4>
<ul>
<li>إصلاح مشاكل في التقارير</li>
<li>تحسين استقرار التطبيق</li>
</ul>
</div>
</div>
<div class="changelog-item fade-in">
<div class="changelog-dot"></div>
<div class="changelog-content">
<div class="changelog-header">
<div>
<span class="changelog-version">v1.0.0</span>
</div>
<div class="changelog-date">أغسطس 2026</div>
</div>
<h4><i class="fa-solid fa-rocket"></i> الإصدار الأول</h4>
<ul>
<li>إدارة المبيعات والمشتريات</li>
<li>إدارة المخزون والمنتجات</li>
<li>إدارة العملاء والموردين</li>
<li>نظام الصلاحيات</li>
<li>التقارير الأساسية</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
Roadmap
============================================ -->
<section class="section" id="roadmap">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">خطة المستقبل</span>
<h2>ماذا القادم في Talvo؟</h2>
<p>نعمل باستمرار على تطوير Talvo وإضافة مميزات جديدة.</p>
</div>
<div class="roadmap-grid">
<div class="roadmap-card in-progress fade-in">
<span class="roadmap-status">قيد التطوير</span>
<h3>v1.1.0</h3>
<ul>
<li>Named Cloudflare Tunnel</li>
<li>إزالة نافذة الـ Console</li>
<li>نظام التحديث التلقائي</li>
<li>تحسينات في الأداء</li>
</ul>
</div>
<div class="roadmap-card planned fade-in">
<span class="roadmap-status">مخطط له</span>
<h3>v1.2.0</h3>
<ul>
<li>تطبيق موبايل (Android)</li>
<li>لوحة تحكم ويب</li>
<li>تقارير متقدمة</li>
<li>دعم متعدد اللغات</li>
</ul>
</div>
<div class="roadmap-card planned fade-in">
<span class="roadmap-status">مخطط له</span>
<h3>v2.0.0</h3>
<ul>
<li>نظام Plugin</li>
<li>REST API v2</li>
<li>النسخ الاحتياطي السحابي</li>
<li>تكامل مع أنظمة أخرى</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ============================================
About Developer
============================================ -->
<section class="section" id="developer">
<div class="container">
<div class="section-header fade-in">
<span class="section-label">المطور</span>
<h2>عن المطور</h2>
<p>تعرّف على الشخص اللي وراء Talvo Desktop</p>
</div>
<div class="developer-content fade-in">
<!-- Developer Card -->
<div class="developer-card">
<div class="developer-image-wrapper">
<img src="https://raw.githubusercontent.com/4gels/portfolio-backend/refs/heads/main/public/754235275_1284934338026823_1961380524246997792_n.jpg" alt="Mark Elasfar - Lead Developer" class="developer-image" loading="lazy">
<div class="developer-badge">
<i class="fa-solid fa-crown"></i>
Lead Developer
</div>
</div>
<div class="developer-info">
<h3 class="developer-name">Mark Elasfar</h3>
<p class="developer-alternate-names">
<span>Mark Alasfar</span>
<span class="separator">•</span>
<span>mark lasfar</span>
</p>
<p class="developer-title">
<i class="fa-solid fa-code"></i>
Lead Developer & System Architect
</p>
<p class="developer-bio">
مطور نظام Talvo Desktop وكبير فريق المبرمجين.
خبرة في تطوير أنظمة ERP للصيدليات والمستلزمات الطبية،
واستخدام أحدث التقنيات لبناء أنظمة سريعة، آمنة، وقابلة للتوسع.
</p>
<!-- Skills -->
<div class="developer-skills">
<h4><i class="fa-solid fa-tools"></i> المهارات التقنية</h4>
<div class="skills-list">
<span class="skill-tag">Python</span>
<span class="skill-tag">PyQt5</span>
<span class="skill-tag">Flask</span>
<span class="skill-tag">SQLAlchemy</span>
<span class="skill-tag">SQLite</span>
<span class="skill-tag">Nuitka</span>
<span class="skill-tag">Cloudflare</span>
<span class="skill-tag">ERP Systems</span>
<span class="skill-tag">Desktop Apps</span>
<span class="skill-tag">Software Architecture</span>
</div>
</div>
<!-- Contact -->
<div class="developer-contact">
<a href="https://github.com/Mark-Lasfar" target="_blank" rel="noopener" class="developer-link" title="GitHub">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://twitter.com/markelasfar" target="_blank" rel="noopener" class="developer-link" title="Twitter">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/ibrahimelasfar" target="_blank" rel="noopener" class="developer-link" title="LinkedIn">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="mailto:mark@talvo.com" class="developer-link" title="Email">
<i class="fa-solid fa-envelope"></i>
</a>
</div>
</div>
</div>
<!-- Developer Stats -->
<div class="developer-stats">
<div class="dev-stat">
<h4>8+</h4>
<p>سنوات خبرة</p>
</div>
<div class="dev-stat">
<h4>50+</h4>
<p>مشروع</p>
</div>
<div class="dev-stat">
<h4>1000+</h4>
<p>مستخدم</p>
</div>
<div class="dev-stat">
<h4>24/7</h4>
<p>شغف</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
Footer
============================================ -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
<img src="https://avatars.githubusercontent.com/u/337130551?s=200&v=4" alt="Talvo Logo" style="width: 42px; height: 42px; border-radius: 10px;">
<h3 style="margin: 0;">Talvo</h3>
</div>
<p>
نظام إدارة المستلزمات الطبية والمستحضرات.
حل متكامل لإدارة أعمالك باحترافية.
</p>
<div class="footer-developer">
<p style="color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin-bottom: 8px;">
<i class="fa-solid fa-code"></i> Developed by
</p>
<a href="https://github.com/Mark-Lasfar" target="_blank" rel="noopener" style="color: var(--accent); font-weight: 700; font-size: 1rem;">
Mark Elasfar
</a>
</div>
<div class="footer-social">
<a href="https://github.com/talvoapp" title="GitHub" target="_blank" rel="noopener">
<i class="fa-brands fa-github"></i>
</a>
<a href="mailto:support@talvo.com" title="Email">
<i class="fa-solid fa-envelope"></i>
</a>
<a href="https://talvoapp.github.io/demo-repository" title="Website" target="_blank" rel="noopener">
<i class="fa-solid fa-globe"></i>
</a>
<a href="#" title="Twitter">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" title="LinkedIn">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
<div class="footer-column">
<h4>المنتج</h4>
<ul>
<li><a href="#features"><i class="fa-solid fa-chevron-left"></i> المميزات</a></li>
<li><a href="#pricing"><i class="fa-solid fa-chevron-left"></i> الأسعار</a></li>
<li><a href="#download"><i class="fa-solid fa-chevron-left"></i> التحميل</a></li>
<li><a href="#roadmap"><i class="fa-solid fa-chevron-left"></i> خطة المستقبل</a></li>
</ul>
</div>
<div class="footer-column">
<h4>الدعم</h4>
<ul>
<li><a href="#faq"><i class="fa-solid fa-chevron-left"></i> الأسئلة الشائعة</a></li>
<li><a href="#installation"><i class="fa-solid fa-chevron-left"></i> دليل التثبيت</a></li>
<li><a href="https://github.com/talvoapp/talvo-desktop/issues" target="_blank" rel="noopener"><i class="fa-solid fa-chevron-left"></i> الإبلاغ عن مشكلة</a></li>
<li><a href="#contact"><i class="fa-solid fa-chevron-left"></i> اتصل بنا</a></li>
</ul>
</div>
<div class="footer-column">
<h4>الشركة</h4>
<ul>
<li><a href="#blog"><i class="fa-solid fa-chevron-left"></i> المدونة</a></li>
<li><a href="#testimonials"><i class="fa-solid fa-chevron-left"></i> آراء العملاء</a></li>
<li><a href="#developer"><i class="fa-solid fa-chevron-left"></i> عن المطور</a></li>
<li><a href="#changelog"><i class="fa-solid fa-chevron-left"></i> سجل التغييرات</a></li>
<li><a href="https://talvo.com/privacy" target="_blank" rel="noopener"><i class="fa-solid fa-chevron-left"></i> سياسة الخصوصية</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>
© 2026 Talvo. جميع الحقوق محفوظة.
<br>
<span style="font-size: 0.85rem; opacity: 0.7;">
Designed & Developed by
<a href="https://github.com/Mark-Lasfar" target="_blank" rel="noopener" style="color: var(--accent); font-weight: 700;">
Mark Elasfar
</a>
with <i class="fa-solid fa-heart" style="color: #ef4444;"></i>
</span>
</p>
</div>
</div>
</footer>
<!-- Scroll to Top -->
<button class="scroll-top" id="scrollTop" title="العودة للأعلى">
<i class="fa-solid fa-arrow-up"></i>
</button>
<script>
// ============================================
// Theme Toggle
// ============================================
const themeToggle = document.getElementById('themeToggle');
const htmlElement = document.documentElement;
const savedTheme = localStorage.getItem('talvo-theme') || 'light';
htmlElement.setAttribute('data-theme', savedTheme);
updateThemeIcon(savedTheme);
function updateThemeIcon(theme) {
const icon = themeToggle.querySelector('i');
if (theme === 'dark') {
icon.className = 'fa-solid fa-sun';
} else {
icon.className = 'fa-solid fa-moon';
}
}
themeToggle.addEventListener('click', () => {
const currentTheme = htmlElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
htmlElement.setAttribute('data-theme', newTheme);
localStorage.setItem('talvo-theme', newTheme);
updateThemeIcon(newTheme);
});
// ============================================
// Navbar & Scroll Top
// ============================================
const navbar = document.getElementById('navbar');
const scrollTop = document.getElementById('scrollTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
scrollTop.classList.add('visible');
} else {
navbar.classList.remove('scrolled');
scrollTop.classList.remove('visible');
}
});
scrollTop.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// ============================================
// Mobile Menu
// ============================================
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const navLinks = document.getElementById('navLinks');
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggle('mobile-open');
const icon = mobileMenuBtn.querySelector('i');
if (navLinks.classList.contains('mobile-open')) {
icon.className = 'fa-solid fa-times';
} else {
icon.className = 'fa-solid fa-bars';
}
});
// Close menu when clicking on a link
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('mobile-open');
mobileMenuBtn.querySelector('i').className = 'fa-solid fa-bars';
});
});
// ============================================
// Smooth Scroll for Anchor Links
// ============================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href === '#' || href === '') return;
e.preventDefault();
const target = document.querySelector(href);
if (target) {
const offset = 80;
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
// Update URL without jumping
history.pushState(null, null, href);
}
});
});
// ============================================
// Handle Initial Hash on Page Load
// ============================================
window.addEventListener('load', () => {
if (window.location.hash) {
const target = document.querySelector(window.location.hash);
if (target) {
setTimeout(() => {
const offset = 80;
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}, 100);
}
}
});
// ============================================
// Fade In 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.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// ============================================
// FAQ Accordion
// ============================================
document.querySelectorAll('.faq-question').forEach(question => {
question.addEventListener('click', () => {
const faqItem = question.parentElement;
const isOpen = faqItem.classList.contains('open');
document.querySelectorAll('.faq-item').forEach(item => {
item.classList.remove('open');
});
if (!isOpen) {
faqItem.classList.add('open');
}
});
});
// ============================================
// FAQ Search - Advanced with Dictionary
// ============================================
// قاموس المرادفات (Synonyms Dictionary)
const synonymsDictionary = {
// الأسعار والدفع
'سعر': ['تكلفة', 'أسعار', 'قيمة', 'ثمن', 'فلوس', 'مال', 'دفع', 'شراء'],
'تكلفة': ['سعر', 'أسعار', 'قيمة', 'ثمن', 'دفع'],
'دفع': ['شراء', 'سعر', 'تكلفة', 'تحويل', 'فلوس', 'مال', 'فودافون', 'انستاباي'],
'شراء': ['دفع', 'طلب', 'سعر', 'تكلفة'],
'فلوس': ['سعر', 'تكلفة', 'مال', 'دفع'],
'25000': ['سعر', 'تكلفة', 'دفع', 'شراء'],
// الاشتراكات
'اشتراك': ['اشتراكات', 'شهري', 'سنوي', 'تجديد', 'دفع', 'متكرر'],
'مجاني': ['مجانا', 'بدون فلوس', 'بدون دفع', 'free'],
'مدى الحياة': ['lifetime', 'دائم', 'أبدي', 'لا نهائي', 'مرة واحدة'],
// البرنامج
'برنامج': ['تطبيق', 'سيستم', 'نظام', 'software', 'app'],
'تطبيق': ['برنامج', 'سيستم', 'نظام', 'app'],
'نظام': ['برنامج', 'تطبيق', 'سيستم'],
// المميزات
'مميزات': ['خصائص', 'features', 'فوائد', 'إمكانيات'],
'تقارير': ['تقرير', 'احصائيات', 'احصاءات', 'reports', 'تحليل'],
'مخزون': ['مخزن', 'بضاعة', 'منتجات', 'inventory', 'stock'],
'مبيعات': ['بيع', 'فواتير', 'sales', 'عملاء'],
'مشتريات': ['شراء', 'موردين', 'purchases', 'فواتير شراء'],
'عملاء': ['عميل', 'customers', 'زبائن', 'زباين'],
'موردين': ['مورد', 'suppliers', 'مشتريات'],
'فروع': ['فرع', 'branches', 'متعدد', 'شبكة'],
// التقنية
'تحميل': ['تنزيل', 'install', 'download', 'تثبيت'],
'تثبيت': ['install', 'setup', 'تنصيب', 'تحميل'],
'نسخ احتياطي': ['باك اب', 'backup', 'نسخة', 'حفظ'],
'آمن': ['أمان', 'حماية', 'security', 'safe', 'مأمون'],
'بيانات': ['داتا', 'data', 'معلومات', 'معلومات'],
'انترنت': ['نت', 'internet', 'اتصال', 'شبكة', 'واي فاي'],
'سيرفر': ['خادم', 'server', 'ماستر', 'master', 'رئيسي'],
'فرع': ['branch', 'فروع', 'remote'],
// الدعم
'دعم': ['مساعدة', 'support', 'مساعده', 'خدمة عملاء', 'help'],
'تدريب': ['تعليم', 'training', 'شرح', 'كورس'],
'مشكلة': ['عطل', 'error', 'bug', 'خطأ', 'مشكله'],
'تحديث': ['update', 'ترقية', 'upgrade', 'نسخة جديدة'],
// التسليم
'تسليم': ['delivery', 'استلام', 'وصول', 'تسليم'],
'ضمان': ['guarantee', 'warranty', 'تأمين', 'استرداد'],
'استرداد': ['ضمان', 'استرجاع', 'refund', 'استرداد'],
// الخصومات
'خصم': ['تخفيض', 'discount', 'offer', 'عرض', 'عروض'],
'فاتورة': ['invoice', 'bill', 'فواتير', 'ضريبية'],
'ضريبية': ['ضريبة', 'tax', 'فاتورة ضريبية'],
// العربية والإنجليزية
'windows': ['ويندوز', 'نظام التشغيل', 'os'],
'linux': ['لينكس'],
'mac': ['ماك', 'macos'],
'data': ['بيانات', 'داتا'],
'backup': ['نسخ احتياطي', 'نسخة احتياطية'],
'security': ['أمان', 'حماية'],
'price': ['سعر', 'تكلفة'],
'payment': ['دفع', 'طرق الدفع'],
'support': ['دعم', 'مساعدة'],
'update': ['تحديث', 'ترقية'],
'training': ['تدريب', 'تعليم'],
'refund': ['استرداد', 'ضمان']
};
// دالة للحصول على كل الكلمات المرتبطة بكلمة البحث
function getSearchTerms(query) {
const normalized = query.toLowerCase().trim();
const terms = new Set([normalized]);
// أضف المرادفات لو موجودة
if (synonymsDictionary[normalized]) {
synonymsDictionary[normalized].forEach(syn => terms.add(syn.toLowerCase()));
}
// ابحث في كل القاموس لو الكلمة موجودة في المرادفات
for (const [key, values] of Object.entries(synonymsDictionary)) {
if (values.some(v => v.toLowerCase().includes(normalized))) {
terms.add(key.toLowerCase());
values.forEach(v => terms.add(v.toLowerCase()));
}
}
return Array.from(terms);
}
// دالة لتصفية النص (إزالة التشكيل والهمزات)
function normalizeArabic(text) {
return text
.toLowerCase()
.replace(/[أإآٱ]/g, 'ا')
.replace(/[ىي]/g, 'ي')
.replace(/[ةه]/g, 'ه')
.replace(/[\u064B-\u065F]/g, '') // إزالة التشكيل
.trim();
}
// دالة لتظليل الكلمة في النص
function highlightText(text, term) {
if (!term) return text;
const regex = new RegExp(`(${term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
// ============================================
// FAQ Search Main Function
// ============================================
const faqSearch = document.getElementById('faqSearch');
const faqItems = document.querySelectorAll('.faq-item');
const faqNoResults = document.getElementById('faqNoResults');
const faqCategories = document.querySelectorAll('.faq-category');
if (faqSearch) {
faqSearch.addEventListener('input', (e) => {
const rawQuery = e.target.value.trim();
// لو البحث فاضي، اعرض كل حاجة
if (rawQuery === '') {
faqItems.forEach(item => {
item.style.display = '';
// إزالة التظليل
const answer = item.querySelector('.faq-answer');
if (answer && answer.innerHTML.includes('<mark>')) {
answer.innerHTML = answer.innerHTML.replace(/<mark>/g, '').replace(/<\/mark>/g, '');
}
});
faqCategories.forEach(cat => cat.style.display = '');
faqNoResults.style.display = 'none';
return;
}
// احصل على كل الكلمات المرتبطة
const searchTerms = getSearchTerms(rawQuery);
const normalizedQuery = normalizeArabic(rawQuery);
let visibleCount = 0;
const visibleCategories = new Set();
faqItems.forEach(item => {
const question = item.querySelector('.faq-question span').textContent;
const answer = item.querySelector('.faq-answer').textContent;
const keywords = item.getAttribute('data-keywords') || '';
// دمج كل النص للبحث
const combinedText = `${question} ${answer} ${keywords}`;
const normalizedText = normalizeArabic(combinedText);
// ابحث في كل الكلمات المرتبطة
let found = false;
for (const term of searchTerms) {
const normalizedTerm = normalizeArabic(term);
if (normalizedText.includes(normalizedTerm)) {
found = true;
break;
}
}
if (found) {
item.style.display = '';
visibleCount++;
// سجل التصنيف
const category = item.previousElementSibling;
if (category && category.classList.contains('faq-category')) {
visibleCategories.add(category);
}
} else {
item.style.display = 'none';
}
});
// أظهر/اخفي التصنيفات حسب النتائج
faqCategories.forEach(cat => {
// شوف لو فيه faq-item ظاهر بعد التصنيف
let hasVisibleItems = false;
let nextSibling = cat.nextElementSibling;
while (nextSibling && !nextSibling.classList.contains('faq-category')) {
if (nextSibling.classList.contains('faq-item') && nextSibling.style.display !== 'none') {
hasVisibleItems = true;
break;
}
nextSibling = nextSibling.nextElementSibling;
}
if (hasVisibleItems) {
cat.style.display = '';
} else {
cat.style.display = 'none';
}
});
// أظهر "لا توجد نتائج"
if (visibleCount === 0) {
faqNoResults.style.display = 'block';
} else {
faqNoResults.style.display = 'none';
}
});
// Enter key - افتح أول نتيجة
faqSearch.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const firstVisible = document.querySelector('.faq-item[style=""]:not([style*="none"]), .faq-item:not([style*="none"])');
if (firstVisible && firstVisible.style.display !== 'none') {
firstVisible.scrollIntoView({ behavior: 'smooth', block: 'center' });
const question = firstVisible.querySelector('.faq-question');
if (question && !firstVisible.classList.contains('open')) {
question.click();
}
}
}
});
// ESC key - امسح البحث
faqSearch.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
faqSearch.value = '';
faqSearch.dispatchEvent(new Event('input'));
}
});
}
// ============================================
// Contact Form
// ============================================
const contactForm = document.getElementById('contactForm');
const formSuccess = document.getElementById('formSuccess');
const submitBtn = document.getElementById('submitBtn');
if (contactForm) {
contactForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Show loading state
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i><span>جاري الإرسال...</span>';
submitBtn.disabled = true;
try {
const formData = new FormData(contactForm);
// Check if Formspree ID is set
const actionUrl = contactForm.getAttribute('action');
if (actionUrl.includes('YOUR_FORM_ID')) {
// Demo mode - simulate success
setTimeout(() => {
formSuccess.classList.add('show');
contactForm.reset();
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
setTimeout(() => {
formSuccess.classList.remove('show');
}, 5000);
}, 1500);
} else {
// Real submission
const response = await fetch(actionUrl, {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json'
}
});
if (response.ok) {
formSuccess.classList.add('show');
contactForm.reset();
setTimeout(() => {
formSuccess.classList.remove('show');
}, 5000);
} else {
throw new Error('Failed to send');
}
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
}
} catch (error) {
alert('حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى.');
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
}
});
}
// ============================================
// Console Welcome
// ============================================
console.log('%c Talvo Desktop ', 'background: linear-gradient(135deg, #2563eb, #60a5fa); color: white; font-size: 24px; padding: 12px 24px; border-radius: 8px; font-weight: bold; font-family: Cairo, sans-serif;');
console.log('%c نظام إدارة المستلزمات الطبية والمستحضرات ', 'color: #2563eb; font-size: 16px; font-weight: bold; padding: 8px 0;');
console.log('%c GitHub: https://github.com/talvoapp/talvo-desktop ', 'color: #64748b; font-size: 12px;');
</script>
</body>
</html>