2235 lines
80 KiB
HTML
2235 lines
80 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<meta name="theme-color" content="#030712">
|
||
<meta name="description" content="منصة صَقِل — لا تشترِ بطاقة تلقين، تملّك فهمك لدرسك. الجيل القادم من التعليم المنهجي بالأردن للصف العاشر والتوجيهي مع المعلم السقراطي الذكي وتعددية المعلمين.">
|
||
<title>صَقِل | SAQEL — الإتقان المنهجي، بطريقتك</title>
|
||
|
||
<!-- Apple Typography (Alexandria as top-tier Arabic SF counterpart) -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ==========================================================================
|
||
1. APPLE CUPERTINO LUXURY DESIGN SYSTEM (CORE VARIABLES & RESETS)
|
||
========================================================================== */
|
||
:root {
|
||
/* Colors: Deep OLED Blacks & Materials */
|
||
--bg-base: #020408;
|
||
--bg-surface: #070B14;
|
||
--bg-glass: rgba(13, 19, 33, 0.65);
|
||
--bg-glass-hover: rgba(20, 28, 48, 0.8);
|
||
--bg-glass-card: rgba(18, 25, 42, 0.55);
|
||
|
||
/* Apple Neon & Metallic Accents */
|
||
--apple-blue: #0071E3;
|
||
--apple-blue-glow: rgba(0, 113, 227, 0.45);
|
||
--apple-cyan: #00F5D4;
|
||
--apple-cyan-glow: rgba(0, 245, 212, 0.35);
|
||
--apple-gold: #FF9F0A;
|
||
--apple-gold-glow: rgba(255, 159, 10, 0.35);
|
||
--apple-purple: #AF52DE;
|
||
--apple-emerald: #30D158;
|
||
--apple-emerald-glow: rgba(48, 209, 88, 0.4);
|
||
|
||
/* Hairlines & Borders */
|
||
--border-subtle: rgba(255, 255, 255, 0.08);
|
||
--border-medium: rgba(255, 255, 255, 0.16);
|
||
--border-highlight: rgba(0, 245, 212, 0.5);
|
||
|
||
/* Typography Colors */
|
||
--text-white: #F8FAFC;
|
||
--text-silver: #94A3B8;
|
||
--text-muted: #64748B;
|
||
|
||
/* Glassmorphism Blur */
|
||
--blur-ambient: blur(35px) saturate(190%);
|
||
|
||
/* Typography Stack */
|
||
--font-apple: -apple-system, BlinkMacSystemFont, "SF Pro AR", "SF Pro Display", "SF Pro Text", "SF Arabic", "Alexandria", system-ui, sans-serif;
|
||
--font-latin: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
|
||
/* Physics Timing */
|
||
--ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font-apple);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
background-color: var(--bg-base);
|
||
color: var(--text-white);
|
||
overflow-x: hidden;
|
||
selection-background-color: var(--apple-blue);
|
||
}
|
||
|
||
::selection {
|
||
background: rgba(0, 113, 227, 0.45);
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-base);
|
||
color: var(--text-white);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* Ambient Dynamic Spotlight Canvas */
|
||
#ambient-canvas {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.cursor-spotlight {
|
||
position: fixed;
|
||
width: 600px;
|
||
height: 600px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(0, 113, 227, 0.12) 0%, rgba(0, 245, 212, 0.05) 40%, transparent 70%);
|
||
pointer-events: none;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 1;
|
||
transition: transform 0.08s linear, opacity 0.3s ease;
|
||
}
|
||
|
||
/* Layout Wrapper */
|
||
.container {
|
||
width: min(1280px, calc(100% - 48px));
|
||
margin: 0 auto;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* Typography Scale */
|
||
h1, h2, h3, h4 {
|
||
font-weight: 800;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(38px, 6.2vw, 84px);
|
||
line-height: 1.12;
|
||
}
|
||
|
||
h2 {
|
||
font-size: clamp(28px, 4vw, 54px);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
h3 {
|
||
font-size: clamp(20px, 2.5vw, 30px);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
p {
|
||
color: var(--text-silver);
|
||
font-size: clamp(15px, 1.2vw, 18px);
|
||
line-height: 1.8;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.latin-text {
|
||
font-family: var(--font-latin);
|
||
direction: ltr;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Shimmering Metallic Text */
|
||
.text-metallic {
|
||
background: linear-gradient(135deg, #FFFFFF 20%, #CBD5E1 50%, #94A3B8 80%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.text-gradient-cyan {
|
||
background: linear-gradient(135deg, #00F5D4 0%, #0071E3 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.text-gradient-gold {
|
||
background: linear-gradient(135deg, #FFD60A 0%, #FF9F0A 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
2. BUTTONS & PILLS (APPLE CUPERTINO INTERACTIVE DESIGN)
|
||
========================================================================== */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
padding: 14px 32px;
|
||
border-radius: 980px;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s var(--ease-apple);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(180deg, #0077ED 0%, #0058BA 100%);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 4px 20px rgba(0, 113, 227, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.35);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: scale(1.03) translateY(-2px);
|
||
box-shadow: 0 8px 30px rgba(0, 113, 227, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.btn-primary:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn-glass {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: var(--text-white);
|
||
border: 1px solid var(--border-subtle);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
}
|
||
|
||
.btn-glass:hover {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
border-color: rgba(255, 255, 255, 0.25);
|
||
transform: scale(1.03) translateY(-2px);
|
||
}
|
||
|
||
.btn-cyan {
|
||
background: linear-gradient(180deg, #00F5D4 0%, #00C4AA 100%);
|
||
color: #020408;
|
||
font-weight: 700;
|
||
box-shadow: 0 4px 25px rgba(0, 245, 212, 0.35);
|
||
}
|
||
|
||
.btn-cyan:hover {
|
||
transform: scale(1.03) translateY(-2px);
|
||
box-shadow: 0 8px 35px rgba(0, 245, 212, 0.6);
|
||
}
|
||
|
||
.badge-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 16px;
|
||
border-radius: 980px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid var(--border-subtle);
|
||
color: var(--text-silver);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.badge-pill .pulse-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--apple-cyan);
|
||
box-shadow: 0 0 12px var(--apple-cyan);
|
||
animation: pulse-glow 2s infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes pulse-glow {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.4; transform: scale(1.3); }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
3. FLOATING CUPERTINO NAVIGATION BAR
|
||
========================================================================== */
|
||
.nav-wrapper {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 0 20px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.nav-island {
|
||
pointer-events: auto;
|
||
background: rgba(10, 15, 26, 0.72);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
backdrop-filter: blur(28px) saturate(200%);
|
||
-webkit-backdrop-filter: blur(28px) saturate(200%);
|
||
border-radius: 980px;
|
||
padding: 8px 14px 8px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32px;
|
||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||
transition: all 0.3s var(--ease-apple);
|
||
}
|
||
|
||
.brand-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
text-decoration: none;
|
||
color: var(--text-white);
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 34px;
|
||
height: 34px;
|
||
background: linear-gradient(135deg, #0071E3, #00F5D4);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 0 20px rgba(0, 245, 212, 0.4);
|
||
}
|
||
|
||
.brand-mark svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
fill: #FFFFFF;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 22px;
|
||
font-weight: 900;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.brand-badge {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
background: rgba(0, 245, 212, 0.15);
|
||
color: var(--apple-cyan);
|
||
border: 1px solid rgba(0, 245, 212, 0.3);
|
||
padding: 2px 8px;
|
||
border-radius: 6px;
|
||
font-family: var(--font-latin);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-silver);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: color 0.2s ease, transform 0.2s ease;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: #FFFFFF;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.nav-cta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.nav-cta .btn {
|
||
padding: 10px 22px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
4. HERO SECTION (THE GRAND STATEMENT & 3D STUDIO DEVICE)
|
||
========================================================================== */
|
||
.hero-section {
|
||
padding: 180px 0 100px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.hero-eyebrow {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero-title {
|
||
max-width: 1050px;
|
||
margin: 0 auto 26px;
|
||
}
|
||
|
||
.hero-title span {
|
||
display: inline-block;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
max-width: 720px;
|
||
margin: 0 auto 40px;
|
||
font-size: clamp(17px, 1.4vw, 21px);
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 18px;
|
||
margin-bottom: 50px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Live Telemetry Bento Bar */
|
||
.telemetry-bar {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
max-width: 980px;
|
||
margin: 0 auto 60px;
|
||
background: var(--bg-glass-card);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 24px;
|
||
padding: 20px 28px;
|
||
backdrop-filter: var(--blur-ambient);
|
||
-webkit-backdrop-filter: var(--blur-ambient);
|
||
}
|
||
|
||
.telemetry-item {
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.telemetry-item:not(:last-child):after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 15%;
|
||
height: 70%;
|
||
width: 1px;
|
||
background: var(--border-subtle);
|
||
}
|
||
|
||
.telemetry-value {
|
||
font-size: clamp(24px, 2.5vw, 36px);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.telemetry-label {
|
||
font-size: 12px;
|
||
color: var(--text-silver);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 3D Apple Studio Cinema Display Showcase */
|
||
.device-stage {
|
||
perspective: 1600px;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.device-stage:before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -40px 10% -20px;
|
||
background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.35) 0%, rgba(0, 245, 212, 0.15) 50%, transparent 75%);
|
||
filter: blur(60px);
|
||
z-index: -1;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.apple-device-frame {
|
||
background: linear-gradient(145deg, #2D3748 0%, #0F172A 35%, #05070B 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 36px;
|
||
padding: 14px;
|
||
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||
transform: rotateX(4deg);
|
||
transition: transform 0.6s var(--ease-apple), box-shadow 0.6s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.apple-device-frame:hover {
|
||
transform: rotateX(0deg) scale(1.01);
|
||
box-shadow: 0 50px 140px rgba(0, 113, 227, 0.35);
|
||
}
|
||
|
||
.screen-surface {
|
||
background: #060913;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto;
|
||
text-align: right;
|
||
}
|
||
|
||
.screen-header {
|
||
background: rgba(15, 23, 42, 0.8);
|
||
padding: 14px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.screen-dots {
|
||
display: flex;
|
||
gap: 7px;
|
||
}
|
||
|
||
.screen-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.screen-dot.red { background: #FF5F56; }
|
||
.screen-dot.yellow { background: #FFBD2E; }
|
||
.screen-dot.green { background: #27C93F; }
|
||
|
||
.screen-title-tag {
|
||
font-size: 13px;
|
||
color: var(--text-silver);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* Screen Main Body: Split Player & Socratic Pane */
|
||
.screen-body {
|
||
display: grid;
|
||
grid-template-columns: 1.8fr 1.2fr;
|
||
min-height: 480px;
|
||
background: #080D1A;
|
||
}
|
||
|
||
.video-viewport {
|
||
padding: 30px;
|
||
background: radial-gradient(circle at center, #0F172A 0%, #070B14 100%);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
border-left: 1px solid var(--border-subtle);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chalkboard-grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||
background-size: 32px 32px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.teacher-badge-overlay {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.teacher-avatar-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
padding: 6px 14px 6px 8px;
|
||
border-radius: 980px;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.teacher-avatar-chip .avatar-circle {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #0071E3, #00F5D4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
}
|
||
|
||
.board-simulation-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: center;
|
||
margin: auto 0;
|
||
}
|
||
|
||
.physics-equation {
|
||
font-size: clamp(26px, 3.2vw, 44px);
|
||
font-weight: 300;
|
||
color: #FFFFFF;
|
||
margin-bottom: 12px;
|
||
font-family: var(--font-latin);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.physics-equation span.highlight {
|
||
color: var(--apple-cyan);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.live-soundwave-viz {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
height: 48px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.sound-bar {
|
||
width: 4px;
|
||
border-radius: 4px;
|
||
background: linear-gradient(180deg, var(--apple-cyan) 0%, var(--apple-blue) 100%);
|
||
animation: sound-bounce 1.2s infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes sound-bounce {
|
||
0%, 100% { height: 8px; }
|
||
50% { height: 42px; }
|
||
}
|
||
|
||
/* Video Player Timeline Bar */
|
||
.video-timeline-controls {
|
||
position: relative;
|
||
z-index: 2;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
padding: 12px 18px;
|
||
backdrop-filter: blur(16px);
|
||
}
|
||
|
||
.timeline-track-wrapper {
|
||
position: relative;
|
||
height: 8px;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
border-radius: 980px;
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.timeline-progress-fill {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 45%;
|
||
background: linear-gradient(90deg, var(--apple-blue), var(--apple-cyan));
|
||
border-radius: 980px;
|
||
transition: width 0.1s linear;
|
||
}
|
||
|
||
.socratic-timeline-pin {
|
||
position: absolute;
|
||
top: -6px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: var(--apple-gold);
|
||
box-shadow: 0 0 15px var(--apple-gold);
|
||
border: 3px solid #060913;
|
||
transform: translateX(50%);
|
||
cursor: pointer;
|
||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
}
|
||
|
||
.socratic-timeline-pin:hover {
|
||
transform: translateX(50%) scale(1.3);
|
||
}
|
||
|
||
.timeline-meta-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: var(--text-silver);
|
||
}
|
||
|
||
/* Screen Side: Live Socratic AI Pane */
|
||
.socratic-hud-pane {
|
||
padding: 28px;
|
||
background: rgba(14, 21, 37, 0.7);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.socratic-header-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--apple-cyan);
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.socratic-question-box {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 18px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.socratic-question-box p {
|
||
color: var(--text-white);
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.socratic-interactive-choices {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.choice-card-btn {
|
||
text-align: right;
|
||
padding: 14px 18px;
|
||
border-radius: 14px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid var(--border-subtle);
|
||
color: var(--text-white);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: all 0.2s var(--ease-apple);
|
||
}
|
||
|
||
.choice-card-btn:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border-color: rgba(255, 255, 255, 0.25);
|
||
transform: translateX(-4px);
|
||
}
|
||
|
||
.choice-card-btn.correct-glow {
|
||
background: rgba(48, 209, 88, 0.15);
|
||
border-color: var(--apple-emerald);
|
||
color: #6EE7B7;
|
||
}
|
||
|
||
.choice-card-btn.wrong-glow {
|
||
background: rgba(255, 159, 10, 0.15);
|
||
border-color: var(--apple-gold);
|
||
color: #FCD34D;
|
||
}
|
||
|
||
.socratic-pedagogical-hint {
|
||
margin-top: 14px;
|
||
padding: 14px 16px;
|
||
border-radius: 12px;
|
||
background: rgba(0, 113, 227, 0.12);
|
||
border: 1px solid rgba(0, 113, 227, 0.35);
|
||
font-size: 13px;
|
||
color: #93C5FD;
|
||
line-height: 1.6;
|
||
display: none;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
5. BENTO GRID: THE ARCHITECTURAL REVOLUTION (FIVE PILLARS)
|
||
========================================================================== */
|
||
.section-spacing {
|
||
padding: 120px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
max-width: 800px;
|
||
margin: 0 auto 64px;
|
||
}
|
||
|
||
.section-header .section-eyebrow {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Apple Bento Grid Container */
|
||
.apple-bento-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.bento-card {
|
||
background: var(--bg-glass-card);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 32px;
|
||
padding: 44px;
|
||
backdrop-filter: var(--blur-ambient);
|
||
-webkit-backdrop-filter: var(--blur-ambient);
|
||
transition: all 0.4s var(--ease-apple);
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.bento-card:hover {
|
||
border-color: rgba(255, 255, 255, 0.25);
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 113, 227, 0.15);
|
||
}
|
||
|
||
.bento-col-8 { grid-column: span 8; }
|
||
.bento-col-4 { grid-column: span 4; }
|
||
.bento-col-6 { grid-column: span 6; }
|
||
.bento-col-12 { grid-column: span 12; }
|
||
|
||
.bento-icon-wrapper {
|
||
width: 58px;
|
||
height: 58px;
|
||
border-radius: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 28px;
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.bento-icon-wrapper svg {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.bento-card h3 {
|
||
margin-bottom: 14px;
|
||
font-size: 26px;
|
||
}
|
||
|
||
.bento-card p {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
6. INTERACTIVE ENGINE 1: MULTI-TEACHER ROSTER (FREE MARKETPLACE)
|
||
========================================================================== */
|
||
.teacher-switcher-wrapper {
|
||
background: rgba(10, 16, 30, 0.6);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 36px;
|
||
padding: 48px;
|
||
backdrop-filter: var(--blur-ambient);
|
||
}
|
||
|
||
.switcher-nav-tabs {
|
||
display: inline-flex;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 980px;
|
||
padding: 6px;
|
||
gap: 6px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.tab-toggle-btn {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--text-silver);
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
padding: 10px 24px;
|
||
border-radius: 980px;
|
||
cursor: pointer;
|
||
transition: all 0.25s var(--ease-apple);
|
||
}
|
||
|
||
.tab-toggle-btn.active {
|
||
background: #FFFFFF;
|
||
color: #000000;
|
||
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.teacher-cards-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.teacher-roster-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 24px;
|
||
padding: 26px;
|
||
cursor: pointer;
|
||
transition: all 0.3s var(--ease-apple);
|
||
position: relative;
|
||
}
|
||
|
||
.teacher-roster-card:hover, .teacher-roster-card.selected {
|
||
background: rgba(0, 113, 227, 0.12);
|
||
border-color: var(--apple-blue);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.teacher-card-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.teacher-avatar {
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #1E293B, #334155);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.teacher-meta h4 {
|
||
font-size: 18px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.teacher-meta span {
|
||
font-size: 12px;
|
||
color: var(--text-silver);
|
||
}
|
||
|
||
.teacher-stats-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1px solid var(--border-subtle);
|
||
padding-top: 14px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.teacher-rating {
|
||
color: var(--apple-gold);
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
7. INTERACTIVE ENGINE 2: TRANSPARENT TEACHER MINUTE CALCULATOR
|
||
========================================================================== */
|
||
.calculator-frame {
|
||
display: grid;
|
||
grid-template-columns: 1.2fr 1fr;
|
||
background: var(--bg-glass-card);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 36px;
|
||
overflow: hidden;
|
||
backdrop-filter: var(--blur-ambient);
|
||
}
|
||
|
||
.calc-sliders-pane {
|
||
padding: 50px;
|
||
border-left: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.calc-slider-group {
|
||
margin-bottom: 36px;
|
||
}
|
||
|
||
.calc-slider-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.calc-slider-header label {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.calc-slider-header .slider-val {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
color: var(--apple-cyan);
|
||
font-family: var(--font-latin);
|
||
}
|
||
|
||
/* Custom Apple Range Slider */
|
||
input[type="range"] {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 100%;
|
||
height: 8px;
|
||
border-radius: 980px;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
input[type="range"]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
||
cursor: pointer;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
input[type="range"]::-webkit-slider-thumb:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.calc-results-pane {
|
||
padding: 50px;
|
||
background: radial-gradient(circle at center, rgba(0, 113, 227, 0.15) 0%, transparent 80%), rgba(10, 15, 28, 0.85);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.calc-payout-label {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-silver);
|
||
margin-bottom: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.calc-payout-figure {
|
||
font-size: clamp(40px, 4.5vw, 68px);
|
||
font-weight: 900;
|
||
color: #FFFFFF;
|
||
line-height: 1.1;
|
||
margin-bottom: 6px;
|
||
font-family: var(--font-latin);
|
||
}
|
||
|
||
.calc-currency-tag {
|
||
font-size: 16px;
|
||
color: var(--apple-emerald);
|
||
font-weight: 700;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.calc-breakdown-table {
|
||
width: 100%;
|
||
border-top: 1px solid var(--border-subtle);
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.calc-table-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
padding: 8px 0;
|
||
color: var(--text-silver);
|
||
}
|
||
|
||
.calc-table-row span.val {
|
||
color: var(--text-white);
|
||
font-weight: 700;
|
||
font-family: var(--font-latin);
|
||
}
|
||
|
||
/* ==========================================================================
|
||
8. INTERACTIVE ENGINE 3: CURRICULUM TREE & THE QUAD ASSET SYSTEM
|
||
========================================================================== */
|
||
.curriculum-explorer-box {
|
||
background: var(--bg-glass-card);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 36px;
|
||
padding: 44px;
|
||
backdrop-filter: var(--blur-ambient);
|
||
}
|
||
|
||
.curriculum-tabs-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
padding-bottom: 24px;
|
||
margin-bottom: 36px;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
.grade-selector-chips {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.grade-chip {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid var(--border-subtle);
|
||
color: var(--text-silver);
|
||
padding: 8px 20px;
|
||
border-radius: 980px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.grade-chip.active {
|
||
background: var(--apple-blue);
|
||
color: #FFFFFF;
|
||
border-color: var(--apple-blue);
|
||
box-shadow: 0 4px 20px var(--apple-blue-glow);
|
||
}
|
||
|
||
.curriculum-quad-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.quad-asset-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 24px;
|
||
padding: 28px;
|
||
transition: all 0.3s var(--ease-apple);
|
||
}
|
||
|
||
.quad-asset-card:hover {
|
||
background: rgba(255, 255, 255, 0.07);
|
||
border-color: rgba(255, 255, 255, 0.25);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.quad-icon {
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.quad-icon.video { background: rgba(0, 113, 227, 0.2); color: var(--apple-blue); }
|
||
.quad-icon.worksheet { background: rgba(0, 245, 212, 0.2); color: var(--apple-cyan); }
|
||
.quad-icon.book { background: rgba(255, 159, 10, 0.2); color: var(--apple-gold); }
|
||
.quad-icon.mindmap { background: rgba(175, 82, 222, 0.2); color: var(--apple-purple); }
|
||
|
||
.quad-asset-card h4 {
|
||
font-size: 17px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.quad-asset-card p {
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
9. THE RADICAL COMPARISON MATRIX
|
||
========================================================================== */
|
||
.comparison-table-wrapper {
|
||
background: var(--bg-glass-card);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 36px;
|
||
overflow-x: auto;
|
||
backdrop-filter: var(--blur-ambient);
|
||
}
|
||
|
||
table.apple-matrix {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: right;
|
||
min-width: 800px;
|
||
}
|
||
|
||
table.apple-matrix th, table.apple-matrix td {
|
||
padding: 24px 30px;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
font-size: 15px;
|
||
}
|
||
|
||
table.apple-matrix th {
|
||
font-weight: 700;
|
||
color: var(--text-silver);
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
table.apple-matrix th.col-saqel {
|
||
background: rgba(0, 113, 227, 0.12);
|
||
color: #FFFFFF;
|
||
font-size: 18px;
|
||
border-right: 2px solid var(--apple-blue);
|
||
border-left: 2px solid var(--apple-blue);
|
||
}
|
||
|
||
table.apple-matrix td.col-saqel {
|
||
background: rgba(0, 113, 227, 0.06);
|
||
font-weight: 600;
|
||
color: #E2E8F0;
|
||
border-right: 2px solid var(--apple-blue);
|
||
border-left: 2px solid var(--apple-blue);
|
||
}
|
||
|
||
.check-yes {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--apple-cyan);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.cross-no {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: #EF4444;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
10. GRAND FINALE (AURORA HORIZON & FOOTER)
|
||
========================================================================== */
|
||
.finale-cta-card {
|
||
background: radial-gradient(ellipse at bottom, rgba(0, 113, 227, 0.4) 0%, rgba(0, 245, 212, 0.15) 40%, rgba(10, 15, 28, 0.9) 70%);
|
||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||
border-radius: 44px;
|
||
padding: 90px 40px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 40px 100px rgba(0, 113, 227, 0.25);
|
||
}
|
||
|
||
.finale-cta-card h2 {
|
||
max-width: 800px;
|
||
margin: 0 auto 24px;
|
||
}
|
||
|
||
.finale-cta-card p {
|
||
max-width: 600px;
|
||
margin: 0 auto 40px;
|
||
font-size: 19px;
|
||
}
|
||
|
||
footer.luxury-footer {
|
||
border-top: 1px solid var(--border-subtle);
|
||
padding: 60px 0 40px;
|
||
margin-top: 120px;
|
||
}
|
||
|
||
.footer-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 32px;
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--text-silver);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.footer-copy {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Interactive Modal */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: blur(20px);
|
||
z-index: 2000;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.modal-box {
|
||
background: #0D1527;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 28px;
|
||
padding: 44px;
|
||
max-width: 520px;
|
||
width: 100%;
|
||
text-align: center;
|
||
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9);
|
||
position: relative;
|
||
}
|
||
|
||
.modal-close-btn {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 20px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: none;
|
||
color: #FFFFFF;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Responsive Queries */
|
||
@media (max-width: 1024px) {
|
||
.screen-body { grid-template-columns: 1fr; }
|
||
.apple-bento-grid { grid-template-columns: 1fr; }
|
||
.bento-col-8, .bento-col-4, .bento-col-6 { grid-column: span 12; }
|
||
.calculator-frame { grid-template-columns: 1fr; }
|
||
.calc-sliders-pane { border-left: none; border-bottom: 1px solid var(--border-subtle); }
|
||
.curriculum-quad-grid { grid-template-columns: 1fr 1fr; }
|
||
.telemetry-bar { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||
.telemetry-item:nth-child(2):after { display: none; }
|
||
.nav-links { display: none; }
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.teacher-cards-grid { grid-template-columns: 1fr; }
|
||
.curriculum-quad-grid { grid-template-columns: 1fr; }
|
||
.telemetry-bar { grid-template-columns: 1fr; }
|
||
.telemetry-item:after { display: none !important; }
|
||
.bento-card { padding: 30px 24px; }
|
||
.nav-island { padding: 6px 12px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Dynamic Ambient Background Canvas -->
|
||
<canvas id="ambient-canvas"></canvas>
|
||
<div class="cursor-spotlight" id="spotlight"></div>
|
||
|
||
<!-- FLOATING CUPERTINO NAV BAR -->
|
||
<div class="nav-wrapper">
|
||
<nav class="nav-island">
|
||
<a href="#" class="brand-logo">
|
||
<div class="brand-mark">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||
</div>
|
||
<span class="brand-name">صَقِل</span>
|
||
<span class="brand-badge">PRO v1.0</span>
|
||
</a>
|
||
|
||
<ul class="nav-links">
|
||
<li><a href="#hero">الرؤية</a></li>
|
||
<li><a href="#socratic-engine">المعلم السقراطي</a></li>
|
||
<li><a href="#teachers-market">تعدد المعلمين</a></li>
|
||
<li><a href="#minute-calculator">عوائد الدقائق</a></li>
|
||
<li><a href="#curriculum-quad">شجرة المنهج</a></li>
|
||
<li><a href="#comparison-matrix">المقارنة</a></li>
|
||
</ul>
|
||
|
||
<div class="nav-cta">
|
||
<button class="btn btn-primary" onclick="openEarlyAccessModal()">ابدأ التعلّم بالإتقان</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- HERO SECTION -->
|
||
<header class="hero-section" id="hero">
|
||
<div class="container">
|
||
|
||
<div class="hero-eyebrow">
|
||
<div class="badge-pill">
|
||
<span class="pulse-dot"></span>
|
||
<span>المنظومة التعليمية المنهجية الأولى بالأردن | 2026</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 class="hero-title">
|
||
<span class="text-metallic">لا تشترِ بطاقة تلقين..</span><br>
|
||
<span class="text-gradient-cyan">تملّك فهمك لدرسك.</span>
|
||
</h1>
|
||
|
||
<p class="hero-subtitle">
|
||
الدرس المنهجي الواحد يشرحه كبار المعلمين بحرية كاملة، يقودك فيه مساعد سقراطي يفكك لك موضع التعثر من كتاب الوزارة المعتمد دون حفظ سلبي أو احتكار.
|
||
</p>
|
||
|
||
<div class="hero-actions">
|
||
<button class="btn btn-cyan" onclick="scrollToSection('socratic-engine')">
|
||
<span>جرّب المحاكي السقراطي الآن</span>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m19 12-7 7-7-7M19 5l-7 7-7-7"/></svg>
|
||
</button>
|
||
<button class="btn btn-glass" onclick="scrollToSection('minute-calculator')">
|
||
<span>استوديو عوائد المعلمين بالدقيقة</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Live Telemetry Bento Bar -->
|
||
<div class="telemetry-bar">
|
||
<div class="telemetry-item">
|
||
<div class="telemetry-value text-gradient-cyan">0%</div>
|
||
<div class="telemetry-label">بيانات مصطنعة أو ترويج وهمي</div>
|
||
</div>
|
||
<div class="telemetry-item">
|
||
<div class="telemetry-value text-metallic">100%</div>
|
||
<div class="telemetry-label">ارتباط حرفي بالمنهج الأردني</div>
|
||
</div>
|
||
<div class="telemetry-item">
|
||
<div class="telemetry-value text-gradient-gold">∞</div>
|
||
<div class="telemetry-label">حرية اختيار المعلم دون بطاقات</div>
|
||
</div>
|
||
<div class="telemetry-item">
|
||
<div class="telemetry-value text-metallic latin-text">0.001 JOD</div>
|
||
<div class="telemetry-label">حساب عوائد المعلم بدقة الفلس</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3D STUDIO DEVICE SHOWCASE -->
|
||
<div class="device-stage" id="socratic-engine">
|
||
<div class="apple-device-frame">
|
||
<div class="screen-surface">
|
||
|
||
<div class="screen-header">
|
||
<div class="screen-dots">
|
||
<span class="screen-dot red"></span>
|
||
<span class="screen-dot yellow"></span>
|
||
<span class="screen-dot green"></span>
|
||
</div>
|
||
<div class="screen-title-tag">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 8 6 4-6 4Z"/></svg>
|
||
<span>الصف العاشر | الفيزياء | الحركة بتسارع ثابت — الحصة الأساسية</span>
|
||
</div>
|
||
<span class="badge-pill" style="font-size:11px; padding:3px 10px;">بث تفاعلي نشط</span>
|
||
</div>
|
||
|
||
<div class="screen-body">
|
||
|
||
<!-- Video Viewport -->
|
||
<div class="video-viewport">
|
||
<div class="chalkboard-grid"></div>
|
||
|
||
<div class="teacher-badge-overlay">
|
||
<div class="teacher-avatar-chip">
|
||
<div class="avatar-circle">أ.ح</div>
|
||
<div>
|
||
<div style="font-size: 13px; font-weight:700;">أ. حسام الخطيب</div>
|
||
<div style="font-size: 10px; color: var(--apple-cyan);">فيزياء العاشر والتوجيهي • 4.98 ★</div>
|
||
</div>
|
||
</div>
|
||
<span class="badge-pill latin-text" id="live-timecode">03:45 / 12:20</span>
|
||
</div>
|
||
|
||
<div class="board-simulation-content">
|
||
<div class="physics-equation">
|
||
v = v₀ + <span class="highlight">a · t</span>
|
||
</div>
|
||
<p style="font-size:14px; color:var(--text-silver);">المعادلة الأولى للحركة بتسارع منتظم في خط مستقيم</p>
|
||
|
||
<div class="live-soundwave-viz">
|
||
<span class="sound-bar" style="animation-delay: 0.1s"></span>
|
||
<span class="sound-bar" style="animation-delay: 0.3s"></span>
|
||
<span class="sound-bar" style="animation-delay: 0.2s"></span>
|
||
<span class="sound-bar" style="animation-delay: 0.5s"></span>
|
||
<span class="sound-bar" style="animation-delay: 0.4s"></span>
|
||
<span class="sound-bar" style="animation-delay: 0.6s"></span>
|
||
<span class="sound-bar" style="animation-delay: 0.2s"></span>
|
||
<span class="sound-bar" style="animation-delay: 0.4s"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Interactive Timeline Bar -->
|
||
<div class="video-timeline-controls">
|
||
<div class="timeline-track-wrapper" onclick="handleScrubTimeline(event)">
|
||
<div class="timeline-progress-fill" id="timeline-bar"></div>
|
||
<div class="socratic-timeline-pin" style="right: 30%;" title="نقطة الفحص السقراطي 1"></div>
|
||
<div class="socratic-timeline-pin" style="right: 65%;" title="نقطة الفحص السقراطي 2"></div>
|
||
</div>
|
||
<div class="timeline-meta-row">
|
||
<span>انقر على النقطة الذهبية لتجربة وقفة التقييم السقراطية</span>
|
||
<span class="latin-text" style="color:var(--apple-gold);">● وقفتا فحص سقراطي مثبّتتان</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Socratic HUD Pane -->
|
||
<div class="socratic-hud-pane">
|
||
<div>
|
||
<div class="socratic-header-badge">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
|
||
<span>فحص الفهم السقراطي (الموثق بالدقيقة 03:45)</span>
|
||
</div>
|
||
|
||
<div class="socratic-question-box">
|
||
<p id="socratic-q-text">
|
||
إذا تحركت مركبة من "السكون" بتسارع ثابت مقداره 3 م/ث²، فما سرعتها اللحظية بعد مرور 4 ثوانٍ؟
|
||
</p>
|
||
</div>
|
||
|
||
<div class="socratic-interactive-choices">
|
||
<button class="choice-card-btn" onclick="checkSocraticAnswer(this, false, 'ركز في نص السؤال: المركبة بدأت من السكون، أي أن v₀ = 0. راجع الدقيقة 02:15 في المقطع أو الصفحة 38 من كتاب الفيزياء.')">
|
||
<span>أ) 7 م/ث</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
||
</button>
|
||
|
||
<button class="choice-card-btn" onclick="checkSocraticAnswer(this, true, 'إجابة رياضية دقيقة ومتقنة! v = 0 + (3 × 4) = 12 م/ث. تم تثبيت المفهوم في سجل إتقانك.')">
|
||
<span>ب) 12 م/ث</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
||
</button>
|
||
|
||
<button class="choice-card-btn" onclick="checkSocraticAnswer(this, false, 'لقد قمت بجمع التسارع مع الزمن بدل ضربهما! القانون ينص على ضرب a في t. راجع المفهوم في المقطع.')">
|
||
<span>ج) 1 م/ث</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="socratic-pedagogical-hint" id="socratic-hint"></div>
|
||
</div>
|
||
|
||
<div style="font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: 14px;">
|
||
السؤال مشتق آلياً من التفريغ الزمني للشرح ومطابق لمخرجات كتاب الفيزياء الوزاري طبعة 2026.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<!-- THE ARCHITECTURAL BENTO GRID -->
|
||
<section class="section-spacing" id="features">
|
||
<div class="container">
|
||
|
||
<div class="section-header">
|
||
<div class="badge-pill section-eyebrow">
|
||
<span>الركائز الجوهرية لمنصة صَقِل</span>
|
||
</div>
|
||
<h2>هندسة تعليمية مصممة<br><span class="text-gradient-cyan">للإتقان الحقيقي، لا الحفظ المؤقت.</span></h2>
|
||
<p>قمنا بخلع نموذج مراكز الدروس وبطاقات التلقين القديمة، واستبدلناها بأحدث بنية تحتية برمجية وتعليمية في المنطقة.</p>
|
||
</div>
|
||
|
||
<div class="apple-bento-grid">
|
||
|
||
<!-- Bento 1: Multi-Teacher Freedom -->
|
||
<div class="bento-card bento-col-8">
|
||
<div>
|
||
<div class="bento-icon-wrapper" style="background: rgba(0, 113, 227, 0.2); color: var(--apple-blue);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||
</div>
|
||
<h3>حرية تغيير المعلم لكل درس منهجي</h3>
|
||
<p>
|
||
لا ترتهن لبطاقة فصلية لمعلم واحد قد لا يناسبك أسلوبه في وحدة معينة. في صَقِل، كل درس منهجي يضم شروحات متعددة من نخبة أساتذة المملكة. اختر من تفهم منه فوراً، وسيبقى تقدمك ودفتر أخطائك محفوظاً دون إعادة.
|
||
</p>
|
||
</div>
|
||
<div style="margin-top: 30px; display:flex; gap: 12px; align-items:center;">
|
||
<span class="badge-pill">سجل إتقان مركزي موحد</span>
|
||
<span class="badge-pill">تقييمات موثقة من الطلاب فقط</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento 2: The Socratic AI -->
|
||
<div class="bento-card bento-col-4">
|
||
<div>
|
||
<div class="bento-icon-wrapper" style="background: rgba(0, 245, 212, 0.2); color: var(--apple-cyan);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/><path d="M12 12 2.1 10.5"/><path d="M12 12V2.1"/></svg>
|
||
</div>
|
||
<h3>المعلم السقراطي الذكي</h3>
|
||
<p>
|
||
ليس مجرد محادثة عامة تهلوس بالإجابات؛ بل ذكاء اصطناعي مربوط بدقيقة الشرح وصفحة الكتاب، يشخص سبب خطئك ويعيدك لدليل الفهم خطوة بخطوة.
|
||
</p>
|
||
</div>
|
||
<div style="margin-top: 24px;">
|
||
<span class="badge-pill" style="color:var(--apple-cyan);">مبني على تفريغ الفيديو الفعلي</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento 3: Transparent Minute Pool Economy -->
|
||
<div class="bento-card bento-col-6">
|
||
<div>
|
||
<div class="bento-icon-wrapper" style="background: rgba(255, 159, 10, 0.2); color: var(--apple-gold);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||
</div>
|
||
<h3>العدالة المالية: دخل المعلم بالدقيقة</h3>
|
||
<p>
|
||
وداعاً لابتزاز التسويق وبيع البطاقات. كل معلم يرفع حصة ممتازة يربح تلقائياً من كل دقيقة مشاهدة نوعية مؤهلة يقضيها الطالب في فهم درسه، عبر دفتر حسابات مالي (Ledger) مسجل بالفلس الأردني.
|
||
</p>
|
||
</div>
|
||
<div style="margin-top: 24px;">
|
||
<span class="badge-pill latin-text" style="color:var(--apple-gold);">Exact Payout Per Qualified Minute</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento 4: Offline Verified Sync -->
|
||
<div class="bento-card bento-col-6">
|
||
<div>
|
||
<div class="bento-icon-wrapper" style="background: rgba(48, 209, 88, 0.2); color: var(--apple-emerald);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
</div>
|
||
<h3>تعلّم دون اتصال بمزامنة مشفرة</h3>
|
||
<p>
|
||
نزّل دروسك ومصادرك كاملة واختبر فهمك في أي مكان دون استهلاك باقة الإنترنت. عند عودة الاتصال، تتم مزامنة إنجازك الأكاديمي ودقائق المشاهدة مع الخادم المركزي بشكل موثق.
|
||
</p>
|
||
</div>
|
||
<div style="margin-top: 24px;">
|
||
<span class="badge-pill" style="color:var(--apple-emerald);">تشفير محلي متوافق مع معايير آبل</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- INTERACTIVE ENGINE: MULTI-TEACHER MARKETPLACE -->
|
||
<section class="section-spacing" id="teachers-market">
|
||
<div class="container">
|
||
|
||
<div class="section-header">
|
||
<div class="badge-pill section-eyebrow">
|
||
<span>سوق المعلمين المنهجي المفتوح</span>
|
||
</div>
|
||
<h2>نفس الدرس المنهجي.<br><span class="text-gradient-cyan">أكثر من أسلوب عبقري للشرح.</span></h2>
|
||
<p>جرّب التبديل التفاعلي بين المعلمين أدناه لنفس درس "الحركة بتسارع ثابت"، وشاهد كيف يتغير أسلوب التوضيح دون أن تفقد نقطة واحدة من تقدمك.</p>
|
||
</div>
|
||
|
||
<div class="teacher-switcher-wrapper">
|
||
<div style="text-align:center;">
|
||
<div class="switcher-nav-tabs">
|
||
<button class="tab-toggle-btn active" onclick="switchTeacherDemo(this, 'teacher1')">أ. حسام الخطيب (مفاهيمي عميق)</button>
|
||
<button class="tab-toggle-btn" onclick="switchTeacherDemo(this, 'teacher2')">د. رانيا عبد الهادي (تطبيقي ومسائل)</button>
|
||
<button class="tab-toggle-btn" onclick="switchTeacherDemo(this, 'teacher3')">م. خالد القيسي (خرائط ذهنية وربط)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="teacher-cards-grid" id="teacher-roster-display">
|
||
|
||
<div class="teacher-roster-card selected" id="card-teacher1">
|
||
<div class="teacher-card-top">
|
||
<div class="teacher-avatar">أ.ح</div>
|
||
<div class="teacher-meta">
|
||
<h4>أ. حسام الخطيب</h4>
|
||
<span>خبير فيزياء التوجيهي — 18 سنة خبرة</span>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:14px; margin-bottom:18px;">
|
||
يركز على استنتاج القوانين وفهم المنطق الفيزيائي من الصفر، ممتاز للطلاب الراغبين في بناء أساس هندسي قوي.
|
||
</p>
|
||
<div class="teacher-stats-row">
|
||
<span class="teacher-rating">★ 4.98 (1,420 طالب)</span>
|
||
<span class="latin-text" style="color:var(--apple-cyan);">34 حصة منشورة</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="teacher-roster-card" id="card-teacher2">
|
||
<div class="teacher-card-top">
|
||
<div class="teacher-avatar" style="background:linear-gradient(135deg,#7C3AED,#C084FC);">د.ر</div>
|
||
<div class="teacher-meta">
|
||
<h4>د. رانيا عبد الهادي</h4>
|
||
<span>دكتوراه في مناهج الفيزياء الحديثة</span>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:14px; margin-bottom:18px;">
|
||
تعتمد حل المسائل المكثفة والتدرج من أسهل سؤال في كتاب الأنشطة وحتى أسئلة القدرات العليا بالامتحانات الوزارية.
|
||
</p>
|
||
<div class="teacher-stats-row">
|
||
<span class="teacher-rating">★ 4.95 (980 طالب)</span>
|
||
<span class="latin-text" style="color:var(--apple-cyan);">28 حصة منشورة</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="teacher-roster-card" id="card-teacher3">
|
||
<div class="teacher-card-top">
|
||
<div class="teacher-avatar" style="background:linear-gradient(135deg,#059669,#34D399);">م.خ</div>
|
||
<div class="teacher-meta">
|
||
<h4>م. خالد القيسي</h4>
|
||
<span>مبتكر استراتيجيات الخرائط الذهنية</span>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:14px; margin-bottom:18px;">
|
||
يربط العلاقات الفيزيائية برسوم بصرية وخرائط مفاهيم تمنع تداخل القوانين في ذهن الطالب أثناء الاختبار.
|
||
</p>
|
||
<div class="teacher-stats-row">
|
||
<span class="teacher-rating">★ 4.91 (810 طلاب)</span>
|
||
<span class="latin-text" style="color:var(--apple-cyan);">22 حصة منشورة</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- INTERACTIVE ENGINE: TRANSPARENT MINUTE CALCULATOR -->
|
||
<section class="section-spacing" id="minute-calculator">
|
||
<div class="container">
|
||
|
||
<div class="section-header">
|
||
<div class="badge-pill section-eyebrow">
|
||
<span>حاسبة الشفافية المالية للمعلمين</span>
|
||
</div>
|
||
<h2>كل دقيقة شرح نوعية..<br><span class="text-gradient-gold">لها قيمة نقدية محفوظة بالدينار والفلس.</span></h2>
|
||
<p>لا رسوم اشتراك على المعلم، ولا نسبة بيع دورات مجحفة. حرك المؤشرات أدناه وشاهد تقدير نصيبك المالي من صندوق المشاهدة المعتمد.</p>
|
||
</div>
|
||
|
||
<div class="calculator-frame">
|
||
|
||
<!-- Sliders -->
|
||
<div class="calc-sliders-pane">
|
||
|
||
<div class="calc-slider-group">
|
||
<div class="calc-slider-header">
|
||
<label for="students-slider">عدد الطلاب الذين يشاهدون حصصك شهرياً:</label>
|
||
<span class="slider-val" id="students-display">350 طالب</span>
|
||
</div>
|
||
<input type="range" id="students-slider" min="20" max="3000" step="10" value="350" oninput="updateCalculator()">
|
||
<div style="display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-top:6px;">
|
||
<span>20 طالب</span>
|
||
<span>3,000 طالب</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calc-slider-group">
|
||
<div class="calc-slider-header">
|
||
<label for="minutes-slider">متوسط دقائق المشاهدة لكل طالب شهرياً:</label>
|
||
<span class="slider-val" id="minutes-display">140 دقيقة</span>
|
||
</div>
|
||
<input type="range" id="minutes-slider" min="30" max="600" step="10" value="140" oninput="updateCalculator()">
|
||
<div style="display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-top:6px;">
|
||
<span>30 دقيقة</span>
|
||
<span>600 دقيقة</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-subtle); border-radius:18px; padding:18px;">
|
||
<div style="font-size:13px; color:var(--text-silver); line-height:1.7;">
|
||
💡 <strong>كيف يُحسب الاستحقاق؟</strong><br>
|
||
كل مشترك مؤهل يدفع رسوم اشتراك دورية تذهب مباشرة إلى "صندوق إيراد المحتوى المشترك". تُقسم قيمة الصندوق دورياً على مجموع دقائق المشاهدة المؤهلة بدقة 3 خانات عشرية (0.001 JOD).
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Results Display -->
|
||
<div class="calc-results-pane">
|
||
<div class="calc-payout-label">العائد الشهري المتوقع للمعلم</div>
|
||
<div class="calc-payout-figure" id="total-payout-jod">490.000</div>
|
||
<div class="calc-currency-tag">دينار أردني (JOD) شهرياً</div>
|
||
|
||
<div class="calc-breakdown-table">
|
||
<div class="calc-table-row">
|
||
<span>إجمالي الدقائق المؤهلة لحصصك:</span>
|
||
<span class="val" id="total-minutes-calc">49,000 دقيقة</span>
|
||
</div>
|
||
<div class="calc-table-row">
|
||
<span>القيمة التقديرية للدقيقة المؤهلة:</span>
|
||
<span class="val">0.010 د.أ / دقيقة</span>
|
||
</div>
|
||
<div class="calc-table-row">
|
||
<span>آلية السحب المالي:</span>
|
||
<span class="val" style="color:var(--apple-cyan);">CliQ فوري أو تحويل بنكي</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:24px;">
|
||
<button class="btn btn-primary" style="width:100%;" onclick="openEarlyAccessModal()">انضم الآن كمعلم معتمد في صَقِل</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- INTERACTIVE ENGINE: CURRICULUM EXPLORER & QUAD ASSETS -->
|
||
<section class="section-spacing" id="curriculum-quad">
|
||
<div class="container">
|
||
|
||
<div class="section-header">
|
||
<div class="badge-pill section-eyebrow">
|
||
<span>الهوية المنهجية وحزم التعلم الرباعية</span>
|
||
</div>
|
||
<h2>لكل درس منهجي..<br><span class="text-gradient-cyan">أربعة أصول معرفية متكاملة.</span></h2>
|
||
<p>لا يتركك صَقِل تائهاً بين الملخصات غير الموثقة؛ فكل حصة تجمع الفيديو مع المصادر الرسمية الثلاثة الأخرى.</p>
|
||
</div>
|
||
|
||
<div class="curriculum-explorer-box">
|
||
|
||
<div class="curriculum-tabs-bar">
|
||
<div class="grade-selector-chips">
|
||
<button class="grade-chip active" onclick="switchGradeSubject(this, 'g10')">الصف العاشر الأساسي</button>
|
||
<button class="grade-chip" onclick="switchGradeSubject(this, 'g11')">الأول ثانوي (الأكاديمي)</button>
|
||
<button class="grade-chip" onclick="switchGradeSubject(this, 'g12')">التوجيهي الوزاري (2008 / 2009)</button>
|
||
</div>
|
||
|
||
<div style="font-size:14px; color:var(--text-silver);">
|
||
المبحث المختار: <strong style="color:#FFF;" id="current-subject-label">الفيزياء — الفصل الدراسي الأول</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="curriculum-quad-grid">
|
||
|
||
<div class="quad-asset-card">
|
||
<div class="quad-icon video">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
</div>
|
||
<h4>1. فيديو المعلم المعتمد</h4>
|
||
<p>تسجيل مرئي فائق الوضوح ومفهرس زمنياً، مربوط بدليل مرئي من السبورة والمعادلات، بدون حشو أو إطالة مصطنعة.</p>
|
||
</div>
|
||
|
||
<div class="quad-asset-card">
|
||
<div class="quad-icon worksheet">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||
</div>
|
||
<h4>2. ورقة عمل Markdown</h4>
|
||
<p>تدريبات تفاعلية متدرجة الصعوبة لاختبار الفهم الذاتي بعد المشاهدة، مع تصحيح خادمي فوري وتشخيص للأخطاء.</p>
|
||
</div>
|
||
|
||
<div class="quad-asset-card">
|
||
<div class="quad-icon book">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||
</div>
|
||
<h4>3. كتاب الوزارة الرسمي (PDF)</h4>
|
||
<p>نسخة الكتاب المعتمدة من وزارة التربية والتعليم محددة برقم الصفحة الدقيقة لكل فقرة، لأن كتابك المدرسي هو المرجع الأول.</p>
|
||
</div>
|
||
|
||
<div class="quad-asset-card">
|
||
<div class="quad-icon mindmap">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="6" height="6" x="9" y="2" rx="1"/><rect width="6" height="6" x="2" y="16" rx="1"/><rect width="6" height="6" x="16" y="16" rx="1"/><path d="M12 8v5M5 16v-3h14v3"/></svg>
|
||
</div>
|
||
<h4>4. الخريطة الذهنية للمفهوم</h4>
|
||
<p>رسم تخطيطي بصري يلخص القوانين والعلاقات الرياضية في صفحة واحدة لاسترجاع الفكرة خلال ثوانٍ قبل الامتحانات.</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- THE RADICAL COMPARISON MATRIX -->
|
||
<section class="section-spacing" id="comparison-matrix">
|
||
<div class="container">
|
||
|
||
<div class="section-header">
|
||
<div class="badge-pill section-eyebrow">
|
||
<span>المقارنة الجذرية الصريحة</span>
|
||
</div>
|
||
<h2>لماذا صَقِل..<br><span class="text-metallic">وليس منصات البطاقات القديمة؟</span></h2>
|
||
<p>مقارنة موضوعية تكشف الفارق بين نموذج التعليم القائم على الإتقان وحرية الطالب، ونموذج الاحتكار التجاري للبطاقات.</p>
|
||
</div>
|
||
|
||
<div class="comparison-table-wrapper">
|
||
<table class="apple-matrix">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 28%;">المعيار التعليمي والمالي</th>
|
||
<th class="col-saqel" style="width: 26%;">منظومة صَقِل (SAQEL)</th>
|
||
<th style="width: 23%;">منصات البطاقات (جو، وتد، إلخ)</th>
|
||
<th style="width: 23%;">الدروس الخصوصية التقليدية</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>حرية اختيار المعلم وتغييره</strong></td>
|
||
<td class="col-saqel"><span class="check-yes">✓ مجاناً لكل درس منهجي</span></td>
|
||
<td><span class="cross-no">✗ بطاقة مقفلة لمعلم واحد</span></td>
|
||
<td><span class="cross-no">✗ التزام بمدرس واحد وتكلفة باهظة</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>التحقق السقراطي من الفهم</strong></td>
|
||
<td class="col-saqel"><span class="check-yes">✓ تشخيص فوري بدقيقة الشرح</span></td>
|
||
<td><span class="cross-no">✗ تلقين سلبي ومشاهدة مسجلة فقط</span></td>
|
||
<td><span class="check-yes">✓ بحسب وقت المعلم الخصوصي</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>الارتباط الحرفي بكتاب الوزارة</strong></td>
|
||
<td class="col-saqel"><span class="check-yes">✓ توثيق برقم الصفحة والفقرة</span></td>
|
||
<td><span class="cross-no">✗ دوسيات خارجية ومصادر مبعثرة</span></td>
|
||
<td><span class="cross-no">✗ تباين المراجع والأساليب</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>الشفافية المالية وحساب الأرباح</strong></td>
|
||
<td class="col-saqel"><span class="check-yes">✓ بالدقيقة الموثقة وبدقة الفلس</span></td>
|
||
<td><span class="cross-no">✗ نسب مبهمة وعقود احتكار باقات</span></td>
|
||
<td><span class="cross-no">✗ تسعير عشوائي بالساعة</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>حفظ الإتقان وسجل الأخطاء</strong></td>
|
||
<td class="col-saqel"><span class="check-yes">✓ سجل سحابي متزامن دون اتصال</span></td>
|
||
<td><span class="cross-no">✗ لا يوجد سجل لتشخيص التعثر</span></td>
|
||
<td><span class="cross-no">✗ غير متوفر برمجياً</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>التكلفة الإجمالية على الأسرة</strong></td>
|
||
<td class="col-saqel"><span class="check-yes">✓ اشتراك عادل ومتاح للجميع</span></td>
|
||
<td><span class="cross-no">✗ مئات الدنانير لشراء بطاقات كل مادة</span></td>
|
||
<td><span class="cross-no">✗ آلاف الدنانير سنوياً للمواد الأساسية</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GRAND FINALE CTA -->
|
||
<section class="section-spacing">
|
||
<div class="container">
|
||
|
||
<div class="finale-cta-card">
|
||
<div class="badge-pill" style="margin-bottom:20px; background:rgba(0,245,212,0.15); border-color:var(--apple-cyan); color:var(--apple-cyan);">
|
||
<span>موسم الإطلاق التجريبي للصف العاشر والتوجيهي 2026</span>
|
||
</div>
|
||
<h2>لحظة «فهمت الفكرة»..<br><span class="text-gradient-cyan">تستحق أن تكون بمتناول كل طالب أردني.</span></h2>
|
||
<p>انضم الآن إلى قائمة الوصول المبكر للطلاب وأولياء الأمور والمعلمين المعتمدين، وكن شريكاً في إعادة صياغة التعليم المنهجي.</p>
|
||
|
||
<div style="display:flex; justify-content:center; gap:16px; flex-wrap:wrap;">
|
||
<button class="btn btn-cyan" onclick="openEarlyAccessModal()">طلب الانضمام كطالب مبكر</button>
|
||
<button class="btn btn-glass" onclick="openEarlyAccessModal()">بوابة ترشيح المعلمين المعتمدين</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="luxury-footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
|
||
<div style="display:flex; align-items:center; gap:12px;">
|
||
<div class="brand-mark" style="width:28px; height:28px;">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||
</div>
|
||
<span style="font-weight:800; font-size:18px;">صَقِل — SAQEL</span>
|
||
<span style="font-size:12px; color:var(--text-silver); margin-right:8px;">عمان، المملكة الأردنية الهاشمية</span>
|
||
</div>
|
||
|
||
<ul class="footer-links">
|
||
<li><a href="#hero">الرئيسية</a></li>
|
||
<li><a href="#socratic-engine">المعلم السقراطي</a></li>
|
||
<li><a href="#minute-calculator">حاسبة الدقائق</a></li>
|
||
<li><a href="#curriculum-quad">المنهج الوطني</a></li>
|
||
<li><a href="#comparison-matrix">المقارنة</a></li>
|
||
</ul>
|
||
|
||
<div class="footer-copy">
|
||
جميع الحقوق محفوظة © 2026 صَقِل. مبني بأعلى معايير آبل كوبرتينو الفاخرة.
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- INTERACTIVE EARLY ACCESS MODAL -->
|
||
<div class="modal-overlay" id="modal-early-access" onclick="handleModalBackdropClick(event)">
|
||
<div class="modal-box">
|
||
<button class="modal-close-btn" onclick="closeEarlyAccessModal()">✕</button>
|
||
<div class="badge-pill" style="margin-bottom:16px; color:var(--apple-cyan);">
|
||
<span>التسجيل في صَقِل Pro</span>
|
||
</div>
|
||
<h3 style="margin-bottom:12px;">احجز مقعدك في الوصول المبكر</h3>
|
||
<p style="font-size:14px; margin-bottom:24px;">سجل اهتمامك لتصلك دعوة التفعيل الرسمية للحصص المنهجية فور فتح البوابة.</p>
|
||
|
||
<form onsubmit="handleModalSubmit(event)" style="display:flex; flex-direction:column; gap:14px;">
|
||
<input type="text" placeholder="الاسم الكامل" required style="padding:14px 18px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid var(--border-subtle); color:#FFF; font-size:14px; outline:none;">
|
||
<input type="tel" placeholder="رقم الهاتف (الأردن / واتساب)" required style="padding:14px 18px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid var(--border-subtle); color:#FFF; font-size:14px; outline:none; text-align:right;">
|
||
<select style="padding:14px 18px; border-radius:12px; background:#0B101D; border:1px solid var(--border-subtle); color:#FFF; font-size:14px; outline:none;">
|
||
<option value="student">أنا طالب (الصف العاشر أو التوجيهي)</option>
|
||
<option value="teacher">أنا معلم وأرغب برفع شروحاتي في صَقِل</option>
|
||
<option value="parent">أنا ولي أمر أتابع تحصيل أبنائي</option>
|
||
<option value="school">إدارة مدرسة ترغب باعتماد النظام الأكاديمي</option>
|
||
</select>
|
||
<button type="submit" class="btn btn-cyan" style="margin-top:8px;">تأكيد التسجيل والانضمام</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JAVASCRIPT: LUXURY MOTION, AUDIO SYNTHESIS & REAL-TIME STATE ENGINES -->
|
||
<script>
|
||
// 1. Web Audio API Click & Chime Feedback (Apple Sensory Tactile Feedback)
|
||
const AudioEngine = {
|
||
ctx: null,
|
||
init() {
|
||
if (!this.ctx) {
|
||
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
||
if (AudioContext) this.ctx = new AudioContext();
|
||
}
|
||
},
|
||
playChime(type = 'click') {
|
||
try {
|
||
this.init();
|
||
if (!this.ctx) return;
|
||
if (this.ctx.state === 'suspended') this.ctx.resume();
|
||
|
||
const osc = this.ctx.createOscillator();
|
||
const gain = this.ctx.createGain();
|
||
osc.connect(gain);
|
||
gain.connect(this.ctx.destination);
|
||
|
||
if (type === 'success') {
|
||
// Apple-style pure harmonic bell (A5 -> E6)
|
||
osc.type = 'sine';
|
||
osc.frequency.setValueAtTime(880, this.ctx.currentTime);
|
||
osc.frequency.exponentialRampToValueAtTime(1318.5, this.ctx.currentTime + 0.15);
|
||
gain.gain.setValueAtTime(0.15, this.ctx.currentTime);
|
||
gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.6);
|
||
osc.start();
|
||
osc.stop(this.ctx.currentTime + 0.6);
|
||
} else if (type === 'error') {
|
||
// Gentle low advisory tone
|
||
osc.type = 'triangle';
|
||
osc.frequency.setValueAtTime(260, this.ctx.currentTime);
|
||
osc.frequency.exponentialRampToValueAtTime(190, this.ctx.currentTime + 0.2);
|
||
gain.gain.setValueAtTime(0.12, this.ctx.currentTime);
|
||
gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.35);
|
||
osc.start();
|
||
osc.stop(this.ctx.currentTime + 0.35);
|
||
} else {
|
||
// Crisp subtle click
|
||
osc.type = 'sine';
|
||
osc.frequency.setValueAtTime(1200, this.ctx.currentTime);
|
||
gain.gain.setValueAtTime(0.04, this.ctx.currentTime);
|
||
gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.04);
|
||
osc.start();
|
||
osc.stop(this.ctx.currentTime + 0.04);
|
||
}
|
||
} catch(e) {}
|
||
}
|
||
};
|
||
|
||
// 2. Ambient Mouse Spotlight & Dynamic Background Particles
|
||
const spotlight = document.getElementById('spotlight');
|
||
const canvas = document.getElementById('ambient-canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
let width, height;
|
||
let particles = [];
|
||
|
||
function resizeCanvas() {
|
||
width = canvas.width = window.innerWidth;
|
||
height = canvas.height = window.innerHeight;
|
||
}
|
||
window.addEventListener('resize', resizeCanvas);
|
||
resizeCanvas();
|
||
|
||
class Particle {
|
||
constructor() {
|
||
this.reset();
|
||
}
|
||
reset() {
|
||
this.x = Math.random() * width;
|
||
this.y = Math.random() * height;
|
||
this.size = Math.random() * 2 + 0.5;
|
||
this.speedX = (Math.random() - 0.5) * 0.4;
|
||
this.speedY = (Math.random() - 0.5) * 0.4;
|
||
this.opacity = Math.random() * 0.4 + 0.1;
|
||
}
|
||
update() {
|
||
this.x += this.speedX;
|
||
this.y += this.speedY;
|
||
if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) this.reset();
|
||
}
|
||
draw() {
|
||
ctx.fillStyle = `rgba(0, 245, 212, ${this.opacity})`;
|
||
ctx.beginPath();
|
||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
|
||
for (let i = 0; i < 45; i++) particles.push(new Particle());
|
||
|
||
function animateAmbient() {
|
||
ctx.clearRect(0, 0, width, height);
|
||
particles.forEach(p => {
|
||
p.update();
|
||
p.draw();
|
||
});
|
||
requestAnimationFrame(animateAmbient);
|
||
}
|
||
animateAmbient();
|
||
|
||
window.addEventListener('pointermove', (e) => {
|
||
if (spotlight) {
|
||
spotlight.style.left = e.clientX + 'px';
|
||
spotlight.style.top = e.clientY + 'px';
|
||
}
|
||
});
|
||
|
||
// 3. Socratic Interactive Checker
|
||
function checkSocraticAnswer(button, isCorrect, explanation) {
|
||
const parentChoices = button.parentElement.querySelectorAll('.choice-card-btn');
|
||
parentChoices.forEach(btn => {
|
||
btn.classList.remove('correct-glow', 'wrong-glow');
|
||
});
|
||
|
||
const hintBox = document.getElementById('socratic-hint');
|
||
hintBox.style.display = 'block';
|
||
|
||
if (isCorrect) {
|
||
AudioEngine.playChime('success');
|
||
button.classList.add('correct-glow');
|
||
hintBox.style.background = 'rgba(48, 209, 88, 0.12)';
|
||
hintBox.style.borderColor = 'var(--apple-emerald)';
|
||
hintBox.style.color = '#6EE7B7';
|
||
hintBox.innerHTML = `<strong>✓ مبروك!</strong> ${explanation}`;
|
||
} else {
|
||
AudioEngine.playChime('error');
|
||
button.classList.add('wrong-glow');
|
||
hintBox.style.background = 'rgba(255, 159, 10, 0.12)';
|
||
hintBox.style.borderColor = 'var(--apple-gold)';
|
||
hintBox.style.color = '#FCD34D';
|
||
hintBox.innerHTML = `<strong>⚠️ تنبيه سقراطي:</strong> ${explanation}`;
|
||
}
|
||
}
|
||
|
||
function handleScrubTimeline(event) {
|
||
AudioEngine.playChime('click');
|
||
const rect = event.currentTarget.getBoundingClientRect();
|
||
const clickX = event.clientX - rect.left;
|
||
const percentage = Math.min(Math.max((clickX / rect.width) * 100, 5), 95);
|
||
const fillBar = document.getElementById('timeline-bar');
|
||
fillBar.style.width = percentage + '%';
|
||
|
||
const timecode = document.getElementById('live-timecode');
|
||
const totalSecs = 12 * 60 + 20;
|
||
const currentSecs = Math.floor((percentage / 100) * totalSecs);
|
||
const mins = String(Math.floor(currentSecs / 60)).padStart(2, '0');
|
||
const secs = String(currentSecs % 60).padStart(2, '0');
|
||
timecode.textContent = `${mins}:${secs} / 12:20`;
|
||
}
|
||
|
||
// 4. Multi-Teacher Roster Switcher
|
||
function switchTeacherDemo(button, teacherId) {
|
||
AudioEngine.playChime('click');
|
||
document.querySelectorAll('.tab-toggle-btn').forEach(btn => btn.classList.remove('active'));
|
||
button.classList.add('active');
|
||
|
||
document.querySelectorAll('.teacher-roster-card').forEach(card => card.classList.remove('selected'));
|
||
const activeCard = document.getElementById('card-' + teacherId);
|
||
if (activeCard) activeCard.classList.add('selected');
|
||
}
|
||
|
||
// 5. Minute Revenue Calculator Real-Time Engine
|
||
function updateCalculator() {
|
||
const students = parseInt(document.getElementById('students-slider').value);
|
||
const minutes = parseInt(document.getElementById('minutes-slider').value);
|
||
|
||
document.getElementById('students-display').textContent = students.toLocaleString('en-US') + ' طالب';
|
||
document.getElementById('minutes-display').textContent = minutes + ' دقيقة';
|
||
|
||
const totalMinutes = students * minutes;
|
||
document.getElementById('total-minutes-calc').textContent = totalMinutes.toLocaleString('en-US') + ' دقيقة';
|
||
|
||
// Transparent rate: 0.010 JOD per qualified minute
|
||
const payoutJOD = (totalMinutes * 0.010);
|
||
document.getElementById('total-payout-jod').textContent = payoutJOD.toFixed(3);
|
||
}
|
||
|
||
// 6. Curriculum Subject Switcher
|
||
function switchGradeSubject(button, gradeKey) {
|
||
AudioEngine.playChime('click');
|
||
document.querySelectorAll('.grade-chip').forEach(btn => btn.classList.remove('active'));
|
||
button.classList.add('active');
|
||
|
||
const label = document.getElementById('current-subject-label');
|
||
if (gradeKey === 'g10') {
|
||
label.textContent = 'الفيزياء — الصف العاشر الأساسي (الفصل الدراسي الأول)';
|
||
} else if (gradeKey === 'g11') {
|
||
label.textContent = 'الرياضيات العلمية — الأول ثانوي الأكاديمي';
|
||
} else {
|
||
label.textContent = 'الفيزياء المتقدمة — التوجيهي الوزاري (جيل 2008 / 2009)';
|
||
}
|
||
}
|
||
|
||
// 7. Navigation Smooth Scroll Helper
|
||
function scrollToSection(id) {
|
||
AudioEngine.playChime('click');
|
||
const el = document.getElementById(id);
|
||
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
|
||
// 8. Early Access Modal State Machine
|
||
function openEarlyAccessModal() {
|
||
AudioEngine.playChime('click');
|
||
document.getElementById('modal-early-access').style.display = 'flex';
|
||
}
|
||
|
||
function closeEarlyAccessModal() {
|
||
AudioEngine.playChime('click');
|
||
document.getElementById('modal-early-access').style.display = 'none';
|
||
}
|
||
|
||
function handleModalBackdropClick(event) {
|
||
if (event.target.id === 'modal-early-access') {
|
||
closeEarlyAccessModal();
|
||
}
|
||
}
|
||
|
||
function handleModalSubmit(event) {
|
||
event.preventDefault();
|
||
AudioEngine.playChime('success');
|
||
alert('تم استلام طلب تسجيلك بنجاح في صَقِل! سنتواصل معك قريباً عبر واتساب.');
|
||
closeEarlyAccessModal();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|