134 lines
66 KiB
HTML
134 lines
66 KiB
HTML
<!doctype html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#05070b">
|
||
<meta name="description" content="صَقِل — اختَر الشرح الذي تفهمه، وتأكد أنك فهمت. استكشف رؤية التعلم المرتبط بالمنهج الأردني في تجربة تفاعلية.">
|
||
<title>صَقِل — الفهم، بطريقتك.</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&display=swap');
|
||
:root{color-scheme:dark;--bg:#05070b;--panel:rgba(22,22,26,.65);--line:rgba(255,255,255,.09);--text:#f5f5f7;--muted:#a1a8b5;--blue:#0071e3;--cyan:#00f5d4;--gold:#ff9f0a;--violet:#af52de;--green:#30d158;--font:-apple-system,BlinkMacSystemFont,"SF Pro AR","SF Pro Display","SF Pro Text","SF Arabic","Alexandria",sans-serif}
|
||
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}button{border:0}svg{display:block}::selection{background:#0071e370}p{color:var(--muted);line-height:1.95;margin:0}h1,h2,h3{margin:0;line-height:1.5}h2{font-size:clamp(30px,4.5vw,53px);font-weight:600;letter-spacing:-1.3px}h3{font-size:21px;font-weight:500}.wrap{width:min(1160px,calc(100% - 48px));margin:auto}.section{padding:112px 0;position:relative}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:.5px;display:flex;align-items:center;gap:10px;margin-bottom:17px}.eyebrow:before{content:"";width:22px;height:1px;background:currentColor}.intro{max-width:650px;margin-bottom:42px}.intro p{margin-top:16px;font-size:15px}.muted{color:var(--muted)}.small{font-size:12px;line-height:1.9}.latin{font-family:var(--font);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}.tag{display:inline-flex;gap:7px;align-items:center;padding:6px 11px;border-radius:30px;border:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.6}.dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:100px;padding:13px 23px;font-size:12px;background:#ffffff09;border:1px solid #ffffff20;transition:transform .2s,background .2s,box-shadow .2s;min-height:44px}.pill:hover{background:#ffffff14;transform:translateY(-2px)}.pill:active{transform:scale(.96)}.primary{background:var(--blue);border-color:transparent;box-shadow:0 4px 30px #0071e31a}.primary:hover{background:#1685f4;box-shadow:0 4px 35px #0071e34a}.arrow{font-family:Arial,sans-serif;font-size:20px}.glass{background:var(--panel);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%)}.skip{position:fixed;top:-100px;right:20px;z-index:100;background:var(--blue);padding:15px;border-radius:12px}.skip:focus{top:10px}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.ambient{pointer-events:none;position:fixed;inset:0;background:radial-gradient(450px circle at var(--mx,50%) var(--my,20%),#0071e308,transparent 75%);z-index:-1}
|
||
/* A quiet, floating navigation island. */
|
||
header{position:fixed;top:20px;left:0;right:0;z-index:50}.nav{width:min(1320px,calc(100% - 40px));margin:auto;padding:11px 20px;display:flex;align-items:center;gap:24px;border-radius:100px;background:#11141bbd;box-shadow:0 8px 30px #0005}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.wordmark{font-size:30px;font-weight:800;letter-spacing:-2px}.brand-mark{width:30px;height:32px;filter:drop-shadow(0 0 10px #00f5d440)}.version{font-size:9px;color:#939ba8;border-right:1px solid var(--line);padding-right:12px}.nav-links{display:flex;align-items:center;justify-content:center;gap:23px;flex:1;font-size:10px;color:#bdc3cd}.nav-links a:hover{color:white}.nav-actions{display:flex;gap:8px}.nav-actions .pill{padding:10px 15px;font-size:10px}.menu{display:none;background:none;padding:10px}
|
||
/* Hero and the CSS/SVG device illustration. */
|
||
.hero{padding:168px 0 0;text-align:center;overflow:hidden;background:radial-gradient(ellipse 45% 29% at 50% 76%,#0069aa32,transparent),radial-gradient(ellipse 35% 25% at 65% 65%,#005c5e1c,transparent)}.hero .tag{margin-bottom:25px;background:#0c1519;color:#c0d8d6}.hero h1{font-size:clamp(39px,5.6vw,72px);line-height:1.5;font-weight:600;letter-spacing:-2px}.metal{background:linear-gradient(110deg,#737e91 5%,#fff 42%,#e9edef 60%,#a2aec0 90%);background-clip:text;-webkit-background-clip:text;color:transparent}.hero h1 em{font-style:normal;background:linear-gradient(110deg,#5b99ff,#64e8e5 80%);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-copy{max-width:620px;margin:18px auto 24px;font-size:14px}.hero-actions{display:flex;justify-content:center;gap:12px}.hero-foot{font-size:10px;margin-top:15px;color:#7b8796}.device-wrap{margin:53px auto 0;max-width:980px;perspective:1400px;position:relative}.device-wrap:before{content:"";position:absolute;inset:15% 10% -10%;background:#009fd530;filter:blur(80px);z-index:-1}.device{padding:10px;border:1px solid #49505c;border-bottom-color:#75818a;border-radius:30px;background:linear-gradient(145deg,#23282e,#08090c 40%,#181b21);box-shadow:0 0 0 2px #0b0d11,0 35px 80px #0009;transform:rotateX(5deg);text-align:right}.device-screen{border:1px solid #ffffff09;border-radius:20px;background:#0b0f16;overflow:hidden}.device-top{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;font-size:10px;border-bottom:1px solid var(--line)}.device-body{display:grid;grid-template-columns:1.7fr 1fr;direction:ltr;min-height:275px}.board{direction:rtl;background:radial-gradient(ellipse at 50% 55%,#14272c,transparent 70%),#0a1418;padding:26px;position:relative;overflow:hidden}.board:before{content:"";position:absolute;inset:0;opacity:.25;background-image:linear-gradient(#67a5ae15 1px,transparent 1px),linear-gradient(90deg,#67a5ae15 1px,transparent 1px);background-size:25px 25px}.board>*{position:relative}.board-head{display:flex;justify-content:space-between;font-size:10px;color:#8dabab}.formula{font-size:27px;color:#e4f5ee;font-weight:300;margin:20px 0 0;text-align:center}.graph{width:100%;height:128px;margin-top:10px}.device-chat{direction:rtl;padding:23px;border-left:1px solid var(--line)}.chat-label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--cyan);margin-bottom:20px}.bubble{background:#17202b;border:1px solid #ffffff08;padding:13px;border-radius:13px;font-size:11px;line-height:1.9}.device-options{display:flex;gap:8px;margin-top:12px}.device-options span{border:1px solid var(--line);padding:8px 14px;border-radius:9px;font-size:11px}.device-options .picked{color:var(--cyan);background:#00f5d408;border-color:#00f5d455}.device-bottom{padding:13px 20px;display:flex;gap:15px;align-items:center;font-size:10px;color:#96a2b1}.mini-track{height:3px;background:#ffffff13;flex:1;border-radius:10px;direction:ltr}.mini-track:before{content:"";display:block;width:42%;height:100%;background:var(--cyan)}.device-caption{font-size:10px;margin:19px 0 0}.principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.principle{padding:26px 20px}.principle+.principle{border-right:1px solid var(--line)}.principle strong{font-weight:400;font-size:30px;display:block;margin-bottom:8px}.principle span{font-size:11px;color:var(--muted)}
|
||
/* Editorial feature sections. */
|
||
.section-rule{border-bottom:1px solid var(--line)}.feature-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}.feature{padding:30px;min-height:265px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}.feature:hover{border-color:#0071e366}.feature .icon{color:var(--cyan);margin-bottom:37px}.feature h3{font-size:18px;margin-bottom:13px}.feature p{font-size:12px}.feature:first-child{background:radial-gradient(ellipse at 0 100%,#006f6240,transparent 65%),var(--panel)}.feature:nth-child(2) .icon{color:#79acff}.feature:nth-child(3) .icon{color:#c887ef}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:35px}.section-head .intro{margin:0}.lab{overflow:hidden}.lab-heading{padding:19px 25px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.lab-body{display:grid;grid-template-columns:1.5fr 1fr}.simulation{padding:32px;background:#081216}.sim-stage{min-height:255px}.sim-stage h3{font-size:16px}.sim-stage p{font-size:11px}.sim-formula{margin:25px 0 0;text-align:center;color:#dcefeb;font-size:34px}.track-road{position:relative;margin:23px 20px 5px;height:60px;border-bottom:1px solid #3b6875;direction:ltr}.vehicle{position:absolute;left:0;bottom:9px;color:var(--cyan);transition:left .3s linear}.road-tick{display:flex;justify-content:space-between;color:#81979e;font-size:10px;direction:ltr;margin:10px 20px}.timeline{direction:ltr;position:relative;margin-top:26px;padding-top:16px}input[type=range]{accent-color:var(--cyan);width:100%;cursor:pointer;min-height:24px;margin:0}.checkpoint{position:absolute;top:0;background:none;padding:0;color:var(--gold);font-size:9px;transform:translateX(-50%);min-width:44px;min-height:28px}.checkpoint:after{content:"";display:block;width:5px;height:5px;background:var(--gold);border-radius:50%;margin:0 auto}.playbar{display:flex;align-items:center;gap:12px;margin-top:12px}.playbar .pill{font-size:10px;padding:9px 14px}.playbar time{margin-right:auto;color:#a3b2bb;font-size:11px}.question-panel{padding:30px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;min-width:0}.question-panel h3{font-size:17px;margin-bottom:17px}.question-panel .chat-label{margin-bottom:16px}.answers{display:grid;gap:8px;margin:18px 0}.answer{text-align:right;padding:12px 15px;border:1px solid var(--line);background:#ffffff04;border-radius:11px;font-size:12px;transition:.2s}.answer:hover{background:#ffffff0c;border-color:#62737a}.answer.correct{border-color:var(--green);background:#30d15812}.answer.wrong{border-color:var(--gold);background:#ff9f0a0c}.feedback{font-size:12px;min-height:48px}.feedback.success{color:#69e08a;animation:pulse .7s ease}.lab-note{padding:15px 24px;border-top:1px solid var(--line);font-size:10px;color:#909eae}.text-button{background:none;color:var(--cyan);padding:10px 0;text-align:right;font-size:11px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.segmented{display:flex;gap:4px;padding:5px;border:1px solid var(--line);background:#090c11;border-radius:13px;width:fit-content;max-width:100%;flex-wrap:wrap}.segmented button{padding:11px 17px;font-size:11px;background:transparent;color:var(--muted);border-radius:9px;min-height:42px}.segmented button[aria-selected=true],.segmented button[aria-pressed=true]{background:#26303b;color:white;box-shadow:0 2px 8px #0004}.teacher-panel{padding:26px}.teacher-title{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.teacher-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.avatar{width:44px;height:44px;border-radius:50%;background:#16342f;color:#9ae5ca;display:grid;place-items:center;font-size:15px;flex-shrink:0}.teacher-row:nth-child(2) .avatar{background:#29203e;color:#c2a2f0}.teacher-row h3{font-size:12px}.teacher-row p{font-size:10px}.teacher-row .pill{margin-right:auto;padding:8px 13px;font-size:10px}.rating{color:#eab766}.progress-note{padding-top:18px;display:flex;gap:8px;color:var(--cyan);font-size:11px}.empty{padding:35px 10px;text-align:center}.empty h3{font-size:16px;margin-bottom:10px}.list-points{padding:0;list-style:none;margin:25px 0 0}.list-points li{display:flex;gap:12px;align-items:start;margin:15px 0;color:#abb5c3;font-size:12px;line-height:1.9}.list-points li:before{content:"✓";color:var(--cyan)}
|
||
/* Calculator, resource explorer, and honest release information. */
|
||
.calculator{display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden}.calc-inputs{padding:35px}.range-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:14px}.range-label output{font-size:16px;color:white}.range-wrap{margin-bottom:28px}.range-extents{display:flex;justify-content:space-between;font-size:9px;color:#8b97a7;direction:ltr}.policy-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:23px;border-top:1px solid var(--line)}.policy-inputs label{font-size:10px;color:#b8c1cd;line-height:1.9}.policy-inputs input{width:100%;display:block;margin-top:9px;padding:12px;border:1px solid #ffffff25;background:#070b11;color:white;border-radius:9px;font-size:13px;direction:ltr}.calc-result{background:radial-gradient(ellipse at 50% 40%,#12442d40,transparent 75%),#0b1412;border-right:1px solid var(--line);padding:38px;display:flex;flex-direction:column;justify-content:center}.earnings{font-size:clamp(32px,4vw,53px);font-weight:400;color:#b7f6d4;margin:16px 0 4px;line-height:1.4}.earnings span{font-size:16px;color:#96b3a4}.calc-stats{display:flex;justify-content:space-between;margin:27px 0;border-top:1px solid #ffffff13;padding-top:22px}.calc-stats dt{font-size:10px;color:#a3b3aa;margin-bottom:10px}.calc-stats dd{font-size:21px;margin:0}.formula-note{font-size:10px;line-height:2;color:#9baa9f}.explorer{padding:28px}.explorer-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}select{background:#17202b;border:1px solid #ffffff20;border-radius:10px;color:white;padding:12px;font-size:12px}.curriculum-content{display:grid;grid-template-columns:1fr 1.5fr;border-top:1px solid var(--line);padding-top:25px;gap:25px}.lesson-list{display:grid;gap:9px;align-content:start}.lesson{background:transparent;border:1px solid var(--line);border-radius:12px;padding:15px;text-align:right;font-size:12px}.lesson[aria-pressed=true]{background:#0071e310;border-color:#0071e380}.lesson small{display:block;font-size:9px;color:#94a1b0;margin-top:8px}.assets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.asset{border:1px solid var(--line);background:#ffffff03;text-align:right;padding:19px;border-radius:14px;min-height:126px;transition:.2s}.asset:hover{border-color:#0071e380;background:#0071e308}.asset .icon{color:#72a9ed;margin-bottom:14px}.asset:nth-child(2) .icon{color:#bf87e7}.asset:nth-child(3) .icon{color:#f0b776}.asset:nth-child(4) .icon{color:#6cdebf}.asset strong{font-size:11px;font-weight:500;display:block}.asset small{font-size:9px;color:#91a0b2;display:block;margin-top:8px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:20px}table{width:100%;border-collapse:collapse;min-width:650px;text-align:right}caption{font-size:11px;color:var(--muted);text-align:right;padding:18px 22px;line-height:1.9}th,td{padding:21px 23px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.9}thead th{font-weight:500;color:#c1c9d5;font-size:13px;background:#ffffff03}td{color:#98a4b4}td:nth-child(2),th:nth-child(2){background:#00f5d405;color:#acecda;width:26%}tbody tr:last-child>*{border-bottom:0}.roadmap{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:40px}.milestone{padding-top:25px;border-top:1px solid #34404b;position:relative}.milestone:before{content:"";position:absolute;top:-4px;right:0;width:7px;height:7px;background:#34404b;border-radius:50%;box-shadow:0 0 0 6px var(--bg)}.milestone code{font-size:12px;color:#6fcbd0}.milestone h3{font-size:13px;line-height:1.9;margin:15px 0 12px}.milestone p{font-size:10px}.milestone .tag{margin-top:15px;font-size:9px}.persona{display:grid;grid-template-columns:1fr 1.2fr;gap:65px;padding:42px;background:radial-gradient(ellipse at 0 100%,#23486528,transparent 60%),var(--panel)}.persona-copy{padding-top:15px}.persona-copy h3{font-size:27px;margin-bottom:15px}.persona-copy p{font-size:13px}.persona .segmented{margin-top:24px}.finale{text-align:center;padding:72px 24px;border:1px solid #7dc8e121;border-radius:30px;background:radial-gradient(ellipse at 20% 110%,#01515950,transparent 60%),radial-gradient(ellipse at 90% 110%,#183a8950,transparent 55%),#0b1018;position:relative;overflow:hidden}.finale .eyebrow{justify-content:center}.finale p{margin:18px auto 25px;max-width:590px;font-size:13px}.finale h2{font-size:clamp(33px,5vw,59px)}footer{border-top:1px solid var(--line);margin-top:90px;padding:35px 0 24px}.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer-links{display:flex;gap:24px;font-size:11px;color:var(--muted)}.footer-bottom{border-top:1px solid var(--line);padding-top:22px;margin-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#8793a4}.footer-links button{background:none;padding:0;color:inherit;font-size:inherit}dialog{max-width:540px;width:calc(100% - 32px);background:#111822;color:white;border:1px solid #ffffff25;border-radius:23px;padding:30px;box-shadow:0 35px 100px #0009}dialog::backdrop{background:#000a;backdrop-filter:blur(7px)}dialog h2{font-size:23px;margin:5px 0 16px}dialog p{font-size:13px}dialog .pill{margin-top:24px}.close-dialog{float:left;background:#ffffff0b;border-radius:50%;width:36px;height:36px;font-size:22px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 22px;z-index:80;font-size:12px;max-width:calc(100% - 32px);width:max-content;box-shadow:0 10px 40px #0008}.toast:empty{display:none}[hidden]{display:none!important}.reveal{opacity:1}.js-motion .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s,transform .65s}.js-motion .reveal.visible{opacity:1;transform:none}@keyframes pulse{50%{text-shadow:0 0 16px #30d158;transform:scale(1.015)}}@supports(animation-timeline:view()){.scroll-line{height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));position:fixed;top:0;right:0;left:0;z-index:60;transform-origin:right;animation:reading linear;animation-timeline:scroll()}@keyframes reading{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
|
||
@media(min-width:1500px){.hero{padding-top:185px}.hero h1{font-size:78px}}
|
||
@media(max-width:1100px){.nav-links{gap:14px;font-size:9px}.nav{gap:16px}.nav-actions .secondary-cta{display:none}.two-col{gap:35px}}
|
||
@media(max-width:800px){.nav-links{display:none;position:absolute;top:70px;right:20px;left:20px;padding:22px;border:1px solid var(--line);border-radius:20px;background:#111821;flex-direction:column;gap:22px;font-size:13px}.nav-links.open{display:flex}.menu{display:block}.nav-actions{margin-right:auto}.nav .version{display:none}.nav{padding:8px 15px}.nav-actions .pill{font-size:9px;padding:8px 11px}.wrap{width:calc(100% - 36px)}.hero{padding-top:143px}.hero h1{letter-spacing:-1px}.hero-copy{font-size:12px;max-width:530px}.device-wrap{margin-top:40px}.device-chat{padding:16px}.section{padding:75px 0}.feature-grid{grid-template-columns:1fr}.feature{min-height:0;padding:25px}.feature .icon{margin-bottom:20px}.two-col{grid-template-columns:1fr;gap:32px}.lab-body{grid-template-columns:1fr}.question-panel{border-right:0;border-top:1px solid var(--line)}.calculator{grid-template-columns:1fr}.calc-result{border-right:0;border-top:1px solid var(--line)}.curriculum-content{grid-template-columns:1fr}.roadmap{grid-template-columns:1fr 1fr;gap:30px}.persona{grid-template-columns:1fr;gap:20px;padding:27px}.section-head{align-items:start;flex-direction:column}.footer-top{align-items:start}.footer-links{flex-wrap:wrap;gap:18px}.footer-bottom{flex-direction:column;gap:10px}.explorer-top{align-items:start;flex-direction:column}}
|
||
@media(max-width:500px){.hero h1{font-size:35px}.hero-copy{font-size:11px}.hero-actions{gap:8px}.hero-actions .pill{padding:12px 16px;font-size:10px}.device{padding:6px;border-radius:19px;transform:none}.device-screen{border-radius:14px}.device-body{grid-template-columns:1fr;min-height:0}.device-chat{display:none}.board{padding:17px}.device-top{padding:12px;font-size:8px}.board .graph{height:110px}.device-bottom{padding:12px;font-size:8px}.principles{margin-top:34px}.principle{padding:23px 8px}.principle strong{font-size:26px}.principle span{font-size:9px}.simulation,.question-panel,.calc-inputs,.calc-result{padding:24px}.lab-heading{padding:16px;align-items:start;flex-direction:column}.policy-inputs{grid-template-columns:1fr}.explorer{padding:18px}.segmented button{padding:10px 12px;font-size:10px}.assets{gap:8px}.asset{padding:15px}.persona-copy h3{font-size:23px}.footer-top{flex-direction:column}.roadmap{gap:24px 17px}.teacher-panel{padding:20px}.wordmark{font-size:26px}.brand-mark{width:24px}.nav{width:calc(100% - 24px)}.nav-actions .pill{max-width:140px}.finale{padding:50px 20px}}
|
||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.device{transform:none}}body.reduce-motion{scroll-behavior:auto}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation:none!important;transition:none!important}body.reduce-motion .reveal{opacity:1;transform:none}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="skip" href="#main">انتقل إلى المحتوى</a><div class="ambient" aria-hidden="true"></div><div class="scroll-line" aria-hidden="true"></div>
|
||
<svg width="0" height="0" aria-hidden="true" style="position:absolute"><defs>
|
||
<symbol id="i-play" viewBox="0 0 24 24"><path d="m9 5 11 7-11 7z"/></symbol><symbol id="i-spark" viewBox="0 0 24 24"><path d="m12 2 2.8 7.2L22 12l-7.2 2.8L12 22l-2.8-7.2L2 12l7.2-2.8z"/></symbol><symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6c-3-2-7-2-10-1v15c3-1 7-1 10 1 3-2 7-2 10-1V5c-3-1-7-1-10 1v15"/></symbol><symbol id="i-layers" viewBox="0 0 24 24"><path d="m12 2 10 6-10 6L2 8zm-10 11 10 6 10-6M2 18l10 6 10-6"/></symbol><symbol id="i-shield" viewBox="0 0 24 24"><path d="m12 2 9 4v6c0 5-9 10-9 10S3 17 3 12V6zM8 12l3 3 5-6"/></symbol><symbol id="i-file" viewBox="0 0 24 24"><path d="M14 2H5v20h14V7zm0 0v5h5M8 12h8M8 16h6"/></symbol><symbol id="i-map" viewBox="0 0 24 24"><rect x="8" y="2" width="8" height="5" rx="1"/><rect x="1" y="17" width="7" height="5" rx="1"/><rect x="16" y="17" width="7" height="5" rx="1"/><path d="M12 7v5H5v5m7-5h7v5"/></symbol>
|
||
</defs></svg>
|
||
<header><nav class="nav glass" aria-label="التنقل الرئيسي">
|
||
<a class="brand" href="#" aria-label="صَقِل، الرئيسية"><svg class="brand-mark" viewBox="0 0 32 36" aria-hidden="true"><path d="M17 2 3 19h11l-1 15 16-21H18l4-11z" fill="none" stroke="#75e5dc" stroke-width="2" stroke-linejoin="round"/></svg><span class="wordmark">صَقِل</span><span class="version latin">v1.0 Pro<br>CONCEPT PREVIEW</span></a>
|
||
<div class="nav-links" id="nav-links"><a href="#philosophy">الفلسفة</a><a href="#socratic">المحاكي السقراطي</a><a href="#returns">عوائد المعلمين</a><a href="#curriculum">شجرة المنهج</a><a href="#comparison">المقارنة</a></div>
|
||
<div class="nav-actions"><a class="pill secondary-cta" href="#returns">استوديو المعلمين</a><a class="pill primary" href="#socratic">ابدأ التعلم بالإتقان <span aria-hidden="true">↖</span></a></div><button class="menu" aria-expanded="false" aria-controls="nav-links" aria-label="فتح القائمة">☰</button>
|
||
</nav></header>
|
||
<main id="main">
|
||
<section class="hero" aria-labelledby="hero-title"><div class="wrap">
|
||
<span class="tag"><span class="dot"></span> من الأردن. لفهمٍ يصنع الفرق. <span class="muted">· معاينة تفاعلية</span></span>
|
||
<h1 id="hero-title"><span class="metal">لا تشتري بطاقة تلقين..</span><br><em>تملّك فهمك لدرسك.</em></h1>
|
||
<p class="hero-copy">درس واحد. أكثر من طريقة للفهم. اختَر المعلم الأقرب إليك، وتعلّم مع مساعد يسأل ليكشف الفكرة، ويعيدك إلى مصدرها. هذه هي الرؤية التي نبنيها في صَقِل.</p>
|
||
<div class="hero-actions"><a class="pill primary" href="#socratic">جرّب كيف يتغيّر التعلّم <span class="arrow" aria-hidden="true">←</span></a><a class="pill" href="#philosophy">اكتشف فلسفة صَقِل <span aria-hidden="true">↓</span></a></div>
|
||
<p class="hero-foot">تجربة توضيحية بلا تسجيل · لا تُحتسب مشاهدة أو أرباح</p>
|
||
<div class="device-wrap"><div class="device"><div class="device-screen">
|
||
<div class="device-top"><span>صَقِل <span class="muted"> / الفيزياء / الحركة بتسارع ثابت</span></span><span class="tag"><span class="dot"></span> تصور تجربة الدرس</span></div>
|
||
<div class="device-body"><div class="board"><div class="board-head"><span>الحركة بتسارع ثابت</span><span class="latin">PHYSICS / 10</span></div><div class="formula latin">v = v₀ + at</div><svg class="graph" viewBox="0 0 500 150" role="img" aria-label="رسم توضيحي للسرعة التي تزداد خطياً مع الزمن"><defs><linearGradient id="area" x2="0" y2="1"><stop stop-color="#00f5d4" stop-opacity=".15"/><stop offset="1" stop-color="#00f5d4" stop-opacity="0"/></linearGradient></defs><path d="M65 12v116h385" fill="none" stroke="#617b81"/><path d="M65 128 405 24V128Z" fill="url(#area)"/><path d="m65 128 340-104" fill="none" stroke="#76e3cd" stroke-width="2"/><circle cx="255" cy="70" r="5" fill="#b0f9e4"/><path d="M255 70v58" stroke="#557678" stroke-dasharray="4 4"/><text x="42" y="17" fill="#8fa7a8" font-size="12">v</text><text x="457" y="134" fill="#8fa7a8" font-size="12">t</text><text x="282" y="54" fill="#b0d7ce" font-size="12">a = Δv / Δt</text></svg></div>
|
||
<div class="device-chat"><div class="chat-label"><svg class="icon"><use href="#i-spark"/></svg> لحظة للفهم</div><div class="bubble">إذا بدأ الجسم حركته من السكون، ماذا تصبح سرعته بعد 4 ثوانٍ عند تسارع 2 م/ث²؟</div><div class="device-options"><span class="picked">8 م/ث</span><span>4 م/ث</span></div><p class="small" style="margin-top:16px;font-size:9px">نفهم السبب، ثم نكمل الرحلة.</p></div></div>
|
||
<div class="device-bottom"><svg class="icon" style="width:14px;height:14px"><use href="#i-play"/></svg><span class="latin">03:45 / 10:00</span><div class="mini-track"></div><span>الشرح · التدريب · المصادر</span></div>
|
||
</div></div><p class="device-caption">تصوّر للواجهة، وليس حصة منشورة أو تسجيلاً لمعلّم.</p></div>
|
||
<div class="principles"><div class="principle"><strong class="latin">0%</strong><span>بيانات مصطنعة — مبدأ نلتزم به</span></div><div class="principle"><strong class="latin">100%</strong><span>هدف ارتباط المحتوى بالمنهج، لا نسبة إنجاز</span></div><div class="principle"><strong class="latin">N</strong><span>شروحات متعددة. هوية درس واحدة.</span></div></div>
|
||
</div></section>
|
||
<section id="philosophy" class="section section-rule"><div class="wrap"><div class="intro reveal"><div class="eyebrow">01 / الفلسفة</div><h2>الشرح يتغيّر.<br><span class="muted">حقّك في الفهم، ثابت.</span></h2><p>ليس كل طالب يتعلّم بالطريقة نفسها. لذلك تبدأ صَقِل من الدرس المنهجي، وتفتح حوله مسارات للفهم، دون أن تفقد خيط رحلتك.</p></div>
|
||
<div class="feature-grid"><article class="feature glass reveal" data-tilt><svg class="icon"><use href="#i-layers"/></svg><h3>معلمك، باختيارك.</h3><p>انتقل بين أساليب الشرح المتاحة للدرس نفسه. يظل المفهوم واحداً، وتظل ملاحظاتك معك.</p></article><article class="feature glass reveal" data-tilt><svg class="icon"><use href="#i-spark"/></svg><h3>سؤال في وقته.</h3><p>التصميم المستهدف يربط كل وقفة بدليل من نسخة الفيديو والمرجع، كي تعرف لماذا أخطأت وكيف تراجع.</p></article><article class="feature glass reveal" data-tilt><svg class="icon"><use href="#i-shield"/></svg><h3>تقدّم له دليل.</h3><p>المشاهدة ليست إتقاناً. ونقص المصدر ليس فرصة للتخمين. نسخة موثقة دون اتصال، ومزامنة قابلة للتحقق ضمن الخطة.</p></article></div>
|
||
</div></section>
|
||
<section id="socratic" class="section"><div class="wrap"><div class="section-head reveal"><div class="intro"><div class="eyebrow">02 / جرّب لحظة الفهم</div><h2>لا يكتفي بأن تسأل.<br><span class="muted">يسألك، لتفهم.</span></h2><p>شغّل المحاكاة أو انتقل إلى إحدى نقطتي التوقف. جرّب إجابة، وشاهد كيف يتحول الخطأ إلى خطوة تالية.</p></div><span class="tag">محاكاة محلية · ليست معلماً ذكياً متصلاً</span></div>
|
||
<div class="lab glass reveal"><div class="lab-heading"><span style="font-size:12px">الصف العاشر / الفيزياء / الحركة بتسارع ثابت</span><span class="tag">مثال توضيحي مستقل عن الكتاب</span></div><div class="lab-body"><div class="simulation"><div class="sim-stage"><h3>كيف تتغيّر السرعة مع الزمن؟</h3><p>نموذج توضيحي: جسم يبدأ من السكون، وتسارعه ثابت.</p><div class="sim-formula latin">v = <span style="color:#81b4ff">0</span> + <span style="color:#73dfc5">2</span> × t</div><div class="track-road"><svg class="vehicle" width="47" height="30" viewBox="0 0 47 30" aria-label="جسم يتحرك في نموذج توضيحي"><path d="M3 21V12h8l6-8h16l8 9h3v8z" fill="#00f5d41a" stroke="currentColor"/><circle cx="12" cy="23" r="4" fill="#081216" stroke="currentColor"/><circle cx="35" cy="23" r="4" fill="#081216" stroke="currentColor"/></svg></div><div class="road-tick"><span>0</span><span>الموضع في الرسم توضيحي</span><span>x →</span></div></div>
|
||
<div class="timeline"><button class="checkpoint" style="left:37.5%" data-seek="225" aria-label="انتقل إلى سؤال الدقيقة 03:45">03:45</button><button class="checkpoint" style="left:72.5%" data-seek="435" aria-label="انتقل إلى سؤال الدقيقة 07:15">07:15</button><input id="timeline" type="range" min="0" max="600" value="0" aria-label="موضع المحاكاة بالثواني"></div>
|
||
<div class="playbar"><button class="pill primary" id="play">تشغيل الحصة <span aria-hidden="true">▷</span></button><button class="pill" id="bookmark" aria-label="حفظ موضع المحاكاة">حفظ الموضع</button><time id="time" class="latin">00:00 / 10:00</time></div></div>
|
||
<div class="question-panel"><div class="chat-label"><svg class="icon"><use href="#i-spark"/></svg> مساعد الفهم السقراطي</div><h3 id="question-title">كل وقفة، فرصة لفكرة أوضح.</h3><p id="question-context" class="small">اضغط 03:45 أو 07:15 لتجربة سؤال مباشرة. يتوقف التشغيل تلقائياً عند وصوله إلى السؤال.</p><div class="answers" id="answers"></div><p class="feedback" id="feedback" role="status" aria-live="polite"></p><button class="text-button" id="hint-replay" hidden>راجع الشرح التوضيحي عند 02:15 ←</button><button class="pill" id="continue" hidden>متابعة المحاكاة ←</button></div></div><div class="lab-note">التوقيتات والأسئلة هنا مكتوبة للمحاكاة فقط؛ لا تُنسب إلى فيديو معتمد أو صفحة من كتاب الوزارة. الإجابة الصحيحة لا تمنح إتقاناً تعليمياً أو استحقاقاً مالياً.</div></div>
|
||
</div></section>
|
||
<section id="teachers" class="section section-rule"><div class="wrap two-col"><div class="reveal"><div class="eyebrow">03 / حرية اختيار المعلم</div><h2>نفس الدرس.<br><span class="muted">زاوية فهم جديدة.</span></h2><p style="margin-top:18px;font-size:14px">اختر الحالة لتستكشف سلوك المكتبة: موارد عند غياب الشرح، دخول مباشر عند وجود حصة واحدة، واختيار المعلم عند التعدد.</p><ul class="list-points"><li>الملاحظات ودفتر الأخطاء يبقيان مرتبطين بالدرس.</li><li>موضع مشاهدة مستقل لكل فيديو؛ فالدقيقة نفسها لا تعني الفكرة نفسها عند معلم آخر.</li><li>ترتيب التقييمات الموثقة مع عددها في المنتج المستهدف.</li></ul></div>
|
||
<div class="teacher-panel glass reveal"><div class="teacher-title"><span style="font-size:12px">الحركة بتسارع ثابت</span><span class="tag">بيانات العرض افتراضية</span></div><div class="segmented" id="teacher-switch" role="group" aria-label="عدد حصص المحاكاة"><button data-count="0" aria-pressed="false">0 حصص</button><button data-count="1" aria-pressed="false">حصة واحدة</button><button data-count="2" aria-pressed="true">عدة معلمين</button></div><div id="teacher-list" aria-live="polite"></div><div class="progress-note"><svg class="icon" style="width:15px;height:15px"><use href="#i-shield"/></svg><span id="saved-progress">حفظ الموضع والملاحظات داخل هذه المعاينة</span></div><p class="small" id="notebook" style="font-size:10px;margin-top:12px">دفتر الأخطاء التجريبي: لا محاولات بعد.</p></div>
|
||
</div></section>
|
||
<section id="returns" class="section"><div class="wrap"><div class="intro reveal"><div class="eyebrow" style="color:var(--green)">04 / قيمة الشرح، بحساب واضح</div><h2>ركّز على أثر شرحك.<br><span class="muted">وافهم كيف يُحسب نصيبك.</span></h2><p>حاسبة سيناريو لصندوق محدود: نصيبك يساوي نسبة دقائقك المؤهلة إلى مجموع دقائق الصندوق. أدخل افتراضاتك؛ لا توجد هنا تعرفة معتمدة أو أرباح مضمونة.</p></div>
|
||
<div class="calculator glass reveal"><div class="calc-inputs"><div class="range-wrap"><label class="range-label" for="students">الطلاب النشطون في السيناريو <output id="students-output" class="latin">250</output></label><input id="students" type="range" min="10" max="5000" step="10" value="250"><div class="range-extents"><span>10</span><span>5,000 طالب</span></div></div><div class="range-wrap"><label class="range-label" for="minutes">دقائق كل طالب شهرياً <output id="minutes-output" class="latin">120</output></label><input id="minutes" type="range" min="30" max="600" step="10" value="120"><div class="range-extents"><span>30 دقيقة</span><span>600 دقيقة</span></div></div><div class="policy-inputs"><label for="pool">الصندوق القابل للتوزيع (د.أ)<input id="pool" type="number" min="0" max="1000000000" step="0.001" placeholder="أدخل مبلغاً افتراضياً" inputmode="decimal"></label><label for="other-minutes">دقائق باقي المعلمين المؤهلة<input id="other-minutes" type="number" min="0" max="1000000000000" step="1" placeholder="أدخل الدقائق الافتراضية" inputmode="numeric"></label></div><p class="small" style="font-size:10px;margin-top:16px">نفترض لأغراض الحساب أن الدقائق المدخلة كلها مؤهلة. التأهيل الفعلي وسياسة الصندوق يحددهما الخادم والعقد، مع فصل ميزانية المدرسة عن السوق المستقل.</p></div>
|
||
<div class="calc-result"><span class="tag" style="width:fit-content;color:#9fceae">تقدير افتراضي · شهري</span><div class="earnings"><output id="earnings" class="latin">—</output> <span>د.أ</span></div><p class="small" id="fils">أدخل الصندوق ودقائق باقي المعلمين لإظهار التقدير.</p><dl class="calc-stats"><div><dt>دقائقك المفترضة</dt><dd id="qualified" class="latin">30,000</dd></div><div><dt>الحصة من الصندوق</dt><dd id="share" class="latin">—</dd></div></dl><p class="formula-note" id="calc-note" role="status">العائد = الصندوق × دقائقك ÷ إجمالي الدقائق. يُعرض المبلغ بالفلس، مع حذف كسر الفلس في هذه المحاكاة؛ التسوية الفعلية تتبع السياسة المعتمدة.</p></div></div><p class="small" style="font-size:11px;margin-top:20px">الفكرة: دخل مرتبط باستهلاك مؤهل ضمن صندوق معلوم، بدل ربط دخل المعلم ببيع بطاقة خاصة به. مقدار العائد يتغير مع الإيراد والدقائق؛ لا يمكن إثبات تفوقه المالي مسبقاً.</p>
|
||
</div></section>
|
||
<section id="curriculum" class="section section-rule"><div class="wrap"><div class="section-head reveal"><div class="intro"><div class="eyebrow">05 / سياق واحد. أربعة مصادر.</div><h2>كل ما يضيء الفكرة.<br><span class="muted">في مكانها الصحيح.</span></h2><p>استكشف طريقة تنظيم الدرس وموارده. هذه شجرة توضيحية للتنقل، وليست فهرساً منشوراً أو إثباتاً لاكتمال المنهج.</p></div><span class="tag">الأصل لا يستبدله ملخص</span></div><div class="explorer glass reveal"><div class="explorer-top"><div class="segmented" id="subjects" role="tablist" aria-label="المبحث"></div><label><span class="small" style="margin-left:12px">الصف</span><select id="grade"><option value="10">الصف العاشر</option><option value="12">التوجيهي — تصور لاحق</option></select></label></div><div class="curriculum-content"><div class="lesson-list" id="lessons"></div><div id="resource-panel" role="tabpanel" tabindex="0"><span class="small muted" id="lesson-path"></span><h3 id="lesson-name" style="margin-top:12px;font-size:19px"></h3><div class="assets"><button class="asset" data-asset="video"><svg class="icon"><use href="#i-play"/></svg><strong>فيديو المعلم المعتمد</strong><small>نسخة فيديو مستقلة</small></button><button class="asset" data-asset="worksheet"><svg class="icon"><use href="#i-file"/></svg><strong>ورقة العمل التفاعلية</strong><small>Markdown · إصدار مراجع</small></button><button class="asset" data-asset="book"><svg class="icon"><use href="#i-book"/></svg><strong>كتاب الوزارة الرسمي</strong><small>PDF · المصدر الأصلي</small></button><button class="asset" data-asset="mindmap"><svg class="icon"><use href="#i-map"/></svg><strong>الخريطة الذهنية</strong><small>صورة مفهوم · إصدار مستقل</small></button></div><p class="small" style="margin-top:16px;font-size:10px">الهوية المستهدفة: المنهج، الطبعة، الصف، المبحث، الفصل، الوحدة والدرس. لا ملفات معتمدة متصلة بهذه المعاينة.</p></div></div></div>
|
||
</div></section>
|
||
<section id="comparison" class="section"><div class="wrap"><div class="intro reveal"><div class="eyebrow">06 / قارن ما يهمّك</div><h2>اختَر تجربة التعلّم.<br><span class="muted">قبل أن تختار الاشتراك.</span></h2><p>هذه أبعاد تساعدك على السؤال والمقارنة. خصائص صَقِل أدناه أهداف تصميم؛ أما خدمات الآخرين وأسعارهم فتحتاج تحققاً من العرض المحدد.</p></div><div class="table-wrap reveal"><table><caption>لا تصنيف تفوّق أو ادعاءات عن جو أكاديمي أو وتد أو أبواب دون تحقق حديث من خدماتهم وعقودهم.</caption><thead><tr><th scope="col">ما الذي تقارنه؟</th><th scope="col">صَقِل <span class="tag">الرؤية</span></th><th scope="col">المنصات التقليدية</th><th scope="col">الدروس الخصوصية</th></tr></thead><tbody><tr><th scope="row">حرية تغيير المعلم</th><td>ضمن نطاق الوصول المشمول</td><td>تحقّق من المعلمين المشمولين بالباقة</td><td>بحسب الاتفاق مع المعلم</td></tr><tr><th scope="row">التحقق السقراطي من الفهم</th><td>سؤال مرتبط بدليل من الشرح</td><td>تحقّق من نوع التفاعل والتغذية الراجعة</td><td>بحسب أسلوب المعلم</td></tr><tr><th scope="row">الشفافية المالية بالدقيقة</th><td>صندوق ودقائق مؤهلة وفق سياسة</td><td>تحتاج مراجعة عقد المعلم</td><td>بحسب عقد الحصة</td></tr><tr><th scope="row">التوافق مع كتاب الوزارة</th><td>ربط بالنسخة والدرس والمصدر</td><td>تحقّق من الكتاب والطبعة</td><td>تحقّق من المراجع المستخدمة</td></tr><tr><th scope="row">التكلفة الإجمالية للأسرة</th><td>لم تُعتمد الأسعار بعد</td><td>بحسب المواد والباقات والعروض</td><td>بحسب عدد الحصص وأسعارها</td></tr></tbody></table></div></div></section>
|
||
<section id="roadmap" class="section section-rule"><div class="wrap"><div class="intro reveal"><div class="eyebrow">07 / خارطة الإنجاز الصادقة</div><h2>الثقة لا تُعلن.<br><span class="muted">تُبنى، خطوة بخطوة.</span></h2><p>محطات مختارة من NP-00 إلى NP-13 وفق خطة 9 أيلول 2026. الحالات التالية مخططة في المرجع، ولا تمثل تحققاً جديداً من التنفيذ أو الإنتاج.</p></div><div class="roadmap reveal"><article class="milestone"><code>NP-00</code><h3>خط أساس<br>يمكن تدقيقه</h3><p>بيئة اختبار معزولة وأدلة تشغيل واضحة.</p><span class="tag">مخطط في المرجع</span></article><article class="milestone"><code>NP-02</code><h3>هوية منهجية<br>وحزم موثقة</h3><p>كل مورد مرتبط بالدرس ونسخته ومصدره.</p><span class="tag">مخطط في المرجع</span></article><article class="milestone"><code>NP-04</code><h3>فحص الفيديو<br>والسؤال من الدليل</h3><p>توقيتات مثبتة ومراجعة قبل النشر.</p><span class="tag">مخطط في المرجع</span></article><article class="milestone"><code>NP-06</code><h3>دفتر مالي<br>بدقة الفلس</h3><p>قيود قابلة للتتبع وحجز واضح للرصيد.</p><span class="tag">مخطط في المرجع</span></article><article class="milestone"><code>NP-13</code><h3>إثبات الصف العاشر<br>ثم قرار الإطلاق</h3><p>اختبار رحلة مكتملة؛ التوجيهي توسع لاحق.</p><span class="tag">بوابة تحقق مخططة</span></article></div></div></section>
|
||
<section id="personas" class="section"><div class="wrap"><div class="persona glass reveal"><div><div class="eyebrow">08 / صَقِل لكل فاعل تعليمي</div><h2 style="font-size:36px">رحلة واحدة.<br><span class="muted">أثر يصل للجميع.</span></h2><div class="segmented" id="persona-tabs" role="tablist" aria-label="اختر دورك"><button role="tab" id="persona-student" aria-controls="persona-panel" aria-selected="true" data-persona="student">الطالب</button><button role="tab" id="persona-teacher" aria-controls="persona-panel" aria-selected="false" tabindex="-1" data-persona="teacher">المعلم</button><button role="tab" id="persona-parent" aria-controls="persona-panel" aria-selected="false" tabindex="-1" data-persona="parent">الأسرة</button><button role="tab" id="persona-school" aria-controls="persona-panel" aria-selected="false" tabindex="-1" data-persona="school">المدرسة</button></div></div><div class="persona-copy" id="persona-panel" role="tabpanel" aria-labelledby="persona-student" tabindex="0"><h3 id="persona-title">افهمها بطريقتك.</h3><p id="persona-description">اختَر الشرح الأقرب إليك، اختبر الفكرة، وعد إلى ما تعثرت فيه. الهدف أن تعرف كيف وصلت إلى الإجابة، لا أن تتذكرها فقط.</p><ul class="list-points" id="persona-points"><li>اختيار المعلم ضمن الدرس نفسه</li><li>مراجعة أخطائك والعودة إلى مصادرها</li></ul><a class="text-button" id="persona-cta" href="#socratic" style="display:inline-block">جرّب رحلة الطالب ←</a></div></div></div></section>
|
||
<section class="wrap"><div class="finale reveal"><div class="eyebrow">الفهم، بطريقتك.</div><h2>لحظة «فهمتها»..<br><span class="metal">تستحق تجربة مختلفة.</span></h2><p>نبدأ من درس، وسؤال جيد، ومصدر موثوق. استكشف الفكرة اليوم، وتعرّف على الخطوات التي تسبق الإطلاق.</p><div class="hero-actions"><a class="pill primary" href="#socratic">ابدأ التعلم بالإتقان <span aria-hidden="true">←</span></a><a class="pill" href="#returns">استوديو المعلمين</a></div><p class="small" style="margin-bottom:0;font-size:10px">المتاح هنا محاكاة للتجربة وحاسبة افتراضات؛ لا تسجيل أو شراء أو سحب أموال.</p></div></section>
|
||
</main>
|
||
<footer><div class="wrap"><div class="footer-top"><a class="brand" href="#"><span class="wordmark">صَقِل</span><span class="small muted">الفهم يصنع الفرق.</span></a><div class="footer-links"><a href="#philosophy">وعدنا التعليمي</a><a href="#roadmap">خارطة الطريق</a><button data-info="privacy">الخصوصية</button><button data-info="accessibility">إمكانية الوصول</button></div></div><div class="footer-bottom"><span>© <span id="year">2026</span> صَقِل. جميع الحقوق محفوظة.</span><span>صُممت للعربية، من الفكرة إلى التفاصيل. <span style="color:#80cbb9">صُنع بشغف في الأردن.</span></span></div></div></footer>
|
||
<dialog id="info-dialog" aria-labelledby="dialog-title"><button class="close-dialog" aria-label="إغلاق النافذة">×</button><h2 id="dialog-title"></h2><p id="dialog-copy"></p><button class="pill" id="motion-toggle" hidden aria-pressed="false">تقليل الحركة</button><form method="dialog"><button class="pill primary">حسناً</button></form></dialog><div class="toast glass" role="status" aria-live="polite" id="toast"></div>
|
||
<noscript><p style="padding:24px;text-align:center">تحتاج المحاكاة والحاسبة والمستكشف إلى JavaScript. يبقى محتوى الرؤية وخارطة الطريق متاحاً للقراءة.</p></noscript>
|
||
<script>
|
||
'use strict';
|
||
const $ = s => document.querySelector(s), $$ = s => [...document.querySelectorAll(s)];
|
||
const reduced = matchMedia('(prefers-reduced-motion: reduce)');
|
||
let toastTimer;
|
||
function toast(message){$('#toast').textContent=message;clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('#toast').textContent='',4200)}
|
||
const dialog=$('#info-dialog');
|
||
function showInfo(title,copy,motion=false){$('#dialog-title').textContent=title;$('#dialog-copy').textContent=copy;$('#motion-toggle').hidden=!motion;dialog.showModal()}
|
||
$('.close-dialog').addEventListener('click',()=>dialog.close());
|
||
dialog.addEventListener('click',e=>{if(e.target===dialog){const r=dialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close()}});
|
||
$('.menu').addEventListener('click',()=>{const open=$('.menu').getAttribute('aria-expanded')!=='true';$('.menu').setAttribute('aria-expanded',String(open));$('.menu').setAttribute('aria-label',open?'إغلاق القائمة':'فتح القائمة');$('#nav-links').classList.toggle('open',open)});
|
||
$$('#nav-links a').forEach(a=>a.addEventListener('click',()=>{$('#nav-links').classList.remove('open');$('.menu').setAttribute('aria-expanded','false')}));
|
||
document.addEventListener('keydown',e=>{if(e.key==='Escape'){$('#nav-links').classList.remove('open');$('.menu').setAttribute('aria-expanded','false')}});
|
||
$('#year').textContent=new Date().getFullYear();
|
||
// All simulation state is memory-only and isolated from real learning and money.
|
||
const checkpoints=[{at:225,stem:'بدأ جسم من السكون بتسارع 2 م/ث². ما سرعته بعد 4 ثوانٍ؟',context:'في مثال المحاكاة: v₀ = 0، و v = v₀ + at.',options:['4 م/ث','8 م/ث','16 م/ث'],correct:1,hint:'لاحظ أن «من السكون» تعني أن السرعة الابتدائية صفر. ما حاصل ضرب التسارع في الزمن؟ راجع المثال التوضيحي عند 02:15.',success:'صحيح، 2 × 4 = 8 م/ث. استخدمت التسارع لإيجاد التغيّر في السرعة.'},{at:435,stem:'ارتفعت السرعة من 8 إلى 14 م/ث خلال 3 ثوانٍ. ما التسارع؟',context:'فكّر في مقدار تغيّر السرعة في كل ثانية: a = (v − v₀) / Δt.',options:['2 م/ث²','6 م/ث²','22 م/ث²'],correct:0,hint:'احسب الفرق بين السرعة النهائية والابتدائية أولاً. ثم وزّع هذا التغيّر على الثواني الثلاث؛ الفرق وحده ليس التسارع.',success:'صحيح، (14 − 8) ÷ 3 = 2 م/ث². ميّزت بين تغيّر السرعة ومعدل تغيّرها.'}];
|
||
let position=0,playing=false,activeQuestion=null,lastTick=0,teacher='a',errors=0;
|
||
const positions={a:0,b:0},completed={a:new Set(),b:new Set()},bookmarks={a:null,b:null};
|
||
const fmt=s=>`${String(Math.floor(s/60)).padStart(2,'0')}:${String(Math.floor(s%60)).padStart(2,'0')}`;
|
||
function renderPosition(){positions[teacher]=position;$('#timeline').value=String(position);$('#timeline').setAttribute('aria-valuetext',fmt(position));$('#time').textContent=`${fmt(position)} / 10:00`;$('.vehicle').style.left=`${Math.min(position/600*85,85)}%`}
|
||
function setPlaying(value){playing=value;lastTick=performance.now();$('#play').innerHTML=playing?'إيقاف مؤقت <span aria-hidden="true">Ⅱ</span>':'تشغيل الحصة <span aria-hidden="true">▷</span>';$('#play').setAttribute('aria-pressed',String(playing))}
|
||
function clearQuestion(){activeQuestion=null;$('#answers').replaceChildren();$('#hint-replay').hidden=true;$('#continue').hidden=true;$('#feedback').textContent='';$('#question-title').textContent='كل وقفة، فرصة لفكرة أوضح.';$('#question-context').textContent='انتقل إلى 03:45 أو 07:15 لتجربة السؤال. المقاطع هنا شرح بصري توضيحي.'}
|
||
function ask(index){setPlaying(false);activeQuestion=index;const q=checkpoints[index];$('#question-title').textContent=q.stem;$('#question-context').textContent=q.context;$('#feedback').textContent='';$('#feedback').className='feedback';$('#hint-replay').hidden=true;$('#continue').hidden=true;$('#answers').replaceChildren();q.options.forEach((option,i)=>{const button=document.createElement('button');button.className='answer';button.textContent=option;button.addEventListener('click',()=>answer(i,button));$('#answers').append(button)})}
|
||
function answer(index,button){const q=checkpoints[activeQuestion];if(!q)return;$$('.answer').forEach(b=>b.classList.remove('wrong','correct'));const correct=index===q.correct;button.classList.add(correct?'correct':'wrong');$('#feedback').textContent=correct?q.success:q.hint;$('#feedback').className=correct?'feedback success':'feedback';$('#hint-replay').hidden=correct||activeQuestion!==0;$('#continue').hidden=!correct;if(correct){completed[teacher].add(activeQuestion);$$('.answer').forEach(b=>b.disabled=true)}else{errors++;$('#notebook').textContent=`دفتر الأخطاء التجريبي: ${errors} محاولة تحتاج مراجعة — محفوظة أثناء تبديل المعلم.`}}
|
||
function seek(value){setPlaying(false);position=Math.max(0,Math.min(600,Number(value)));renderPosition();clearQuestion();const exact=checkpoints.findIndex(q=>q.at===position);if(exact>=0)ask(exact)}
|
||
$('#play').addEventListener('click',()=>{if(activeQuestion!==null&&!completed[teacher].has(activeQuestion)){toast('أجب عن السؤال أو حرّك شريط الزمن للعودة إلى الشرح.');return}if(position>=600){position=0;completed[teacher].clear();renderPosition()}clearQuestion();setPlaying(!playing)});
|
||
$('#timeline').addEventListener('input',e=>seek(e.target.value));$$('[data-seek]').forEach(b=>b.addEventListener('click',()=>seek(b.dataset.seek)));
|
||
$('#hint-replay').addEventListener('click',()=>{seek(135);$('#question-title').textContent='من السكون: السرعة الابتدائية تساوي صفراً.';$('#question-context').textContent='مثال المحاكاة: نضيف تغيّر السرعة (التسارع × الزمن) إلى السرعة الابتدائية. عند 2 م/ث² ولمدة 4 ثوانٍ يصبح التغيّر 8 م/ث.';setPlaying(true)});
|
||
$('#continue').addEventListener('click',()=>{clearQuestion();setPlaying(true)});
|
||
$('#bookmark').addEventListener('click',()=>{bookmarks[teacher]=position;$('#saved-progress').textContent=`موضع محفوظ للشرح ${teacher==='a'?'الأول':'الثاني'}: ${fmt(position)} · ملاحظاتك باقية عند التبديل`;toast(`حُفظ الموضع ${fmt(position)} في هذه الجلسة فقط.`)});
|
||
setInterval(()=>{if(!playing)return;const now=performance.now(),next=Math.min(600,position+(now-lastTick)/1000);lastTick=now;const crossed=checkpoints.findIndex((q,i)=>q.at>position&&q.at<=next&&!completed[teacher].has(i));if(crossed>=0){position=checkpoints[crossed].at;renderPosition();ask(crossed);return}position=next;renderPosition();if(position>=600){setPlaying(false);toast('انتهت المحاكاة. لم يُسجّل إتقان أو رصيد مالي.')}},150);
|
||
document.addEventListener('visibilitychange',()=>{if(document.hidden)setPlaying(false)});
|
||
let teacherCount=2;
|
||
function switchTeacher(id,autoPlay=false){setPlaying(false);teacher=id;position=positions[id];clearQuestion();renderPosition();renderTeachers();$('#saved-progress').textContent=`الشرح ${id==='a'?'الأول':'الثاني'} · الموضع ${fmt(position)} · الملاحظات ودفتر الأخطاء محفوظة`;toast('تغيّر الشرح مع الاحتفاظ بموضع كل فيديو وملاحظات الدرس.');if(autoPlay)setPlaying(true)}
|
||
function renderTeachers(){const list=$('#teacher-list');list.replaceChildren();if(teacherCount===0){list.innerHTML='<div class="empty"><h3>لا يوجد شرح منشور لهذا الدرس بعد.</h3><p class="small">تظل الموارد المنشورة متاحة إن وُجدت. لا توجد موارد معتمدة متصلة بهذه المعاينة.</p><a href="#curriculum" class="text-button" style="display:inline-block">استكشف بنية الموارد ←</a></div>';return}const data=[['a','م ع','أ. محمد عبد الله','4.9','128'],['b','ر خ','د. رانيا الخالد','4.8','96']];data.slice(0,teacherCount).forEach(([id,initials,name,rating,count])=>{const row=document.createElement('div');row.className='teacher-row';row.innerHTML=`<div class="avatar" aria-hidden="true">${initials}</div><div><h3>${name}</h3><p><span class="rating">★ ${rating}</span> · ${count} تقييماً افتراضياً</p></div>`;const btn=document.createElement('button');btn.className='pill';btn.textContent=id===teacher?'الشرح الحالي':'اختر الشرح';btn.disabled=id===teacher;btn.addEventListener('click',()=>switchTeacher(id));row.append(btn);list.append(row)});if(teacherCount===1){const note=document.createElement('p');note.className='small';note.style.marginTop='15px';note.textContent='حصة واحدة: بدأ تشغيل المحاكاة مباشرة دون شاشة اختيار.';list.append(note)}}
|
||
$$('#teacher-switch button').forEach(b=>b.addEventListener('click',()=>{teacherCount=Number(b.dataset.count);$$('#teacher-switch button').forEach(x=>x.setAttribute('aria-pressed',String(x===b)));if(teacherCount===1)switchTeacher('a',true);else{setPlaying(false);renderTeachers()}}));renderTeachers();renderPosition();
|
||
// Use integer fils, never a hard-coded payout rate or floating-point money.
|
||
function calculate(){const students=Number($('#students').value),minutes=Number($('#minutes').value),own=students*minutes;$('#students-output').textContent=students.toLocaleString('en-US');$('#minutes-output').textContent=String(minutes);$('#qualified').textContent=own.toLocaleString('en-US');const pool=$('#pool').value.trim(),others=$('#other-minutes').value.trim();const valid=/^\d+(?:\.\d{1,3})?$/.test(pool)&&/^\d+$/.test(others)&&Number(pool)<=1e9&&Number(others)<=1e12;if(!valid){$('#earnings').textContent='—';$('#share').textContent='—';$('#fils').textContent=pool||others?'أكمل القيم غير السالبة: حتى 3 منازل للصندوق، وعدد صحيح للدقائق.':'أدخل الصندوق ودقائق باقي المعلمين لإظهار التقدير.';return}const [whole,decimal='']=pool.split('.'),poolFils=BigInt(whole)*1000n+BigInt(decimal.padEnd(3,'0')),total=BigInt(own)+BigInt(others),earned=poolFils*BigInt(own)/total;$('#earnings').textContent=`${(earned/1000n).toLocaleString('en-US')}.${(earned%1000n).toString().padStart(3,'0')}`;$('#share').textContent=`${(own/Number(total)*100).toFixed(2)}%`;$('#fils').textContent=`${earned.toLocaleString('en-US')} فلس · نتيجة افتراضاتك فقط`}
|
||
['students','minutes','pool','other-minutes'].forEach(id=>$('#'+id).addEventListener('input',calculate));calculate();
|
||
const subjects=[['physics','الفيزياء',['الحركة بتسارع ثابت','تمثيل الحركة بيانياً']],['math','الرياضيات',['العلاقات والدوال','استكشاف التمثيل البياني']],['english','الإنجليزية',['استكشاف نص القراءة','التدرّب على مفردات الدرس']],['chemistry','الكيمياء',['استكشاف بنية الذرة','تنظيم المفاهيم الكيميائية']]];
|
||
let subject=0,lesson=0;
|
||
function renderCurriculum(){const tabs=$('#subjects');tabs.replaceChildren();subjects.forEach((s,i)=>{const b=document.createElement('button');b.id='subject-'+s[0];b.textContent=s[1];b.setAttribute('role','tab');b.setAttribute('aria-controls','resource-panel');b.setAttribute('aria-selected',String(i===subject));b.tabIndex=i===subject?0:-1;b.addEventListener('click',()=>{subject=i;lesson=0;renderCurriculum();$('#subject-'+s[0]).focus()});tabs.append(b)});$('#resource-panel').setAttribute('aria-labelledby','subject-'+subjects[subject][0]);$('#lessons').replaceChildren();const later=$('#grade').value==='12';const names=later?['تنظيم الدروس بعد اعتماد نطاق التوجيهي']:subjects[subject][2];names.forEach((name,i)=>{const b=document.createElement('button');b.className='lesson';b.setAttribute('aria-pressed',String(i===lesson));b.textContent=name;const small=document.createElement('small');small.textContent=later?'نطاق لاحق · لا محتوى منشور':'مثال تنقل · ليس هوية منهجية معتمدة';b.append(small);b.addEventListener('click',()=>{lesson=i;renderCurriculum();$$('#lessons button')[i].focus()});$('#lessons').append(b)});$('#lesson-name').textContent=names[lesson];$('#lesson-path').textContent=`${later?'التوجيهي — تصور لاحق':'الصف العاشر'} / ${subjects[subject][1]} / معاينة بنية الموارد`}
|
||
$('#grade').addEventListener('change',()=>{lesson=0;renderCurriculum()});renderCurriculum();
|
||
const assets={video:['فيديو المعلم المعتمد','لا يوجد فيديو معتمد متصل بهذا المورد في المعاينة. يمكنك تجربة المشغل التوضيحي في قسم المحاكي السقراطي.'],worksheet:['ورقة العمل التفاعلية','لا توجد ورقة Markdown معتمدة متصلة بهذا الدرس في المعاينة. في المنتج المستهدف تُعرض الورقة بإصدارها ومصدرها، ولا تُستبدل بورقة درس آخر.'],book:['كتاب الوزارة الرسمي','لم تُربط نسخة PDF موثقة لهذه المعاينة؛ لذلك لا يوجد تنزيل متاح. إتاحة الأصل تتطلب تحديد الكتاب والطبعة ومصدر الملف.'],mindmap:['الخريطة الذهنية','لا توجد صورة خريطة معتمدة متصلة بالدرس في المعاينة. الخريطة أصل مستقل بإصدار واضح، ولا تحل محل كتاب الوزارة.']};
|
||
$$('[data-asset]').forEach(b=>b.addEventListener('click',()=>showInfo(...assets[b.dataset.asset])));
|
||
const personas={student:['افهمها بطريقتك.','اختَر الشرح الأقرب إليك، اختبر الفكرة، وعد إلى ما تعثرت فيه. الهدف أن تعرف كيف وصلت إلى الإجابة، لا أن تتذكرها فقط.',['اختيار المعلم ضمن الدرس نفسه','مراجعة أخطائك والعودة إلى مصادرها'],'جرّب رحلة الطالب','#socratic'],teacher:['ليكن شرحك هو القيمة.','ركّز على جودة الفكرة ووضوحها. نموذج الدخل المستهدف يربط نصيبك بدقائق مؤهلة ضمن صندوق معلوم وسياسة موثقة.',['حصة أساسية لكل درس وبديل يُراجع قبل النشر','دخل السوق مستقل عن عقود المدرسة'],'استكشف حاسبة العوائد','#returns'],parent:['تقرير يشرح ما تعنيه النتيجة.','الرؤية أن ترى ما فهمه ابنك، وما يحتاج مراجعته، والخطوة التالية؛ مع صلاحية ربط معتمدة ونتائج تعليمية لها دليل.',['لا وعود بمعدل أو نجاح مضمون','الإجابة بعد تلميح تختلف عن الفهم المستقل'],'تعرّف على فلسفة التعلم','#philosophy'],school:['رحلة أكاديمية بصلاحيات واضحة.','تنظيم المحتوى والتكليفات والتقارير ضمن المدرسة، مع عزل بياناتها وميزانيتها عن السوق المستقل. هذه قدرات مستهدفة تحتاج إثبات التكامل.',['وصول بحسب المدرسة والعضوية والتعاقد','موارد مرتبطة بالمنهج والنسخة'],'استعرض خارطة التنفيذ','#roadmap']};
|
||
$$('[data-persona]').forEach(b=>b.addEventListener('click',()=>{const p=personas[b.dataset.persona];$$('[data-persona]').forEach(x=>{x.setAttribute('aria-selected',String(x===b));x.tabIndex=x===b?0:-1});$('#persona-panel').setAttribute('aria-labelledby',b.id);$('#persona-title').textContent=p[0];$('#persona-description').textContent=p[1];$('#persona-points').replaceChildren(...p[2].map(text=>{const li=document.createElement('li');li.textContent=text;return li}));$('#persona-cta').textContent=p[3]+' ←';$('#persona-cta').href=p[4]}));
|
||
$$('[role=tablist]').forEach(list=>list.addEventListener('keydown',e=>{if(!['ArrowLeft','ArrowRight','Home','End'].includes(e.key))return;e.preventDefault();const tabs=[...list.querySelectorAll('[role=tab]')],index=tabs.indexOf(document.activeElement);const next=e.key==='Home'?0:e.key==='End'?tabs.length-1:(index+(e.key==='ArrowLeft'?1:-1)+tabs.length)%tabs.length;tabs[next].click();list.querySelectorAll('[role=tab]')[next].focus()}));
|
||
$$('[data-info]').forEach(b=>b.addEventListener('click',()=>{if(b.dataset.info==='privacy')showInfo('خصوصية هذه المعاينة','لا تحتوي الصفحة على تسجيل أو تحليلات أو إرسال إجابات أو معاملات. تُحفظ اختيارات المحاكاة في ذاكرة الصفحة وتُمسح عند إعادة تحميلها. يُطلب خط Alexandria من Google Fonts؛ يمكن حظره وتبقى الصفحة تعمل بخط النظام.');else showInfo('تجربة أقرب للجميع','يمكن التنقل بلوحة المفاتيح، واستخدام الأسهم داخل التبويبات، وإغلاق النوافذ بزر Escape. تدعم الصفحة تكبير النص وتفضيل تقليل الحركة في الجهاز. استخدم الزر لتقليل الحركة في هذه الجلسة أيضاً.',true)}));
|
||
$('#motion-toggle').addEventListener('click',()=>{const on=document.body.classList.toggle('reduce-motion');$('#motion-toggle').setAttribute('aria-pressed',String(on));$('#motion-toggle').textContent=on?'استعادة تفضيل حركة الجهاز':'تقليل الحركة';document.documentElement.style.scrollBehavior=on?'auto':'';$$('[data-tilt]').forEach(el=>el.style.transform='')});
|
||
if('IntersectionObserver'in window){document.documentElement.classList.add('js-motion');const observer=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');observer.unobserve(e.target)}}),{threshold:.08});$$('.reveal').forEach(el=>observer.observe(el))}
|
||
if(matchMedia('(pointer:fine)').matches){let frame=0;document.addEventListener('pointermove',e=>{if(reduced.matches||document.body.classList.contains('reduce-motion')||frame)return;frame=requestAnimationFrame(()=>{document.body.style.setProperty('--mx',e.clientX+'px');document.body.style.setProperty('--my',e.clientY+'px');frame=0})},{passive:true});$$('[data-tilt]').forEach(card=>{card.addEventListener('pointermove',e=>{if(reduced.matches||document.body.classList.contains('reduce-motion'))return;const r=card.getBoundingClientRect(),x=(e.clientX-r.left)/r.width-.5,y=(e.clientY-r.top)/r.height-.5;card.style.transform=`perspective(1000px) rotateX(${-y*4}deg) rotateY(${x*4}deg)`});card.addEventListener('pointerleave',()=>card.style.transform='')})}
|
||
</script>
|
||
</body>
|
||
</html>
|