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;
justify-content: space-between;
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%),
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);
@@ -98,10 +98,10 @@ class StudentPortal
display: flex;
align-items: center;
justify-content: center;
color: var(--bg-dark);
color: #0B132B;
font-size: 20px;
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 {
@@ -226,7 +226,7 @@ class StudentPortal
.input-text:focus {
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 {
@@ -270,23 +270,24 @@ class StudentPortal
display: block;
}
/* Buttons */
/* High Contrast Buttons */
.btn-primary {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark));
color: var(--bg-dark);
background: linear-gradient(135deg, #00F5D4 0%, #00BAA1 100%);
color: #0B132B !important;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 800;
font-weight: 900 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
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;
text-decoration: none;
}
.btn-primary:hover {
@@ -299,7 +300,7 @@ class StudentPortal
}
.btn-primary:disabled {
opacity: 0.5;
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
@@ -348,14 +349,14 @@ class StudentPortal
}
.alert-error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #FCA5A5;
}
.alert-success {
background: rgba(0, 245, 212, 0.12);
border: 1px solid rgba(0, 245, 212, 0.35);
background: rgba(0, 245, 212, 0.15);
border: 1px solid rgba(0, 245, 212, 0.4);
color: var(--accent-cyan);
}
@@ -521,7 +522,7 @@ class StudentPortal
width: 18px;
height: 18px;
border: 3px solid rgba(11, 19, 43, 0.3);
border-top-color: var(--bg-dark);
border-top-color: #0B132B;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@@ -778,7 +779,7 @@ class StudentPortal
</div>
</template>
<!-- STEP 1: Phone Number -->
<!-- STEP 1: Phone Number (Shown by default) -->
<div x-show="authStep === 'phone'">
<form @submit.prevent="sendOtp()">
<div class="form-group">
@@ -799,13 +800,13 @@ class StudentPortal
<template x-if="loading">
<div class="spinner"></div>
</template>
<span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'"></span>
<span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'">إرسال رمز التحقق (OTP) ←</span>
</button>
</form>
</div>
<!-- STEP 2: OTP Verification -->
<div x-show="authStep === 'otp'">
<!-- STEP 2: OTP Verification (Hidden initially via CSS) -->
<div x-show="authStep === 'otp'" style="display: none;">
<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-cyan); margin-top: 4px;" x-text="phoneDisplay"></div>
@@ -821,7 +822,7 @@ class StudentPortal
<template x-if="loading">
<div class="spinner"></div>
</template>
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'"></span>
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'">تأكيد الدخول للمنصة ✨</span>
</button>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
@@ -847,7 +848,7 @@ class StudentPortal
<!-- ========================================== -->
<!-- 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>
backend/app/Views/TeacherPortal.php
+25 -30
View File
@@ -31,7 +31,7 @@ class TeacherPortal
--text-secondary: #CBD5E1;
--text-muted: #8E9FB8;
--accent-gold: #FFD166;
--accent-gold-dark: #E5A91E;
--accent-gold-dark: #F59E0B;
--accent-cyan: #00F5D4;
--accent-red: #EF4444;
--accent-green: #10B981;
@@ -52,14 +52,13 @@ class TeacherPortal
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%),
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.05) 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;
@@ -99,10 +98,10 @@ class TeacherPortal
display: flex;
align-items: center;
justify-content: center;
color: var(--bg-dark);
color: #0B132B;
font-size: 20px;
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 {
@@ -227,14 +226,13 @@ class TeacherPortal
.input-text:focus {
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 {
color: #52607D;
}
/* Phone Input Group */
.phone-input-group {
display: flex;
align-items: center;
@@ -272,23 +270,24 @@ class TeacherPortal
display: block;
}
/* Buttons */
/* High Contrast Buttons */
.btn-primary {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
color: var(--bg-dark);
background: linear-gradient(135deg, #FFD166 0%, #F59E0B 100%);
color: #0B132B !important;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 800;
font-weight: 900 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
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;
text-decoration: none;
}
.btn-primary:hover {
@@ -301,7 +300,7 @@ class TeacherPortal
}
.btn-primary:disabled {
opacity: 0.5;
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
@@ -326,7 +325,6 @@ class TeacherPortal
text-decoration: underline;
}
/* OTP Input */
.otp-input {
text-align: center;
font-size: 26px;
@@ -351,18 +349,17 @@ class TeacherPortal
}
.alert-error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #FCA5A5;
}
.alert-success {
background: rgba(255, 209, 102, 0.12);
border: 1px solid rgba(255, 209, 102, 0.35);
background: rgba(255, 209, 102, 0.15);
border: 1px solid rgba(255, 209, 102, 0.4);
color: var(--accent-gold);
}
/* Card Footer */
.auth-footer {
margin-top: 24px;
padding-top: 16px;
@@ -462,12 +459,11 @@ class TeacherPortal
gap: 12px;
}
/* Spinner */
.spinner {
width: 18px;
height: 18px;
border: 3px solid rgba(11, 19, 43, 0.3);
border-top-color: var(--bg-dark);
border-top-color: #0B132B;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@@ -477,7 +473,7 @@ class TeacherPortal
}
</style>
<!-- 2. Alpine Component Initialization in Head -->
<!-- 2. Alpine Component Setup -->
<script>
function teacherAuth() {
return {
@@ -651,7 +647,6 @@ class TeacherPortal
};
}
</script>
<!-- 3. Deferred Alpine Loader -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body x-data="teacherAuth()" x-init="initApp()">
@@ -724,7 +719,7 @@ class TeacherPortal
</div>
</template>
<!-- STEP 1: Phone Number -->
<!-- STEP 1: Phone Number (Shown by default) -->
<div x-show="authStep === 'phone'">
<form @submit.prevent="sendOtp()">
<div class="form-group">
@@ -745,13 +740,13 @@ class TeacherPortal
<template x-if="loading">
<div class="spinner"></div>
</template>
<span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
<span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'">دخول استوديو المعلم (OTP) ←</span>
</button>
</form>
</div>
<!-- STEP 2: OTP Verification -->
<div x-show="authStep === 'otp'">
<!-- STEP 2: OTP Verification (Hidden initially via CSS until authStep === 'otp') -->
<div x-show="authStep === 'otp'" style="display: none;">
<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>
@@ -767,7 +762,7 @@ class TeacherPortal
<template x-if="loading">
<div class="spinner"></div>
</template>
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
<span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'">تأكيد الدخول للاستوديو 🎓</span>
</button>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
@@ -793,7 +788,7 @@ class TeacherPortal
<!-- ========================================== -->
<!-- 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>