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>Nour-Glow Studio</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| /* خلفية بتدرج ناعم جداً يحاكي قماش الستان اللامع بالألوان البيبي بلو، اللبني، والوردي الهادئ */ | |
| background: linear-gradient(135deg, #e0f2fe, #bae6fd, #e0f2fe, #ffe4e6); | |
| color: #1e293b; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| background-attachment: fixed; | |
| position: relative; | |
| overflow: hidden; /* لمنع ظهور شريط التمرير بسبب الألماسات الخارجة */ | |
| } | |
| /* إضافة الألماسات البرّاقة كخلفية متناثرة */ | |
| body::before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| /* رسم شكل الألماسة (المعين) وتكراره */ | |
| background-image: | |
| radial-gradient(circle, #fff 10%, transparent 20%), | |
| conic-gradient(from 0deg at 50% 50%, #fff0 0deg 120deg, #fff 120deg 240deg, #fff0 240deg 360deg), | |
| conic-gradient(from 180deg at 50% 50%, #fff0 0deg 120deg, #fff 120deg 240deg, #fff0 240deg 360deg); | |
| background-size: 15px 15px, 20px 20px, 20px 20px; | |
| background-position: 0 0, 10px 10px, 10px 10px; | |
| opacity: 0.15; /* شفافية هادئة للألماسات في الخلفية */ | |
| animation: sparkleBackground 5s linear infinite; /* تحريك الألماسات لتعطي شعور اللمعان */ | |
| } | |
| @keyframes sparkleBackground { | |
| 0% { background-position: 0 0, 10px 10px, 10px 10px; } | |
| 100% { background-position: 50px 50px, 60px 60px, 60px 60px; } | |
| } | |
| .card { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(15px); | |
| /* إطار فضي مرصع يحاكي الألماس واللؤلؤ */ | |
| border: 3px solid transparent; | |
| border-image: linear-gradient(to bottom right, #cbd5e1, #fff, #cbd5e1, #fff) 1; | |
| border-radius: 28px; | |
| padding: 45px; | |
| text-align: center; | |
| max-width: 650px; | |
| width: 100%; | |
| box-shadow: 0 15px 35px rgba(56, 189, 248, 0.25), 0 5px 15px rgba(148, 163, 184, 0.15); | |
| position: relative; | |
| z-index: 10; /* لضمان ظهور الكارت فوق ألماسات الخلفية */ | |
| } | |
| /* ألماسات كبيرة وواضحة في زوايا الكارت */ | |
| .diamond-corner { | |
| position: absolute; | |
| font-size: 2rem; | |
| color: rgba(255, 255, 255, 0.9); | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(56, 189, 248, 0.5); | |
| animation: diamondSparkle 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes diamondSparkle { | |
| 0% { opacity: 0.7; transform: scale(1); } | |
| 100% { opacity: 1; transform: scale(1.1); } | |
| } | |
| .top-right-diamond { top: -25px; right: -25px; } | |
| .bottom-left-diamond { bottom: -25px; left: -25px; } | |
| .tag { | |
| display: inline-block; | |
| background: linear-gradient(45deg, #dfa837, #f3e5ab); | |
| color: #4a3b00; | |
| padding: 8px 22px; | |
| border-radius: 25px; | |
| font-size: 0.95rem; | |
| font-weight: bold; | |
| margin-bottom: 25px; | |
| box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2); | |
| position: relative; | |
| } | |
| /* تأثير لمعان الذهب على التاج */ | |
| .tag::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); | |
| animation: goldGlow 2s linear infinite; | |
| } | |
| @keyframes goldGlow { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| h1 { | |
| color: #0284c7; | |
| font-size: 2.2rem; | |
| margin-bottom: 20px; | |
| font-weight: 700; | |
| position: relative; | |
| } | |
| /* إضافة رمز القلب الألماسي الأزرق */ | |
| h1::after { | |
| content: " 💙"; | |
| font-size: 1.8rem; | |
| vertical-align: middle; | |
| text-shadow: 0 0 10px rgba(56, 189, 248, 0.8); | |
| } | |
| p { | |
| font-size: 1.25rem; | |
| line-height: 1.9; | |
| color: #334155; | |
| margin-bottom: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- إضافة ألماسات في الزوايا --> | |
| <div class="diamond-corner top-right-diamond">💎</div> | |
| <div class="diamond-corner bottom-left-diamond">💎</div> | |
| <div class="card"> | |
| <div class="tag">✦ Nour-Glow AI ✦</div> | |
| <h1>مرحباً بكِ في استوديو نور للتطوير والأخلاق</h1> | |
| <p>منصة Nour-Glow AI هي منصة عربية تماماً، تهدف لنشر العلم والقيم الإسلامية بين الأطفال والمراهقين والكبار، وتقديم نصائح ورسائل هادفة تسعى لرقي مجتمعنا والعلو به ليصبح من أفضل المجتمعات.</p> | |
| </div> | |
| </body> | |
| </html> |