Website Structure

Frontend-Learner/error.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+const props = defineProps({
+  error: {
+    type: Object,
+    default: null
+  }
+})
+
+useHead({
+  title: `${props.error?.statusCode || 'Error'} - e-Learning`
+})
+
+const handleError = () => {
+  clearError({ redirect: '/home' })
+}
+</script>
+
+<template>
+  <div class="error-wrapper">
+    <!-- 404 Not Found -->
+    <div v-if="error?.statusCode === 404" class="error-content fade-in">
+      <div class="illustration-box">
+        <span class="emoji-large">🔭</span>
+        <div class="glow-effect primary"/>
+      </div>
+      
+      <h1 class="error-code text-primary">404</h1>
+      <h2 class="error-title">ไม่พบหน้าที่คุณต้องการ</h2>
+      <p class="error-desc">
+        ขออภัย เราไม่พบหน้าที่คุณค้นหาในระบบ <br>
+        อาจเป็นเพราะลิงก์ผิดพลาด ลบไปแล้ว หรือคุณไม่มีสิทธิ์เข้าถึง
+      </p>
+      
+      <div class="actions">
+        <button class="btn btn-primary" @click="handleError">
+          กลับสู่หน้าหลัก
+        </button>
+      </div>
+    </div>
+
+    <!-- 403 Forbidden / Other Errors -->
+    <div v-else class="error-content fade-in">
+      <div class="illustration-box">
+        <span class="emoji-large">🔐</span>
+        <div class="glow-effect error"/>
+      </div>
+
+      <h1 class="error-code text-error">{{ error?.statusCode || 'Oops' }}</h1>
+      <h2 class="error-title">
+        {{ error?.statusCode === 403 ? 'ไม่มีสิทธิ์เข้าถึง' : 'เกิดข้อผิดพลาดบางอย่าง' }}
+      </h2>
+      <p class="error-desc">
+        {{ error?.message || 'ขออภัย ระบบขัดข้องชั่วคราว กรุณาลองใหม่อีกครั้ง' }}
+      </p>
+      
+      <div class="actions">
+        <NuxtLink to="/auth/login" class="btn btn-primary">
+          เข้าสู่ระบบ
+        </NuxtLink>
+        <button class="btn btn-outline" style="border-radius: 99px;" @click="handleError">
+          กลับสู่หน้าหลัก
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Nuxt Error Page styles should not be scoped usually to affect the whole page */
+:root {
+  --primary: #3b82f6;
+  --error: #ef4444;
+  --bg-body: #0f172a;
+  --text-main: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --neutral-100: #1e293b;
+  --border-color: #334155;
+}
+
+.error-wrapper {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-body);
+  color: var(--text-main);
+  padding: 24px;
+  font-family: 'Inter', 'Prompt', 'Sarabun', sans-serif;
+}
+
+.error-content {
+  max-width: 600px;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.illustration-box {
+  position: relative;
+  width: 160px;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+
+.emoji-large {
+  font-size: 80px;
+  position: relative;
+  z-index: 10;
+}
+
+.glow-effect {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  filter: blur(40px);
+  opacity: 0.2;
+}
+.glow-effect.primary {
+  background-color: var(--primary);
+}
+.glow-effect.error {
+  background-color: var(--error);
+}
+
+.error-code {
+  font-size: 80px;
+  font-weight: 900;
+  line-height: 1;
+  margin-bottom: 8px;
+  letter-spacing: -2px;
+}
+.text-primary { color: var(--primary); }
+.text-error { color: var(--error); }
+
+.error-title {
+  font-size: 32px;
+  font-weight: 800;
+  margin-bottom: 16px;
+  letter-spacing: -0.5px;
+}
+
+.error-desc {
+  font-size: 18px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 40px;
+  max-width: 480px;
+}
+
+.actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.btn {
+  height: 48px;
+  padding: 0 32px;
+  font-size: 16px;
+  border-radius: 99px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  border: none;
+  font-weight: 600;
+  transition: opacity 0.2s;
+}
+.btn:hover { opacity: 0.9; }
+
+.btn-primary {
+  background-color: var(--primary);
+  color: white;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+}
+
+.fade-in {
+  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); scale: 0.95; }
+  to { opacity: 1; transform: translateY(0); scale: 1; }
+}
+</style>