Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoiceFlow Nexus - ASR 平台即服務系統</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 min-h-screen overflow-hidden"> | |
| <!-- Animated Background Elements --> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="floating-orb orb-1"></div> | |
| <div class="floating-orb orb-2"></div> | |
| <div class="floating-orb orb-3"></div> | |
| <div class="floating-orb orb-4"></div> | |
| <div class="floating-orb orb-5"></div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="relative z-10 flex items-center justify-center min-h-screen"> | |
| <div class="glass-morphism p-8 rounded-2xl shadow-2xl w-full max-w-md mx-4"> | |
| <!-- Header --> | |
| <div class="text-center mb-8"> | |
| <div class="flex items-center justify-center mb-4"> | |
| <i data-feather="mic" class="text-white w-12 h-12 mr-3"></i> | |
| <h1 class="text-3xl font-bold text-white">VoiceFlow Nexus</h1> | |
| </div> | |
| <p class="text-blue-200 text-sm">ASR 平台即服務管理系統</title> | |
| </div> | |
| <!-- Login Form --> | |
| <form id="loginForm" class="space-y-6"> | |
| <!-- Username Field --> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="user" class="text-blue-300"></i> | |
| </div> | |
| <input | |
| type="text" | |
| id="username" | |
| name="username" | |
| required | |
| class="w-full pl-10 pr-4 py-3 bg-blue-800/30 border border-blue-600/50 rounded-xl text-white placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300" | |
| placeholder="請輸入用戶名" | |
| > | |
| <div class="input-highlight"></div> | |
| </div> | |
| <!-- Password Field --> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="lock" class="text-blue-300"></i> | |
| </div> | |
| <input | |
| type="password" | |
| id="password" | |
| name="password" | |
| required | |
| class="w-full pl-10 pr-4 py-3 bg-blue-800/30 border border-blue-600/50 rounded-xl text-white placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300" | |
| placeholder="請輸入密碼" | |
| > | |
| <div class="input-highlight"></div> | |
| </div> | |
| <!-- Submit Button --> | |
| <button | |
| type="submit" | |
| id="loginButton" | |
| class="w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold rounded-xl shadow-lg transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-900" | |
| > | |
| <span class="flex items-center justify-center"> | |
| <i data-feather="log-in" class="w-5 h-5 mr-2"></i> | |
| 登入平台 | |
| </span> | |
| </button> | |
| </form> | |
| <!-- Footer Links --> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="text-blue-300 hover:text-white text-sm transition-colors duration-200"> | |
| 忘記密碼？ | |
| </a> | |
| <div class="mt-2"> | |
| <a href="#" class="text-blue-300 hover:text-white text-sm transition-colors duration-200"> | |
| 需要幫助？聯繫技術支援 | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white p-6 rounded-2xl shadow-2xl text-center"> | |
| <div class="loading-spinner mb-4"></div> | |
| <p class="text-gray-700 font-semibold">正在驗證...</p> | |
| </div> | |
| </div> | |
| <!-- Success Animation --> | |
| <div id="successAnimation" class="fixed inset-0 flex items-center justify-center z-50 hidden"> | |
| <div class="success-checkmark"> | |
| <div class="check-icon"> | |
| <span class="icon-line line-tip"></span> | |
| <span class="icon-line line-long"></span> | |
| <div class="icon-circle"></div> | |
| <div class="icon-fix"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |