chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-27 10:05:33 +07:00
parent aceeb80d9a
commit ad11c6b7c5
44 changed files with 720 additions and 578 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Frontend-Learner/components/profile/PasswordChangeForm.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
/**
* @file PasswordChangeForm.vue
* @description From for changing user password
* @description ฟอร์มสำหรับเปลี่ยนรหัสผ่านของผู้ใช้ (From for changing user password)
*/
const props = defineProps<{
@ -130,7 +130,12 @@ const showConfirmPassword = ref(false);
<style scoped>
.card-premium {
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
background-color: white;
border-color: #e2e8f0;
}
:global(.dark) .card-premium {
background-color: #1e293b;
border-color: rgba(255, 255, 255, 0.05);
border-radius: 1.5rem;
border-width: 1px;
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);

15
Frontend-Learner/components/profile/ProfileEditForm.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
/**
* @file ProfileEditForm.vue
* @description From for editing user personal information
* @description ฟอร์มสำหรับแก้ไขข้อมูลส่วนตัวของผู้ใช้ (Form for editing user personal information)
*/
const props = defineProps<{
@ -93,14 +93,14 @@ const onPhoneKeydown = (e: KeyboardEvent) => {
<div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<q-icon name="camera_alt" class="text-white text-xl" />
</div>
<!-- Hidden Input -->
<!-- ช่องเลือกไฟล์ที่ถูกซ่อนไว้ (Hidden Input) -->
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
</div>
<div class="flex flex-col gap-2">
<div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
<!-- Buttons Row -->
<!-- แถวปุ่มกด (Buttons Row) -->
<div class="flex items-center gap-3">
<template v-if="modelValue.photoURL">
<q-btn
@ -124,7 +124,7 @@ const onPhoneKeydown = (e: KeyboardEvent) => {
</template>
</div>
<!-- Add Limit Text -->
<!-- ข้อความจำกัดขนาดไฟล์ (Add Limit Text) -->
<div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
{{ $t('profile.uploadLimit') }}
</div>
@ -248,7 +248,12 @@ const onPhoneKeydown = (e: KeyboardEvent) => {
<style scoped>
.card-premium {
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
background-color: white;
border-color: #e2e8f0;
}
:global(.dark) .card-premium {
background-color: #1e293b;
border-color: rgba(255, 255, 255, 0.05);
border-radius: 1.5rem;
border-width: 1px;
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);