Website Structure
This commit is contained in:
supalerk-ar66
parent
62812f2090
commit
71f0676a62
22365 changed files with 4265753 additions and 791 deletions
100
Frontend-Learner/pages/auth/forgot-password.vue
Normal file
100
Frontend-Learner/pages/auth/forgot-password.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file forgot-password.vue
|
||||
* @description Forgot Password Page.
|
||||
* Allows users to request a password reset link via email.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'ลืมรหัสผ่าน - e-Learning'
|
||||
})
|
||||
|
||||
const { errors, validate, clearFieldError } = useFormValidation()
|
||||
|
||||
const isLoading = ref(false)
|
||||
// State to track if the request email has been sent
|
||||
const forgotStep = ref<'initial' | 'success'>('initial')
|
||||
|
||||
const forgotForm = reactive({
|
||||
email: ''
|
||||
})
|
||||
|
||||
const forgotRules = {
|
||||
email: { rules: { required: true, email: true }, label: 'อีเมล' }
|
||||
}
|
||||
|
||||
const sendResetLink = async () => {
|
||||
if (!validate(forgotForm, forgotRules)) return
|
||||
|
||||
isLoading.value = true
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
isLoading.value = false
|
||||
forgotStep.value = 'success'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="width: 100%; max-width: 440px;">
|
||||
<!-- Loading Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
|
||||
<!-- Logo area -->
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div
|
||||
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
||||
>
|
||||
E
|
||||
</div>
|
||||
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
||||
<p class="text-slate-700 dark:text-slate-400 text-sm">รีเซ็ตรหัณผ่านของคุณ</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div>
|
||||
<!-- Step 1: Request Email Form -->
|
||||
<form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink">
|
||||
<p class="text-slate-700 dark:text-slate-400 text-sm mb-6">กรุณากรอกอีเมลเพื่อรับลิงก์รีเซ็ตรหัณผ่าน</p>
|
||||
<FormInput
|
||||
v-model="forgotForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="clearFieldError('email')"
|
||||
/>
|
||||
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>ส่งลิงก์รีเซ็ต</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Step 2: Success Message -->
|
||||
<div v-else style="text-align: center;">
|
||||
<div style="font-size: 40px; margin-bottom: 16px;">📧</div>
|
||||
<h3 class="font-bold mb-2">ส่งลิงก์เรียบร้อยแล้ว</h3>
|
||||
<p class="text-sm text-muted mb-6">กรุณาตรวจสอบกล่องจดหมายในอีเมลของคุณเพื่อดำเนินการรีเซ็ตรหัสผ่าน</p>
|
||||
<!-- Simulation: redirect to reset-password for demo -->
|
||||
<NuxtLink to="/reset-password" class="btn btn-primary w-full mb-4">จำลองการคลิกลิงก์ (เพื่อการสาธิต)</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="text-center mt-6">
|
||||
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-500 hover:text-slate-800 transition-colors">
|
||||
← กลับไปหน้าเข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
</style>
|
||||
145
Frontend-Learner/pages/auth/login.vue
Normal file
145
Frontend-Learner/pages/auth/login.vue
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file login.vue
|
||||
* @description Login Page.
|
||||
* Handles user authentication with email/password and social login (mock).
|
||||
* Uses the 'auth' layout.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'auth',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'เข้าสู่ระบบ - e-Learning'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const { login } = useAuth()
|
||||
const { errors, validate, clearFieldError } = useFormValidation()
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
// Form data model
|
||||
const loginForm = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
// Validation rules definition
|
||||
const loginRules = {
|
||||
email: { rules: { required: true, email: true }, label: 'อีเมล' },
|
||||
password: { rules: { required: true, minLength: 6 }, label: 'รหัสผ่าน' }
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates form and attempts login.
|
||||
* Currently simulates an API call for demonstration.
|
||||
*/
|
||||
const handleLogin = async () => {
|
||||
if (!validate(loginForm, loginRules)) return
|
||||
|
||||
isLoading.value = true
|
||||
// Simulate API call delay
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
|
||||
// Demo credential check
|
||||
if (loginForm.email === 'student@example.com' && loginForm.password === '123456') {
|
||||
login() // Set token via auth composable
|
||||
isLoading.value = false
|
||||
router.push('/dashboard')
|
||||
} else {
|
||||
isLoading.value = false
|
||||
alert('อีเมลหรือรหัสผ่านไม่ถูกต้อง! (Demo: student@example.com / 123456)')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="width: 100%; max-width: 440px;">
|
||||
<!-- Loading Screen Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
|
||||
<!-- Header / Logo Section -->
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div
|
||||
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
||||
>
|
||||
E
|
||||
</div>
|
||||
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
||||
<p class="text-muted text-sm">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form @submit.prevent="handleLogin">
|
||||
<!-- Email Input -->
|
||||
<FormInput
|
||||
v-model="loginForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="clearFieldError('email')"
|
||||
/>
|
||||
<!-- Password Input -->
|
||||
<FormInput
|
||||
v-model="loginForm.password"
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:error="errors.password"
|
||||
required
|
||||
@update:model-value="clearFieldError('password')"
|
||||
/>
|
||||
|
||||
<!-- Helpers: Remember Me & Forgot Password -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<label class="flex items-center gap-2 text-sm text-muted">
|
||||
<input type="checkbox"> จดจำฉัน
|
||||
</label>
|
||||
<NuxtLink to="/auth/forgot-password" class="text-sm" style="color: var(--primary); font-weight: 500;">ลืมรหัสผ่าน?</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>เข้าสู่ระบบ</span>
|
||||
</button>
|
||||
|
||||
<!-- Demo Credentials Hint (For Development Only) -->
|
||||
<div style="background: var(--neutral-100); padding: 12px; border-radius: 8px; margin-bottom: 16px; border: 1px dashed var(--primary);">
|
||||
<p class="text-xs font-bold text-primary mb-1">🔑 บัญชีทดสอบ:</p>
|
||||
<p class="text-xs text-muted">อีเมล: student@example.com</p>
|
||||
<p class="text-xs text-muted">รหัสผ่าน: 123456</p>
|
||||
</div>
|
||||
|
||||
<!-- Social Login (Google) -->
|
||||
<button type="button" class="btn-google w-full mb-6 flex items-center justify-center gap-3">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/>
|
||||
<path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.834.859-3.048.859-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
|
||||
<path d="M3.964 10.706c-.18-.54-.282-1.117-.282-1.706 0-.589.102-1.166.282-1.706V4.962H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332z" fill="#FBBC05"/>
|
||||
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962l3.007 2.332c.708-2.127 2.692-3.711 5.036-3.711z" fill="#EA4335"/>
|
||||
</svg>
|
||||
<span>เข้าสู่ระบบด้วย Google</span>
|
||||
</button>
|
||||
|
||||
<!-- Back to Landing Page -->
|
||||
<div class="text-center pt-6 border-t border-gray-100">
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl border border-gray-200 text-sm font-bold text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-blue-600 transition-all duration-300 group">
|
||||
<span class="transform group-hover:-translate-x-1 transition-transform">←</span>
|
||||
กลับไปหน้าแรก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
</style>
|
||||
252
Frontend-Learner/pages/auth/register.vue
Normal file
252
Frontend-Learner/pages/auth/register.vue
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file register.vue
|
||||
* @description User Registration Page.
|
||||
* Features a multi-step style form (though currently single view) for creating a new account.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: "auth",
|
||||
middleware: "auth",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "สมัครสมาชิก - e-Learning",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const { errors, validate, clearFieldError } = useFormValidation();
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
// Reactive form state
|
||||
const registerForm = reactive({
|
||||
prefix: "นาย",
|
||||
username: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
|
||||
// Validation rules
|
||||
const registerRules = {
|
||||
username: { rules: { required: true, minLength: 4 }, label: "ชื่อผู้ใช้" },
|
||||
firstName: { rules: { required: true, minLength: 2 }, label: "ชื่อ" },
|
||||
lastName: { rules: { required: true, minLength: 2 }, label: "นามสกุล" },
|
||||
phone: {
|
||||
rules: { required: true, pattern: /^0[0-9]{8,9}$/ },
|
||||
label: "เบอร์โทรศัพท์",
|
||||
},
|
||||
email: { rules: { required: true, email: true }, label: "อีเมล" },
|
||||
password: { rules: { required: true, minLength: 8 }, label: "รหัสผ่าน" },
|
||||
confirmPassword: {
|
||||
rules: { required: true, match: "password" },
|
||||
label: "ยืนยันรหัสผ่าน",
|
||||
},
|
||||
};
|
||||
|
||||
const handleRegister = async () => {
|
||||
if (!validate(registerForm, registerRules)) return;
|
||||
|
||||
isLoading.value = true;
|
||||
// Simulate API delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
isLoading.value = false;
|
||||
router.push("/dashboard");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card auth-card" style="width: 100%; max-width: 480px">
|
||||
<!-- Loading Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
|
||||
<!-- Title Area -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-white mb-2">e-Learning Platform</h1>
|
||||
<p class="text-gray-400 text-sm">
|
||||
ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs Removed -->
|
||||
|
||||
<!-- REGISTER FORM -->
|
||||
<form @submit.prevent="handleRegister">
|
||||
<!-- Email -->
|
||||
<FormInput
|
||||
v-model="registerForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('email')"
|
||||
/>
|
||||
|
||||
<!-- Username -->
|
||||
<FormInput
|
||||
v-model="registerForm.username"
|
||||
label="ชื่อผู้ใช้"
|
||||
placeholder="username"
|
||||
:error="errors.username"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('username')"
|
||||
/>
|
||||
|
||||
<!-- Password Fields -->
|
||||
<FormInput
|
||||
v-model="registerForm.password"
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
|
||||
:error="errors.password"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('password')"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
v-model="registerForm.confirmPassword"
|
||||
label="ยืนยันรหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="ยืนยันรหัสผ่านอีกครั้ง"
|
||||
:error="errors.confirmPassword"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
|
||||
<!-- Name Fields (Split Row) -->
|
||||
<div class="grid-12" style="gap: 16px; margin-bottom: 0">
|
||||
<div class="col-span-4">
|
||||
<label class="input-label text-gray-300">คำนำหน้า</label>
|
||||
<select
|
||||
v-model="registerForm.prefix"
|
||||
class="input-field dark-input"
|
||||
style="height: 42px"
|
||||
>
|
||||
<option value="นาย">นาย</option>
|
||||
<option value="นาง">นาง</option>
|
||||
<option value="นางสาว">นางสาว</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-8">
|
||||
<FormInput
|
||||
v-model="registerForm.firstName"
|
||||
label="ชื่อ"
|
||||
placeholder=""
|
||||
:error="errors.firstName"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('firstName')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormInput
|
||||
v-model="registerForm.lastName"
|
||||
label="นามสกุล"
|
||||
placeholder=""
|
||||
:error="errors.lastName"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('lastName')"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
v-model="registerForm.phone"
|
||||
label="เบอร์โทรศัพท์"
|
||||
type="tel"
|
||||
placeholder="0812345678"
|
||||
:error="errors.phone"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('phone')"
|
||||
/>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary w-full mb-4 mt-2"
|
||||
:disabled="isLoading"
|
||||
style="height: 44px; font-size: 16px"
|
||||
>
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>สร้างบัญชี</span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle to Login -->
|
||||
<div class="text-center mt-6 text-sm">
|
||||
<span class="text-muted">มีบัญชีอยู่แล้ว? </span>
|
||||
<NuxtLink to="/auth/login" class="font-bold text-primary hover:underline">เข้าสู่ระบบ</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Force Dark Theme for Card */
|
||||
.auth-card {
|
||||
background-color: #1e293b; /* Slate 800 */
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Input Overrides for Dark Mode integration within this page */
|
||||
.dark-input {
|
||||
background-color: #334155; /* Slate 700 */
|
||||
border-color: #475569; /* Slate 600 */
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.dark-input:focus {
|
||||
border-color: #3b82f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Deep selector for FormInput component internals */
|
||||
:deep(.input-field) {
|
||||
background-color: #334155 !important;
|
||||
border-color: #475569 !important;
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
:deep(.input-field::placeholder) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:deep(.input-label) {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
:deep(.input-label span.required-mark) {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Select option styling */
|
||||
option {
|
||||
background-color: #334155;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/*
|
||||
Global Override for Auth Layout Background on this page context.
|
||||
Ensures the entire page background matches the design requirement.
|
||||
*/
|
||||
.auth-shell {
|
||||
background-color: #0f172a !important; /* Slate 900 */
|
||||
}
|
||||
</style>
|
||||
101
Frontend-Learner/pages/auth/reset-password.vue
Normal file
101
Frontend-Learner/pages/auth/reset-password.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file reset-password.vue
|
||||
* @description Reset Password Page.
|
||||
* Allows user to set a new password after verifying their email link (simulated).
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'ตั้งรหัสผ่านใหม่ - e-Learning'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const { errors, validate, clearFieldError } = useFormValidation()
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
const resetForm = reactive({
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const resetRules = {
|
||||
password: { rules: { required: true, minLength: 8 }, label: 'รหัสผ่านใหม่' },
|
||||
confirmPassword: { rules: { required: true, match: 'password' }, label: 'ยืนยันรหัสผ่าน' }
|
||||
}
|
||||
|
||||
const resetPassword = async () => {
|
||||
if (!validate(resetForm, resetRules)) return
|
||||
|
||||
isLoading.value = true
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
isLoading.value = false
|
||||
alert('รีเซ็ตรหัสผ่านสำเร็จ!')
|
||||
router.push('/auth/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="width: 100%; max-width: 440px;">
|
||||
<!-- Loading Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div
|
||||
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
||||
>
|
||||
E
|
||||
</div>
|
||||
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
||||
<p class="text-muted text-sm">ตั้งรหัสผ่านใหม่ของคุณ</p>
|
||||
</div>
|
||||
|
||||
<!-- RESET PASSWORD FORM -->
|
||||
<form @submit.prevent="resetPassword">
|
||||
<h3 class="font-bold mb-4">ตั้งรหัสผ่านใหม่</h3>
|
||||
|
||||
<!-- New Password -->
|
||||
<FormInput
|
||||
v-model="resetForm.password"
|
||||
label="รหัสผ่านใหม่"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:error="errors.password"
|
||||
required
|
||||
@update:model-value="clearFieldError('password')"
|
||||
/>
|
||||
|
||||
<!-- Confirm New Password -->
|
||||
<FormInput
|
||||
v-model="resetForm.confirmPassword"
|
||||
label="ยืนยันรหัสผ่านใหม่"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:error="errors.confirmPassword"
|
||||
required
|
||||
@update:model-value="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>บันทึกรหัสผ่านใหม่</span>
|
||||
</button>
|
||||
|
||||
<div class="text-center mt-6">
|
||||
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-500 hover:text-slate-800 transition-colors">
|
||||
← กลับไปหน้าเข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="text-center pt-4 border-t border-gray-100">
|
||||
<NuxtLink to="/" class="text-sm text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors flex items-center justify-center gap-1">
|
||||
<span>←</span> กลับไปหน้าหลัก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
283
Frontend-Learner/pages/browse/discovery.vue
Normal file
283
Frontend-Learner/pages/browse/discovery.vue
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file discovery.vue
|
||||
* @description Course Discovery / Catalog Page.
|
||||
* Allows users to browse, filter, and view details of available courses.
|
||||
* Includes a toggleable detailed view for course previews.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'รายการคอร์ส - e-Learning'
|
||||
})
|
||||
|
||||
// UI State
|
||||
const showDetail = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const isCategoryOpen = ref(true)
|
||||
|
||||
// Mock Course Data
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
levelType: 'neutral' as const,
|
||||
price: 'ฟรี',
|
||||
description: 'เรียนรู้พื้นฐานการวาดโครงร่าง...',
|
||||
rating: '4.8',
|
||||
lessons: '12'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'รูปแบบ React ขั้นสูง',
|
||||
levelType: 'warning' as const,
|
||||
price: 'ฟรี',
|
||||
description: 'เจาะลึก HOC, Hooks และอื่นๆ...',
|
||||
rating: '4.9',
|
||||
lessons: '24'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'การตลาดดิจิทัล 101',
|
||||
levelType: 'success' as const,
|
||||
price: 'ฟรี',
|
||||
description: 'คู่มือสมบูรณ์ SEO/SEM...',
|
||||
rating: '4.7',
|
||||
lessons: '18'
|
||||
}
|
||||
]
|
||||
|
||||
// Categories Data
|
||||
const categories = [
|
||||
'การตลาดออนไลน์',
|
||||
'ธุรกิจ',
|
||||
'การเงิน & ลงทุน',
|
||||
'การพัฒนาตนเอง',
|
||||
'Office Productivity',
|
||||
'Data',
|
||||
'เขียนโปรแกรม',
|
||||
'การพัฒนาซอฟต์แวร์',
|
||||
'การออกแบบ',
|
||||
'Art & Craft',
|
||||
'การเขียน',
|
||||
'ถ่ายภาพ & วิดีโอ',
|
||||
'ภาษา',
|
||||
'Lifestyles',
|
||||
'คอร์สฟรี'
|
||||
]
|
||||
|
||||
// Category Visibility State
|
||||
const showAllCategories = ref(false)
|
||||
|
||||
const visibleCategories = computed(() => {
|
||||
return showAllCategories.value ? categories : categories.slice(0, 8)
|
||||
})
|
||||
|
||||
// Filter Logic based on search query
|
||||
const filteredCourses = computed(() => {
|
||||
if (!searchQuery.value) return courses
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return courses.filter(c =>
|
||||
c.title.toLowerCase().includes(query) ||
|
||||
c.description.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- CATALOG VIEW: Browse courses -->
|
||||
<div v-if="!showDetail">
|
||||
<!-- Search & Filters Header -->
|
||||
<div class="flex justify-between items-center mb-6" style="flex-wrap: wrap; gap: 16px;">
|
||||
<h1 style="font-size: 28px; font-weight: 700; color: #000000;">รายการคอร์สทั้งหมด</h1>
|
||||
<div class="flex gap-3" style="flex-wrap: wrap;">
|
||||
<!-- Search Input -->
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800"
|
||||
placeholder="ค้นหาคอร์ส..."
|
||||
style="padding-left: 36px; width: 240px;"
|
||||
>
|
||||
</div>
|
||||
<!-- Sorting Select -->
|
||||
<select class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800" style="width: auto;">
|
||||
<option>เรียงตาม: ล่าสุด</option>
|
||||
<option>ยอดนิยม</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Grid Layout -->
|
||||
<div class="grid-12">
|
||||
<!-- Sidebar Filters -->
|
||||
<div class="col-span-3">
|
||||
<div class="card">
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between mb-4 cursor-pointer" @click="isCategoryOpen = !isCategoryOpen">
|
||||
<h4 class="text-lg font-bold text-slate-900 dark:text-white">หมวดหมู่ ({{ categories.length }})</h4>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-slate-400 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': !isCategoryOpen }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-show="isCategoryOpen" class="flex flex-col gap-1">
|
||||
<div v-for="cat in visibleCategories" :key="cat" class="flex items-center justify-between py-3 border-b border-slate-100 dark:border-slate-700/50 group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 -mx-4 px-4 transition-colors">
|
||||
<label class="flex items-center gap-3 text-slate-700 dark:text-slate-300 cursor-pointer w-full">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary">
|
||||
{{ cat }}
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
class="text-primary text-sm mt-4 font-medium hover:underline flex items-center gap-1"
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
>
|
||||
{{ showAllCategories ? 'แสดงน้อยลง' : 'แสดงเพิ่มเติม' }}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': showAllCategories }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course List -->
|
||||
<div class="col-span-9" style="min-width: 0;">
|
||||
<div class="course-grid">
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
:title="course.title"
|
||||
:price="course.price"
|
||||
:description="course.description"
|
||||
:rating="course.rating"
|
||||
:lessons="course.lessons"
|
||||
show-view-details
|
||||
@view-details="showDetail = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredCourses.length === 0" class="empty-state" style="grid-column: 1 / -1;">
|
||||
<h3 class="empty-state-title">ไม่พบผลการค้นหา</h3>
|
||||
<p class="empty-state-description">ลองใช้คำค้นหาอื่น หรือตรวจดูความถูกต้องของตัวอักษรอีกครั้ง</p>
|
||||
<button class="btn btn-secondary" @click="searchQuery = ''">แสดงทั้งหมด</button>
|
||||
</div>
|
||||
|
||||
<!-- Pagination / Load More -->
|
||||
<div class="load-more-wrap">
|
||||
<button class="btn btn-secondary" style="border-color: #64748b; color: white; background: rgba(255,255,255,0.05);">โหลดเพิ่มเติม</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
|
||||
<div v-else>
|
||||
<button class="btn btn-secondary mb-6" @click="showDetail = false">← กลับหน้ารายการ</button>
|
||||
|
||||
<div class="grid-12">
|
||||
<!-- Main Content (Left Column) -->
|
||||
<div class="col-span-8">
|
||||
<!-- Hero Video Placeholder -->
|
||||
<div
|
||||
style="width: 100%; height: 400px; background: var(--neutral-900); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; position: relative; border: 1px solid var(--border-color);"
|
||||
>
|
||||
<!-- Play Button -->
|
||||
<div
|
||||
style="width: 80px; height: 80px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);"
|
||||
>
|
||||
<div style="width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid white; margin-left: 6px;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 style="font-size: 32px; font-weight: 700; margin-bottom: 16px; color: #000000;">เบื้องต้นการออกแบบ UX/UI</h1>
|
||||
<p class="text-slate-700 dark:text-slate-400 mb-6" style="font-size: 1.1em; line-height: 1.7;">
|
||||
เนื้อหาครอบคลุมทุกอย่างตั้งแต่การวิจัยผู้ใช้ (User Research) ไปจนถึงการทำต้นแบบความละเอียดสูง (High-fidelity Prototyping)
|
||||
เหมาะสำหรับผู้เริ่มต้นที่ต้องการเข้าสู่สายงานออกแบบผลิตภัณฑ์
|
||||
</p>
|
||||
|
||||
<!-- Learning Objectives -->
|
||||
<div class="card mb-6">
|
||||
<h3 class="font-bold mb-4" style="color: #000000;">สิ่งที่คุณจะได้เรียนรู้</h3>
|
||||
<ul class="grid-12" style="grid-template-columns: 1fr 1fr; gap: 12px;">
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> วิธีการวิจัยผู้ใช้ (User Research)</li>
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> การวาดโครงร่างและทำต้นแบบ</li>
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> ระบบการออกแบบ (Design Systems)</li>
|
||||
<li class="flex gap-2 text-sm"><span style="color: var(--success);">✓</span> การทดสอบการใช้งาน (Usability Testing)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Course Syllabus / Outline -->
|
||||
<div class="card">
|
||||
<h3 class="font-bold mb-4" style="color: #000000;">เนื้อหาในคอร์ส</h3>
|
||||
<!-- Chapter 1 -->
|
||||
<div class="mb-4">
|
||||
<div class="flex justify-between p-4 rounded mb-2" style="background: #f3f4f6; border: 1px solid #e5e7eb;">
|
||||
<span class="font-bold" style="color: #000000;">01. บทนำ</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">3 บทเรียน</span>
|
||||
</div>
|
||||
<div style="padding-left: 16px;">
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span class="text-sm">1.1 การออกแบบ UX คืออะไร?</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">10:00</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span class="text-sm">1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">15:30</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar (Right Column): Sticky CTA -->
|
||||
<div class="col-span-4">
|
||||
<div class="card" style="position: sticky; top: 88px;">
|
||||
<div class="mb-6">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400" style="text-decoration: line-through;">฿3,500</span>
|
||||
<h2 class="text-primary font-bold" style="font-size: 32px; margin: 0;">ฟรี</h2>
|
||||
<span class="status-pill status-success">ระยะเวลาจำกัด</span>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/dashboard/my-courses?enrolled=true" class="btn btn-primary w-full mb-4" style="height: 48px; font-size: 16px;">
|
||||
ลงทะเบียนเรียนทันที
|
||||
</NuxtLink>
|
||||
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400 mb-4">
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span>ระยะเวลา</span>
|
||||
<span class="font-bold">4.5 ชั่วโมง</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-2 border-b" style="border-color: var(--neutral-100);">
|
||||
<span>ใบประกาศ</span>
|
||||
<span class="font-bold">มี</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
291
Frontend-Learner/pages/browse/index.vue
Normal file
291
Frontend-Learner/pages/browse/index.vue
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file courses.vue
|
||||
* @description Page displaying all available courses in a public catalog format.
|
||||
* Matches the premium dark theme of the landing page.
|
||||
*/
|
||||
|
||||
// Define page metadata using the landing layout (dark theme default)
|
||||
definePageMeta({
|
||||
layout: 'landing'
|
||||
})
|
||||
|
||||
// Set the HTML head title for SEO
|
||||
useHead({
|
||||
title: 'คอร์สทั้งหมด - E-Learning System'
|
||||
})
|
||||
|
||||
// Reactive state for the search input
|
||||
const searchQuery = ref('')
|
||||
|
||||
/**
|
||||
* @const courses
|
||||
* @description Mock data for available courses. In a real app, this would be fetched from an API.
|
||||
* Each course object contains: id, title, level, levelType (for badge color), price, description, rating, lessons.
|
||||
*/
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
price: 'ฟรี',
|
||||
description: 'เรียนรู้พื้นฐานการวาดโครงร่างและการใช้งานเครื่องมือออกแบบยุคใหม่',
|
||||
rating: '4.8',
|
||||
lessons: '12'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'รูปแบบ React ขั้นสูง',
|
||||
price: 'ฟรี',
|
||||
description: 'เจาะลึก HOC, Hooks และการจัดการ State ขนาดใหญ่ในแอปพลิเคชัน',
|
||||
rating: '4.9',
|
||||
lessons: '24'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'การตลาดดิจิทัล 101',
|
||||
price: 'ฟรี',
|
||||
description: 'คู่มือสมบูรณ์สำหรับการทำ SEO/SEM และการวิเคราะห์ข้อมูลผู้ใช้',
|
||||
rating: '4.7',
|
||||
lessons: '18'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Full-stack Node.js Developer',
|
||||
price: 'ฟรี',
|
||||
description: 'สร้าง API ที่ยืดหยุ่นและมีประสิทธิภาพด้วย Node.js และ Express',
|
||||
rating: '4.9',
|
||||
lessons: '32'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Full-stack Node.js Developer',
|
||||
price: 'ฟรี',
|
||||
description: 'สร้าง API ที่ยืดหยุ่นและมีประสิทธิภาพด้วย Node.js และ Express',
|
||||
rating: '4.9',
|
||||
lessons: '32'
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* @computed filteredCourses
|
||||
* @description Filters the courses list based on the search query.
|
||||
* Checks both the course title and description (case-insensitive).
|
||||
*/
|
||||
const filteredCourses = computed(() => {
|
||||
if (!searchQuery.value) return courses
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return courses.filter(c =>
|
||||
c.title.toLowerCase().includes(query) ||
|
||||
c.description.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Main Container: Dark Theme Base -->
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors">
|
||||
|
||||
<!-- ==========================================
|
||||
BACKGROUND EFFECTS
|
||||
Ambient glows matching the index.vue theme
|
||||
========================================== -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
HERO SECTION
|
||||
Title and subtitle area
|
||||
========================================== -->
|
||||
<section class="relative pt-32 pb-20 px-6 overflow-hidden">
|
||||
<div class="container mx-auto max-w-6xl text-center relative z-10">
|
||||
<!-- Tagline Badge -->
|
||||
<div class="mb-6 slide-up">
|
||||
<span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)]">
|
||||
EXPLORE COURSES
|
||||
</span>
|
||||
</div>
|
||||
<!-- Main Title -->
|
||||
<h1 class="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
|
||||
คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
|
||||
</h1>
|
||||
<!-- Subtitle -->
|
||||
<p class="text-slate-400 text-xl max-w-2xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.2s;">
|
||||
เริ่มต้นอัปสกิลของคุณวันนี้ด้วยหลักสูตรคุณภาพที่ออกแบบโดยผู้เชี่ยวชาญในอุตสาหกรรม
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
SEARCH & GRID SECTION
|
||||
========================================== -->
|
||||
<section class="container mx-auto max-w-6xl px-6 pb-32">
|
||||
<!-- Search Bar -->
|
||||
<div class="mb-20 relative max-w-2xl mx-auto slide-up" style="animation-delay: 0.3s;">
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
|
||||
<span class="text-xl opacity-50">🔍</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="w-full h-16 pl-14 pr-6 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500/50 focus:bg-white/10 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium text-lg backdrop-blur-md"
|
||||
placeholder="ค้นหาบทเรียนที่คุณสนใจ..."
|
||||
>
|
||||
<!-- Hover Glow Effect on Input -->
|
||||
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-transparent group-hover:ring-white/20 pointer-events-none transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course Grid -->
|
||||
<div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
|
||||
<div
|
||||
v-for="(course, index) in filteredCourses"
|
||||
:key="course.id"
|
||||
class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
|
||||
:style="{ animationDelay: `${0.1 * (index + 1)}s` }"
|
||||
>
|
||||
<!-- Card Image / Placeholder Area -->
|
||||
<div class="h-56 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center text-5xl group-hover:scale-110 transition-transform duration-500 shadow-inner border border-white/5">
|
||||
📚
|
||||
</div>
|
||||
</div>
|
||||
<!-- Level Badge (Neutral/Warning/Success variants) -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Card Content Body -->
|
||||
<div class="p-8 flex-1 flex flex-col border-t border-white/5">
|
||||
<h3 class="text-2xl font-bold text-white mb-3 leading-tight group-hover:text-blue-400 transition-colors">
|
||||
{{ course.title }}
|
||||
</h3>
|
||||
<p class="text-slate-400 text-sm mb-8 line-clamp-2 leading-relaxed flex-1">
|
||||
{{ course.description }}
|
||||
</p>
|
||||
|
||||
<!-- Meta Information (Rating, Lessons) -->
|
||||
<div class="flex items-center gap-6 mb-8 text-sm font-medium text-slate-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-amber-400">⭐</span>
|
||||
<span class="text-slate-300">{{ course.rating }}</span>
|
||||
</div>
|
||||
<div class="w-1 h-1 rounded-full bg-slate-700" />
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="opacity-70">📖</span>
|
||||
<span class="text-slate-300">{{ course.lessons }} บทเรียน</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Footer (Price & Action) -->
|
||||
<div class="pt-6 border-t border-white/5 flex items-center justify-between mt-auto">
|
||||
<span class="text-2xl font-black text-blue-400 tracking-tight">
|
||||
{{ course.price }}
|
||||
</span>
|
||||
<NuxtLink
|
||||
to="/browse/opencovery"
|
||||
class="px-6 py-3 bg-white/10 hover:bg-blue-600 text-white rounded-xl text-sm font-bold transition-all border border-white/10 hover:border-blue-500/50"
|
||||
>
|
||||
ดูรายละเอียด
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State (No Results) -->
|
||||
<div v-else class="text-center py-32 glass-premium rounded-[3rem]">
|
||||
<div class="text-7xl mb-8 opacity-50 animate-bounce">🔭</div>
|
||||
<h2 class="text-3xl font-black text-white mb-4">ไม่พบคอร์สที่คุณค้นหา</h2>
|
||||
<p class="text-slate-400 mb-10 max-w-md mx-auto text-lg">
|
||||
ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการในขณะนี้
|
||||
</p>
|
||||
<button
|
||||
class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black transition-all shadow-lg shadow-blue-600/20 hover:-translate-y-1"
|
||||
@click="searchQuery = ''"
|
||||
>
|
||||
แสดงคอร์สทั้งหมด
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
CTA SECTION
|
||||
Call to action to register
|
||||
========================================== -->
|
||||
<section class="py-32 relative overflow-hidden">
|
||||
<!-- Gradient Overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>
|
||||
|
||||
<div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-black text-white mb-8 tracking-tight">
|
||||
พร้อมจะเริ่มต้นแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
ลงทะเบียนฟรีวันนี้เพื่อเข้าถึงบทเรียนพื้นฐาน และติดตามความคืบหน้าการเรียนของคุณได้ทันที ไม่มีค่าใช้จ่ายแอบแฝง
|
||||
</p>
|
||||
<NuxtLink
|
||||
to="/auth/register"
|
||||
class="inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl text-lg font-black shadow-2xl shadow-blue-900/40 hover:scale-105 transition-all duration-300"
|
||||
>
|
||||
<span>🚀</span>
|
||||
<span>สมัครสมาชิกฟรี</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*
|
||||
MATCHING INDEX.VUE STYLES
|
||||
These styles ensure consistency with the landing page theme.
|
||||
*/
|
||||
|
||||
/* Gradient Text Effect (Cyan to Blue) */
|
||||
.text-gradient-cyan {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Premium Glass Effect for Containers */
|
||||
.glass-premium {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Glass Card Style for Course Items */
|
||||
.glass-card {
|
||||
background: rgba(30, 41, 59, 0.4); /* Slate-800 with opacity */
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Slow Pulse Animation for Background Glows */
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.1; transform: scale(1); }
|
||||
50% { opacity: 0.15; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 10s linear infinite;
|
||||
}
|
||||
|
||||
/* Slide Up Entrance Animation */
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
175
Frontend-Learner/pages/browse/opencovery.vue
Normal file
175
Frontend-Learner/pages/browse/opencovery.vue
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file opencovery.vue
|
||||
* @description Public Course Detail Page.
|
||||
* Displays detailed information about a specific course without requiring authentication.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'landing',
|
||||
auth: false // Explicitly public
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'รายละเอียดคอร์ส - E-Learning System'
|
||||
})
|
||||
|
||||
// Mock Data (Static for now, ideally would fetch based on ID)
|
||||
const course = {
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
price: 'ฟรี',
|
||||
originalPrice: '',
|
||||
description: 'เนื้อหาครอบคลุมทุกอย่างตั้งแต่การวิจัยผู้ใช้ (User Research) ไปจนถึงการทำต้นแบบความละเอียดสูง (High-fidelity Prototyping) เหมาะสำหรับผู้เริ่มต้นที่ต้องการเข้าสู่สายงานออกแบบผลิตภัณฑ์',
|
||||
duration: '4.5 ชั่วโมง',
|
||||
lessons: 12,
|
||||
certificate: true,
|
||||
objectives: [
|
||||
'วิธีการวิจัยผู้ใช้ (User Research)',
|
||||
'การวาดโครงร่างและทำต้นแบบ',
|
||||
'ระบบการออกแบบ (Design Systems)',
|
||||
'การทดสอบการใช้งาน (Usability Testing)'
|
||||
],
|
||||
syllabus: [
|
||||
{
|
||||
title: '01. บทนำ',
|
||||
lessonCount: 3,
|
||||
lessons: [
|
||||
{ title: '1.1 การออกแบบ UX คืออะไร?', duration: '10:00' },
|
||||
{ title: '1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)', duration: '15:30' },
|
||||
{ title: '1.3 เครื่องมือที่ต้องใช้', duration: '05:00' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '02. การวิจัยผู้ใช้',
|
||||
lessonCount: 4,
|
||||
lessons: [
|
||||
{ title: '2.1 การสัมภาษณ์ผู้ใช้', duration: '12:00' },
|
||||
{ title: '2.2 การสร้าง Persona', duration: '18:00' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors pt-32 pb-20">
|
||||
|
||||
<!-- Background Effects -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto max-w-6xl px-6">
|
||||
|
||||
<!-- Back Button -->
|
||||
<NuxtLink to="/browse/discovery" class="inline-flex items-center gap-2 text-slate-400 hover:text-white mb-8 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
กลับหน้ารายการคอร์ส
|
||||
</NuxtLink>
|
||||
|
||||
<div class="grid grid-cols-1lg lg:grid-cols-12 gap-10">
|
||||
|
||||
<!-- Main Content (Left Column) -->
|
||||
<div class="lg:col-span-8">
|
||||
<!-- Hero Video Placeholder -->
|
||||
<div class="relative aspect-video bg-slate-800 rounded-3xl overflow-hidden border border-white/5 shadow-2xl mb-8 group cursor-pointer">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
|
||||
<div class="w-20 h-20 rounded-full bg-blue-600 flex items-center justify-center shadow-[0_0_30px_rgba(37,99,235,0.5)] group-hover:scale-110 transition-transform duration-300">
|
||||
<div class="ml-1 w-0 h-0 border-t-[12px] border-t-transparent border-l-[20px] border-l-white border-b-[12px] border-b-transparent"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl font-black text-white mb-6 leading-tight">{{ course.title }}</h1>
|
||||
<p class="text-slate-400 text-lg leading-relaxed mb-10">
|
||||
{{ course.description }}
|
||||
</p>
|
||||
|
||||
<!-- Learning Objectives -->
|
||||
<div class="p-8 rounded-3xl bg-white/5 border border-white/5 mb-10">
|
||||
<h3 class="font-bold text-xl text-white mb-6">สิ่งที่คุณจะได้เรียนรู้</h3>
|
||||
<ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<li v-for="(obj, idx) in course.objectives" :key="idx" class="flex gap-3 text-slate-300">
|
||||
<span class="text-emerald-400 font-bold">✓</span> {{ obj }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Course Syllabus -->
|
||||
<div class="p-8 rounded-3xl bg-white/5 border border-white/5">
|
||||
<h3 class="font-bold text-xl text-white mb-6">เนื้อหาในคอร์ส</h3>
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.syllabus" :key="idx">
|
||||
<div class="flex justify-between items-center p-4 bg-white/5 rounded-2xl mb-2 border border-white/5">
|
||||
<span class="font-bold text-white">{{ chapter.title }}</span>
|
||||
<span class="text-sm text-slate-500">{{ chapter.lessonCount }} บทเรียน</span>
|
||||
</div>
|
||||
<div class="pl-4 space-y-1">
|
||||
<div v-for="(lesson, lIdx) in chapter.lessons" :key="lIdx" class="flex justify-between py-3 px-4 border-b border-white/5 last:border-0 text-slate-400 hover:bg-white/5 rounded-xl transition-colors">
|
||||
<span class="text-sm">
|
||||
<span class="mr-2 opacity-50">🎥</span> {{ lesson.title }}
|
||||
</span>
|
||||
<span class="text-sm opacity-60">{{ lesson.duration }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar (Right Column): Sticky CTA -->
|
||||
<div class="lg:col-span-4">
|
||||
<div class="sticky top-28 p-8 rounded-3xl bg-slate-800/80 backdrop-blur-xl border border-white/10 shadow-2xl">
|
||||
<div class="mb-8 text-center lg:text-left">
|
||||
<span class="text-lg text-slate-500 line-through mr-4">{{ course.originalPrice }}</span>
|
||||
<span class="text-5xl font-black text-white tracking-tight">{{ course.price }}</span>
|
||||
<div class="mt-4">
|
||||
<span class="inline-block px-3 py-1 rounded-lg bg-emerald-500/10 text-emerald-400 text-xs font-bold border border-emerald-500/20 uppercase tracking-wider">
|
||||
ระยะเวลาจำกัด
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/auth/register" class="flex items-center justify-center w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 transition-all hover:-translate-y-1 mb-6">
|
||||
ลงทะเบียนเรียนทันที
|
||||
</NuxtLink>
|
||||
|
||||
<div class="space-y-4 text-sm text-slate-400">
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>ระยะเวลาเรียน</span>
|
||||
<span class="font-bold text-white">{{ course.duration }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>จำนวนบทเรียน</span>
|
||||
<span class="font-bold text-white">{{ course.lessons }} บท</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>ใบประกาศนียบัตร</span>
|
||||
<span class="font-bold text-white">{{ course.certificate ? 'มี' : 'ไม่มี' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between py-3 border-b border-white/5">
|
||||
<span>ระดับ</span>
|
||||
<span class="font-bold text-white">เหมาะสำหรับทุกคน</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.1; transform: scale(1); }
|
||||
50% { opacity: 0.15; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 10s linear infinite;
|
||||
}
|
||||
</style>
|
||||
487
Frontend-Learner/pages/classroom/learning.vue
Normal file
487
Frontend-Learner/pages/classroom/learning.vue
Normal file
|
|
@ -0,0 +1,487 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file learning.vue
|
||||
* @description Course Learning Interface ("Classroom" view).
|
||||
* Defines the main learning environment where users watch video lessons and track progress.
|
||||
* Layout mimics a typical LMS with a sidebar for curriculum and a main content area for video/details.
|
||||
* @important Matches the provided design mockups pixel-perfectly.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: false, // Custom layout defined within this component
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'ห้องเรียนออนไลน์ - e-Learning'
|
||||
})
|
||||
|
||||
// State
|
||||
const sidebarOpen = ref(false)
|
||||
const activeTab = ref<'details' | 'announcements'>('details')
|
||||
const currentLessonId = ref('1.3')
|
||||
|
||||
const toggleSidebar = () => {
|
||||
sidebarOpen.value = !sidebarOpen.value
|
||||
}
|
||||
|
||||
const switchTab = (tab: 'details' | 'announcements', lessonId: string = '') => {
|
||||
activeTab.value = tab
|
||||
if (lessonId) currentLessonId.value = lessonId
|
||||
// Close sidebar on mobile when selecting a lesson
|
||||
if (import.meta.client && window.innerWidth <= 1024) {
|
||||
sidebarOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Curriculum Data matching the visual exactly
|
||||
const progress = 65
|
||||
const chapters = [
|
||||
{
|
||||
title: '01. บทนำ',
|
||||
lessons: [
|
||||
{ id: '1.1', title: 'การออกแบบ UX คืออะไร?', icon: '✓', status: 'completed' },
|
||||
{ id: '1.2', title: 'กระบวนการคิดเชิงออกแบบ', icon: '✓', status: 'completed' },
|
||||
{ id: '1.3', title: 'พื้นฐานการวาดโครงร่าง', icon: '▶', status: 'active' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '02. วิธีการวิจัย',
|
||||
lessons: [
|
||||
{ id: '2.1', title: 'การสัมภาษณ์ผู้ใช้', icon: '🔒', status: 'locked' },
|
||||
{ id: '2.2', title: 'การสร้าง Persona', icon: '🔒', status: 'locked' },
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// Video Player Logic
|
||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||
const isPlaying = ref(false)
|
||||
const videoProgress = ref(0)
|
||||
const currentTime = ref(0)
|
||||
const duration = ref(0)
|
||||
|
||||
const togglePlay = () => {
|
||||
if (!videoRef.value) return
|
||||
if (isPlaying.value) videoRef.value.pause()
|
||||
else videoRef.value.play()
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
|
||||
const updateProgress = () => {
|
||||
if (!videoRef.value) return
|
||||
currentTime.value = videoRef.value.currentTime
|
||||
duration.value = videoRef.value.duration
|
||||
videoProgress.value = (currentTime.value / duration.value) * 100
|
||||
}
|
||||
|
||||
const formatTime = (time: number) => {
|
||||
const m = Math.floor(time / 60)
|
||||
const s = Math.floor(time % 60)
|
||||
return `${m}:${s.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const currentTimeDisplay = computed(() => formatTime(currentTime.value))
|
||||
const durationDisplay = computed(() => formatTime(duration.value || 15 * 60 + 45))
|
||||
|
||||
const seek = (e: MouseEvent) => {
|
||||
if (!videoRef.value) return
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
|
||||
const percent = (e.clientX - rect.left) / rect.width
|
||||
videoRef.value.currentTime = percent * videoRef.value.duration
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="learning-shell font-main antialiased selection:bg-blue-500/30">
|
||||
<!-- Header: Custom top bar for learning context -->
|
||||
<header class="learning-header px-2 md:px-4 h-14 md:h-[56px] border-b border-white/5 flex items-center justify-between gap-2 md:gap-4">
|
||||
<div class="flex items-center gap-1 md:gap-6 min-w-0 flex-1">
|
||||
<!-- Mobile Sidebar Toggle -->
|
||||
<button class="md:hidden text-white p-2 hover:bg-white/5 rounded-lg flex-shrink-0" @click="toggleSidebar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
|
||||
</button>
|
||||
<!-- Back Navigation -->
|
||||
<NuxtLink to="/dashboard" class="text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors flex items-center gap-2 flex-shrink-0 p-2 md:p-0">
|
||||
<span class="text-lg md:text-base">←</span>
|
||||
<span class="hidden md:inline text-[11px] font-bold">กลับไปหน้าหลัก</span>
|
||||
</NuxtLink>
|
||||
<div class="w-[1px] h-4 bg-white/10 hidden md:block flex-shrink-0"/>
|
||||
<h1 class="text-[13px] md:text-sm font-black text-slate-900 dark:text-white tracking-tight truncate min-w-0 pr-2">เบื้องต้นการออกแบบ UX/UI</h1>
|
||||
</div>
|
||||
|
||||
<!-- Right Header Actions (Progress) -->
|
||||
<div class="flex items-center gap-2 md:gap-10 pr-2 md:pr-0">
|
||||
<div class="flex items-center gap-2 md:gap-3">
|
||||
<span class="text-[10px] font-bold text-slate-700 dark:text-slate-400 whitespace-nowrap">
|
||||
<span class="hidden md:inline">เรียนจบแล้ว </span>{{ progress }}%
|
||||
</span>
|
||||
<div class="w-12 md:w-32 h-1 bg-white/10 rounded-full overflow-hidden flex-shrink-0">
|
||||
<div class="h-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.3)]" :style="{ width: progress + '%' }"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Sidebar: Course Curriculum list -->
|
||||
<aside class="learning-sidebar" :class="{ 'open': sidebarOpen }">
|
||||
<div class="py-2">
|
||||
<!-- Announcements Tab Trigger -->
|
||||
<div
|
||||
class="lesson-item group"
|
||||
:class="{ 'active-tab': activeTab === 'announcements' }"
|
||||
@click="switchTab('announcements')"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg" style="color: #ff3366;">📢</span>
|
||||
<span class="font-black text-[12px] tracking-tight">ประกาศในคอร์ส</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chapters & Lessons List -->
|
||||
<div v-for="chapter in chapters" :key="chapter.title" class="mt-4">
|
||||
<div class="chapter-header px-4 py-2">{{ chapter.title }}</div>
|
||||
<div
|
||||
v-for="lesson in chapter.lessons"
|
||||
:key="lesson.id"
|
||||
class="lesson-item px-4"
|
||||
:class="{
|
||||
'active-lesson': currentLessonId === lesson.id && activeTab === 'details',
|
||||
'completed': lesson.status === 'completed',
|
||||
'locked': lesson.status === 'locked'
|
||||
}"
|
||||
@click="lesson.status !== 'locked' && switchTab('details', lesson.id)"
|
||||
>
|
||||
<span class="text-[12px] font-medium tracking-tight truncate pr-4">{{ lesson.id }} {{ lesson.title }}</span>
|
||||
<span class="icon-status flex-shrink-0" :class="{ 'text-emerald-500': lesson.status === 'completed', 'text-blue-500': lesson.status === 'active' }">
|
||||
{{ lesson.icon }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Exam Link -->
|
||||
<div class="mt-8 border-t border-white/5 pt-2">
|
||||
<div class="chapter-header px-4 py-2 uppercase tracking-widest text-[10px]">03. แบบทดสอบท้ายบท</div>
|
||||
<NuxtLink to="/classroom/quiz" class="lesson-item px-4 no-underline cursor-pointer">
|
||||
<span class="text-[12px] font-medium text-slate-400 group-hover:text-white transition-colors">ข้อสอบปลายภาค</span>
|
||||
<span class="text-xs opacity-50">📄</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Sidebar Overlay for mobile -->
|
||||
<div v-if="sidebarOpen" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[85] md:hidden" @click="toggleSidebar"/>
|
||||
|
||||
<!-- Main View Area -->
|
||||
<div class="main-container custom-scrollbar overflow-x-hidden pt-6">
|
||||
<main class="w-full max-w-7xl mx-auto px-4 md:px-8 pb-10 md:pb-20">
|
||||
<!-- Tab Content: Announcements (Center Aligned) -->
|
||||
<div v-if="activeTab === 'announcements'" class="animate-fade-in max-w-4xl mx-auto space-y-8 pt-8 md:pt-14">
|
||||
<h2 class="text-2xl md:text-[28px] font-black text-slate-900 dark:text-white tracking-tight">ประกาศทั้งหมดในคอร์สนี้</h2>
|
||||
<div class="p-8 md:p-10 bg-slate-100 dark:bg-slate-900/40 ring-1 ring-slate-300 dark:ring-white/10 border-l-4 border-l-amber-500 rounded-2xl relative shadow-md dark:shadow-2xl dark:backdrop-blur-md transition-colors">
|
||||
<div class="absolute top-4 right-8 text-amber-500 text-[10px] font-bold uppercase tracking-widest hidden sm:block">📌 ปักหมุด</div>
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="bg-amber-100/10 text-amber-500 px-3 py-1 rounded-lg text-[10px] font-black ring-1 ring-amber-500/20">ด่วน</span>
|
||||
<span class="text-[11px] font-bold text-slate-500 uppercase tracking-tighter">วันนี้ • 10:30 น.</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-white mb-4 tracking-tight">ปรับเวลาส่งแบบฝึกหัด</h3>
|
||||
<p class="text-slate-400 leading-relaxed font-medium">เนื่องจากเวลาทำข้อสอบน้อยเกินไปจึงทำการปรับเวลาให้เหมาะสมกับเนื้อหาบทเรียน</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content: Lesson Details (Grid System) -->
|
||||
<div v-if="activeTab === 'details'" class="animate-fade-in pt-4 md:pt-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-10 items-start">
|
||||
|
||||
<!-- Left Side: Video + Title + Notes (8/12) -->
|
||||
<div class="md:col-span-8 space-y-10 pb-24 md:pb-0">
|
||||
<!-- Video Unit -->
|
||||
<div class="aspect-video relative group overflow-hidden rounded-2xl ring-1 ring-white/10 shadow-2xl bg-black">
|
||||
<video
|
||||
ref="videoRef"
|
||||
class="w-full h-full object-contain"
|
||||
poster="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80"
|
||||
@timeupdate="updateProgress"
|
||||
@play="isPlaying = true"
|
||||
@pause="isPlaying = false"
|
||||
>
|
||||
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<!-- Play Overlay -->
|
||||
<div v-if="!isPlaying" class="absolute inset-0 flex items-center justify-center bg-black/5 backdrop-blur-[1px]">
|
||||
<button class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-blue-600/30 border border-white/20 flex items-center justify-center backdrop-blur-xl hover:scale-110 transition-transform shadow-lg" @click="togglePlay">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white translate-x-0.5" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Controls Overlay -->
|
||||
<div class="absolute bottom-0 inset-x-0 p-4 md:p-6 pt-16 bg-gradient-to-t from-black/95 via-black/40 to-transparent">
|
||||
<div class="flex items-center gap-4 text-[11px] font-bold text-white/80">
|
||||
<button class="text-xs hover:text-blue-500 transition-colors" @click="togglePlay">{{ isPlaying ? '⏸' : '▶' }}</button>
|
||||
<span class="font-mono">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
|
||||
<div class="flex-grow h-[3px] bg-white/10 rounded-full relative cursor-pointer" @click="seek">
|
||||
<div :style="{ width: videoProgress + '%' }" class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"/>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<span class="cursor-pointer hover:text-white">CC</span>
|
||||
<span class="cursor-pointer hover:text-white" @click="videoRef?.requestFullscreen()">⛶</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lesson Title -->
|
||||
<div>
|
||||
<h2 class="text-2xl md:text-[32px] font-black text-slate-900 dark:text-white leading-tight tracking-tight break-words mb-2">1.3 พื้นฐานการวาดโครงร่าง (Wireframing Basics)</h2>
|
||||
<div class="flex items-center gap-2 text-slate-600 dark:text-slate-400 text-[12px] font-bold uppercase tracking-wider">
|
||||
<span>บทที่ 1</span>
|
||||
<span class="opacity-30">•</span>
|
||||
<span>บทเริ่มต้นการออกแบบ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lesson Notes Card -->
|
||||
<div class="rounded-2xl bg-white dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 p-6 md:p-10 shadow-sm dark:shadow-xl transition-colors">
|
||||
<h3 class="text-[11px] md:text-[12px] font-black text-slate-900 dark:text-slate-100 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-700 pb-4">บันทึกบทเรียน</h3>
|
||||
<div class="text-[15px] md:text-[16px] text-slate-700 dark:text-slate-200 leading-relaxed font-medium space-y-6">
|
||||
<p>การ Wireframe คือการจำลองโครงสร้างพื้นฐานของหน้าจอ (Layout) โดยเน้นไปที่การจัดวางตำแหน่งปุ่มและเนื้อหาสำคัญเพื่อวางโครงสร้างก่อนลงมือดีไซน์จริง</p>
|
||||
|
||||
<div class="bg-slate-50 dark:bg-slate-800/40 border border-slate-200 dark:border-slate-700 border-l-4 border-l-blue-500 p-6 rounded-r-2xl">
|
||||
<div class="font-black text-blue-700 dark:text-blue-400 text-[12px] uppercase tracking-wider mb-3">ประเด็นสำคัญ:</div>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex gap-4 items-start">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2 flex-shrink-0"/>
|
||||
<span class="text-slate-700 dark:text-slate-300">ความละเอียดต่ำ (Low-fidelity) ช่วยให้โฟกัสที่การใช้งาน (Functionality) เป็นหลัก</span>
|
||||
</li>
|
||||
<li class="flex gap-4 items-start">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2 flex-shrink-0"/>
|
||||
<span class="text-slate-700 dark:text-slate-300">ช่วยในการสื่อสารไอเดียกับ Stakeholders ให้เห็นภาพตรงกัน</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Resources + Actions (4/12) -->
|
||||
<div class="md:col-span-4 space-y-6 md:sticky md:top-6">
|
||||
<!-- Resources Card -->
|
||||
<div class="rounded-2xl bg-white dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 p-6 md:p-8 shadow-sm dark:shadow-xl transition-colors">
|
||||
<h3 class="text-[11px] md:text-[12px] font-black text-slate-900 dark:text-slate-100 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-700 pb-4">เอกสารประกอบ</h3>
|
||||
<div class="space-y-3">
|
||||
<!-- Attachment Row -->
|
||||
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/40 rounded-2xl border border-slate-200 dark:border-slate-700 group hover:bg-slate-100 dark:hover:bg-slate-700/40 transition-all cursor-pointer min-w-0">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<span class="text-xl flex-shrink-0">📄</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="text-[12px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">สไลด์ประกอบการสอน.pdf</span>
|
||||
<span class="text-[9px] font-black text-slate-500 dark:text-slate-400 uppercase">2.4 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</button>
|
||||
</div>
|
||||
<!-- Attachment Row -->
|
||||
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/40 rounded-2xl border border-slate-200 dark:border-slate-700 group hover:bg-slate-100 dark:hover:bg-slate-700/40 transition-all cursor-pointer min-w-0">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<span class="text-xl flex-shrink-0">📁</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="text-[12px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">ไฟล์แบบฝึกหัด.zip</span>
|
||||
<span class="text-[9px] font-black text-slate-500 dark:text-slate-400 uppercase">15 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Actions (Desktop Only - Inside Column) -->
|
||||
<div class="hidden md:flex flex-col gap-4">
|
||||
<button class="w-full py-5 bg-blue-600 hover:bg-blue-500 rounded-2xl text-[14px] font-black text-white shadow-xl shadow-blue-600/20 transition-all active:scale-95">
|
||||
บทเรียนถัดไป
|
||||
</button>
|
||||
<button class="w-full py-5 bg-slate-800 hover:bg-slate-700 rounded-2xl text-[14px] font-black text-slate-300 transition-all ring-1 ring-white/10">
|
||||
บทเรียนก่อนหน้า
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Bottom Bar (Mobile Only) -->
|
||||
<div v-if="activeTab === 'details'" class="md:hidden fixed bottom-0 inset-x-0 p-4 bg-white dark:bg-slate-900/90 dark:backdrop-blur-xl border-t border-slate-300 dark:border-white/5 z-[100] flex gap-3 transition-colors">
|
||||
<button class="flex-1 py-4 bg-slate-800 rounded-xl text-xs font-black text-slate-300 ring-1 ring-white/10">
|
||||
ย้อนกลับ
|
||||
</button>
|
||||
<button class="flex-[2] py-4 bg-blue-600 rounded-xl text-xs font-black text-white shadow-lg shadow-blue-600/20">
|
||||
บทเรียนถัดไป
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.learning-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
grid-template-rows: 56px 1fr;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
color: #1e293b;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) .learning-shell {
|
||||
background: #0F172A;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.learning-header {
|
||||
grid-column: 1 / -1;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 100;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) .learning-header {
|
||||
background: #1e293b;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.learning-sidebar {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
overflow-y: auto;
|
||||
z-index: 90;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) .learning-sidebar {
|
||||
background: #111827;
|
||||
border-right-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
background: #ffffff;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) .main-container {
|
||||
background: #0B0F1A;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.main-container {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lesson-item {
|
||||
padding: 14px 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
color: #000000;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.lesson-item:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:global(.dark) .lesson-item {
|
||||
color: #e2e8f0;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.01);
|
||||
}
|
||||
|
||||
:global(.dark) .lesson-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
.active-lesson {
|
||||
background-color: #f3f4f6;
|
||||
color: #000000;
|
||||
box-shadow: inset 4px 0 0 #3B82F6;
|
||||
}
|
||||
|
||||
:global(.dark) .active-lesson {
|
||||
background-color: #1E293B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chapter-header {
|
||||
background: #f3f4f6;
|
||||
color: #000000;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
transition: all 0.2s;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
:global(.dark) .chapter-header {
|
||||
background: #0F172A;
|
||||
color: #ffffff;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.learning-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.learning-shell { grid-template-columns: 1fr; }
|
||||
.learning-sidebar {
|
||||
position: fixed;
|
||||
left: -320px;
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
width: 320px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.learning-sidebar.open { transform: translateX(320px); }
|
||||
}
|
||||
</style>
|
||||
319
Frontend-Learner/pages/classroom/quiz.vue
Normal file
319
Frontend-Learner/pages/classroom/quiz.vue
Normal file
|
|
@ -0,0 +1,319 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file quiz.vue
|
||||
* @description Quiz Interface.
|
||||
* Manages the entire quiz lifecycle: Start -> Taking -> Results -> Review.
|
||||
* Features a timer, question navigation, and detailed result analysis.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'แบบทดสอบ - e-Learning'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// Quiz State Management
|
||||
// Tracks the current screen/step in the quiz flow
|
||||
const currentScreen = ref<'start' | 'taking' | 'result' | 'review'>('start')
|
||||
const timeLeft = ref(30 * 60) // 30 minutes in seconds
|
||||
let timerInterval: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
// Display formatted time (MM:SS)
|
||||
const timerDisplay = computed(() => {
|
||||
const minutes = Math.floor(timeLeft.value / 60)
|
||||
const seconds = timeLeft.value % 60
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||
})
|
||||
|
||||
const showReview = () => {
|
||||
currentScreen.value = 'review'
|
||||
}
|
||||
|
||||
const startQuiz = () => {
|
||||
currentScreen.value = 'taking'
|
||||
// Start countdown
|
||||
timerInterval = setInterval(() => {
|
||||
if (timeLeft.value > 0) timeLeft.value--
|
||||
else submitQuiz(true)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const submitQuiz = (auto = false) => {
|
||||
if (auto || confirm('คุณแน่ใจหรือไม่ว่าต้องการส่งคำตอบ?')) {
|
||||
if (timerInterval) clearInterval(timerInterval)
|
||||
currentScreen.value = 'result'
|
||||
}
|
||||
}
|
||||
|
||||
const confirmExit = () => {
|
||||
if (currentScreen.value === 'taking') {
|
||||
if (confirm('คุณกำลังทำแบบทดสอบอยู่ หากออกตอนนี้ความคืบหน้าจะหายไป ยืนยันที่จะออก?')) {
|
||||
router.push('/classroom/learning')
|
||||
}
|
||||
} else {
|
||||
router.push('/classroom/learning')
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timerInterval) clearInterval(timerInterval)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="quiz-shell min-h-screen bg-white dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 antialiased selection:bg-blue-500/20 transition-colors">
|
||||
<!-- Header: Precise matching of the image -->
|
||||
<header class="h-14 bg-white dark:bg-[#161b22] fixed top-0 inset-x-0 z-[100] flex items-center px-6 border-b border-slate-300 dark:border-white/5 transition-colors">
|
||||
<div class="flex items-center">
|
||||
<button class="flex items-center gap-2 text-[11px] font-bold text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors" @click="confirmExit">
|
||||
<span>←</span>
|
||||
<span>ออกจากแบบทดสอบ</span>
|
||||
</button>
|
||||
<div class="w-[1px] h-4 bg-slate-300 dark:bg-white/10 mx-4"/>
|
||||
<h1 class="text-[12px] font-black text-slate-900 dark:text-white uppercase tracking-tight">แบบทดสอบท้ายบท: พื้นฐาน UX</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="pt-14 h-screen flex items-center justify-center overflow-y-auto px-4 custom-scrollbar">
|
||||
|
||||
<!-- 1. START SCREEN (MATCHING IMAGE) -->
|
||||
<!-- Displays quiz info, instructions, and start button -->
|
||||
<div v-if="currentScreen === 'start'" class="w-full max-w-[640px] animate-fade-in py-12">
|
||||
<div class="bg-white dark:bg-[#1e293b]/50 border border-slate-300 dark:border-white/5 rounded-[32px] p-8 md:p-14 shadow-lg dark:shadow-2xl dark:backdrop-blur-sm relative overflow-hidden transition-colors">
|
||||
|
||||
<!-- Top Icon Wrapper -->
|
||||
<div class="flex justify-center mb-10">
|
||||
<div class="w-20 h-20 rounded-3xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center shadow-inner">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<path d="M10 12h4"/><path d="M10 16h4"/><path d="M10 8h1"/>
|
||||
<circle cx="16" cy="16" r="3" fill="currentColor" class="text-orange-500 opacity-80" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-[32px] font-black text-slate-900 dark:text-white mb-2 tracking-tight">แบบทดสอบท้ายบท</h2>
|
||||
<p class="text-[13px] font-bold text-slate-700 dark:text-slate-500 uppercase tracking-widest leading-none">เบื้องต้นการออกแบบ UX/UI</p>
|
||||
</div>
|
||||
|
||||
<!-- Instruction Box -->
|
||||
<div class="bg-[#0b121f]/80 p-8 rounded-3xl mb-8 border border-white/5">
|
||||
<h3 class="text-[12px] font-black text-slate-400 mb-6 uppercase tracking-[0.2em] flex items-center gap-2">
|
||||
คำชี้แจง
|
||||
</h3>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
||||
<span class="text-[14px] text-slate-300 font-medium leading-relaxed">แบบทดสอบนี้มีทั้งหมด <strong class="text-white">10 ข้อ</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
||||
<span class="text-[14px] text-slate-300 font-medium leading-relaxed">เกณฑ์การผ่าน <strong class="text-white">80% ขึ้นไป</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
||||
<span class="text-[14px] text-slate-300 font-medium leading-relaxed">เวลาในการทำ: <strong class="text-white">30 นาที</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
|
||||
<span class="text-[14px] text-slate-300 font-medium leading-relaxed">ไม่สามารถหยุดเวลาชั่วคราวได้เมื่อเริ่มทำแบบทดสอบแล้ว</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="text-[13px] font-black text-slate-500 mb-10 flex items-center justify-between px-2">
|
||||
<span>คะแนนที่ดีที่สุด: <span class="text-white">-</span></span>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<button
|
||||
class="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[20px] font-black text-[14px] tracking-wider transition-all shadow-xl shadow-blue-600/20 active:scale-[0.98]"
|
||||
@click="startQuiz"
|
||||
>
|
||||
เริ่มทำแบบทดสอบ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. TAKING SCREEN -->
|
||||
<!-- Quiz Interface with Timer, Question, and Options -->
|
||||
<div v-if="currentScreen === 'taking'" class="w-full max-w-[840px] animate-fade-in py-12">
|
||||
<div class="bg-[#1e293b]/50 border border-white/5 rounded-[32px] p-8 md:p-14 shadow-2xl backdrop-blur-sm">
|
||||
<div class="flex items-center justify-between mb-10 pb-6 border-b border-white/5">
|
||||
<div>
|
||||
<div class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-2">ข้อที่ 1 จาก 10</div>
|
||||
<!-- Progress Line -->
|
||||
<div class="w-48 h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500" style="width: 10%;"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Timer Display -->
|
||||
<div class="flex items-center gap-3 px-5 py-2.5 bg-amber-500/10 border border-amber-500/20 rounded-2xl text-amber-500">
|
||||
<span class="text-sm">⏱</span>
|
||||
<span class="text-[15px] font-black font-mono tracking-widest">{{ timerDisplay }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-12">
|
||||
<h2 class="text-[22px] font-black text-white leading-tight mb-8">ข้อใดต่อไปนี้คือหลักการแรกของ User Experience (UX) ตามโมเดลของ Peter Morville?</h2>
|
||||
|
||||
<!-- Question Options -->
|
||||
<div class="space-y-4">
|
||||
<button v-for="i in 4" :key="i" class="w-full p-6 text-left rounded-2xl border border-white/5 bg-white/5 hover:bg-white/10 transition-all flex items-center gap-4 group">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-slate-700 flex items-center justify-center group-hover:border-blue-500 transition-colors">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-blue-500 opacity-0 group-focus:opacity-100"/>
|
||||
</div>
|
||||
<span class="text-[15px] font-medium text-slate-300">ตัวเลือกที่ {{ i }} สำหรับคำตอบที่เป็นไปได้</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<button class="px-8 py-3 text-slate-500 font-bold hover:text-white transition-colors">ย้อนกลับ</button>
|
||||
<button class="px-10 py-4 bg-blue-600 text-white rounded-2xl font-black text-sm shadow-lg shadow-blue-600/20" @click="submitQuiz(false)">ถัดไป</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. RESULT SCREEN (MATCHING IMAGE) -->
|
||||
<!-- Displays score, status, and summary stats -->
|
||||
<div v-if="currentScreen === 'result'" class="w-full max-w-[640px] animate-fade-in py-12">
|
||||
<div class="bg-[#1e293b]/50 border border-white/5 rounded-[40px] p-10 md:p-14 shadow-2xl text-center backdrop-blur-sm">
|
||||
<!-- Trophy Icon -->
|
||||
<div class="w-20 h-20 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mx-auto mb-10 shadow-inner">
|
||||
<span class="text-4xl">🏆</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-[32px] font-black text-white mb-2 tracking-tight">ยินดีด้วยคุณสอบผ่าน!</h2>
|
||||
<p class="text-[13px] font-bold text-slate-500 uppercase tracking-widest mb-12">คุณทำคะแนนได้ยอดเยี่ยมและผ่านเกณฑ์การทดสอบ</p>
|
||||
|
||||
<!-- Stats Boxes -->
|
||||
<div class="grid grid-cols-3 gap-4 mb-14">
|
||||
<div class="p-6 rounded-[24px] bg-[#0b121f]/60 border border-white/5 shadow-inner">
|
||||
<div class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] mb-3">คะแนน</div>
|
||||
<div class="text-[20px] font-black text-blue-500">90%</div>
|
||||
</div>
|
||||
<div class="p-6 rounded-[24px] bg-[#0b121f]/60 border border-white/5 shadow-inner">
|
||||
<div class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] mb-3">ตอบถูก</div>
|
||||
<div class="text-[20px] font-black text-emerald-500">9/10</div>
|
||||
</div>
|
||||
<div class="p-6 rounded-[24px] bg-[#0b121f]/60 border border-white/5 shadow-inner">
|
||||
<div class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] mb-3">เวลาที่ใช้</div>
|
||||
<div class="text-[20px] font-black text-white">12:45</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="space-y-4">
|
||||
<button
|
||||
class="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[24px] font-black text-[14px] tracking-wider transition-all shadow-xl shadow-blue-600/20"
|
||||
@click="showReview"
|
||||
>
|
||||
ดูเฉลย
|
||||
</button>
|
||||
<NuxtLink
|
||||
to="/dashboard"
|
||||
class="w-full py-5 bg-[#1e293b] hover:bg-[#253347] text-slate-400 hover:text-white rounded-[24px] font-black text-[14px] tracking-wider transition-all border border-white/5 block"
|
||||
>
|
||||
กลับไปหน้าหลัก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. REVIEW (เฉลย) SCREEN -->
|
||||
<!-- Detailed review of questions with correct/incorrect indicators and explanations -->
|
||||
<div v-if="currentScreen === 'review'" class="w-full max-w-[840px] animate-fade-in py-12">
|
||||
<div class="mb-10 flex items-center justify-between">
|
||||
<h2 class="text-[24px] font-black text-white tracking-tight">ดูเฉลยและทบทวนรายข้อ</h2>
|
||||
<button class="text-[13px] font-black text-slate-400 hover:text-white transition-colors flex items-center gap-2" @click="currentScreen = 'result'"/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Review Item: Correct Answer -->
|
||||
<div class="bg-[#1e293b]/40 border border-emerald-500/20 rounded-[32px] p-8 md:p-10 shadow-xl backdrop-blur-sm relative overflow-hidden group">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-emerald-500"/>
|
||||
<div class="flex items-center gap-2 mb-6 text-[10px] font-black uppercase tracking-widest">
|
||||
<span class="text-emerald-500">✓ ตอบถูก</span>
|
||||
<span class="text-slate-600">• ข้อที่ 1</span>
|
||||
</div>
|
||||
<h3 class="text-[18px] font-black text-white leading-tight mb-8">ข้อใดต่อไปนี้อธิบายกระบวนการออกแบบ "Double Diamond" ได้ดีที่สุด?</h3>
|
||||
|
||||
<div class="space-y-3 mb-8">
|
||||
<div class="p-5 rounded-2xl bg-emerald-500/5 border border-emerald-500/20 text-emerald-400 font-bold text-[14px] flex items-center justify-between">
|
||||
<span>กระบวนการแตกประเด็นเพื่อค้นหา/พัฒนา และสรุปประเด็นเพื่อกำหนด/ส่งมอบ</span>
|
||||
<span class="text-xs">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#0b121f]/60 p-6 rounded-2xl border border-white/5">
|
||||
<h4 class="text-[11px] font-black text-slate-500 uppercase tracking-widest mb-3">คำอธิบาย:</h4>
|
||||
<p class="text-[14px] text-slate-400 leading-relaxed font-medium">
|
||||
Double Diamond ประกอบด้วย 4 ขั้นตอนหลัก: Discover, Define, Develop และ Deliver ซึ่งเน้นการสลับกันระหว่างความคิดสร้างสรรค์แบบเปิดกว้าง (Divergent) และการคัดกรองเพื่อให้ได้ข้อสรุป (Convergent)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Review Item: Incorrect Answer -->
|
||||
<div class="bg-[#1e293b]/40 border border-red-500/20 rounded-[32px] p-8 md:p-10 shadow-xl backdrop-blur-sm relative overflow-hidden">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-red-500"/>
|
||||
<div class="flex items-center gap-2 mb-6 text-[10px] font-black uppercase tracking-widest">
|
||||
<span class="text-red-500">✗ ตอบผิด</span>
|
||||
<span class="text-slate-600">• ข้อที่ 2</span>
|
||||
</div>
|
||||
<h3 class="text-[18px] font-black text-white leading-tight mb-8">เป้าหมายหลักของ User Research คืออะไร?</h3>
|
||||
|
||||
<div class="space-y-3 mb-8">
|
||||
<div class="p-5 rounded-2xl bg-white/5 border border-red-500/30 text-red-400 font-medium text-[14px]">
|
||||
<span class="opacity-50 line-through">เพื่อให้แน่ใจว่าดีไซน์ที่ทำออกมาสวยงามที่สุด</span>
|
||||
<span class="ml-2 text-[10px] bg-red-500/20 px-2 py-0.5 rounded text-red-500">คำตอบของคุณ</span>
|
||||
</div>
|
||||
<div class="p-5 rounded-2xl bg-emerald-500/5 border border-emerald-500/20 text-emerald-400 font-bold text-[14px] flex items-center justify-between">
|
||||
<span>เพื่อทำความเข้าใจความต้องการ ปัญหา และพฤติกรรมของผู้ใช้ที่แท้จริง</span>
|
||||
<span class="text-[10px] bg-emerald-500/20 px-2 py-0.5 rounded text-emerald-400">คำตอบที่ถูกต้อง</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#0b121f]/60 p-6 rounded-2xl border border-white/5">
|
||||
<h4 class="text-[11px] font-black text-slate-500 uppercase tracking-widest mb-3">คำอธิบาย:</h4>
|
||||
<p class="text-[14px] text-slate-400 leading-relaxed font-medium">
|
||||
User Research ไม่ใช่แค่การดูความสวยงาม แต่คือการหา "Insights" เพื่อนำมาแก้ปัญหาให้ตรงจุด ลดความเสี่ยงในการสร้างของที่ผู้ใช้งานไม่ได้ต้องการจริงๆ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<button class="px-10 py-4 bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white rounded-[20px] font-black text-sm border border-white/5 transition-all" @click="currentScreen = 'result'">กลับไปหน้าสรุปผล</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
142
Frontend-Learner/pages/dashboard/announcements.vue
Normal file
142
Frontend-Learner/pages/dashboard/announcements.vue
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file announcements.vue
|
||||
* @description Page displaying system and course-related announcements.
|
||||
* Uses the default layout and requires authentication.
|
||||
*/
|
||||
|
||||
// Define page metadata: usage of 'default' layout and 'auth' middleware
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
// Set page title for SEO
|
||||
useHead({
|
||||
title: 'ประกาศ - e-Learning'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<h1 style="font-size: 28px; font-weight: 700; margin-bottom: 24px;">ประกาศ</h1>
|
||||
|
||||
<!--
|
||||
Main Layout: 12-column Grid
|
||||
- Left Column (span-8): Main announcements content
|
||||
- Right Column (span-4): Categories/Filter sidebar
|
||||
-->
|
||||
<div class="grid-12">
|
||||
|
||||
<!-- ==========================================
|
||||
MAIN CONTENT AREA (Left)
|
||||
========================================== -->
|
||||
<div class="col-span-8">
|
||||
|
||||
<!-- Feature 1: Critical System Announcement -->
|
||||
<div class="card mb-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="status-pill status-warning">สำคัญ</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">24 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<h2 class="font-bold mb-4" style="font-size: 1.25rem;">แจ้งปิดปรับปรุงระบบ</h2>
|
||||
<p class="mb-4">เราจะทำการปิดปรับปรุงระบบในวันที่ 25 ธ.ค. เวลา 02:00 - 04:00 น. ขออภัยในความไม่สะดวก</p>
|
||||
<!-- Attachment Block -->
|
||||
<div class="flex items-center gap-2 p-3 rounded" style="background: var(--neutral-50); border: 1px solid var(--border-color); width: fit-content;">
|
||||
<span>📎</span> <span class="text-sm font-bold">ตารางการปิดปรับปรุง.pdf</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: UX/UI Course Update -->
|
||||
<div class="card mb-4" style="border-left: 4px solid var(--primary);">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<div>
|
||||
<span class="status-pill status-neutral mb-2">เบื้องต้นการออกแบบ UX/UI</span>
|
||||
<h3 class="font-bold">เริ่มเปิดหลักสูตรเดือนมกราคมแล้ว!</h3>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">23 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">นักเรียนที่ลงทะเบียนไว้ สามารถเริ่มเข้าเรียนบทนำได้ตั้งแต่วันนี้เป็นต้นไป...</p>
|
||||
<NuxtLink to="/browse/discovery" class="text-sm" style="color: var(--primary);">ดูรายละเอียดคอร์ส</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: Accessibility (WCAG) Material -->
|
||||
<div class="card mb-4" style="border-left: 4px solid var(--success);">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<div>
|
||||
<span class="status-pill status-neutral mb-2">การเข้าถึงเว็บ (WCAG)</span>
|
||||
<h3 class="font-bold">ดาวน์โหลดเอกสารประกอบการเรียนได้แล้ว</h3>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">22 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">เราได้เพิ่มไฟล์ PDF สรุปเกณฑ์ WCAG 2.2 ในส่วนของเอกสารประกอบการเรียนแล้ว...</p>
|
||||
<!-- Small Attachment -->
|
||||
<div class="flex items-center gap-2 p-2 rounded mt-2" style="background: var(--neutral-50); border: 1px dotted var(--border-color); width: fit-content;">
|
||||
<span>📄</span> <span class="text-xs">WCAG_2.2_Summary.pdf</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: React Course Update -->
|
||||
<div class="card mb-4" style="border-left: 4px solid var(--warning);">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<div>
|
||||
<span class="status-pill status-neutral mb-2">รูปแบบ React ขั้นสูง</span>
|
||||
<h3 class="font-bold">อัปเดตบทเรียนใหม่: React Server Components</h3>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">21 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">เพิ่มเนื้อหาการใช้งาน RSC และการจัดการ State ใน Next.js 14...</p>
|
||||
<NuxtLink to="/classroom/learning" class="btn btn-secondary text-sm" style="width: fit-content;">เข้าสู่บทเรียน</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: General New Course -->
|
||||
<div class="card mb-4">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<h3 class="font-bold">คอร์สใหม่: Advanced Python</h3>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">20 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">พบกับคอร์สใหม่ล่าสุด เรียนรู้โครงสร้างข้อมูล Python...</p>
|
||||
<a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
|
||||
</div>
|
||||
|
||||
<!-- Announcement: Platform Update -->
|
||||
<div class="card mb-4">
|
||||
<div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
|
||||
<h3 class="font-bold">ยินดีต้อนรับสู่ดีไซน์ใหม่!</h3>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">15 ธ.ค. 2024</span>
|
||||
</div>
|
||||
<p class="text-slate-700 dark:text-slate-300 mb-2">เราปรับโฉมใหม่ไฉไลกว่าเดิม เพื่อการใช้งานที่ดียิ่งขึ้น...</p>
|
||||
<a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
SIDEBAR (Right)
|
||||
Category Filters
|
||||
========================================== -->
|
||||
<div class="col-span-4">
|
||||
<div class="card">
|
||||
<h3 class="font-bold mb-4">หมวดหมู่</h3>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<!-- Filter Option: All -->
|
||||
<li class="flex justify-between items-center p-2 rounded cursor-pointer" style="background: var(--neutral-50);">
|
||||
<span>ทั้งหมด</span>
|
||||
<span class="text-muted">15</span>
|
||||
</li>
|
||||
<!-- Filter Option: System Updates -->
|
||||
<li class="flex justify-between items-center p-2 rounded cursor-pointer">
|
||||
<span>อัปเดตระบบ</span>
|
||||
<span class="text-muted">3</span>
|
||||
</li>
|
||||
<!-- Filter Option: Course News -->
|
||||
<li class="flex justify-between items-center p-2 rounded cursor-pointer">
|
||||
<span>ข่าวสารคอร์ส</span>
|
||||
<span class="text-muted">11</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
209
Frontend-Learner/pages/dashboard/index.vue
Normal file
209
Frontend-Learner/pages/dashboard/index.vue
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file home.vue
|
||||
* @description Dashboard / Home Page.
|
||||
* Displays the user's dashboard with a welcome message, current learning progress, and course recommendations.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Dashboard - e-Learning'
|
||||
})
|
||||
|
||||
// Mock data: Recent Course Progress
|
||||
const recentCourse = {
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
lesson: 'บทที่ 3: พื้นฐานการวาดโครงร่าง (Wireframing Basics)',
|
||||
progress: 65,
|
||||
image: 'https://images.unsplash.com/photo-1586717791821-3f44a563de4c?w=400&auto=format&fit=crop&q=60'
|
||||
}
|
||||
|
||||
// Mock data: Recommended Courses
|
||||
const recommendedCourses = [
|
||||
{
|
||||
title: 'Advanced React Patterns',
|
||||
category: 'Development',
|
||||
duration: '4h 30m',
|
||||
image: 'https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&auto=format&fit=crop&q=60',
|
||||
badge: 'New',
|
||||
badgeType: 'success'
|
||||
},
|
||||
{
|
||||
title: 'Data Science Fundamentals',
|
||||
category: 'Data Science',
|
||||
duration: '12h 0m',
|
||||
image: 'https://images.unsplash.com/photo-1551288049-bbda38a0617f?w=400&auto=format&fit=crop&q=60',
|
||||
badge: 'Popular',
|
||||
badgeType: 'warning'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- Welcome Header Section -->
|
||||
<div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-10 md:p-14 text-white shadow-lg dark:shadow-2xl dark:shadow-blue-900/20 transition-all">
|
||||
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div>
|
||||
<h1 class="text-4xl md:text-5xl font-black mb-3 slide-up tracking-tight text-white dark:text-white">ยินดีต้อนรับกลับ, สมชาย!</h1>
|
||||
<p class="text-lg slide-up font-medium text-blue-100" style="animation-delay: 0.1s;">วันนี้เป็นวันที่ดีสำหรับการเรียนรู้สิ่งใหม่ๆ มาเก็บความรู้เพิ่มกันเถอะ</p>
|
||||
</div>
|
||||
<div class="stats-mini flex gap-6 slide-up" style="animation-delay: 0.2s;"/>
|
||||
</div>
|
||||
<!-- Decorative Background elements -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 dark:from-blue-600 dark:via-blue-700 dark:to-indigo-900 -z-0"/>
|
||||
<div class="absolute -top-20 -right-20 w-80 h-80 bg-white/10 blur-[100px] rounded-full"/>
|
||||
<div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-400/20 blur-[100px] rounded-full"/>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="lg:col-span-12">
|
||||
<!-- Section: Continue Learning -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h2 class="text-2xl font-black flex items-center gap-3 tracking-tight text-slate-900 dark:text-white">
|
||||
<span class="w-1.5 h-8 bg-blue-500 rounded-full shadow-[0_0_15px_rgba(59,130,246,0.5)]"/>
|
||||
เรียนต่อจากเดิม
|
||||
</h2>
|
||||
<NuxtLink to="/classroom/learning" class="text-sm font-black text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors uppercase tracking-widest">เข้าสู่บทเรียนเต็มตัว →</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Featured Current Course Card -->
|
||||
<div class="p-0 overflow-hidden group mb-12 border border-slate-200 dark:border-white/5 rounded-3xl shadow-sm dark:shadow-2xl transition-all hover:-translate-y-1 dark:hover:-translate-y-1" style="background-color: var(--bg-surface);">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<!-- Course Image -->
|
||||
<div class="md:w-2/5 aspect-video md:aspect-auto overflow-hidden relative rounded-t-3xl md:rounded-l-3xl md:rounded-tr-none">
|
||||
<img :src="recentCourse.image" :alt="recentCourse.title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" >
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/30 via-transparent to-transparent opacity-40 dark:opacity-60 dark:from-[#0f172a]"/>
|
||||
</div>
|
||||
<!-- Course Details & Progress -->
|
||||
<div class="p-8 md:p-10 flex-1 flex flex-col justify-center" style="background-color: var(--bg-surface);">
|
||||
<span class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-700 dark:text-blue-400 mb-3">Currently Learning</span>
|
||||
<h3 class="text-3xl font-black mb-2 leading-tight text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">{{ recentCourse.title }}</h3>
|
||||
<p class="text-slate-700 dark:text-slate-400 text-base mb-8 font-medium">{{ recentCourse.lesson }}</p>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="mt-auto bg-slate-100 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-200 dark:border-white/5">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-black text-slate-800 dark:text-slate-500 uppercase tracking-widest">Progress</span>
|
||||
<span class="text-sm font-black text-blue-700 dark:text-blue-400">{{ recentCourse.progress }}%</span>
|
||||
</div>
|
||||
<div class="h-2.5 w-full bg-slate-300 dark:bg-slate-700 rounded-full overflow-hidden shadow-inner">
|
||||
<div class="h-full bg-gradient-to-r from-blue-600 to-blue-500 rounded-full shadow-[0_0_10px_rgba(59,130,246,0.3)] transition-all duration-1000" :style="{ width: `${recentCourse.progress}%` }"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section: Recommended Courses -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-black flex items-center gap-3 tracking-tight text-black dark:text-white">
|
||||
<span class="w-1.5 h-8 bg-emerald-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,0.5)]"/>
|
||||
คอร์สเรียนแนะนำ
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Recommended Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div v-for="(course, idx) in recommendedCourses" :key="idx" class="p-0 overflow-hidden group border border-slate-200 dark:border-white/5 rounded-3xl shadow-sm dark:shadow-xl transition-all hover:-translate-y-1 dark:hover:-translate-y-1" style="background-color: var(--bg-surface);">
|
||||
<div class="h-48 overflow-hidden relative rounded-t-3xl">
|
||||
<img :src="course.image" :alt="course.title" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" >
|
||||
<span v-if="course.badge" :class="`absolute top-5 left-5 status-pill status-${course.badgeType} shadow-lg font-black text-[9px]`">{{ course.badge }}</span>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-slate-900/20 dark:from-[#1e293b] to-transparent"/>
|
||||
</div>
|
||||
<div class="p-7" style="background-color: var(--bg-surface);">
|
||||
<div class="text-[10px] font-black text-slate-700 dark:text-slate-500 uppercase tracking-[0.2em] mb-2">{{ course.category }}</div>
|
||||
<h4 class="font-black text-xl mb-6 text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">{{ course.title }}</h4>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-700 dark:text-slate-400 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-600 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{{ course.duration }}
|
||||
</span>
|
||||
<button class="text-[11px] font-black text-blue-700 dark:text-blue-500 uppercase tracking-widest hover:text-blue-800 dark:hover:text-blue-400 transition-colors">ดูรายละเอียด</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-premium {
|
||||
background: #ffffff;
|
||||
border-radius: 2.5rem;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-premium:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
:global(.dark) .card-premium {
|
||||
background: #1e293b;
|
||||
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
:global(.dark) .card-premium:hover {
|
||||
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
:global(.app-main) {
|
||||
background-color: #ffffff;
|
||||
color: #1e293b;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) :global(.app-main) {
|
||||
background-color: #0f172a;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.glass-bright {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
@apply px-4 py-1.5 rounded-full font-black uppercase tracking-widest border;
|
||||
}
|
||||
.status-success {
|
||||
@apply bg-emerald-500/10 text-emerald-400 border-emerald-500/30;
|
||||
}
|
||||
.status-warning {
|
||||
@apply bg-amber-500/10 text-amber-400 border-amber-500/30;
|
||||
}
|
||||
|
||||
:global(.app-main) {
|
||||
background-color: #ffffff;
|
||||
color: #1e293b;
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) :global(.app-main) {
|
||||
background-color: #0f172a;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
</style>
|
||||
213
Frontend-Learner/pages/dashboard/my-courses.vue
Normal file
213
Frontend-Learner/pages/dashboard/my-courses.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file my-courses.vue
|
||||
* @description My Courses Page.
|
||||
* Displays enrolled courses with filters for progress/completed.
|
||||
* Handles enrollment success modals and certificate downloads.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'คอร์สของฉัน - e-Learning'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const showEnrollModal = ref(false)
|
||||
const showCertModal = ref(false)
|
||||
const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
|
||||
|
||||
// Check URL query parameters to show 'Enrollment Success' modal
|
||||
onMounted(() => {
|
||||
if (route.query.enrolled) {
|
||||
showEnrollModal.value = true
|
||||
}
|
||||
})
|
||||
|
||||
// Mock Enrolled Courses Data
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'เบื้องต้นการออกแบบ UX/UI',
|
||||
progress: 65,
|
||||
category: 'progress'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'การเข้าถึงเว็บ (WCAG)',
|
||||
progress: 10,
|
||||
category: 'progress'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'HTML5 พื้นฐาน',
|
||||
progress: 100,
|
||||
completed: true,
|
||||
category: 'completed'
|
||||
}
|
||||
]
|
||||
|
||||
// Computed property to filter courses
|
||||
const filteredCourses = computed(() => {
|
||||
if (activeFilter.value === 'all') return courses
|
||||
return courses.filter(c => c.category === activeFilter.value)
|
||||
})
|
||||
|
||||
const filterCourses = (filter: 'all' | 'progress' | 'completed') => {
|
||||
activeFilter.value = filter
|
||||
}
|
||||
|
||||
// Mock certificate download action
|
||||
const downloadCertificate = () => {
|
||||
showCertModal.value = false
|
||||
alert('เริ่มดาวน์โหลด PDF...')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Page Header & Filters -->
|
||||
<div class="flex justify-between items-center mb-6 mobile-stack">
|
||||
<h1 style="font-size: 28px; font-weight: 700;">คอร์สของฉัน</h1>
|
||||
<!-- Filter Tabs -->
|
||||
<div class="flex gap-2" style="overflow-x: auto; padding-bottom: 4px; width: 100%; justify-content: flex-start;">
|
||||
<button
|
||||
:class="activeFilter === 'all' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('all')"
|
||||
>
|
||||
ทั้งหมด
|
||||
</button>
|
||||
<button
|
||||
:class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('progress')"
|
||||
>
|
||||
กำลังเรียน
|
||||
</button>
|
||||
<button
|
||||
:class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'"
|
||||
style="white-space: nowrap;"
|
||||
@click="filterCourses('completed')"
|
||||
>
|
||||
เรียนจบแล้ว
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Courses Grid -->
|
||||
<div class="my-courses-grid">
|
||||
<template v-for="course in filteredCourses" :key="course.id">
|
||||
<!-- In Progress Course Card -->
|
||||
<CourseCard
|
||||
v-if="!course.completed"
|
||||
:title="course.title"
|
||||
:progress="course.progress"
|
||||
show-continue
|
||||
/>
|
||||
<!-- Completed Course Card -->
|
||||
<CourseCard
|
||||
v-else
|
||||
:title="course.title"
|
||||
:completed="true"
|
||||
show-certificate
|
||||
show-study-again
|
||||
@view-certificate="showCertModal = true"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredCourses.length === 0" class="empty-state">
|
||||
<div class="empty-state-icon">📚</div>
|
||||
<h3 class="empty-state-title">ยังไม่มีคอร์สในหมวดหมู่นี้</h3>
|
||||
<p class="empty-state-description">คุณยังไม่มีคอร์สเรียนในส่วนนี้ ลองเลือกดูคอร์สที่น่าสนใจในระบบของเรา</p>
|
||||
<NuxtLink to="/browse/discovery" class="btn btn-primary">ไปที่รายการคอร์ส</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Enrollment Success -->
|
||||
<div
|
||||
v-if="showEnrollModal"
|
||||
style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; padding: 20px;"
|
||||
>
|
||||
<div class="card" style="width: 400px; text-align: center; max-width: 90%;">
|
||||
<div style="width: 64px; height: 64px; background: var(--success); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px;">
|
||||
✓
|
||||
</div>
|
||||
<h2 class="font-bold mb-2">ลงทะเบียนสำเร็จ!</h2>
|
||||
<p class="text-muted mb-6">คุณได้ลงทะเบียนคอร์ส <strong>เบื้องต้นการออกแบบ UX/UI</strong> เรียบร้อยแล้ว</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<NuxtLink to="/classroom/learning" class="btn btn-primary w-full">เริ่มเรียนทันที</NuxtLink>
|
||||
<button class="btn btn-secondary w-full" @click="showEnrollModal = false">ไว้ทีหลัง</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Certificate Preview -->
|
||||
<div
|
||||
v-if="showCertModal"
|
||||
style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; padding: 20px;"
|
||||
>
|
||||
<div class="cert-container">
|
||||
<!-- Close Button -->
|
||||
<button style="position: absolute; top: 15px; right: 20px; border: none; background: none; font-size: 32px; cursor: pointer; color: #1E293B; z-index: 10;" @click="showCertModal = false">×</button>
|
||||
|
||||
<div class="cert-inner">
|
||||
<h1 class="cert-title">ใบประกาศนียบัตรจบหลักสูตร</h1>
|
||||
<div style="width: 100px; height: 2px; background: #D4AF37; margin: 0 auto 24px;"/>
|
||||
|
||||
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ขอมอบใบประกาศนี้เพื่อแสดงว่า</p>
|
||||
|
||||
<h2 class="cert-name">สมชาย ใจดี</h2>
|
||||
|
||||
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ได้ผ่านการอบรมและทดสอบความรู้ในหลักสูตร</p>
|
||||
|
||||
<h3 style="font-size: 24px; font-weight: 700; color: #3B82F6; margin-bottom: 30px;">HTML5 พื้นฐาน</h3>
|
||||
|
||||
<!-- Signature Section -->
|
||||
<div class="cert-footer">
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; font-style: italic; margin-left: auto; margin-right: auto;">Somchai K.</div>
|
||||
<div style="font-size: 12px; color: #64748B;">ลายเซ็นผู้อำนวยการ</div>
|
||||
</div>
|
||||
|
||||
<!-- Golden Seal -->
|
||||
<div style="width: 80px; height: 80px; background: #D4AF37; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; border: 4px double white; box-shadow: 0 0 0 4px #D4AF37; transform: rotate(-5deg); flex-shrink: 0;">
|
||||
<div style="font-size: 10px; font-weight: bold;">Certified</div>
|
||||
<div style="font-size: 16px; font-weight: 900;">ผ่าน</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; margin-left: auto; margin-right: auto;">15 ธันวาคม 2024</div>
|
||||
<div style="font-size: 12px; color: #64748B;">วันที่ออกใบประกาศ</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Button -->
|
||||
<div style="margin-top: 32px; text-align: center;">
|
||||
<button class="btn btn-primary" @click="downloadCertificate">
|
||||
⬇ ดาวน์โหลด PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-courses-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.my-courses-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
259
Frontend-Learner/pages/dashboard/profile.vue
Normal file
259
Frontend-Learner/pages/dashboard/profile.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file profile.vue
|
||||
* @description User Profile & Settings Page.
|
||||
* Allows users to view their profile details and toggle an edit mode to update information.
|
||||
* Features a premium design with glassmorphism and gradient effects.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'ตั้งค่าบัญชี - e-Learning'
|
||||
})
|
||||
|
||||
const { currentUser } = useAuth()
|
||||
const isEditing = ref(false)
|
||||
|
||||
// User Profile Data Management
|
||||
const userData = ref({
|
||||
firstName: currentUser.value.firstName,
|
||||
lastName: currentUser.value.lastName,
|
||||
email: currentUser.value.email,
|
||||
phone: '081-234-5678',
|
||||
joinDate: '12 ธ.ค. 2024',
|
||||
studentId: 'STU 68203',
|
||||
photoURL: '', // Added missing property
|
||||
prefix: 'นาย' // Added missing property
|
||||
})
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const toggleEdit = (edit: boolean) => {
|
||||
isEditing.value = edit
|
||||
}
|
||||
|
||||
const triggerUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleFileUpload = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (target.files && target.files[0]) {
|
||||
// Mock upload logic
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
userData.value.photoURL = e.target?.result as string
|
||||
}
|
||||
reader.readAsDataURL(target.files[0])
|
||||
}
|
||||
}
|
||||
|
||||
// Save Profile Updates (Mock Implementation)
|
||||
const saveProfile = () => {
|
||||
currentUser.value.firstName = userData.value.firstName
|
||||
currentUser.value.lastName = userData.value.lastName
|
||||
currentUser.value.email = userData.value.email
|
||||
isEditing.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
แก้ไขโปรไฟล์
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile View Card -->
|
||||
<!-- VIEW MODE: Display Profile Information -->
|
||||
<div v-if="!isEditing" class="card-premium overflow-hidden">
|
||||
<!-- Cover Banner -->
|
||||
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 h-32 w-full"/>
|
||||
<div class="px-8 pb-10 -mt-16">
|
||||
<div class="flex flex-col md:flex-row items-end gap-6 mb-10">
|
||||
<div class="relative flex-shrink-0">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="128"
|
||||
class="border-4 border-[#1e293b] shadow-2xl bg-slate-800"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="info-group">
|
||||
<span class="label">อีเมล</span>
|
||||
<p class="value">{{ userData.email }}</p>
|
||||
</div>
|
||||
<div class="info-group">
|
||||
<span class="label">เบอร์โทรศัพท์</span>
|
||||
<p class="value">{{ userData.phone }}</p>
|
||||
</div>
|
||||
<div class="info-group">
|
||||
<span class="label">สมัครสมาชิกเมื่อ</span>
|
||||
<p class="value">{{ userData.joinDate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Profile Card -->
|
||||
<!-- EDIT MODE: Edit Profile Form -->
|
||||
<div v-else class="card-premium p-8 md:p-12">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<button class="p-2 hover:bg-white/5 rounded-xl transition-colors" @click="toggleEdit(false)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Avatar Upload Section -->
|
||||
<div class="flex flex-col md:flex-row items-center gap-8 mb-12">
|
||||
<div class="relative group cursor-pointer" @click="triggerUpload">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="112"
|
||||
class="rounded-3xl border-2 border-white/5 bg-slate-800 group-hover:opacity-50 transition-all"
|
||||
/>
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<select v-model="userData.prefix" class="premium-input w-full">
|
||||
<option>นาย</option>
|
||||
<option>นาง</option>
|
||||
<option>นางสาว</option>
|
||||
</select>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<input type="password" class="premium-input w-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-white/5">
|
||||
<button class="btn-save-premium flex-1" @click="saveProfile">บันทึกข้อมูล</button>
|
||||
<button class="btn-cancel-premium md:w-32" @click="toggleEdit(false)">ยกเลิก</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.text-main {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-premium {
|
||||
background: #1e293b;
|
||||
border-radius: 2.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.info-group .label {
|
||||
@apply text-xs font-black uppercase tracking-widest text-slate-700 dark:text-slate-500 block mb-2;
|
||||
}
|
||||
.info-group .value {
|
||||
@apply text-lg font-bold text-slate-900 dark:text-slate-200;
|
||||
}
|
||||
|
||||
.premium-input {
|
||||
@apply bg-slate-100 dark:bg-slate-800/50 border border-slate-300 dark:border-white/5 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all;
|
||||
}
|
||||
|
||||
.btn-premium-edit {
|
||||
@apply flex items-center px-6 py-3 bg-blue-100 dark:bg-blue-600/10 text-blue-700 dark:text-blue-400 rounded-2xl text-sm font-black hover:bg-blue-600 hover:text-white transition-all border border-blue-300 dark:border-blue-500/20;
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
@apply px-6 py-2.5 bg-white dark:bg-white text-slate-900 dark:text-slate-900 rounded-xl text-xs font-black hover:bg-blue-50 transition-all;
|
||||
}
|
||||
|
||||
.btn-save-premium {
|
||||
@apply bg-blue-600 text-white rounded-2xl py-4 font-black hover:bg-blue-500 transition-all shadow-lg dark:shadow-blue-600/20;
|
||||
}
|
||||
|
||||
.btn-cancel-premium {
|
||||
@apply bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-400 rounded-2xl py-4 font-black hover:bg-slate-300 dark:hover:bg-slate-700 dark:hover:text-white transition-all;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-premium {
|
||||
@apply rounded-[2rem];
|
||||
}
|
||||
}
|
||||
</style>
|
||||
342
Frontend-Learner/pages/index.vue
Normal file
342
Frontend-Learner/pages/index.vue
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'landing',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors">
|
||||
<!-- Premium Background -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<!-- Animated Glows -->
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section min-h-[95vh] flex items-center relative overflow-hidden pt-32 pb-20">
|
||||
<div class="container relative z-10 w-full">
|
||||
<div class="grid-hero items-center">
|
||||
|
||||
<!-- Left Content -->
|
||||
<div class="hero-content">
|
||||
<div class="mb-10 slide-up">
|
||||
<span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)]">
|
||||
🚀 เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
|
||||
ยกระดับทักษะ <br>
|
||||
<span class="text-white">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
|
||||
</h1>
|
||||
<h2 class="hero-subtitle text-slate-300 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
|
||||
แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
|
||||
เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
|
||||
</h2>
|
||||
|
||||
<div class="hero-actions flex flex-wrap gap-6 mb-20 slide-up" style="animation-delay: 0.3s;">
|
||||
<NuxtLink to="/auth/register" class="btn-cta-premium group">
|
||||
สมัครเรียนฟรีวันนี้
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/browse" class="btn-outline-glass">
|
||||
เปิดดูคอร์สทั้งหมด
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Content (Visual) - Redesigned as a Preview/Showcase -->
|
||||
<div class="hero-visual flex justify-center items-center relative slide-up" style="animation-delay: 0.2s;">
|
||||
<!-- Preview Snapshot Container -->
|
||||
<div class="platform-preview-card glass-premium rotate-[-1deg] shadow-[0_50px_100px_rgba(0,0,0,0.6)] border border-white/10">
|
||||
<!-- Browser-like header -->
|
||||
<div class="preview-header border-b border-white/5 py-4 bg-white/5 flex items-center px-6">
|
||||
<div class="dots flex gap-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
</div>
|
||||
<div class="mx-auto bg-white/5 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">platform-elearning.com</div>
|
||||
</div>
|
||||
|
||||
<!-- Showcase Content -->
|
||||
<div class="preview-body p-8 space-y-8">
|
||||
<!-- Video Hero Preview -->
|
||||
<div class="relative aspect-video bg-gradient-to-br from-blue-900/50 to-indigo-900/50 rounded-3xl overflow-hidden group/vid border border-white/5">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center shadow-2xl group-hover/vid:scale-110 transition-transform">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white ml-1" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-4 left-6 right-6 h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[65%]"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course List Preview -->
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-white/[0.03] rounded-2xl border border-white/5">
|
||||
<div class="w-full h-20 bg-blue-400/10 rounded-xl mb-3"/>
|
||||
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
|
||||
<div class="h-2 bg-white/5 rounded w-1/2"/>
|
||||
</div>
|
||||
<div class="p-4 bg-white/[0.03] rounded-2xl border border-white/5">
|
||||
<div class="w-full h-20 bg-indigo-400/10 rounded-xl mb-3"/>
|
||||
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
|
||||
<div class="h-2 bg-white/5 rounded w-1/2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Feature Highlights (Marketing focused) -->
|
||||
<div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-emerald-500/20 rounded-xl flex items-center justify-center text-emerald-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white font-black text-sm">รับใบประกาศนียบัตร</div>
|
||||
<div class="text-slate-400 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float" style="animation-delay: -3s;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-blue-500/20 rounded-xl flex items-center justify-center text-blue-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white font-black text-sm">เรียนได้ทุกที่</div>
|
||||
<div class="text-slate-400 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Platform Info Section -->
|
||||
<section class="info-section py-40 bg-slate-900 relative transition-colors">
|
||||
<!-- Background detail -->
|
||||
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"/>
|
||||
|
||||
<div class="container relative z-10">
|
||||
<div class="text-center mb-28">
|
||||
<span class="text-blue-500 font-black tracking-[0.4em] text-[11px] uppercase mb-5 block">Why Choose Us</span>
|
||||
<h2 class="section-title text-5xl font-black mb-8 text-white tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
|
||||
<p class="section-desc max-w-2xl mx-auto text-slate-500 text-xl leading-relaxed">
|
||||
เราไม่ใช่แค่แพลตฟอร์มการเรียนรู้ แต่เราคือคู่หูที่จะช่วยพาคุณไปสู่จุดหมายที่ต้องการ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<!-- Feature 1 -->
|
||||
<div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
|
||||
<div class="w-20 h-20 rounded-[1.75rem] bg-blue-600/10 text-blue-500 flex items-center justify-center mb-10 border border-blue-500/20 group-hover:bg-blue-600 group-hover:text-white transition-colors duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">สื่อการเรียนระดับสูง</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">วิดีโอคุณภาพคมชัด พร้อมเอกสารประกอบการเรียนที่คัดสรรมาอย่างดีเพื่อความเข้าใจง่าย</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
|
||||
<div class="w-20 h-20 rounded-[1.75rem] bg-emerald-600/10 text-emerald-500 flex items-center justify-center mb-10 border border-emerald-500/20 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">วัดผลแบบอัจฉริยะ</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">ระบบ Quizz ออนไลน์ที่ช่วยประเมินความเข้าใจได้ทันที พร้อมวิเคราะห์จุดที่ควรปรับปรุง</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
|
||||
<div class="w-20 h-20 rounded-[1.75rem] bg-indigo-600/10 text-indigo-500 flex items-center justify-center mb-10 border border-indigo-500/20 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">ระบบติดตามผล</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">ดูความก้าวหน้าของตัวเองได้ทุกที่ทุกเวลา ผ่าน Dashboard ที่สรุปภาพรวมไว้อย่างลงตัว</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 0 48px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(3.5rem, 7vw, 5.5rem);
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-gradient-cyan {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.glass-premium {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.glass-tag-premium {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-cta-premium {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
padding: 1.5rem 3.5rem;
|
||||
border-radius: 1.5rem;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.btn-cta-premium:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-glass {
|
||||
padding: 1.5rem 3.5rem;
|
||||
border-radius: 1.5rem;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.btn-outline-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.platform-preview-card {
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
border-radius: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: 8rem;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(50px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-25px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.1; transform: scale(1); }
|
||||
50% { opacity: 0.15; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 10s linear infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.grid-hero {
|
||||
gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.grid-hero {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: 5rem;
|
||||
}
|
||||
.hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
.program-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
.stat-divider { display: none; }
|
||||
.program-stats { gap: 50px; }
|
||||
.hero-visual {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
.hidden-mobile {
|
||||
display: none;
|
||||
}
|
||||
.btn-cta-premium, .btn-outline-glass {
|
||||
width: 100%;
|
||||
padding: 1.25rem 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
Frontend-Learner/pages/loading-demo.vue
Normal file
142
Frontend-Learner/pages/loading-demo.vue
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Loading Demo - e-Learning'
|
||||
})
|
||||
|
||||
const isLoading = ref(false)
|
||||
const showFullPageLoading = ref(false)
|
||||
|
||||
const simulateLoading = () => {
|
||||
isLoading.value = true
|
||||
setTimeout(() => isLoading.value = false, 2000)
|
||||
}
|
||||
|
||||
const simulateFullPageLoading = () => {
|
||||
showFullPageLoading.value = true
|
||||
setTimeout(() => showFullPageLoading.value = false, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LoadingSpinner v-if="showFullPageLoading" full-page text="กำลังโหลดหน้า..." />
|
||||
|
||||
<h1 style="font-size: 28px; font-weight: 700; margin-bottom: 8px;">UI Loading & Validation Demo</h1>
|
||||
<p class="text-muted mb-8">หน้านี้แสดง component สำหรับ Loading states และ Form Validation</p>
|
||||
|
||||
<div class="grid-12">
|
||||
<!-- Loading Spinners -->
|
||||
<div class="col-span-6">
|
||||
<div class="card mb-6">
|
||||
<h2 class="font-bold mb-4">Loading Spinners</h2>
|
||||
<div class="flex items-center gap-8 mb-6">
|
||||
<div class="text-center">
|
||||
<LoadingSpinner size="sm" />
|
||||
<p class="text-xs text-muted mt-2">Small</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<LoadingSpinner size="md" />
|
||||
<p class="text-xs text-muted mt-2">Medium</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
<p class="text-xs text-muted mt-2">Large</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<button class="btn btn-primary" :disabled="isLoading" @click="simulateLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>Submit Button</span>
|
||||
</button>
|
||||
<button class="btn btn-secondary" @click="simulateFullPageLoading">
|
||||
Show Full Page Loading
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Loaders -->
|
||||
<div class="col-span-6">
|
||||
<div class="card mb-6">
|
||||
<h2 class="font-bold mb-4">Skeleton Loaders</h2>
|
||||
<div class="mb-4">
|
||||
<p class="text-sm text-muted mb-2">Text Skeleton:</p>
|
||||
<LoadingSkeleton type="text" :count="3" />
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<p class="text-sm text-muted mb-2">Avatar + Button:</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<LoadingSkeleton type="avatar" />
|
||||
<LoadingSkeleton type="button" width="100px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Skeleton -->
|
||||
<div class="col-span-12">
|
||||
<div class="card mb-6">
|
||||
<h2 class="font-bold mb-4">Card Skeleton</h2>
|
||||
<div class="course-grid">
|
||||
<LoadingSkeleton type="card" />
|
||||
<LoadingSkeleton type="card" />
|
||||
<LoadingSkeleton type="card" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Validation Demo -->
|
||||
<div class="col-span-12">
|
||||
<div class="card">
|
||||
<h2 class="font-bold mb-4">Form Validation Demo</h2>
|
||||
<p class="text-muted mb-6">ลองกด Submit โดยไม่กรอกข้อมูลเพื่อดู validation error messages</p>
|
||||
|
||||
<div class="grid-12">
|
||||
<div class="col-span-6">
|
||||
<FormInput
|
||||
model-value=""
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
error="รูปแบบอีเมลไม่ถูกต้อง"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<FormInput
|
||||
model-value=""
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
error="รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<FormInput
|
||||
model-value="สมชาย"
|
||||
label="ชื่อ-นามสกุล"
|
||||
placeholder="สมชาย ใจดี"
|
||||
required
|
||||
/>
|
||||
<p class="text-xs text-success">✓ กรอกถูกต้อง (ไม่มี error)</p>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<FormInput
|
||||
model-value=""
|
||||
label="เบอร์โทรศัพท์ (ไม่บังคับ)"
|
||||
placeholder="081-234-5678"
|
||||
/>
|
||||
<p class="text-xs text-muted">กรอกหรือไม่กรอกก็ได้</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue