Hamza/saqel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: High contrast bold button text and strict single-step rendering

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-26 22:55:45 +03:00
parent e800b5b057
commit b4a241bf62
2 changed files with 47 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/Views/StudentPortal.php
+22 -21
View File
@@ -52,7 +52,7 @@ class StudentPortal
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
background-image: background-image:
radial-gradient(circle at 15% 15%, rgba(0, 245, 212, 0.05) 0%, transparent 40%), radial-gradient(circle at 15% 15%, rgba(0, 245, 212, 0.06) 0%, transparent 40%),
radial-gradient(circle at 85% 85%, rgba(255, 209, 102, 0.04) 0%, transparent 40%), radial-gradient(circle at 85% 85%, rgba(255, 209, 102, 0.04) 0%, transparent 40%),
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), 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); linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
@@ -98,10 +98,10 @@ class StudentPortal
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--bg-dark); color: #0B132B;
font-size: 20px; font-size: 20px;
font-weight: 900; font-weight: 900;
box-shadow: 0 0 20px rgba(0, 245, 212, 0.3); box-shadow: 0 0 20px rgba(0, 245, 212, 0.35);
} }
.brand-title { .brand-title {
@@ -226,7 +226,7 @@ class StudentPortal
.input-text:focus { .input-text:focus {
border-color: var(--accent-cyan); border-color: var(--accent-cyan);
box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15); box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.2);
} }
.input-text::placeholder { .input-text::placeholder {
@@ -270,23 +270,24 @@ class StudentPortal
display: block; display: block;
} }
/* Buttons */ /* High Contrast Buttons */
.btn-primary { .btn-primary {
width: 100%; width: 100%;
padding: 14px; padding: 14px;
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); background: linear-gradient(135deg, #00F5D4 0%, #00BAA1 100%);
color: var(--bg-dark); color: #0B132B !important;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
font-size: 15px; font-size: 15px;
font-weight: 800; font-weight: 900 !important;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
box-shadow: 0 8px 20px rgba(0, 245, 212, 0.25); box-shadow: 0 8px 24px rgba(0, 245, 212, 0.35);
transition: transform 0.15s, opacity 0.15s; transition: transform 0.15s, opacity 0.15s;
text-decoration: none;
} }
.btn-primary:hover { .btn-primary:hover {
@@ -299,7 +300,7 @@ class StudentPortal
} }
.btn-primary:disabled { .btn-primary:disabled {
opacity: 0.5; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
} }
@@ -348,14 +349,14 @@ class StudentPortal
} }
.alert-error { .alert-error {
background: rgba(239, 68, 68, 0.12); background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.35); border: 1px solid rgba(239, 68, 68, 0.4);
color: #FCA5A5; color: #FCA5A5;
} }
.alert-success { .alert-success {
background: rgba(0, 245, 212, 0.12); background: rgba(0, 245, 212, 0.15);
border: 1px solid rgba(0, 245, 212, 0.35); border: 1px solid rgba(0, 245, 212, 0.4);
color: var(--accent-cyan); color: var(--accent-cyan);
} }
@@ -521,7 +522,7 @@ class StudentPortal
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 3px solid rgba(11, 19, 43, 0.3); border: 3px solid rgba(11, 19, 43, 0.3);
border-top-color: var(--bg-dark); border-top-color: #0B132B;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
} }
@@ -778,7 +779,7 @@ class StudentPortal
</div> </div>
</template> </template>
<!-- STEP 1: Phone Number --> <!-- STEP 1: Phone Number (Shown by default) -->
<div x-show="authStep === 'phone'"> <div x-show="authStep === 'phone'">
<form @submit.prevent="sendOtp()"> <form @submit.prevent="sendOtp()">
<div class="form-group"> <div class="form-group">
@@ -799,13 +800,13 @@ class StudentPortal
<template x-if="loading"> <template x-if="loading">
<div class="spinner"></div> <div class="spinner"></div>
</template> </template>
<span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'"></span> <span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'">إرسال رمز التحقق (OTP) ←</span>
</button> </button>
</form> </form>
</div> </div>
<!-- STEP 2: OTP Verification --> <!-- STEP 2: OTP Verification (Hidden initially via CSS) -->
<div x-show="authStep === 'otp'"> <div x-show="authStep === 'otp'" style="display: none;">
<div style="text-align: center; margin-bottom: 20px;"> <div style="text-align: center; margin-bottom: 20px;">
<span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span> <span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span>
<div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-cyan); margin-top: 4px;" x-text="phoneDisplay"></div> <div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-cyan); margin-top: 4px;" x-text="phoneDisplay"></div>
@@ -821,7 +822,7 @@ class StudentPortal
<template x-if="loading"> <template x-if="loading">
<div class="spinner"></div> <div class="spinner"></div>
</template> </template>
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'"></span> <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'">تأكيد الدخول للمنصة ✨</span>
</button> </button>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;"> <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
@@ -847,7 +848,7 @@ class StudentPortal
<!-- ========================================== --> <!-- ========================================== -->
<!-- 2. STUDENT DASHBOARD (AUTHENTICATED) --> <!-- 2. STUDENT DASHBOARD (AUTHENTICATED) -->
<!-- ========================================== --> <!-- ========================================== -->
<div x-show="isLoggedIn" style="width: 100%;"> <div x-show="isLoggedIn" style="width: 100%; display: none;">
<div class="dashboard-hero"> <div class="dashboard-hero">
<div> <div>
backend/app/Views/TeacherPortal.php
+25 -30
View File
@@ -31,7 +31,7 @@ class TeacherPortal
--text-secondary: #CBD5E1; --text-secondary: #CBD5E1;
--text-muted: #8E9FB8; --text-muted: #8E9FB8;
--accent-gold: #FFD166; --accent-gold: #FFD166;
--accent-gold-dark: #E5A91E; --accent-gold-dark: #F59E0B;
--accent-cyan: #00F5D4; --accent-cyan: #00F5D4;
--accent-red: #EF4444; --accent-red: #EF4444;
--accent-green: #10B981; --accent-green: #10B981;
@@ -52,14 +52,13 @@ class TeacherPortal
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
background-image: background-image:
radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.06) 0%, transparent 40%), radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.07) 0%, transparent 40%),
radial-gradient(circle at 85% 85%, rgba(0, 245, 212, 0.04) 0%, transparent 40%), radial-gradient(circle at 85% 85%, rgba(0, 245, 212, 0.05) 0%, transparent 40%),
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), 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); linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px; background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
} }
/* Layout & Container */
.container { .container {
max-width: 1140px; max-width: 1140px;
margin: 0 auto; margin: 0 auto;
@@ -99,10 +98,10 @@ class TeacherPortal
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--bg-dark); color: #0B132B;
font-size: 20px; font-size: 20px;
font-weight: 900; font-weight: 900;
box-shadow: 0 0 20px rgba(255, 209, 102, 0.3); box-shadow: 0 0 20px rgba(255, 209, 102, 0.35);
} }
.brand-title { .brand-title {
@@ -227,14 +226,13 @@ class TeacherPortal
.input-text:focus { .input-text:focus {
border-color: var(--accent-gold); border-color: var(--accent-gold);
box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.15); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.2);
} }
.input-text::placeholder { .input-text::placeholder {
color: #52607D; color: #52607D;
} }
/* Phone Input Group */
.phone-input-group { .phone-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -272,23 +270,24 @@ class TeacherPortal
display: block; display: block;
} }
/* Buttons */ /* High Contrast Buttons */
.btn-primary { .btn-primary {
width: 100%; width: 100%;
padding: 14px; padding: 14px;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark)); background: linear-gradient(135deg, #FFD166 0%, #F59E0B 100%);
color: var(--bg-dark); color: #0B132B !important;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
font-size: 15px; font-size: 15px;
font-weight: 800; font-weight: 900 !important;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
box-shadow: 0 8px 20px rgba(255, 209, 102, 0.25); box-shadow: 0 8px 24px rgba(255, 209, 102, 0.35);
transition: transform 0.15s, opacity 0.15s; transition: transform 0.15s, opacity 0.15s;
text-decoration: none;
} }
.btn-primary:hover { .btn-primary:hover {
@@ -301,7 +300,7 @@ class TeacherPortal
} }
.btn-primary:disabled { .btn-primary:disabled {
opacity: 0.5; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
} }
@@ -326,7 +325,6 @@ class TeacherPortal
text-decoration: underline; text-decoration: underline;
} }
/* OTP Input */
.otp-input { .otp-input {
text-align: center; text-align: center;
font-size: 26px; font-size: 26px;
@@ -351,18 +349,17 @@ class TeacherPortal
} }
.alert-error { .alert-error {
background: rgba(239, 68, 68, 0.12); background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.35); border: 1px solid rgba(239, 68, 68, 0.4);
color: #FCA5A5; color: #FCA5A5;
} }
.alert-success { .alert-success {
background: rgba(255, 209, 102, 0.12); background: rgba(255, 209, 102, 0.15);
border: 1px solid rgba(255, 209, 102, 0.35); border: 1px solid rgba(255, 209, 102, 0.4);
color: var(--accent-gold); color: var(--accent-gold);
} }
/* Card Footer */
.auth-footer { .auth-footer {
margin-top: 24px; margin-top: 24px;
padding-top: 16px; padding-top: 16px;
@@ -462,12 +459,11 @@ class TeacherPortal
gap: 12px; gap: 12px;
} }
/* Spinner */
.spinner { .spinner {
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 3px solid rgba(11, 19, 43, 0.3); border: 3px solid rgba(11, 19, 43, 0.3);
border-top-color: var(--bg-dark); border-top-color: #0B132B;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
} }
@@ -477,7 +473,7 @@ class TeacherPortal
} }
</style> </style>
<!-- 2. Alpine Component Initialization in Head --> <!-- 2. Alpine Component Setup -->
<script> <script>
function teacherAuth() { function teacherAuth() {
return { return {
@@ -651,7 +647,6 @@ class TeacherPortal
}; };
} }
</script> </script>
<!-- 3. Deferred Alpine Loader -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head> </head>
<body x-data="teacherAuth()" x-init="initApp()"> <body x-data="teacherAuth()" x-init="initApp()">
@@ -724,7 +719,7 @@ class TeacherPortal
</div> </div>
</template> </template>
<!-- STEP 1: Phone Number --> <!-- STEP 1: Phone Number (Shown by default) -->
<div x-show="authStep === 'phone'"> <div x-show="authStep === 'phone'">
<form @submit.prevent="sendOtp()"> <form @submit.prevent="sendOtp()">
<div class="form-group"> <div class="form-group">
@@ -745,13 +740,13 @@ class TeacherPortal
<template x-if="loading"> <template x-if="loading">
<div class="spinner"></div> <div class="spinner"></div>
</template> </template>
<span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span> <span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'">دخول استوديو المعلم (OTP) ←</span>
</button> </button>
</form> </form>
</div> </div>
<!-- STEP 2: OTP Verification --> <!-- STEP 2: OTP Verification (Hidden initially via CSS until authStep === 'otp') -->
<div x-show="authStep === 'otp'"> <div x-show="authStep === 'otp'" style="display: none;">
<div style="text-align: center; margin-bottom: 20px;"> <div style="text-align: center; margin-bottom: 20px;">
<span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span> <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 style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-gold); margin-top: 4px;" x-text="phoneDisplay"></div>
@@ -767,7 +762,7 @@ class TeacherPortal
<template x-if="loading"> <template x-if="loading">
<div class="spinner"></div> <div class="spinner"></div>
</template> </template>
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span> <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'">تأكيد الدخول للاستوديو 🎓</span>
</button> </button>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;"> <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
@@ -793,7 +788,7 @@ class TeacherPortal
<!-- ========================================== --> <!-- ========================================== -->
<!-- 2. TEACHER DASHBOARD (AUTHENTICATED) --> <!-- 2. TEACHER DASHBOARD (AUTHENTICATED) -->
<!-- ========================================== --> <!-- ========================================== -->
<div x-show="isLoggedIn" style="width: 100%;"> <div x-show="isLoggedIn" style="width: 100%; display: none;">
<div class="dashboard-hero"> <div class="dashboard-hero">
<div> <div>