سلام به همه دوستان و استاد عزیز امروز من یه سایت از واقعا بنظرم اعماق وب پیدا کردم که بهترین و جدید ترین مدل ها رو رایگان گذاشته حتی ⁦GPT 6 Astra⁩ از مدل های کد نویسی تا ویدئو و تصویر ساز (تست کردم و فکر میکردم الکی بود، یا ⁦api⁩ های کعالی بده، ولی واقعاً نتیجه تسک هایی که به این مدل ها مثل جی چی تی ⁦6⁩ استرا دادم خفن بود) هرچند باز هم مراقب باشید https://enter.pollinations.ai/models?q=source%3Aofficial باز زدن روی این دکمه «فلش» روی هر مدلی که میخواید، باید با گیت هاب لاگین کنید، و بعد میتوند راحت استفاده کنید (که در نهایت وارد همچین صفحه ای میشید https://openwebui.pollinations.ai/) مثلا من بهش گفتم یه لندینگ پیج هری پاتر سه بعدی باحال بساز، با اینکه توضیح خاصی ندادم لندینگ خفنی ساخت! اینم کد لنیدنگ هری پاتری که ساخت <!⁦DOCTYPE html⁩> <⁦html lang⁩="⁦fa⁩" ⁦dir⁩="⁦rtl⁩"> <⁦head⁩> <⁦meta charset⁩="⁦UTF-8⁩"> <⁦meta name⁩="⁦viewport⁩" ⁦content⁩="⁦width⁩=⁦device-width⁩, ⁦initial-scale⁩=⁦1⁩"> <⁦meta name⁩="⁦theme-color⁩" ⁦content⁩="#080c12"> <⁦title⁩>هاگوارتز | جادوی تو از اینجا آغاز می‌شود</⁦title⁩> <⁦style⁩> @import ⁦url⁩('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap'); :⁦root⁩ { --⁦bg⁩: #080c12; --⁦surface⁩: #10151d; --⁦text⁩: #eee8d9; --⁦muted⁩: #a3a8b1; --⁦gold⁩: #dfbb73; --⁦gold-light⁩: #ffe5a6; --⁦line⁩: ⁦rgba⁩(⁦223⁩, ⁦187⁩, ⁦115⁩, .⁦19⁩); --⁦house⁩: #d2695c; ‏ } * { ⁦box-sizing⁩: ⁦border-box⁩; } ⁦html⁩ { ⁦scroll-behavior⁩: ⁦smooth⁩; ⁦scroll-padding-top⁩: ⁦95px⁩; ‏ } ⁦body⁩ { ⁦margin⁩: ⁦0⁩; ⁦font-family⁩: ⁦Vazirmatn⁩, ⁦Tahoma⁩, ⁦sans-serif⁩; ⁦background⁩: ⁦var⁩(--⁦bg⁩); ⁦color⁩: ⁦var⁩(--⁦text⁩); ⁦overflow-x⁩: ⁦hidden⁩; ‏ } ⁦button⁩, ⁦a⁩ { -⁦webkit-tap-highlight-color⁩: ⁦transparent⁩; } ⁦button⁩ { ⁦font⁩: ⁦inherit⁩; } ⁦a⁩ { ⁦color⁩: ⁦inherit⁩; ⁦text-decoration⁩: ⁦none⁩; } ⁦button⁩, ⁦a⁩ { ⁦touch-action⁩: ⁦manipulation⁩; } :⁦focus-visible⁩ { ⁦outline⁩: ⁦2px solid var⁩(--⁦gold-light⁩); ⁦outline-offset⁩: ⁦6px⁩; ‏ } ::⁦selection⁩ { ⁦background⁩: ⁦var⁩(--⁦gold⁩); ⁦color⁩: ⁦var⁩(--⁦bg⁩); ‏ } #magic { ⁦position⁩: ⁦fixed⁩; ⁦inset⁩: ⁦0⁩; ⁦width⁩: ⁦100⁩%; ⁦height⁩: ⁦100⁩%; ⁦pointer-events⁩: ⁦none⁩; ⁦z-index⁩: ⁦5⁩; ‏ } .⁦ambient⁩ { ⁦position⁩: ⁦fixed⁩; ⁦inset⁩: ⁦0⁩; ⁦pointer-events⁩: ⁦none⁩; ⁦background⁩: ⁦radial-gradient⁩(⁦ellipse at 15⁩% ⁦25⁩%, #184b492d, ⁦transparent 45⁩%), ⁦radial-gradient⁩(⁦ellipse at 85⁩% ⁦65⁩%, #5b371b20, ⁦transparent 45⁩%); ⁦z-index⁩: -⁦1⁩; ‏ } .⁦container⁩ { ⁦width⁩: ⁦min⁩(⁦1180px⁩, ⁦90⁩%); ⁦margin-inline⁩: ⁦auto⁩; ‏ } /* ⁦Navigation⁩ */ ⁦header⁩ { ⁦position⁩: ⁦sticky⁩; ⁦top⁩: ⁦0⁩; ⁦z-index⁩: ⁦20⁩; ⁦background⁩: #080c12c9; ⁦border-bottom⁩: ⁦1px solid var⁩(--⁦line⁩); ⁦backdrop-filter⁩: ⁦blur⁩(⁦20px⁩); ‏ } .⁦nav⁩ { ⁦min-height⁩: ⁦84px⁩; ⁦display⁩: ⁦flex⁩; ⁦align-items⁩: ⁦center⁩; ⁦justify-content⁩: ⁦space-between⁩; ⁦gap⁩: ⁦24px⁩; ‏ } .⁦brand⁩ { ⁦display⁩: ⁦flex⁩; ⁦align-items⁩: ⁦center⁩; ⁦gap⁩: ⁦12px⁩; ‏ } .⁦brand-symbol⁩ { ⁦display⁩: ⁦grid⁩; ⁦place-items⁩: ⁦center⁩; ⁦width⁩: ⁦43px⁩; ⁦height⁩: ⁦48px⁩; ⁦border⁩: ⁦1px solid var⁩(--⁦gold⁩); ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦border-radius⁩: ⁦6px 6px 20px 20px⁩; ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦font-size⁩: ⁦29px⁩; ‏ } .⁦brand strong⁩ { ⁦display⁩: ⁦block⁩; ⁦font-size⁩: ⁦17px⁩; ‏ } .⁦brand small⁩ { ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦font-size⁩: ⁦9px⁩; ⁦letter-spacing⁩: ⁦3px⁩; ‏ } .⁦nav-links⁩ { ⁦display⁩: ⁦flex⁩; ⁦gap⁩: ⁦30px⁩; ⁦font-size⁩: ⁦13px⁩; ⁦color⁩: ⁦var⁩(--⁦muted⁩); ‏ } .⁦nav-links a⁩ { ⁦transition⁩: ⁦color⁩ .⁦2s⁩; } .⁦nav-links a:hover⁩ { ⁦color⁩: ⁦var⁩(--⁦gold⁩); } .⁦nav-cta⁩ { ⁦padding⁩: ⁦10px 18px⁩; ⁦border⁩: ⁦1px solid var⁩(--⁦line⁩); ⁦border-radius⁩: ⁦7px⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦font-size⁩: ⁦12px⁩; ⁦transition⁩: ⁦background⁩ .⁦2s⁩; ‏ } .⁦nav-cta:hover⁩ { ⁦background⁩: #dfbb7310; } /* ⁦Hero⁩ */ .⁦hero⁩ { ⁦position⁩: ⁦relative⁩; ⁦min-height⁩: ⁦760px⁩; ⁦display⁩: ⁦grid⁩; ⁦grid-template-columns⁩: ⁦1fr 1fr⁩; ⁦align-items⁩: ⁦center⁩; ⁦gap⁩: ⁦40px⁩; ⁦padding-block⁩: ⁦80px⁩; ‏ } .⁦eyebrow⁩ { ⁦display⁩: ⁦inline-flex⁩; ⁦align-items⁩: ⁦center⁩; ⁦gap⁩: ⁦10px⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦font-size⁩: ⁦11px⁩; ⁦letter-spacing⁩: ⁦1px⁩; ‏ } .⁦eyebrow::before⁩ { ⁦content⁩: ""; ⁦width⁩: ⁦25px⁩; ⁦height⁩: ⁦1px⁩; ⁦background⁩: ⁦var⁩(--⁦gold⁩); ‏ } ⁦h1⁩ { ⁦margin⁩: ⁦24px 0⁩; ⁦font-size⁩: ⁦clamp⁩(⁦40px⁩, ⁦4.8vw⁩, ⁦66px⁩); ⁦line-height⁩: ⁦1.55⁩; ⁦font-weight⁩: ⁦900⁩; ⁦letter-spacing⁩: -⁦2px⁩; ‏ } .⁦gold-text⁩ { ⁦background⁩: ⁦linear-gradient⁩(⁦110deg⁩, #b68a43, #fff0c0, #c49141); ⁦background-clip⁩: ⁦text⁩; -⁦webkit-background-clip⁩: ⁦text⁩; ⁦color⁩: ⁦transparent⁩; ‏ } .⁦hero-copy⁩ > ⁦p⁩ { ⁦max-width⁩: ⁦450px⁩; ⁦color⁩: ⁦var⁩(--⁦muted⁩); ⁦font-size⁩: ⁦14px⁩; ⁦line-height⁩: ⁦2.3⁩; ‏ } .⁦hero-actions⁩ { ⁦display⁩: ⁦flex⁩; ⁦flex-wrap⁩: ⁦wrap⁩; ⁦gap⁩: ⁦14px⁩; ⁦margin-top⁩: ⁦32px⁩; ‏ } .⁦button⁩ { ⁦display⁩: ⁦inline-flex⁩; ⁦align-items⁩: ⁦center⁩; ⁦justify-content⁩: ⁦center⁩; ⁦gap⁩: ⁦12px⁩; ⁦min-height⁩: ⁦49px⁩; ⁦padding⁩: ⁦13px 23px⁩; ⁦border-radius⁩: ⁦7px⁩; ⁦border⁩: ⁦1px solid var⁩(--⁦line⁩); ⁦cursor⁩: ⁦pointer⁩; ⁦transition⁩: ⁦transform⁩ .⁦25s⁩, ⁦box-shadow⁩ .⁦25s⁩, ⁦background⁩ .⁦25s⁩; ⁦font-weight⁩: ⁦600⁩; ⁦font-size⁩: ⁦13px⁩; ‏ } .⁦button:hover⁩ { ⁦transform⁩: ⁦translateY⁩(-⁦3px⁩); } .⁦button-primary⁩ { ⁦color⁩: #211909; ⁦background⁩: ⁦linear-gradient⁩(⁦120deg⁩, #bb904b, #f3d99b); ⁦box-shadow⁩: ⁦0 8px 30px⁩ #dfbb7318; ‏ } .⁦button-primary:hover⁩ { ⁦box-shadow⁩: ⁦0 10px 40px⁩ #dfbb7335; } .⁦button-secondary⁩ { ⁦color⁩: ⁦var⁩(--⁦text⁩); ⁦background⁩: #ffffff04; ‏ } .⁦hero-note⁩ { ⁦display⁩: ⁦flex⁩; ⁦align-items⁩: ⁦center⁩; ⁦gap⁩: ⁦10px⁩; ⁦margin-top⁩: ⁦35px⁩; ⁦font-size⁩: ⁦11px⁩; ⁦color⁩: ⁦var⁩(--⁦muted⁩); ‏ } .⁦status-dot⁩ { ⁦width⁩: ⁦6px⁩; ⁦height⁩: ⁦6px⁩; ⁦background⁩: #8dbda2; ⁦border-radius⁩: ⁦50⁩%; ⁦box-shadow⁩: ⁦0 0 12px⁩ #8dbda2; ‏ } /* ⁦CSS 3D book⁩ */ .⁦scene⁩ { ⁦position⁩: ⁦relative⁩; ⁦min-width⁩: ⁦0⁩; ⁦height⁩: ⁦540px⁩; ⁦display⁩: ⁦grid⁩; ⁦place-items⁩: ⁦center⁩; ⁦perspective⁩: ⁦1100px⁩; ⁦isolation⁩: ⁦isolate⁩; ‏ } .⁦scene::before⁩ { ⁦content⁩: ""; ⁦position⁩: ⁦absolute⁩; ⁦width⁩: ⁦340px⁩; ⁦height⁩: ⁦340px⁩; ⁦background⁩: #3b8c7b; ⁦border-radius⁩: ⁦50⁩%; ⁦filter⁩: ⁦blur⁩(⁦110px⁩); ⁦opacity⁩: .⁦18⁩; ⁦z-index⁩: -⁦1⁩; ‏ } .⁦orbit⁩ { ⁦position⁩: ⁦absolute⁩; ⁦width⁩: ⁦440px⁩; ⁦height⁩: ⁦440px⁩; ⁦border⁩: ⁦1px solid⁩ #dfbb7328; ⁦border-radius⁩: ⁦50⁩%; ⁦animation⁩: ⁦orbit 35s linear infinite⁩; ‏ } .⁦orbit::before⁩ { ⁦content⁩: "✦"; ⁦position⁩: ⁦absolute⁩; ⁦top⁩: ⁦54px⁩; ⁦right⁩: ⁦50px⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦font-size⁩: ⁦22px⁩; ⁦text-shadow⁩: ⁦0 0 20px var⁩(--⁦gold⁩); ‏ } .⁦orbit.second⁩ { ⁦width⁩: ⁦370px⁩; ⁦height⁩: ⁦370px⁩; ⁦border-style⁩: ⁦dashed⁩; ⁦opacity⁩: .⁦4⁩; ⁦animation-direction⁩: ⁦reverse⁩; ⁦animation-duration⁩: ⁦50s⁩; ‏ } .⁦book-float⁩ { ⁦transform-style⁩: ⁦preserve-3d⁩; ⁦animation⁩: ⁦levitate 6s ease-in-out infinite⁩; ‏ } .⁦book⁩ { ⁦position⁩: ⁦relative⁩; ⁦width⁩: ⁦245px⁩; ⁦height⁩: ⁦335px⁩; ⁦transform-style⁩: ⁦preserve-3d⁩; ⁦transform⁩: ⁦rotateX⁩(⁦9deg⁩) ⁦rotateY⁩(-⁦24deg⁩) ⁦rotateZ⁩(-⁦7deg⁩); ⁦transition⁩: ⁦transform⁩ .⁦3s ease-out⁩; ‏ } .⁦book-front⁩, .⁦book-back⁩ { ⁦position⁩: ⁦absolute⁩; ⁦inset⁩: ⁦0⁩; ⁦border-radius⁩: ⁦4px 12px 12px 4px⁩; ⁦backface-visibility⁩: ⁦hidden⁩; ⁦background⁩: ⁦repeating-linear-gradient⁩(⁦35deg⁩, #ffffff02 ⁦0 1px⁩, ⁦transparent 1px 5px⁩), ⁦linear-gradient⁩(⁦135deg⁩, #22423d, #102523 ⁦60⁩%, #173a34); ⁦border⁩: ⁦1px solid⁩ #b58c4980; ‏ } .⁦book-front⁩ { ⁦transform⁩: ⁦translateZ⁩(⁦24px⁩); ⁦box-shadow⁩: ⁦inset 7px 0 13px⁩ #0008, ⁦inset 0 0 35px⁩ #0006; ⁦display⁩: ⁦flex⁩; ⁦flex-direction⁩: ⁦column⁩; ⁦align-items⁩: ⁦center⁩; ⁦justify-content⁩: ⁦center⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ‏ } .⁦book-front::before⁩, .⁦book-front::after⁩ { ⁦content⁩: ""; ⁦position⁩: ⁦absolute⁩; ⁦inset⁩: ⁦15px⁩; ⁦border⁩: ⁦1px solid⁩ #dfbb7370; ⁦pointer-events⁩: ⁦none⁩; ‏ } .⁦book-front::after⁩ { ⁦inset⁩: ⁦21px⁩; ⁦border-color⁩: #dfbb7333; ‏ } .⁦book-back⁩ { ⁦transform⁩: ⁦rotateY⁩(⁦180deg⁩) ⁦translateZ⁩(⁦24px⁩); ‏ } .⁦book-spine⁩ { ⁦position⁩: ⁦absolute⁩; ⁦width⁩: ⁦48px⁩; ⁦height⁩: ⁦335px⁩; ⁦left⁩: -⁦24px⁩; ⁦top⁩: ⁦0⁩; ⁦transform⁩: ⁦rotateY⁩(-⁦90deg⁩); ⁦background⁩: ⁦linear-gradient⁩(⁦90deg⁩, #0a1917, #294b40, #10251e); ⁦border⁩: ⁦1px solid⁩ #b58c4970; ⁦display⁩: ⁦grid⁩; ⁦place-items⁩: ⁦center⁩; ‏ } .⁦book-spine span⁩ { ⁦writing-mode⁩: ⁦vertical-rl⁩; ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦letter-spacing⁩: ⁦5px⁩; ⁦font-size⁩: ⁦13px⁩; ‏ } .⁦book-pages⁩ { ⁦position⁩: ⁦absolute⁩; ⁦right⁩: -⁦22px⁩; ⁦top⁩: ⁦5px⁩; ⁦width⁩: ⁦44px⁩; ⁦height⁩: ⁦325px⁩; ⁦transform⁩: ⁦rotateY⁩(⁦90deg⁩); ⁦background⁩: ⁦repeating-linear-gradient⁩( ⁦90deg⁩, #b8a783 ⁦0 1px⁩, #efe0bc ⁦1px 3px⁩ ‏ ); ‏ } .⁦book-top⁩ { ⁦position⁩: ⁦absolute⁩; ⁦top⁩: -⁦22px⁩; ⁦left⁩: ⁦4px⁩; ⁦width⁩: ⁦237px⁩; ⁦height⁩: ⁦44px⁩; ⁦transform⁩: ⁦rotateX⁩(⁦90deg⁩); ⁦background⁩: ⁦repeating-linear-gradient⁩( ⁦0deg⁩, #b8a783 ⁦0 1px⁩, #efe0bc ⁦1px 3px⁩ ‏ ); ‏ } .⁦book-kicker⁩ { ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦font-size⁩: ⁦9px⁩; ⁦letter-spacing⁩: ⁦4px⁩; ⁦margin-bottom⁩: ⁦18px⁩; ‏ } .⁦book-crest⁩ { ⁦width⁩: ⁦100px⁩; ⁦height⁩: ⁦115px⁩; ⁦display⁩: ⁦grid⁩; ⁦place-items⁩: ⁦center⁩; ⁦border⁩: ⁦1px solid var⁩(--⁦gold⁩); ⁦border-radius⁩: ⁦45px 45px 50⁩% ⁦50⁩%; ⁦font-size⁩: ⁦67px⁩; ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦text-shadow⁩: ⁦0 0 25px⁩ #dfbb7340; ⁦background⁩: ⁦radial-gradient⁩(#dfbb7315, ⁦transparent⁩); ‏ } .⁦book-title⁩ { ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦font-size⁩: ⁦24px⁩; ⁦letter-spacing⁩: ⁦3px⁩; ⁦margin-top⁩: ⁦21px⁩; ‏ } .⁦book-subtitle⁩ { ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦font-size⁩: ⁦8px⁩; ⁦letter-spacing⁩: ⁦2px⁩; ⁦margin-top⁩: ⁦9px⁩; ‏ } .⁦book-shadow⁩ { ⁦position⁩: ⁦absolute⁩; ⁦bottom⁩: ⁦37px⁩; ⁦width⁩: ⁦230px⁩; ⁦height⁩: ⁦30px⁩; ⁦background⁩: #000; ⁦border-radius⁩: ⁦50⁩%; ⁦filter⁩: ⁦blur⁩(⁦17px⁩); ⁦animation⁩: ⁦shadow 6s ease-in-out infinite⁩; ‏ } .⁦floating-label⁩ { ⁦position⁩: ⁦absolute⁩; ⁦border⁩: ⁦1px solid var⁩(--⁦line⁩); ⁦background⁩: #10191de0; ⁦backdrop-filter⁩: ⁦blur⁩(⁦12px⁩); ⁦border-radius⁩: ⁦10px⁩; ⁦padding⁩: ⁦12px 16px⁩; ⁦box-shadow⁩: ⁦0 15px 45px⁩ #0004; ⁦animation⁩: ⁦levitate 7s ease-in-out infinite⁩; ⁦font-size⁩: ⁦11px⁩; ‏ } .⁦floating-label span⁩ { ⁦display⁩: ⁦block⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦font-size⁩: ⁦9px⁩; ⁦margin-top⁩: ⁦5px⁩; ‏ } .⁦label-one⁩ { ⁦top⁩: ⁦82px⁩; ⁦right⁩: -⁦8px⁩; } .⁦label-two⁩ { ⁦bottom⁩: ⁦95px⁩; ⁦left⁩: -⁦5px⁩; ⁦animation-delay⁩: -⁦3s⁩; } .⁦scene-caption⁩ { ⁦position⁩: ⁦absolute⁩; ⁦bottom⁩: ⁦0⁩; ⁦color⁩: #a3a8b177; ⁦font-size⁩: ⁦10px⁩; ⁦letter-spacing⁩: ⁦1px⁩; ‏ } /* ⁦Decorative divider⁩ */ .⁦divider⁩ { ⁦display⁩: ⁦flex⁩; ⁦align-items⁩: ⁦center⁩; ⁦gap⁩: ⁦24px⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦opacity⁩: .⁦6⁩; ‏ } .⁦divider::before⁩, .⁦divider::after⁩ { ⁦content⁩: ""; ⁦height⁩: ⁦1px⁩; ⁦flex⁩: ⁦1⁩; ⁦background⁩: ⁦linear-gradient⁩(⁦90deg⁩, ⁦transparent⁩, ⁦var⁩(--⁦gold⁩), ⁦transparent⁩); ‏ } /* ⁦Houses⁩ */ ⁦section⁩ { ⁦padding-block⁩: ⁦85px⁩; } .⁦section-heading⁩ { ⁦text-align⁩: ⁦center⁩; ⁦margin-bottom⁩: ⁦38px⁩; ‏ } .⁦section-heading h2⁩ { ⁦font-size⁩: ⁦clamp⁩(⁦26px⁩, ⁦3vw⁩, ⁦37px⁩); ⁦margin⁩: ⁦14px 0⁩; ‏ } .⁦section-heading p⁩ { ⁦color⁩: ⁦var⁩(--⁦muted⁩); ⁦font-size⁩: ⁦13px⁩; ⁦line-height⁩: ⁦2⁩; ‏ } .⁦houses-grid⁩ { ⁦display⁩: ⁦grid⁩; ⁦grid-template-columns⁩: ⁦repeat⁩(⁦4⁩, ⁦1fr⁩); ⁦gap⁩: ⁦18px⁩; ‏ } .⁦house-card⁩ { ⁦position⁩: ⁦relative⁩; ⁦overflow⁩: ⁦hidden⁩; ⁦text-align⁩: ⁦center⁩; ⁦color⁩: ⁦var⁩(--⁦text⁩); ⁦background⁩: ⁦linear-gradient⁩(⁦150deg⁩, #ffffff04, #ffffff01); ⁦border⁩: ⁦1px solid⁩ #ffffff0d; ⁦border-radius⁩: ⁦14px⁩; ⁦padding⁩: ⁦28px 14px⁩; ⁦cursor⁩: ⁦pointer⁩; ⁦transition⁩: ⁦transform⁩ .⁦3s⁩, ⁦border-color⁩ .⁦3s⁩, ⁦background⁩ .⁦3s⁩; ‏ } .⁦house-card::before⁩ { ⁦content⁩: ""; ⁦position⁩: ⁦absolute⁩; ⁦width⁩: ⁦100px⁩; ⁦height⁩: ⁦100px⁩; ⁦top⁩: -⁦60px⁩; ⁦left⁩: ⁦calc⁩(⁦50⁩% - ⁦50px⁩); ⁦background⁩: ⁦var⁩(--⁦color⁩); ⁦filter⁩: ⁦blur⁩(⁦40px⁩); ⁦opacity⁩: .⁦25⁩; ⁦transition⁩: ⁦opacity⁩ .⁦3s⁩; ‏ } .⁦house-card:hover⁩ { ⁦transform⁩: ⁦translateY⁩(-⁦8px⁩); ⁦border-color⁩: ⁦var⁩(--⁦color⁩); ‏ } .⁦house-card⁩[⁦aria-pressed⁩="⁦true⁩"] { ⁦border-color⁩: ⁦var⁩(--⁦color⁩); ⁦background⁩: #ffffff06; ⁦transform⁩: ⁦translateY⁩(-⁦5px⁩); ‏ } .⁦house-card⁩[⁦aria-pressed⁩="⁦true⁩"]::⁦before⁩ { ⁦opacity⁩: .⁦7⁩; } .⁦house-icon⁩ { ⁦width⁩: ⁦69px⁩; ⁦height⁩: ⁦78px⁩; ⁦margin⁩: ⁦0 auto 20px⁩; ⁦display⁩: ⁦grid⁩; ⁦place-items⁩: ⁦center⁩; ⁦color⁩: ⁦var⁩(--⁦color⁩); ⁦border⁩: ⁦1px solid currentColor⁩; ⁦border-radius⁩: ⁦12px 12px 35px 35px⁩; ⁦background⁩: #0002; ‏ } .⁦house-icon svg⁩ { ⁦width⁩: ⁦36px⁩; ⁦height⁩: ⁦36px⁩; } .⁦house-card h3⁩ { ⁦font-size⁩: ⁦17px⁩; ⁦margin⁩: ⁦9px 0⁩; } .⁦house-card⁩ .⁦english⁩ { ⁦display⁩: ⁦block⁩; ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦font-size⁩: ⁦10px⁩; ⁦letter-spacing⁩: ⁦2px⁩; ⁦color⁩: ⁦var⁩(--⁦color⁩); ‏ } .⁦house-card p⁩ { ⁦color⁩: ⁦var⁩(--⁦muted⁩); ⁦font-size⁩: ⁦11px⁩; ⁦margin-top⁩: ⁦18px⁩; ‏ } .⁦house-result⁩ { ⁦min-height⁩: ⁦74px⁩; ⁦margin-top⁩: ⁦26px⁩; ⁦padding⁩: ⁦18px⁩; ⁦text-align⁩: ⁦center⁩; ⁦border⁩: ⁦1px solid var⁩(--⁦line⁩); ⁦border-radius⁩: ⁦10px⁩; ⁦font-size⁩: ⁦13px⁩; ⁦line-height⁩: ⁦2⁩; ⁦color⁩: ⁦var⁩(--⁦muted⁩); ‏ } .⁦house-result strong⁩ { ⁦color⁩: ⁦var⁩(--⁦house⁩); } /* ⁦Spell section⁩ */ .⁦spell-section⁩ { ⁦padding-top⁩: ⁦25px⁩; } .⁦spell-panel⁩ { ⁦position⁩: ⁦relative⁩; ⁦overflow⁩: ⁦hidden⁩; ⁦display⁩: ⁦grid⁩; ⁦grid-template-columns⁩: ⁦1.2fr 1fr⁩; ⁦align-items⁩: ⁦center⁩; ⁦gap⁩: ⁦35px⁩; ⁦padding⁩: ⁦55px⁩; ⁦border⁩: ⁦1px solid var⁩(--⁦line⁩); ⁦border-radius⁩: ⁦20px⁩; ⁦background⁩: ⁦radial-gradient⁩(⁦ellipse at 10⁩% ⁦50⁩%, #3f6e6630, ⁦transparent 65⁩%), ⁦linear-gradient⁩(⁦135deg⁩, #131a20, #0b1017); ‏ } .⁦spell-panel h2⁩ { ⁦font-size⁩: ⁦clamp⁩(⁦25px⁩, ⁦3vw⁩, ⁦35px⁩); ⁦margin⁩: ⁦16px 0⁩; ‏ } .⁦spell-panel p⁩ { ⁦color⁩: ⁦var⁩(--⁦muted⁩); ⁦font-size⁩: ⁦13px⁩; ⁦line-height⁩: ⁦2.2⁩; ⁦max-width⁩: ⁦420px⁩; ‏ } .⁦spell-panel⁩ .⁦button⁩ { ⁦margin-top⁩: ⁦12px⁩; } .⁦wand-area⁩ { ⁦position⁩: ⁦relative⁩; ⁦min-height⁩: ⁦220px⁩; ⁦display⁩: ⁦grid⁩; ⁦place-items⁩: ⁦center⁩; ‏ } .⁦wand⁩ { ⁦position⁩: ⁦relative⁩; ⁦width⁩: ⁦240px⁩; ⁦height⁩: ⁦9px⁩; ⁦border-radius⁩: ⁦50⁩% ⁦4px 4px 50⁩%; ⁦background⁩: ⁦linear-gradient⁩(⁦0deg⁩, #24150d, #a77a4e, #382519); ⁦transform⁩: ⁦rotate⁩(-⁦32deg⁩); ⁦box-shadow⁩: ⁦0 20px 20px⁩ #0008; ⁦animation⁩: ⁦wand-float 5s ease-in-out infinite⁩; ‏ } .⁦wand::after⁩ { ⁦content⁩: ""; ⁦position⁩: ⁦absolute⁩; ⁦right⁩: ⁦0⁩; ⁦top⁩: -⁦3px⁩; ⁦width⁩: ⁦73px⁩; ⁦height⁩: ⁦15px⁩; ⁦border-radius⁩: ⁦6px⁩; ⁦background⁩: ⁦repeating-linear-gradient⁩(⁦90deg⁩, #362016 ⁦0 5px⁩, #785135 ⁦6px 8px⁩); ‏ } .⁦wand-tip⁩ { ⁦position⁩: ⁦absolute⁩; ⁦left⁩: -⁦3px⁩; ⁦top⁩: ⁦0⁩; ⁦width⁩: ⁦8px⁩; ⁦height⁩: ⁦8px⁩; ⁦border-radius⁩: ⁦50⁩%; ⁦background⁩: #fff5d1; ⁦box-shadow⁩: ⁦0 0 15px 5px⁩ #ffe7a6, ⁦0 0 60px 20px⁩ #dfbb7370, ⁦0 0 110px 45px⁩ #dfbb7320; ⁦animation⁩: ⁦pulse 3s ease-in-out infinite⁩; ‏ } .⁦spell-word⁩ { ⁦position⁩: ⁦absolute⁩; ⁦bottom⁩: ⁦15px⁩; ⁦font-family⁩: ⁦Georgia⁩, ⁦serif⁩; ⁦color⁩: ⁦var⁩(--⁦gold⁩); ⁦letter-spacing⁩: ⁦7px⁩; ⁦font-size⁩: ⁦16px⁩; ⁦text-shadow⁩: ⁦0 0 25px⁩ #dfbb7370; ‏ } ⁦footer⁩ { ⁦border-top⁩: ⁦1px solid var⁩(--⁦line⁩); ⁦padding⁩: ⁦28px 0⁩; ‏ } .⁦footer-content⁩ { ⁦display⁩: ⁦flex⁩; ⁦justify-content⁩: ⁦space-between⁩; ⁦align-items⁩: ⁦center⁩; ⁦gap⁩: ⁦20px⁩; ⁦font-size⁩: ⁦11px⁩; ⁦color⁩: ⁦var⁩(--⁦muted⁩); ⁦line-height⁩: ⁦2⁩; ‏ } .⁦footer-content a⁩ { ⁦color⁩: ⁦var⁩(--⁦gold⁩); } .⁦toast⁩ { ⁦position⁩: ⁦fixed⁩; ⁦bottom⁩: ⁦25px⁩; ⁦left⁩: ⁦50⁩%; ⁦width⁩: ⁦max-content⁩; ⁦max-width⁩: ⁦90⁩%; ⁦transform⁩: ⁦translate⁩(-⁦50⁩%, ⁦25px⁩); ⁦opacity⁩: ⁦0⁩; ⁦pointer-events⁩: ⁦none⁩; ⁦z-index⁩: ⁦30⁩; ⁦padding⁩: ⁦14px 24px⁩; ⁦text-align⁩: ⁦center⁩; ⁦background⁩: #10191ef2; ⁦border⁩: ⁦1px solid var⁩(--⁦gold⁩); ⁦border-radius⁩: ⁦10px⁩; ⁦color⁩: ⁦var⁩(--⁦gold-light⁩); ⁦backdrop-filter⁩: ⁦blur⁩(⁦15px⁩); ⁦font-size⁩: ⁦13px⁩; ⁦transition⁩: ⁦opacity⁩ .⁦3s⁩, ⁦transform⁩ .⁦3s⁩; ‏ } .⁦toast.show⁩ { ⁦opacity⁩: ⁦1⁩; ⁦transform⁩: ⁦translate⁩(-⁦50⁩%, ⁦0⁩); } .⁦reveal⁩ { ⁦opacity⁩: ⁦0⁩; ⁦transform⁩: ⁦translateY⁩(⁦25px⁩); ⁦transition⁩: ⁦opacity⁩ .⁦8s⁩, ⁦transform⁩ .⁦8s⁩; ‏ } .⁦reveal.visible⁩ { ⁦opacity⁩: ⁦1⁩; ⁦transform⁩: ⁦translateY⁩(⁦0⁩); } @keyframes ⁦levitate⁩ { ⁦0⁩%, ⁦100⁩% { ⁦transform⁩: ⁦translateY⁩(⁦0⁩); } ⁦50⁩% { ⁦transform⁩: ⁦translateY⁩(-⁦18px⁩); } ‏ } @keyframes ⁦orbit⁩ { ⁦to⁩ { ⁦transform⁩: ⁦rotate⁩(⁦360deg⁩); } } @keyframes ⁦shadow⁩ { ⁦0⁩%, ⁦100⁩% { ⁦transform⁩: ⁦scale⁩(⁦1⁩); ⁦opacity⁩: .⁦6⁩; } ⁦50⁩% { ⁦transform⁩: ⁦scale⁩(.⁦8⁩); ⁦opacity⁩: .⁦35⁩; } ‏ } @keyframes ⁦pulse⁩ { ⁦0⁩%, ⁦100⁩% { ⁦opacity⁩: .⁦7⁩; } ⁦50⁩% { ⁦opacity⁩: ⁦1⁩; } ‏ } @keyframes ⁦wand-float⁩ { ⁦0⁩%, ⁦100⁩% { ⁦transform⁩: ⁦translateY⁩(⁦0⁩) ⁦rotate⁩(-⁦32deg⁩); } ⁦50⁩% { ⁦transform⁩: ⁦translateY⁩(-⁦12px⁩) ⁦rotate⁩(-⁦27deg⁩); } ‏ } @media (⁦max-width⁩: ⁦1000px⁩) { .⁦hero⁩ { ⁦gap⁩: ⁦10px⁩; } .⁦scene⁩ { ⁦transform⁩: ⁦scale⁩(.⁦85⁩); } .⁦houses-grid⁩ { ⁦gap⁩: ⁦12px⁩; } ‏ } @media (⁦max-width⁩: ⁦760px⁩) { .⁦nav⁩ { ⁦min-height⁩: ⁦76px⁩; ⁦gap⁩: ⁦12px⁩; } .⁦nav-links⁩ { ⁦display⁩: ⁦none⁩; } .⁦nav-cta⁩ { ⁦padding⁩: ⁦9px 12px⁩; } .⁦hero⁩ { ⁦grid-template-columns⁩: ⁦1fr⁩; ⁦padding-top⁩: ⁦48px⁩; ⁦padding-bottom⁩: ⁦35px⁩; ⁦gap⁩: ⁦0⁩; ‏ } .⁦hero-copy⁩ { ⁦text-align⁩: ⁦center⁩; } .⁦hero-copy⁩ > ⁦p⁩ { ⁦margin-inline⁩: ⁦auto⁩; } .⁦hero-actions⁩, .⁦hero-note⁩ { ⁦justify-content⁩: ⁦center⁩; } ⁦h1⁩ { ⁦font-size⁩: ⁦clamp⁩(⁦36px⁩, ⁦8vw⁩, ⁦54px⁩); } .⁦scene⁩ { ⁦height⁩: ⁦500px⁩; ⁦transform⁩: ⁦scale⁩(.⁦88⁩); } .⁦label-one⁩ { ⁦right⁩: ⁦0⁩; } .⁦label-two⁩ { ⁦left⁩: ⁦0⁩; } .⁦houses-grid⁩ { ⁦grid-template-columns⁩: ⁦repeat⁩(⁦2⁩, ⁦1fr⁩); } ⁦section⁩ { ⁦padding-block⁩: ⁦55px⁩; } .⁦spell-panel⁩ { ⁦grid-template-columns⁩: ⁦1fr⁩; ⁦padding⁩: ⁦30px 23px⁩; ⁦text-align⁩: ⁦center⁩; ⁦gap⁩: ⁦15px⁩; ‏ } .⁦spell-panel p⁩ { ⁦margin-inline⁩: ⁦auto⁩; } .⁦footer-content⁩ { ⁦flex-direction⁩: ⁦column⁩; ⁦text-align⁩: ⁦center⁩; ⁦gap⁩: ⁦8px⁩; } ‏ } @media (⁦max-width⁩: ⁦400px⁩) { .⁦scene⁩ { ⁦transform⁩: ⁦scale⁩(.⁦73⁩); ⁦margin-block⁩: -⁦35px⁩; } .⁦floating-label⁩ { ⁦font-size⁩: ⁦10px⁩; ⁦padding⁩: ⁦10px⁩; } .⁦brand small⁩ { ⁦letter-spacing⁩: ⁦2px⁩; } .⁦house-card⁩ { ⁦padding-inline⁩: ⁦8px⁩; } .⁦house-card⁩ .⁦english⁩ { ⁦letter-spacing⁩: ⁦1px⁩; } ‏ } @media (⁦prefers-reduced-motion⁩: ⁦reduce⁩) { ⁦html⁩ { ⁦scroll-behavior⁩: ⁦auto⁩; } *, *::⁦before⁩, *::⁦after⁩ { ⁦animation⁩: ⁦none⁩ !⁦important⁩; ⁦transition⁩: ⁦none⁩ !⁦important⁩; ‏ } .⁦reveal⁩ { ⁦opacity⁩: ⁦1⁩; ⁦transform⁩: ⁦none⁩; } ‏ } </⁦style⁩> </⁦head⁩> <⁦body id⁩="⁦top⁩"> <⁦div class⁩="⁦ambient⁩" ⁦aria-hidden⁩="⁦true⁩"></⁦div⁩> <⁦canvas id⁩="⁦magic⁩" ⁦aria-hidden⁩="⁦true⁩"></⁦canvas⁩> <⁦header⁩> <⁦nav class⁩="⁦nav container⁩" ⁦aria-label⁩="ناوبری اصلی"> <⁦a class⁩="⁦brand⁩" ⁦href⁩="#top" ⁦aria-label⁩="هاگوارتز؛ ابتدای صفحه"> <⁦span class⁩="⁦brand-symbol⁩" ⁦aria-hidden⁩="⁦true⁩">⁦H⁩</⁦span⁩> <⁦span⁩> <⁦strong⁩>هاگوارتز</⁦strong⁩> <⁦small lang⁩="⁦en⁩" ⁦dir⁩="⁦ltr⁩">⁦THE WIZARDING WORLD⁩</⁦small⁩> </⁦span⁩> </⁦a⁩> <⁦div class⁩="⁦nav-links⁩"> <⁦a href⁩="#top">دنیای جادو</⁦a⁩> <⁦a href⁩="#houses">گروه‌های هاگوارتز</⁦a⁩> <⁦a href⁩="#spells">کلاس طلسم‌ها</⁦a⁩> </⁦div⁩> <⁦a class⁩="⁦nav-cta⁩" ⁦href⁩="#houses">نامه‌ات رسیده است ↗</⁦a⁩> </⁦nav⁩> </⁦header⁩> <⁦main⁩> <⁦div class⁩="⁦hero container⁩"> <⁦div class⁩="⁦hero-copy⁩"> <⁦span class⁩="⁦eyebrow⁩">سکوی نه و سه‌چهارم منتظر توست</⁦span⁩> <⁦h1⁩> بعضی داستان‌ها<⁦br⁩> <⁦span class⁩="⁦gold-text⁩">با تو جادویی می‌شوند.</⁦span⁩> </⁦h1⁩> <⁦p⁩> آن سوی دنیای معمولی، جایی میان راهروهای اسرارآمیز و آسمان پرستاره، خانه‌ای برای جادوی تو وجود دارد. به هاگوارتز خوش آمدی. </⁦p⁩> <⁦div class⁩="⁦hero-actions⁩"> <⁦a class⁩="⁦button button-primary⁩" ⁦href⁩="#houses"> گروهت را پیدا کن <⁦span aria-hidden⁩="⁦true⁩">←</⁦span⁩> </⁦a⁩> <⁦button class⁩="⁦button button-secondary⁩" ⁦type⁩="⁦button⁩" ⁦id⁩="⁦hero-spell⁩"> <⁦span aria-hidden⁩="⁦true⁩">✧</⁦span⁩> کمی جادو کن </⁦button⁩> </⁦div⁩> <⁦div class⁩="⁦hero-note⁩"> <⁦span class⁩="⁦status-dot⁩" ⁦aria-hidden⁩="⁦true⁩"></⁦span⁩> ورود برای جادوگران، رویاپردازان و مشنگ‌های کنجکاو آزاد است. </⁦div⁩> </⁦div⁩> <⁦div class⁩="⁦scene⁩" ⁦id⁩="⁦scene⁩" ⁦role⁩="⁦img⁩" ⁦aria-label⁩="کتاب سه‌بعدی شناور هاگوارتز با مدارهای جادویی"> <⁦div class⁩="⁦orbit⁩" ⁦aria-hidden⁩="⁦true⁩"></⁦div⁩> <⁦div class⁩="⁦orbit second⁩" ⁦aria-hidden⁩="⁦true⁩"></⁦div⁩> <⁦div class⁩="⁦book-shadow⁩" ⁦aria-hidden⁩="⁦true⁩"></⁦div⁩> <⁦div class⁩="⁦book-float⁩" ⁦aria-hidden⁩="⁦true⁩"> <⁦div class⁩="⁦book⁩" ⁦id⁩="⁦book⁩"> <⁦div class⁩="⁦book-back⁩"></⁦div⁩> <⁦div class⁩="⁦book-spine⁩"><⁦span⁩>⁦HOGWARTS⁩ • ⁦MAGIC⁩</⁦span⁩></⁦div⁩> <⁦div class⁩="⁦book-pages⁩"></⁦div⁩> <⁦div class⁩="⁦book-top⁩"></⁦div⁩> <⁦div class⁩="⁦book-front⁩" ⁦dir⁩="⁦ltr⁩"> <⁦div class⁩="⁦book-kicker⁩">⁦SCHOOL OF MAGIC⁩</⁦div⁩> <⁦div class⁩="⁦book-crest⁩">⁦H⁩</⁦div⁩> <⁦div class⁩="⁦book-title⁩">⁦HOGWARTS⁩</⁦div⁩> <⁦div class⁩="⁦book-subtitle⁩">⁦DRACO DORMIENS NUNQUAM TITILLANDUS⁩</⁦div⁩> </⁦div⁩> </⁦div⁩> </⁦div⁩> <⁦div class⁩="⁦floating-label label-one⁩" ⁦aria-hidden⁩="⁦true⁩"> ✦ یک دنیای پنهان <⁦span⁩>هزاران رازِ کشف‌نشده</⁦span⁩> </⁦div⁩> <⁦div class⁩="⁦floating-label label-two⁩" ⁦aria-hidden⁩="⁦true⁩"> ✉ نامه‌ای برای تو <⁦span⁩>ما از قبل منتظرت بودیم</⁦span⁩> </⁦div⁩> <⁦span class⁩="⁦scene-caption⁩" ⁦aria-hidden⁩="⁦true⁩">نشانگر را روی کتاب حرکت بده</⁦span⁩> </⁦div⁩> </⁦div⁩> <⁦div class⁩="⁦container divider⁩" ⁦aria-hidden⁩="⁦true⁩">✦</⁦div⁩> <⁦section class⁩="⁦container reveal⁩" ⁦id⁩="⁦houses⁩" ⁦aria-labelledby⁩="⁦houses-title⁩"> <⁦div class⁩="⁦section-heading⁩"> <⁦span class⁩="⁦eyebrow⁩">چهار گروه، یک سرنوشت جادویی</⁦span⁩> <⁦h2 id⁩="⁦houses-title⁩">کدام گروه، <⁦span class⁩="⁦gold-text⁩">خانهٔ توست؟</⁦span⁩></⁦h2⁩> <⁦p⁩>شجاعت، جاه‌طلبی، خرد یا وفاداری؟ گروهی را انتخاب کن که به روحت نزدیک‌تر است.</⁦p⁩> </⁦div⁩> <⁦div class⁩="⁦houses-grid⁩" ⁦role⁩="⁦group⁩" ⁦aria-label⁩="انتخاب گروه هاگوارتز"> <⁦button class⁩="⁦house-card⁩" ⁦type⁩="⁦button⁩" ⁦data-house⁩="⁦gryffindor⁩" ⁦style⁩="--⁦color⁩:#d2695c" ⁦aria-pressed⁩="⁦false⁩"> <⁦span class⁩="⁦house-icon⁩" ⁦aria-hidden⁩="⁦true⁩"> <⁦svg viewBox⁩="⁦0 0 48 48⁩" ⁦fill⁩="⁦none⁩" ⁦stroke⁩="⁦currentColor⁩" ⁦stroke-width⁩="⁦1.7⁩"> <⁦path d⁩="⁦M24 4 12 10 7 23l6 13 11 8 11-8 6-13-5-13Z⁩"/> <⁦path d⁩="⁦m15 18 3-6 6 3 6-3 3 6-2 14-7 6-7-6Z⁩"/> <⁦path d⁩="⁦m18 23 3 1m6 0 3-1m-9 6h6l-3 4Z⁩"/> </⁦svg⁩> </⁦span⁩> <⁦span class⁩="⁦english⁩" ⁦lang⁩="⁦en⁩" ⁦dir⁩="⁦ltr⁩">⁦GRYFFINDOR⁩</⁦span⁩> <⁦h3⁩>گریفیندور</⁦h3⁩> <⁦p⁩>شجاعت، جسارت و دلیری</⁦p⁩> </⁦button⁩> <⁦button class⁩="⁦house-card⁩" ⁦type⁩="⁦button⁩" ⁦data-house⁩="⁦slytherin⁩" ⁦style⁩="--⁦color⁩:#76b798" ⁦aria-pressed⁩="⁦false⁩"> <⁦span class⁩="⁦house-icon⁩" ⁦aria-hidden⁩="⁦true⁩"> <⁦svg viewBox⁩="⁦0 0 48 48⁩" ⁦fill⁩="⁦none⁩" ⁦stroke⁩="⁦currentColor⁩" ⁦stroke-width⁩="⁦1.7⁩"> <⁦path d⁩="⁦M35 11c-4-8-22-6-22 4 0 11 23 4 23 17 0 12-25 14-25 1⁩"/> <⁦path d⁩="⁦M29 10c-6-2-11 1-10 5 1 5 23 2 23 17 0 17-35 21-36 1⁩"/> <⁦path d⁩="⁦m29 10 8 5 5-5-7-3m4 7 3 5m-3-2 5 1⁩"/> <⁦circle cx⁩="⁦35⁩" ⁦cy⁩="⁦10⁩" ⁦r⁩="⁦1⁩" ⁦fill⁩="⁦currentColor⁩"/> </⁦svg⁩> </⁦span⁩> <⁦span class⁩="⁦english⁩" ⁦lang⁩="⁦en⁩" ⁦dir⁩="⁦ltr⁩">⁦SLYTHERIN⁩</⁦span⁩> <⁦h3⁩>اسلیترین</⁦h3⁩> <⁦p⁩>جاه‌طلبی، تدبیر و اراده</⁦p⁩> </⁦button⁩> <⁦button class⁩="⁦house-card⁩" ⁦type⁩="⁦button⁩" ⁦data-house⁩="⁦ravenclaw⁩" ⁦style⁩="--⁦color⁩:#83a9d3" ⁦aria-pressed⁩="⁦false⁩"> <⁦span class⁩="⁦house-icon⁩" ⁦aria-hidden⁩="⁦true⁩"> <⁦svg viewBox⁩="⁦0 0 48 48⁩" ⁦fill⁩="⁦none⁩" ⁦stroke⁩="⁦currentColor⁩" ⁦stroke-width⁩="⁦1.7⁩"> <⁦path d⁩="⁦m24 17-8-8-12-4 5 13 10 8-5 11 10-5 10 5-5-11 10-8 5-13-12 4Z⁩"/> <⁦path d⁩="⁦m24 17 1-8 5-3 5 5-7 2m-4 19v11m-5-17L9 12m20 14 10-14⁩"/> </⁦svg⁩> </⁦span⁩> <⁦span class⁩="⁦english⁩" ⁦lang⁩="⁦en⁩" ⁦dir⁩="⁦ltr⁩">⁦RAVENCLAW⁩</⁦span⁩> <⁦h3⁩>ریونکلاو</⁦h3⁩> <⁦p⁩>خرد، خلاقیت و کنجکاوی</⁦p⁩> </⁦button⁩> <⁦button class⁩="⁦house-card⁩" ⁦type⁩="⁦button⁩" ⁦data-house⁩="⁦hufflepuff⁩" ⁦style⁩="--⁦color⁩:#dec16f" ⁦aria-pressed⁩="⁦false⁩"> <⁦span class⁩="⁦house-icon⁩" ⁦aria-hidden⁩="⁦true⁩"> <⁦svg viewBox⁩="⁦0 0 48 48⁩" ⁦fill⁩="⁦none⁩" ⁦stroke⁩="⁦currentColor⁩" ⁦stroke-width⁩="⁦1.7⁩"> <⁦path d⁩="⁦m10 17-2-9 9 3 7-2 7 2 9-3-2 9 2 11-8 11-8 5-8-5-8-11Z⁩"/> <⁦path d⁩="⁦m17 11-3 15 10 12 10-12-3-15M14 26l7-4m13 4-7-4m-6 9h6l-3 4Z⁩"/> </⁦svg⁩> </⁦span⁩> <⁦span class⁩="⁦english⁩" ⁦lang⁩="⁦en⁩" ⁦dir⁩="⁦ltr⁩">⁦HUFFLEPUFF⁩</⁦span⁩> <⁦h3⁩>هافلپاف</⁦h3⁩> <⁦p⁩>وفاداری، صبوری و مهربانی</⁦p⁩> </⁦button⁩> </⁦div⁩> <⁦div class⁩="⁦house-result⁩" ⁦id⁩="⁦house-result⁩" ⁦role⁩="⁦status⁩" ⁦aria-live⁩="⁦polite⁩"> ✧ انتخاب‌های ما هستند که نشان می‌دهند واقعاً چه کسی هستیم. </⁦div⁩> </⁦section⁩> <⁦section class⁩="⁦container spell-section reveal⁩" ⁦id⁩="⁦spells⁩" ⁦aria-labelledby⁩="⁦spells-title⁩"> <⁦div class⁩="⁦spell-panel⁩"> <⁦div⁩> <⁦span class⁩="⁦eyebrow⁩">اولین درس جادوگری</⁦span⁩> <⁦h2 id⁩="⁦spells-title⁩">تاریکی را با <⁦span class⁩="⁦gold-text⁩">یک کلمه</⁦span⁩> روشن کن.</⁦h2⁩> <⁦p⁩> لازم نیست تمام طلسم‌های دنیا را بلد باشی. گاهی فقط کمی نور کافی‌ست. چوب‌دستی‌ات را آماده کن و اولین طلسمت را اجرا کن. </⁦p⁩> <⁦button class⁩="⁦button button-primary⁩" ⁦type⁩="⁦button⁩" ⁦id⁩="⁦cast-spell⁩"> اجرای طلسم لوموس <⁦span aria-hidden⁩="⁦true⁩">✦</⁦span⁩> </⁦button⁩> </⁦div⁩> <⁦div class⁩="⁦wand-area⁩" ⁦aria-hidden⁩="⁦true⁩"> <⁦div class⁩="⁦wand⁩"><⁦div class⁩="⁦wand-tip⁩" ⁦id⁩="⁦wand-tip⁩"></⁦div⁩></⁦div⁩> <⁦div class⁩="⁦spell-word⁩" ⁦lang⁩="⁦en⁩" ⁦dir⁩="⁦ltr⁩">⁦LUMOS⁩</⁦div⁩> </⁦div⁩> </⁦div⁩> </⁦section⁩> </⁦main⁩> <⁦footer⁩> <⁦div class⁩="⁦container footer-content⁩"> <⁦span⁩>ساخته‌شده برای عاشقان دنیای جادو ✦ پروژهٔ هواداری و غیررسمی هری پاتر</⁦span⁩> <⁦a href⁩="#top">بازگشت به بالای صفحه ↑</⁦a⁩> </⁦div⁩> </⁦footer⁩> <⁦div class⁩="⁦toast⁩" ⁦id⁩="⁦toast⁩" ⁦role⁩="⁦status⁩" ⁦aria-live⁩="⁦polite⁩"></⁦div⁩> <⁦script⁩> ⁦const motionPreference⁩ = ⁦window.matchMedia⁩('(⁦prefers-reduced-motion⁩: ⁦reduce⁩)'); ⁦let reducedMotion⁩ = ⁦motionPreference.matches⁩; // کتاب سه‌بعدی: زاویه‌ها نسبت به محل نشانگر محاسبه می‌شوند. ⁦const scene⁩ = ⁦document.getElementById⁩('⁦scene⁩'); ⁦const book⁩ = ⁦document.getElementById⁩('⁦book⁩'); ⁦scene.addEventListener⁩('⁦pointermove⁩', (⁦event⁩) => { ⁦if⁩ (⁦reducedMotion⁩ || ⁦event.pointerType⁩ === '⁦touch⁩') ⁦return⁩; ⁦const rect⁩ = ⁦scene.getBoundingClientRect⁩(); ⁦const x⁩ = (⁦event.clientX⁩ - ⁦rect.left⁩) / ⁦rect.width⁩ - ⁦0.5⁩; ⁦const y⁩ = (⁦event.clientY⁩ - ⁦rect.top⁩) / ⁦rect.height⁩ - ⁦0.5⁩; ⁦book.style.transform⁩ = ` ⁦rotateX⁩(${⁦9⁩ - ⁦y⁩ * ⁦22⁩}⁦deg⁩) ⁦rotateY⁩(${-⁦24⁩ + ⁦x⁩ * ⁦38⁩}⁦deg⁩) ⁦rotateZ⁩(${-⁦7⁩ + ⁦x⁩ * ⁦7⁩}⁦deg⁩) ‏ `; ‏ }); ⁦scene.addEventListener⁩('⁦pointerleave⁩', () => { ⁦book.style.transform⁩ = ''; ‏ }); // ظاهرشدن بخش‌ها هنگام اسکرول، با پشتیبانی مرورگرهای قدیمی. ⁦const revealElements⁩ = ⁦document.querySelectorAll⁩('.⁦reveal⁩'); ⁦if⁩ ('⁦IntersectionObserver⁩' ⁦in window⁩) { ⁦const observer⁩ = ⁦new IntersectionObserver⁩((⁦entries⁩) => { ⁦entries.forEach⁩((⁦entry⁩) => { ⁦if⁩ (!⁦entry.isIntersecting⁩) ⁦return⁩; ⁦entry.target.classList.add⁩('⁦visible⁩'); ⁦observer.unobserve⁩(⁦entry.target⁩); ‏ }); }, { ⁦threshold⁩: ⁦0.12⁩ }); ⁦revealElements.forEach⁩((⁦element⁩) => ⁦observer.observe⁩(⁦element⁩)); } ⁦else⁩ { ⁦revealElements.forEach⁩((⁦element⁩) => ⁦element.classList.add⁩('⁦visible⁩')); ‏ } // انتخاب گروه ⁦const houses⁩ = { ⁦gryffindor⁩: { ⁦name⁩: 'گریفیندور', ⁦color⁩: '#d2695c', ⁦text⁩: 'جایی برای قلب‌های شجاع؛ ماجراجویی از همین لحظه آغاز شد!' ‏ }, ⁦slytherin⁩: { ⁦name⁩: 'اسلیترین', ⁦color⁩: '#76b798', ⁦text⁩: 'برای ذهن‌های زیرک و اراده‌های بزرگ؛ آینده را خودت می‌سازی.' ‏ }, ⁦ravenclaw⁩: { ⁦name⁩: 'ریونکلاو', ⁦color⁩: '#83a9d3', ⁦text⁩: 'خانهٔ ذهن‌های کنجکاو؛ هر پرسش، دری به یک دنیای تازه است.' ‏ }, ⁦hufflepuff⁩: { ⁦name⁩: 'هافلپاف', ⁦color⁩: '#dec16f', ⁦text⁩: 'جایی که مهربانی قدرت است و هیچ دوستی تنها نمی‌ماند.' ‏ } ‏ }; ⁦const houseCards⁩ = ⁦document.querySelectorAll⁩('.⁦house-card⁩'); ⁦const houseResult⁩ = ⁦document.getElementById⁩('⁦house-result⁩'); ⁦houseCards.forEach⁩((⁦card⁩) => { ⁦card.addEventListener⁩('⁦click⁩', () => { ⁦const house⁩ = ⁦houses⁩[⁦card.dataset.house⁩]; ⁦houseCards.forEach⁩((⁦item⁩) => { ⁦item.setAttribute⁩('⁦aria-pressed⁩', ⁦String⁩(⁦item⁩ === ⁦card⁩)); ‏ }); ⁦document.documentElement.style.setProperty⁩('--⁦house⁩', ⁦house.color⁩); ⁦const title⁩ = ⁦document.createElement⁩('⁦strong⁩'); ⁦title.textContent⁩ = `به ${⁦house.name⁩} خوش آمدی!`; ⁦houseResult.replaceChildren⁩(⁦title⁩, ⁦document.createTextNode⁩(` ${⁦house.text⁩}`)); ⁦const rect⁩ = ⁦card.getBoundingClientRect⁩(); ⁦burst⁩(⁦rect.left⁩ + ⁦rect.width⁩ / ⁦2⁩, ⁦rect.top⁩ + ⁦55⁩, ⁦house.color⁩, ⁦55⁩); ‏ }); ‏ }); // ذرات جادویی: ⁦Canvas⁩ بدون کتابخانه ⁦const canvas⁩ = ⁦document.getElementById⁩('⁦magic⁩'); ⁦const ctx⁩ = ⁦canvas.getContext⁩('⁦2d⁩'); ⁦let width⁩ = ⁦0⁩; ⁦let height⁩ = ⁦0⁩; ⁦let stars⁩ = []; ⁦let sparks⁩ = []; ⁦let animationId⁩ = ⁦null⁩; ⁦let lastTime⁩ = ⁦0⁩; ⁦function resizeCanvas⁩() { ⁦width⁩ = ⁦window.innerWidth⁩; ⁦height⁩ = ⁦window.innerHeight⁩; ⁦const dpr⁩ = ⁦Math.min⁩(⁦window.devicePixelRatio⁩ || ⁦1⁩, ⁦2⁩); ⁦canvas.width⁩ = ⁦Math.round⁩(⁦width⁩ * ⁦dpr⁩); ⁦canvas.height⁩ = ⁦Math.round⁩(⁦height⁩ * ⁦dpr⁩); ⁦if⁩ (!⁦ctx⁩) ⁦return⁩; ⁦ctx.setTransform⁩(⁦dpr⁩, ⁦0⁩, ⁦0⁩, ⁦dpr⁩, ⁦0⁩, ⁦0⁩); ⁦stars⁩ = ⁦Array.from⁩({ ⁦length⁩: ⁦Math.min⁩(⁦85⁩, ⁦Math.floor⁩(⁦width⁩ / ⁦16⁩)) ‏ }, () => ({ ⁦x⁩: ⁦Math.random⁩() * ⁦width⁩, ⁦y⁩: ⁦Math.random⁩() * ⁦height⁩, ⁦radius⁩: ⁦Math.random⁩() * ⁦1.3⁩ + ⁦0.3⁩, ⁦speed⁩: ⁦Math.random⁩() * ⁦0.22⁩ + ⁦0.08⁩, ⁦phase⁩: ⁦Math.random⁩() * ⁦Math.PI⁩ * ⁦2⁩ ‏ })); ⁦if⁩ (⁦reducedMotion⁩) ⁦renderFrame⁩(⁦0⁩); ‏ } ⁦function burst⁩(⁦x⁩, ⁦y⁩, ⁦color⁩ = '#ffe2a0', ⁦count⁩ = ⁦75⁩) { ⁦if⁩ (⁦reducedMotion⁩ || !⁦ctx⁩) ⁦return⁩; ⁦for⁩ (⁦let i⁩ = ⁦0⁩; ⁦i⁩ < ⁦count⁩; ⁦i⁩++) { ⁦const angle⁩ = ⁦Math.random⁩() * ⁦Math.PI⁩ * ⁦2⁩; ⁦const speed⁩ = ⁦Math.random⁩() * ⁦4⁩ + ⁦0.6⁩; ⁦sparks.push⁩({ ⁦x⁩, ⁦y⁩, ⁦vx⁩: ⁦Math.cos⁩(⁦angle⁩) * ⁦speed⁩, ⁦vy⁩: ⁦Math.sin⁩(⁦angle⁩) * ⁦speed⁩, ⁦life⁩: ⁦1⁩, ⁦decay⁩: ⁦Math.random⁩() * ⁦0.012⁩ + ⁦0.009⁩, ⁦radius⁩: ⁦Math.random⁩() * ⁦2.4⁩ + ⁦0.6⁩, ⁦color⁩ ‏ }); ‏ } // جلوگیری از افزایش بی‌رویهٔ ذرات در کلیک‌های متوالی ⁦if⁩ (⁦sparks.length⁩ > ⁦450⁩) ⁦sparks.splice⁩(⁦0⁩, ⁦sparks.length⁩ - ⁦450⁩); ‏ } ⁦function renderFrame⁩(⁦time⁩) { ⁦if⁩ (!⁦ctx⁩) ⁦return⁩; ⁦const delta⁩ = ⁦lastTime⁩ ? ⁦Math.min⁩((⁦time⁩ - ⁦lastTime⁩) / ⁦16.67⁩, ⁦2⁩) : ⁦1⁩; ⁦lastTime⁩ = ⁦time⁩; ⁦ctx.clearRect⁩(⁦0⁩, ⁦0⁩, ⁦width⁩, ⁦height⁩); ⁦stars.forEach⁩((⁦star⁩) => { ⁦if⁩ (!⁦reducedMotion⁩) { ⁦star.y⁩ -= ⁦star.speed⁩ * ⁦delta⁩; ⁦if⁩ (⁦star.y⁩ < -⁦5⁩) ⁦star.y⁩ = ⁦height⁩ + ⁦5⁩; ‏ } ⁦ctx.globalAlpha⁩ = ⁦0.2⁩ + ( ⁦Math.sin⁩(⁦time⁩ * ⁦0.0007⁩ + ⁦star.phase⁩) + ⁦1⁩ ‏ ) * ⁦0.2⁩; ⁦ctx.fillStyle⁩ = '#e9d9ae'; ⁦ctx.beginPath⁩(); ⁦ctx.arc⁩(⁦star.x⁩, ⁦star.y⁩, ⁦star.radius⁩, ⁦0⁩, ⁦Math.PI⁩ * ⁦2⁩); ⁦ctx.fill⁩(); ‏ }); ⁦for⁩ (⁦let i⁩ = ⁦sparks.length⁩ - ⁦1⁩; ⁦i⁩ >= ⁦0⁩; ⁦i⁩--) { ⁦const spark⁩ = ⁦sparks⁩[⁦i⁩]; ⁦spark.x⁩ += ⁦spark.vx⁩ * ⁦delta⁩; ⁦spark.y⁩ += ⁦spark.vy⁩ * ⁦delta⁩; ⁦spark.vy⁩ += ⁦0.025⁩ * ⁦delta⁩; ⁦spark.life⁩ -= ⁦spark.decay⁩ * ⁦delta⁩; ⁦if⁩ (⁦spark.life⁩ <= ⁦0⁩) { ⁦sparks.splice⁩(⁦i⁩, ⁦1⁩); ⁦continue⁩; ‏ } ⁦ctx.globalAlpha⁩ = ⁦spark.life⁩; ⁦ctx.fillStyle⁩ = ⁦spark.color⁩; ⁦ctx.shadowColor⁩ = ⁦spark.color⁩; ⁦ctx.shadowBlur⁩ = ⁦9⁩; ⁦ctx.beginPath⁩(); ⁦ctx.arc⁩(⁦spark.x⁩, ⁦spark.y⁩, ⁦spark.radius⁩ * ⁦spark.life⁩, ⁦0⁩, ⁦Math.PI⁩ * ⁦2⁩); ⁦ctx.fill⁩(); ‏ } ⁦ctx.shadowBlur⁩ = ⁦0⁩; ⁦ctx.globalAlpha⁩ = ⁦1⁩; ‏ } ⁦function animate⁩(⁦time⁩) { ⁦renderFrame⁩(⁦time⁩); ⁦animationId⁩ = ⁦requestAnimationFrame⁩(⁦animate⁩); ‏ } ⁦function updateAnimation⁩() { ⁦if⁩ (⁦animationId⁩ !== ⁦null⁩) ⁦cancelAnimationFrame⁩(⁦animationId⁩); ⁦animationId⁩ = ⁦null⁩; ⁦lastTime⁩ = ⁦0⁩; ⁦if⁩ (⁦document.hidden⁩ || !⁦ctx⁩) ⁦return⁩; ⁦if⁩ (⁦reducedMotion⁩) { ⁦sparks⁩ = []; ⁦renderFrame⁩(⁦0⁩); } ⁦else⁩ { ⁦animationId⁩ = ⁦requestAnimationFrame⁩(⁦animate⁩); ‏ } ‏ } ⁦window.addEventListener⁩('⁦resize⁩', ⁦resizeCanvas⁩); ⁦document.addEventListener⁩('⁦visibilitychange⁩', ⁦updateAnimation⁩); ⁦motionPreference.addEventListener⁩('⁦change⁩', (⁦event⁩) => { ⁦reducedMotion⁩ = ⁦event.matches⁩; ⁦book.style.transform⁩ = ''; ⁦updateAnimation⁩(); ‏ }); ⁦resizeCanvas⁩(); ⁦updateAnimation⁩(); // دنبالهٔ ظریف جادو برای نشانگر موس ⁦let lastTrail⁩ = ⁦0⁩; ⁦window.addEventListener⁩('⁦pointermove⁩', (⁦event⁩) => { ⁦const now⁩ = ⁦performance.now⁩(); ⁦if⁩ (⁦event.pointerType⁩ !== '⁦mouse⁩' || ⁦now⁩ - ⁦lastTrail⁩ < ⁦65⁩) ⁦return⁩; ⁦lastTrail⁩ = ⁦now⁩; ⁦burst⁩(⁦event.clientX⁩, ⁦event.clientY⁩, '#dfbb73', ⁦1⁩); }, { ⁦passive⁩: ⁦true⁩ }); // اجرای طلسم و پیام قابل‌دسترسی ⁦const toast⁩ = ⁦document.getElementById⁩('⁦toast⁩'); ⁦let toastTimer⁩; ⁦function showToast⁩(⁦message⁩) { ⁦clearTimeout⁩(⁦toastTimer⁩); ⁦toast.textContent⁩ = ⁦message⁩; ⁦toast.classList.add⁩('⁦show⁩'); ⁦toastTimer⁩ = ⁦setTimeout⁩(() => ⁦toast.classList.remove⁩('⁦show⁩'), ⁦3500⁩); ‏ } ⁦document.getElementById⁩('⁦hero-spell⁩').⁦addEventListener⁩('⁦click⁩', () => { ⁦const rect⁩ = ⁦book.getBoundingClientRect⁩(); ⁦burst⁩( ⁦rect.left⁩ + ⁦rect.width⁩ / ⁦2⁩, ⁦rect.top⁩ + ⁦rect.height⁩ / ⁦2⁩, '#ffe2a0', ‏ ⁦120⁩ ‏ ); ⁦showToast⁩('وینگاردیوم لویوسا! ✦ کتابت به پرواز درآمده است.'); ⁦if⁩ (!⁦reducedMotion⁩ && ⁦book.animate⁩) { ⁦book.animate⁩([ { ⁦translate⁩: '⁦0 0⁩' }, { ⁦translate⁩: '⁦0⁩ -⁦45px⁩' }, { ⁦translate⁩: '⁦0 0⁩' } ‏ ], { ⁦duration⁩: ⁦1400⁩, ⁦easing⁩: '⁦ease-in-out⁩' ‏ }); ‏ } ‏ }); ⁦document.getElementById⁩('⁦cast-spell⁩').⁦addEventListener⁩('⁦click⁩', () => { ⁦const tip⁩ = ⁦document.getElementById⁩('⁦wand-tip⁩'); ⁦const rect⁩ = ⁦tip.getBoundingClientRect⁩(); ⁦burst⁩( ⁦rect.left⁩ + ⁦rect.width⁩ / ⁦2⁩, ⁦rect.top⁩ + ⁦rect.height⁩ / ⁦2⁩, '#fff1bd', ‏ ⁦150⁩ ‏ ); ⁦showToast⁩('لوموس! ✨ حتی در تاریک‌ترین لحظه‌ها، می‌توان نوری روشن کرد.'); ⁦if⁩ (!⁦reducedMotion⁩ && ⁦tip.animate⁩) { ⁦tip.animate⁩([ { ⁦scale⁩: '⁦1⁩', ⁦filter⁩: '⁦brightness⁩(⁦1⁩)' }, { ⁦scale⁩: '⁦3⁩', ⁦filter⁩: '⁦brightness⁩(⁦2⁩)' }, { ⁦scale⁩: '⁦1⁩', ⁦filter⁩: '⁦brightness⁩(⁦1⁩)' } ‏ ], { ⁦duration⁩: ⁦1000⁩, ⁦easing⁩: '⁦ease-out⁩' ‏ }); ‏ } ‏ }); </⁦script⁩> </⁦body⁩> </⁦html⁩>