From 7437005d2f36ca5077f9bc5fc6615ba113b12c3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E6=BD=AE?= Date: Thu, 30 Oct 2025 00:06:19 +0800 Subject: [PATCH] add survey --- public/survey.html | 580 ++++++++++++++++----------------------------- 1 file changed, 198 insertions(+), 382 deletions(-) diff --git a/public/survey.html b/public/survey.html index 8543096..4acaa23 100644 --- a/public/survey.html +++ b/public/survey.html @@ -13,130 +13,56 @@ } body { - background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); + background-color: #f5f7fa; color: #333; - margin: 0; - padding: 0; + padding: 20px; line-height: 1.6; - min-height: 100vh; } .container { width: 100%; - background: transparent; + max-width: 1200px; + margin: 0 auto; + background: white; + border-radius: 12px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); overflow: hidden; - min-height: 100vh; } .header { - background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); + background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, #ff7e5f 100%); color: white; - padding: 80px 40px 60px; + padding: 30px; position: relative; overflow: hidden; + box-shadow: 0 4px 20px rgba(255, 126, 95, 0.3); text-align: center; } - .header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat; - } - - .header-content { - position: relative; - z-index: 2; - max-width: 600px; - margin: 0 auto; - } - .header h1 { - font-size: 42px; - font-weight: 700; - margin-bottom: 16px; - letter-spacing: -0.5px; - background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + font-size: 32px; + margin-bottom: 10px; + position: relative; + z-index: 2; } .header p { - font-size: 18px; + position: relative; + z-index: 2; opacity: 0.9; - line-height: 1.6; - margin-bottom: 0; } .config-section { - padding: 0; + padding: 30px; background: #ffffff; - margin-top: -60px; - position: relative; - z-index: 10; - } - - .unified-config { - width: 100%; - max-width: 1000px; - margin: 0 auto; - background: white; - border-radius: 24px 24px 0 0; - box-shadow: 0 -10px 40px rgba(255, 126, 95, 0.15); - overflow: hidden; - animation: slideUp 0.8s ease-out; - } - - @keyframes slideUp { - from { - opacity: 0; - transform: translateY(40px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .config-intro { - background: linear-gradient(135deg, rgba(255, 126, 95, 0.1) 0%, rgba(254, 180, 123, 0.1) 100%); - padding: 40px; - text-align: center; - border-bottom: 1px solid rgba(255, 126, 95, 0.1); - } - - .intro-icon { - font-size: 48px; - margin-bottom: 16px; - display: block; - } - - .config-intro h2 { - font-size: 28px; - font-weight: 600; - color: #2d3748; - margin-bottom: 12px; - letter-spacing: -0.5px; - } - - .config-intro p { - font-size: 16px; - color: #718096; - line-height: 1.6; - max-width: 600px; - margin: 0 auto; } .form-container { - padding: 40px; + padding: 0; } .form-section { - margin-bottom: 40px; + margin-bottom: 30px; } .form-section:last-child { @@ -401,9 +327,11 @@ } .config-summary { - background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); - padding: 40px; - border-top: 1px solid #e2e8f0; + background: #f9f9f9; + padding: 20px; + border-radius: 10px; + border-top: 2px solid #ff7e5f; + margin-top: 20px; } .summary-content { @@ -411,10 +339,9 @@ justify-content: space-between; align-items: center; background: white; - padding: 30px; - border-radius: 16px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); - border: 1px solid #e2e8f0; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .summary-stats { @@ -428,14 +355,11 @@ } .stat-value { - font-size: 36px; + font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 8px; - background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: #ff7e5f; } .stat-label { @@ -445,69 +369,47 @@ } .stat-divider { - width: 2px; - height: 50px; - background: linear-gradient(180deg, #e2e8f0, transparent); - border-radius: 1px; + width: 1px; + height: 40px; + background: #e0e0e0; } .start-button { - background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); + background: linear-gradient(135deg, #ff7e5f, #feb47b); color: white; border: none; - padding: 18px 36px; - border-radius: 16px; + padding: 12px 24px; + border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; - gap: 10px; + gap: 8px; box-shadow: 0 4px 15px rgba(255, 126, 95, 0.3); - position: relative; - overflow: hidden; - } - - .start-button::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: left 0.6s ease; } .start-button:hover:not(:disabled) { - transform: translateY(-3px); - box-shadow: 0 8px 25px rgba(255, 126, 95, 0.4); - } - - .start-button:hover:not(:disabled)::before { - left: 100%; + background: linear-gradient(135deg, #ff6b52, #fe9b5b); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 126, 95, 0.4); } .start-button:disabled { - background: #e2e8f0; - color: #a0aec0; + background: #ccc; + color: #666; cursor: not-allowed; transform: none; box-shadow: none; } - .start-button:disabled::before { - display: none; - } - .button-arrow { transition: transform 0.3s ease; - font-size: 18px; } .start-button:hover:not(:disabled) .button-arrow { - transform: translateX(6px); + transform: translateX(4px); } .rule-item { @@ -1142,58 +1044,39 @@ } @media (max-width: 768px) { + body { + padding: 0; + } + + .container { + margin: 0; + border-radius: 0; + } + .header { - padding: 40px 20px 30px; + padding: 20px; } .header h1 { - font-size: 32px; - } - - .header p { - font-size: 16px; - } - - .config-section { - margin-top: -40px; - } - - .unified-config { - border-radius: 20px 20px 0 0; - } - - .config-intro { - padding: 30px 20px; - } - - .intro-icon { - font-size: 40px; - } - - .config-intro h2 { font-size: 24px; } - .config-intro p { - font-size: 14px; - } - - .form-container { - padding: 30px 20px; + .config-section { + padding: 15px; } .form-section { - margin-bottom: 30px; + margin-bottom: 25px; } .section-header { flex-direction: column; align-items: flex-start; - margin-bottom: 20px; + margin-bottom: 16px; } .section-icon { - margin-bottom: 12px; + margin-bottom: 8px; } .section-divider { @@ -1202,16 +1085,16 @@ .form-row { grid-template-columns: 1fr; - gap: 16px; + gap: 12px; } .rules-grid { grid-template-columns: 1fr; - gap: 16px; + gap: 12px; } .rule-card { - padding: 20px; + padding: 16px; } .rule-number-input { @@ -1219,13 +1102,13 @@ } .config-summary { - padding: 30px 20px; + padding: 15px; } .summary-content { flex-direction: column; - gap: 24px; - padding: 24px; + gap: 20px; + padding: 15px; } .summary-stats { @@ -1233,7 +1116,7 @@ } .stat-value { - font-size: 28px; + font-size: 24px; } .start-button { @@ -1242,61 +1125,7 @@ } } - @media (max-width: 480px) { - .header { - padding: 30px 15px 20px; - } - - .header h1 { - font-size: 28px; - } - - .header p { - font-size: 14px; - } - - .config-section { - margin-top: -30px; - } - - .unified-config { - border-radius: 16px 16px 0 0; - } - - .config-intro { - padding: 25px 15px; - } - - .intro-icon { - font-size: 36px; - margin-bottom: 12px; - } - - .config-intro h2 { - font-size: 22px; - } - - .form-container { - padding: 25px 15px; - } - - .rule-card { - padding: 16px; - } - - .config-summary { - padding: 25px 15px; - } - - .summary-content { - padding: 20px; - } - - .stat-value { - font-size: 24px; - } - } - + @media (max-width: 768px) { .container { margin: 10px; @@ -1364,161 +1193,148 @@
-
-

