| <!DOCTYPE html>
|
| <html lang="zh-TW">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>測驗完成 - 測驗平台</title>
|
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| <script src="https://unpkg.com/feather-icons"></script>
|
| <style>
|
| .success-checkmark {
|
| animation: checkmarkScale 0.5s ease-in-out;
|
| }
|
| @keyframes checkmarkScale {
|
| 0% { transform: scale(0); }
|
| 50% { transform: scale(1.2); }
|
| 100% { transform: scale(1); }
|
| }
|
| </style>
|
| </head>
|
| <body class="bg-gray-50 min-h-screen">
|
|
|
| <header class="bg-white shadow-sm">
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
| <div class="flex justify-between items-center">
|
| <h1 class="text-2xl font-bold text-gray-800">測驗平台</h1>
|
| </div>
|
| </div>
|
| </header>
|
|
|
|
|
| <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
| <div class="text-center" data-aos="fade-up">
|
|
|
| <div class="flex justify-center mb-6">
|
| <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center success-checkmark">
|
| <i data-feather="check-circle" class="w-16 h-16 text-green-600"></i>
|
| </div>
|
| </div>
|
|
|
|
|
| <h2 class="text-3xl font-bold text-gray-800 mb-4">測驗已完成！</h2>
|
| <p class="text-gray-600 text-lg mb-8">
|
| 感謝您的參與，測驗作答已成功提交。
|
| </p>
|
|
|
|
|
| <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8" data-aos="fade-up" data-aos-delay="200">
|
| <div class="flex items-center justify-center mb-4">
|
| <i data-feather="info" class="w-6 h-6 text-blue-600 mr-2"></i>
|
| <h3 class="text-xl font-semibold text-blue-800">分數通知</h3>
|
| </div>
|
| <p class="text-blue-700 mb-2">
|
| 您的測驗分數將由系統管理員進行評分審核。
|
| </p>
|
| <p class="text-blue-700">
|
| 評分完成後，我們將會通知您是否合格及相關結果。
|
| </p>
|
| </div>
|
|
|
|
|
| <div class="bg-gray-100 rounded-xl p-6 mb-8" data-aos="fade-up" data-aos-delay="400">
|
| <h3 class="text-lg font-semibold text-gray-800 mb-4">後續步驟</h3>
|
| <div class="space-y-3 text-left text-gray-600">
|
| <div class="flex items-start">
|
| <i data-feather="mail" class="w-5 h-5 text-gray-500 mr-3 mt-1"></i>
|
| <span>請留意您的電子郵件通知</span>
|
| </div>
|
| <div class="flex items-start">
|
| <i data-feather="clock" class="w-5 h-5 text-gray-500 mr-3 mt-1"></i>
|
| <span>評分結果將在 3-5 個工作天內公布</span>
|
| </div>
|
| <div class="flex items-start">
|
| <i data-feather="help-circle" class="w-5 h-5 text-gray-500 mr-3 mt-1"></i>
|
| <span>如有任何問題，請聯繫系統管理員</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <button onclick="redirectToHome()" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-8 rounded-lg text-lg font-semibold transition-colors duration-200 flex items-center mx-auto" data-aos="fade-up" data-aos-delay="600">
|
| <i data-feather="home" class="w-5 h-5 mr-2"></i>
|
| 返回首頁
|
| </button>
|
| </div>
|
| </main>
|
|
|
|
|
| <footer class="bg-gray-800 text-white py-8 mt-12">
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
| <p>© 2024 測驗平台. All rights reserved.</p>
|
| </div>
|
| </footer>
|
|
|
| <script>
|
|
|
| AOS.init({
|
| duration: 800,
|
| once: true
|
| });
|
|
|
|
|
| feather.replace();
|
|
|
| function redirectToHome() {
|
| window.location.replace('index.html')
|
| }
|
| </script>
|
| </body>
|
| </html> |
