| <!DOCTYPE html>
|
| <html lang="zh-CN">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>错误</title>
|
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
| <link rel="stylesheet" href="/static/css/styles.css">
|
| <style>
|
| :root {
|
| --primary-color: #4285f4;
|
| --primary-dark: #3367d6;
|
| --secondary-color: #34a853;
|
| --danger-color: #ea4335;
|
| --danger-dark: #c62828;
|
| --warning-color: #fbbc05;
|
| --dark-bg: #202124;
|
| --light-bg: #f8f9fa;
|
| --card-bg: #ffffff;
|
| --border-color: #dadce0;
|
| }
|
|
|
| body {
|
| font-family: 'Roboto', sans-serif;
|
| margin: 0;
|
| padding: 0;
|
| min-height: 100vh;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| background: linear-gradient(135deg, #f5f7fa 0%, #e0e4e9 100%);
|
| }
|
|
|
| .error-container {
|
| width: 100%;
|
| max-width: 500px;
|
| padding: 20px;
|
| }
|
|
|
| .error-card {
|
| background: var(--card-bg);
|
| border-radius: 10px;
|
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
| overflow: hidden;
|
| animation: fadeInAndShake 1s ease-out;
|
| position: relative;
|
| }
|
|
|
| @keyframes fadeInAndShake {
|
| 0% {
|
| opacity: 0;
|
| transform: translateY(20px);
|
| }
|
| 60% {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| 70% { transform: translateX(-8px); }
|
| 80% { transform: translateX(8px); }
|
| 90% { transform: translateX(-4px); }
|
| 100% { transform: translateX(0); }
|
| }
|
|
|
| .error-header {
|
| background: var(--danger-color);
|
| padding: 30px 20px;
|
| text-align: center;
|
| color: white;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .error-icon {
|
| font-size: 4rem;
|
| margin-bottom: 15px;
|
| color: white;
|
| animation: pulse 2s infinite;
|
| }
|
|
|
| @keyframes pulse {
|
| 0% {
|
| transform: scale(1);
|
| }
|
| 50% {
|
| transform: scale(1.1);
|
| }
|
| 100% {
|
| transform: scale(1);
|
| }
|
| }
|
|
|
| .error-title {
|
| font-size: 1.8rem;
|
| font-weight: 500;
|
| margin: 0;
|
| }
|
|
|
| .error-body {
|
| padding: 30px;
|
| }
|
|
|
| .error-message {
|
| background-color: rgba(234, 67, 53, 0.1);
|
| border-radius: 8px;
|
| padding: 20px;
|
| margin-bottom: 25px;
|
| border-left: 4px solid var(--danger-color);
|
| color: var(--danger-dark);
|
| font-size: 1.1rem;
|
| line-height: 1.5;
|
| }
|
|
|
| .btn {
|
| display: inline-block;
|
| padding: 12px 20px;
|
| background: var(--primary-color);
|
| color: white;
|
| border: none;
|
| border-radius: 5px;
|
| font-size: 1rem;
|
| font-weight: 500;
|
| cursor: pointer;
|
| transition: all 0.3s ease;
|
| text-align: center;
|
| text-decoration: none;
|
| width: 100%;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 8px;
|
| }
|
|
|
| .btn:hover {
|
| background: var(--primary-dark);
|
| transform: translateY(-2px);
|
| box-shadow: 0 5px 15px rgba(66, 133, 244, 0.3);
|
| }
|
|
|
| .btn:active {
|
| transform: translateY(0);
|
| }
|
|
|
| .error-footer {
|
| text-align: center;
|
| padding: 15px;
|
| border-top: 1px solid var(--border-color);
|
| color: #757575;
|
| font-size: 0.9rem;
|
| }
|
|
|
|
|
| .glitch {
|
| position: relative;
|
| }
|
|
|
| .glitch::before,
|
| .glitch::after {
|
| content: attr(data-text);
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| }
|
|
|
| .glitch::before {
|
| left: 2px;
|
| text-shadow: -1px 0 #00ffff;
|
| animation: glitch-anim-1 2s infinite linear alternate-reverse;
|
| }
|
|
|
| .glitch::after {
|
| left: -2px;
|
| text-shadow: 1px 0 #ff00ff;
|
| animation: glitch-anim-2 3s infinite linear alternate-reverse;
|
| }
|
|
|
| @keyframes glitch-anim-1 {
|
| 0% { clip-path: inset(20% 0 80% 0); }
|
| 20% { clip-path: inset(60% 0 40% 0); }
|
| 40% { clip-path: inset(40% 0 60% 0); }
|
| 60% { clip-path: inset(80% 0 20% 0); }
|
| 80% { clip-path: inset(10% 0 90% 0); }
|
| 100% { clip-path: inset(30% 0 70% 0); }
|
| }
|
|
|
| @keyframes glitch-anim-2 {
|
| 0% { clip-path: inset(10% 0 90% 0); }
|
| 20% { clip-path: inset(30% 0 70% 0); }
|
| 40% { clip-path: inset(50% 0 50% 0); }
|
| 60% { clip-path: inset(70% 0 30% 0); }
|
| 80% { clip-path: inset(90% 0 10% 0); }
|
| 100% { clip-path: inset(20% 0 80% 0); }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="error-container">
|
| <div class="error-card">
|
| <div class="error-header">
|
| <div class="error-icon">
|
| <i class="fas fa-exclamation-triangle"></i>
|
| </div>
|
| <h1 class="error-title glitch" data-text="出错了">出错了</h1>
|
| </div>
|
|
|
| <div class="error-body">
|
| <div class="error-message">
|
| {{ .error }}
|
| </div>
|
|
|
| <a href="/admin/credentials" class="btn">
|
| <i class="fas fa-arrow-left"></i> 返回凭据管理
|
| </a>
|
| </div>
|
|
|
| <div class="error-footer">
|
| <p>如果问题持续存在，请联系系统管理员</p>
|
| </div>
|
| </div>
|
| </div>
|
| </body>
|
| </html> |