🎯 学科能力测评问卷

-

基于科学的题目分类和标签筛选系统，精准评估您的学科能力

-
+

🎯 学科能力测评问卷

+

基于科学的题目分类和标签筛选系统，精准评估您的学科能力

-
-
-
📝
-

开始测评

-

填写基本信息，配置答题规则，即可开始您的学科能力测评之旅

+ +
+
+
👤
+

学员信息

+
- -
- -
-
-
👤
-

学员信息

-
-
-
-
- - -
-
- - -
-
- - -
-
+
+
+ +
- - -
-
-
🏷️
-

题目筛选

-
-
-
-
- -
- -
▼
-
-
- 未选择标签，将使用全部题目 -
-
-
+
+ +
- - -
-
-
📋
-

抽题规则

-
-
-
-
-
-
基础题
-
5分/题
-
-
- -
- 共 50 分 -
-
-
- 可用题目加载中... -
-
- -
-
-
进阶题
-
10分/题
-
-
- -
- 共 20 分 -
-
-
- 可用题目加载中... -
-
- -
-
-
竞赛题
-
15分/题
-
-
- -
- 共 30 分 -
-
-
- 可用题目加载中... -
-
-
-
-
- - -
-
-
-
-
14
-
总题数
-
-
-
-
100
-
总分数
-
-
- +
+ +
-
- + + +
+
+
🏷️
+

题目筛选

+
+
+
+
+ +
+ +
▼
+
+
+ 未选择标签，将使用全部题目 +
+
+
+
+ + +
+
+
📋
+

抽题规则

+
+
+
+
+
+
基础题
+
5分/题
+
+
+ +
+ 共 50 分 +
+
+
+ 可用题目加载中... +
+
+ +
+
+
进阶题
+
10分/题
+
+
+ +
+ 共 20 分 +
+
+
+ 可用题目加载中... +
+
+ +
+
+
竞赛题
+
15分/题
+
+
+ +
+ 共 30 分 +
+
+
+ 可用题目加载中... +
+
+
+
+ + +
+
+
+
+
14
+
总题数
+
+
+
+
100
+
总分数
+
+
+ +
+
+