Hugging Face's logo

Spaces:
123qwersd
/
undefined
Running

App Files Community
undefined / index.html
123qwersd's picture
123qwersd
اريد برنامج وليس موقع
b1d90de verified
raw
history blame contribute delete
23.5 kB
 <!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Al-Mohandis Al-Thaki - ESP32 Development Wizard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
body {
font-family: 'Tajawal', sans-serif;
direction: rtl;
}
.en {
direction: ltr;
text-align: left;
}
.vanta-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;
}
.code-block {
font-family: 'Courier New', monospace;
}
.typing-effect {
border-right: 2px solid;
animation: blink 1s step-end infinite;
}
@keyframes blink {
from, to { border-color: transparent }
50% { border-color: #3B82F6 }
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div id="vanta-bg" class="vanta-bg"></div>
<header class="bg-white shadow-sm sticky top-0 z-10">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2 space-x-reverse">
<i data-feather="cpu" class="text-primary w-8 h-8"></i>
<h1 class="text-xl font-bold text-primary">المهندس الذكي</h1>
</div>
<nav class="hidden md:flex space-x-6 space-x-reverse">
<a href="#features" class="hover:text-primary transition">المميزات</a>
<a href="#how-it-works" class="hover:text-primary transition">كيف يعمل</a>
<a href="#ai" class="hover:text-primary transition">الذكاء الاصطناعي</a>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">حمل التطبيق</button>
</nav>
<button class="md:hidden" id="mobile-menu-button">
<i data-feather="menu"></i>
</button>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="py-16 md:py-24">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 text-right">
<h1 class="text-4xl md:text-5xl font-bold mb-4">طور لوحات ESP32 من هاتفك!</h1>
<p class="text-lg mb-6 text-gray-600">المهندس الذكي يجعل برمجة لوحات ESP32-Dev أسهل من أي وقت مضى باستخدام هاتفك الأندرويد فقط</p>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
<button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary-600 transition font-medium flex items-center justify-center">
<i data-feather="download" class="ml-2"></i>
حمل التطبيق
</button>
<button class="border border-primary text-primary px-6 py-3 rounded-lg hover:bg-primary-50 transition font-medium">
شاهد الفيديو التوضيحي
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative">
<img src="http://static.photos/technology/640x360/1" alt="ESP32 Development" class="rounded-xl shadow-xl w-full max-w-md">
<div class="absolute -bottom-5 -left-5 bg-white p-3 rounded-lg shadow-md">
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-full mr-2">
<i data-feather="usb" class="text-green-600 w-5 h-5"></i>
</div>
<span class="text-sm font-medium">اتصال USB Type-C مباشر</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">المميزات الرائعة</h2>
<p class="text-gray-600 max-w-2xl mx-auto">المهندس الذكي يوفر كل ما تحتاجه لبرمجة لوحات ESP32 بكفاءة عالية</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="zap" class="text-blue-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold mb-2">برمجة مباشرة عبر USB-C</h3>
<p class="text-gray-600">قم ببرمجة لوحة ESP32-Dev مباشرة من هاتفك دون الحاجة إلى جهاز كمبيوتر</p>
</div>
<!-- Feature 2 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="message-square" class="text-green-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold mb-2">واجهة ذكية ثنائية اللغة</h3>
<p class="text-gray-600">واجهة مستخدم كاملة باللغتين العربية والإنجليزية مع تفاعل يشبه ChatGPT</p>
</div>
<!-- Feature 3 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="code" class="text-purple-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold mb-2">وصف الكود الذكي</h3>
<p class="text-gray-600">احصل على شرح مفصل للكود البرمجي باللغتين لتفهم كل سطر بسهولة</p>
</div>
<!-- Feature 4 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="bg-yellow-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="mic" class="text-yellow-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold mb-2">إدخال صوتي ونصي</h3>
<p class="text-gray-600">اكتب الكود باستخدام صوتك أو النص مع اقتراحات ذكية تلقائية</p>
</div>
<!-- Feature 5 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="bg-red-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="cpu" class="text-red-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold mb-2">مساعدة متعلقة بالعتاد</h3>
<p class="text-gray-600">احصل على معلومات مفصلة عن دبابيس ESP32 بناءً على الكود الذي تكتبه</p>
</div>
<!-- Feature 6 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="cloud" class="text-indigo-600 w-5 h-5"></i>
</div>
<h3 class="text-xl font-bold mb-2">نسخ احتياطي ومزامنة</h3>
<p class="text-gray-600">احفظ مشاريعك على السحابة واسترجعها على أي جهاز آخر</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section id="how-it-works" class="py-16">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">كيف يعمل المهندس الذكي؟</h2>
<p class="text-gray-600 max-w-2xl mx-auto">ثلاث خطوات بسيطة لبدء برمجة لوحات ESP32 من هاتفك</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-blue-600 text-xl font-bold">1</span>
</div>
<h3 class="text-xl font-bold mb-2">قم بتوصيل ESP32</h3>
<p class="text-gray-600">استخدم كابل USB Type-C لتوصيل لوحة ESP32-Dev بهاتفك</p>
</div>
<div class="text-center">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-green-600 text-xl font-bold">2</span>
</div>
<h3 class="text-xl font-bold mb-2">اكتب أو تحدث بالكود</h3>
<p class="text-gray-600">استخدم لوحة المفاتيح أو صوتك لكتابة الكود البرمجي</p>
</div>
<div class="text-center">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-purple-600 text-xl font-bold">3</span>
</div>
<h3 class="text-xl font-bold mb-2">اضغط على زر البرمجة</h3>
<p class="text-gray-600">اضغط على زر "برمجة الحافظة" لتحميل الكود على اللوحة</p>
</div>
</div>
</div>
</section>
<!-- AI Section -->
<section id="ai" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<img src="http://static.photos/technology/640x360/2" alt="AI Code Assistance" class="rounded-xl shadow-xl w-full">
</div>
<div class="md:w-1/2 md:pr-10 text-right">
<h2 class="text-3xl font-bold mb-4">الذكاء الاصطناعي المتقدم</h2>
<p class="text-lg mb-6 text-gray-600">قم بتوصيل تطبيق المهندس الذكي بـ OpenAI API للحصول على ميزات متقدمة</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-primary-100 p-2 rounded-full mr-4 mt-1">
<i data-feather="key" class="text-primary w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold mb-1">إدخال مفتاح API</h4>
<p class="text-gray-600">أدخل مفتاح OpenAI API الخاص بك للإطلاق الكامل لقدرات الذكاء الاصطناعي</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 p-2 rounded-full mr-4 mt-1">
<i data-feather="refresh-cw" class="text-green-600 w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold mb-1">إعادة هيكلة الكود الذكية</h4>
<p class="text-gray-600">حسن كودك تلقائيًا ليكون أكثر كفاءة وقابلية للقراءة</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-2 rounded-full mr-4 mt-1">
<i data-feather="share-2" class="text-purple-600 w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold mb-1">ربط بالتطبيقات الأخرى</h4>
<p class="text-gray-600">قم بتوصيل المهندس الذكي بتطبيقات IoT أو إدارة المشاريع الأخرى</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Code Example -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="flex border-b">
<div class="px-4 py-3 bg-gray-100 font-medium">مثال على الكود</div>
<div class="px-4 py-3 font-medium">وصف الكود</div>
</div>
<div class="grid md:grid-cols-2">
<div class="p-6 bg-gray-50 code-block">
<pre class="text-sm"><code>#include &lt;WiFi.h&gt;
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("Connected!");
}
void loop() {
// Your code here
}</code></pre>
</div>
<div class="p-6">
<h3 class="font-bold mb-2">اتصال WiFi بلوحة ESP32</h3>
<p class="text-gray-600 mb-4">هذا الكود يقوم بتوصيل لوحة ESP32 بشبكة WiFi. يتم تعريف اسم الشبكة وكلمة المرور في البداية، ثم في الدالة setup() يبدأ الاتصال ويتم الانتظار حتى يتم الاتصال بنجاح.</p>
<div class="flex items-center text-sm text-gray-500">
<i data-feather="info" class="w-4 h-4 mr-1"></i>
<span>ملاحظة: استبدل your_SSID و your_PASSWORD بمعلومات شبكتك</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-primary text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">جاهز لبدء البرمجة من هاتفك؟</h2>
<p class="text-lg mb-8 max-w-2xl mx-auto">حمل تطبيق المهندس الذكي الآن وابدأ في برمجة لوحات ESP32 بكل سهولة</p>
<div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
<button class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-gray-100 transition font-medium flex items-center justify-center mx-auto">
<i data-feather="download" class="mr-2"></i>
حمل التطبيق الآن
</button>
<button class="border border-white text-white px-8 py-3 rounded-lg hover:bg-white hover:text-primary transition font-medium">
تعرف على المزيد
</button>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900 text-gray-300 py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<i data-feather="cpu" class="text-primary w-6 h-6 mr-2"></i>
<span class="text-xl font-bold text-white">المهندس الذكي</span>
</div>
<p class="mb-4">تطبيق قوي لبرمجة لوحات ESP32 مباشرة من هاتفك الأندرويد</p>
<div class="flex space-x-4 space-x-reverse">
<a href="#" class="hover:text-primary transition"><i data-feather="facebook"></i></a>
<a href="#" class="hover:text-primary transition"><i data-feather="twitter"></i></a>
<a href="#" class="hover:text-primary transition"><i data-feather="youtube"></i></a>
</div>
</div>
<div>
<h3 class="text-white font-bold mb-4">روابط سريعة</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-primary transition">الرئيسية</a></li>
<li><a href="#features" class="hover:text-primary transition">المميزات</a></li>
<li><a href="#how-it-works" class="hover:text-primary transition">كيف يعمل</a></li>
<li><a href="#ai" class="hover:text-primary transition">الذكاء الاصطناعي</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">الدعم</h3>
<ul class="space-y-2">
<li><a href="download.html" class="hover:text-primary transition">تحميل التطبيق</a></li>
<li><a href="#" class="hover:text-primary transition">الأسئلة الشائعة</a></li>
<li><a href="#" class="hover:text-primary transition">الدليل التعليمي</a></li>
<li><a href="#" class="hover:text-primary transition">اتصل بنا</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">اشترك في النشرة البريدية</h3>
<p class="mb-4">ابق على اطلاع بآخر التحديثات والمميزات الجديدة</p>
<div class="flex">
<input type="email" placeholder="بريدك الإلكتروني" class="bg-gray-800 text-white px-4 py-2 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-primary w-full">
<button class="bg-primary text-white px-4 py-2 rounded-l-lg hover:bg-primary-600 transition">
<i data-feather="send"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm">
<p>© 2023 المهندس الذكي. جميع الحقوق محفوظة.</p>
</div>
</div>
</footer>
<script>
// Initialize Vanta.js
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: '#3B82F6',
backgroundColor: '#f8fafc',
size: 0.8
});
// Initialize Feather Icons
feather.replace();
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const nav = document.querySelector('nav');
nav.classList.toggle('hidden');
nav.classList.toggle('flex');
nav.classList.toggle('flex-col');
nav.classList.toggle('absolute');
nav.classList.toggle('top-16');
nav.classList.toggle('right-4');
nav.classList.toggle('bg-white');
nav.classList.toggle('p-4');
nav.classList.toggle('rounded-lg');
nav.classList.toggle('shadow-md');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Typing effect for code blocks
const codeBlocks = document.querySelectorAll('.code-block pre code');
codeBlocks.forEach(block => {
const originalText = block.textContent;
block.textContent = '';
let i = 0;
const typing = setInterval(() => {
if (i < originalText.length) {
block.textContent += originalText.charAt(i);
i++;
} else {
clearInterval(typing);
}
}, 10);
});
</script>
</body>
</html>