From c9b603c136523f499d17e5f0739dd80ea0ee204c Mon Sep 17 00:00:00 2001 From: superlishunqin <852326703@qq.com> Date: Mon, 22 Sep 2025 07:00:14 +0800 Subject: [PATCH] homepage --- app/static/css/style.css | 2086 ++++++++++++++++++++++++ app/static/images/hero/placeholder.svg | 11 + app/static/js/main.js | 500 ++++-- app/templates/index.html | 713 ++++++-- 4 files changed, 3031 insertions(+), 279 deletions(-) create mode 100644 app/static/images/hero/placeholder.svg diff --git a/app/static/css/style.css b/app/static/css/style.css index 150bc38..935789e 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -1950,3 +1950,2089 @@ a.btn { a.btn:hover { text-decoration: none !important; } + +/* ===== 童趣主页样式增强 ===== */ + +/* 童趣轮播图样式 */ +.hero-carousel-kid { + position: relative; + overflow: hidden; + border-radius: 0 0 50px 50px; + box-shadow: 0 20px 60px rgba(0,0,0,0.1); +} + +.hero-carousel-kid .carousel-item { + height: 75vh; + min-height: 600px; + position: relative; +} + +.hero-carousel-kid .carousel-item img { + object-fit: cover; + width: 100%; + height: 100%; + filter: brightness(1.1) saturate(1.3); +} + +.carousel-overlay-kid { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, + rgba(255, 107, 107, 0.3) 0%, + rgba(78, 205, 196, 0.3) 50%, + rgba(69, 183, 209, 0.3) 100%); + z-index: 1; +} + +/* 童趣装饰元素动画 */ +.kid-decorations { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + pointer-events: none; +} + +.kid-star { + position: absolute; + font-size: 2rem; + animation: kidStarFloat 4s ease-in-out infinite; +} + +.kid-star-1 { top: 15%; left: 10%; animation-delay: 0s; } +.kid-star-2 { top: 25%; right: 15%; animation-delay: 1.5s; } +.kid-star-3 { bottom: 30%; left: 20%; animation-delay: 3s; } + +@keyframes kidStarFloat { + 0%, 100% { + transform: translateY(0px) rotate(0deg) scale(1); + opacity: 0.8; + } + 25% { + transform: translateY(-15px) rotate(90deg) scale(1.2); + opacity: 1; + } + 50% { + transform: translateY(-5px) rotate(180deg) scale(0.9); + opacity: 0.9; + } + 75% { + transform: translateY(-20px) rotate(270deg) scale(1.1); + opacity: 1; + } +} + +.kid-cloud { + position: absolute; + font-size: 2.5rem; + animation: kidCloudDrift 8s ease-in-out infinite; +} + +.kid-cloud-1 { top: 10%; left: 5%; } +.kid-cloud-2 { top: 20%; right: 10%; animation-delay: 4s; } + +@keyframes kidCloudDrift { + 0%, 100% { transform: translateX(0px) translateY(0px); opacity: 0.7; } + 50% { transform: translateX(30px) translateY(-10px); opacity: 1; } +} + +.kid-balloon { + position: absolute; + font-size: 2rem; + animation: kidBalloonBob 3s ease-in-out infinite; +} + +.kid-balloon-1 { bottom: 40%; left: 15%; animation-delay: 0s; } +.kid-balloon-2 { bottom: 50%; right: 20%; animation-delay: 1s; } +.kid-balloon-3 { bottom: 35%; left: 85%; animation-delay: 2s; } + +@keyframes kidBalloonBob { + 0%, 100% { transform: translateY(0px) rotate(-5deg); } + 50% { transform: translateY(-25px) rotate(5deg); } +} + +/* 音乐符号动画 */ +.music-notes { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + pointer-events: none; +} + +.music-note { + position: absolute; + font-size: 1.8rem; + animation: musicFloat 6s ease-in-out infinite; +} + +.music-note-1 { top: 20%; left: 25%; animation-delay: 0s; } +.music-note-2 { top: 35%; right: 25%; animation-delay: 2s; } +.music-note-3 { bottom: 45%; left: 30%; animation-delay: 4s; } +.music-note-4 { bottom: 25%; right: 30%; animation-delay: 1s; } + +@keyframes musicFloat { + 0%, 100% { + transform: translateY(0px) scale(1) rotate(0deg); + opacity: 0.6; + } + 25% { + transform: translateY(-20px) scale(1.3) rotate(15deg); + opacity: 1; + } + 50% { + transform: translateY(-10px) scale(0.8) rotate(-10deg); + opacity: 0.8; + } + 75% { + transform: translateY(-30px) scale(1.2) rotate(20deg); + opacity: 1; + } +} + +/* 游戏装饰元素 */ +.kid-toy, .kid-game, .kid-spark { + position: absolute; + font-size: 2rem; + animation: kidToyBounce 5s ease-in-out infinite; +} + +.toy-1 { top: 20%; left: 12%; animation-delay: 0s; } +.toy-2 { bottom: 40%; right: 15%; animation-delay: 2s; } +.toy-3 { top: 40%; right: 25%; animation-delay: 1s; } +.game-1 { top: 60%; left: 20%; animation-delay: 3s; } +.game-2 { bottom: 60%; left: 30%; animation-delay: 1.5s; } +.game-3 { top: 30%; left: 70%; animation-delay: 4s; } + +@keyframes kidToyBounce { + 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; } + 50% { transform: translateY(-20px) rotate(360deg); opacity: 1; } +} + +/* 成长装饰元素 */ +.kid-trophy, .kid-rocket, .kid-flower, .kid-rainbow { + position: absolute; + font-size: 2.5rem; + animation: kidGrowthSpin 7s ease-in-out infinite; +} + +.trophy-1 { top: 15%; left: 18%; animation-delay: 0s; } +.trophy-2 { bottom: 35%; right: 12%; animation-delay: 3s; } +.star-big { top: 50%; left: 10%; font-size: 3rem; animation-delay: 1s; } +.rocket-1 { bottom: 50%; right: 20%; animation-delay: 2s; } +.flower-1 { top: 70%; left: 25%; animation-delay: 4s; } +.flower-2 { bottom: 20%; left: 40%; animation-delay: 5s; } +.kid-rainbow { top: 10%; right: 30%; font-size: 3rem; animation-delay: 6s; } + +@keyframes kidGrowthSpin { + 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; } + 50% { transform: scale(1.3) rotate(180deg); opacity: 1; } +} + +/* 童趣标题样式 */ +.kid-caption { + position: absolute; + bottom: 25%; + left: 50%; + transform: translateX(-50%); + z-index: 10; + color: white; + text-align: center; + max-width: 900px; + width: 95%; +} + +.hero-badge-kid { + display: inline-block; + background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); + color: #FF6B6B; + padding: 12px 25px; + border-radius: 30px; + font-size: 1rem; + font-weight: 800; + margin-bottom: 1.5rem; + border: 3px solid rgba(255, 255, 255, 0.8); + box-shadow: 0 8px 25px rgba(0,0,0,0.2); + animation: badgePulse 3s ease-in-out infinite; +} + +@keyframes badgePulse { + 0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(0,0,0,0.2); } + 50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(0,0,0,0.3); } +} + +.hero-title-kid { + font-size: 4rem; + font-weight: 900; + line-height: 1.1; + margin-bottom: 2rem; + text-shadow: 3px 3px 15px rgba(0,0,0,0.5); + position: relative; +} + +.rainbow-text { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7, #DDA0DD); + background-size: 400% 400%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: rainbowMove 4s ease-in-out infinite; +} + +@keyframes rainbowMove { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +.bounce-text { + display: inline-block; + animation: titleBounce 2s ease-in-out infinite; +} + +@keyframes titleBounce { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } +} + +.wiggle-text { + display: inline-block; + animation: titleWiggle 3s ease-in-out infinite; +} + +@keyframes titleWiggle { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(2deg); } + 75% { transform: rotate(-2deg); } +} + +.scale-text { + display: inline-block; + animation: titleScale 2.5s ease-in-out infinite; +} + +@keyframes titleScale { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.hero-subtitle-kid { + font-size: 1.4rem; + line-height: 1.8; + margin-bottom: 2.5rem; + opacity: 0.95; + text-shadow: 2px 2px 8px rgba(0,0,0,0.5); + font-weight: 600; +} + +/* 童趣按钮样式 */ +.btn-hero-kid { + border: none; + padding: 18px 35px; + border-radius: 50px; + color: white; + font-size: 1.2rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + transition: all 0.4s ease; + text-decoration: none !important; + position: relative; + overflow: hidden; +} + +.btn-magic { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1); + background-size: 200% 200%; + animation: magicGradient 3s ease-in-out infinite; +} + +.btn-adventure { + background: linear-gradient(45deg, #96CEB4, #FFEAA7, #DDA0DD); + background-size: 200% 200%; + animation: adventureGradient 3s ease-in-out infinite; +} + +.btn-play { + background: linear-gradient(45deg, #FFEAA7, #FF6B6B, #4ECDC4); + background-size: 200% 200%; + animation: playGradient 3s ease-in-out infinite; +} + +.btn-growth { + background: linear-gradient(45deg, #DDA0DD, #96CEB4, #45B7D1); + background-size: 200% 200%; + animation: growthGradient 3s ease-in-out infinite; +} + +@keyframes magicGradient { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +@keyframes adventureGradient { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +@keyframes playGradient { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +@keyframes growthGradient { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +.btn-hero-kid:hover { + transform: translateY(-5px) scale(1.05); + box-shadow: 0 15px 40px rgba(0,0,0,0.4); + color: white; +} + +.btn-hero-kid::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); + transition: left 0.6s; +} + +.btn-hero-kid:hover::before { + left: 100%; +} + +/* 童趣控制器 */ +.kid-control { + z-index: 15; + width: 70px; + height: 70px; + background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); + border-radius: 50%; + border: none; + margin: 0 20px; + box-shadow: 0 8px 25px rgba(0,0,0,0.2); + transition: all 0.3s ease; +} + +.kid-control:hover { + transform: scale(1.1); + box-shadow: 0 12px 35px rgba(0,0,0,0.3); +} + +.kid-arrow-prev, .kid-arrow-next { + font-size: 2rem; + color: #FF6B6B; +} + +/* 童趣指示器 */ +.hero-carousel-kid .carousel-indicators { + bottom: 40px; + z-index: 15; +} + +.hero-carousel-kid .carousel-indicators button { + width: 20px !important; + height: 20px !important; + border-radius: 50% !important; + margin: 0 12px !important; + background: rgba(255, 255, 255, 0.6) !important; + border: 3px solid white !important; + transition: all 0.3s ease; +} + +.hero-carousel-kid .carousel-indicators .active { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4) !important; + transform: scale(1.3); +} + +/* 童趣波浪分隔符 */ +.kid-wavy-divider { + height: 120px; + overflow: hidden; + margin-top: -60px; + position: relative; + z-index: 10; +} + +.kid-wavy-divider svg { + width: 100%; + height: 100%; +} + +/* 背景样式 */ +.bg-kid-wonderland { + background: linear-gradient(135deg, #E8F5E8 0%, #F0F8FF 50%, #FFF8DC 100%); + position: relative; + overflow: hidden; +} + +.bg-kid-wonderland::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 15% 25%, rgba(255, 107, 107, 0.05) 15%, transparent 25%), + radial-gradient(circle at 85% 35%, rgba(78, 205, 196, 0.05) 20%, transparent 30%), + radial-gradient(circle at 45% 75%, rgba(69, 183, 209, 0.05) 18%, transparent 28%); + z-index: 0; +} + +.bg-kid-playground { + background: linear-gradient(135deg, #FFF0F5 0%, #F0FFFF 50%, #F5FFFA 100%); + position: relative; + overflow: hidden; +} + +.bg-kid-playground::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 30%, rgba(150, 206, 180, 0.08) 15%, transparent 25%), + radial-gradient(circle at 80% 20%, rgba(255, 234, 167, 0.08) 20%, transparent 30%), + radial-gradient(circle at 50% 80%, rgba(221, 160, 221, 0.08) 18%, transparent 28%); + z-index: 0; +} + +/* 童趣区块标题 */ +.section-title-kid { + text-align: center; + margin-bottom: 4rem; + position: relative; + z-index: 1; +} + +.title-with-stars, .title-with-emojis { + font-size: 3rem; + font-weight: 900; + background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 1rem; + text-shadow: 2px 2px 8px rgba(0,0,0,0.1); + animation: titleShine 4s ease-in-out infinite; +} + +@keyframes titleShine { + 0%, 100% { filter: brightness(1); } + 50% { filter: brightness(1.2); } +} + +.subtitle-rainbow, .subtitle-fun { + font-size: 1.3rem; + color: #666; + margin-bottom: 1rem; + font-weight: 600; +} + +.title-decoration { + margin-top: 1rem; +} + +.deco-star, .deco-heart, .deco-balloon, .deco-gift { + font-size: 1.8rem; + margin: 0 10px; + animation: decoFloat 3s ease-in-out infinite; +} + +.deco-star:nth-child(1) { animation-delay: 0s; } +.deco-heart { animation-delay: 1s; } +.deco-star:nth-child(3) { animation-delay: 2s; } +.deco-balloon:nth-child(1) { animation-delay: 0.5s; } +.deco-gift { animation-delay: 1.5s; } +.deco-balloon:nth-child(3) { animation-delay: 2.5s; } + +@keyframes decoFloat { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-10px) rotate(5deg); } +} + +/* 增强功能卡片 */ +.kid-feature-card-enhanced { + background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%); + border-radius: 30px; + padding: 2.5rem; + box-shadow: 0 15px 40px rgba(0,0,0,0.08); + border: 3px solid transparent; + transition: all 0.4s ease; + position: relative; + overflow: hidden; + height: 100%; +} + +.card-glow { + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border-radius: 30px; + background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7); + z-index: -1; + opacity: 0; + transition: opacity 0.3s ease; +} + +.kid-feature-card-enhanced:hover .card-glow { + opacity: 0.3; +} + +.kid-feature-card-enhanced:hover { + transform: translateY(-10px) scale(1.03); + box-shadow: 0 25px 60px rgba(0,0,0,0.15); +} + +.icon-bubble-big { + width: 100px; + height: 100px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + font-size: 3rem; + animation: iconBounce 4s ease-in-out infinite; +} + +.magic-bubble { background: linear-gradient(45deg, #FF6B6B, #FFB6C1); } +.robot-bubble { background: linear-gradient(45deg, #4ECDC4, #98FB98); } +.chart-bubble { background: linear-gradient(45deg, #FFD700, #FFEAA7); } +.game-bubble { background: linear-gradient(45deg, #DDA0DD, #E6E6FA); } + +@keyframes iconBounce { + 0%, 100% { transform: translateY(0px) scale(1); } + 50% { transform: translateY(-8px) scale(1.1); } +} + +.feature-title { + font-size: 1.4rem; + font-weight: 800; + color: #333; + margin-bottom: 1rem; + text-align: center; +} + +.feature-desc { + color: #666; + font-size: 1rem; + line-height: 1.6; + text-align: center; + margin-bottom: 1.5rem; +} + +.feature-stars { + text-align: center; +} + +.feature-stars .star { + font-size: 1.2rem; + margin: 0 2px; + animation: starTwinkle 2s ease-in-out infinite; +} + +.feature-stars .star:nth-child(1) { animation-delay: 0s; } +.feature-stars .star:nth-child(2) { animation-delay: 0.5s; } +.feature-stars .star:nth-child(3) { animation-delay: 1s; } + +@keyframes starTwinkle { + 0%, 100% { opacity: 0.6; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.2); } +} + +/* 超级场景卡片 */ +.scenario-card-super { + background: linear-gradient(145deg, #ffffff 0%, #f8fcff 100%); + border-radius: 25px; + overflow: hidden; + box-shadow: 0 12px 35px rgba(0,0,0,0.08); + transition: all 0.4s ease; + height: 100%; + position: relative; + border: 2px solid transparent; +} + +.scenario-card-super:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 20px 50px rgba(0,0,0,0.15); +} + +.card-header-social { background: linear-gradient(135deg, #FF6B6B, #FF8E53); } +.card-header-daily { background: linear-gradient(135deg, #4ECDC4, #56C596); } +.card-header-fun { background: linear-gradient(135deg, #FFD93D, #FFCC02); } + +.scenario-card-super .card-header-social, +.scenario-card-super .card-header-daily, +.scenario-card-super .card-header-fun { + padding: 2rem; + position: relative; + text-align: center; + color: white; +} + +.card-sparkles { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} + +.sparkle { + position: absolute; + font-size: 1.5rem; + animation: sparkleFloat 3s ease-in-out infinite; +} + +.sparkle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; } +.sparkle:nth-child(2) { top: 30%; right: 20%; animation-delay: 1s; } +.sparkle:nth-child(3) { bottom: 25%; left: 20%; animation-delay: 2s; } + +@keyframes sparkleFloat { + 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; } + 50% { transform: translateY(-15px) rotate(180deg); opacity: 1; } +} + +.scenario-icon-super { + width: 80px; + height: 80px; + background: rgba(255,255,255,0.2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-size: 3rem; + border: 3px solid rgba(255,255,255,0.3); + animation: iconPulse 3s ease-in-out infinite; +} + +@keyframes iconPulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +.card-body-kid { + padding: 2rem; +} + +.scenario-title-kid { + font-size: 1.4rem; + font-weight: 800; + color: #333; + margin-bottom: 1rem; + text-align: center; +} + +.scenario-desc-kid { + color: #666; + font-size: 0.95rem; + line-height: 1.6; + text-align: center; + margin-bottom: 1.5rem; +} + +.scenario-tags-kid { + text-align: center; + margin-bottom: 1.5rem; +} + +.tag-kid { + display: inline-block; + padding: 6px 15px; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 600; + margin: 3px; + border: 2px solid transparent; + transition: all 0.3s ease; +} + +.tag-social { background: linear-gradient(45deg, #FFE5E5, #FFD0D0); color: #FF6B6B; } +.tag-team { background: linear-gradient(45deg, #E5F3FF, #D0E7FF); color: #4ECDC4; } +.tag-food { background: linear-gradient(45deg, #FFF5E5, #FFEAD0); color: #FF8C00; } +.tag-shop { background: linear-gradient(45deg, #E5FFE5, #D0FFD0); color: #32CD32; } +.tag-puzzle { background: linear-gradient(45deg, #F5E5FF, #E8D0FF); color: #9370DB; } +.tag-role { background: linear-gradient(45deg, #FFFFE5, #FFFFD0); color: #FFD700; } + +.tag-kid:hover { + transform: scale(1.1); + border-color: currentColor; +} + +.card-footer-kid { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2rem 2rem; +} + +.difficulty-emoji, .play-emoji { + font-size: 1rem; + font-weight: 600; +} + +/* 超级CTA区块 */ +.cta-section-super { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 100px 0; + position: relative; + overflow: hidden; +} + +.cta-decorations { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} + +.cta-star, .cta-balloon, .cta-gift, .cta-rocket, .cta-rainbow { + position: absolute; + font-size: 2.5rem; + animation: ctaFloat 6s ease-in-out infinite; +} + +.star-1 { top: 15%; left: 10%; animation-delay: 0s; } +.star-2 { top: 25%; right: 15%; animation-delay: 2s; } +.star-3 { bottom: 30%; left: 15%; animation-delay: 4s; } +.balloon-1 { top: 20%; left: 20%; animation-delay: 1s; } +.balloon-2 { bottom: 40%; right: 20%; animation-delay: 3s; } +.balloon-3 { top: 60%; right: 10%; animation-delay: 5s; } +.cta-gift { bottom: 20%; left: 80%; animation-delay: 1.5s; } +.cta-rocket { top: 40%; left: 5%; animation-delay: 3.5s; } +.cta-rainbow { top: 10%; left: 50%; animation-delay: 2.5s; } + +@keyframes ctaFloat { + 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; } + 50% { transform: translateY(-20px) rotate(10deg); opacity: 1; } +} + +.cta-title-super { + font-size: 3.5rem; + font-weight: 900; + margin-bottom: 1.5rem; + text-shadow: 2px 2px 10px rgba(0,0,0,0.3); + animation: titlePulse 4s ease-in-out infinite; +} + +@keyframes titlePulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.02); } +} + +.cta-subtitle-super { + font-size: 1.4rem; + margin-bottom: 3rem; + opacity: 0.95; + line-height: 1.6; +} + +.cta-button-container { + margin-bottom: 2rem; +} + +.btn-cta-super { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #FFD93D); + background-size: 200% 200%; + border: none; + padding: 20px 40px; + border-radius: 50px; + color: white; + font-size: 1.3rem; + font-weight: 800; + text-decoration: none !important; + display: inline-flex; + align-items: center; + gap: 10px; + box-shadow: 0 15px 40px rgba(0,0,0,0.3); + transition: all 0.4s ease; + animation: ctaGradient 4s ease-in-out infinite; + position: relative; + overflow: hidden; +} + +@keyframes ctaGradient { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +.btn-cta-super:hover { + transform: translateY(-5px) scale(1.05); + box-shadow: 0 20px 50px rgba(0,0,0,0.4); + color: white; +} + +.btn-cta-super::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); + transition: left 0.6s; +} + +.btn-cta-super:hover::before { + left: 100%; +} + +.btn-icon, .btn-sparkle { + font-size: 1.5rem; + animation: iconSpin 3s ease-in-out infinite; +} + +.btn-sparkle { + animation-delay: 1.5s; +} + +@keyframes iconSpin { + 0%, 100% { transform: rotate(0deg); } + 50% { transform: rotate(360deg); } +} + +.cta-features { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.cta-feature { + background: rgba(255,255,255,0.2); + padding: 10px 20px; + border-radius: 25px; + font-size: 1rem; + font-weight: 600; + border: 2px solid rgba(255,255,255,0.3); + animation: featureBob 3s ease-in-out infinite; +} + +.cta-feature:nth-child(1) { animation-delay: 0s; } +.cta-feature:nth-child(2) { animation-delay: 1s; } +.cta-feature:nth-child(3) { animation-delay: 2s; } + +@keyframes featureBob { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-5px); } +} + +/* 响应式优化 */ +@media (max-width: 768px) { + .hero-title-kid { + font-size: 2.5rem; + } + + .hero-subtitle-kid { + font-size: 1.1rem; + } + + .title-with-stars, .title-with-emojis { + font-size: 2.2rem; + } + + .cta-title-super { + font-size: 2.5rem; + } + + .kid-decorations .kid-star, + .kid-decorations .kid-cloud, + .kid-decorations .kid-balloon { + font-size: 1.5rem; + } + + .music-notes .music-note { + font-size: 1.3rem; + } + + .btn-hero-kid { + padding: 15px 25px; + font-size: 1rem; + } + + .icon-bubble-big { + width: 80px; + height: 80px; + font-size: 2.5rem; + } + + .scenario-icon-super { + width: 60px; + height: 60px; + font-size: 2.5rem; + } + + .cta-features { + gap: 15px; + } + + .cta-feature { + font-size: 0.9rem; + padding: 8px 16px; + } +} + +@media (max-width: 576px) { + .kid-caption { + bottom: 20%; + width: 100%; + padding: 0 10px; + } + + .hero-title-kid { + font-size: 2rem; + } + + .hero-subtitle-kid { + font-size: 1rem; + } + + .btn-hero-kid { + padding: 12px 20px; + font-size: 0.9rem; + } + + .title-with-stars, .title-with-emojis { + font-size: 1.8rem; + } + + .cta-title-super { + font-size: 2rem; + } + + .cta-subtitle-super { + font-size: 1.1rem; + } + + .btn-cta-super { + padding: 16px 30px; + font-size: 1.1rem; + } +} + +/* 加载动画优化 */ +.page-loading { + opacity: 0; + animation: pageLoad 1s ease-out forwards; +} + +@keyframes pageLoad { + to { opacity: 1; } +} + +/* 滚动触发动画 */ +.fade-in-on-scroll { + opacity: 0; + transform: translateY(30px); + transition: all 0.8s ease; +} + +.fade-in-on-scroll.visible { + opacity: 1; + transform: translateY(0); +} + + +/* ===== 超丰富主页样式 ===== */ + +/* 数据统计展示 */ +.stats-showcase { + margin-bottom: 3rem; +} + +.stat-card { + background: linear-gradient(145deg, #ffffff, #f8fbff); + border-radius: 20px; + padding: 2rem 1rem; + text-align: center; + box-shadow: 0 10px 30px rgba(0,0,0,0.08); + transition: all 0.3s ease; + border: 2px solid transparent; + position: relative; + overflow: hidden; +} + +.stat-card::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); + transition: left 1s; +} + +.stat-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0,0,0,0.15); +} + +.stat-card:hover::before { + left: 100%; +} + +.stat-users { border-color: #FF6B6B; } +.stat-conversations { border-color: #4ECDC4; } +.stat-improvement { border-color: #FFD93D; } +.stat-satisfaction { border-color: #96CEB4; } + +.stat-icon { + font-size: 3rem; + margin-bottom: 1rem; + animation: statIconBounce 2s ease-in-out infinite; +} + +.stat-users .stat-icon { animation-delay: 0s; } +.stat-conversations .stat-icon { animation-delay: 0.5s; } +.stat-improvement .stat-icon { animation-delay: 1s; } +.stat-satisfaction .stat-icon { animation-delay: 1.5s; } + +@keyframes statIconBounce { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } +} + +.stat-number { + font-size: 3rem; + font-weight: 900; + color: #333; + margin-bottom: 0.5rem; + font-family: 'Arial Black', sans-serif; +} + +.stat-label { + color: #666; + font-weight: 600; + font-size: 1rem; +} + +/* 高级功能卡片 */ +.feature-card-advanced { + background: linear-gradient(145deg, #ffffff, #f8fbff); + border-radius: 25px; + padding: 2rem; + box-shadow: 0 15px 40px rgba(0,0,0,0.1); + transition: all 0.4s ease; + border: 3px solid transparent; + height: 100%; + position: relative; + overflow: hidden; +} + +.feature-card-advanced:hover { + transform: translateY(-10px); + box-shadow: 0 25px 60px rgba(0,0,0,0.2); +} + +.voice-clone-card { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +.ai-chat-card { + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + color: white; +} + +.feature-header { + text-align: center; + margin-bottom: 2rem; +} + +.feature-icon-big { + width: 100px; + height: 100px; + background: rgba(255,255,255,0.2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1rem; + font-size: 3.5rem; + border: 3px solid rgba(255,255,255,0.3); + animation: featureIconPulse 3s ease-in-out infinite; +} + +@keyframes featureIconPulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +.feature-header h4 { + font-size: 1.5rem; + font-weight: 800; + margin: 0; +} + +/* 语音波浪演示 */ +.voice-wave-demo { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + height: 80px; + margin: 1rem 0; +} + +.wave-bar { + width: 8px; + height: 30px; + background: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6)); + border-radius: 4px; + animation: waveDemo 1.5s ease-in-out infinite; +} + +.wave-bar:nth-child(1) { animation-delay: 0s; } +.wave-bar:nth-child(2) { animation-delay: 0.2s; } +.wave-bar:nth-child(3) { animation-delay: 0.4s; } +.wave-bar:nth-child(4) { animation-delay: 0.6s; } +.wave-bar:nth-child(5) { animation-delay: 0.8s; } + +@keyframes waveDemo { + 0%, 100% { height: 30px; opacity: 0.6; } + 50% { height: 60px; opacity: 1; } +} + +.demo-text { + text-align: center; + font-size: 1rem; + margin-bottom: 1.5rem; + opacity: 0.9; +} + +/* 功能优势 */ +.feature-benefits { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 2rem; +} + +.benefit-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.8rem; + background: rgba(255,255,255,0.1); + border-radius: 15px; + backdrop-filter: blur(10px); +} + +.benefit-icon { + font-size: 1.5rem; +} + +/* AI聊天演示 */ +.chat-demo { + background: rgba(255,255,255,0.1); + border-radius: 15px; + padding: 1.5rem; + margin-bottom: 1.5rem; + backdrop-filter: blur(10px); +} + +.chat-bubble { + display: flex; + align-items: center; + gap: 0.8rem; + margin-bottom: 1rem; + padding: 0.8rem; + border-radius: 15px; + font-size: 0.9rem; +} + +.ai-bubble { + background: rgba(255,255,255,0.2); + justify-content: flex-start; +} + +.user-bubble { + background: rgba(255,255,255,0.3); + justify-content: flex-end; + flex-direction: row-reverse; +} + +.typing-indicator { + display: inline-flex; + gap: 4px; +} + +.typing-indicator span { + width: 6px; + height: 6px; + border-radius: 50%; + background: rgba(255,255,255,0.8); + animation: typingDot 1.4s ease-in-out infinite; +} + +.typing-indicator span:nth-child(1) { animation-delay: 0s; } +.typing-indicator span:nth-child(2) { animation-delay: 0.2s; } +.typing-indicator span:nth-child(3) { animation-delay: 0.4s; } + +@keyframes typingDot { + 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } + 30% { opacity: 1; transform: scale(1.2); } +} + +.ai-features { + display: flex; + justify-content: space-around; + margin-bottom: 2rem; +} + +.ai-feature { + text-align: center; + font-size: 0.85rem; + font-weight: 600; + opacity: 0.9; +} + +/* 功能按钮 */ +.btn-feature-try { + background: rgba(255,255,255,0.2); + border: 2px solid rgba(255,255,255,0.4); + color: white; + padding: 12px 24px; + border-radius: 25px; + font-weight: 700; + font-size: 1rem; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + width: 100%; + backdrop-filter: blur(10px); +} + +.btn-feature-try:hover { + background: rgba(255,255,255,0.3); + transform: scale(1.05); + color: white; +} + +.btn-icon { + font-size: 1.2rem; +} + +/* 学习步骤 */ +.learning-steps { + background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,251,255,0.9)); + border-radius: 25px; + padding: 3rem 2rem; + margin-top: 3rem; + box-shadow: 0 15px 40px rgba(0,0,0,0.08); +} + +.steps-title { + text-align: center; + font-size: 2rem; + font-weight: 800; + color: #333; + margin-bottom: 3rem; +} + +.steps-container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 2rem; +} + +.step-item { + text-align: center; + position: relative; + flex: 1; + min-width: 150px; + max-width: 200px; +} + +.step-number { + position: absolute; + top: -10px; + right: -10px; + width: 30px; + height: 30px; + background: linear-gradient(45deg, #FF6B6B, #4ECDC4); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 800; + font-size: 0.9rem; + z-index: 2; +} + +.step-icon { + width: 80px; + height: 80px; + background: linear-gradient(145deg, #f8fbff, #ffffff); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1rem; + font-size: 2.5rem; + box-shadow: 0 8px 25px rgba(0,0,0,0.1); + animation: stepFloat 4s ease-in-out infinite; +} + +.step-item:nth-child(odd) .step-icon { animation-delay: 0s; } +.step-item:nth-child(even) .step-icon { animation-delay: 2s; } + +@keyframes stepFloat { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-8px); } +} + +.step-title { + font-size: 1.1rem; + font-weight: 700; + color: #333; + margin-bottom: 0.5rem; +} + +.step-desc { + font-size: 0.9rem; + color: #666; +} + +.step-arrow { + font-size: 2rem; + color: #4ECDC4; + animation: arrowPulse 2s ease-in-out infinite; +} + +@keyframes arrowPulse { + 0%, 100% { opacity: 0.6; } + 50% { opacity: 1; } +} + +/* 场景分类导航 */ +.scenario-nav { + display: flex; + justify-content: center; + gap: 1rem; + margin-bottom: 3rem; + flex-wrap: wrap; +} + +.scenario-nav-btn { + background: linear-gradient(145deg, #ffffff, #f8fbff); + border: 3px solid transparent; + padding: 12px 25px; + border-radius: 25px; + font-weight: 700; + color: #666; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + box-shadow: 0 5px 15px rgba(0,0,0,0.08); +} + +.scenario-nav-btn:hover, +.scenario-nav-btn.active { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4); + color: white; + transform: translateY(-3px); + box-shadow: 0 10px 25px rgba(0,0,0,0.15); +} + +.nav-icon { + font-size: 1.2rem; +} + +/* 场景网格 */ +.scenarios-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.scenario-card-new { + background: linear-gradient(145deg, #ffffff, #f8fbff); + border-radius: 25px; + overflow: hidden; + box-shadow: 0 15px 40px rgba(0,0,0,0.1); + transition: all 0.4s ease; + border: 3px solid transparent; +} + +.scenario-card-new:hover { + transform: translateY(-10px); + box-shadow: 0 25px 60px rgba(0,0,0,0.2); +} + +.scenario-thumbnail { + height: 150px; + position: relative; + overflow: hidden; +} + +.scenario-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.social-bg { background: linear-gradient(135deg, #FF6B6B, #FF8E53); } +.daily-bg { background: linear-gradient(135deg, #4ECDC4, #56C596); } +.fun-bg { background: linear-gradient(135deg, #FFD93D, #FFCC02); } + +.scenario-emoji { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 4rem; + animation: scenarioEmojiFloat 3s ease-in-out infinite; +} + +@keyframes scenarioEmojiFloat { + 0%, 100% { transform: translate(-50%, -50%) scale(1); } + 50% { transform: translate(-50%, -50%) scale(1.1); } +} + +.scenario-difficulty { + position: absolute; + top: 15px; + right: 15px; + background: rgba(255,255,255,0.9); + padding: 5px 12px; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; + color: #333; +} + +.scenario-content { + padding: 2rem; +} + +.scenario-content h5 { + font-size: 1.3rem; + font-weight: 800; + color: #333; + margin-bottom: 1rem; +} + +.scenario-content p { + color: #666; + font-size: 0.95rem; + line-height: 1.6; + margin-bottom: 1.5rem; +} + +.scenario-stats { + display: flex; + gap: 1rem; + margin-bottom: 1rem; +} + +.scenario-stats .stat { + font-size: 0.8rem; + color: #888; + font-weight: 600; +} + +.scenario-tags { + margin-bottom: 2rem; +} + +.scenario-tags .tag { + display: inline-block; + background: #f0f8ff; + color: #4ECDC4; + padding: 4px 12px; + border-radius: 12px; + font-size: 0.75rem; + font-weight: 600; + margin: 2px; +} + +.scenario-preview { + display: flex; + gap: 1rem; +} + +.btn-preview, +.btn-start { + flex: 1; + padding: 10px 16px; + border-radius: 20px; + font-weight: 700; + font-size: 0.9rem; + transition: all 0.3s ease; + border: none; + cursor: pointer; +} + +.btn-preview { + background: linear-gradient(45deg, #e3f2fd, #bbdefb); + color: #1976d2; +} + +.btn-start { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4); + color: white; +} + +.btn-preview:hover, +.btn-start:hover { + transform: scale(1.05); +} + +/* 场景预览弹窗 */ +.scenario-preview-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.8); + z-index: 9999; + display: none; + align-items: center; + justify-content: center; + padding: 2rem; +} + +.preview-content { + background: white; + border-radius: 25px; + max-width: 600px; + width: 100%; + max-height: 80vh; + overflow: hidden; + animation: modalSlideIn 0.3s ease; +} + +@keyframes modalSlideIn { + from { transform: scale(0.8) translateY(-50px); opacity: 0; } + to { transform: scale(1) translateY(0); opacity: 1; } +} + +.preview-header { + padding: 2rem 2rem 1rem; + border-bottom: 2px solid #f0f0f0; + display: flex; + justify-content: space-between; + align-items: center; +} + +.preview-close { + background: none; + border: none; + font-size: 2rem; + color: #666; + cursor: pointer; + padding: 0; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.preview-close:hover { + background: #f0f0f0; + color: #333; +} + +.preview-body { + padding: 2rem; + max-height: 400px; + overflow-y: auto; +} + +.preview-chat { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.preview-footer { + padding: 1rem 2rem 2rem; + display: flex; + gap: 1rem; + justify-content: flex-end; +} + +.btn-preview-close, +.btn-preview-start { + padding: 10px 20px; + border-radius: 20px; + font-weight: 700; + border: none; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-preview-close { + background: #f0f0f0; + color: #666; +} + +.btn-preview-start { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4); + color: white; +} + +/* 超级CTA区域 */ +.cta-section-mega { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 100px 0; + position: relative; + overflow: hidden; +} + +.cta-mega-decorations { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} + +.cta-floating { + position: absolute; + font-size: 3rem; + animation: ctaFloating 8s ease-in-out infinite; +} + +.floating-1 { top: 10%; left: 5%; animation-delay: 0s; } +.floating-2 { top: 20%; right: 10%; animation-delay: 1s; } +.floating-3 { bottom: 30%; left: 10%; animation-delay: 2s; } +.floating-4 { bottom: 20%; right: 15%; animation-delay: 3s; } +.floating-5 { top: 60%; left: 20%; animation-delay: 4s; } +.floating-6 { top: 40%; right: 5%; animation-delay: 5s; } + +@keyframes ctaFloating { + 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; } + 50% { transform: translateY(-30px) rotate(10deg); opacity: 1; } +} + +.cta-mega-title { + font-size: 4rem; + font-weight: 900; + margin-bottom: 1.5rem; + text-shadow: 2px 2px 10px rgba(0,0,0,0.3); + line-height: 1.1; +} + +.highlight-text { + background: linear-gradient(45deg, #FFD700, #FFA500); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + position: relative; +} + +.cta-mega-subtitle { + font-size: 1.4rem; + margin-bottom: 3rem; + opacity: 0.95; + line-height: 1.6; +} + +/* CTA优势列表 */ +.cta-benefits { + margin-bottom: 3rem; +} + +.benefit-row { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 1.5rem; + padding: 1rem; + background: rgba(255,255,255,0.1); + border-radius: 15px; + backdrop-filter: blur(10px); + transition: all 0.3s ease; +} + +.benefit-row:hover { + background: rgba(255,255,255,0.2); + transform: translateX(10px); +} + +.benefit-row .benefit-icon { + font-size: 2.5rem; + width: 60px; + text-align: center; +} + +.benefit-text strong { + display: block; + font-size: 1.1rem; + margin-bottom: 0.3rem; +} + +.benefit-text small { + opacity: 0.8; + font-size: 0.9rem; +} + +/* CTA按钮 */ +.btn-cta-mega { + background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #FFD93D); + background-size: 200% 200%; + border: none; + padding: 20px 40px; + border-radius: 50px; + color: white; + font-size: 1.4rem; + font-weight: 800; + text-decoration: none !important; + display: inline-flex; + align-items: center; + gap: 15px; + box-shadow: 0 15px 40px rgba(0,0,0,0.3); + transition: all 0.4s ease; + animation: ctaMegaGradient 4s ease-in-out infinite; + position: relative; + overflow: hidden; +} + +@keyframes ctaMegaGradient { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +.btn-cta-mega:hover { + transform: translateY(-5px) scale(1.05); + box-shadow: 0 25px 60px rgba(0,0,0,0.4); + color: white; +} + +.btn-shine { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); + transition: left 0.6s; +} + +.btn-cta-mega:hover .btn-shine { + left: 100%; +} + +.cta-promise { + text-align: center; + margin-top: 1rem; + opacity: 0.8; +} + +/* 设备展示 */ +.device-showcase { + position: relative; + margin-bottom: 2rem; +} + +.device { + background: linear-gradient(145deg, #ffffff, #f0f0f0); + border-radius: 20px; + box-shadow: 0 20px 50px rgba(0,0,0,0.2); + position: relative; + animation: deviceFloat 6s ease-in-out infinite; +} + +.phone { + width: 200px; + height: 350px; + margin: 0 auto; + animation-delay: 0s; +} + +.tablet { + width: 280px; + height: 200px; + position: absolute; + top: 100px; + right: -50px; + animation-delay: 3s; +} + +@keyframes deviceFloat { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-15px) rotate(2deg); } +} + +.device-screen { + background: #000; + border-radius: 15px; + margin: 15px; + height: calc(100% - 30px); + overflow: hidden; + position: relative; +} + +.app-interface, +.progress-interface { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + height: 100%; + padding: 20px; + color: white; +} + +.app-header, +.progress-title { + text-align: center; + font-weight: 700; + margin-bottom: 20px; + font-size: 1rem; +} + +.chat-message { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 15px; + font-size: 0.8rem; +} + +.chat-message.ai { + justify-content: flex-start; +} + +.chat-message.user { + justify-content: flex-end; + flex-direction: row-reverse; +} + +.chat-message .avatar { + width: 30px; + height: 30px; + border-radius: 50%; + background: rgba(255,255,255,0.2); + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; +} + +.progress-stats { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.stat-circle { + width: 80px; + height: 80px; + border-radius: 50%; + background: conic-gradient(#FFD700 0deg 306deg, rgba(255,255,255,0.2) 306deg 360deg); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; +} + +.stat-circle::before { + content: ''; + position: absolute; + width: 60px; + height: 60px; + border-radius: 50%; + background: #667eea; +} + +.stat-circle .number, +.stat-circle .label { + position: relative; + z-index: 2; +} + +.stat-circle .number { + font-size: 1.2rem; + font-weight: 900; +} + +.stat-circle .label { + font-size: 0.6rem; + opacity: 0.8; +} + +/* 用户评价气泡 */ +.testimonial-bubbles { + position: relative; +} + +.testimonial-bubble { + position: absolute; + background: rgba(255,255,255,0.95); + border-radius: 20px; + padding: 1.5rem; + box-shadow: 0 10px 30px rgba(0,0,0,0.2); + max-width: 250px; + animation: bubbleFloat 8s ease-in-out infinite; +} + +.bubble-1 { + top: -50px; + left: -100px; + animation-delay: 0s; +} + +.bubble-2 { + bottom: -80px; + right: -120px; + animation-delay: 4s; +} + +@keyframes bubbleFloat { + 0%, 100% { transform: translateY(0px); opacity: 0.9; } + 50% { transform: translateY(-20px); opacity: 1; } +} + +.bubble-content { + color: #333; +} + +.user-info { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.8rem; +} + +.user-info .avatar { + font-size: 1.5rem; +} + +.user-info .name { + font-weight: 700; + font-size: 0.9rem; +} + +.bubble-content p { + font-size: 0.8rem; + line-height: 1.4; + margin: 0; + font-style: italic; +} + +/* 响应式优化 */ +@media (max-width: 768px) { + .stat-card { + padding: 1.5rem 0.8rem; + } + + .stat-number { + font-size: 2.5rem; + } + + .feature-card-advanced { + padding: 1.5rem; + } + + .steps-container { + flex-direction: column; + gap: 3rem; + } + + .step-arrow { + transform: rotate(90deg); + } + + .scenarios-grid { + grid-template-columns: 1fr; + } + + .scenario-nav { + gap: 0.5rem; + } + + .scenario-nav-btn { + padding: 8px 16px; + font-size: 0.9rem; + } + + .cta-mega-title { + font-size: 2.5rem; + } + + .cta-mega-subtitle { + font-size: 1.1rem; + } + + .benefit-row { + flex-direction: column; + text-align: center; + } + + .device-showcase .tablet { + display: none; + } + + .testimonial-bubble { + position: static; + margin: 1rem 0; + max-width: 100%; + } +} + +@media (max-width: 576px) { + .stat-icon { + font-size: 2.5rem; + } + + .stat-number { + font-size: 2rem; + } + + .feature-icon-big { + width: 80px; + height: 80px; + font-size: 3rem; + } + + .wave-bar { + width: 6px; + } + + .btn-cta-mega { + padding: 16px 30px; + font-size: 1.2rem; + } +} + diff --git a/app/static/images/hero/placeholder.svg b/app/static/images/hero/placeholder.svg new file mode 100644 index 0000000..47f00eb --- /dev/null +++ b/app/static/images/hero/placeholder.svg @@ -0,0 +1,11 @@ + + + + + + + + + + 童趣学习背景 + diff --git a/app/static/js/main.js b/app/static/js/main.js index 1cb17b5..e0834ef 100644 --- a/app/static/js/main.js +++ b/app/static/js/main.js @@ -1,177 +1,361 @@ -// 全局JavaScript功能 +// 主页增强功能 - 无彩蛋版本 document.addEventListener('DOMContentLoaded', function() { - // 自动隐藏提示消息 - const alerts = document.querySelectorAll('.alert'); - alerts.forEach(function(alert) { - setTimeout(function() { - alert.style.opacity = '0'; - setTimeout(function() { - alert.style.display = 'none'; - }, 300); - }, 5000); // 5秒后自动隐藏 + + // 页面加载动画 + document.body.classList.add('page-loading'); + setTimeout(() => { + document.body.classList.remove('page-loading'); + }, 100); + + // 数字统计动画 + animateCounters(); + + // 场景分类筛选 + initScenarioFilter(); + + // 滚动动画 + initScrollAnimations(); + + // 轮播图增强 + enhanceCarousel(); + + // 功能卡片交互 + enhanceFeatureCards(); + + console.log('🎨 主页功能已加载完成！'); +}); + +// 数字统计动画 +function animateCounters() { + const counters = document.querySelectorAll('.stat-number'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const counter = entry.target; + const target = parseInt(counter.getAttribute('data-count')); + animateCounter(counter, target); + observer.unobserve(counter); + } + }); }); - // 平滑滚动 - const links = document.querySelectorAll('a[href^="#"]'); - links.forEach(function(link) { - link.addEventListener('click', function(e) { - e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); - if (target) { - target.scrollIntoView({ - behavior: 'smooth', - block: 'start' + + counters.forEach(counter => observer.observe(counter)); +} + +function animateCounter(element, target) { + let count = 0; + const duration = 2000; // 2秒 + const step = target / (duration / 16); // 60fps + + const timer = setInterval(() => { + count += step; + if (count >= target) { + count = target; + clearInterval(timer); + } + element.textContent = Math.floor(count); + }, 16); +} + +// 场景分类筛选 +function initScenarioFilter() { + const navButtons = document.querySelectorAll('.scenario-nav-btn'); + const scenarioCards = document.querySelectorAll('.scenario-card-new'); + + navButtons.forEach(btn => { + btn.addEventListener('click', function() { + // 更新激活状态 + navButtons.forEach(b => b.classList.remove('active')); + this.classList.add('active'); + + // 筛选场景 + const category = this.getAttribute('data-category'); + + scenarioCards.forEach(card => { + if (category === 'all' || card.getAttribute('data-category') === category) { + card.style.display = 'block'; + card.style.animation = 'fadeInUp 0.5s ease forwards'; + } else { + card.style.display = 'none'; + } + }); + }); + }); +} + +// 滚动动画 +function initScrollAnimations() { + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate-in'); + + // 为子元素添加延迟动画 + const children = entry.target.querySelectorAll('.stat-card, .feature-card-advanced, .step-item'); + children.forEach((child, index) => { + setTimeout(() => { + child.classList.add('fade-in'); + }, index * 100); }); } }); + }, observerOptions); + + // 观察需要动画的元素 + document.querySelectorAll('.stats-showcase, .learning-steps, .scenarios-grid').forEach(el => { + observer.observe(el); }); - // 表单验证增强 - const forms = document.querySelectorAll('form'); - forms.forEach(function(form) { - form.addEventListener('submit', function(e) { - const submitBtn = form.querySelector('button[type="submit"]'); - if (submitBtn && !submitBtn.disabled) { - // 防止重复提交 - setTimeout(function() { - submitBtn.disabled = true; - }, 100); - } +} + +// 轮播图增强 +function enhanceCarousel() { + const carousel = document.querySelector('#heroCarousel'); + if (!carousel) return; + + // 增强指示器点击效果 + document.querySelectorAll('.carousel-indicators button').forEach(indicator => { + indicator.addEventListener('click', function() { + this.style.transform = 'scale(1.5)'; + setTimeout(() => { + this.style.transform = ''; + }, 200); }); }); - // 输入框焦点效果 - const inputs = document.querySelectorAll('.form-control'); - inputs.forEach(function(input) { - input.addEventListener('focus', function() { - this.parentNode.classList.add('focused'); + + // 控制器悬停效果 + document.querySelectorAll('.kid-control').forEach(control => { + control.addEventListener('mouseenter', function() { + this.style.transform = 'scale(1.1)'; }); - input.addEventListener('blur', function() { - this.parentNode.classList.remove('focused'); + control.addEventListener('mouseleave', function() { + this.style.transform = 'scale(1)'; }); }); - // 工具提示初始化 - if (typeof bootstrap !== 'undefined') { - const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); - tooltipTriggerList.map(function(tooltipTriggerEl) { - return new bootstrap.Tooltip(tooltipTriggerEl); +} + +// 功能卡片交互增强 +function enhanceFeatureCards() { + // 语音波浪动画控制 + const waveDemo = document.querySelector('.voice-wave-demo'); + if (waveDemo) { + const waveCard = waveDemo.closest('.feature-card-advanced'); + + waveCard.addEventListener('mouseenter', function() { + const bars = waveDemo.querySelectorAll('.wave-bar'); + bars.forEach((bar, index) => { + bar.style.animationDuration = '0.8s'; + bar.style.animationDelay = (index * 0.1) + 's'; + }); }); - // 弹出框初始化 - const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); - popoverTriggerList.map(function(popoverTriggerEl) { - return new bootstrap.Popover(popoverTriggerEl); + + waveCard.addEventListener('mouseleave', function() { + const bars = waveDemo.querySelectorAll('.wave-bar'); + bars.forEach((bar, index) => { + bar.style.animationDuration = '1.5s'; + bar.style.animationDelay = (index * 0.2) + 's'; + }); }); } - // 邮箱验证码倒计时功能 - window.startVerificationCountdown = function(buttonId, duration = 60) { - const button = document.getElementById(buttonId); - if (!button) return; + + // 聊天演示动画 + const chatDemo = document.querySelector('.chat-demo'); + if (chatDemo) { + const aiCard = chatDemo.closest('.feature-card-advanced'); - let count = duration; - const originalText = button.textContent; - - button.disabled = true; - - const timer = setInterval(function() { - button.textContent = `${count}秒后重试`; - count--; + aiCard.addEventListener('mouseenter', function() { + const typingIndicator = chatDemo.querySelector('.typing-indicator'); + if (typingIndicator) { + typingIndicator.style.animationDuration = '1s'; + } + }); + } +} + +// 场景预览功能 +window.showPreview = function(scenarioType) { + const modal = document.getElementById('scenarioPreview'); + const title = document.getElementById('previewTitle'); + const chat = document.getElementById('previewChat'); + + // 预设对话内容 + const dialogues = { + friend: [ + { type: 'ai', text: '你好呀，我叫小明！你叫什么名字？' }, + { type: 'user', text: '你好小明，我叫小红！' }, + { type: 'ai', text: '很高兴认识你小红！我们可以做朋友吗？' }, + { type: 'user', text: '当然可以！我也想和你做朋友！' } + ], + party: [ + { type: 'ai', text: '小红，下周是我的生日，你愿意来参加我的生日派对吗？' }, + { type: 'user', text: '哇，真的吗？我很想去！' }, + { type: 'ai', text: '太好了！派对在下周六下午3点，记得带上好心情哦！' } + ], + restaurant: [ + { type: 'ai', text: '欢迎光临！小朋友想吃点什么呢？' }, + { type: 'user', text: '我想要一份儿童套餐，谢谢！' }, + { type: 'ai', text: '好的，儿童套餐有汉堡、薯条和果汁，这样可以吗？' } + ], + shopping: [ + { type: 'ai', text: '小朋友，你在找什么东西吗？' }, + { type: 'user', text: '我想买一些水果给妈妈！' }, + { type: 'ai', text: '真懂事！我们这里有苹果、香蕉和橙子，你想要哪种？' } + ], + actor: [ + { type: 'ai', text: '现在你是一只小猫咪，你会怎么介绍自己呢？' }, + { type: 'user', text: '喵～我是一只可爱的小猫，我喜欢吃鱼和玩毛线球！' }, + { type: 'ai', text: '表演得太棒了！你还能学其他小动物吗？' } + ], + story: [ + { type: 'ai', text: '让我们一起编一个故事吧！从前有一只勇敢的小兔子...' }, + { type: 'user', text: '这只小兔子住在一个神奇的森林里！' }, + { type: 'ai', text: '哇！那这个森林里还有什么特别的地方吗？' } + ] + }; + + const dialogue = dialogues[scenarioType] || dialogues.friend; + + // 设置标题 + const titles = { + friend: '👫 和小明交朋友', + party: '🎂 生日派对邀请', + restaurant: '🏪 餐厅点餐小达人', + shopping: '🛍️ 超市购物助手', + actor: '🎭 小小演员训练营', + story: '🌈 创意故事大王' + }; + + title.textContent = titles[scenarioType] || '对话预览'; + + // 清空并重新填充对话 + chat.innerHTML = ''; + + dialogue.forEach((msg, index) => { + setTimeout(() => { + const msgDiv = document.createElement('div'); + msgDiv.className = `chat-bubble ${msg.type}-bubble`; + msgDiv.innerHTML = ` + ${msg.type === 'ai' ? '🤖' : '😊'} + ${msg.text} + `; + chat.appendChild(msgDiv); - if (count < 0) { - clearInterval(timer); - button.disabled = false; - button.textContent = originalText === '发送验证码' ? '重新发送' : originalText; - } - }, 1000); - - return timer; - }; - // AJAX请求封装 - window.sendAjaxRequest = function(url, data, successCallback, errorCallback) { - fetch(url, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'X-Requested-With': 'XMLHttpRequest' - }, - body: JSON.stringify(data) - }) - .then(response => response.json()) - .then(data => { - if (data.success) { - if (successCallback) successCallback(data); - } else { - if (errorCallback) errorCallback(data.message || '请求失败'); - } - }) - .catch(error => { - console.error('请求错误:', error); - if (errorCallback) errorCallback('网络错误，请检查连接'); - }); - }; - // 显示加载状态 - window.showLoading = function(button, loadingText = '处理中...') { - if (!button) return; - - button.disabled = true; - const originalHTML = button.innerHTML; - button.innerHTML = `${loadingText}`; - - return function() { - button.disabled = false; - button.innerHTML = originalHTML; - }; - }; - // 显示消息提示 - window.showMessage = function(message, type = 'info') { - const alertContainer = document.querySelector('.container'); - if (!alertContainer) return; - const alertDiv = document.createElement('div'); - alertDiv.className = `alert alert-${type} alert-dismissible fade show`; - alertDiv.innerHTML = ` - - ${message} - - `; - - alertContainer.insertBefore(alertDiv, alertContainer.firstChild); - - // 自动隐藏 - setTimeout(function() { - alertDiv.style.opacity = '0'; - setTimeout(function() { - if (alertDiv.parentNode) { - alertDiv.parentNode.removeChild(alertDiv); - } - }, 300); - }, 5000); - }; - // 验证邮箱格式 - window.validateEmail = function(email) { - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailRegex.test(email); - }; - // 验证密码强度 - window.validatePassword = function(password) { - if (password.length < 6) { - return { valid: false, message: '密码长度至少6位' }; - } - return { valid: true, message: '密码强度可以' }; - }; - // 数字输入限制 - window.restrictToNumbers = function(inputElement) { - inputElement.addEventListener('input', function(e) { - e.target.value = e.target.value.replace(/[^0-9]/g, ''); - }); - }; - // 初始化数字验证码输入框 - const codeInputs = document.querySelectorAll('input[name="verification_code"]'); - codeInputs.forEach(function(input) { - window.restrictToNumbers(input); + // 滚动到底部 + chat.scrollTop = chat.scrollHeight; + }, index * 1000); }); + + // 显示弹窗 + modal.style.display = 'flex'; + + // 添加点击外部关闭功能 + modal.addEventListener('click', function(e) { + if (e.target === modal) { + closePreview(); + } + }); +}; + +window.closePreview = function() { + const modal = document.getElementById('scenarioPreview'); + modal.style.display = 'none'; +}; + +// 按钮点击效果增强 +document.addEventListener('click', function(e) { + // 为所有按钮添加点击波纹效果 + if (e.target.matches('button, .btn, .btn-start, .btn-preview')) { + createRipple(e); + } }); -// 全局错误处理 -window.addEventListener('error', function(e) { - console.error('全局错误:', e.error); -}); -// 全局未处理的Promise拒绝 -window.addEventListener('unhandledrejection', function(e) { - console.error('未处理的Promise拒绝:', e.reason); -}); + +function createRipple(event) { + const button = event.target; + const rect = button.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = event.clientX - rect.left - size / 2; + const y = event.clientY - rect.top - size / 2; + + const ripple = document.createElement('span'); + ripple.style.cssText = ` + position: absolute; + width: ${size}px; + height: ${size}px; + left: ${x}px; + top: ${y}px; + background: rgba(255, 255, 255, 0.6); + border-radius: 50%; + transform: scale(0); + animation: ripple 0.6s linear; + pointer-events: none; + z-index: 1000; + `; + + // 确保按钮有相对定位 + if (getComputedStyle(button).position === 'static') { + button.style.position = 'relative'; + } + + button.appendChild(ripple); + + setTimeout(() => { + ripple.remove(); + }, 600); +} + +// 添加CSS动画 +const style = document.createElement('style'); +style.textContent = ` + @keyframes ripple { + to { + transform: scale(4); + opacity: 0; + } + } + + @keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .fade-in { + animation: fadeInUp 0.6s ease forwards; + } + + .animate-in { + animation: fadeInUp 0.8s ease forwards; + } +`; +document.head.appendChild(style); + +// 性能优化：节流函数 +function throttle(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// 滚动性能优化 +const handleScroll = throttle(() => { + // 滚动相关的性能敏感操作 +}, 100); + +window.addEventListener('scroll', handleScroll); diff --git a/app/templates/index.html b/app/templates/index.html index f6b7c9b..0bdfeeb 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -3,8 +3,8 @@ {% block title %}首页 - 儿童语言学习系统{% endblock %} {% block content %} - -