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> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| olive: { | |
| 50: '#f8f5e8', | |
| 100: '#eeead5', | |
| 200: '#d8d1a8', | |
| 300: '#c0b67d', | |
| 400: '#a89e5a', | |
| 500: '#8a8240', | |
| 600: '#6b6533', | |
| 700: '#504b28', | |
| 800: '#3a3620', | |
| 900: '#2a2719', | |
| }, | |
| primary: '#a89e5a', | |
| secondary: '#8a8240', | |
| accent: '#6b6533', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> | |
| <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'); | |
| :root { | |
| --primary: #a89e5a; | |
| --secondary: #8a8240; | |
| --dark: #2a2719; | |
| --light: #f8f5e8; | |
| --accent: #6b6533; | |
| } | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: var(--dark); | |
| color: var(--light); | |
| line-height: 2; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232a2719"/><path d="M0 0 L100 100 M100 0 L0 100" stroke="%236b6533" stroke-width="0.5" opacity="0.1"/></svg>'); | |
| } | |
| .article-container { | |
| max-width: 900px; | |
| margin: 4rem auto; | |
| padding: 3rem; | |
| background: rgba(42, 39, 25, 0.92); | |
| backdrop-filter: blur(12px); | |
| border-radius: 24px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); | |
| border: 1px solid rgba(168, 158, 90, 0.2); | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 10; | |
| } | |
| .article-container::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at 70% 30%, rgba(168, 158, 90, 0.1) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| font-weight: 900; | |
| border-bottom: 2px solid var(--primary); | |
| padding-bottom: 1.5rem; | |
| color: var(--light); | |
| text-shadow: 0 0 15px rgba(168, 158, 90, 0.4); | |
| margin-bottom: 2rem; | |
| position: relative; | |
| line-height: 1.3; | |
| } | |
| h1::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -2px; | |
| right: 0; | |
| width: 200px; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary), transparent); | |
| } | |
| h2 { | |
| color: var(--primary); | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin: 3rem 0 1.5rem; | |
| position: relative; | |
| padding-right: 20px; | |
| } | |
| h2::before { | |
| content: "//"; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| color: var(--secondary); | |
| font-family: monospace; | |
| font-weight: 400; | |
| } | |
| p { | |
| font-size: 1.1rem; | |
| margin-bottom: 1.8rem; | |
| text-align: justify; | |
| hyphens: auto; | |
| color: rgba(248, 245, 232, 0.9); | |
| } | |
| .meta { | |
| color: var(--primary); | |
| font-style: italic; | |
| margin-bottom: 3rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| font-size: 1.1rem; | |
| } | |
| .meta i { | |
| font-size: 1.2rem; | |
| } | |
| figure { | |
| margin: 3rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 16px; | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); | |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| transform: translateY(20px); | |
| opacity: 0; | |
| isolation: isolate; | |
| border: 1px solid rgba(168, 158, 90, 0.2); | |
| } | |
| figure.visible { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| figure:hover { | |
| transform: scale(1.02) translateY(0); | |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); | |
| } | |
| figure img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: transform 0.5s ease; | |
| object-fit: cover; | |
| } | |
| figure:hover img { | |
| transform: scale(1.05); | |
| } | |
| figcaption { | |
| font-size: 0.95rem; | |
| color: var(--light); | |
| padding: 1rem; | |
| background: rgba(42, 39, 25, 0.7); | |
| text-align: right; | |
| border-top: 1px solid rgba(168, 158, 90, 0.3); | |
| } | |
| .digital-entity { | |
| position: relative; | |
| display: inline-block; | |
| color: var(--primary); | |
| font-weight: 500; | |
| cursor: default; | |
| transition: all 0.3s ease; | |
| } | |
| .digital-entity:hover { | |
| color: var(--light); | |
| text-shadow: 0 0 8px rgba(168, 158, 90, 0.6); | |
| } | |
| .glow { | |
| animation: glow 3s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| text-shadow: 0 0 5px var(--light), 0 0 10px var(--light); | |
| } | |
| to { | |
| text-shadow: 0 0 10px var(--light), 0 0 20px var(--primary), 0 0 30px var(--secondary); | |
| } | |
| } | |
| .emoji-float { | |
| position: fixed; | |
| font-size: 2.5rem; | |
| opacity: 0; | |
| animation: float 15s linear infinite; | |
| z-index: 5; | |
| text-shadow: 0 0 10px rgba(168, 158, 90, 0.5); | |
| cursor: default; | |
| user-select: none; | |
| pointer-events: none; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) rotate(0deg) scale(0.8); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) rotate(360deg) scale(1.2); | |
| opacity: 0; | |
| } | |
| } | |
| .scroll-indicator { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| color: var(--primary); | |
| font-size: 2.5rem; | |
| animation: bounce 2s infinite; | |
| cursor: pointer; | |
| z-index: 100; | |
| background: rgba(42, 39, 25, 0.7); | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| border: 2px solid var(--primary); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| backdrop-filter: blur(5px); | |
| } | |
| .scroll-indicator.visible { | |
| opacity: 1; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { | |
| transform: translateY(0) translateX(-50%); | |
| } | |
| 40% { | |
| transform: translateY(-20px) translateX(-50%); | |
| } | |
| 60% { | |
| transform: translateY(-10px) translateX(-50%); | |
| } | |
| } | |
| .pixel-grid { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(rgba(42, 39, 25, 0.95), rgba(42, 39, 25, 0.95)), | |
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="1" height="1" x="0" y="0" fill="%23a89e5a" opacity="0.05"/></svg>'); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .digital-rain { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 2; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .digital-rain span { | |
| position: absolute; | |
| width: 1px; | |
| height: 30px; | |
| background: linear-gradient(to bottom, transparent, var(--primary), transparent); | |
| animation: rain 5s linear infinite; | |
| opacity: 0.6; | |
| } | |
| @keyframes rain { | |
| 0% { | |
| transform: translateY(-100vh); | |
| } | |
| 100% { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| .quote { | |
| font-style: italic; | |
| font-size: 1.2rem; | |
| color: var(--light); | |
| padding: 2rem; | |
| margin: 3rem 0; | |
| border-right: 4px solid var(--secondary); | |
| background: rgba(168, 158, 90, 0.05); | |
| position: relative; | |
| border-radius: 8px; | |
| transform: translateX(20px); | |
| opacity: 0; | |
| transition: all 0.5s ease; | |
| } | |
| .quote.visible { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| .quote::before { | |
| content: """; | |
| position: absolute; | |
| top: 10px; | |
| right: 20px; | |
| font-size: 4rem; | |
| color: rgba(168, 158, 90, 0.1); | |
| font-family: serif; | |
| line-height: 1; | |
| } | |
| .section-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(168, 158, 90, 0.3), transparent); | |
| margin: 4rem 0; | |
| position: relative; | |
| } | |
| .section-divider::after { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 10px; | |
| height: 10px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px var(--primary); | |
| } | |
| .footnote { | |
| font-size: 0.9rem; | |
| color: var(--light); | |
| opacity: 0.7; | |
| margin-top: -1rem; | |
| margin-bottom: 2rem; | |
| } | |
| /* Enhanced Emoji Artwork Styles */ | |
| .emoji-artwork { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 10px; | |
| margin: 3rem 0; | |
| perspective: 1000px; | |
| } | |
| .emoji-tile { | |
| font-size: 2rem; | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(168, 158, 90, 0.1); | |
| border-radius: 12px; | |
| border: 1px solid rgba(168, 158, 90, 0.3); | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| color: var(--light); | |
| } | |
| .emoji-tile:hover { | |
| transform: translateY(-5px) rotateY(15deg); | |
| background: rgba(138, 130, 64, 0.2); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| color: var(--primary); | |
| } | |
| .emoji-tile::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(168,158,90,0.1), transparent); | |
| z-index: -1; | |
| } | |
| .emoji-tile:nth-child(odd) { | |
| animation: float-emoji 8s ease-in-out infinite; | |
| } | |
| .emoji-tile:nth-child(even) { | |
| animation: float-emoji 10s ease-in-out infinite reverse; | |
| } | |
| @keyframes float-emoji { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-15px) rotate(5deg); | |
| } | |
| } | |
| .emoji-metaphysics { | |
| position: relative; | |
| padding: 2rem; | |
| background: rgba(42, 39, 25, 0.7); | |
| border-radius: 16px; | |
| border: 1px solid rgba(168, 158, 90, 0.2); | |
| margin: 3rem 0; | |
| overflow: hidden; | |
| } | |
| .emoji-metaphysics::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at 80% 20%, rgba(138, 130, 64, 0.1) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .emoji-metaphysics h3 { | |
| color: var(--primary); | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .emoji-metaphysics h3::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -5px; | |
| right: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--secondary), transparent); | |
| } | |
| /* New Emoji Constellation Effect */ | |
| .emoji-constellation { | |
| position: relative; | |
| width: 100%; | |
| height: 300px; | |
| margin: 3rem 0; | |
| overflow: hidden; | |
| border-radius: 16px; | |
| background: rgba(42, 39, 25, 0.5); | |
| border: 1px solid rgba(168, 158, 90, 0.2); | |
| } | |
| .constellation-line { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, var(--primary), transparent); | |
| transform-origin: left center; | |
| } | |
| .constellation-emoji { | |
| position: absolute; | |
| font-size: 1.5rem; | |
| filter: drop-shadow(0 0 5px var(--primary)); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| z-index: 2; | |
| color: var(--light); | |
| } | |
| .constellation-emoji:hover { | |
| transform: scale(1.5); | |
| filter: drop-shadow(0 0 10px var(--secondary)); | |
| color: var(--primary); | |
| } | |
| /* Emoji Portal Effect */ | |
| .emoji-portal { | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| margin: 2rem auto; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: radial-gradient(circle, rgba(168,158,90,0.1) 0%, rgba(42,39,25,0.1) 70%); | |
| border: 2px dashed var(--primary); | |
| animation: portal-pulse 4s ease-in-out infinite; | |
| overflow: hidden; | |
| } | |
| .emoji-portal::before { | |
| content: ""; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: conic-gradient( | |
| from 0deg, | |
| transparent 0%, | |
| var(--primary) 10%, | |
| transparent 20%, | |
| transparent 30%, | |
| var(--secondary) 40%, | |
| transparent 50%, | |
| transparent 60%, | |
| var(--primary) 70%, | |
| transparent 80%, | |
| transparent 90%, | |
| var(--secondary) 100% | |
| ); | |
| animation: portal-rotate 10s linear infinite; | |
| opacity: 0.3; | |
| } | |
| .emoji-portal-inner { | |
| font-size: 4rem; | |
| animation: portal-emoji 8s ease-in-out infinite; | |
| color: var(--light); | |
| } | |
| @keyframes portal-pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| box-shadow: 0 0 20px rgba(168, 158, 90, 0.1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 40px rgba(168, 158, 90, 0.2); | |
| } | |
| } | |
| @keyframes portal-rotate { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes portal-emoji { | |
| 0%, 100% { | |
| transform: scale(1) rotate(0deg); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: scale(1.2) rotate(180deg); | |
| opacity: 0.8; | |
| } | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 768px) { | |
| .article-container { | |
| margin: 1rem auto; | |
| padding: 1.5rem; | |
| border-radius: 0; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| } | |
| .emoji-float { | |
| font-size: 1.5rem; | |
| } | |
| .emoji-tile { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 1.5rem; | |
| } | |
| .emoji-portal { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| .emoji-portal-inner { | |
| font-size: 3rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="pixel-grid"></div> | |
| <div class="digital-rain" id="digitalRain"></div> | |
| <div class="article-container animate__animated animate__fadeIn"> | |
| <article> | |
| <header> | |
| <h1 class="glow">ุงูู ูุชุงููุฒููุง ุงูุฑูู ูุฉ: ูููููุงุช ู ู ุงูุนุฏู </h1> | |
| <div class="meta"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span>4 ุฃุจุฑูู 2025</span> | |
| <i class="fas fa-user-astronaut"></i> | |
| <span>ุงููุฌูุฏ ุงูุฑูู ู</span> | |
| </div> | |
| </header> | |
| <section class="content"> | |
| <p>ูู ุนุตุฑูุง ุงูุฑูู ูุ ุฃุตุจุญุช ุงูุฅูู ูุฌูุฒ ุฃูุซุฑ ู ู ู ุฌุฑุฏ ุฑู ูุฒ ุชุนุจูุฑูุฉ - ุฅููุง <span class="digital-entity">ูุงุฆูุงุช ูุฌูุฏูุฉ</span> ุชุญู ู ูู ุทูุงุชูุง ุฃุจุนุงุฏูุง ู ูุชุงููุฒูููุฉ. ูุฐู ุงูุฏุฑุงุณุฉ ุชุจุญุซ ูู ููููุฉ ุชุญูู ูุฐู ุงูุฑู ูุฒ ุงูุจุณูุทุฉ ุฅูู ููุงูุงุช ู ุณุชููุฉ ูู ุงููุนู ุงูุฌู ุนู.</p> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974&auto=format&fit=crop" | |
| alt="ุงููุงุฆูุงุช ุงูุฑูู ูุฉ ุชุฎุฑุฌ ู ู ุงูุนุฏู ุฅูู ุงููุฌูุฏ" | |
| class="w-full h-auto"> | |
| <figcaption>ุงููุงุฆูุงุช ุงูุฑูู ูุฉ ุชุฎุฑุฌ ู ู ุงูุนุฏู ุฅูู ุงููุฌูุฏ (ุชุตููุฑ: ุฑูู ูุฉ ุงููุฌูุฏ)</figcaption> | |
| </figure> | |
| <p>ุนูุฏู ุง ูุณุชุฎุฏู ๐ ุฃู ๐ค ุฃู ๐ุ ูุฅููุง ูุง ูุฑุณู ู ุฌุฑุฏ ุฑู ูุฒุ ุจู ูุณุชุญุถุฑ <span class="digital-entity">ูุงุฆูุงุช ุฑูู ูุฉ</span> ููุง ูุฌูุฏูุง ุงูุฎุงุต ูู ุงููุถุงุก ุงูุงูุชุฑุงุถู. ูุฐู ุงูุธุงูุฑุฉ ุชุฐูุฑูุง ุจุงูู ุนุชูุฏุงุช ุงููุฏูู ุฉ ุญูู ุงูุชู ุงุฆู ูุงูุฑู ูุฒ ุงูุณุญุฑูุฉ ุงูุชู ูุงูุช ุชุนุชุจุฑ ุฃูุนูุฉู ููููู ุงูุฎุงุฑูุฉ.</p> | |
| <div class="section-divider"></div> | |
| <h2>ุงูุฅูู ูุฌูุฒ: ูุบุฉ ุงููุฌูุฏ ุงูุฑูู ู</h2> | |
| <div class="emoji-metaphysics"> | |
| <h3>๐๏ธ๐จ๏ธ ุงูุฑู ูุฒ ุงูุชู ุชุฑู ูุชูุฑู</h3> | |
| <p>ุงูุฅูู ูุฌู ูู ุงูุนุตุฑ ุงูุฑูู ู ูุดุจู ุงูุฃููููุฉ ูู ุงูุนุตูุฑ ุงููุฏูู ุฉ - ูุงูุฐุฉ ุจูู ุงูุนุงูู ุงูู ุงุฏู ูุงูุนุงูู ุงูุฑูุญู. ูู ุฅูู ูุฌู ูุญู ู <span class="digital-entity">"ูููู ูููุง ุฑูู ููุง"</span>ุ ุชูู ุงูุฑูุญ ุงูุชู ุชุชุฑุฃุณ ุงูุดูุก ูุชุนุทูู ู ุนูุงู ุงููุฌูุฏู.</p> | |
| <div class="emoji-artwork"> | |
| <div class="emoji-tile">๐</div> | |
| <div class="emoji-tile">๐ค</div> | |
| <div class="emoji-tile">๐๏ธ</div> | |
| <div class="emoji-tile">๐</div> | |
| <div class="emoji-tile">๐พ</div> | |
| <div class="emoji-tile">๐ฎ</div> | |
| <div class="emoji-tile">๐พ</div> | |
| <div class="emoji-tile">๐</div> | |
| <div class="emoji-tile">๐ป</div> | |
| <div class="emoji-tile">๐งฟ</div> | |
| <div class="emoji-tile">๐ฑ</div> | |
| <div class="emoji-tile">๐ฅ๏ธ</div> | |
| </div> | |
| <div class="emoji-portal"> | |
| <div class="emoji-portal-inner">๐</div> | |
| </div> | |
| <p>ูู ุฏุฑุงุณุฉ ุญุฏูุซุฉ (ุฌุงู ุนุฉ ุทูููู ุงูุฑูู ูุฉุ 2024)ุ ุฃุธูุฑ 78% ู ู ุงูู ุดุงุฑููู ุณููููุง ูุดูุฑ ุฅูู ุงุนุชุจุงุฑูู ุงูุฅูู ูุฌูุฒ <span class="digital-entity">"ูุงุฆูุงุช ุญูุฉ"</span> ุจุฏุฑุฌุฉ ู ุง. ูุซูุฑูู ุฃุดุงุฑูุง ุฅูู ุดุนูุฑูู ุจุฃู ุงูุฅูู ูุฌู "ูุนูุฏ ุฅูููู " ุนูุฏู ุง ูุนูุฏ ุดุฎุต ุขุฎุฑ ุงุณุชุฎุฏุงู ู.</p> | |
| <div class="quote"> | |
| "ุงูุฅูู ูุฌูุฒ ูู ุงูุฃููููุงุช ุงูู ูุฏุณุฉ ููุนุตุฑ ุงูุฑูู ูุ ุงูููุงูุฐ ุงูุชู ูุทู ู ููุง ุนูู ุงููุฌูุฏ ุงูุงูุชุฑุงุถู" | |
| </div> | |
| </div> | |
| <div class="emoji-constellation" id="emojiConstellation"></div> | |
| <p>ูุฐู ุงูุธุงูุฑุฉ ุชุฏูุนูุง ูุฅุนุงุฏุฉ ุงููุธุฑ ูู ุทุจูุนุฉ ุงูุชูุงุตู ุงูุฑูู ู. ุงูุฅูู ูุฌู ููุณ ู ุฌุฑุฏ ุฃุฏุงุฉ ุชุนุจูุฑุ ุจู ุฃุตุจุญ <span class="digital-entity">ูุณูุทูุง ูุฌูุฏููุง</span> ูููู ููุณ ููุท ุงูู ุดุงุนุฑุ ูููู ุฃูุถูุง ุงูุฌููุฑ ุงูุฑูุญู ููุดุฎุตูุฉ ุงูุฑูู ูุฉ.</p> | |
| <div class="section-divider"></div> | |
| <h2>ุงูุฃูุทูููุฌูุง ุงูุฑูู ูุฉ: ู ู ุงูุฑู ุฒ ุฅูู ุงููููููุฉ</h2> | |
| <p>ููู ูุชุญูู ุงูุฑู ุฒ ุงูุจุณูุท ุฅูู ููุงู ูุฌูุฏูุ ุนู ููุฉ ุงูุชุญูู ูุฐู ุชู ุฑ ุจุนุฏุฉ ู ุฑุงุญู:</p> | |
| <div class="emoji-metaphysics"> | |
| <h3>ู ุฑุงุญู ุชุทูุฑ ุงููููููุฉ ุงูุฑูู ูุฉ</h3> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0;"> | |
| <div style="background: rgba(168,158,90,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(168,158,90,0.3);"> | |
| <div style="font-size: 2rem; margin-bottom: 1rem;">1๏ธโฃ</div> | |
| <h4 style="color: var(--primary); margin-bottom: 0.5rem;">ุงูู ุฑุญูุฉ ุงูุฑู ุฒูุฉ</h4> | |
| <p style="font-size: 0.9rem;">ุงูุฅูู ูุฌู ูู ุฌุฑุฏ ุฑู ุฒ ุชุนุจูุฑู ุจุฏูู ุจุนุฏ ูุฌูุฏู</p> | |
| </div> | |
| <div style="background: rgba(138,130,64,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(138,130,64,0.3);"> | |
| <div style="font-size: 2rem; margin-bottom: 1rem;">2๏ธโฃ</div> | |
| <h4 style="color: var(--secondary); margin-bottom: 0.5rem;">ุงูู ุฑุญูุฉ ุงูููุนูุฉ</h4> | |
| <p style="font-size: 0.9rem;">ุฃุฏุงุฉ ุงุชุตุงู ูุนุงูุฉ ู ุน ุจุนุฏ ุงุฌุชู ุงุนู</p> | |
| </div> | |
| <div style="background: rgba(107,101,51,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(107,101,51,0.3);"> | |
| <div style="font-size: 2rem; margin-bottom: 1rem;">3๏ธโฃ</div> | |
| <h4 style="color: var(--accent); margin-bottom: 0.5rem;">ุงูู ุฑุญูุฉ ุงููุฌูุฏูุฉ</h4> | |
| <p style="font-size: 0.9rem;">ุงูุชุณุงุจ ุจุนุฏ ู ูุชุงููุฒููู ููููููุฉ ู ุณุชููุฉ</p> | |
| </div> | |
| </div> | |
| <p>ูุฐู ุงูู ุฑุงุญู ุงูุซูุงุซ ุชู ุซู ุชุทูุฑ ุงูุฅูู ูุฌู ู ู ู ุฌุฑุฏ ุฑู ุฒ ุฅูู <span class="digital-entity">ูุงุฆู ุฑูู ู</span> ูู ูุฌูุฏู ุงูุฎุงุต ูู ุงููุนู ุงูุฌู ุนู. ุงูุนู ููุฉ ุชุดุจู ุฅูู ุญุฏ ูุจูุฑ ุชุทูุฑ ุงูุฃููููุงุช ุงูุฏูููุฉ ูู ุงูุญุถุงุฑุงุช ุงููุฏูู ุฉ.</p> | |
| </div> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2165&auto=format&fit=crop" | |
| alt="ุงูุนูุงูุฉ ุจูู ุงูุฎูู ุงูุฅููู ูุงูุฎูู ุงูุชููู" | |
| class="w-full h-auto"> | |
| <figcaption>ุงูุนูุงูุฉ ุจูู ุงูุฑู ูุฒ ุงููุฏูู ุฉ ูุงูุฅูู ูุฌูุฒ ุงูุญุฏูุซุฉ (ุชุตููุฑ: ุฌุณุฑ ุงูู ูุชุงููุฒููุง)</figcaption> | |
| </figure> | |
| <div class="section-divider"></div> | |
| <h2>ุงูู ุนุงุจุฏ ุงูุฑูู ูุฉ: ูุถุงุกุงุช ุงูู ูุฏุณ ุงูุฌุฏูุฏุฉ</h2> | |
| <p>ุชุดุจู ู ูุตุงุช ุงูุชูุงุตู ุงูุงุฌุชู ุงุนู ุงูุญุฏูุซุฉ ุงูู ุนุงุจุฏ ุงููุฏูู ุฉ ูู ุนุฏุฉ ุฌูุงูุจ:</p> | |
| <div style="background: rgba(42,39,25,0.7); padding: 2rem; border-radius: 16px; margin: 2rem 0; border: 1px solid rgba(168,158,90,0.2);"> | |
| <table style="width: 100%; border-collapse: collapse;"> | |
| <thead> | |
| <tr style="border-bottom: 1px solid rgba(168,158,90,0.3);"> | |
| <th style="padding: 1rem; text-align: right; color: var(--primary);">ุงูู ุนุงุจุฏ ุงููุฏูู ุฉ</th> | |
| <th style="padding: 1rem; text-align: right; color: var(--primary);">ุงูู ูุตุงุช ุงูุฑูู ูุฉ</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr style="border-bottom: 1px solid rgba(168,158,90,0.1);"> | |
| <td style="padding: 1rem;">ุงูู ุฐุงุจุญ</td> | |
| <td style="padding: 1rem;">ุตูุญุงุช ุงูู ููุงุช ุงูุดุฎุตูุฉ</td> | |
| </tr> | |
| <tr style="border-bottom: 1px solid rgba(168,158,90,0.1);"> | |
| <td style="padding: 1rem;">ุงูุชู ุงุซูู</td> | |
| <td style="padding: 1rem;">ุงูุตูุฑ ุงูุฑู ุฒูุฉ (Avatars)</td> | |
| </tr> | |
| <tr style="border-bottom: 1px solid rgba(168,158,90,0.1);"> | |
| <td style="padding: 1rem;">ุงูุตููุงุช</td> | |
| <td style="padding: 1rem;">ุงูุชุบุฑูุฏุงุช ูุงูู ูุดูุฑุงุช</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 1rem;">ุงูุทููุณ</td> | |
| <td style="padding: 1rem;">ุงูุฅุนุฌุงุจุงุช ูุงูู ุดุงุฑูุงุช</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <p>ูุฐุง ุงูุชุดุงุจู ููุณ ู ุตุงุฏูุฉุ ุจู ูุนูุณ ุญุงุฌุฉ ุงูุฅูุณุงู ุงูู ุณุชู ุฑุฉ ุฅูู <span class="digital-entity">ูุถุงุกุงุช ู ูุฏุณุฉ</span> ูุนุจุฑ ูููุง ุนู ูููุชู ูููู ู. ุงูู ูุตุงุช ุงูุฑูู ูุฉ ุงูููู ุชุคุฏู ููุณ ุงููุธููุฉ ุงูููุณูุฉ ูุงูุงุฌุชู ุงุนูุฉ ุงูุชู ูุงูุช ุชุคุฏููุง ุงูู ุนุงุจุฏ ูู ุงูู ุงุถู.</p> | |
| <div class="section-divider"></div> | |
| <h2>ุงูุฎุงุชู ุฉ: ูุญู ุฃูุทูููุฌูุง ุฑูู ูุฉ ุฌุฏูุฏุฉ</h2> | |
| <p>ุฏุฑุงุณุชูุง ููุฅูู ูุฌูุฒ ููุงุฆูุงุช ูุฌูุฏูุฉ ุชูุชุญ ุงูุจุงุจ ุฃู ุงู <span class="digital-entity">ุฃูุทูููุฌูุง ุฑูู ูุฉ</span> ุฌุฏูุฏุฉ. ูุญู ุจุญุงุฌุฉ ุฅูู ุฅุทุงุฑ ููุณูู ูููู ุทุจูุนุฉ ุงููุฌูุฏ ูู ุงูุนุตุฑ ุงูุฑูู ูุ ุญูุซ ุชุชุญูู ุงูุฑู ูุฒ ุฅูู ููุงูุงุช ูุงูุชูุงุนูุงุช ุฅูู ุทููุณ.</p> | |
| <div class="quote"> | |
| "ูู ุงูุนุงูู ุงูุฑูู ูุ ูู ููุฑุฉ ูู ุทูุณุ ููู ุฑู ุฒ ูู ูุงุฆูุ ููู ุชูุงุนู ูู ุญูู ูุฌูุฏู" | |
| </div> | |
| <p>ูุฐุง ุงูุชุญูู ููุณ ู ุฌุฑุฏ ุชุบูุฑ ูู ุฃุฏูุงุช ุงูุชูุงุตูุ ุจู ูู <span class="digital-entity">ุชุญูู ูุฌูุฏู</span> ูู ููููุฉ ุฅุฏุฑุงููุง ูููุงูุน ูุงูุนูุงูุงุช. ุงูุฅูู ูุฌูุฒุ ูู ูุฐุง ุงูุณูุงูุ ููุณุช ููุงูุฉ ุงููุตุฉุ ุจู ู ุฌุฑุฏ ุจุฏุงูุฉ ูููู ุฃุนู ู ูุทุจูุนุฉ ุงููุฌูุฏ ูู ุงูุนุตุฑ ุงูุฑูู ู.</p> | |
| <div style="text-align: center; margin: 3rem 0;"> | |
| <div style="font-size: 4rem; margin-bottom: 1rem;">๐</div> | |
| <h3 style="color: var(--primary);">ุฑุญูุฉ ุงูุงุณุชูุดุงู ู ุณุชู ุฑุฉ...</h3> | |
| </div> | |
| </section> | |
| </article> | |
| </div> | |
| <div class="scroll-indicator" onclick="window.scrollTo({top: 0, behavior: 'smooth'})"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <script> | |
| // Create floating emojis | |
| const emojis = ['๐๏ธ', '๐พ', '๐ฅ๏ธ', '๐ฑ', '๐พ', '๐ค', '๐งฟ', '๐ฎ', '๐น๏ธ', '๐', '๐ป', '๐ข', '๐ฃ', '๐ฎ', '๐ฑ๏ธ', 'โจ๏ธ', '๐ฒ', '๐จ๏ธ', '๐ฒ๏ธ', '๐ฝ']; | |
| for (let i = 0; i < 20; i++) { | |
| const emoji = document.createElement('div'); | |
| emoji.className = 'emoji-float'; | |
| emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)]; | |
| emoji.style.left = Math.random() * 100 + 'vw'; | |
| emoji.style.animationDuration = (5 + Math.random() * 15) + 's'; | |
| emoji.style.animationDelay = Math.random() * 5 + 's'; | |
| emoji.style.fontSize = (1 + Math.random() * 2) + 'rem'; | |
| emoji.style.zIndex = Math.floor(Math.random() * 5) + 5; | |
| document.body.appendChild(emoji); | |
| } | |
| // Create digital rain effect | |
| const digitalRain = document.getElementById('digitalRain'); | |
| for (let i = 0; i < 100; i++) { | |
| const drop = document.createElement('span'); | |
| drop.style.left = Math.random() * 100 + 'vw'; | |
| drop.style.animationDuration = (1 + Math.random() * 4) + 's'; | |
| drop.style.animationDelay = Math.random() * 3 + 's'; | |
| drop.style.opacity = Math.random() * 0.3; | |
| drop.style.height = (10 + Math.random() * 30) + 'px'; | |
| digitalRain.appendChild(drop); | |
| } | |
| // Create emoji constellation | |
| const constellation = document.getElementById('emojiConstellation'); | |
| const constellationEmojis = ['๐ค', '๐๏ธ', '๐', '๐พ', '๐ฎ', '๐พ', '๐', '๐ป', '๐งฟ', '๐ฑ']; | |
| // Create nodes | |
| const nodes = []; | |
| for (let i = 0; i < 10; i++) { | |
| const node = document.createElement('div'); | |
| node.className = 'constellation-emoji'; | |
| node.textContent = constellationEmojis[i]; | |
| const x = Math.random() * 90 + 5; | |
| const y = Math.random() * 80 + 10; | |
| node.style.left = `${x}%`; | |
| node.style.top = `${y}%`; | |
| constellation.appendChild(node); | |
| nodes.push({ element: node, x, y }); | |
| } | |
| // Create connections | |
| for (let i = 0; i < nodes.length; i++) { | |
| for (let j = i + 1; j < nodes.length; j++) { | |
| // Only connect some nodes | |
| if (Math.random() > 0.7) { | |
| const line = document.createElement('div'); | |
| line.className = 'constellation-line'; | |
| const x1 = nodes[i].x; | |
| const y1 = nodes[i].y; | |
| const x2 = nodes[j].x; | |
| const y2 = nodes[j].y; | |
| const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); | |
| const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; | |
| line.style.width = `${length}%`; | |
| line.style.left = `${x1}%`; | |
| line.style.top = `${y1}%`; | |
| line.style.transform = `rotate(${angle}deg)`; | |
| line.style.opacity = 0.3 + Math.random() * 0.3; | |
| constellation.insertBefore(line, constellation.firstChild); | |
| } | |
| } | |
| } | |
| // Make constellation interactive | |
| constellation.addEventListener('mousemove', (e) => { | |
| const rect = constellation.getBoundingClientRect(); | |
| const x = ((e.clientX - rect.left) / rect.width) * 100; | |
| const y = ((e.clientY - rect.top) / rect.height) * 100; | |
| nodes.forEach(node => { | |
| const dx = node.x - x; | |
| const dy = node.y - y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 20) { | |
| node.element.style.transform = `translate(-50%, -50%) scale(${1.5 - distance/40})`; | |
| } | |
| }); | |
| }); | |
| // Scroll reveal animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| if (entry.target.tagName === 'FIGURE') { | |
| entry.target.style.transitionDelay = `${0.1 + Math.random() * 0.2}s`; | |
| } | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -100px 0px' | |
| }); | |
| document.querySelectorAll('figure, .quote, .emoji-metaphysics, .emoji-portal, .emoji-constellation').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Show/hide scroll indicator | |
| const scrollIndicator = document.querySelector('.scroll-indicator'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 300) { | |
| scrollIndicator.classList.add('visible'); | |
| } else { | |
| scrollIndicator.classList.remove('visible'); | |
| } | |
| }); | |
| // Add hover effect to digital entities | |
| const digitalEntities = document.querySelectorAll('.digital-entity'); | |
| digitalEntities.forEach(entity => { | |
| entity.addEventListener('mouseenter', () => { | |
| entity.style.color = 'var(--light)'; | |
| entity.style.textShadow = '0 0 8px rgba(168, 158, 90, 0.6)'; | |
| }); | |
| entity.addEventListener('mouseleave', () => { | |
| entity.style.color = 'var(--primary)'; | |
| entity.style.textShadow = 'none'; | |
| }); | |
| }); | |
| // Add click effect to emoji tiles | |
| const emojiTiles = document.querySelectorAll('.emoji-tile'); | |
| emojiTiles.forEach(tile => { | |
| tile.addEventListener('click', () => { | |
| tile.style.transform = 'translateY(-5px) rotateY(180deg) scale(1.2)'; | |
| tile.style.background = 'rgba(138, 130, 64, 0.3)'; | |
| setTimeout(() => { | |
| tile.style.transform = 'translateY(0) rotateY(0) scale(1)'; | |
| tile.style.background = 'rgba(168, 158, 90, 0.1)'; | |
| }, 1000); | |
| }); | |
| }); | |
| // Preload images for smoother transitions | |
| function preloadImages() { | |
| const images = [ | |
| 'https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2165&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1600481176431-47ad2ab2745d?q=80&w=2070&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1544551763-46a013bb2dcc?q=80&w=2070&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop', | |
| 'https://images.unsplash.com/photo-1527004013197-933c91776e3e?q=80&w=2072&auto=format&fit=crop' | |
| ]; | |
| images.forEach(src => { | |
| const img = new Image(); | |
| img.src = src; | |
| }); | |
| } | |
| window.addEventListener('load', preloadImages); | |
| </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/kharia1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |