Spaces:

Rayan545454
/

ccccc11

Running

App Files Files Community

ccccc11 / index.html

Rayan545454

ابغا صفحة اول دبلوم انجليزي و دبلوم امن السبرانية و دبلوم البرمجة و دبلوم التصميم - Initial Deployment

a0a3a92 verified 7 months ago

raw

history blame contribute delete

19.7 kB

	<!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="/static/favicon.ico">
	<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/animejs/lib/anime.iife.min.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
	<style>
	body {
	font-family: 'Tajawal', sans-serif;
	}
	.gradient-bg {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.glass-effect {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	}
	.hover-scale {
	transition: transform 0.3s ease;
	}
	.hover-scale:hover {
	transform: translateY(-5px);
	}
	.diploma-card {
	background: linear-gradient(145deg, #ffffff, #f0f0f0);
	box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
	}
	.diploma-card:hover {
	box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Hero Section -->
	<section class="relative h-screen flex items-center justify-center overflow-hidden">
	<div id="vanta-bg" class="absolute inset-0"></div>
	<div class="relative z-10 text-center text-white px-4">
	<h1 class="text-5xl md:text-7xl font-bold mb-6" data-aos="fade-up">
	الأكاديمية التقنية
	</h1>
	<p class="text-xl md:text-2xl mb-8" data-aos="fade-up" data-aos-delay="200">
	دبلومات مهنية في أحدث مجالات التكنولوجيا
	</p>
	<button onclick="scrollToDiplomas()"
	class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition duration-300">
	اكتشف برامجنا
	</button>
	</div>
	</section>

	<!-- Navigation -->
	<nav class="fixed top-0 w-full z-50 glass-effect" id="navbar">
	<div class="container mx-auto px-4 py-4">
	<div class="flex justify-between items-center">
	<div class="text-white font-bold text-xl">الأكاديمية التقنية</div>
	<button class="text-white md:hidden" onclick="toggleMenu()">
	<i data-feather="menu"></i>
	</button>
	<div class="hidden md:flex space-x-8 space-x-reverse">
	<a href="#diplomas" class="text-white hover:text-gray-300">الدبلومات</a>
	<a href="#features" class="text-white hover:text-gray-300">المميزات</a>
	<a href="#contact" class="text-white hover:text-gray-300">تواصل معنا</a>
	</div>
	</div>
	</div>
	</nav>

	<!-- Diplomas Section -->
	<section id="diplomas" class="py-20 bg-gray-50">
	<div class="container mx-auto px-4">
	<h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">
	برامج الدبلومات المهنية
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
	<!-- English Diploma -->
	<div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="100">
	<div class="text-center mb-6">
	<div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="book-open" class="text-white w-10 h-10"></i>
	</div>
	<h3 class="text-2xl font-bold text-gray-800">دبلوم اللغة الإنجليزية المهنية</h3>
	</div>
	<ul class="text-gray-600 space-y-2 mb-6">
	<li>• تطوير المهارات اللغوية الشاملة</li>
	<li>• التركيز على اللغة التجارية والمهنية</li>
	<li>• إعداد لاختبارات IELTS وTOEFL</li>
	<li>• 6 مستويات تدريبية متقدمة</li>
	</ul>
	<div class="flex justify-between items-center">
	<span class="text-2xl font-bold text-blue-600">6 أشهر</span>
	<button onclick="showDetails('english')"
	class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition">
	التفاصيل
	</button>
	</div>
	</div>

	<!-- Cybersecurity Diploma -->
	<div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="200">
	<div class="text-center mb-6">
	<div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="shield" class="text-white w-10 h-10"></i>
	</div>
	<h3 class="text-2xl font-bold text-gray-800">دبلوم أمن السبرانية</h3>
	</div>
	<ul class="text-gray-600 space-y-2 mb-6">
	<li>• أساسيات الأمن السيبراني</li>
	<li>• اختبار الاختراق والتحقيق الجنائي الرقمي</li>
	<li>• إدارة المخاطر والامتثال</li>
	<li>• شهادات CEH وSecurity+</li>
	</ul>
	<div class="flex justify-between items-center">
	<span class="text-2xl font-bold text-red-600">9 أشهر</span>
	<button onclick="showDetails('cyber')"
	class="bg-red-600 text-white px-6 py-2 rounded-full hover:bg-red-700 transition">
	التفاصيل
	</button>
	</div>
	</div>

	<!-- Programming Diploma -->
	<div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="300">
	<div class="text-center mb-6">
	<div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="code" class="text-white w-10 h-10"></i>
	</div>
	<h3 class="text-2xl font-bold text-gray-800">دبلوم البرمجة وتطوير البرمجيات</h3>
	</div>
	<ul class="text-gray-600 space-y-2 mb-6">
	<li>• تطوير الويب والتطبيقات</li>
	<li>• Python وJavaScript وJava</li>
	<li>• قواعد البيانات والـ APIs</li>
	<li>• مشروع تخرج واقعي</li>
	</ul>
	<div class="flex justify-between items-center">
	<span class="text-2xl font-bold text-green-600">12 شهر</span>
	<button onclick="showDetails('programming')"
	class="bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition">
	التفاصيل
	</button>
	</div>
	</div>

	<!-- Design Diploma -->
	<div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="400">
	<div class="text-center mb-6">
	<div class="w-20 h-20 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="pen-tool" class="text-white w-10 h-10"></i>
	</div>
	<h3 class="text-2xl font-bold text-gray-800">دبلوم التصميم الجرافيكي</h3>
	</div>
	<ul class="text-gray-600 space-y-2 mb-6">
	<li>• تصميم UI/UX للويب والموبايل</li>
	<li>• Adobe Creative Suite كاملاً</li>
	<li>• التصميم ثلاثي الأبعاد</li>
	<li>• بناء ملف أعمال احترافي</li>
	</ul>
	<div class="flex justify-between items-center">
	<span class="text-2xl font-bold text-purple-600">8 أشهر</span>
	<button onclick="showDetails('design')"
	class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition">
	التفاصيل
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Features Section -->
	<section id="features" class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">
	لماذا تختار الأكاديمية التقنية؟
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
	<div class="text-center" data-aos="fade-up" data-aos-delay="100">
	<div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="award" class="text-white w-8 h-8"></i>
	</div>
	<h3 class="text-xl font-bold mb-2">شهادات معتمدة</h3>
	<p class="text-gray-600">شهادات معتمدة دولياً من كبرى الجهات التعليمية</p>
	</div>

	<div class="text-center" data-aos="fade-up" data-aos-delay="200">
	<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="users" class="text-white w-8 h-8"></i>
	</div>
	<h3 class="text-xl font-bold mb-2">مدربون محترفون</h3>
	<p class="text-gray-600">خبراء في مجالاتهم مع خبرة عملية واسعة</p>
	</div>

	<div class="text-center" data-aos="fade-up" data-aos-delay="300">
	<div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="briefcase" class="text-white w-8 h-8"></i>
	</div>
	<h3 class="text-xl font-bold mb-2">فرص عمل مضمونة</h3>
	<p class="text-gray-600">شراكات مع كبرى الشركات لضمان التوظيف</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="py-20 gradient-bg">
	<div class="container mx-auto px-4 text-center text-white">
	<h2 class="text-4xl font-bold mb-8" data-aos="fade-up">
	تواصل معنا
	</h2>
	<p class="text-xl mb-8" data-aos="fade-up" data-aos-delay="200">
	هل لديك أسئلة؟ فريقنا جاهز للمساعدة
	</p>
	<div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8 md:space-x-reverse">
	<a href="tel:+966500000000" class="flex items-center space-x-2 space-x-reverse text-xl">
	<i data-feather="phone"></i>
	<span>0500000000</span>
	</a>
	<a href="mailto:info@academy.com" class="flex items-center space-x-2 space-x-reverse text-xl">
	<i data-feather="mail"></i>
	<span>info@academy.com</span>
	</a>
	</div>
	</div>
	</section>

	<!-- Modal -->
	<div id="detailsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
	<div class="flex items-center justify-center min-h-screen p-4">
	<div class="bg-white rounded-2xl p-8 max-w-2xl w-full">
	<div class="flex justify-between items-center mb-4">
	<h3 id="modalTitle" class="text-2xl font-bold"></h3>
	<button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
	<i data-feather="x" class="w-6 h-6"></i>
	</button>
	</div>
	<div id="modalContent" class="text-gray-600"></div>
	</div>
	</div>
	</div>

	<script>
	// Initialize Vanta.js background
	VANTA.GLOBE({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0x3f83f8,
	color2: 0x6366f1,
	size: 1.00,
	backgroundColor: 0x1e1b4b
	});

	// Scroll to diplomas
	function scrollToDiplomas() {
	document.getElementById('diplomas').scrollIntoView({ behavior: 'smooth' });
	}

	// Navbar scroll effect
	window.addEventListener('scroll', function() {
	const navbar = document.getElementById('navbar');
	if (window.scrollY > 100) {
	navbar.classList.add('bg-purple-900');
	navbar.classList.remove('glass-effect');
	} else {
	navbar.classList.remove('bg-purple-900');
	navbar.classList.add('glass-effect');
	}
	});

	// Mobile menu toggle
	function toggleMenu() {
	const menu = document.querySelector('nav .hidden');
	menu.classList.toggle('hidden');
	}

	// Show diploma details
	function showDetails(type) {
	const modal = document.getElementById('detailsModal');
	const title = document.getElementById('modalTitle');
	const content = document.getElementById('modalContent');

	const details = {
	english: {
	title: 'دبلوم اللغة الإنجليزية المهنية',
	content: `
	<p class="mb-4">برنامج متكامل لتطوير مهارات اللغة الإنجليزية المهنية يشمل:</p>
	<ul class="space-y-2 mb-4">
	<li>• 6 مستويات تدريبية من المبتدئ إلى المتقدم</li>
	<li>• 120 ساعة تدريبية لكل مستوى</li>
	<li>• محاضرات تفاعلية وجلسات نقاش</li>
	<li>• اختبارات شهرية وتقييم مستمر</li>
	<li>• شهادة معتمدة من الجمعية البريطانية</li>
	</ul>
	<p class="font-bold">الرسوم: 5000 ريال للمستوى الواحد</p>
	`
	},
	cyber: {
	title: 'دبلوم أمن السبرانية',
	content: `
	<p class="mb-4">برنامج متخصص في مجال الأمن السيبراني يغطي:</p>
	<ul class="space-y-2 mb-4">
	<li>• أساسيات الأمن السيبراني والتهديدات الرقمية</li>
	<li>• اختبار الاختراق والتحقيق الجنائي الرقمي</li>
	<li>• إدارة الحوادث الأمنية والاستجابة</li>
	<li>• التشفير وأمن الشبكات</li>
	<li>• إعداد لشهادات CEH وSecurity+ وCISSP</li>
	</ul>
	<p class="font-bold">الرسوم: 15000 ريال للبرنامج الكامل</p>
	`
	},
	programming: {
	title: 'دبلوم البرمجة وتطوير البرمجيات',
	content: `
	<p class="mb-4">برنامج شامل لتطوير البرمجيات يشمل:</p>
	<ul class="space-y-2 mb-4">
	<li>• أساسيات البرمجة بلغات متعددة</li>
	<li>• تطوير الويب Frontend وBackend</li>
	<li>• تطوير تطبيقات الموبايل</li>
	<li>• قواعد البيانات وإدارة البيانات</li>
	<li>• مشروع تخرج واقعي مع فريق عمل</li>
	</ul>
	<p class="font-bold">الرسوم: 20000 ريال للبرنامج الكامل</p>
	`
	},
	design: {
	title: 'دبلوم التصميم الجرافيكي',
	content: `
	<p class="mb-4">برنامج احترافي في التصميم الجرافيكي يشمل:</p>
	<ul class="space-y-2 mb-4">
	<li>• أساسيات التصميم ومبادئ التصميم الجرافيكي</li>
	<li>• Adobe Photoshop وIllustrator وInDesign</li>
	<li>• تصميم UI/UX للويب والموبايل</li>
	<li>• التصميم ثلاثي الأبعاد والرسوم المتحركة</li>
	<li>• بناء ملف أعمال احترافي للتوظيف</li>
	</ul>
	<p class="font-bold">الرسوم: 12000 ريال للبرنامج الكامل</p>
	`
	}
	};

	title.textContent = details[type].title;
	content.innerHTML = details[type].content;
	modal.classList.remove('hidden');
	}

	// Close modal
	function closeModal() {
	document.getElementById('detailsModal').classList.add('hidden');
	}

	// Initialize AOS
	AOS.init({
	duration: 1000,
	once: true
	});

	// Initialize Feather icons
	feather.replace();
	</script>
	</body>
	</html>