jude-cehua/templates/login_error.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录失败 - 聚德AI短视频脚本撰写</title>
	<meta name="description" content="登录失败 - 聚德AI短视频脚本撰写器">
	<meta name="theme-color" content="#6366f1">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
	<link rel="icon" href="{{ url_for('static', filename='logo.png') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
	<style>
		/* 错误页面特定样式 - 布局优化版本 */

		/* 覆盖登录容器的高度设置 */
		.login-container {
			min-height: 40vh !important;
			/* 减少60vh，从100vh减到40vh */
			padding: 15px !important;
			/* 减少内边距 */
			display: flex !important;
			/* 确保flex布局 */
			align-items: center !important;
			/* 垂直居中 */
			justify-content: center !important;
			/* 水平居中 */
		}

		/* 覆盖登录卡片的宽度设置 */
		.login-card {
			max-width: 680px !important;
			/* 从560px增加到680px */
			padding: 35px 40px !important;
			/* 减少上下内边距，从50px减到35px */
			text-align: center !important;
			/* 确保文本居中 */
		}

		/* 优化登录头部间距 */
		.login-header {
			margin-bottom: 35px !important;
			/* 从50px减少到35px */
		}

		.error-icon {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-bottom: 10px;
			/* 从25px减少到20px */
		}

		.error-icon-bg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 120px;
			height: 120px;
			background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%);
			border-radius: 50%;
			animation: errorGlow 3s ease-in-out infinite alternate;
		}

		.error-icon-circle {
			width: 90px;
			height: 90px;
			background: linear-gradient(135deg, #ef4444, #dc2626);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8px 32px rgba(239, 68, 68, 0.2);
			position: relative;
			z-index: 1;
		}

		.error-icon svg {
			width: 40px;
			height: 40px;
			color: white;
		}

		@keyframes errorGlow {
			from {
				opacity: 0.5;
				transform: translate(-50%, -50%) scale(1);
			}

			to {
				opacity: 0.8;
				transform: translate(-50%, -50%) scale(1.1);
			}
		}

		.error-content h2 {
			font-size: 28px;
			font-weight: 700;
			color: #1e293b;
			margin-bottom: 10px;
			background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.error-content p {
			font-size: 16px;
			color: #64748b;
			margin-bottom: 15px;
			/* 从30px减少到25px */
			font-weight: 400;
		}

		.retry-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			width: 100%;
			padding: 16px 32px;
			/* 从18px减少到16px */
			background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
			color: white;
			border: none;
			border-radius: 16px;
			font-size: 16px;
			font-weight: 600;
			text-decoration: none;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
			margin-bottom: 12px;
			/* 从20px减少到18px */
		}

		.retry-button:hover {
			transform: translateY(-2px);
			box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
		}

		.help-links {
			display: flex;
			justify-content: center;
			gap: 20px;
			margin-top: 10px;
			/* 从20px减少到15px */
		}

		.help-link {
			color: #64748b;
			text-decoration: none;
			font-size: 14px;
			transition: color 0.3s ease;
		}

		.help-link:hover {
			color: #3b82f6;
		}

		/* 响应式设计优化 */
		@media (max-width: 768px) {
			.login-container {
				min-height: 100vh !important;
				/* 移动端保持全屏高度 */
				padding: 20px !important;
				display: flex !important;
				/* 确保flex布局 */
				align-items: center !important;
				/* 垂直居中 */
				justify-content: center !important;
				/* 水平居中 */
			}

			.login-card {
				max-width: 100% !important;
				/* 移动端使用全宽 */
				padding: 30px 25px !important;
				text-align: center !important;
				/* 确保文本居中 */
			}
		}

		@media (max-width: 480px) {
			.login-card {
				padding: 25px 20px !important;
			}

			.error-content h2 {
				font-size: 24px;
			}

			.error-content p {
				font-size: 14px;
			}
		}
	</style>
</head>

<body>
	<!-- 背景动画元素 -->
	<div class="animated-background">
		<div class="floating-shapes">
			<div class="shape shape-1"></div>
			<div class="shape shape-2"></div>
			<div class="shape shape-3"></div>
			<div class="shape shape-4"></div>
			<div class="shape shape-5"></div>
		</div>
		<div class="gradient-overlay"></div>
	</div>

	<div class="login-container">
		<div class="login-card glass-panel">
			<!-- 装饰性元素 -->
			<div class="card-decoration">
				<div class="decoration-line"></div>
				<div class="decoration-dot"></div>
				<div class="decoration-line"></div>
			</div>

			<div class="login-header">
				<div class="logo-container">
					<div class="logo-glow"></div>
					<img src="{{ url_for('static', filename='logo.png') }}" alt="聚德AI" class="login-logo">
				</div>
				<h1>聚德AI短视频脚本撰写</h1>
				<p class="login-subtitle">智能创作，高效输出</p>
				<div class="header-underline"></div>
			</div>

			<!-- 错误内容 -->
			<div class="login-methods">
				<!-- 错误图标 -->
				<div class="error-icon">
					<div class="error-icon-bg"></div>
					<div class="error-icon-circle">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
						</svg>
					</div>
				</div>

				<!-- 错误内容 -->
				<div class="error-content">
					<h2>登录失败</h2>
					<p>很抱歉，登录过程中遇到了问题</p>
				</div>


				<!-- 重试按钮 -->
				<a href="{{ url_for('login') }}" class="retry-button">
					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path
							d="M4 4V9H4.58152M19.9381 11C19.446 7.05369 16.0796 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9M4.58152 9H9M20 20V15H19.4185M19.4185 15C18.2317 17.9318 15.3574 20 12 20C7.92038 20 4.55399 16.9463 4.06189 13M19.4185 15H15"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
					重新登录
				</a>

				<!-- 帮助链接 -->
				<div class="help-links">
					<a href="javascript:history.back()" class="help-link">返回上一页</a>
					<a href="{{ url_for('index') }}" class="help-link">返回首页</a>
				</div>
			</div>

			<!-- 页脚信息 -->
			<div class="login-footer">
				<p>© 2025 成都聚德鼎盛文化传播有限公司</p>
			</div>
		</div>
	</div>


</body>

</html>