ED:Change color/fix font
This commit is contained in:
parent
959a7e3f85
commit
1e7a183668
9 changed files with 31 additions and 30 deletions
|
|
@ -65,7 +65,7 @@ const saveProfile = () => {
|
|||
<div class="profile-page max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Header: Title and Edit action -->
|
||||
<div class="flex items-center justify-between mb-10">
|
||||
<h1 class="text-3xl font-black text-main">โปรไฟล์ของฉัน</h1>
|
||||
<h1 class="text-3xl font-black text-slate-900 dark:text-white">โปรไฟล์ของฉัน</h1>
|
||||
<div class="flex items-center gap-6">
|
||||
<button v-if="!isEditing" class="btn-premium-edit" @click="toggleEdit(true)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
|
|
@ -94,8 +94,8 @@ const saveProfile = () => {
|
|||
<div class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-[#1e293b]"/>
|
||||
</div>
|
||||
<div class="pb-2">
|
||||
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
|
||||
<p class="text-slate-700 dark:text-slate-400 font-bold uppercase tracking-widest text-[10px]">Student ID: STU-88293</p>
|
||||
<h2 class="text-3xl font-black text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
|
||||
<p class="text-slate-400 font-bold uppercase tracking-widest text-[10px]">Student ID: STU-88293</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ const saveProfile = () => {
|
|||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="text-2xl font-black text-slate-900 dark:text-white">แก้ไขข้อมูลส่วนตัว</h2>
|
||||
<h2 class="text-2xl font-black text-white">แก้ไขข้อมูลส่วนตัว</h2>
|
||||
</div>
|
||||
|
||||
<!-- Avatar Upload Section -->
|
||||
|
|
@ -148,7 +148,7 @@ const saveProfile = () => {
|
|||
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
|
||||
</div>
|
||||
<div class="text-center md:text-left">
|
||||
<h3 class="font-black text-slate-900 dark:text-white mb-2">รูปโปรไฟล์ของคุณ</h3>
|
||||
<h3 class="font-black text-white mb-2">รูปโปรไฟล์ของคุณ</h3>
|
||||
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">Recommended: Square image, max 2MB</p>
|
||||
<button class="btn-upload" @click="triggerUpload">อัปโหลดรูปใหม่</button>
|
||||
</div>
|
||||
|
|
@ -157,7 +157,7 @@ const saveProfile = () => {
|
|||
<!-- Form Inputs -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">คำนำหน้า</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">คำนำหน้า</label>
|
||||
<select v-model="userData.prefix" class="premium-input w-full">
|
||||
<option>นาย</option>
|
||||
<option>นาง</option>
|
||||
|
|
@ -166,38 +166,38 @@ const saveProfile = () => {
|
|||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">ชื่อ</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">ชื่อ</label>
|
||||
<input v-model="userData.firstName" type="text" class="premium-input w-full">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">นามสกุล</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">นามสกุล</label>
|
||||
<input v-model="userData.lastName" type="text" class="premium-input w-full">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">อีเมล</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">อีเมล</label>
|
||||
<input v-model="userData.email" type="email" class="premium-input w-full">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">เบอร์โทรศัพท์</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">เบอร์โทรศัพท์</label>
|
||||
<input v-model="userData.phone" type="text" class="premium-input w-full">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Section -->
|
||||
<div class="border-t border-white/5 pt-10 mb-10">
|
||||
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">ความปลอดภัย</h3>
|
||||
<h3 class="text-lg font-black text-white mb-6">ความปลอดภัย</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">รหัสผ่านปัจจุบัน</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">รหัสผ่านปัจจุบัน</label>
|
||||
<input type="password" class="premium-input w-full" placeholder="••••••••">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">รหัสผ่านใหม่</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">รหัสผ่านใหม่</label>
|
||||
<input type="password" class="premium-input w-full">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500">ยืนยันรหัสผ่านใหม่</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-400">ยืนยันรหัสผ่านใหม่</label>
|
||||
<input type="password" class="premium-input w-full">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -225,10 +225,10 @@ const saveProfile = () => {
|
|||
}
|
||||
|
||||
.info-group .label {
|
||||
@apply text-xs font-black uppercase tracking-widest text-slate-700 dark:text-slate-500 block mb-2;
|
||||
@apply text-xs font-black uppercase tracking-widest text-slate-400 block mb-2;
|
||||
}
|
||||
.info-group .value {
|
||||
@apply text-lg font-bold text-slate-900 dark:text-slate-200;
|
||||
@apply text-lg font-bold text-white;
|
||||
}
|
||||
|
||||
.premium-input {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue