Fix: Sync colors for light/dark mode consistency
This commit is contained in:
supalerk-ar66
parent
e7ea035a9e
commit
6239159099
12 changed files with 445 additions and 175 deletions
2
Frontend-Learner/.nuxt/components.d.ts
vendored
2
Frontend-Learner/.nuxt/components.d.ts
vendored
|
|
@ -15,6 +15,7 @@ type LazyComponent<T> = DefineComponent<HydrationStrategies, {}, {}, {}, {}, {},
|
|||
|
||||
|
||||
export const AppHeader: typeof import("../components/common/AppHeader.vue").default
|
||||
export const AppSidebar: typeof import("../components/common/AppSidebar.vue").default
|
||||
export const FormInput: typeof import("../components/common/FormInput.vue").default
|
||||
export const GlobalLoader: typeof import("../components/common/GlobalLoader.vue").default
|
||||
export const LandingFooter: typeof import("../components/common/LandingFooter.vue").default
|
||||
|
|
@ -172,6 +173,7 @@ export const Html: typeof import("../node_modules/nuxt/dist/head/runtime/compone
|
|||
export const Body: typeof import("../node_modules/nuxt/dist/head/runtime/components").Body
|
||||
export const NuxtIsland: typeof import("../node_modules/nuxt/dist/app/components/nuxt-island").default
|
||||
export const LazyAppHeader: LazyComponent<typeof import("../components/common/AppHeader.vue").default>
|
||||
export const LazyAppSidebar: LazyComponent<typeof import("../components/common/AppSidebar.vue").default>
|
||||
export const LazyFormInput: LazyComponent<typeof import("../components/common/FormInput.vue").default>
|
||||
export const LazyGlobalLoader: LazyComponent<typeof import("../components/common/GlobalLoader.vue").default>
|
||||
export const LazyLandingFooter: LazyComponent<typeof import("../components/common/LandingFooter.vue").default>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"id":"dev","timestamp":1768360747858}
|
||||
{"id":"dev","timestamp":1768363426076}
|
||||
|
|
@ -1 +1 @@
|
|||
{"id":"dev","timestamp":1768360747858,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
|
||||
{"id":"dev","timestamp":1768363426076,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"date": "2026-01-14T03:19:14.221Z",
|
||||
"date": "2026-01-14T04:03:52.160Z",
|
||||
"preset": "nitro-dev",
|
||||
"framework": {
|
||||
"name": "nuxt",
|
||||
|
|
@ -9,9 +9,9 @@
|
|||
"nitro": "2.12.8"
|
||||
},
|
||||
"dev": {
|
||||
"pid": 16832,
|
||||
"pid": 23376,
|
||||
"workerAddress": {
|
||||
"socketPath": "\\\\.\\pipe\\nitro-worker-16832-1-1-6766.sock"
|
||||
"socketPath": "\\\\.\\pipe\\nitro-worker-23376-1-1-2860.sock"
|
||||
}
|
||||
}
|
||||
}
|
||||
2
Frontend-Learner/.nuxt/nuxt.d.ts
vendored
2
Frontend-Learner/.nuxt/nuxt.d.ts
vendored
|
|
@ -1,8 +1,8 @@
|
|||
/// <reference types="quasar" />
|
||||
/// <reference types="nuxt-quasar-ui" />
|
||||
/// <reference types="@nuxt/devtools" />
|
||||
/// <reference types="@nuxtjs/tailwindcss" />
|
||||
/// <reference types="@nuxt/telemetry" />
|
||||
/// <reference types="@nuxt/devtools" />
|
||||
/// <reference path="types/builder-env.d.ts" />
|
||||
/// <reference types="nuxt" />
|
||||
/// <reference path="types/app-defaults.d.ts" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 14/1/2569 10:19:11
|
||||
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 14/1/2569 11:33:56
|
||||
import "@nuxtjs/tailwindcss/config-ctx"
|
||||
import configMerger from "@nuxtjs/tailwindcss/merger";
|
||||
|
||||
|
|
|
|||
2
Frontend-Learner/.nuxt/types/components.d.ts
vendored
2
Frontend-Learner/.nuxt/types/components.d.ts
vendored
|
|
@ -15,6 +15,7 @@ type LazyComponent<T> = DefineComponent<HydrationStrategies, {}, {}, {}, {}, {},
|
|||
|
||||
interface _GlobalComponents {
|
||||
'AppHeader': typeof import("../../components/common/AppHeader.vue").default
|
||||
'AppSidebar': typeof import("../../components/common/AppSidebar.vue").default
|
||||
'FormInput': typeof import("../../components/common/FormInput.vue").default
|
||||
'GlobalLoader': typeof import("../../components/common/GlobalLoader.vue").default
|
||||
'LandingFooter': typeof import("../../components/common/LandingFooter.vue").default
|
||||
|
|
@ -172,6 +173,7 @@ interface _GlobalComponents {
|
|||
'Body': typeof import("../../node_modules/nuxt/dist/head/runtime/components").Body
|
||||
'NuxtIsland': typeof import("../../node_modules/nuxt/dist/app/components/nuxt-island").default
|
||||
'LazyAppHeader': LazyComponent<typeof import("../../components/common/AppHeader.vue").default>
|
||||
'LazyAppSidebar': LazyComponent<typeof import("../../components/common/AppSidebar.vue").default>
|
||||
'LazyFormInput': LazyComponent<typeof import("../../components/common/FormInput.vue").default>
|
||||
'LazyGlobalLoader': LazyComponent<typeof import("../../components/common/GlobalLoader.vue").default>
|
||||
'LazyLandingFooter': LazyComponent<typeof import("../../components/common/LandingFooter.vue").default>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@
|
|||
=========================== */
|
||||
:root {
|
||||
/* Colors - Light Mode Default */
|
||||
--bg-body: #F8FAFC; /* Light Background */
|
||||
--bg-surface: #FFFFFF; /* White Card Background */
|
||||
--text-main: #0F172A; /* Dark Text */
|
||||
--text-secondary: #64748B; /* Secondary Text */
|
||||
--primary: #3B82F6; /* Primary Blue */
|
||||
|
||||
--bg-body: #f8fafc; /* Light Background */
|
||||
--bg-surface: #ffffff; /* White Card Background */
|
||||
--text-main: #0f172a; /* Dark Text */
|
||||
--text-secondary: #64748b; /* Secondary Text */
|
||||
--primary: #3b82f6; /* Primary Blue */
|
||||
|
||||
/* Semantic mappings */
|
||||
--border-color: #E2E8F0;
|
||||
--border-color: #e2e8f0;
|
||||
--primary-hover: #2563eb;
|
||||
|
||||
|
||||
/* Keeping remaining semantic vars */
|
||||
--primary-light: #eff6ff;
|
||||
--success: #10b981;
|
||||
|
|
@ -41,16 +41,24 @@
|
|||
|
||||
/* Gradients */
|
||||
--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
--gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
|
||||
--gradient-glow: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
|
||||
--gradient-surface: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.8) 0%,
|
||||
rgba(255, 255, 255, 0.4) 100%
|
||||
);
|
||||
--gradient-glow: radial-gradient(
|
||||
circle at center,
|
||||
rgba(59, 130, 246, 0.15) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
|
||||
/* Dark Mode (applied when `.dark` class is present on <html>) */
|
||||
.dark {
|
||||
--bg-body: #0F172A;
|
||||
--bg-surface: #1E293B; /* User requested specific color */
|
||||
--text-main: #F1F5F9;
|
||||
--text-secondary: #CBD5E1;
|
||||
--bg-body: #0f172a;
|
||||
--bg-surface: #1e293b; /* User requested specific color */
|
||||
--text-main: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--border-color: #334155;
|
||||
--neutral-50: #1e293b;
|
||||
--neutral-100: #334155;
|
||||
|
|
@ -62,7 +70,7 @@
|
|||
--neutral-700: #f8fafc;
|
||||
--neutral-800: #1e293b;
|
||||
--neutral-900: #0f172a;
|
||||
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12),
|
||||
0 2px 6px -2px rgb(0 0 0 / 0.08);
|
||||
|
|
@ -90,8 +98,11 @@ body {
|
|||
background-color: var(--bg-body);
|
||||
color: var(--text-main);
|
||||
line-height: 1.5;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, rgba(75, 130, 247, 0.05), transparent 28%),
|
||||
background-image: radial-gradient(
|
||||
circle at 20% 20%,
|
||||
rgba(75, 130, 247, 0.05),
|
||||
transparent 28%
|
||||
),
|
||||
radial-gradient(circle at 80% 0%, rgba(68, 212, 168, 0.05), transparent 24%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
|
@ -128,14 +139,15 @@ ul {
|
|||
grid-template-columns: var(--sidebar-width) 1fr;
|
||||
grid-template-rows: var(--header-height) 1fr;
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-body);
|
||||
background-color: #ffffff;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.dark .app-shell {
|
||||
background-color: #0f172a;
|
||||
background-color: var(--bg-body);
|
||||
color: #f1f5f9;
|
||||
}
|
||||
/* Removed redundant .dark .app-shell override to rely on variables */
|
||||
|
||||
.app-header {
|
||||
grid-column: 1 / -1;
|
||||
|
|
|
|||
106
Frontend-Learner/components/common/AppSidebar.vue
Normal file
106
Frontend-Learner/components/common/AppSidebar.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file AppSidebar.vue
|
||||
* @description Sidebar navigation for the authenticated dashboard.
|
||||
* Includes navigation links and responsive behaviors.
|
||||
*/
|
||||
|
||||
const route = useRoute();
|
||||
const { isAuthenticated } = useAuth(); // Optional if you need auth state
|
||||
const isSidebarOpen = defineModel<boolean>("open"); // Controlled by layout
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
to: "/dashboard",
|
||||
label: "ภาพรวม",
|
||||
icon: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
|
||||
},
|
||||
{
|
||||
to: "/dashboard/my-courses",
|
||||
label: "คอร์สของฉัน",
|
||||
icon: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253",
|
||||
},
|
||||
{
|
||||
to: "/browse/discovery",
|
||||
label: "ค้นหาคอร์ส",
|
||||
icon: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
|
||||
},
|
||||
{
|
||||
to: "/dashboard/announcements",
|
||||
label: "ข่าวประกาศ",
|
||||
icon: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9",
|
||||
},
|
||||
{
|
||||
to: "/dashboard/profile",
|
||||
label: "บัญชีผู้ใช้",
|
||||
icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
|
||||
},
|
||||
];
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path === "/dashboard") return route.path === "/dashboard";
|
||||
return route.path.startsWith(path);
|
||||
};
|
||||
|
||||
const closeSidebar = () => {
|
||||
isSidebarOpen.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Desktop & Mobile Sidebar -->
|
||||
<aside
|
||||
class="app-sidebar transition-all duration-300"
|
||||
:class="{ open: isSidebarOpen }"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Menu Items -->
|
||||
<div class="px-2 py-4 space-y-1">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive(item.to) }"
|
||||
@click="closeSidebar"
|
||||
>
|
||||
<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="item.icon"
|
||||
/>
|
||||
</svg>
|
||||
<span>{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Footer / Version -->
|
||||
<div class="mt-auto p-4 text-xs text-center opacity-50">
|
||||
<p>e-Learning v0.1.0</p>
|
||||
<p>© 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Mobile Overlay -->
|
||||
<div
|
||||
class="sidebar-overlay"
|
||||
:class="{ show: isSidebarOpen }"
|
||||
@click="closeSidebar"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Sidebar styles are mainly handled by global main.css (.app-sidebar) */
|
||||
/* This component structure ensures it hooks into the .app-shell grid correctly */
|
||||
</style>
|
||||
|
|
@ -8,15 +8,15 @@
|
|||
|
||||
<template>
|
||||
<!-- App Shell: Main container with global background and text color -->
|
||||
<div class="app-shell min-h-screen transition-colors duration-200" style="background-color: var(--bg-body); color: var(--text-main);">
|
||||
<div class="app-shell min-h-screen transition-colors duration-200">
|
||||
<!-- Header -->
|
||||
<AppHeader />
|
||||
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="app-main">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Mobile Bottom Navigation (Visible only on small screens) -->
|
||||
<MobileNav />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,85 +7,86 @@
|
|||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
layout: "default",
|
||||
middleware: "auth",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: 'รายการคอร์ส - e-Learning'
|
||||
})
|
||||
title: "รายการคอร์ส - e-Learning",
|
||||
});
|
||||
|
||||
// UI State
|
||||
const showDetail = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const isCategoryOpen = ref(true)
|
||||
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'
|
||||
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'
|
||||
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'
|
||||
}
|
||||
]
|
||||
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',
|
||||
'คอร์สฟรี'
|
||||
]
|
||||
"การตลาดออนไลน์",
|
||||
"ธุรกิจ",
|
||||
"การเงิน & ลงทุน",
|
||||
"การพัฒนาตนเอง",
|
||||
"Office Productivity",
|
||||
"Data",
|
||||
"เขียนโปรแกรม",
|
||||
"การพัฒนาซอฟต์แวร์",
|
||||
"การออกแบบ",
|
||||
"Art & Craft",
|
||||
"การเขียน",
|
||||
"ถ่ายภาพ & วิดีโอ",
|
||||
"ภาษา",
|
||||
"Lifestyles",
|
||||
"คอร์สฟรี",
|
||||
];
|
||||
|
||||
// Category Visibility State
|
||||
const showAllCategories = ref(false)
|
||||
const showAllCategories = ref(false);
|
||||
|
||||
const visibleCategories = computed(() => {
|
||||
return showAllCategories.value ? categories : categories.slice(0, 8)
|
||||
})
|
||||
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)
|
||||
)
|
||||
})
|
||||
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>
|
||||
|
|
@ -93,23 +94,31 @@ const filteredCourses = computed(() => {
|
|||
<!-- 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 class="text-[28px] font-bold text-slate-900 dark:text-white">รายการคอร์สทั้งหมด</h1>
|
||||
<div class="flex gap-3" style="flex-wrap: wrap;">
|
||||
<div
|
||||
class="flex justify-between items-center mb-6"
|
||||
style="flex-wrap: wrap; gap: 16px"
|
||||
>
|
||||
<h1 class="text-[28px] font-bold text-slate-900 dark:text-white">
|
||||
รายการคอร์สทั้งหมด
|
||||
</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:text-slate-500"
|
||||
placeholder="ค้นหาคอร์ส..."
|
||||
style="padding-left: 36px; width: 240px;"
|
||||
>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800 placeholder:text-slate-500"
|
||||
placeholder="ค้นหาคอร์ส..."
|
||||
style="padding-left: 36px; width: 240px"
|
||||
/>
|
||||
</div>
|
||||
<!-- Sorting Select -->
|
||||
<select class="input-field bg-white dark:bg-slate-800" style="width: auto; color: #0f172a;">
|
||||
<option style="color: #0f172a;">เรียงตาม: ล่าสุด</option>
|
||||
<option style="color: #0f172a;">ยอดนิยม</option>
|
||||
<select
|
||||
class="input-field bg-white dark:bg-slate-800"
|
||||
style="width: auto; color: #0f172a"
|
||||
>
|
||||
<option style="color: #0f172a">เรียงตาม: ล่าสุด</option>
|
||||
<option style="color: #0f172a">ยอดนิยม</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,41 +129,65 @@ const filteredCourses = computed(() => {
|
|||
<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"
|
||||
<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"
|
||||
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" />
|
||||
<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">
|
||||
<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
|
||||
<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"
|
||||
{{ 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"
|
||||
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" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -163,7 +196,7 @@ const filteredCourses = computed(() => {
|
|||
</div>
|
||||
|
||||
<!-- Course List -->
|
||||
<div class="col-span-9" style="min-width: 0;">
|
||||
<div class="col-span-9" style="min-width: 0">
|
||||
<div class="course-grid">
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
|
|
@ -179,15 +212,32 @@ const filteredCourses = computed(() => {
|
|||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredCourses.length === 0" class="empty-state" style="grid-column: 1 / -1;">
|
||||
<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>
|
||||
<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>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
style="
|
||||
border-color: #64748b;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
"
|
||||
>
|
||||
โหลดเพิ่มเติม
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -195,57 +245,133 @@ const filteredCourses = computed(() => {
|
|||
|
||||
<!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
|
||||
<div v-else>
|
||||
<button class="btn btn-secondary mb-6" @click="showDetail = false">← กลับหน้ารายการ</button>
|
||||
|
||||
<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);"
|
||||
<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: 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
|
||||
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 class="text-[32px] font-bold mb-4 text-slate-900 dark:text-white">เบื้องต้นการออกแบบ 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)
|
||||
<h1 class="text-[32px] font-bold mb-4 text-slate-900 dark:text-white">
|
||||
เบื้องต้นการออกแบบ 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 text-slate-900 dark:text-white">สิ่งที่คุณจะได้เรียนรู้</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>
|
||||
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
|
||||
สิ่งที่คุณจะได้เรียนรู้
|
||||
</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 text-slate-900 dark:text-white">เนื้อหาในคอร์ส</h3>
|
||||
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
|
||||
เนื้อหาในคอร์ส
|
||||
</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 text-slate-900 dark:text-slate-900">01. บทนำ</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">3 บทเรียน</span>
|
||||
<div
|
||||
class="flex justify-between p-4 rounded mb-2"
|
||||
style="background: #f3f4f6; border: 1px solid #e5e7eb"
|
||||
>
|
||||
<span class="font-bold text-slate-900 dark:text-slate-900"
|
||||
>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);">
|
||||
<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>
|
||||
<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
|
||||
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>
|
||||
|
|
@ -254,23 +380,42 @@ const filteredCourses = computed(() => {
|
|||
|
||||
<!-- Sidebar (Right Column): Sticky CTA -->
|
||||
<div class="col-span-4">
|
||||
<div class="card" style="position: sticky; top: 88px;">
|
||||
<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="text-sm text-slate-600 dark:text-slate-400"
|
||||
style="text-decoration: line-through"
|
||||
></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
|
||||
to="/dashboard/my-courses?enrolled=true"
|
||||
class="btn btn-primary w-full mb-4 text-white"
|
||||
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);">
|
||||
<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);">
|
||||
<div
|
||||
class="flex justify-between py-2 border-b"
|
||||
style="border-color: var(--neutral-100)"
|
||||
>
|
||||
<span>ใบประกาศ</span>
|
||||
<span class="font-bold">มี</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -121,12 +121,12 @@ const saveProfile = () => {
|
|||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="128"
|
||||
class="border-4 border-[#1e293b] shadow-2xl bg-slate-800"
|
||||
class="border-4 border-white dark: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 class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-white dark:border-[#1e293b]"/>
|
||||
</div>
|
||||
<div class="pb-2">
|
||||
<h2 class="text-3xl font-black text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
|
||||
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -158,7 +158,7 @@ const saveProfile = () => {
|
|||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="text-2xl font-black text-white">แก้ไขข้อมูลส่วนตัว</h2>
|
||||
<h2 class="text-2xl font-black text-slate-900 dark:text-white">แก้ไขข้อมูลส่วนตัว</h2>
|
||||
</div>
|
||||
|
||||
<!-- Avatar Upload Section -->
|
||||
|
|
@ -169,7 +169,7 @@ const saveProfile = () => {
|
|||
: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"
|
||||
class="rounded-3xl border-2 border-slate-200 dark: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">
|
||||
|
|
@ -180,8 +180,8 @@ const saveProfile = () => {
|
|||
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
|
||||
</div>
|
||||
<div class="text-center md:text-left">
|
||||
<h3 class="font-black text-white mb-2">รูปโปรไฟล์ของคุณ</h3>
|
||||
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">Recommended: Square image, max 2MB</p>
|
||||
<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">เฉพาะไฟล์ png , jpg</p>
|
||||
<button class="btn-upload" @click="triggerUpload">อัปโหลดรูปใหม่</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -189,7 +189,7 @@ const saveProfile = () => {
|
|||
<!-- Form Inputs -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">คำนำหน้า</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">คำนำหน้า</label>
|
||||
<select v-model="userData.prefix" class="premium-input w-full">
|
||||
<option>นาย</option>
|
||||
<option>นาง</option>
|
||||
|
|
@ -198,7 +198,7 @@ const saveProfile = () => {
|
|||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">ชื่อ</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">ชื่อ</label>
|
||||
<input
|
||||
v-model="userData.firstName"
|
||||
type="text"
|
||||
|
|
@ -209,7 +209,7 @@ const saveProfile = () => {
|
|||
<span v-if="errors.firstName" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.firstName }}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">นามสกุล</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">นามสกุล</label>
|
||||
<input
|
||||
v-model="userData.lastName"
|
||||
type="text"
|
||||
|
|
@ -221,7 +221,7 @@ const saveProfile = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">อีเมล</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">อีเมล</label>
|
||||
<input
|
||||
v-model="userData.email"
|
||||
type="email"
|
||||
|
|
@ -232,7 +232,7 @@ const saveProfile = () => {
|
|||
<span v-if="errors.email" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.email }}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">เบอร์โทรศัพท์</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">เบอร์โทรศัพท์</label>
|
||||
<input
|
||||
v-model="userData.phone"
|
||||
type="text"
|
||||
|
|
@ -245,15 +245,15 @@ const saveProfile = () => {
|
|||
</div>
|
||||
|
||||
<!-- Security Section -->
|
||||
<div class="border-t border-white/5 pt-10 mb-10">
|
||||
<h3 class="text-lg font-black text-white mb-6">ความปลอดภัย</h3>
|
||||
<div class="border-t border-slate-200 dark: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-300">รหัสผ่านปัจจุบัน</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">รหัสผ่านปัจจุบัน</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-300">รหัสผ่านใหม่</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">รหัสผ่านใหม่</label>
|
||||
<input
|
||||
v-model="passwordForm.newPassword"
|
||||
type="password"
|
||||
|
|
@ -264,7 +264,7 @@ const saveProfile = () => {
|
|||
<span v-if="errors.newPassword" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.newPassword }}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-300">ยืนยันรหัสผ่านใหม่</label>
|
||||
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">ยืนยันรหัสผ่านใหม่</label>
|
||||
<input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
type="password"
|
||||
|
|
@ -292,21 +292,24 @@ const saveProfile = () => {
|
|||
}
|
||||
|
||||
.card-premium {
|
||||
background: #1e293b;
|
||||
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
|
||||
border-radius: 2.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-width: 1px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.dark .card-premium {
|
||||
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-300 block mb-2;
|
||||
@apply text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 block mb-2;
|
||||
}
|
||||
.info-group .value {
|
||||
@apply text-lg font-bold text-white;
|
||||
@apply text-lg font-bold text-slate-900 dark:text-white;
|
||||
}
|
||||
|
||||
.premium-input {
|
||||
@apply bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-white/10 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all placeholder:text-slate-400;
|
||||
@apply bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all placeholder:text-slate-400;
|
||||
}
|
||||
|
||||
.btn-premium-edit {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue