fix: High contrast bold button text and strict single-step rendering
This commit is contained in:
Hamza-Ayed
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user