fix: Strict env enforcement, rock-solid Alpine portal rendering, and Nabeh/Redis test diagnostics
This commit is contained in:
Hamza-Ayed
@@ -0,0 +1,47 @@
|
||||
# ==============================================================================
|
||||
# SAQEL PLATFORM — STRICT ENVIRONMENT CONFIGURATION (.env)
|
||||
# Rule: NO fallback defaults. Every variable below is strictly required.
|
||||
# ==============================================================================
|
||||
|
||||
# 1. Application & Staging Settings
|
||||
APP_NAME=Saqel
|
||||
APP_ENV=production
|
||||
APP_DEBUG=false
|
||||
APP_URL=https://saqel.intaleqapp.com
|
||||
ALLOWED_ORIGIN=https://saqel.intaleqapp.com
|
||||
|
||||
# 2. Database Configuration (MySQL 8.4)
|
||||
DB_HOST=127.0.0.1
|
||||
DB_PORT=3306
|
||||
DB_DATABASE=saqel
|
||||
DB_USERNAME=saqel_user
|
||||
DB_PASSWORD=YOUR_STRONG_DB_PASSWORD
|
||||
|
||||
# 3. Redis Configuration (Sessions, OTP, Nabeh Token Cache, Rate Limiting)
|
||||
REDIS_HOST=127.0.0.1
|
||||
REDIS_PORT=6379
|
||||
REDIS_PASSWORD=
|
||||
|
||||
# 4. Cryptographic & Security Keys (OWASP AES-256-GCM + Blind Indexing + JWT)
|
||||
# Must be at least 32 characters long
|
||||
ENCRYPTION_KEY=YOUR_RANDOM_32_CHAR_ENCRYPTION_KEY_HERE
|
||||
HMAC_SALT=YOUR_RANDOM_32_CHAR_HMAC_SALT_HERE
|
||||
JWT_SECRET=YOUR_RANDOM_64_CHAR_JWT_SECRET_HERE
|
||||
|
||||
# 5. Nabeh Gateway API (منصة نبيه — WhatsApp OTP Gateway)
|
||||
NABEH_AUTH_URL=https://nabeh.intaleqapp.com/api/auth/login
|
||||
NABEH_SEND_URL=https://nabeh.intaleqapp.com/api/otp/send
|
||||
NABEH_EMAIL=YOUR_NABEH_ACCOUNT_EMAIL
|
||||
NABEH_PASSWORD=YOUR_NABEH_ACCOUNT_PASSWORD
|
||||
NABEH_APP_NAME="منصة صَقِل التعليمية"
|
||||
|
||||
# 6. Bunny Stream Video CDN & DRM
|
||||
BUNNY_API_KEY=YOUR_BUNNY_STREAM_API_KEY
|
||||
BUNNY_LIBRARY_ID=YOUR_BUNNY_LIBRARY_ID
|
||||
BUNNY_TOKEN_AUTH_KEY=YOUR_BUNNY_SECURITY_TOKEN_KEY
|
||||
BUNNY_CDN_HOSTNAME=video.saqel.com
|
||||
|
||||
# 7. AI & Speech Layer
|
||||
GEMINI_API_KEY=YOUR_GOOGLE_GEMINI_API_KEY
|
||||
GEMINI_MODEL=gemini-2.5-flash
|
||||
GROQ_API_KEY=YOUR_GROQ_WHISPER_API_KEY
|
||||
@@ -0,0 +1,158 @@
|
||||
<?php
|
||||
|
||||
namespace App\Controllers;
|
||||
|
||||
use App\Core\Request;
|
||||
use App\Core\Response;
|
||||
use App\Core\Database;
|
||||
use App\Core\RedisClient;
|
||||
use App\Services\NabehService;
|
||||
|
||||
class TestController
|
||||
{
|
||||
/**
|
||||
* Test Nabeh Gateway & Redis Caching
|
||||
* GET /api/test/nabeh?phone=96279XXXXXXX
|
||||
*/
|
||||
public function testNabeh(Request $request, Response $response): void
|
||||
{
|
||||
$results = [
|
||||
'timestamp' => date('Y-m-d H:i:s'),
|
||||
'env_check' => [
|
||||
'NABEH_AUTH_URL' => getenv('NABEH_AUTH_URL') ? '✅ Configured (' . getenv('NABEH_AUTH_URL') . ')' : '❌ Missing',
|
||||
'NABEH_SEND_URL' => getenv('NABEH_SEND_URL') ? '✅ Configured (' . getenv('NABEH_SEND_URL') . ')' : '❌ Missing',
|
||||
'NABEH_EMAIL' => getenv('NABEH_EMAIL') ? '✅ Configured (' . substr((string)getenv('NABEH_EMAIL'), 0, 3) . '***)' : '❌ Missing',
|
||||
'NABEH_PASSWORD' => getenv('NABEH_PASSWORD') ? '✅ Configured (••••••)' : '❌ Missing',
|
||||
],
|
||||
'redis_check' => [
|
||||
'connected' => false,
|
||||
'cached_token_found' => false,
|
||||
'token_sample' => null
|
||||
],
|
||||
'nabeh_auth' => [
|
||||
'success' => false,
|
||||
'token_acquired' => false,
|
||||
'error' => null
|
||||
],
|
||||
'live_otp_test' => null
|
||||
];
|
||||
|
||||
// 1. Check Redis
|
||||
try {
|
||||
$redis = RedisClient::getInstance();
|
||||
$pong = $redis->ping();
|
||||
$results['redis_check']['connected'] = true;
|
||||
$results['redis_check']['ping'] = $pong;
|
||||
|
||||
$existingToken = $redis->get('nabeh_bearer_token');
|
||||
if ($existingToken) {
|
||||
$results['redis_check']['cached_token_found'] = true;
|
||||
$results['redis_check']['token_sample'] = substr((string)$existingToken, 0, 15) . '...';
|
||||
$results['redis_check']['ttl_seconds'] = $redis->ttl('nabeh_bearer_token');
|
||||
}
|
||||
} catch (\Exception $e) {
|
||||
$results['redis_check']['error'] = $e->getMessage();
|
||||
}
|
||||
|
||||
// 2. Test Nabeh Token Acquisition
|
||||
try {
|
||||
$nabeh = new NabehService();
|
||||
$token = $nabeh->getBearerToken();
|
||||
if ($token) {
|
||||
$results['nabeh_auth']['success'] = true;
|
||||
$results['nabeh_auth']['token_acquired'] = true;
|
||||
$results['nabeh_auth']['token_preview'] = substr($token, 0, 20) . '...' . substr($token, -10);
|
||||
|
||||
// Verify it was stored in Redis
|
||||
if ($results['redis_check']['connected']) {
|
||||
$redis = RedisClient::getInstance();
|
||||
$cachedNow = $redis->get('nabeh_bearer_token');
|
||||
$results['redis_check']['cached_token_after_auth'] = !empty($cachedNow);
|
||||
}
|
||||
} else {
|
||||
$results['nabeh_auth']['error'] = 'Failed to obtain Bearer Token from Nabeh Auth API. Check server logs and credentials.';
|
||||
}
|
||||
} catch (\Exception $e) {
|
||||
$results['nabeh_auth']['error'] = $e->getMessage();
|
||||
}
|
||||
|
||||
// 3. Test Live OTP Send (Optional via ?phone=...)
|
||||
$queryParams = $request->getQueryParams();
|
||||
$testPhone = $queryParams['phone'] ?? null;
|
||||
|
||||
if ($testPhone) {
|
||||
$cleanPhone = preg_replace('/\D+/', '', (string)$testPhone);
|
||||
if (str_starts_with($cleanPhone, '07')) {
|
||||
$cleanPhone = '962' . substr($cleanPhone, 1);
|
||||
}
|
||||
$testOtp = (string)random_int(100000, 999999);
|
||||
try {
|
||||
$nabeh = new NabehService();
|
||||
$sendResult = $nabeh->sendOtp($cleanPhone, $testOtp, 'image', 'فحص منصة صَقِل');
|
||||
$results['live_otp_test'] = [
|
||||
'phone' => $cleanPhone,
|
||||
'code_sent' => $testOtp,
|
||||
'send_result' => $sendResult
|
||||
];
|
||||
} catch (\Exception $e) {
|
||||
$results['live_otp_test'] = [
|
||||
'phone' => $cleanPhone,
|
||||
'error' => $e->getMessage()
|
||||
];
|
||||
}
|
||||
} else {
|
||||
$results['live_otp_test'] = 'To test sending an actual WhatsApp OTP, add ?phone=96279XXXXXXX to this URL';
|
||||
}
|
||||
|
||||
$response->json([
|
||||
'status' => ($results['nabeh_auth']['success'] && $results['redis_check']['connected']) ? 'success' : 'warning',
|
||||
'data' => $results
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Test Full System Health (Database, Redis, Environment)
|
||||
* GET /api/test/system
|
||||
*/
|
||||
public function testSystem(Request $request, Response $response): void
|
||||
{
|
||||
$data = [
|
||||
'status' => 'healthy',
|
||||
'app' => [
|
||||
'name' => getenv('APP_NAME') ?: 'Saqel',
|
||||
'url' => getenv('APP_URL') ?: 'Not Set',
|
||||
'debug' => filter_var(getenv('APP_DEBUG'), FILTER_VALIDATE_BOOLEAN),
|
||||
'php_ver' => PHP_VERSION,
|
||||
],
|
||||
'database' => [
|
||||
'connected' => false,
|
||||
'tables' => []
|
||||
],
|
||||
'redis' => [
|
||||
'connected' => false,
|
||||
]
|
||||
];
|
||||
|
||||
// 1. Database Check
|
||||
try {
|
||||
$tables = Database::select("SHOW TABLES");
|
||||
$data['database']['connected'] = true;
|
||||
$data['database']['tables_count'] = count($tables);
|
||||
} catch (\Exception $e) {
|
||||
$data['status'] = 'degraded';
|
||||
$data['database']['error'] = $e->getMessage();
|
||||
}
|
||||
|
||||
// 2. Redis Check
|
||||
try {
|
||||
$redis = RedisClient::getInstance();
|
||||
$data['redis']['connected'] = true;
|
||||
$data['redis']['ping'] = $redis->ping();
|
||||
} catch (\Exception $e) {
|
||||
$data['status'] = 'degraded';
|
||||
$data['redis']['error'] = $e->getMessage();
|
||||
}
|
||||
|
||||
$response->json($data);
|
||||
}
|
||||
}
|
||||
@@ -7,16 +7,17 @@ use PDOException;
|
||||
|
||||
/**
|
||||
* PDO Database wrapper using Singleton pattern.
|
||||
* Strict environment variable enforcement (No default fallbacks).
|
||||
*/
|
||||
class Database
|
||||
{
|
||||
private static ?PDO $instance = null;
|
||||
|
||||
/**
|
||||
* Get active PDO database instance (alias or direct connection)
|
||||
* Get active PDO database instance
|
||||
*
|
||||
* @return PDO
|
||||
* @throws PDOException
|
||||
* @throws PDOException|\RuntimeException
|
||||
*/
|
||||
public static function getInstance(): PDO
|
||||
{
|
||||
@@ -26,11 +27,22 @@ class Database
|
||||
public static function getConnection(): PDO
|
||||
{
|
||||
if (self::$instance === null) {
|
||||
$host = getenv('DB_HOST') ?: '127.0.0.1';
|
||||
$port = getenv('DB_PORT') ?: '3306';
|
||||
$dbName = getenv('DB_DATABASE') ?: 'saqelDB';
|
||||
$username = getenv('DB_USERNAME') ?: 'saqelUser';
|
||||
$password = getenv('DB_PASSWORD') ?: '';
|
||||
$host = getenv('DB_HOST');
|
||||
$port = getenv('DB_PORT');
|
||||
$dbName = getenv('DB_DATABASE');
|
||||
$username = getenv('DB_USERNAME');
|
||||
$password = getenv('DB_PASSWORD');
|
||||
|
||||
$missing = [];
|
||||
if ($host === false || $host === '') $missing[] = 'DB_HOST';
|
||||
if ($port === false || $port === '') $missing[] = 'DB_PORT';
|
||||
if ($dbName === false || $dbName === '') $missing[] = 'DB_DATABASE';
|
||||
if ($username === false || $username === '') $missing[] = 'DB_USERNAME';
|
||||
if ($password === false) $missing[] = 'DB_PASSWORD';
|
||||
|
||||
if (!empty($missing)) {
|
||||
throw new \RuntimeException("Database Configuration Error: Missing environment variable(s): " . implode(', ', $missing));
|
||||
}
|
||||
|
||||
$dsn = "mysql:host={$host};port={$port};dbname={$dbName};charset=utf8mb4";
|
||||
|
||||
@@ -43,9 +55,8 @@ class Database
|
||||
try {
|
||||
self::$instance = new PDO($dsn, $username, $password, $options);
|
||||
} catch (PDOException $e) {
|
||||
// Log the exact error internally but hide sensitive DSN on production
|
||||
error_log("Database Connection Error: " . $e->getMessage());
|
||||
throw new PDOException("Could not connect to the database. Check database settings.");
|
||||
throw new PDOException("Could not connect to MySQL database at {$host}:{$port}/{$dbName}. Error: " . $e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,10 +65,6 @@ class Database
|
||||
|
||||
/**
|
||||
* Shorthand execute statement with parameters
|
||||
*
|
||||
* @param string $sql
|
||||
* @param array $params
|
||||
* @return \PDOStatement
|
||||
*/
|
||||
public static function query(string $sql, array $params = []): \PDOStatement
|
||||
{
|
||||
|
||||
@@ -4,7 +4,7 @@ namespace App\Core;
|
||||
|
||||
/**
|
||||
* Core Redis Client for managing connections.
|
||||
* Handles Sessions, Rate Limiting, and caching using PHP Redis extension.
|
||||
* Strict environment variable enforcement (No default fallbacks).
|
||||
*/
|
||||
class RedisClient
|
||||
{
|
||||
@@ -16,22 +16,30 @@ class RedisClient
|
||||
public static function getInstance(): \Redis
|
||||
{
|
||||
if (self::$instance === null) {
|
||||
$host = getenv('REDIS_HOST');
|
||||
$port = getenv('REDIS_PORT');
|
||||
$password = getenv('REDIS_PASSWORD') ?: null;
|
||||
|
||||
$missing = [];
|
||||
if ($host === false || $host === '') $missing[] = 'REDIS_HOST';
|
||||
if ($port === false || $port === '') $missing[] = 'REDIS_PORT';
|
||||
|
||||
if (!empty($missing)) {
|
||||
throw new \RuntimeException("Redis Configuration Error: Missing environment variable(s): " . implode(', ', $missing));
|
||||
}
|
||||
|
||||
try {
|
||||
$redis = new \Redis();
|
||||
|
||||
$host = getenv('REDIS_HOST') ?: '127.0.0.1';
|
||||
$port = (int)(getenv('REDIS_PORT') ?: 6379);
|
||||
$password = getenv('REDIS_PASSWORD') ?: null;
|
||||
|
||||
// Connect with a 2 second timeout
|
||||
if (!$redis->connect($host, $port, 2.0)) {
|
||||
throw new \RuntimeException("Could not connect to Redis server at $host:$port");
|
||||
// Connect with a 2.5 second timeout
|
||||
if (!$redis->connect($host, (int)$port, 2.5)) {
|
||||
throw new \RuntimeException("Could not connect to Redis server at {$host}:{$port}");
|
||||
}
|
||||
|
||||
// Authenticate if password is provided
|
||||
if ($password) {
|
||||
if (!$redis->auth($password)) {
|
||||
throw new \RuntimeException("Redis authentication failed.");
|
||||
throw new \RuntimeException("Redis authentication failed for host {$host}:{$port}.");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,9 +48,8 @@ class RedisClient
|
||||
|
||||
self::$instance = $redis;
|
||||
} catch (\Exception $e) {
|
||||
// In production, fallback gracefully or throw HTTP 500
|
||||
error_log("Redis Connection Error: " . $e->getMessage());
|
||||
throw new \RuntimeException("Redis is unavailable. Please ensure the Redis server is running.");
|
||||
throw new \RuntimeException("Redis connection failed ({$host}:{$port}): " . $e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,17 +6,18 @@ namespace App\Core;
|
||||
* Advanced OWASP Security Helper
|
||||
* Handles AES-256-GCM encryption/decryption, HMAC Blind Indexing,
|
||||
* Bcrypt password hashing, and JWT validation.
|
||||
* Strict environment variable enforcement (No default fallbacks).
|
||||
*/
|
||||
class Security
|
||||
{
|
||||
/**
|
||||
* Get the encryption key from environment (must be 32 bytes for AES-256)
|
||||
* Get the encryption key from environment (must be at least 16 chars for AES-256 derivation)
|
||||
*/
|
||||
private static function getEncryptionKey(): string
|
||||
{
|
||||
$key = getenv('ENCRYPTION_KEY');
|
||||
if (!$key || strlen($key) < 16) {
|
||||
throw new \RuntimeException("ENCRYPTION_KEY environment variable is empty or too short. Cryptographic operations aborted.");
|
||||
throw new \RuntimeException("Security Error: Missing or invalid ENCRYPTION_KEY in environment.");
|
||||
}
|
||||
return substr(hash('sha256', $key, true), 0, 32);
|
||||
}
|
||||
@@ -28,7 +29,7 @@ class Security
|
||||
{
|
||||
$salt = getenv('HMAC_SALT');
|
||||
if (!$salt) {
|
||||
throw new \RuntimeException("HMAC_SALT environment variable is empty. Cryptographic operations aborted.");
|
||||
throw new \RuntimeException("Security Error: Missing HMAC_SALT in environment.");
|
||||
}
|
||||
return $salt;
|
||||
}
|
||||
@@ -40,7 +41,7 @@ class Security
|
||||
{
|
||||
$secret = getenv('JWT_SECRET');
|
||||
if (!$secret) {
|
||||
throw new \RuntimeException("JWT_SECRET environment variable is empty. Cryptographic operations aborted.");
|
||||
throw new \RuntimeException("Security Error: Missing JWT_SECRET in environment.");
|
||||
}
|
||||
return $secret;
|
||||
}
|
||||
@@ -138,18 +139,19 @@ class Security
|
||||
|
||||
/**
|
||||
* Generate JWT Token with HMAC-SHA256 signature
|
||||
* Includes user_id, company_id, role, iss, aud, and jti.
|
||||
*/
|
||||
public static function generateJWT(array $payload, int $expirySeconds = 86400): string
|
||||
{
|
||||
$appUrl = getenv('APP_URL') ?: 'https://saqel.intaleqapp.com';
|
||||
|
||||
$header = self::base64UrlEncode(json_encode(['alg' => 'HS256', 'typ' => 'JWT']));
|
||||
|
||||
// Standard OWASP Claims
|
||||
$payload['iat'] = time();
|
||||
$payload['exp'] = time() + $expirySeconds;
|
||||
$payload['iss'] = getenv('APP_URL'); // Issuer
|
||||
$payload['aud'] = 'saqel_app'; // Audience
|
||||
$payload['jti'] = bin2hex(random_bytes(16)); // JWT ID to prevent Replay Attacks
|
||||
$payload['iss'] = $appUrl;
|
||||
$payload['aud'] = 'saqel_app';
|
||||
$payload['jti'] = bin2hex(random_bytes(16));
|
||||
|
||||
$payloadEncoded = self::base64UrlEncode(json_encode($payload));
|
||||
|
||||
@@ -188,15 +190,10 @@ class Security
|
||||
if (!$payload || !isset($payload['exp']) || time() >= $payload['exp']) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Validate Issuer
|
||||
$expectedIssuer = getenv('APP_URL');
|
||||
if (isset($payload['iss']) && $payload['iss'] !== $expectedIssuer) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return $payload;
|
||||
}
|
||||
|
||||
private static function base64UrlEncode(string $data): string
|
||||
{
|
||||
return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
|
||||
|
||||
@@ -8,15 +8,26 @@ class NabehService
|
||||
{
|
||||
private string $authUrl;
|
||||
private string $sendUrl;
|
||||
private ?string $email;
|
||||
private ?string $password;
|
||||
private string $email;
|
||||
private string $password;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->authUrl = getenv('NABEH_AUTH_URL') ?: 'https://nabeh.intaleqapp.com/api/auth/login';
|
||||
$this->sendUrl = getenv('NABEH_SEND_URL') ?: 'https://nabeh.intaleqapp.com/api/otp/send';
|
||||
$this->email = getenv('NABEH_EMAIL') ?: null;
|
||||
$this->password = getenv('NABEH_PASSWORD') ?: null;
|
||||
$this->authUrl = (string)getenv('NABEH_AUTH_URL');
|
||||
$this->sendUrl = (string)getenv('NABEH_SEND_URL');
|
||||
$this->email = (string)getenv('NABEH_EMAIL');
|
||||
$this->password = (string)getenv('NABEH_PASSWORD');
|
||||
|
||||
// Strict validation: NO fallback defaults allowed
|
||||
$missing = [];
|
||||
if (empty($this->authUrl)) $missing[] = 'NABEH_AUTH_URL';
|
||||
if (empty($this->sendUrl)) $missing[] = 'NABEH_SEND_URL';
|
||||
if (empty($this->email)) $missing[] = 'NABEH_EMAIL';
|
||||
if (empty($this->password)) $missing[] = 'NABEH_PASSWORD';
|
||||
|
||||
if (!empty($missing)) {
|
||||
throw new \RuntimeException("Nabeh Service configuration error: Missing environment variable(s): " . implode(', ', $missing));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -36,11 +47,6 @@ class NabehService
|
||||
}
|
||||
|
||||
// 2. Token not cached, authenticate via Nabeh Login API
|
||||
if (!$this->email || !$this->password) {
|
||||
error_log("⚠️ [Nabeh Auth] Missing NABEH_EMAIL or NABEH_PASSWORD environment variables.");
|
||||
return null;
|
||||
}
|
||||
|
||||
$payload = json_encode([
|
||||
'email' => $this->email,
|
||||
'password' => $this->password,
|
||||
@@ -51,24 +57,30 @@ class NabehService
|
||||
CURLOPT_POST => true,
|
||||
CURLOPT_POSTFIELDS => $payload,
|
||||
CURLOPT_RETURNTRANSFER => true,
|
||||
CURLOPT_TIMEOUT => 10,
|
||||
CURLOPT_TIMEOUT => 15,
|
||||
CURLOPT_HTTPHEADER => ['Content-Type: application/json'],
|
||||
]);
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
$curlError = curl_error($ch);
|
||||
curl_close($ch);
|
||||
|
||||
if ($curlError) {
|
||||
error_log("❌ [Nabeh Auth cURL Error] " . $curlError);
|
||||
return null;
|
||||
}
|
||||
|
||||
if ($httpCode === 200 && $response) {
|
||||
$decoded = json_decode($response, true);
|
||||
$token = $decoded['token'] ?? $decoded['message']['token'] ?? $decoded['jwt'] ?? $decoded['access_token'] ?? null;
|
||||
|
||||
if ($token) {
|
||||
// Cache token in Redis for 24h
|
||||
// Cache token in Redis for 24h (86400 seconds)
|
||||
try {
|
||||
$redis = RedisClient::getInstance();
|
||||
$redis->setex('nabeh_bearer_token', 86400, (string)$token);
|
||||
error_log("[Nabeh Auth] Token cached in Redis successfully.");
|
||||
error_log("✅ [Nabeh Auth] Token cached in Redis successfully.");
|
||||
} catch (\Exception $e) {
|
||||
error_log("⚠️ [Nabeh Auth Redis Cache Save] Error saving token: " . $e->getMessage());
|
||||
}
|
||||
@@ -76,28 +88,30 @@ class NabehService
|
||||
}
|
||||
}
|
||||
|
||||
error_log("❌ [Nabeh Auth Login Failed] Response: " . $response);
|
||||
error_log("❌ [Nabeh Auth Login Failed] Code: {$httpCode} | Response: {$response}");
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Send OTP via Nabeh JWT Auth Gateway (WhatsApp Image/Text OTP)
|
||||
*/
|
||||
public function sendOtp(string $receiver, string $otp, string $method = 'image', string $appName = 'منصة صَقِل'): bool
|
||||
public function sendOtp(string $receiver, string $otp, string $method = 'image', string $appName = 'منصة صَقِل'): array
|
||||
{
|
||||
$bearerToken = $this->getBearerToken();
|
||||
if (!$bearerToken) {
|
||||
error_log("⚠️ [Nabeh OTP] Failed to obtain dynamic JWT Bearer token.");
|
||||
return false;
|
||||
return [
|
||||
'success' => false,
|
||||
'error' => 'فشل الحصول على توكن المصادقة من منصة نبيه. تأكد من صحة NABEH_EMAIL و NABEH_PASSWORD.'
|
||||
];
|
||||
}
|
||||
|
||||
$phoneRaw = preg_replace('/\D+/', '', $receiver);
|
||||
$type = in_array($method, ['text', 'voice', 'image'], true) ? $method : 'image';
|
||||
|
||||
// 1. First attempt with image
|
||||
$success = $this->attemptSend($phoneRaw, $type, $otp, $appName, $bearerToken);
|
||||
if ($success) {
|
||||
return true;
|
||||
$result = $this->attemptSend($phoneRaw, $type, $otp, $appName, $bearerToken);
|
||||
if ($result['success']) {
|
||||
return $result;
|
||||
}
|
||||
|
||||
// 2. Fallback to text if image fails
|
||||
@@ -106,10 +120,10 @@ class NabehService
|
||||
return $this->attemptSend($phoneRaw, 'text', $otp, $appName, $bearerToken);
|
||||
}
|
||||
|
||||
return false;
|
||||
return $result;
|
||||
}
|
||||
|
||||
private function attemptSend(string $phone, string $type, string $otp, string $appName, string $bearerToken): bool
|
||||
private function attemptSend(string $phone, string $type, string $otp, string $appName, string $bearerToken): array
|
||||
{
|
||||
$payload = json_encode([
|
||||
'phone' => $phone,
|
||||
@@ -123,7 +137,7 @@ class NabehService
|
||||
CURLOPT_POST => true,
|
||||
CURLOPT_POSTFIELDS => $payload,
|
||||
CURLOPT_RETURNTRANSFER => true,
|
||||
CURLOPT_TIMEOUT => 10,
|
||||
CURLOPT_TIMEOUT => 15,
|
||||
CURLOPT_HTTPHEADER => [
|
||||
'Content-Type: application/json',
|
||||
"Authorization: Bearer {$bearerToken}",
|
||||
@@ -132,8 +146,17 @@ class NabehService
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
$curlError = curl_error($ch);
|
||||
curl_close($ch);
|
||||
|
||||
if ($curlError) {
|
||||
return [
|
||||
'success' => false,
|
||||
'error' => 'cURL Connection Error: ' . $curlError,
|
||||
'response' => null
|
||||
];
|
||||
}
|
||||
|
||||
if ($httpCode === 200 && $response) {
|
||||
$decoded = json_decode($response, true);
|
||||
if ($decoded) {
|
||||
@@ -147,12 +170,20 @@ class NabehService
|
||||
str_contains($msgStr, 'sent') ||
|
||||
str_contains($msgStr, 'تم')
|
||||
) {
|
||||
return true;
|
||||
return [
|
||||
'success' => true,
|
||||
'message' => 'تم إرسال رمز التحقق بنجاح عبر الواتساب',
|
||||
'raw' => $decoded
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
error_log("❌ [Nabeh OTP Attempt Failed] Code: {$httpCode} Response: {$response}");
|
||||
return false;
|
||||
return [
|
||||
'success' => false,
|
||||
'http_code' => $httpCode,
|
||||
'error' => 'Nabeh Gateway rejected OTP request',
|
||||
'response' => $response
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
+340
-323
@@ -17,7 +17,7 @@ class StudentPortal
|
||||
<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=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind CSS -->
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
@@ -29,9 +29,7 @@ class StudentPortal
|
||||
card: '#1C2541',
|
||||
cardHover: '#222F55',
|
||||
cyan: '#00F5D4',
|
||||
cyanGlow: '#00F5D433',
|
||||
gold: '#FFD166',
|
||||
goldGlow: '#FFD16633',
|
||||
border: '#2E3D66',
|
||||
textMuted: '#94A3B8'
|
||||
}
|
||||
@@ -43,308 +41,7 @@ class StudentPortal
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Alpine.js -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
body { font-family: 'Cairo', sans-serif; }
|
||||
[x-cloak] { display: none !important; }
|
||||
.glow-cyan { box-shadow: 0 0 25px -5px rgba(0, 245, 212, 0.35); }
|
||||
.glow-gold { box-shadow: 0 0 25px -5px rgba(255, 209, 102, 0.35); }
|
||||
.bg-grid {
|
||||
background-size: 30px 30px;
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
}
|
||||
@keyframes bounce-watermark {
|
||||
0%, 100% { transform: translate(10px, 10px); }
|
||||
50% { transform: translate(120px, 60px); }
|
||||
}
|
||||
.watermark-anim { animation: bounce-watermark 12s infinite ease-in-out; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-saqel-dark text-slate-100 min-h-screen bg-grid antialiased flex flex-col justify-between selection:bg-saqel-cyan selection:text-saqel-dark"
|
||||
x-data="studentAuth()" x-init="initApp()">
|
||||
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="border-b border-saqel-border/60 bg-saqel-dark/80 backdrop-blur-md sticky top-0 z-40">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-saqel-cyan to-saqel-gold p-[2px] flex items-center justify-center glow-cyan">
|
||||
<div class="w-full h-full bg-saqel-dark rounded-[10px] flex items-center justify-center text-saqel-cyan font-black text-xl">
|
||||
صـ
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-lg text-white tracking-wide">صَقِل</span>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full bg-saqel-cyan/10 text-saqel-cyan border border-saqel-cyan/30 mr-2">بوابة الطالب</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Right Controls -->
|
||||
<div class="flex items-center gap-3">
|
||||
<template x-if="isLoggedIn">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-saqel-textMuted hidden sm:inline" x-text="'مرحباً، ' + (studentData.name || 'طالب صَقِل')"></span>
|
||||
<button @click="logout()" class="text-xs px-3 py-1.5 rounded-lg border border-red-500/40 text-red-400 hover:bg-red-500/10 transition">
|
||||
تسجيل الخروج
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!isLoggedIn">
|
||||
<a href="/teacher" class="text-xs sm:text-sm text-saqel-textMuted hover:text-saqel-gold transition flex items-center gap-1">
|
||||
<span>أنت معلم؟</span>
|
||||
<span class="text-saqel-gold font-bold">بوابة المعلمين ←</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<main class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-8 w-full flex items-center justify-center">
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 1: AUTHENTICATION FLOW (Phone Number & WhatsApp OTP) -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="!isLoggedIn" class="w-full max-w-md" x-cloak>
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-saqel-card border border-saqel-cyan/30 text-saqel-cyan mb-4 glow-cyan">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-black text-white">ادخل لعالم التمكين والفهم</h1>
|
||||
<p class="text-sm text-saqel-textMuted mt-2">تسجيل دخول آمن وسريع عبر رمز الواتساب</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Box -->
|
||||
<div class="bg-saqel-card/90 border border-saqel-border rounded-2xl p-6 sm:p-8 shadow-2xl backdrop-blur-xl relative overflow-hidden">
|
||||
|
||||
<!-- Glow Accent -->
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-saqel-cyan/10 rounded-full blur-2xl pointer-events-none"></div>
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<div x-show="errorMessage" x-cloak class="mb-5 p-3.5 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-red-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span x-text="errorMessage"></span>
|
||||
</div>
|
||||
|
||||
<div x-show="successMessage" x-cloak class="mb-5 p-3.5 rounded-xl bg-saqel-cyan/10 border border-saqel-cyan/30 text-saqel-cyan text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-saqel-cyan shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<span x-text="successMessage"></span>
|
||||
</div>
|
||||
|
||||
<!-- STEP 1: PHONE NUMBER INPUT -->
|
||||
<div x-show="authStep === 'phone'">
|
||||
<form @submit.prevent="sendOtp()">
|
||||
<!-- Full Name for New Registration -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">الاسم الكامل للتعريف بشهاداتك (اختياري)</label>
|
||||
<input type="text" x-model="fullName" placeholder="مثال: أحمد محمد خالد"
|
||||
class="w-full bg-saqel-dark/90 border border-saqel-border focus:border-saqel-cyan focus:ring-1 focus:ring-saqel-cyan rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Phone Number with Jordan Prefix -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">رقم الهاتف (الواتساب) <span class="text-red-400">*</span></label>
|
||||
<div class="relative flex items-center" dir="ltr">
|
||||
<span class="absolute left-3.5 text-sm font-bold text-saqel-cyan bg-saqel-dark px-2 py-1 rounded-md border border-saqel-border">
|
||||
🇯🇴 +962
|
||||
</span>
|
||||
<input type="tel" x-model="phone" required placeholder="790000000"
|
||||
class="w-full bg-saqel-dark/90 border border-saqel-border focus:border-saqel-cyan focus:ring-1 focus:ring-saqel-cyan rounded-xl pl-28 pr-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition font-mono tracking-wider">
|
||||
</div>
|
||||
<span class="text-[11px] text-saqel-textMuted block mt-1.5">سيصلك رمز التحقق مباشرة على الواتساب المعتمد.</span>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" :disabled="loading"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-cyan to-teal-400 text-saqel-dark font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-cyan flex items-center justify-center gap-2 disabled:opacity-50">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-saqel-dark" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- STEP 2: OTP VERIFICATION -->
|
||||
<div x-show="authStep === 'otp'" x-cloak>
|
||||
<div class="text-center mb-6">
|
||||
<span class="text-xs text-saqel-textMuted">تم إرسال الرمز إلى:</span>
|
||||
<div class="font-mono font-bold text-saqel-cyan text-sm mt-0.5" x-text="phoneDisplay"></div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="verifyOtp()">
|
||||
<!-- 6 Digits OTP Input -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2 text-center">أدخل رمز التحقق (6 أرقام)</label>
|
||||
<input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •"
|
||||
class="w-full bg-saqel-dark/90 border border-saqel-cyan/50 focus:border-saqel-cyan focus:ring-2 focus:ring-saqel-cyan/30 rounded-xl px-4 py-3.5 text-center text-2xl font-mono tracking-[0.5em] text-saqel-cyan placeholder:text-slate-700 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Submit Verification -->
|
||||
<button type="submit" :disabled="loading || otpCode.length < 6"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-cyan to-teal-400 text-saqel-dark font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-cyan flex items-center justify-center gap-2 disabled:opacity-50">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-saqel-dark" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'"></span>
|
||||
</button>
|
||||
|
||||
<!-- Actions: Resend / Change Phone -->
|
||||
<div class="flex items-center justify-between text-xs mt-5 pt-4 border-t border-saqel-border/50 text-saqel-textMuted">
|
||||
<button type="button" @click="authStep = 'phone'" class="hover:text-white transition">← تعديل الرقم</button>
|
||||
<template x-if="timer > 0">
|
||||
<span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
|
||||
</template>
|
||||
<template x-if="timer === 0">
|
||||
<button type="button" @click="sendOtp()" class="text-saqel-cyan hover:underline font-bold">إعادة إرسال الرمز ↺</button>
|
||||
</template>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer Security Notice -->
|
||||
<div class="mt-6 pt-4 border-t border-saqel-border/40 text-center flex items-center justify-center gap-2 text-[11px] text-slate-500">
|
||||
<svg class="w-3.5 h-3.5 text-saqel-cyan" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
|
||||
<span>اتصال مشفر بتكنولوجيا Zero-Trust وبصمة الجهاز</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 2: STUDENT DASHBOARD WORKSPACE (Once Authenticated) -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="isLoggedIn" class="w-full space-y-8" x-cloak>
|
||||
|
||||
<!-- Dashboard Welcome Banner with Exam Readiness -->
|
||||
<div class="bg-gradient-to-r from-saqel-card to-saqel-cardHover border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl relative overflow-hidden">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-saqel-cyan/10 border border-saqel-cyan/30 text-saqel-cyan text-xs font-bold mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-saqel-cyan animate-ping"></span>
|
||||
<span>دفعة التوجيهي 2007/2008</span>
|
||||
</div>
|
||||
<h2 class="text-2xl sm:text-3xl font-black text-white" x-text="'أهلاً بك، ' + (studentData.name || 'طالبنا المتميز') + ' 🚀'"></h2>
|
||||
<p class="text-sm text-saqel-textMuted mt-1">رحلتك لصقل الفهم وتحقيق أعلى معدل وزاري تبدأ هنا.</p>
|
||||
</div>
|
||||
|
||||
<!-- Exam Readiness Gauge -->
|
||||
<div class="bg-saqel-dark/80 border border-saqel-border p-4 rounded-2xl flex items-center gap-4 min-w-[240px]">
|
||||
<div class="w-14 h-14 rounded-full border-4 border-saqel-cyan flex items-center justify-center font-black text-lg text-saqel-cyan glow-cyan">
|
||||
84%
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs font-bold text-saqel-textMuted block">مؤشر الجاهزية للوزاري</span>
|
||||
<span class="text-xs text-emerald-400 font-semibold">ممتاز — مسارك مستقر</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features Grid (Courses & In-Video Quiz Demo) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Card 1: Tawjihi Math -->
|
||||
<div class="bg-saqel-card border border-saqel-border rounded-2xl p-5 hover:border-saqel-cyan/50 transition group cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-blue-500/10 text-blue-400 border border-blue-500/20">علمي</span>
|
||||
<span class="text-xs text-saqel-textMuted">18 درس • كويزات تفاعلية</span>
|
||||
</div>
|
||||
<h3 class="font-extrabold text-white text-lg group-hover:text-saqel-cyan transition">الرياضيات العلمي — المستوى الثالث</h3>
|
||||
<p class="text-xs text-saqel-textMuted mt-2 line-clamp-2">شرح تفاعلي لمفاهيم الاشتقاق والنهايات مع أسئلة وزارية محاكية.</p>
|
||||
<div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
|
||||
<span class="text-saqel-cyan font-bold">متابعة الدرس 4 ←</span>
|
||||
<span class="text-slate-400">مكتمل 45%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Physics -->
|
||||
<div class="bg-saqel-card border border-saqel-border rounded-2xl p-5 hover:border-saqel-gold/50 transition group cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-amber-500/10 text-amber-400 border border-amber-500/20">علمي</span>
|
||||
<span class="text-xs text-saqel-textMuted">14 درس • تجارب تفاعلية</span>
|
||||
</div>
|
||||
<h3 class="font-extrabold text-white text-lg group-hover:text-saqel-gold transition">الفيزياء — الميكانيكا والطاقة</h3>
|
||||
<p class="text-xs text-saqel-textMuted mt-2 line-clamp-2">صقل مفاهيم الزخم الخطي والتصادمات وتطبيقاتها في الامتحانات.</p>
|
||||
<div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
|
||||
<span class="text-saqel-gold font-bold">بدء التعلم ←</span>
|
||||
<span class="text-slate-400">جديد</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Interactive Voice Notes Demo -->
|
||||
<div class="bg-saqel-card border border-saqel-border rounded-2xl p-5 hover:border-saqel-cyan/50 transition group">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-purple-500/10 text-purple-400 border border-purple-500/20">ميزة ذكية</span>
|
||||
<span class="text-xs text-saqel-cyan font-bold">Whisper AI</span>
|
||||
</div>
|
||||
<h3 class="font-extrabold text-white text-lg">الملاحظات الصوتية والتفريغ</h3>
|
||||
<p class="text-xs text-saqel-textMuted mt-2">سجل أي ملاحظة بصوتك أثناء الحصة، والذكاء الاصطناعي يفرغها لنص فوري.</p>
|
||||
<div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
|
||||
<span class="text-saqel-cyan font-bold">دفتر الملاحظات (3) ←</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive In-Video Quiz Demo Section -->
|
||||
<div class="bg-saqel-card/90 border border-saqel-cyan/40 rounded-3xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
|
||||
<div class="max-w-2xl">
|
||||
<div class="flex items-center gap-2 text-saqel-cyan text-xs font-bold mb-2">
|
||||
<span class="px-2 py-0.5 rounded bg-saqel-cyan/10 border border-saqel-cyan/30">تجربة تفاعلية (Coursera Model)</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-extrabold text-white">كيف يعمل الكويز الصدمي داخل الفيديو؟</h3>
|
||||
<p class="text-xs text-saqel-textMuted mt-1 mb-6">يتوقف الفيديو تلقائياً عند لحظة قياس الفهم. إذا أخطأت، يعيدك المشغل 45 ثانية لمشاهدة شرح المفهوم مجدداً.</p>
|
||||
|
||||
<!-- Interactive Demo Box -->
|
||||
<div class="bg-saqel-dark p-5 rounded-2xl border border-saqel-border" x-data="{ selectedOpt: null, answered: false, isCorrect: false }">
|
||||
<div class="text-xs text-saqel-gold font-bold mb-2">سؤال اللحظة (الدقيقة 08:30 من درس الاشتقاق):</div>
|
||||
<p class="text-sm font-bold text-white mb-4">ما هو مشتق اقتران الجيب $f(x) = \sin(x)$ بالنسبة لـ $x$؟</p>
|
||||
|
||||
<div class="space-y-2.5">
|
||||
<button @click="selectedOpt = 1; answered = true; isCorrect = true"
|
||||
:class="answered && selectedOpt === 1 ? 'bg-emerald-500/20 border-emerald-400 text-emerald-300' : 'bg-saqel-card border-saqel-border text-slate-200 hover:border-saqel-cyan'"
|
||||
class="w-full text-right p-3 rounded-xl border text-xs font-bold transition flex items-center justify-between">
|
||||
<span>أ) $\cos(x)$</span>
|
||||
<span x-show="answered && selectedOpt === 1" class="text-emerald-400">✓ إجابة صحيحة! استئناف الفيديو</span>
|
||||
</button>
|
||||
<button @click="selectedOpt = 2; answered = true; isCorrect = false"
|
||||
:class="answered && selectedOpt === 2 ? 'bg-red-500/20 border-red-400 text-red-300' : 'bg-saqel-card border-saqel-border text-slate-200 hover:border-saqel-cyan'"
|
||||
class="w-full text-right p-3 rounded-xl border text-xs font-bold transition flex items-center justify-between">
|
||||
<span>ب) $-\cos(x)$</span>
|
||||
<span x-show="answered && selectedOpt === 2" class="text-red-400">✗ خطأ — سيتم إرجاعك 45 ثانية للشرح</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Watermark Overlay Simulator -->
|
||||
<div class="fixed bottom-4 left-4 z-50 pointer-events-none opacity-40 watermark-anim select-none">
|
||||
<div class="bg-black/60 backdrop-blur-sm px-3 py-1 rounded border border-white/20 text-[10px] font-mono text-saqel-cyan">
|
||||
<span x-text="'SAQEL-DRM • ' + (studentData.phone || '079XXXXXXX')"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-saqel-border/40 py-6 text-center text-xs text-saqel-textMuted">
|
||||
<div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<span>منصة صَقِل التعليمية — الجيل الثاني للتعليم التفاعلي © 2026</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/teacher" class="hover:text-saqel-cyan transition">بوابة المعلم</a>
|
||||
<span class="text-slate-700">•</span>
|
||||
<span class="text-emerald-400">الخادم متصل ومشفر 🔒</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Alpine.js Application Logic -->
|
||||
<!-- 1. Define Alpine Data Component BEFORE Alpine Loads -->
|
||||
<script>
|
||||
function studentAuth() {
|
||||
return {
|
||||
@@ -363,27 +60,39 @@ class StudentPortal
|
||||
studentData: {},
|
||||
|
||||
async initApp() {
|
||||
this.deviceFingerprint = await this.generateDeviceFingerprint();
|
||||
const token = localStorage.getItem('saqel_student_jwt');
|
||||
if (token) {
|
||||
await this.fetchProfile(token);
|
||||
try {
|
||||
this.deviceFingerprint = await this.generateDeviceFingerprint();
|
||||
const token = localStorage.getItem('saqel_student_jwt');
|
||||
if (token) {
|
||||
await this.fetchProfile(token);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Init error:', e);
|
||||
}
|
||||
},
|
||||
|
||||
async generateDeviceFingerprint() {
|
||||
const raw = [
|
||||
navigator.userAgent,
|
||||
navigator.language,
|
||||
screen.width + 'x' + screen.height,
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
].join('###');
|
||||
const msgUint8 = new TextEncoder().encode(raw);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
try {
|
||||
const raw = [
|
||||
navigator.userAgent,
|
||||
navigator.language,
|
||||
screen.width + 'x' + screen.height,
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
].join('###');
|
||||
const msgUint8 = new TextEncoder().encode(raw);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
} catch (e) {
|
||||
return 'web_fallback_' + Math.random().toString(36).substring(2);
|
||||
}
|
||||
},
|
||||
|
||||
async sendOtp() {
|
||||
if (!this.phone) {
|
||||
this.errorMessage = 'يرجى إدخال رقم الهاتف';
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.errorMessage = '';
|
||||
this.successMessage = '';
|
||||
@@ -405,20 +114,24 @@ class StudentPortal
|
||||
this.phoneDisplay = data.data?.phone_masked || this.phone;
|
||||
this.successMessage = data.message;
|
||||
if (data.debug_otp) {
|
||||
this.otpCode = data.debug_otp; // Auto-fill in dev mode
|
||||
this.otpCode = data.debug_otp;
|
||||
}
|
||||
this.startTimer(60);
|
||||
} else {
|
||||
this.errorMessage = data.message || 'فشل إرسال رمز التحقق';
|
||||
}
|
||||
} catch (e) {
|
||||
this.errorMessage = 'حدث خطأ في الاتصال بالخادم';
|
||||
this.errorMessage = 'حدث خطأ في الاتصال بالخادم. تأكد من تفعيل السيرفر.';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async verifyOtp() {
|
||||
if (!this.otpCode || this.otpCode.length < 6) {
|
||||
this.errorMessage = 'يرجى إدخال رمز التحقق المكون من 6 أرقام';
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
@@ -479,12 +192,14 @@ class StudentPortal
|
||||
fetch('/api/auth/logout', {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
}).catch(() => {});
|
||||
}
|
||||
localStorage.removeItem('saqel_student_jwt');
|
||||
this.isLoggedIn = false;
|
||||
this.authStep = 'phone';
|
||||
this.otpCode = '';
|
||||
this.errorMessage = '';
|
||||
this.successMessage = '';
|
||||
},
|
||||
|
||||
startTimer(seconds) {
|
||||
@@ -498,9 +213,311 @@ class StudentPortal
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<!-- Alpine.js Core Script (Deferred) -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
body { font-family: 'Cairo', sans-serif; background-color: #0B132B; }
|
||||
.glow-cyan { box-shadow: 0 0 25px -5px rgba(0, 245, 212, 0.35); }
|
||||
.bg-grid {
|
||||
background-size: 30px 30px;
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
}
|
||||
@keyframes bounce-watermark {
|
||||
0%, 100% { transform: translate(10px, 10px); }
|
||||
50% { transform: translate(120px, 60px); }
|
||||
}
|
||||
.watermark-anim { animation: bounce-watermark 12s infinite ease-in-out; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-saqel-dark text-slate-100 min-h-screen bg-grid antialiased flex flex-col justify-between selection:bg-saqel-cyan selection:text-saqel-dark"
|
||||
x-data="studentAuth()" x-init="initApp()">
|
||||
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="border-b border-saqel-border/80 bg-[#0B132B]/95 backdrop-blur-md sticky top-0 z-40">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-saqel-cyan to-teal-400 p-[2px] flex items-center justify-center glow-cyan">
|
||||
<div class="w-full h-full bg-[#0B132B] rounded-[10px] flex items-center justify-center text-saqel-cyan font-black text-xl">
|
||||
صـ
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-lg text-white tracking-wide">صَقِل</span>
|
||||
<span class="text-xs px-2.5 py-0.5 rounded-full bg-saqel-cyan/10 text-saqel-cyan border border-saqel-cyan/30 mr-2 font-semibold">بوابة الطالب</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Right Controls -->
|
||||
<div class="flex items-center gap-3">
|
||||
<template x-if="isLoggedIn">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-slate-300 hidden sm:inline" x-text="'مرحباً، ' + (studentData.name || 'طالب صَقِل')"></span>
|
||||
<button @click="logout()" class="text-xs px-3 py-1.5 rounded-lg border border-red-500/40 text-red-400 hover:bg-red-500/10 transition">
|
||||
تسجيل الخروج
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!isLoggedIn">
|
||||
<a href="/teacher" class="text-xs sm:text-sm text-slate-400 hover:text-saqel-gold transition flex items-center gap-1.5">
|
||||
<span>أنت معلم؟</span>
|
||||
<span class="text-saqel-gold font-bold underline">بوابة المعلمين ←</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<main class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-8 w-full flex items-center justify-center">
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 1: AUTHENTICATION FLOW (Phone Number & WhatsApp OTP) -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="!isLoggedIn" class="w-full max-w-md">
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="text-center mb-6">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[#1C2541] border border-saqel-cyan/40 text-saqel-cyan mb-3 glow-cyan shadow-xl">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-black text-white">ادخل لعالم التمكين والفهم</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-400 mt-1">تسجيل دخول آمن وسريع عبر رمز الواتساب المعتمد</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Box -->
|
||||
<div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
|
||||
|
||||
<!-- Glow Accent -->
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-saqel-cyan/10 rounded-full blur-2xl pointer-events-none"></div>
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<template x-if="errorMessage">
|
||||
<div class="mb-5 p-3.5 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-xs sm:text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-red-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span x-text="errorMessage"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="successMessage">
|
||||
<div class="mb-5 p-3.5 rounded-xl bg-saqel-cyan/10 border border-saqel-cyan/30 text-saqel-cyan text-xs sm:text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-saqel-cyan shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<span x-text="successMessage"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- STEP 1: PHONE NUMBER INPUT -->
|
||||
<div x-show="authStep === 'phone'">
|
||||
<form @submit.prevent="sendOtp()">
|
||||
<!-- Full Name for New Registration -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">الاسم الكامل للطالب (اختياري للشهادات)</label>
|
||||
<input type="text" x-model="fullName" placeholder="مثال: أحمد محمد خالد"
|
||||
class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-cyan focus:ring-1 focus:ring-saqel-cyan rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Phone Number with Jordan Prefix -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">رقم الهاتف (الواتساب) <span class="text-red-400">*</span></label>
|
||||
<div class="relative flex items-center" dir="ltr">
|
||||
<span class="absolute left-3 text-xs font-bold text-saqel-cyan bg-[#0B132B] px-2 py-1 rounded-md border border-saqel-border">
|
||||
🇯🇴 +962
|
||||
</span>
|
||||
<input type="tel" x-model="phone" required placeholder="790000000"
|
||||
class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-cyan focus:ring-1 focus:ring-saqel-cyan rounded-xl pl-24 pr-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition font-mono tracking-wider">
|
||||
</div>
|
||||
<span class="text-[11px] text-slate-400 block mt-1.5">سيصلك رمز التحقق عبر الواتساب من منصة نبيه.</span>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" :disabled="loading"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-cyan to-teal-400 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-cyan flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- STEP 2: OTP VERIFICATION -->
|
||||
<div x-show="authStep === 'otp'">
|
||||
<div class="text-center mb-6">
|
||||
<span class="text-xs text-slate-400">تم إرسال الرمز للرقم:</span>
|
||||
<div class="font-mono font-bold text-saqel-cyan text-sm mt-0.5" x-text="phoneDisplay"></div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="verifyOtp()">
|
||||
<!-- 6 Digits OTP Input -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2 text-center">أدخل رمز التحقق (6 أرقام)</label>
|
||||
<input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •"
|
||||
class="w-full bg-[#0B132B] border border-saqel-cyan/50 focus:border-saqel-cyan focus:ring-2 focus:ring-saqel-cyan/30 rounded-xl px-4 py-3.5 text-center text-2xl font-mono tracking-[0.4em] text-saqel-cyan placeholder:text-slate-700 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Submit Verification -->
|
||||
<button type="submit" :disabled="loading || otpCode.length < 6"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-cyan to-teal-400 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-cyan flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'"></span>
|
||||
</button>
|
||||
|
||||
<!-- Actions: Resend / Change Phone -->
|
||||
<div class="flex items-center justify-between text-xs mt-5 pt-4 border-t border-saqel-border/50 text-slate-400">
|
||||
<button type="button" @click="authStep = 'phone'" class="hover:text-white transition">← تعديل الرقم</button>
|
||||
<template x-if="timer > 0">
|
||||
<span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
|
||||
</template>
|
||||
<template x-if="timer === 0">
|
||||
<button type="button" @click="sendOtp()" class="text-saqel-cyan hover:underline font-bold">إعادة إرسال الرمز ↺</button>
|
||||
</template>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer Security Notice -->
|
||||
<div class="mt-6 pt-4 border-t border-saqel-border/40 text-center flex items-center justify-center gap-2 text-[11px] text-slate-500">
|
||||
<svg class="w-3.5 h-3.5 text-saqel-cyan" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
|
||||
<span>اتصال مشفر بتكنولوجيا Zero-Trust وبصمة الجهاز الموحدة</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 2: STUDENT DASHBOARD WORKSPACE (Once Authenticated) -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="isLoggedIn" class="w-full space-y-8">
|
||||
|
||||
<!-- Dashboard Welcome Banner with Exam Readiness -->
|
||||
<div class="bg-gradient-to-r from-[#1C2541] to-[#222F55] border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl relative overflow-hidden">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-saqel-cyan/10 border border-saqel-cyan/30 text-saqel-cyan text-xs font-bold mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-saqel-cyan animate-ping"></span>
|
||||
<span>دفعة التوجيهي 2007/2008</span>
|
||||
</div>
|
||||
<h2 class="text-2xl sm:text-3xl font-black text-white" x-text="'أهلاً بك، ' + (studentData.name || 'طالبنا المتميز') + ' 🚀'"></h2>
|
||||
<p class="text-sm text-slate-300 mt-1">رحلتك لصقل الفهم وتحقيق أعلى معدل وزاري تبدأ هنا.</p>
|
||||
</div>
|
||||
|
||||
<!-- Exam Readiness Gauge -->
|
||||
<div class="bg-[#0B132B]/80 border border-saqel-border p-4 rounded-2xl flex items-center gap-4 min-w-[240px]">
|
||||
<div class="w-14 h-14 rounded-full border-4 border-saqel-cyan flex items-center justify-center font-black text-lg text-saqel-cyan glow-cyan">
|
||||
84%
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs font-bold text-slate-400 block">مؤشر الجاهزية للوزاري</span>
|
||||
<span class="text-xs text-emerald-400 font-semibold">ممتاز — مسارك مستقر</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features Grid (Courses & In-Video Quiz Demo) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Card 1: Tawjihi Math -->
|
||||
<div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-5 hover:border-saqel-cyan/50 transition group cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-blue-500/10 text-blue-400 border border-blue-500/20">علمي</span>
|
||||
<span class="text-xs text-slate-400">18 درس • كويزات تفاعلية</span>
|
||||
</div>
|
||||
<h3 class="font-extrabold text-white text-lg group-hover:text-saqel-cyan transition">الرياضيات العلمي — المستوى الثالث</h3>
|
||||
<p class="text-xs text-slate-400 mt-2 line-clamp-2">شرح تفاعلي لمفاهيم الاشتقاق والنهايات مع أسئلة وزارية محاكية.</p>
|
||||
<div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
|
||||
<span class="text-saqel-cyan font-bold">متابعة الدرس 4 ←</span>
|
||||
<span class="text-slate-400">مكتمل 45%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Physics -->
|
||||
<div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-5 hover:border-saqel-gold/50 transition group cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-amber-500/10 text-amber-400 border border-amber-500/20">علمي</span>
|
||||
<span class="text-xs text-slate-400">14 درس • تجارب تفاعلية</span>
|
||||
</div>
|
||||
<h3 class="font-extrabold text-white text-lg group-hover:text-saqel-gold transition">الفيزياء — الميكانيكا والطاقة</h3>
|
||||
<p class="text-xs text-slate-400 mt-2 line-clamp-2">صقل مفاهيم الزخم الخطي والتصادمات وتطبيقاتها في الامتحانات.</p>
|
||||
<div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
|
||||
<span class="text-saqel-gold font-bold">بدء التعلم ←</span>
|
||||
<span class="text-slate-400">جديد</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Interactive Voice Notes Demo -->
|
||||
<div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-5 hover:border-saqel-cyan/50 transition group">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-purple-500/10 text-purple-400 border border-purple-500/20">ميزة ذكية</span>
|
||||
<span class="text-xs text-saqel-cyan font-bold">Whisper AI</span>
|
||||
</div>
|
||||
<h3 class="font-extrabold text-white text-lg">الملاحظات الصوتية والتفريغ</h3>
|
||||
<p class="text-xs text-slate-400 mt-2">سجل أي ملاحظة بصوتك أثناء الحصة، والذكاء الاصطناعي يفرغها لنص فوري.</p>
|
||||
<div class="mt-4 pt-3 border-t border-saqel-border/50 flex items-center justify-between text-xs">
|
||||
<span class="text-saqel-cyan font-bold">دفتر الملاحظات (3) ←</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive In-Video Quiz Demo Section -->
|
||||
<div class="bg-[#1C2541] border border-saqel-cyan/40 rounded-3xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
|
||||
<div class="max-w-2xl">
|
||||
<div class="flex items-center gap-2 text-saqel-cyan text-xs font-bold mb-2">
|
||||
<span class="px-2 py-0.5 rounded bg-saqel-cyan/10 border border-saqel-cyan/30">تجربة تفاعلية (Coursera Model)</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-extrabold text-white">كيف يعمل الكويز الصدمي داخل الفيديو؟</h3>
|
||||
<p class="text-xs text-slate-400 mt-1 mb-6">يتوقف الفيديو تلقائياً عند لحظة قياس الفهم. إذا أخطأت، يعيدك المشغل 45 ثانية لمشاهدة شرح المفهوم مجدداً.</p>
|
||||
|
||||
<!-- Interactive Demo Box -->
|
||||
<div class="bg-[#0B132B] p-5 rounded-2xl border border-saqel-border" x-data="{ selectedOpt: null, answered: false, isCorrect: false }">
|
||||
<div class="text-xs text-saqel-gold font-bold mb-2">سؤال اللحظة (الدقيقة 08:30 من درس الاشتقاق):</div>
|
||||
<p class="text-sm font-bold text-white mb-4">ما هو مشتق اقتران الجيب f(x) = sin(x) بالنسبة لـ x؟</p>
|
||||
|
||||
<div class="space-y-2.5">
|
||||
<button @click="selectedOpt = 1; answered = true; isCorrect = true"
|
||||
:class="answered && selectedOpt === 1 ? 'bg-emerald-500/20 border-emerald-400 text-emerald-300' : 'bg-[#1C2541] border-saqel-border text-slate-200 hover:border-saqel-cyan'"
|
||||
class="w-full text-right p-3 rounded-xl border text-xs font-bold transition flex items-center justify-between">
|
||||
<span>أ) cos(x)</span>
|
||||
<span x-show="answered && selectedOpt === 1" class="text-emerald-400">✓ إجابة صحيحة! استئناف الفيديو</span>
|
||||
</button>
|
||||
<button @click="selectedOpt = 2; answered = true; isCorrect = false"
|
||||
:class="answered && selectedOpt === 2 ? 'bg-red-500/20 border-red-400 text-red-300' : 'bg-[#1C2541] border-saqel-border text-slate-200 hover:border-saqel-cyan'"
|
||||
class="w-full text-right p-3 rounded-xl border text-xs font-bold transition flex items-center justify-between">
|
||||
<span>ب) -cos(x)</span>
|
||||
<span x-show="answered && selectedOpt === 2" class="text-red-400">✗ خطأ — سيتم إرجاعك 45 ثانية للشرح</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Watermark Overlay Simulator -->
|
||||
<div class="fixed bottom-4 left-4 z-50 pointer-events-none opacity-40 watermark-anim select-none">
|
||||
<div class="bg-black/60 backdrop-blur-sm px-3 py-1 rounded border border-white/20 text-[10px] font-mono text-saqel-cyan">
|
||||
<span x-text="'SAQEL-DRM • ' + (studentData.phone || '079XXXXXXX')"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-saqel-border/40 py-6 text-center text-xs text-slate-400 bg-[#0B132B]">
|
||||
<div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<span>منصة صَقِل التعليمية — الجيل الثاني للتعليم التفاعلي © 2026</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/teacher" class="hover:text-saqel-cyan transition">بوابة المعلم</a>
|
||||
<span class="text-slate-700">•</span>
|
||||
<span class="text-emerald-400">الخادم متصل ومشفر 🔒</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
HTML;
|
||||
|
||||
+300
-280
@@ -30,7 +30,6 @@ class TeacherPortal
|
||||
cardHover: '#222F55',
|
||||
cyan: '#00F5D4',
|
||||
gold: '#FFD166',
|
||||
goldGlow: '#FFD16633',
|
||||
border: '#2E3D66',
|
||||
textMuted: '#94A3B8'
|
||||
}
|
||||
@@ -42,272 +41,12 @@ class TeacherPortal
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Alpine.js -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
body { font-family: 'Cairo', sans-serif; }
|
||||
[x-cloak] { display: none !important; }
|
||||
.glow-gold { box-shadow: 0 0 25px -5px rgba(255, 209, 102, 0.35); }
|
||||
.bg-grid {
|
||||
background-size: 30px 30px;
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-saqel-dark text-slate-100 min-h-screen bg-grid antialiased flex flex-col justify-between selection:bg-saqel-gold selection:text-saqel-dark"
|
||||
x-data="teacherAuth()" x-init="initApp()">
|
||||
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="border-b border-saqel-border/60 bg-saqel-dark/80 backdrop-blur-md sticky top-0 z-40">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-saqel-gold to-amber-500 p-[2px] flex items-center justify-center glow-gold">
|
||||
<div class="w-full h-full bg-saqel-dark rounded-[10px] flex items-center justify-center text-saqel-gold font-black text-xl">
|
||||
صـ
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-lg text-white tracking-wide">صَقِل</span>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full bg-saqel-gold/10 text-saqel-gold border border-saqel-gold/30 mr-2">استوديو المعلمين</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Right Controls -->
|
||||
<div class="flex items-center gap-3">
|
||||
<template x-if="isLoggedIn">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-saqel-textMuted hidden sm:inline" x-text="'أهلاً، ' + (teacherData.name || 'أستاذنا')"></span>
|
||||
<button @click="logout()" class="text-xs px-3 py-1.5 rounded-lg border border-red-500/40 text-red-400 hover:bg-red-500/10 transition">
|
||||
تسجيل الخروج
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!isLoggedIn">
|
||||
<a href="/student" class="text-xs sm:text-sm text-saqel-textMuted hover:text-saqel-cyan transition flex items-center gap-1">
|
||||
<span>أنت طالب؟</span>
|
||||
<span class="text-saqel-cyan font-bold">بوابة الطلاب ←</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<main class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-8 w-full flex items-center justify-center">
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 1: TEACHER AUTHENTICATION FLOW -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="!isLoggedIn" class="w-full max-w-md" x-cloak>
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-saqel-card border border-saqel-gold/30 text-saqel-gold mb-4 glow-gold">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-black text-white">استوديو صَقِل للمعلمين</h1>
|
||||
<p class="text-sm text-saqel-textMuted mt-2">منصة تصنع المعلم الرقمي الأول — حماية محتواك وأرباح متنامية</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Box -->
|
||||
<div class="bg-saqel-card/90 border border-saqel-border rounded-2xl p-6 sm:p-8 shadow-2xl backdrop-blur-xl relative overflow-hidden">
|
||||
|
||||
<!-- Glow Accent -->
|
||||
<div class="absolute top-0 left-0 w-32 h-32 bg-saqel-gold/10 rounded-full blur-2xl pointer-events-none"></div>
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<div x-show="errorMessage" x-cloak class="mb-5 p-3.5 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-red-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span x-text="errorMessage"></span>
|
||||
</div>
|
||||
|
||||
<div x-show="successMessage" x-cloak class="mb-5 p-3.5 rounded-xl bg-saqel-gold/10 border border-saqel-gold/30 text-saqel-gold text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-saqel-gold shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<span x-text="successMessage"></span>
|
||||
</div>
|
||||
|
||||
<!-- STEP 1: PHONE NUMBER INPUT -->
|
||||
<div x-show="authStep === 'phone'">
|
||||
<form @submit.prevent="sendOtp()">
|
||||
<!-- Full Name -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">اسم المعلم / الأستاذ</label>
|
||||
<input type="text" x-model="fullName" placeholder="مثال: الأستاذ حمزة النجار"
|
||||
class="w-full bg-saqel-dark/90 border border-saqel-border focus:border-saqel-gold focus:ring-1 focus:ring-saqel-gold rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Phone Number -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">رقم الهاتف (الواتساب) <span class="text-red-400">*</span></label>
|
||||
<div class="relative flex items-center" dir="ltr">
|
||||
<span class="absolute left-3.5 text-sm font-bold text-saqel-gold bg-saqel-dark px-2 py-1 rounded-md border border-saqel-border">
|
||||
🇯🇴 +962
|
||||
</span>
|
||||
<input type="tel" x-model="phone" required placeholder="790000000"
|
||||
class="w-full bg-saqel-dark/90 border border-saqel-border focus:border-saqel-gold focus:ring-1 focus:ring-saqel-gold rounded-xl pl-28 pr-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition font-mono tracking-wider">
|
||||
</div>
|
||||
<span class="text-[11px] text-saqel-textMuted block mt-1.5">يُشترط رقم مسجل ومعتمد لدى إدارة المنصة.</span>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" :disabled="loading"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-gold to-amber-500 text-saqel-dark font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-gold flex items-center justify-center gap-2 disabled:opacity-50">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-saqel-dark" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- STEP 2: OTP VERIFICATION -->
|
||||
<div x-show="authStep === 'otp'" x-cloak>
|
||||
<div class="text-center mb-6">
|
||||
<span class="text-xs text-saqel-textMuted">تم إرسال الرمز للواتساب:</span>
|
||||
<div class="font-mono font-bold text-saqel-gold text-sm mt-0.5" x-text="phoneDisplay"></div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="verifyOtp()">
|
||||
<!-- 6 Digits OTP Input -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2 text-center">أدخل رمز التحقق (6 أرقام)</label>
|
||||
<input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •"
|
||||
class="w-full bg-saqel-dark/90 border border-saqel-gold/50 focus:border-saqel-gold focus:ring-2 focus:ring-saqel-gold/30 rounded-xl px-4 py-3.5 text-center text-2xl font-mono tracking-[0.5em] text-saqel-gold placeholder:text-slate-700 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Submit Verification -->
|
||||
<button type="submit" :disabled="loading || otpCode.length < 6"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-gold to-amber-500 text-saqel-dark font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-gold flex items-center justify-center gap-2 disabled:opacity-50">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-saqel-dark" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
|
||||
</button>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-between text-xs mt-5 pt-4 border-t border-saqel-border/50 text-saqel-textMuted">
|
||||
<button type="button" @click="authStep = 'phone'" class="hover:text-white transition">← تعديل الرقم</button>
|
||||
<template x-if="timer > 0">
|
||||
<span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
|
||||
</template>
|
||||
<template x-if="timer === 0">
|
||||
<button type="button" @click="sendOtp()" class="text-saqel-gold hover:underline font-bold">إعادة إرسال الرمز ↺</button>
|
||||
</template>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer Partner Notice -->
|
||||
<div class="mt-6 pt-4 border-t border-saqel-border/40 text-center text-[11px] text-slate-500">
|
||||
<span>حماية محتوى DRM كاملة + تقاسم أرباح 45%–50% شفاف ومؤتمت</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 2: TEACHER STUDIO WORKSPACE -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="isLoggedIn" class="w-full space-y-8" x-cloak>
|
||||
|
||||
<!-- Teacher Summary Header -->
|
||||
<div class="bg-gradient-to-r from-saqel-card to-saqel-cardHover border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-saqel-gold/10 border border-saqel-gold/30 text-saqel-gold text-xs font-bold mb-3">
|
||||
<span>استوديو المعلم المعتمد</span>
|
||||
</div>
|
||||
<h2 class="text-2xl sm:text-3xl font-black text-white" x-text="'أهلاً بك، ' + (teacherData.name || 'أستاذنا الفاضل') + ' 👨🏫'"></h2>
|
||||
<p class="text-sm text-saqel-textMuted mt-1">إدارة دوراتك، إدراج كويزات الفيديو التفاعلية، ومتابعة نمو طلابك.</p>
|
||||
</div>
|
||||
|
||||
<!-- Teacher Earnings Summary -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-saqel-dark/80 border border-saqel-border p-4 rounded-2xl text-center min-w-[130px]">
|
||||
<span class="text-xs text-saqel-textMuted block font-bold">إجمالي الطلاب</span>
|
||||
<span class="text-2xl font-black text-saqel-cyan">1,240</span>
|
||||
</div>
|
||||
<div class="bg-saqel-dark/80 border border-saqel-gold/40 p-4 rounded-2xl text-center min-w-[150px] glow-gold">
|
||||
<span class="text-xs text-saqel-textMuted block font-bold">أرباحك المتراكمة</span>
|
||||
<span class="text-2xl font-black text-saqel-gold">19,530 د.أ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- In-Video Quiz Creator Tool (Coursera Engine) -->
|
||||
<div class="bg-saqel-card border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-black text-white">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
|
||||
<p class="text-xs text-saqel-textMuted mt-1">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</p>
|
||||
</div>
|
||||
<span class="text-xs px-3 py-1 rounded-lg bg-saqel-cyan/10 text-saqel-cyan border border-saqel-cyan/30 font-bold">Bunny Stream Synced</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-saqel-dark/80 p-5 rounded-2xl border border-saqel-border">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">اختر الدورة والدرس</label>
|
||||
<select class="w-full bg-saqel-card border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-white outline-none">
|
||||
<option>الرياضيات العلمي — الدرس 4: قواعد الاشتقاق الأساسية</option>
|
||||
<option>الرياضيات العلمي — الدرس 5: الاشتقاق الضمني</option>
|
||||
</select>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">توقيت ظهور الكويز (بالدقيقة والثانية)</label>
|
||||
<input type="text" value="08:30" class="w-full bg-saqel-card border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-saqel-cyan font-mono outline-none">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">عقوبة الخطأ (الإرجاع العلاجي)</label>
|
||||
<select class="w-full bg-saqel-card border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-white outline-none">
|
||||
<option>إرجاع الطالب 45 ثانية للخلف (مستحسن)</option>
|
||||
<option>إرجاع الطالب 60 ثانية للخلف</option>
|
||||
<option>إعادة مشاهدة المقطع بالكامل</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-saqel-textMuted mb-2">نص السؤال التفاعلي</label>
|
||||
<textarea rows="3" placeholder="اكتب السؤال الذي سيظهر أمام الطالب..." class="w-full bg-saqel-card border border-saqel-border rounded-xl p-3 text-xs text-white outline-none resize-none"></textarea>
|
||||
|
||||
<div class="mt-3 space-y-2">
|
||||
<input type="text" placeholder="الخيار الأول (الصحيح)" class="w-full bg-saqel-card border border-emerald-500/40 rounded-xl px-3 py-2 text-xs text-emerald-300 outline-none">
|
||||
<input type="text" placeholder="الخيار الثاني (الخاطئ)" class="w-full bg-saqel-card border border-saqel-border rounded-xl px-3 py-2 text-xs text-slate-300 outline-none">
|
||||
</div>
|
||||
|
||||
<button class="mt-4 w-full py-2.5 bg-saqel-gold text-saqel-dark font-extrabold text-xs rounded-xl hover:opacity-90 transition">
|
||||
حفظ الكويز داخل الفيديو ✓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-saqel-border/40 py-6 text-center text-xs text-saqel-textMuted">
|
||||
<div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<span>منصة صَقِل التعليمية — نظام استوديو المعلمين © 2026</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/student" class="hover:text-saqel-gold transition">بوابة الطلاب</a>
|
||||
<span class="text-slate-700">•</span>
|
||||
<span class="text-emerald-400">حماية المحتوى مشفرة 🔒</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Alpine.js Application Logic -->
|
||||
<!-- 1. Define Alpine Data Component BEFORE Alpine Loads -->
|
||||
<script>
|
||||
function teacherAuth() {
|
||||
return {
|
||||
isLoggedIn: false,
|
||||
authStep: 'phone',
|
||||
authStep: 'phone', // 'phone' | 'otp'
|
||||
phone: '',
|
||||
fullName: '',
|
||||
otpCode: '',
|
||||
@@ -321,26 +60,39 @@ class TeacherPortal
|
||||
teacherData: {},
|
||||
|
||||
async initApp() {
|
||||
this.deviceFingerprint = await this.generateDeviceFingerprint();
|
||||
const token = localStorage.getItem('saqel_teacher_jwt');
|
||||
if (token) {
|
||||
await this.fetchProfile(token);
|
||||
try {
|
||||
this.deviceFingerprint = await this.generateDeviceFingerprint();
|
||||
const token = localStorage.getItem('saqel_teacher_jwt');
|
||||
if (token) {
|
||||
await this.fetchProfile(token);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Teacher Init error:', e);
|
||||
}
|
||||
},
|
||||
|
||||
async generateDeviceFingerprint() {
|
||||
const raw = [
|
||||
navigator.userAgent,
|
||||
screen.width + 'x' + screen.height,
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
].join('###');
|
||||
const msgUint8 = new TextEncoder().encode(raw);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
try {
|
||||
const raw = [
|
||||
navigator.userAgent,
|
||||
navigator.language,
|
||||
screen.width + 'x' + screen.height,
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
].join('###');
|
||||
const msgUint8 = new TextEncoder().encode(raw);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
} catch (e) {
|
||||
return 'teacher_web_' + Math.random().toString(36).substring(2);
|
||||
}
|
||||
},
|
||||
|
||||
async sendOtp() {
|
||||
if (!this.phone) {
|
||||
this.errorMessage = 'يرجى إدخال رقم الهاتف المسجل';
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.errorMessage = '';
|
||||
this.successMessage = '';
|
||||
@@ -369,13 +121,17 @@ class TeacherPortal
|
||||
this.errorMessage = data.message || 'فشل إرسال رمز التحقق';
|
||||
}
|
||||
} catch (e) {
|
||||
this.errorMessage = 'حدث خطأ في الاتصال بالخادم';
|
||||
this.errorMessage = 'حدث خطأ في الاتصال بالخادم. تأكد من تفعيل السيرفر.';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async verifyOtp() {
|
||||
if (!this.otpCode || this.otpCode.length < 6) {
|
||||
this.errorMessage = 'يرجى إدخال رمز التحقق المكون من 6 أرقام';
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
@@ -399,7 +155,7 @@ class TeacherPortal
|
||||
this.isLoggedIn = true;
|
||||
this.successMessage = 'تم تسجيل الدخول بنجاح!';
|
||||
} else {
|
||||
this.errorMessage = data.message || 'رمز التحقق غير صحيح أو غير مصرح للمعلم';
|
||||
this.errorMessage = data.message || 'رمز التحقق غير صحيح أو غير مصرح للدخول كمعلم';
|
||||
}
|
||||
} catch (e) {
|
||||
this.errorMessage = 'حدث خطأ في التحقق من الرمز';
|
||||
@@ -436,12 +192,14 @@ class TeacherPortal
|
||||
fetch('/api/auth/logout', {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': 'Bearer ' + token }
|
||||
});
|
||||
}).catch(() => {});
|
||||
}
|
||||
localStorage.removeItem('saqel_teacher_jwt');
|
||||
this.isLoggedIn = false;
|
||||
this.authStep = 'phone';
|
||||
this.otpCode = '';
|
||||
this.errorMessage = '';
|
||||
this.successMessage = '';
|
||||
},
|
||||
|
||||
startTimer(seconds) {
|
||||
@@ -455,9 +213,271 @@ class TeacherPortal
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<!-- Alpine.js Core Script (Deferred) -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
body { font-family: 'Cairo', sans-serif; background-color: #0B132B; }
|
||||
.glow-gold { box-shadow: 0 0 25px -5px rgba(255, 209, 102, 0.35); }
|
||||
.bg-grid {
|
||||
background-size: 30px 30px;
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#0B132B] text-slate-100 min-h-screen bg-grid antialiased flex flex-col justify-between selection:bg-saqel-gold selection:text-[#0B132B]"
|
||||
x-data="teacherAuth()" x-init="initApp()">
|
||||
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="border-b border-saqel-border/80 bg-[#0B132B]/95 backdrop-blur-md sticky top-0 z-40">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-saqel-gold to-amber-500 p-[2px] flex items-center justify-center glow-gold">
|
||||
<div class="w-full h-full bg-[#0B132B] rounded-[10px] flex items-center justify-center text-saqel-gold font-black text-xl">
|
||||
صـ
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-lg text-white tracking-wide">صَقِل</span>
|
||||
<span class="text-xs px-2.5 py-0.5 rounded-full bg-saqel-gold/10 text-saqel-gold border border-saqel-gold/30 mr-2 font-semibold">استوديو المعلمين</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Right Controls -->
|
||||
<div class="flex items-center gap-3">
|
||||
<template x-if="isLoggedIn">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-slate-300 hidden sm:inline" x-text="'أهلاً، ' + (teacherData.name || 'أستاذنا')"></span>
|
||||
<button @click="logout()" class="text-xs px-3 py-1.5 rounded-lg border border-red-500/40 text-red-400 hover:bg-red-500/10 transition">
|
||||
تسجيل الخروج
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!isLoggedIn">
|
||||
<a href="/student" class="text-xs sm:text-sm text-slate-400 hover:text-saqel-cyan transition flex items-center gap-1.5">
|
||||
<span>أنت طالب؟</span>
|
||||
<span class="text-saqel-cyan font-bold underline">بوابة الطلاب ←</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<main class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-8 w-full flex items-center justify-center">
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 1: TEACHER AUTHENTICATION FLOW -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="!isLoggedIn" class="w-full max-w-md">
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="text-center mb-6">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[#1C2541] border border-saqel-gold/40 text-saqel-gold mb-3 glow-gold shadow-xl">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-black text-white">استوديو صَقِل للمعلمين</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-400 mt-1">حماية متطورة لمحتواك وأرباح متنامية بنظام الشراكة</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Box -->
|
||||
<div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
|
||||
|
||||
<!-- Glow Accent -->
|
||||
<div class="absolute top-0 left-0 w-32 h-32 bg-saqel-gold/10 rounded-full blur-2xl pointer-events-none"></div>
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<template x-if="errorMessage">
|
||||
<div class="mb-5 p-3.5 rounded-xl bg-red-500/10 border border-red-500/30 text-red-300 text-xs sm:text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-red-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span x-text="errorMessage"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="successMessage">
|
||||
<div class="mb-5 p-3.5 rounded-xl bg-saqel-gold/10 border border-saqel-gold/30 text-saqel-gold text-xs sm:text-sm flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-saqel-gold shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
||||
<span x-text="successMessage"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- STEP 1: PHONE NUMBER INPUT -->
|
||||
<div x-show="authStep === 'phone'">
|
||||
<form @submit.prevent="sendOtp()">
|
||||
<!-- Full Name -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">اسم المعلم / الأستاذ</label>
|
||||
<input type="text" x-model="fullName" placeholder="مثال: الأستاذ حمزة النجار"
|
||||
class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-gold focus:ring-1 focus:ring-saqel-gold rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Phone Number -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">رقم الهاتف (الواتساب) <span class="text-red-400">*</span></label>
|
||||
<div class="relative flex items-center" dir="ltr">
|
||||
<span class="absolute left-3 text-xs font-bold text-saqel-gold bg-[#0B132B] px-2 py-1 rounded-md border border-saqel-border">
|
||||
🇯🇴 +962
|
||||
</span>
|
||||
<input type="tel" x-model="phone" required placeholder="790000000"
|
||||
class="w-full bg-[#0B132B] border border-saqel-border focus:border-saqel-gold focus:ring-1 focus:ring-saqel-gold rounded-xl pl-24 pr-4 py-3 text-sm text-white placeholder:text-slate-600 outline-none transition font-mono tracking-wider">
|
||||
</div>
|
||||
<span class="text-[11px] text-slate-400 block mt-1.5">يُشترط رقم مسجل ومعتمد لدى إدارة المنصة.</span>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" :disabled="loading"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-gold to-amber-500 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-gold flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- STEP 2: OTP VERIFICATION -->
|
||||
<div x-show="authStep === 'otp'">
|
||||
<div class="text-center mb-6">
|
||||
<span class="text-xs text-slate-400">تم إرسال الرمز للواتساب:</span>
|
||||
<div class="font-mono font-bold text-saqel-gold text-sm mt-0.5" x-text="phoneDisplay"></div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="verifyOtp()">
|
||||
<!-- 6 Digits OTP Input -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2 text-center">أدخل رمز التحقق (6 أرقام)</label>
|
||||
<input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •"
|
||||
class="w-full bg-[#0B132B] border border-saqel-gold/50 focus:border-saqel-gold focus:ring-2 focus:ring-saqel-gold/30 rounded-xl px-4 py-3.5 text-center text-2xl font-mono tracking-[0.4em] text-saqel-gold placeholder:text-slate-700 outline-none transition">
|
||||
</div>
|
||||
|
||||
<!-- Submit Verification -->
|
||||
<button type="submit" :disabled="loading || otpCode.length < 6"
|
||||
class="w-full py-3.5 px-4 bg-gradient-to-r from-saqel-gold to-amber-500 text-[#0B132B] font-extrabold rounded-xl hover:opacity-95 transition shadow-lg glow-gold flex items-center justify-center gap-2 disabled:opacity-50 text-sm">
|
||||
<template x-if="loading">
|
||||
<svg class="animate-spin h-5 w-5 text-[#0B132B]" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
|
||||
</button>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-between text-xs mt-5 pt-4 border-t border-saqel-border/50 text-slate-400">
|
||||
<button type="button" @click="authStep = 'phone'" class="hover:text-white transition">← تعديل الرقم</button>
|
||||
<template x-if="timer > 0">
|
||||
<span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
|
||||
</template>
|
||||
<template x-if="timer === 0">
|
||||
<button type="button" @click="sendOtp()" class="text-saqel-gold hover:underline font-bold">إعادة إرسال الرمز ↺</button>
|
||||
</template>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer Partner Notice -->
|
||||
<div class="mt-6 pt-4 border-t border-saqel-border/40 text-center text-[11px] text-slate-500">
|
||||
<span>حماية محتوى DRM كاملة + تقاسم أرباح 45%–50% شفاف ومؤتمت</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 2: TEACHER STUDIO WORKSPACE -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="isLoggedIn" class="w-full space-y-8">
|
||||
|
||||
<!-- Teacher Summary Header -->
|
||||
<div class="bg-gradient-to-r from-[#1C2541] to-[#222F55] border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-saqel-gold/10 border border-saqel-gold/30 text-saqel-gold text-xs font-bold mb-3">
|
||||
<span>استوديو المعلم المعتمد</span>
|
||||
</div>
|
||||
<h2 class="text-2xl sm:text-3xl font-black text-white" x-text="'أهلاً بك، ' + (teacherData.name || 'أستاذنا الفاضل') + ' 👨🏫'"></h2>
|
||||
<p class="text-sm text-slate-300 mt-1">إدارة دوراتك، إدراج كويزات الفيديو التفاعلية، ومتابعة نمو طلابك.</p>
|
||||
</div>
|
||||
|
||||
<!-- Teacher Earnings Summary -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-[#0B132B]/80 border border-saqel-border p-4 rounded-2xl text-center min-w-[130px]">
|
||||
<span class="text-xs text-slate-400 block font-bold">إجمالي الطلاب</span>
|
||||
<span class="text-2xl font-black text-saqel-cyan">1,240</span>
|
||||
</div>
|
||||
<div class="bg-[#0B132B]/80 border border-saqel-gold/40 p-4 rounded-2xl text-center min-w-[150px] glow-gold">
|
||||
<span class="text-xs text-slate-400 block font-bold">أرباحك المتراكمة</span>
|
||||
<span class="text-2xl font-black text-saqel-gold">19,530 د.أ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- In-Video Quiz Creator Tool (Coursera Engine) -->
|
||||
<div class="bg-[#1C2541] border border-saqel-border rounded-3xl p-6 sm:p-8 shadow-xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-black text-white">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
|
||||
<p class="text-xs text-slate-400 mt-1">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</p>
|
||||
</div>
|
||||
<span class="text-xs px-3 py-1 rounded-lg bg-saqel-cyan/10 text-saqel-cyan border border-saqel-cyan/30 font-bold">Bunny Stream Synced</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-[#0B132B] p-5 rounded-2xl border border-saqel-border">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">اختر الدورة والدرس</label>
|
||||
<select class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-white outline-none">
|
||||
<option>الرياضيات العلمي — الدرس 4: قواعد الاشتقاق الأساسية</option>
|
||||
<option>الرياضيات العلمي — الدرس 5: الاشتقاق الضمني</option>
|
||||
</select>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">توقيت ظهور الكويز (بالدقيقة والثانية)</label>
|
||||
<input type="text" value="08:30" class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-saqel-cyan font-mono outline-none">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">عقوبة الخطأ (الإرجاع العلاجي)</label>
|
||||
<select class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-4 py-2.5 text-xs text-white outline-none">
|
||||
<option>إرجاع الطالب 45 ثانية للخلف (مستحسن)</option>
|
||||
<option>إرجاع الطالب 60 ثانية للخلف</option>
|
||||
<option>إعادة مشاهدة المقطع بالكامل</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-300 mb-2">نص السؤال التفاعلي</label>
|
||||
<textarea rows="3" placeholder="اكتب السؤال الذي سيظهر أمام الطالب..." class="w-full bg-[#1C2541] border border-saqel-border rounded-xl p-3 text-xs text-white outline-none resize-none"></textarea>
|
||||
|
||||
<div class="mt-3 space-y-2">
|
||||
<input type="text" placeholder="الخيار الأول (الصحيح)" class="w-full bg-[#1C2541] border border-emerald-500/40 rounded-xl px-3 py-2 text-xs text-emerald-300 outline-none">
|
||||
<input type="text" placeholder="الخيار الثاني (الخاطئ)" class="w-full bg-[#1C2541] border border-saqel-border rounded-xl px-3 py-2 text-xs text-slate-300 outline-none">
|
||||
</div>
|
||||
|
||||
<button class="mt-4 w-full py-2.5 bg-saqel-gold text-[#0B132B] font-extrabold text-xs rounded-xl hover:opacity-90 transition shadow-lg glow-gold">
|
||||
حفظ الكويز داخل الفيديو ✓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-saqel-border/40 py-6 text-center text-xs text-slate-400 bg-[#0B132B]">
|
||||
<div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<span>منصة صَقِل التعليمية — نظام استوديو المعلمين © 2026</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/student" class="hover:text-saqel-gold transition">بوابة الطلاب</a>
|
||||
<span class="text-slate-700">•</span>
|
||||
<span class="text-emerald-400">حماية المحتوى مشفرة 🔒</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
HTML;
|
||||
|
||||
+35
-33
@@ -1,7 +1,7 @@
|
||||
<?php
|
||||
/**
|
||||
* Nabeh Application Bootstrap Loader
|
||||
* Handles PSR-4 Autoloading, security settings, and error handling.
|
||||
* Saqel Application Bootstrap Loader
|
||||
* Handles PSR-4 Autoloading, security settings, and strict error handling.
|
||||
*/
|
||||
|
||||
// Define absolute path to application root
|
||||
@@ -9,35 +9,32 @@ define('APP_ROOT', dirname(__DIR__));
|
||||
|
||||
// 1. PSR-4 Autoloader
|
||||
spl_autoload_register(function ($class) {
|
||||
// Namespace prefix
|
||||
$prefix = 'App\\';
|
||||
// Directory mapping for the prefix
|
||||
$base_dir = APP_ROOT . '/app/';
|
||||
|
||||
$len = strlen($prefix);
|
||||
if (strncmp($prefix, $class, $len) !== 0) {
|
||||
return; // Move to next registered autoloader
|
||||
return;
|
||||
}
|
||||
|
||||
$relative_class = substr($class, $len);
|
||||
$file = $base_dir . str_replace('\\', '/', $relative_class) . '.php';
|
||||
|
||||
if (file_exists($file)) {
|
||||
require $file;
|
||||
require_once $file;
|
||||
}
|
||||
});
|
||||
|
||||
// 2. Load Environment Variables
|
||||
// 2. Load Environment Variables (Checks local and production server locations)
|
||||
try {
|
||||
// Find the closest .env file path (supporting local development and CloudPanel server directories)
|
||||
$candidatePaths = [
|
||||
// APP_ROOT . '/.env',
|
||||
// APP_ROOT . '/../.env',
|
||||
// APP_ROOT . '/../../.env',
|
||||
// APP_ROOT . '/../../../.env',
|
||||
// APP_ROOT . '/../../../../.env',
|
||||
'/home/intaleqapp-saqel/.env'
|
||||
APP_ROOT . '/.env',
|
||||
APP_ROOT . '/../.env',
|
||||
APP_ROOT . '/docker/.env',
|
||||
'/home/intaleqapp-saqel/.env',
|
||||
'/home/saqel/.env',
|
||||
];
|
||||
|
||||
$env_file = null;
|
||||
foreach ($candidatePaths as $path) {
|
||||
if (file_exists($path)) {
|
||||
@@ -45,18 +42,18 @@ try {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if ($env_file) {
|
||||
\App\Core\Env::load($env_file);
|
||||
} else {
|
||||
throw new \RuntimeException("No .env file found in candidate paths");
|
||||
error_log("⚠️ [Env Warning] No .env file found in candidate paths. Expecting variables from server environment.");
|
||||
}
|
||||
} catch (\Exception $e) {
|
||||
// In production, log error; in development, print it
|
||||
error_log('Env Load Error: ' . $e->getMessage());
|
||||
}
|
||||
|
||||
// 3. Configure Error Reporting based on environment
|
||||
$isDebug = filter_var(getenv('APP_DEBUG') ?: true, FILTER_VALIDATE_BOOLEAN);
|
||||
$isDebug = filter_var(getenv('APP_DEBUG'), FILTER_VALIDATE_BOOLEAN);
|
||||
|
||||
if ($isDebug) {
|
||||
ini_set('display_errors', '1');
|
||||
@@ -67,31 +64,36 @@ if ($isDebug) {
|
||||
error_reporting(0);
|
||||
}
|
||||
|
||||
// 4. Global Uncaught Exception Handler
|
||||
// Catches any unhandled exception anywhere in the app and returns a clean JSON error
|
||||
// instead of leaking PHP stack traces to the browser.
|
||||
// 4. Global Uncaught Exception Handler (JSON for APIs / Clean HTML for web)
|
||||
set_exception_handler(function (\Throwable $e) {
|
||||
$isDebug = filter_var(getenv('APP_DEBUG') ?: true, FILTER_VALIDATE_BOOLEAN);
|
||||
$isDebug = filter_var(getenv('APP_DEBUG'), FILTER_VALIDATE_BOOLEAN);
|
||||
|
||||
error_log('[EXCEPTION] ' . get_class($e) . ': ' . $e->getMessage() . ' in ' . $e->getFile() . ':' . $e->getLine());
|
||||
|
||||
$isApi = str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/api');
|
||||
|
||||
if (!headers_sent()) {
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
http_response_code(500);
|
||||
if ($isApi) {
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
} else {
|
||||
header('Content-Type: text/html; charset=utf-8');
|
||||
}
|
||||
}
|
||||
|
||||
$body = ['error' => 'Internal Server Error'];
|
||||
|
||||
// In debug mode, expose details to the developer only
|
||||
if ($isDebug) {
|
||||
$body['debug'] = [
|
||||
'exception' => get_class($e),
|
||||
'message' => $e->getMessage(),
|
||||
'file' => $e->getFile(),
|
||||
'line' => $e->getLine(),
|
||||
if ($isApi) {
|
||||
$body = [
|
||||
'status' => 'error',
|
||||
'message' => $isDebug ? $e->getMessage() : 'حدث خطأ غير متوقع في الخادم',
|
||||
'debug' => $isDebug ? [
|
||||
'exception' => get_class($e),
|
||||
'file' => $e->getFile(),
|
||||
'line' => $e->getLine(),
|
||||
] : null
|
||||
];
|
||||
echo json_encode($body, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
|
||||
} else {
|
||||
echo "<!DOCTYPE html><html dir='rtl' lang='ar'><head><meta charset='UTF-8'><title>خطأ في الخادم</title><style>body{font-family:sans-serif;background:#0B132B;color:#fff;padding:40px;text-align:center;}</style></head><body><h2>⚠️ حدث خطأ في الخادم</h2><p>" . htmlspecialchars($e->getMessage()) . "</p></body></html>";
|
||||
}
|
||||
|
||||
echo json_encode($body, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
|
||||
exit(1);
|
||||
});
|
||||
|
||||
@@ -36,7 +36,7 @@ $router->get('/teacher', function ($request, $response) {
|
||||
$response->html(\App\Views\TeacherPortal::render());
|
||||
});
|
||||
|
||||
// Health Check
|
||||
// Health & Diagnostic Routes
|
||||
$router->get('/api/health', function ($request, $response) {
|
||||
$response->json([
|
||||
'status' => 'success',
|
||||
@@ -45,6 +45,8 @@ $router->get('/api/health', function ($request, $response) {
|
||||
'time' => date('Y-m-d H:i:s')
|
||||
]);
|
||||
});
|
||||
$router->get('/api/test/nabeh', [\App\Controllers\TestController::class, 'testNabeh']);
|
||||
$router->get('/api/test/system', [\App\Controllers\TestController::class, 'testSystem']);
|
||||
|
||||
// OTP Authentication Routes (WhatsApp via Nabeh Gateway + Device Fingerprinting)
|
||||
$router->post('/api/auth/otp/request', [\App\Controllers\AuthController::class, 'requestOtp'], [\App\Middlewares\RateLimitMiddleware::class]);
|
||||
|
||||
Reference in New Issue
Block a user