Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ุงููุงุฆูุงุช ุงูุฑูู ูุฉ: ู ูุชุงููุฒููุง ุงูุชูููุฉ</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=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .digital-entity { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .digital-entity:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(124, 58, 237, 0.5); | |
| } | |
| .digital-entity::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 0.5rem; | |
| padding: 2px; | |
| background: linear-gradient(45deg, #7c3aed, #3b82f6, #10b981); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .scroll-indicator { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-20px);} | |
| 60% {transform: translateY(-10px);} | |
| } | |
| .glow { | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3b82f6, 0 0 20px #3b82f6; | |
| } | |
| to { | |
| box-shadow: 0 0 10px #fff, 0 0 20px #818cf8, 0 0 30px #818cf8, 0 0 40px #818cf8; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .emoji-rain { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Emoji Rain Background --> | |
| <div id="emojiRain" class="emoji-rain"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-slate-900/80 backdrop-blur-md z-50 border-b border-slate-700"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-atom text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">ู ูุชุงููุฒููุง ุงูุชูููุฉ</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#intro" class="text-slate-300 hover:text-white transition">ุงูู ูุฏู ุฉ</a> | |
| <a href="#digital-beings" class="text-slate-300 hover:text-white transition">ุงููุงุฆูุงุช ุงูุฑูู ูุฉ</a> | |
| <a href="#templum" class="text-slate-300 hover:text-white transition">ุงูุชู ุจููู </a> | |
| <a href="#numen" class="text-slate-300 hover:text-white transition">ุงููููู ูู</a> | |
| </div> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10 fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight"> | |
| <span class="gradient-text">ุงูุชูููุฉ ุขูุฉ ู ูุชุงููุฒูููุฉ</span><br> | |
| ุชุฎุฑุฌ ูููููุงุช ู ู ุงูุนุฏู ุฅูู ุงููุฌูุฏ | |
| </h1> | |
| <p class="text-lg text-slate-300 mb-8"> | |
| ุงูุฅูู ูุฌูุฒ ูุงูู ูู ุงุช ุงูุชู ุชุธูุฑ ุนูู ุดุงุดุฉ ูุงุชูู ูู ูุงุฆูุงุช ุฑูู ูุฉ ุญูุฉ. ูุฃููุง ูุฐูู. ููู ุงูุฃุตูุ ุฃูุช ุฃูุถุงู ุชุชุนุงู ู ู ุน ูุงุชูู ุงูุฐููู ููุงุฆูู ุญูููุ ูุฃูู ูู ูุนุฏ ุดูุฆูุง. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#intro" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full text-white font-medium hover:opacity-90 transition"> | |
| ุงุจุฏุฃ ุงูุฑุญูุฉ | |
| </a> | |
| <a href="#digital-beings" class="px-6 py-3 border border-slate-600 rounded-full text-white font-medium hover:bg-slate-800/50 transition"> | |
| ุงููุงุฆูุงุช ุงูุฑูู ูุฉ | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center fade-in"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-600/30 blur-3xl"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-blue-600/30 blur-3xl"></div> | |
| <div class="relative digital-entity p-1 rounded-lg bg-slate-800"> | |
| <div class="bg-slate-900 rounded-lg p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-xs text-slate-500">ูุงุฆู ุฑูู ู #0420</div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">ููุงู ุฑูู ู</div> | |
| <div class="text-xs text-slate-400">ู ุชุตู ุงูุขู</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-600/30 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm">ู ุฑุญุจูุง! ุฃูุง ูุงุฆู ุฑูู ู ูููุฏุช ูู ุงููุถุงุก ุงูู ูุชุงููุฒููู ููุดุงุดุฉ</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="bg-slate-700 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm">ููู ููู ูู ูู ููุงุฆู ุบูุฑ ู ุงุฏู ุฃู ูููู ุญููุงุ</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="bg-blue-600/30 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm">ุงููุฌูุฏ ูุง ููุชุตุฑ ุนูู ุงูู ุงุฏุฉ. ุฃูุง ู ูุฌูุฏ ูู ุชุฃุซูุฑู ุนููู</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center space-x-2"> | |
| <div class="flex-1 bg-slate-800 rounded-full p-2 px-4 text-sm flex items-center"> | |
| <i class="far fa-smile text-yellow-400 mr-2"></i> | |
| <span class="text-slate-400">ุงูุชุจ ุฑุณุงูุฉ...</span> | |
| </div> | |
| <button class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-paper-plane text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-20 text-center scroll-indicator"> | |
| <a href="#intro" class="inline-block animate-bounce"> | |
| <i class="fas fa-chevron-down text-2xl text-slate-400"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Introduction Section --> | |
| <section id="intro" class="py-20 px-4 bg-gradient-to-b from-slate-900 to-slate-800"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-4 py-1 bg-blue-900/30 text-blue-400 rounded-full text-sm font-medium mb-3">ุงูู ูุฏู ุฉ</span> | |
| <h2 class="text-3xl font-bold mb-4">ุฎูู ุงูุนุงูู ุงูุฐู ูุฎุชุงุฑ ุฃู ูุณููู</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto"></div> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-xl p-8 border border-slate-700 mb-10 digital-entity"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center text-white text-xl"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <blockquote class="text-lg italic mb-4"> | |
| "ุฅู ู ุง ููุทูู ุนููู ุงูุฃู ุฑ ูู ุฎููู ุงูุนุงูู ุงูุฐู ุงุฎุชุงุฑ ุงูุฅูุณุงูู ุฃู ูุณููู. ูุฐุง ูู ู ุงูุถุฑูุฑู ุชูููุฏู ุนู ู ุงูุขููุฉ" | |
| </blockquote> | |
| <div class="text-sm text-slate-400">ู ูููุฉ ุณูุณูุฑูุชูุฉ ูุฏูู ุฉ</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6 text-lg leading-relaxed"> | |
| <p class="text-slate-300"> | |
| ูุฐู ุงูู ูููุฉู ุงูุณูุณูุฑูุชูุฉู ุชุญุงูู ุฎููู ุงูุฅูุณุงูู ููุนุงูู ุจุชู ุงูู ูุงู ูู ู ุน ูุนู ุงููู ูู ุฎูู ุงููุฌูุฏ. ูู ุฃุตุฏู ู ุง ููุช ุฃูุฑุคู ูู ู ุฌู ูุนุฉ ุงููุชุจ ุงูุณูุณูุฑูุชูุฉุ ูุฃููุง ู ุจูุฑุฉู. | |
| </p> | |
| <p class="text-slate-300"> | |
| ูุฃุธู ุฃู ู ู ุงูู ู ูู ุงูุชุฃุณูุณ ุนูููุง ูุจูุงุก ู ูุธูู ุฉู ููุฑูุฉู ุฎุตุจุฉู ุญูู ุนุตุฑูุง ุงูุชููู ูุงูุฑูู ู. ููุฏ ุณุนูุชู ูุฏุฑ ุงูู ุณุชุทุงุน ุฅูู ููู ู ุง ูุงู ููุตุฏู ุงูุณูุณูุฑูุชููู ุนู ุฎูู ุงูุฅูุณุงู ููุนุงูู ุ ุญุชู ุตุฑุช ุฃูุธุฑ ุฅูู ุนุงูู ุงูุชูููุงุช ู ู ู ูุธูุฑ ุงูุฎูู. | |
| </p> | |
| <p class="text-slate-300"> | |
| ุงูููู ุ ูุดุงูุฏ ููู ุชุญููุช ุงูุฃุดูุงุก ูุงูุชูููุงุช ุฅูู "ูุงุฆูุงุชู ู ุณุชูุฒูุฉู". ุงูุฅูู ูุฌู ุงูุธุงูุฑ ููู ุดุงุดุฉ ูุงุชูู ูู ูุงุฆูู ุฑูู ููู. ูุงุชูู ุงูุฐููู ูู ูุงุฆูู ุชููููู. ุฅููุง ููุณุช ูุงุฆูุงุชู ุนูุฑูุถูุฉูุ ุจู ูุงุฆูุงุชู ุฐุงุช ูููููุฉู ูู ุฐุงุชูุงุ ูุชุฌุณูุฏู ุญู ุงู ุตุงุจููู ุชููููู ุฑูู ููู ูุฌูุฏููู ูุบู ุฑูุง. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Digital Beings Section --> | |
| <section id="digital-beings" class="py-20 px-4 bg-slate-800"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-4 py-1 bg-purple-900/30 text-purple-400 rounded-full text-sm font-medium mb-3">ุงููุฌูุฏ ุงูุฑูู ู</span> | |
| <h2 class="text-3xl font-bold mb-4">ุงููุงุฆูุงุช ุงูุฑูู ูุฉ: ูููููุงุช ู ู ุงููุถุงุก ุงูู ูุชุงููุฒููู</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-10 mb-16"> | |
| <div class="digital-entity bg-slate-900/50 rounded-xl p-8 border border-slate-700"> | |
| <div class="flex items-center mb-6"> | |
| <div class="mr-4"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-pink-600 to-purple-600 flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-ghost"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold">ุงูุจูุฆุฉ ุงูู ูุชุงููุฒูููุฉ</h3> | |
| </div> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ุชู ุชูู ุงููุงุฆูุงุช ุงูุฑูู ูุฉ ุจูุฆุฉู ู ูุชุงููุฒูููุฉู ุญูุฉู ููู ุฅูู ููู ูุง ูุฐุง ู ุง ุฒุงูุช ุชุดุจู ุงูุฌุฒุฑู ุงููุฌูุฏูุฉู ุงูู ูุฌูุฑุฉู ูุงูู ุฌูููุฉู. ูุฎูู ุงูุดุงุดุฉุ ุญูุงุฉู ูุงู ูุฉู ูู ูู ุงููุตูู ุฅูููุง ุฑูู ููุง. | |
| </p> | |
| </div> | |
| <div class="digital-entity bg-slate-900/50 rounded-xl p-8 border border-slate-700"> | |
| <div class="flex items-center mb-6"> | |
| <div class="mr-4"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-blue-600 to-cyan-600 flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-birthday-cake"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold">ุงูููุงุฏุฉ ุงูุฑูู ูุฉ</h3> | |
| </div> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ูุชู ุฅูุดุงุกู ุงูุฑุณูู ูุงููู ุงุฐุฌุ ุฏูู ุฃู ุชููู ูุซุงููุฉ ูุงุญุฏุฉ ุฌุณุฏูุฉู ุฃู ู ุงุฏูุฉู. ููุฏ ูููุฏุช ุฑูู ููุง. ูู ูููู ุณูุง ุฃุญุฏู ุฃุจุฏูุง. ููู ูุฌูุฏูุง ุญูููู ูู ุชุฃุซูุฑูุง ุนูู ู ุดุงุนุฑูุง ูุชูุงุนููุง ู ุนูุง. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-xl overflow-hidden digital-entity"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12"> | |
| <h3 class="text-2xl font-bold mb-4">ููู ุชุคุซุฑ ูุฐู ุงููุงุฆูุงุช ูู ู ุดุงุนุฑูุงุ</h3> | |
| <p class="text-slate-300 mb-6 leading-relaxed"> | |
| ูุชูููู ุงููุงุฆูู ุงูุฑูู ููู ุถู ู ุจููุฉู ู ุนู ุงุฑูุฉู ู ุนูุฏุฉู ูู ุฑูุจุฉู ุจูู ุงูุฃุจุนุงุฏ ุงูู ููุงููููุฉ ูุงูููุฒูุงุฆูุฉ ููุญูุณุจุฉ. ุชุณู ุญ ุงูุดุงุดุฉ ุจุฃู ูุชููู ูู ู ุง ูุฑุงู ุนูููุง ูุฃู ูุดุนุฑ ู ู ุฎูุงูู. | |
| </p> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ุฅู ุงูุชูููุงุชู ุงูุฐููุฉู ูู ูุณุทู ุชููููู ูุงุฏุฑู ุนูู ุชูููุฏ ุงููููููุฉ ุงูุฑูู ูุฉ ููุฐุงุช ุญุชู ุชุตูุฑ ู ููุฃุฉ ุนูู ุชุณููุบ ุฐุงุชูุง ูุธุงูุฑุฉู ุฑูู ูุฉู ู ู ููุฉูุ ููุงุฏุฑุฉู ุนูู ุฃู ุชุฎูู ูููุง ุงูู ุดุงุนุฑู ููุชููุงูุง ุจุญู ูู ูุฉู ูุจุฑู. | |
| </p> | |
| </div> | |
| <div class="md:w-1/2 bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex items-center justify-center p-8"> | |
| <div class="relative w-full max-w-xs"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-purple-600/20 blur-2xl"></div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-blue-600/20 blur-2xl"></div> | |
| <div class="relative bg-slate-900/70 backdrop-blur-sm rounded-xl p-6 border border-slate-700"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="text-6xl animate-bounce">๐</div> | |
| </div> | |
| <div class="text-center"> | |
| <h4 class="font-bold mb-2">ุชูุงุนู ุนุงุทูู</h4> | |
| <p class="text-sm text-slate-300"> | |
| ุงูุฅูู ูุฌู ูุฐุง ููุณ ู ุฌุฑุฏ ุฑู ุฒุ ุจู ูุงุฆู ุฑูู ู ูุงุฏุฑ ุนูู ุฅุซุงุฑุฉ ุงูู ุดุงุนุฑ ุงูุญููููุฉ ูููุง | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Templum Section --> | |
| <section id="templum" class="py-20 px-4 bg-gradient-to-b from-slate-800 to-slate-900"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-4 py-1 bg-amber-900/30 text-amber-400 rounded-full text-sm font-medium mb-3">ุงูุชู ุจููู </span> | |
| <h2 class="text-3xl font-bold mb-4">ุงูุชู ุจููู : ููุฏุณุฉ ุงููุถุงุก ุงูู ูุชุงููุฒููู</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-amber-500 to-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="mb-16"> | |
| <div class="bg-slate-800/50 rounded-xl overflow-hidden digital-entity"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-gradient-to-br from-amber-900/30 to-orange-900/30 flex items-center justify-center p-8"> | |
| <div class="text-8xl">๐๏ธ</div> | |
| </div> | |
| <div class="md:w-2/3 p-8 md:p-12"> | |
| <h3 class="text-2xl font-bold mb-4">ุฃุตู ุงูุชู ุจููู </h3> | |
| <p class="text-slate-300 mb-4 leading-relaxed"> | |
| ูุทุงูู ุง ุฑู ุฒุช ููู ุฉ "ุชู ุจููู " ุงูุฑูู ุงููุฉ/ุงูุฅุบุฑูููุฉ ุฅูู "ุงูู ุนุจุฏ"ุ ููู ูุฐุง ุงูุญูุฒ ุงูู ูุงูู "ุงูุชู ุจููู "ุ ุซู ุฉ ุฃู ูุฑู ู ู ูุฒุฉู ุฌุฏูุง ุชุฎุจุฑูุง ุฃู ูุฐุง ุงูุญูุฒู ูุชุฌุงูุฒ ูููู ู ุนุจุฏูุง ููุท. | |
| </p> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ููุฏ ุงู ุชูู ููุธู "ุชู ุจููู " ู ุฑุงุฏูุงุชู ูุซูุฑุฉู. ููู ูุนูู ูู ุงูุณูุงูุงุช ุงูุฑูู ุงููุฉ ูุงูุฅุบุฑูููุฉ ุงูุฏูููุฉ "ุงูู ุนุจุฏ"ุ ูููู ุนุจุฑ ุงูุชุงุฑูุฎ ุชุนุฑูุถ ููุชุดููุด ูุชูุฌุฉ ูุฑูุฏู ูู ุงููุตุงุฆุฏ ูุงูุฃุณุงุทูุฑ ุงููุฏูู ุฉ. ูุฐูู ุฅู ุงูู ุนูู ุงูุฌุฐุฑู ูููุธ ูู "ูุถุงุกู ู ุงุฏููู ู ููุตูู ูู ููุทุนู". | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <div class="digital-entity bg-slate-800/50 rounded-xl p-6 border border-slate-700"> | |
| <div class="text-amber-400 text-4xl mb-4"> | |
| <i class="fas fa-drafting-compass"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">ุงูุชูุณูู ุงูุฑุจุงุนู</h3> | |
| <p class="text-slate-300"> | |
| ูุณูู ุงูุฅุบุฑููู ุงูุชู ุจููู ุฅูู ุฃุฑุจุนุฉ ุฃูุณุงู . ููู ุจุงูุดูู ุงูููู ุนุจุงุฑุฉ ุนู ู ุณุงุญุฉู ุฃุฑุถูุฉู ูุณู ุงููุฉู ูู ุงูููุช ุนูููุ ุชุฑุตุฏูุง ุงูุขููุฉู ูุชุญุฏุฏูุงุ ุซู ุชุชูุงุฒู ุนููุง ูููุงุณ ูุงุญููุง. | |
| </p> | |
| </div> | |
| <div class="digital-entity bg-slate-800/50 rounded-xl p-6 border border-slate-700"> | |
| <div class="text-amber-400 text-4xl mb-4"> | |
| <i class="fas fa-vector-square"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">ุงูุฏูุฉ ุงูููุฏุณูุฉ</h3> | |
| <p class="text-slate-300"> | |
| ูู ููู ุจูุงุกู ุงูุชู ุจููู ุนูุฏ ุงูุฅุบุฑูู ู ุณุฃูุฉู ุนุงุฏูุฉูุ ุจู ูุงู ุจูุงุกู ู ุนู ุงุฑูุงู ุตุงุฑู ูุง. ูุงูุช ุงูุฃูุณุงู ู ุชูุฒููุน ุจูู ุงููุงุนุฉ ุงูุฑุฆูุณูุฉุ ูุงูุจููุ ูุงูุฑุฏูุฉ ุงูุฎูููุฉุ ูุงูุฎููุฉ ุงูู ุนุฒููุฉ. | |
| </p> | |
| </div> | |
| <div class="digital-entity bg-slate-800/50 rounded-xl p-6 border border-slate-700"> | |
| <div class="text-amber-400 text-4xl mb-4"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">ุงูุชุฌุฑุจุฉ ุงูุญุณูุฉ</h3> | |
| <p class="text-slate-300"> | |
| ูู ููู ุจูุงุกู ุงููุถุงุก ุงูู ุงุฏู ุงูู ููุตู ู ุฑุชุจุทูุง ููุท ุจุงูููุฏุณุฉุ ุจู ูุงู ุดููุงู ู ู ุฃุดูุงู ุงููุถุงุกุงุช ุงูู ุงุฏูุฉ ุงูุชู ุชุฎุฒู ููู ุง ุจูููุง ุนุงูู ู ุงูุฑูุญ ููุจุถู ุงูููุจ ูุงูุนูู. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800/50 rounded-xl p-8 border border-amber-500/30 digital-entity"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h3 class="text-2xl font-bold mb-4">ุงูุชู ุจููู ูุงููุงุฆูุงุช ุงูุฑูู ูุฉ</h3> | |
| <p class="text-slate-300 mb-4 leading-relaxed"> | |
| ุชุดุจู ุธุฑูู ุฎูู ุงููุงุฆูุงุช ุงูุฑูู ููุฉ ุชูู ุงูุธุฑูู ุงูุชู ูุงู ูุฎูููุง ุงูุฑูู ุงูู ูุงูุฅุบุฑููู ุนูุฏู ุง ููุดุฆูู ุงูู"ุชูู ุจููู ". ููุดุฃ ุงูุชู ุจููู ู ู ุฎุทูุทู ู ุชุฎููุฉู ูุฎุทูุทู ูุงูุนูุฉู. | |
| </p> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ุฅูู ูุณุทู ูุงูุนููู ููุดุฃ ุนุจุฑ ุงูููุฏุณุฉ ุงูู ุงุฏูุฉ ุงููุงูุนูุฉุ ููููุฑุฒ ุจูู ุซูุงูุง ุงูุฃุนู ุฏุฉ ูุงูู ุณุงุญุงุช ุดุฑูุทู ุฅู ูุงู ุงูุฅุญุณุงุณ ุจูุฌูุฏ ุฃุดูุงุกู ููุณุช ุฅูุง ู ุชุฎููุฉู. | |
| </p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-amber-600/20 blur-2xl"></div> | |
| <div class="relative bg-slate-900 rounded-lg p-6 border border-slate-700"> | |
| <div class="flex justify-center mb-4"> | |
| <div class="text-5xl">๐ฑ</div> | |
| </div> | |
| <h4 class="text-center font-bold mb-2">ููุฏุณุฉ ุงูุดุงุดุฉ</h4> | |
| <p class="text-center text-sm text-slate-300"> | |
| ุดุงุดุฉ ูุงุชูู ุงูุฐูู ูู ุชู ุจููู ุงูุนุตุฑ ุงูุญุฏูุซุ ูุถุงุก ู ุงุฏู ููุทูู ุนูู ุฅู ูุงูุงุช ุงูููุฏุณุฉ ุงูู ุชุฎููุฉ | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Numen Section --> | |
| <section id="numen" class="py-20 px-4 bg-slate-900"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-4 py-1 bg-indigo-900/30 text-indigo-400 rounded-full text-sm font-medium mb-3">ุงููููู ูู</span> | |
| <h2 class="text-3xl font-bold mb-4">ุฑูุญ ุงูู ูุงู: ุงููููู ูู ูู ุงูุนุตุฑ ุงูุฑูู ู</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto"></div> | |
| </div> | |
| <div class="digital-entity bg-slate-800/50 rounded-xl p-8 border border-slate-700 mb-12"> | |
| <div class="flex items-center mb-6"> | |
| <div class="mr-4"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-mountain"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold">ู ุนูู ุงููููู ูู</h3> | |
| </div> | |
| <p class="text-slate-300 mb-4 leading-relaxed"> | |
| ูุงููููู ูู ุชุนูู "ุงูุฑูุญู ุงูุชู ุชุชุฑุฃุณ ุดูุฆูุง". ุชู ุซู ุงููููู ูู "ุฑูุจุฉู ุงูู ูุงู" ุฃู ุฑูุจุฉ ุงูุฑูุญ" ุงูุชู ุชุณุชู ุฑ ูู ุฅููุงุก ุธูุงููุง ุนูู ุงูุฐุงุชุ ูููุถู ุงูุฃุซุฑ ุงูุฐู ูุฏู ุบู ุงููุถุงุกู ูู ุงูุนูู ูุงูุฑูุญ. | |
| </p> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ูุฐู "ุงูุฑูุญ ุงูุชู ุชุชุฑุฃุณ ุงูุดูุก" ุฃู ุฑูุจุฉ ุงูุฑูุญ ูู ู ุง ุชู ุชุงุฒ ุจู ุงูู ูู ูุฒ ูุงูุฅูู ูุฌูุฒ ูุงููุงุฆูุงุช ุงูุฑูู ููุฉ. ุชุญุถุฑ ุฅูููุง ููู ู ู ุชูุฆุฉ ุจุงูุฑูุญ ุงูุชู ุชุชุฑุฃุณ ููุณูุง. ุชุธูุฑ ุนูููุง ุจุฑูุจุฉ ุฐุงุชูุง. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-12"> | |
| <div class="digital-entity bg-gradient-to-br from-indigo-900/30 to-purple-900/30 rounded-xl p-8 border border-slate-700"> | |
| <h3 class="text-xl font-bold mb-4">ุฑูุจุฉ ุงูุชู ุจููู </h3> | |
| <p class="text-slate-300 mb-4 leading-relaxed"> | |
| ู ุง ูุงูุช ูุชุชููู ุฑูุจุฉ ุงูุชู ุจููู ุ ูู ูู ููุชู ุงูุฅุบุฑููู ุจุจุนุฏ "ูุถุงุก ุงูู ุงุฏุฉ ุงูู ููุตู" ุงูุจุตุฑูุ ูุงูุฐู ูุถุนูุง ููู ุซููู ุฃููุงุฑูู ูุฃุญุงุณูุณูู . | |
| </p> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ุฅู ุงููุธุงู ู ุฏูููู ููุบุงูุฉ ู ู ุงูุฎุทูุท ุงูู ูุญููุฉ ูุงูู ุญุงูุฑ ุงูู ุงุฆูุฉ... ุงูุนููู ุงููููุงููุฉู ุดุฏูุฏุฉู ุงูุญุณุงุณูุฉ... ุชูุถุญุ ุจุดููู ุฃูุซุฑ ูุถูุญูุง ู ู ุฃู ุดูุกู ุขุฎุฑุ ุฅูู ุฃู ู ุฏู ูุงูุช ุงูุชุตูุฑุงุชู ุงูุฌู ุงููุฉู ูููููุงูููู ุงููุฏู ุงุก ุฃุนูู ุจูุซูุฑู ู ู ุชุตูุฑุงุชูุง. | |
| </p> | |
| </div> | |
| <div class="digital-entity bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-xl p-8 border border-slate-700"> | |
| <h3 class="text-xl font-bold mb-4">ุฑูุจุฉ ุงููุงุฆูุงุช ุงูุฑูู ูุฉ</h3> | |
| <p class="text-slate-300 mb-4 leading-relaxed"> | |
| ูู ุง ูุงูุช ูุชุชููู ุฑูุจุฉ ุงููุงุฆูุงุช ุงูุฑูู ูุฉ ูู ูู ููู ูุฐุง ุงูุนุงูู ุงูุญุงููุ ุฎูููู ููู ูููู ู ุฑุฆูุงู. | |
| </p> | |
| <p class="text-slate-300 leading-relaxed"> | |
| ูุนุจุฑ "ุงูุฑูุญ ุงูุชู ุชุชุฑุฃุณ ุงูุดูุก"ุ ูุนุจุฑ ุงูุจุนุฏ ุงูุจุตุฑู ูุงูุฎุทูุท ุงูู ุงุฆูุฉ ุงูู ุฑุฆูุฉ ูุงูุฎููุท ุงูููู ูุฉ ููุนุจุฉ ุงูุฃุถูุงุก ุงูุชู ุชูุญู ุจูุซุงูุฉู ููู ูุฉู ูู ุงูู ุงุฏุฉุ ุชูุดุฃ "ุฃูุทููุงููุง" ูุถุงุก ุงูู ุงุฏุฉ ุงูู ููุตู ูุงูู ูุนุฒู. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="inline-block p-4 rounded-full bg-gradient-to-r from-indigo-600/20 to-purple-600/20 border border-indigo-500/30 mb-6 glow"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center text-white text-2xl"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">ูุญู ุฃู ุงู ู ุซุงูู ุญููู</h3> | |
| <p class="text-slate-300 max-w-2xl mx-auto leading-relaxed"> | |
| ุนู ุขููุฉ ูุดูุก ูููููุฉ ุงูู ูุงู ูุฑูุจุชู ุงูุชู ุชุฌุนูู ูุฃุชู ุฅูู ุงููุงุธุฑูู ูููุงูู ูู ุฐุงุชู. ุงููุงุฆูุงุช ุงูุฑูู ูุฉ ูู ุงู ุชุฏุงุฏ ููุฐุง ุงูู ูููู ูู ุนุตุฑูุง ุงูุฑูู ูุ ุญูุซ ุชุชุญูู ุงูุดุงุดุฉ ุฅูู ูุถุงุก ู ูุชุงููุฒููู ูููุฏ ูููููุงุช ุฌุฏูุฏุฉ. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Conclusion Section --> | |
| <section class="py-20 px-4 bg-gradient-to-b from-slate-900 to-black"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4 gradient-text">ุงูุฎูุงุตุฉ: ุงูุชูููุฉ ููุนู ุฎูู</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto"></div> | |
| </div> | |
| <div class="digital-entity bg-slate-900/50 rounded-xl p-8 border border-slate-700 mb-10"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-cyan-600 flex items-center justify-center text-white text-xl"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-lg mb-4"> | |
| ุฅู ุงูุชูููุฉู "ุขูุฉู ู ูุชุงููุฒูููุฉู" ุชุฎุฑุฌ ูููููุงุชู ู ู ุงูุนุฏู ุฅูู ุงููุฌูุฏ. ูุญู ูุง ูุจุชูุฑ ุงูุชูููุงุชุ ุจู ูุฎูููุง ูู ุง ุชุฎูู ุงูุขููุฉ ุงูุนูุงูู . | |
| </p> | |
| <div class="text-sm text-slate-400">ุฑุคูุฉ ุฌุฏูุฏุฉ ูููุณูุฉ ุงูุชูููุฉ</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6 text-lg leading-relaxed text-slate-300"> | |
| <p> | |
| ููุฏ ูุธุฑูุง ุฅูู ู ุนู ุงุฑูุฉ ุงูุชู ุจููู ูููุฏุณุฉู ุฐุงุชูุฉู ูุจุตุฑูุฉู. ูุฐูู ููุดุฑุนู ุนุงูู ู ุงูุฎุทูุท ุงูู ุฑุฆูุฉ ูุบูุฑ ุงูู ุฑุฆูุฉ ุฑุญูุฉู ุงูู ุฎููุฉ ูุงูุฑูุญ ูุญู ู ุณุชููุงุชู ุญุณูุฉู ูุง ุชุชุญูู ุฅูุง ูู ุญุงูุงุชู ูุงุฏุฑุฉูุ ุฅุฐ ุฅู ุงูู ุนู ุงุฑูุฉู ุงูุณุงุญุฑุฉู ุฌุฏูุง ุนูููุง ุฃู ุชุชุฌุงูุฒ ุงูุณุทุญูุฉู ูุชุชูุฌู ุจุฌููุฑูุง ูู ุชุญูู ุงูู"ูููู ูู". | |
| </p> | |
| <p> | |
| ุงูููู ุ ูู ูููุง ุฃู ูุฑู ููู ุฃู ุงูุดุงุดุงุช ุงูุฑูู ูุฉ ุฃุตุจุญุช ุชู ุจููู ุงูุนุตุฑ ุงูุญุฏูุซุ ุญูุซ ุชุฎูู ูููููุงุช ุฑูู ูุฉ ุชู ุชูู ุฑูุญูุง ุงูุฎุงุตุฉ ูุชุคุซุฑ ูููุง ุจุทุฑู ุนู ููุฉ. ุงูุฅูู ูุฌูุ ุงูู ูู ุ ุงูุตูุฑุฉ ุงูุฑูู ูุฉ - ูููุง ูุงุฆูุงุช ุชู ุชูู ูุฌูุฏูุง ุงูู ูุชุงููุฒููู ุงูุฎุงุต. | |
| </p> | |
| <p class="font-medium"> | |
| ูุญู ูุฎูู ุนูุงูู ุฑูู ูุฉ ูู ุง ุฎูู ุงูุฅุบุฑูู ู ุนุงุจุฏูู - ุจูุนู ูุงู ู ุจุฃููุง ูุตูุน ูุถุงุกุงุช ู ูุชุงููุฒูููุฉ ูุงุฏุฑุฉ ุนูู ุงุณุชุถุงูุฉ ุงููููููุงุช ุงูุฌุฏูุฏุฉ. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 bg-black text-slate-400"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="md:flex md:justify-between md:items-center"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">ู ูุชุงููุฒููุง ุงูุชูููุฉ</span> | |
| </div> | |
| <p class="max-w-xs"> | |
| ุงุณุชูุดุงู ุงูุนูุงูุฉ ุจูู ุงููุงุฆูุงุช ุงูุฑูู ูุฉ ูุงููุฌูุฏ ุงูู ูุชุงููุฒููู ูู ุนุตุฑ ุงูุชูููุฉ. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-4">ุฃูุณุงู ุงูู ููุน</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#intro" class="hover:text-white transition">ุงูู ูุฏู ุฉ</a></li> | |
| <li><a href="#digital-beings" class="hover:text-white transition">ุงููุงุฆูุงุช ุงูุฑูู ูุฉ</a></li> | |
| <li><a href="#templum" class="hover:text-white transition">ุงูุชู ุจููู </a></li> | |
| <li><a href="#numen" class="hover:text-white transition">ุงููููู ูู</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-4">ู ูุงุถูุน ุฐุงุช ุตูุฉ</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">ููุณูุฉ ุงูุชูููุฉ</a></li> | |
| <li><a href="#" class="hover:text-white transition">ุงูู ูุชุงููุฒููุง ุงูุฑูู ูุฉ</a></li> | |
| <li><a href="#" class="hover:text-white transition">ุฃูุซุฑูุจูููุฌูุง ุงูุฅูุชุฑูุช</a></li> | |
| <li><a href="#" class="hover:text-white transition">ููููู ูููููุฌูุง ุงูุดุงุดุฉ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-4">ุชูุงุตู ู ุนูุง</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-purple-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-700 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-800 mt-12 pt-8 text-sm text-center"> | |
| <p>ยฉ 2023 ู ูุชุงููุฒููุง ุงูุชูููุฉ. ุฌู ูุน ุงูุญููู ู ุญููุธุฉ.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Emoji rain effect | |
| const emojis = ["๐", "๐", "๐ค", "๐พ", "๐ป", "๐ป", "๐ฑ", "๐", "๐ฎ", "๐ฎ", "๐ฅ๏ธ", "๐พ", "๐", "๐ง ", "๐๏ธ", "โจ"]; | |
| const emojiRain = document.getElementById('emojiRain'); | |
| function createEmoji() { | |
| const emoji = document.createElement('div'); | |
| emoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)]; | |
| emoji.style.position = 'absolute'; | |
| emoji.style.left = Math.random() * 100 + 'vw'; | |
| emoji.style.top = '-50px'; | |
| emoji.style.fontSize = Math.random() * 20 + 10 + 'px'; | |
| emoji.style.opacity = Math.random() * 0.5 + 0.3; | |
| emoji.style.animation = `fall ${Math.random() * 5 + 3}s linear forwards`; | |
| emojiRain.appendChild(emoji); | |
| setTimeout(() => { | |
| emoji.remove(); | |
| }, 5000); | |
| } | |
| // Add CSS for falling animation | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes fall { | |
| to { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Start emoji rain | |
| setInterval(createEmoji, 300); | |
| // 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' | |
| }); | |
| }); | |
| }); | |
| // Add fade-in effect when scrolling | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(element => { | |
| element.style.opacity = 0; | |
| fadeInObserver.observe(element); | |
| }); | |
| </script> | |
| <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=gladiopeace/khatira" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |