Spaces:
Running
Running
| <html lang="mn"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Хиймэл Оюуны Хичээлүүд - 2025</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #f0f9ff; | |
| } | |
| .grade-3-5 { | |
| border-color: #f59e0b; | |
| } | |
| .grade-3-5 .grade-header { | |
| background-color: #f59e0b; | |
| } | |
| .grade-6-9 { | |
| border-color: #3b82f6; | |
| } | |
| .grade-6-9 .grade-header { | |
| background-color: #3b82f6; | |
| } | |
| .grade-10-12 { | |
| border-color: #10b981; | |
| } | |
| .grade-10-12 .grade-header { | |
| background-color: #10b981; | |
| } | |
| .lesson-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .ai-icon { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-robot text-4xl mr-4 ai-icon"></i> | |
| <div> | |
| <h1 class="text-3xl font-bold">Хиймэл Оюуны Хичээлүүд</h1> | |
| <p class="text-blue-100">2025 оны хөтөлбөр</p> | |
| </div> | |
| </div> | |
| <nav class="flex space-x-1 md:space-x-4"> | |
| <a href="#lessons" class="px-3 py-2 rounded hover:bg-white hover:text-blue-600 transition">Хичээлүүд</a> | |
| <a href="#projects" class="px-3 py-2 rounded hover:bg-white hover:text-blue-600 transition">Төслүүд</a> | |
| <a href="#about" class="px-3 py-2 rounded hover:bg-white hover:text-blue-600 transition">Бидний тухай</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-6">Хиймэл оюуны ертөнцөд тавтай морилно уу!</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8"> | |
| Шинэ үеийн хэрэгслүүд, нээлттэй боломжуудыг ашиглан суралцах нь ирээдүйн боловсролын гол түлхүүр юм. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#lessons" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105"> | |
| Хичээлүүдээ үзэх <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| <a href="#projects" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105"> | |
| Төслүүд <i class="fas fa-lightbulb ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Grade Selection --> | |
| <section id="lessons" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ангилалаар сонгох</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Grade 3-5 --> | |
| <div class="grade-3-5 border-2 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="grade-header py-4 px-6 text-white"> | |
| <h3 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-child mr-3"></i> 3-5-р анги | |
| </h3> | |
| </div> | |
| <div class="bg-white p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Хүүхдүүдэд зориулсан хялбаршуулсан хичээлүүд, интерактив дасгалууд. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Хиймэл оюуны үндсэн ойлголт | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Зураг гаргах, дуу бичих | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Хялбар тоглоом хийх | |
| </li> | |
| </ul> | |
| <a href="#grade-3-5" class="mt-6 inline-block bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition"> | |
| Сонгох <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Grade 6-9 --> | |
| <div class="grade-6-9 border-2 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="grade-header py-4 px-6 text-white"> | |
| <h3 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-user-graduate mr-3"></i> 6-9-р анги | |
| </h3> | |
| </div> | |
| <div class="bg-white p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Илүү нарийн мэдлэг, практик дасгалууд, энгийн кодчилол. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Prompt бичих урлаг | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Vibe coding & Python | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Machine learning үндэс | |
| </li> | |
| </ul> | |
| <a href="#grade-6-9" class="mt-6 inline-block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition"> | |
| Сонгох <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Grade 10-12 --> | |
| <div class="grade-10-12 border-2 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="grade-header py-4 px-6 text-white"> | |
| <h3 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-user-tie mr-3"></i> 10-12-р анги | |
| </h3> | |
| </div> | |
| <div class="bg-white p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Мэргэжлийн чиглэлээр гүнзгийрүүлсэн хичээлүүд, бодит төслүүд. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Hugging Face Space | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Capstone project | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Мэдээлэл технологийн ирээдүй | |
| </li> | |
| </ul> | |
| <a href="#grade-10-12" class="mt-6 inline-block bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition"> | |
| Сонгох <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lessons for Grade 3-5 --> | |
| <section id="grade-3-5" class="py-12 bg-gradient-to-br from-yellow-50 to-orange-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-gray-800 flex items-center"> | |
| <i class="fas fa-child mr-3 text-yellow-600"></i> 3-5-р ангийн хичээлүүд | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Lesson 1 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-yellow-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 1: Хиймэл оюуны үндэс</h3> | |
| <p class="text-yellow-100">Gen AI</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Хиймэл оюуны талаар анх удаа танилцах, үндсэн ойлголтууд. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Хиймэл оюун гэж юу вэ?</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Өдөр тутмын амьдралд хэрхэн хэрэглэгддэг</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Хялбар жишээ туршилтууд</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-yellow-600 hover:text-yellow-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Lesson 2 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-yellow-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 2: Зураг гаргах AI</h3> | |
| <p class="text-yellow-100">Хүүхдэд зориулсан</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Хэрхэн AI ашиглан зураг гаргах, өнгөтэй тоглох. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Энгийн үгсээр зураг үүсгэх</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Өнгөний тухай ойлголт</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Онлайн хэрэгслүүд</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-yellow-600 hover:text-yellow-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Lesson 3 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-yellow-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 3: Дуу бичих AI</h3> | |
| <p class="text-yellow-100">Хөгжимтэй хичээл</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| AI ашиглан дуу үүсгэх, өөртөө зориулсан дуу хийх. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Дууны үгийг AI-д бичих</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Хөгжмийн стиль сонгох</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-500 mt-1 mr-2"></i> | |
| <span>Бүтээлээ хуваалцах</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-yellow-600 hover:text-yellow-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lessons for Grade 6-9 --> | |
| <section id="grade-6-9" class="py-12 bg-gradient-to-br from-blue-50 to-indigo-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-gray-800 flex items-center"> | |
| <i class="fas fa-user-graduate mr-3 text-blue-600"></i> 6-9-р ангийн хичээлүүд | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Lesson 1 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-blue-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 1: Prompt бичих урлаг</h3> | |
| <p class="text-blue-100">AI-тай харилцах гол түлхүүр</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Хэрхэн AI-д зориулж сайн заавар бичих, үр дүнгээ сайжруулах. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Prompt гэж юу вэ?</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Давуу болон сул талууд</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Бодит жишээнүүд</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-blue-600 hover:text-blue-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Lesson 2 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-blue-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 2: Vibe coding & Python</h3> | |
| <p class="text-blue-100">Програмчлалын үндэс</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Vibe coding гэж юу вэ? Python хэлний тухай үндсэн ойлголт. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Vibe coding-ийн тухай</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Python хэлний үндэс</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Энгийн төслүүд</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-blue-600 hover:text-blue-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Lesson 3 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-blue-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 3: Machine learning</h3> | |
| <p class="text-blue-100">Машин сургалтын үндэс</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Машин хэрхэн суралцах, анхны machine learning загвар. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Machine learning гэж юу вэ?</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Өгөгдөл боловсруулах</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Энгийн загвар үүсгэх</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-blue-600 hover:text-blue-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lessons for Grade 10-12 --> | |
| <section id="grade-10-12" class="py-12 bg-gradient-to-br from-green-50 to-teal-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-gray-800 flex items-center"> | |
| <i class="fas fa-user-tie mr-3 text-green-600"></i> 10-12-р ангийн хичээлүүд | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Lesson 1 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-green-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 1: Hugging Face Space</h3> | |
| <p class="text-green-100">AI апп хөгжүүлэх</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Hugging Face Space-ийн боломжуудтай танилцах, өөрийн AI апп хийх. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Hugging Face гэж юу вэ?</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Space үүсгэх</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Бодит төсөл хэрэгжүүлэх</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-green-600 hover:text-green-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Lesson 2 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-green-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 2: Capstone project</h3> | |
| <p class="text-green-100">Бүтээлч төсөл</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Суралцсан бүх зүйлээ ашиглан бүтээлч төсөл хэрэгжүүлэх. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Төслийн сэдэв сонгох</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Хэрэгжүүлэх</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Илтгэх, хуваалцах</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-green-600 hover:text-green-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Lesson 3 --> | |
| <div class="lesson-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="bg-green-500 p-4 text-white"> | |
| <h3 class="text-xl font-bold">Хичээл 3: Мэдээлэл технологийн ирээдүй</h3> | |
| <p class="text-green-100">Чиг хандлага, мэргэжил</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| AI технологийн ирээдүйн чиг хандлага, мэргэжлийн боломжууд. | |
| </p> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>AI-ийн ирээдүй</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Мэргэжлийн боломжууд</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Дэлхийн туршлага</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="text-green-600 hover:text-green-700 font-medium flex items-center"> | |
| Дэлгэрэнгүй <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-12 bg-purple-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Төслүүд</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Quiz Project --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-purple-600 p-6 text-white"> | |
| <h3 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-question-circle mr-3"></i> Хялбар шалгалтууд | |
| </h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Хичээл бүрийн дараа мэдлэгээ шалгах хялбар тестүүд. | |
| </p> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">3-5 анги</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">6-9 анги</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">10-12 анги</span> | |
| </div> | |
| <a href="#" class="mt-6 inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition"> | |
| Турших <i class="fas fa-play ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Capstone Project --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-indigo-600 p-6 text-white"> | |
| <h3 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-project-diagram mr-3"></i> Capstone төслүүд | |
| </h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4"> | |
| Оюутнуудын бүтээсэн AI төслүүд, бүтээлүүд. | |
| </p> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Зураг AI</span> | |
| <span class="bg-indigo-100 text-indigo-800 | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Myagmarsuren/test4web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |