fix: Embedded luxury self-contained CSS (zero CDN failure) + Redis password graceful auth
This commit is contained in:
Hamza-Ayed
@@ -4,7 +4,7 @@ namespace App\Core;
|
||||
|
||||
/**
|
||||
* Core Redis Client for managing connections.
|
||||
* Strict environment variable enforcement (No default fallbacks).
|
||||
* Handles Sessions, Rate Limiting, OTP, and Caching.
|
||||
*/
|
||||
class RedisClient
|
||||
{
|
||||
@@ -18,7 +18,7 @@ class RedisClient
|
||||
if (self::$instance === null) {
|
||||
$host = getenv('REDIS_HOST');
|
||||
$port = getenv('REDIS_PORT');
|
||||
$password = getenv('REDIS_PASSWORD') ?: null;
|
||||
$password = getenv('REDIS_PASSWORD');
|
||||
|
||||
$missing = [];
|
||||
if ($host === false || $host === '') $missing[] = 'REDIS_HOST';
|
||||
@@ -36,10 +36,19 @@ class RedisClient
|
||||
throw new \RuntimeException("Could not connect to Redis server at {$host}:{$port}");
|
||||
}
|
||||
|
||||
// Authenticate if password is provided
|
||||
if ($password) {
|
||||
// Authenticate ONLY if a non-empty password is provided in environment
|
||||
if (!empty($password)) {
|
||||
try {
|
||||
if (!$redis->auth($password)) {
|
||||
throw new \RuntimeException("Redis authentication failed for host {$host}:{$port}.");
|
||||
throw new \RuntimeException("Redis authentication failed with provided REDIS_PASSWORD.");
|
||||
}
|
||||
} catch (\RedisException $authEx) {
|
||||
// If server does not have a password configured, catch and report clearly
|
||||
if (str_contains($authEx->getMessage(), 'no password is set') || str_contains($authEx->getMessage(), 'without any password')) {
|
||||
error_log("⚠️ [Redis Notice] REDIS_PASSWORD was provided in .env, but Redis server on {$host}:{$port} is configured without password.");
|
||||
} else {
|
||||
throw $authEx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+646
-222
File diff suppressed because it is too large
Load Diff
+576
-172
@@ -17,31 +17,467 @@ class TeacherPortal
|
||||
<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 -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
saqel: {
|
||||
dark: '#0B132B',
|
||||
card: '#1C2541',
|
||||
cardHover: '#222F55',
|
||||
cyan: '#00F5D4',
|
||||
gold: '#FFD166',
|
||||
border: '#2E3D66',
|
||||
textMuted: '#94A3B8'
|
||||
|
||||
<!-- 1. Pure Self-Contained Luxury CSS (Zero External CDN Failure Risk) -->
|
||||
<style>
|
||||
:root {
|
||||
--bg-dark: #0B132B;
|
||||
--bg-card: #16203D;
|
||||
--bg-card-hover: #1E2C52;
|
||||
--bg-input: #090E20;
|
||||
--border: #2A3B66;
|
||||
--border-focus: #FFD166;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #CBD5E1;
|
||||
--text-muted: #8E9FB8;
|
||||
--accent-gold: #FFD166;
|
||||
--accent-gold-dark: #E5A91E;
|
||||
--accent-cyan: #00F5D4;
|
||||
--accent-red: #EF4444;
|
||||
--accent-green: #10B981;
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
cairo: ['Cairo', 'sans-serif'],
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Cairo', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.06) 0%, transparent 40%),
|
||||
radial-gradient(circle at 85% 85%, rgba(0, 245, 212, 0.04) 0%, transparent 40%),
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
|
||||
}
|
||||
|
||||
/* Layout & Container */
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: rgba(11, 19, 43, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
</script>
|
||||
<!-- 1. Define Alpine Data Component BEFORE Alpine Loads -->
|
||||
|
||||
.header-content {
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-badge {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--bg-dark);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 0 20px rgba(255, 209, 102, 0.3);
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.portal-pill {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 209, 102, 0.12);
|
||||
color: var(--accent-gold);
|
||||
border: 1px solid rgba(255, 209, 102, 0.35);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.nav-link-highlight {
|
||||
color: var(--accent-cyan);
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
/* Auth Card */
|
||||
.auth-card-wrapper {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 18px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(255, 209, 102, 0.4);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent-gold);
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Forms & Inputs */
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
width: 100%;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.input-text:focus {
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.15);
|
||||
}
|
||||
|
||||
.input-text::placeholder {
|
||||
color: #52607D;
|
||||
}
|
||||
|
||||
/* Phone Input Group */
|
||||
.phone-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
direction: ltr;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.country-badge {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
background: #121A33;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-gold);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.input-phone {
|
||||
padding-left: 96px !important;
|
||||
font-family: monospace;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
|
||||
color: var(--bg-dark);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 8px 20px rgba(255, 209, 102, 0.25);
|
||||
transition: transform 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.95;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 6px 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btn-link-gold {
|
||||
color: var(--accent-gold);
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* OTP Input */
|
||||
.otp-input {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-family: monospace;
|
||||
letter-spacing: 10px;
|
||||
font-weight: 900;
|
||||
color: var(--accent-gold);
|
||||
border-color: rgba(255, 209, 102, 0.5);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
font-size: 12.5px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border: 1px solid rgba(239, 68, 68, 0.35);
|
||||
color: #FCA5A5;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: rgba(255, 209, 102, 0.12);
|
||||
border: 1px solid rgba(255, 209, 102, 0.35);
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* Card Footer */
|
||||
.auth-footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-align: center;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Dashboard Styles */
|
||||
.dashboard-hero {
|
||||
background: linear-gradient(135deg, var(--bg-card), var(--bg-card-hover));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(11, 19, 43, 0.85);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 16px 24px;
|
||||
text-align: center;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.stat-card.gold-glow {
|
||||
border-color: rgba(255, 209, 102, 0.5);
|
||||
box-shadow: 0 0 20px rgba(255, 209, 102, 0.15);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.val-cyan { color: var(--accent-cyan); }
|
||||
.val-gold { color: var(--accent-gold); }
|
||||
|
||||
.studio-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
background: rgba(11, 19, 43, 0.8);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.dashboard-hero { padding: 24px; }
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 24px 0;
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
.spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 3px solid rgba(11, 19, 43, 0.3);
|
||||
border-top-color: var(--bg-dark);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 2. Alpine Component Initialization in Head -->
|
||||
<script>
|
||||
function teacherAuth() {
|
||||
return {
|
||||
@@ -67,7 +503,7 @@ class TeacherPortal
|
||||
await this.fetchProfile(token);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Teacher Init error:', e);
|
||||
console.error('Teacher App init error:', e);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -75,7 +511,6 @@ class TeacherPortal
|
||||
try {
|
||||
const raw = [
|
||||
navigator.userAgent,
|
||||
navigator.language,
|
||||
screen.width + 'x' + screen.height,
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
].join('###');
|
||||
@@ -118,10 +553,10 @@ class TeacherPortal
|
||||
}
|
||||
this.startTimer(60);
|
||||
} else {
|
||||
this.errorMessage = data.message || 'فشل إرسال رمز التحقق';
|
||||
this.errorMessage = data.message || 'فشل إرسال رمز التحقق. يرجى مراجعة إعدادات NABEH في السيرفر.';
|
||||
}
|
||||
} catch (e) {
|
||||
this.errorMessage = 'حدث خطأ في الاتصال بالخادم. تأكد من تفعيل السيرفر.';
|
||||
this.errorMessage = 'حدث خطأ في الاتصال بالخادم. يرجى فحص /api/test/nabeh';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
@@ -155,10 +590,10 @@ class TeacherPortal
|
||||
this.isLoggedIn = true;
|
||||
this.successMessage = 'تم تسجيل الدخول بنجاح!';
|
||||
} else {
|
||||
this.errorMessage = data.message || 'رمز التحقق غير صحيح أو غير مصرح للدخول كمعلم';
|
||||
this.errorMessage = data.message || 'رمز التحقق غير صحيح أو غير مصرح للمعلم';
|
||||
}
|
||||
} catch (e) {
|
||||
this.errorMessage = 'حدث خطأ في التحقق من الرمز';
|
||||
this.errorMessage = 'حدث خطأ أثناء التحقق من الرمز';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
@@ -216,230 +651,196 @@ class TeacherPortal
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<!-- Alpine.js Core Script (Deferred) -->
|
||||
<!-- 3. Deferred Alpine Loader -->
|
||||
<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()">
|
||||
<body 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>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<a href="/teacher" class="logo-area">
|
||||
<div class="logo-badge">صـ</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>
|
||||
<span class="brand-title">صَقِل</span>
|
||||
<span class="portal-pill">استوديو المعلمين</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Header Right Controls -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
<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">
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<span style="font-size: 13px; color: var(--text-secondary);" x-text="'أهلاً، ' + (teacherData.name || 'أستاذنا')"></span>
|
||||
<button @click="logout()" style="background: none; border: 1px solid rgba(239,68,68,0.4); color: #F87171; border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer;">
|
||||
تسجيل الخروج
|
||||
</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">
|
||||
<a href="/student" class="nav-link">
|
||||
<span>أنت طالب؟</span>
|
||||
<span class="text-saqel-cyan font-bold underline">بوابة الطلاب ←</span>
|
||||
<span class="nav-link-highlight">بوابة الطلاب ←</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</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">
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<div class="container">
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 1: TEACHER AUTHENTICATION FLOW -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="!isLoggedIn" class="w-full max-w-md">
|
||||
<!-- ========================================== -->
|
||||
<!-- 1. AUTHENTICATION BOX (LOGIN / OTP) -->
|
||||
<!-- ========================================== -->
|
||||
<div x-show="!isLoggedIn" class="auth-card-wrapper">
|
||||
|
||||
<!-- 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">
|
||||
<div class="auth-header">
|
||||
<div class="icon-box">
|
||||
<svg width="28" height="28" 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>
|
||||
<h1 class="auth-title">استوديو صَقِل للمعلمين</h1>
|
||||
<p class="auth-subtitle">حماية محتواك بـ DRM وأرباح متنامية بنظام الشراكة التفاعلية</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Box -->
|
||||
<div class="bg-[#1C2541] border border-saqel-border rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
|
||||
<div class="auth-box">
|
||||
|
||||
<!-- 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 -->
|
||||
<!-- Alerts -->
|
||||
<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>
|
||||
<div class="alert alert-error">
|
||||
<span>⚠️</span>
|
||||
<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>
|
||||
<div class="alert alert-success">
|
||||
<span>✓</span>
|
||||
<span x-text="successMessage"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- STEP 1: PHONE NUMBER INPUT -->
|
||||
<!-- STEP 1: Phone Number -->
|
||||
<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 class="form-group">
|
||||
<label class="form-label">اسم الأستاذ / المعلم</label>
|
||||
<input type="text" x-model="fullName" placeholder="مثال: الأستاذ حمزة النجار" class="input-text">
|
||||
</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 class="form-group">
|
||||
<label class="form-label">رقم الهاتف (الواتساب) <span style="color: #EF4444;">*</span></label>
|
||||
<div class="phone-input-group">
|
||||
<div class="country-badge">🇯🇴 +962</div>
|
||||
<input type="tel" x-model="phone" required placeholder="790000000" class="input-text input-phone">
|
||||
</div>
|
||||
<span class="text-[11px] text-slate-400 block mt-1.5">يُشترط رقم مسجل ومعتمد لدى إدارة المنصة.</span>
|
||||
<span class="form-hint">يصلك رمز التحقق مباشرة على الواتساب المعتمد.</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">
|
||||
<button type="submit" :disabled="loading" class="btn-primary">
|
||||
<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>
|
||||
<div class="spinner"></div>
|
||||
</template>
|
||||
<span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- STEP 2: OTP VERIFICATION -->
|
||||
<!-- 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 style="text-align: center; margin-bottom: 20px;">
|
||||
<span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span>
|
||||
<div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-gold); margin-top: 4px;" 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 class="form-group">
|
||||
<label class="form-label" style="text-align: center;">أدخل رمز التحقق (6 أرقام)</label>
|
||||
<input type="text" x-model="otpCode" maxlength="6" autofocus placeholder="• • • • • •" class="input-text otp-input">
|
||||
</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">
|
||||
<button type="submit" :disabled="loading || otpCode.length < 6" class="btn-primary">
|
||||
<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>
|
||||
<div class="spinner"></div>
|
||||
</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>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
|
||||
<button type="button" @click="authStep = 'phone'" class="btn-secondary">← تعديل الرقم</button>
|
||||
<template x-if="timer > 0">
|
||||
<span class="text-slate-500" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
|
||||
<span style="font-size: 12px; color: var(--text-muted);" x-text="'إعادة الإرسال بعد (' + timer + 'ث)'"></span>
|
||||
</template>
|
||||
<template x-if="timer === 0">
|
||||
<button type="button" @click="sendOtp()" class="text-saqel-gold hover:underline font-bold">إعادة إرسال الرمز ↺</button>
|
||||
<button type="button" @click="sendOtp()" class="btn-secondary btn-link-gold">إعادة إرسال الرمز ↺</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">
|
||||
<div class="auth-footer">
|
||||
<span>حماية محتوى DRM كاملة + تقاسم أرباح 45%–50% شفاف ومؤتمت</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- VIEW 2: TEACHER STUDIO WORKSPACE -->
|
||||
<!-- ============================================================= -->
|
||||
<div x-show="isLoggedIn" class="w-full space-y-8">
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<!-- ========================================== -->
|
||||
<!-- 2. TEACHER DASHBOARD (AUTHENTICATED) -->
|
||||
<!-- ========================================== -->
|
||||
<div x-show="isLoggedIn" style="width: 100%;">
|
||||
|
||||
<div class="dashboard-hero">
|
||||
<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>
|
||||
<span style="display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent-gold); background: rgba(255,209,102,0.12); border: 1px solid rgba(255,209,102,0.3); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;">استوديو المعلم المعتمد</span>
|
||||
<h2 style="font-size: 26px; font-weight: 900; color: #FFFFFF;" x-text="'أهلاً بك، ' + (teacherData.name || 'أستاذنا الفاضل') + ' 👨🏫'"></h2>
|
||||
<p style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">إدارة دوراتك، إدراج كويزات الفيديو التفاعلية، ومتابعة نمو طلابك.</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 class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">إجمالي الطلاب</span>
|
||||
<span class="stat-val val-cyan">1,240</span>
|
||||
</div>
|
||||
<div class="stat-card gold-glow">
|
||||
<span class="stat-label">أرباحك المتراكمة</span>
|
||||
<span class="stat-val val-gold">19,530 د.أ</span>
|
||||
</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 class="studio-card">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
|
||||
<div>
|
||||
<h3 class="text-lg font-black text-white">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
|
||||
<p class="text-xs text-slate-400 mt-1">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</p>
|
||||
<h3 style="font-size: 18px; font-weight: 900;">إضافة كويز تفاعلي داخل الفيديو 🎬</h3>
|
||||
<p style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">حدد الثانية الزمنية في الفيديو التي سيتوقف عندها الشرح لفحص فهم الطالب.</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>
|
||||
<span style="font-size: 11px; font-weight: 700; background: rgba(0,245,212,0.1); border: 1px solid rgba(0,245,212,0.3); color: var(--accent-cyan); padding: 4px 12px; border-radius: 8px;">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 class="grid-2">
|
||||
<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">
|
||||
<div class="form-group">
|
||||
<label class="form-label">اختر الدورة والدرس</label>
|
||||
<select class="input-text">
|
||||
<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">
|
||||
<div class="form-group">
|
||||
<label class="form-label">توقيت ظهور الكويز (بالدقيقة والثانية)</label>
|
||||
<input type="text" value="08:30" class="input-text" style="color: var(--accent-cyan); font-family: monospace;">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">عقوبة الخطأ (الإرجاع العلاجي)</label>
|
||||
<select class="input-text">
|
||||
<option>إرجاع الطالب 45 ثانية للخلف (مستحسن)</option>
|
||||
<option>إرجاع الطالب 60 ثانية للخلف</option>
|
||||
<option>إعادة مشاهدة المقطع بالكامل</option>
|
||||
@@ -448,36 +849,39 @@ class TeacherPortal
|
||||
</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 class="form-group">
|
||||
<label class="form-label">نص السؤال التفاعلي</label>
|
||||
<textarea rows="3" placeholder="اكتب السؤال الذي سيظهر أمام الطالب..." class="input-text" style="resize: none; height: 80px;"></textarea>
|
||||
</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 class="form-group">
|
||||
<input type="text" placeholder="الخيار الأول (الصحيح)" class="input-text" style="margin-bottom: 8px; border-color: rgba(16,185,129,0.4); color: #6EE7B7;">
|
||||
<input type="text" placeholder="الخيار الثاني (الخاطئ)" class="input-text">
|
||||
</div>
|
||||
|
||||
<button class="btn-primary" style="padding: 10px;">حفظ الكويز داخل الفيديو ✓</button>
|
||||
</div>
|
||||
</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">
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<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 style="display: flex; gap: 16px;">
|
||||
<a href="/student" class="nav-link">بوابة الطلاب</a>
|
||||
<span style="color: var(--accent-cyan);">الخادم متصل ومشفر 🔒</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
HTML;
|
||||
|
||||
Reference in New Issue
Block a user