Spaces:

Rayan545454
/

bbv555

Running

App Files Files Community

Rayan545454 commited on Sep 11, 2025

Commit

5041fb5

verified ·

1 Parent(s): a9475f5

مستقبل تطوير الويب

Browse files

يبدأ من هنا إذا اضغط شوف tor لازم تنزيل https://apps.apple.com/sa/app/vpn-%D8%AA%D8%A7%D9%85%D9%8A%D9%86-vpn-proxy/id1282216562?l=ar - Initial Deployment

Files changed (3) hide show

README.md +7 -5
index.html +327 -18
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Bbv555
-emoji: 🏃
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: bbv555
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,328 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>مستقبل تطوير الويب يبدأ من هنا</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌐</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></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.net.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
+        body {
+            font-family: 'Cairo', sans-serif;
+            overflow-x: hidden;
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .glass-effect {
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .pulse-glow {
+            animation: pulse-glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes pulse-glow {
+            from {
+                box-shadow: 0 0 20px -10px rgba(102, 126, 234, 0.5);
+            }
+            to {
+                box-shadow: 0 0 30px 0px rgba(102, 126, 234, 0.8);
+            }
+        }
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(5deg); }
+        }
+        .code-block {
+            background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
+            border-left: 4px solid #667eea;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Vanta Background -->
+    <div id="vanta-bg" class="fixed inset-0 z-0"></div>
+    <!-- Navigation -->
+    <nav class="relative z-10 glass-effect sticky top-0">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center py-4">
+                <div class="flex items-center space-x-4 space-x-reverse">
+                    <i data-feather="code" class="w-8 h-8 text-purple-400"></i>
+                    <span class="text-xl font-bold gradient-text">Web Future</span>
+                </div>
+                <div class="hidden md:flex space-x-6 space-x-reverse">
+                    <a href="#features" class="hover:text-purple-400 transition">المميزات</a>
+                    <a href="#tools" class="hover:text-purple-400 transition">الأدوات</a>
+                    <a href="#roadmap" class="hover:text-purple-400 transition">خارطة الطريق</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="relative z-10 min-h-screen flex items-center justify-center px-4">
+        <div class="text-center max-w-4xl mx-auto" data-aos="fade-up">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6">
+                <span class="gradient-text">مستقبل تطوير الويب</span>
+                <br>
+                <span class="text-white">يبدأ من هنا</span>
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
+                انضم إلى الثورة التقنية وابدأ رحلتك في عالم تطوير الويب الحديث
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                <button id="torButton" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-8 py-4 rounded-full text-lg font-semibold pulse-glow transition-all transform hover:scale-105">
+                    <i data-feather="shield" class="inline-block w-5 h-5 ml-2"></i>
+                    شاهد Tor
+                </button>
+                <div class="text-sm text-gray-400 mt-4 sm:mt-0">
+                    <i data-feather="info" class="inline-block w-4 h-4 ml-1"></i>
+                    متطلب: VPN لتشغيل Tor
+                </div>
+            </div>
+        </div>
+        <!-- Floating Elements -->
+        <div class="absolute top-20 left-10 w-20 h-20 bg-purple-500 rounded-full opacity-20 floating"></div>
+        <div class="absolute bottom-20 right-10 w-32 h-32 bg-blue-500 rounded-full opacity-20 floating" style="animation-delay: -2s;"></div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="relative z-10 py-20 px-4">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">
+                <span class="gradient-text">لماذا تبدأ معنا؟</span>
+            </h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="glass-effect p-8 rounded-2xl" data-aos="fade-up" data-aos-delay="100">
+                    <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="rocket" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">تطوير سريع</h3>
+                    <p class="text-gray-300">تعلم أحدث تقنيات الويب وتطوير التطبيقات بسرعة قياسية</p>
+                </div>
+                <div class="glass-effect p-8 rounded-2xl" data-aos="fade-up" data-aos-delay="200">
+                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="shield" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">أمان متقدم</h3>
+                    <p class="text-gray-300">تعلم أفضل ممارسات الأمان في تطوير الويب والتطبيقات</p>
+                </div>
+                <div class="glass-effect p-8 rounded-2xl" data-aos="fade-up" data-aos-delay="300">
+                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="trending-up" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">نمو مستمر</h3>
+                    <p class="text-gray-300">تطور مهاراتك مع محتوى متجدد ودعم مجتمعي قوي</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Tools Section -->
+    <section id="tools" class="relative z-10 py-20 px-4 bg-black bg-opacity-50">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">
+                <span class="gradient-text">أدوات المستقبل</span>
+            </h2>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="code-block p-6 rounded-lg" data-aos="fade-right">
+                    <h3 class="text-xl font-bold mb-4 text-purple-400">React & Next.js</h3>
+                    <pre class="text-sm text-gray-300 overflow-x-auto">
+<code>// مثال تطبيق ويب حديث
+import { useState } from 'react'
+export default function App() {
+  const [count, setCount] = useState(0)
+  return (
+    &lt;div className="p-4"&gt;
+      &lt;h1&gt;مرحباً بك في المستقبل&lt;/h1&gt;
+      &lt;button
+        onClick={() => setCount(count + 1)}
+        className="bg-purple-600 text-white px-4 py-2 rounded"
+      &gt;
+        العدد: {count}
+      &lt;/button&gt;
+    &lt;/div&gt;
+  )
+}</code>
+                    </pre>
+                </div>
+                <div class="code-block p-6 rounded-lg" data-aos="fade-left">
+                    <h3 class="text-xl font-bold mb-4 text-blue-400">Node.js & Express</h3>
+                    <pre class="text-sm text-gray-300 overflow-x-auto">
+<code>// خادم API حديث
+const express = require('express')
+const app = express()
+app.get('/api/data', (req, res) => {
+  res.json({
+    message: 'مرحباً من المستقبل!',
+    timestamp: new Date().toISOString()
+  })
+})
+app.listen(3000, () => {
+  console.log('الخادم يعمل على المنفذ 3000')
+})</code>
+                    </pre>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Roadmap Section -->
+    <section id="roadmap" class="relative z-10 py-20 px-4">
+        <div class="max-w-4xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">
+                <span class="gradient-text">خارطة تعلم تطوير الويب</span>
+            </h2>
+            <div class="space-y-8">
+                <div class="flex items-start space-x-4 space-x-reverse" data-aos="fade-right">
+                    <div class="flex-shrink-0 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center font-bold">1</div>
+                    <div class="glass-effect p-6 rounded-lg flex-1">
+                        <h3 class="text-xl font-bold mb-2">أساسيات البرمجة</h3>
+                        <p class="text-gray-300">HTML5, CSS3, JavaScript ES6+</p>
+                    </div>
+                </div>
+                <div class="flex items-start space-x-4 space-x-reverse" data-aos="fade-right" data-aos-delay="100">
+                    <div class="flex-shrink-0 w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center font-bold">2</div>
+                    <div class="glass-effect p-6 rounded-lg flex-1">
+                        <h3 class="text-xl font-bold mb-2">أطر العمل الحديثة</h3>
+                        <p class="text-gray-300">React, Vue, Angular</p>
+                    </div>
+                </div>
+                <div class="flex items-start space-x-4 space-x-reverse" data-aos="fade-right" data-aos-delay="200">
+                    <div class="flex-shrink-0 w-12 h-12 bg-green-600 rounded-full flex items-center justify-center font-bold">3</div>
+                    <div class="glass-effect p-6 rounded-lg flex-1">
+                        <h3 class="text-xl font-bold mb-2">ال backend والقواعد</h3>
+                        <p class="text-gray-300">Node.js, Express, MongoDB, PostgreSQL</p>
+                    </div>
+                </div>
+                <div class="flex items-start space-x-4 space-x-reverse" data-aos="fade-right" data-aos-delay="300">
+                    <div class="flex-shrink-0 w-12 h-12 bg-pink-600 rounded-full flex items-center justify-center font-bold">4</div>
+                    <div class="glass-effect p-6 rounded-lg flex-1">
+                        <h3 class="text-xl font-bold mb-2">DevOps والنشر</h3>
+                        <p class="text-gray-300">Docker, AWS, CI/CD, Git</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="relative z-10 py-12 px-4 border-t border-gray-800">
+        <div class="max-w-7xl mx-auto text-center">
+            <p class="text-gray-400">&copy; 2024 مستقبل تطوير الويب. كل الحقوق محفوظة.</p>
+        </div>
+    </footer>
+    <!-- VPN Modal -->
+    <div id="vpnModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <div class="bg-gray-800 rounded-2xl p-8 max-w-md w-full mx-4">
+                <h3 class="text-2xl font-bold mb-4 text-center">تثبيت VPN مطلوب</h3>
+                <p class="text-gray-300 mb-6 text-center">
+                    لتشغيل Tor، تحتاج إلى تثبيت VPN أولاً. أنقر على الرابط أدناه للتثبيت:
+                </p>
+                <a href="https://apps.apple.com/sa/app/vpn-%D8%AA%D8%A7%D9%85%D9%8A%D9%86-vpn-proxy/id1282216562?l=ar"
+                   target="_blank"
+                   class="block w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-3 rounded-lg text-center font-semibold hover:from-purple-700 hover:to-blue-700 transition">
+                    <i data-feather="download" class="inline-block w-5 h-5 ml-2"></i>
+                    تثبيت VPN Tamien
+                </a>
+                <button onclick="closeVpnModal()" class="mt-4 w-full text-gray-400 hover:text-white transition">
+                    إلغاء
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize
+        AOS.init({
+            duration: 1000,
+            once: true
+        });
+        // Vanta Background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x667eea,
+            backgroundColor: 0x111827,
+            points: 10.00,
+            maxDistance: 23.00,
+            spacing: 17.00
+        });
+        // Feather Icons
+        feather.replace();
+        // Tor Button
+        document.getElementById('torButton').addEventListener('click', function() {
+            document.getElementById('vpnModal').classList.remove('hidden');
+        });
+        function closeVpnModal() {
+            document.getElementById('vpnModal').classList.add('hidden');
+        }
+        // Smooth scroll
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+        // GSAP Animations
+        gsap.from("nav", { duration: 1, y: -50, opacity: 0, ease: "power2.out" });
+        gsap.from(".hero-content", { duration: 1.5, y: 50, opacity: 0, delay: 0.5, ease: "power2.out" });
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ مستقبل تطوير الويب
2	+ يبدأ من هنا إذا اضغط شوف tor لازم تنزيل https://apps.apple.com/sa/app/vpn-%D8%AA%D8%A7%D9%85%D9%8A%D9%86-vpn-proxy/id1282216562?l=ar