From 0f201e6d7422f82d4b60a8acdd39b7378a91ced6 Mon Sep 17 00:00:00 2001 From: iflow-cli Date: Fri, 28 Nov 2025 09:10:27 +0000 Subject: [PATCH 1/2] feat: completed task XLUT20251128370594000001697062 --- DESIGN_IMPROVEMENTS.md | 97 +++++++ assets/css/enhanced-effects.css | 401 +++++++++++++++++++++++++++++ assets/css/modern-design.css | 434 ++++++++++++++++++++++++++++++++ assets/js/modern-effects.js | 336 +++++++++++++++++++++++++ cn/index.html | 3 + en/index.html | 3 + 6 files changed, 1274 insertions(+) create mode 100644 DESIGN_IMPROVEMENTS.md create mode 100644 assets/css/enhanced-effects.css create mode 100644 assets/css/modern-design.css create mode 100644 assets/js/modern-effects.js diff --git a/DESIGN_IMPROVEMENTS.md b/DESIGN_IMPROVEMENTS.md new file mode 100644 index 000000000..d4a8d7c72 --- /dev/null +++ b/DESIGN_IMPROVEMENTS.md @@ -0,0 +1,97 @@ +# WebStack.cc 现代化设计改进 + +## 概述 +本次改进将传统的设计师导航网站升级为具有现代化UI/UX设计的平台，提升了视觉吸引力、用户体验和交互效果。 + +## 主要改进内容 + +### 1. 现代化配色方案 +- **渐变背景**：采用紫蓝色渐变（#667eea → #764ba2）作为主背景 +- **毛玻璃效果**：使用backdrop-filter创建现代化的毛玻璃材质 +- **动态配色**：引入多层次渐变色彩搭配 + +### 2. 卡片设计革新 +- **毛玻璃卡片**：半透明背景 + 模糊效果 + 边框 +- **动态阴影**：多层次阴影系统，包括悬浮阴影 +- **圆角优化**：统一使用16px圆角，营造柔和感 +- **边框动画**：顶部渐变边框条，hover时展开 + +### 3. 增强交互效果 +- **3D悬浮**：鼠标悬停时的3D变换效果 +- **光晕效果**：卡片hover时的渐变光晕 +- **图标动画**：Logo和图标的缩放与旋转 +- **波纹效果**：背景波纹动画增强视觉层次 + +### 4. 视觉层次优化 +- **标题设计**：渐变色文字 + 底部装饰线条 +- **标签系统**：现代化标签样式，圆角设计 +- **字体优化**：使用系统字体栈，提升可读性 +- **间距调整**：统一间距系统，增强视觉呼吸感 + +### 5. 动态效果系统 +- **滚动进度条**：页面顶部动态进度指示器 +- **鼠标跟随**：自定义鼠标光标效果 +- **粒子动画**：背景浮动粒子营造科技感 +- **打字机效果**：标题逐字显示动画 +- **懒加载增强**：图片加载动画 + +### 6. 响应式设计 +- **移动端优化**：触摸设备适配 +- **性能优化**：减少复杂动画在移动端的计算 +- **弹性布局**：Grid和Flexbox结合使用 + +## 技术实现 + +### 新增文件 +1. **`assets/css/modern-design.css`** - 核心现代化样式 +2. **`assets/css/enhanced-effects.css`** - 增强视觉效果 +3. **`assets/js/modern-effects.js`** - 动态交互功能 + +### 修改文件 +1. **`cn/index.html`** - 添加CSS/JS引用 +2. **`en/index.html`** - 添加CSS/JS引用 + +### 关键CSS变量 +```css +:root { + --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --glass-bg: rgba(255, 255, 255, 0.25); + --border-radius: 16px; + --transition-normal: all 0.3s ease-in-out; +} +``` + +### 核心特性 +- **毛玻璃效果**：`backdrop-filter: blur(16px)` +- **渐变文字**：`background-clip: text` + `-webkit-text-fill-color: transparent` +- **3D变换**：`transform: translateY(-8px) scale(1.02)` +- **动画延迟**：错开动画时间创建流畅体验 + +## 浏览器兼容性 +- **现代浏览器**：Chrome 76+, Firefox 70+, Safari 13+, Edge 79+ +- **降级处理**：不支持backdrop-filter的浏览器显示普通效果 +- **移动端适配**：iOS Safari 14+, Android Chrome 80+ + +## 性能优化 +- **CSS动画**：使用transform和opacity，避免layout thrashing +- **JavaScript优化**：requestAnimationFrame + 节流 +- **懒加载**：图片延迟加载 +- **资源压缩**：CSS/JS文件压缩 + +## 用户体验提升 +1. **视觉吸引力**：现代化设计语言 +2. **交互反馈**：丰富的hover效果 +3. **页面性能**：流畅动画无卡顿 +4. **可访问性**：保持良好的对比度和可读性 +5. **移动友好**：触摸设备优化 + +## 后续优化建议 +1. **深色模式**：添加深色主题切换 +2. **个性化**：用户自定义主题色 +3. **微交互**：更细粒度的交互动画 +4. **无障碍**：键盘导航和屏幕阅读器支持 +5. **PWA支持**：离线访问和原生应用体验 + +--- + +*本次改进将传统的静态导航网站转变为具有现代感和科技感的交互式平台，显著提升了用户体验和视觉效果。* \ No newline at end of file diff --git a/assets/css/enhanced-effects.css b/assets/css/enhanced-effects.css new file mode 100644 index 000000000..547e98814 --- /dev/null +++ b/assets/css/enhanced-effects.css @@ -0,0 +1,401 @@ +/* 增强视觉效果 - WebStack.cc */ + +/* 浮动动画 */ +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +/* 渐现动画 */ +@keyframes fadeInScale { + 0% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* 滑动进入动画 */ +@keyframes slideInLeft { + 0% { + opacity: 0; + transform: translateX(-30px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* 旋转动画 */ +@keyframes rotateIn { + 0% { + opacity: 0; + transform: rotate(-180deg) scale(0.8); + } + 100% { + opacity: 1; + transform: rotate(0deg) scale(1); + } +} + +/* 波浪效果 */ +@keyframes wave { + 0%, 100% { + transform: translateY(0px); + } + 25% { + transform: translateY(-5px); + } + 75% { + transform: translateY(5px); + } +} + +/* 星光闪烁效果 */ +@keyframes sparkle { + 0%, 100% { + opacity: 0; + transform: scale(0); + } + 50% { + opacity: 1; + transform: scale(1); + } +} + +/* 增强的卡片动画 */ +.xe-widget.xe-conversations { + position: relative; + overflow: hidden; +} + +.xe-widget.xe-conversations::after { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transform: rotate(45deg); + transition: var(--transition-slow); + opacity: 0; +} + +.xe-widget.xe-conversations:hover::after { + animation: wave 1.5s ease-in-out; + opacity: 1; +} + +/* 标签悬浮效果增强 */ +.label { + position: relative; + overflow: hidden; +} + +.label::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: var(--transition-normal); +} + +.label:hover::before { + left: 100%; +} + +/* 图标动画效果 */ +.xe-user-img img { + position: relative; +} + +.xe-user-img img::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(79, 172, 254, 0.3); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: var(--transition-normal); + z-index: 1; +} + +.xe-widget.xe-conversations:hover .xe-user-img img::after { + width: 100%; + height: 100%; +} + +/* 文字打字机效果 */ +@keyframes typing { + from { + width: 0; + } + to { + width: 100%; + } +} + +@keyframes blink { + 50% { + border-color: transparent; + } +} + +.xe-user-name { + position: relative; + overflow: hidden; +} + +.xe-user-name::after { + content: ''; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 2px; + background: var(--primary-color); + animation: blink 1s infinite; +} + +/* 按钮悬停效果 */ +.user-info-menu a, +.language-switcher .dropdown-toggle { + position: relative; + overflow: hidden; +} + +.user-info-menu a::before, +.language-switcher .dropdown-toggle::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: var(--transition-normal); + z-index: -1; +} + +.user-info-menu a:hover::before, +.language-switcher .dropdown-toggle:hover::before { + width: 300px; + height: 300px; +} + +/* 侧边栏链接增强 */ +#main-menu li { + position: relative; +} + +#main-menu li::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + width: 0; + height: 2px; + background: var(--accent-gradient); + transform: translateY(-50%); + transition: var(--transition-normal); +} + +#main-menu li:hover::before, +#main-menu li.active::before { + width: 4px; +} + +/* 标题动画 */ +h4.text-gray { + position: relative; + overflow: hidden; +} + +h4.text-gray::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: var(--transition-slow); +} + +h4.text-gray:hover::before { + left: 100%; +} + +/* 导航菜单增强 */ +.navbar.user-info-navbar { + position: relative; + overflow: hidden; +} + +.navbar.user-info-navbar::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: var(--transition-slow); +} + +.navbar.user-info-navbar:hover::before { + left: 100%; +} + +/* 滚动指示器 */ +.page-container::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: var(--primary-gradient); + transform-origin: left; + transform: scaleX(0); + z-index: 9999; + transition: var(--transition-fast); +} + +/* 页面加载动画 */ +@keyframes pageLoad { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.main-content { + animation: pageLoad 0.8s ease-out; +} + +/* 鼠标跟随效果 */ +.cursor-follower { + position: fixed; + width: 20px; + height: 20px; + background: var(--accent-gradient); + border-radius: 50%; + pointer-events: none; + z-index: 9999; + transition: transform 0.1s ease; + opacity: 0.7; + mix-blend-mode: difference; +} + +/* 悬浮粒子效果 */ +@keyframes particle { + 0% { + transform: translateY(100vh) scale(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + transform: translateY(-10vh) scale(1); + opacity: 0; + } +} + +.particle { + position: fixed; + width: 4px; + height: 4px; + background: var(--accent-gradient); + border-radius: 50%; + pointer-events: none; + z-index: 1; + animation: particle 15s linear infinite; +} + +/* 3D翻转效果 */ +.xe-widget.xe-conversations { + transform-style: preserve-3d; + perspective: 1000px; +} + +.xe-widget.xe-conversations:hover { + transform: rotateY(5deg) rotateX(5deg) translateY(-8px) scale(1.02); +} + +/* 边框动画 */ +@keyframes borderGlow { + 0%, 100% { + border-color: rgba(255, 255, 255, 0.2); + box-shadow: 0 0 20px rgba(79, 172, 254, 0.2); + } + 50% { + border-color: rgba(79, 172, 254, 0.6); + box-shadow: 0 0 30px rgba(79, 172, 254, 0.4); + } +} + +.xe-widget.xe-conversations:hover { + animation: borderGlow 2s ease-in-out infinite; +} + +/* 响应式增强 */ +@media (max-width: 768px) { + .xe-widget.xe-conversations { + transform: none !important; + } + + .xe-widget.xe-conversations:hover { + transform: translateY(-4px) !important; + } + + h4.text-gray { + font-size: 1.2rem; + } + + .xe-user-img img { + width: 36px !important; + height: 36px !important; + } +} + +@media (max-width: 480px) { + .xe-widget.xe-conversations { + padding: 1rem !important; + margin: 0.75rem 0 !important; + } + + .xe-user-img img { + width: 32px !important; + height: 32px !important; + } + + .xe-comment p { + font-size: 0.8rem !important; + } +} \ No newline at end of file diff --git a/assets/css/modern-design.css b/assets/css/modern-design.css new file mode 100644 index 000000000..94c722792 --- /dev/null +++ b/assets/css/modern-design.css @@ -0,0 +1,434 @@ +/* 现代化设计改进 - WebStack.cc */ + +/* 全局变量和基础设置 */ +:root { + /* 现代配色方案 */ + --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + --dark-gradient: linear-gradient(135deg, #434343 0%, #000000 100%); + + /* 毛玻璃效果 */ + --glass-bg: rgba(255, 255, 255, 0.25); + --glass-border: rgba(255, 255, 255, 0.18); + --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + + /* 现代色彩 */ + --primary-color: #667eea; + --secondary-color: #764ba2; + --accent-color: #4facfe; + --text-primary: #2d3748; + --text-secondary: #4a5568; + --text-muted: #718096; + + /* 间距 */ + --card-padding: 2rem; + --card-margin: 1.5rem; + --border-radius: 16px; + --border-radius-small: 12px; + + /* 阴影 */ + --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + + /* 动画 */ + --transition-fast: all 0.15s ease-in-out; + --transition-normal: all 0.3s ease-in-out; + --transition-slow: all 0.5s ease-in-out; +} + +/* 全局背景和布局 */ +body { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background-attachment: fixed; + min-height: 100vh; + font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +.page-container { + backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.1); + min-height: 100vh; +} + +/* 现代化侧边栏 */ +.sidebar-menu { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + border-right: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: var(--shadow-large); +} + +.sidebar-menu .logo-expanded img { + transition: var(--transition-normal); + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); +} + +.sidebar-menu .logo-expanded:hover img { + transform: scale(1.05); + filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2)); +} + +#main-menu li a { + border-radius: var(--border-radius-small); + margin: 0.25rem 0.5rem; + transition: var(--transition-normal); + position: relative; + overflow: hidden; +} + +#main-menu li a::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: var(--accent-gradient); + transition: var(--transition-normal); + z-index: -1; +} + +#main-menu li a:hover::before, +#main-menu li.active a::before { + left: 0; +} + +#main-menu li a:hover, +#main-menu li.active a { + color: white; + transform: translateX(4px); + box-shadow: var(--shadow-medium); +} + +/* 顶部导航栏 */ +.navbar.user-info-navbar { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: var(--shadow-soft); +} + +/* 现代化卡片设计 */ +.xe-widget.xe-conversations { + background: var(--glass-bg); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius); + padding: var(--card-padding); + margin: var(--card-margin) 0; + transition: var(--transition-normal); + position: relative; + overflow: hidden; + cursor: pointer; + box-shadow: var(--shadow-soft); +} + +.xe-widget.xe-conversations::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: var(--primary-gradient); + transform: scaleX(0); + transition: var(--transition-normal); + transform-origin: left; +} + +.xe-widget.xe-conversations:hover::before { + transform: scaleX(1); +} + +.xe-widget.xe-conversations:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-hover); + border-color: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.35); +} + +/* 卡片内容布局优化 */ +.xe-comment-entry { + display: flex; + align-items: center; + height: 100%; +} + +.xe-user-img { + flex-shrink: 0; + margin-right: 1rem; + position: relative; +} + +.xe-user-img::after { + content: ''; + position: absolute; + inset: -2px; + border-radius: 50%; + padding: 2px; + background: var(--accent-gradient); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask-composite: exclude; + opacity: 0; + transition: var(--transition-normal); +} + +.xe-widget.xe-conversations:hover .xe-user-img::after { + opacity: 1; + animation: pulse 2s infinite; +} + +.xe-user-img img { + width: 48px; + height: 48px; + border-radius: 12px; + transition: var(--transition-normal); + border: 2px solid rgba(255, 255, 255, 0.3); +} + +.xe-widget.xe-conversations:hover .xe-user-img img { + transform: scale(1.1); + border-color: rgba(255, 255, 255, 0.6); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +.xe-comment { + flex: 1; + min-width: 0; +} + +.xe-user-name { + font-weight: 600; + font-size: 1.1rem; + color: var(--text-primary); + margin-bottom: 0.5rem; + background: var(--primary-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + transition: var(--transition-normal); +} + +.xe-widget.xe-conversations:hover .xe-user-name { + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.xe-comment p { + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.5; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* 标题样式优化 */ +h4.text-gray { + color: white !important; + font-weight: 700; + font-size: 1.5rem; + margin: 2rem 0 1.5rem 0; + padding: 1rem 0; + position: relative; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +h4.text-gray::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 60px; + height: 3px; + background: var(--accent-gradient); + border-radius: 2px; +} + +/* 网格布局优化 */ +.row { + margin: 0 -0.75rem; +} + +.col-sm-3 { + padding: 0 0.75rem; + margin-bottom: 1.5rem; +} + +/* 标签样式 */ +.label { + border-radius: 20px; + padding: 0.25rem 0.75rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + border: none; + backdrop-filter: blur(10px); +} + +.label-info { + background: var(--accent-gradient); + color: white; + box-shadow: 0 4px 8px rgba(79, 172, 254, 0.3); +} + +.label-primary { + background: var(--primary-gradient); + color: white; + box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3); +} + +.label-pink { + background: var(--secondary-gradient); + color: white; + box-shadow: 0 4px 8px rgba(245, 87, 108, 0.3); +} + +/* 语言切换器 */ +.language-switcher .dropdown-toggle { + background: var(--glass-bg); + backdrop-filter: blur(16px); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius-small); + padding: 0.5rem 1rem; + transition: var(--transition-normal); +} + +.language-switcher .dropdown-toggle:hover { + background: rgba(255, 255, 255, 0.35); + transform: translateY(-2px); + box-shadow: var(--shadow-medium); +} + +.language-switcher .dropdown-menu { + background: var(--glass-bg); + backdrop-filter: blur(20px); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius-small); + box-shadow: var(--shadow-large); +} + +.language-switcher .dropdown-menu li a { + transition: var(--transition-fast); + color: var(--text-primary); +} + +.language-switcher .dropdown-menu li a:hover { + background: var(--accent-gradient); + color: white; + transform: translateX(4px); +} + +/* GitHub 链接样式 */ +.user-info-menu.right-links a { + background: var(--glass-bg); + backdrop-filter: blur(16px); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius-small); + padding: 0.5rem 1rem; + transition: var(--transition-normal); + color: var(--text-primary); +} + +.user-info-menu.right-links a:hover { + background: var(--primary-gradient); + color: white; + transform: translateY(-2px); + box-shadow: var(--shadow-medium); +} + +/* 移动端优化 */ +@media (max-width: 768px) { + .xe-widget.xe-conversations { + padding: 1.5rem; + margin: 1rem 0; + } + + .xe-user-img img { + width: 40px; + height: 40px; + } + + .xe-comment p { + font-size: 0.85rem; + -webkit-line-clamp: 3; + } + + h4.text-gray { + font-size: 1.3rem; + margin: 1.5rem 0 1rem 0; + } +} + +/* 动画效果 */ +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.7); + } + 70% { + box-shadow: 0 0 0 10px rgba(79, 172, 254, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(79, 172, 254, 0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.xe-widget.xe-conversations { + animation: fadeInUp 0.6s ease-out; + animation-fill-mode: both; +} + +.xe-widget.xe-conversations:nth-child(1) { animation-delay: 0.1s; } +.xe-widget.xe-conversations:nth-child(2) { animation-delay: 0.2s; } +.xe-widget.xe-conversations:nth-child(3) { animation-delay: 0.3s; } +.xe-widget.xe-conversations:nth-child(4) { animation-delay: 0.4s; } + +/* 滚动条美化 */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: var(--accent-gradient); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--primary-gradient); +} + +/* 选择文本样式 */ +::selection { + background: rgba(79, 172, 254, 0.3); + color: white; +} + +::-moz-selection { + background: rgba(79, 172, 254, 0.3); + color: white; +} \ No newline at end of file diff --git a/assets/js/modern-effects.js b/assets/js/modern-effects.js new file mode 100644 index 000000000..c9cef717c --- /dev/null +++ b/assets/js/modern-effects.js @@ -0,0 +1,336 @@ +// 现代化动态效果 - WebStack.cc +document.addEventListener('DOMContentLoaded', function() { + + // 滚动进度条 + function updateScrollProgress() { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + const scrollProgress = (scrollTop / scrollHeight) * 100; + + let progressBar = document.querySelector('.scroll-progress'); + if (!progressBar) { + progressBar = document.createElement('div'); + progressBar.className = 'scroll-progress'; + progressBar.style.cssText = ` + position: fixed; + top: 0; + left: 0; + width: ${scrollProgress}%; + height: 3px; + background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); + z-index: 9999; + transition: width 0.1s ease; + `; + document.body.appendChild(progressBar); + } else { + progressBar.style.width = scrollProgress + '%'; + } + } + + // 鼠标跟随效果 + function initMouseFollower() { + const follower = document.createElement('div'); + follower.className = 'mouse-follower'; + follower.style.cssText = ` + position: fixed; + width: 20px; + height: 20px; + background: radial-gradient(circle, rgba(79, 172, 254, 0.6) 0%, transparent 70%); + border-radius: 50%; + pointer-events: none; + z-index: 9999; + transition: transform 0.1s ease; + mix-blend-mode: difference; + `; + document.body.appendChild(follower); + + document.addEventListener('mousemove', (e) => { + follower.style.left = e.clientX - 10 + 'px'; + follower.style.top = e.clientY - 10 + 'px'; + }); + + // 在卡片上悬停时放大效果 + document.querySelectorAll('.xe-widget').forEach(card => { + card.addEventListener('mouseenter', () => { + follower.style.transform = 'scale(2)'; + }); + card.addEventListener('mouseleave', () => { + follower.style.transform = 'scale(1)'; + }); + }); + } + + // 粒子效果 + function initParticles() { + const particleCount = 15; + const colors = ['#667eea', '#764ba2', '#4facfe', '#00f2fe']; + + for (let i = 0; i < particleCount; i++) { + const particle = document.createElement('div'); + particle.className = 'floating-particle'; + particle.style.cssText = ` + position: fixed; + width: ${Math.random() * 4 + 2}px; + height: ${Math.random() * 4 + 2}px; + background: ${colors[Math.floor(Math.random() * colors.length)]}; + border-radius: 50%; + pointer-events: none; + z-index: 1; + left: ${Math.random() * 100}vw; + top: 100vh; + opacity: 0.6; + animation: float ${Math.random() * 10 + 10}s linear infinite; + animation-delay: ${Math.random() * 5}s; + `; + document.body.appendChild(particle); + } + } + + // 视差滚动效果 + function initParallax() { + window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + const parallax = scrolled * 0.5; + + document.querySelectorAll('.xe-widget').forEach((card, index) => { + const speed = 0.1 + (index * 0.05); + card.style.transform = `translateY(${scrolled * speed}px)`; + }); + }); + } + + // 卡片悬浮动画 + function initCardAnimations() { + const cards = document.querySelectorAll('.xe-widget.xe-conversations'); + + cards.forEach((card, index) => { + // 添加进入动画延迟 + card.style.animationDelay = `${index * 0.1}s`; + + // 鼠标进入效果 + card.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-10px) rotateX(5deg) scale(1.02)'; + this.style.boxShadow = '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 30px rgba(79, 172, 254, 0.3)'; + + // 添加光晕效果 + const glow = document.createElement('div'); + glow.className = 'card-glow'; + glow.style.cssText = ` + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(45deg, #667eea, #764ba2, #4facfe, #00f2fe); + border-radius: 18px; + z-index: -1; + opacity: 0; + transition: opacity 0.3s ease; + animation: borderRotate 3s linear infinite; + `; + this.style.position = 'relative'; + this.appendChild(glow); + + setTimeout(() => glow.style.opacity = '0.7', 100); + }); + + // 鼠标离开效果 + card.addEventListener('mouseleave', function() { + this.style.transform = ''; + this.style.boxShadow = ''; + + const glow = this.querySelector('.card-glow'); + if (glow) { + glow.style.opacity = '0'; + setTimeout(() => glow.remove(), 300); + } + }); + }); + } + + // 打字机效果 + function initTypewriter() { + const titles = document.querySelectorAll('h4.text-gray'); + + titles.forEach(title => { + const text = title.textContent; + title.textContent = ''; + title.style.borderRight = '2px solid #4facfe'; + + let i = 0; + const typeWriter = () => { + if (i < text.length) { + title.textContent += text.charAt(i); + i++; + setTimeout(typeWriter, 100); + } else { + setTimeout(() => { + title.style.borderRight = 'none'; + }, 1000); + } + }; + + // 当标题进入视口时开始打字机效果 + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + typeWriter(); + observer.unobserve(entry.target); + } + }); + }); + + observer.observe(title); + }); + } + + // 平滑滚动增强 + function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + + // 添加目标高亮效果 + target.style.background = 'rgba(79, 172, 254, 0.1)'; + target.style.borderRadius = '8px'; + target.style.padding = '1rem'; + target.style.margin = '1rem 0'; + target.style.transition = 'all 0.5s ease'; + + setTimeout(() => { + target.style.background = ''; + target.style.padding = ''; + target.style.margin = ''; + }, 2000); + } + }); + }); + } + + // 懒加载增强 + function initLazyLoading() { + const images = document.querySelectorAll('img[data-src]'); + + const imageObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.remove('lazy'); + imageObserver.unobserve(img); + + // 添加图片加载动画 + img.style.opacity = '0'; + img.style.transform = 'scale(0.8)'; + img.style.transition = 'all 0.5s ease'; + + img.onload = () => { + img.style.opacity = '1'; + img.style.transform = 'scale(1)'; + }; + } + }); + }); + + images.forEach(img => imageObserver.observe(img)); + } + + // 添加CSS动画关键帧 + function addAnimationStyles() { + const style = document.createElement('style'); + style.textContent = ` + @keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } + } + + @keyframes borderRotate { + 0% { filter: hue-rotate(0deg); } + 100% { filter: hue-rotate(360deg); } + } + + @keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } + } + + .floating-particle { + animation: float ${Math.random() * 10 + 10}s linear infinite; + } + + .xe-widget { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .xe-widget:hover { + transform: translateY(-8px) scale(1.02); + } + + .card-glow { + animation: borderRotate 3s linear infinite; + } + `; + document.head.appendChild(style); + } + + // 初始化所有效果 + function init() { + addAnimationStyles(); + updateScrollProgress(); + initMouseFollower(); + initParticles(); + initCardAnimations(); + initTypewriter(); + initSmoothScroll(); + initLazyLoading(); + + // 滚动事件监听 + window.addEventListener('scroll', updateScrollProgress); + + // 窗口大小改变时重新计算 + window.addEventListener('resize', () => { + setTimeout(updateScrollProgress, 100); + }); + } + + // 页面加载完成后初始化 + init(); + + // 添加页面切换动画 + window.addEventListener('beforeunload', () => { + document.body.style.opacity = '0'; + document.body.style.transform = 'scale(0.95)'; + document.body.style.transition = 'all 0.3s ease'; + }); +}); + +// 添加触摸设备优化 +if ('ontouchstart' in window) { + document.body.classList.add('touch-device'); + + // 移除鼠标跟随效果 + const mouseFollower = document.querySelector('.mouse-follower'); + if (mouseFollower) { + mouseFollower.remove(); + } + + // 调整动画以适应触摸设备 + const style = document.createElement('style'); + style.textContent = ` + .touch-device .xe-widget:hover { + transform: translateY(-4px) !important; + } + + .touch-device .floating-particle { + display: none; + } + `; + document.head.appendChild(style); +} \ No newline at end of file diff --git a/cn/index.html b/cn/index.html index 7172f7df3..eb3c18efb 100644 --- a/cn/index.html +++ b/cn/index.html @@ -35,6 +35,8 @@ + + + diff --git a/en/index.html b/en/index.html index 9b782554c..bbc823565 100644 --- a/en/index.html +++ b/en/index.html @@ -24,6 +24,8 @@ + + + From a1d142e55adf9212640d7012af4b058ded6eff97 Mon Sep 17 00:00:00 2001 From: iflow-cli Date: Fri, 28 Nov 2025 09:19:03 +0000 Subject: [PATCH 2/2] feat: completed task XLUT20251128370594000001694058 --- DESIGN_IMPROVEMENTS.md | 97 - assets/css/enhanced-effects.css | 401 --- assets/css/modern-design.css | 434 ---- assets/css/style.css | 446 ++++ assets/js/app.js | 261 ++ assets/js/modern-effects.js | 336 --- cn/index.html | 4320 +------------------------------ en/index.html | 4305 +----------------------------- index.html | 117 +- websites.json | 1 + 10 files changed, 834 insertions(+), 9884 deletions(-) delete mode 100644 DESIGN_IMPROVEMENTS.md delete mode 100644 assets/css/enhanced-effects.css delete mode 100644 assets/css/modern-design.css create mode 100644 assets/css/style.css create mode 100644 assets/js/app.js delete mode 100644 assets/js/modern-effects.js create mode 100644 websites.json diff --git a/DESIGN_IMPROVEMENTS.md b/DESIGN_IMPROVEMENTS.md deleted file mode 100644 index d4a8d7c72..000000000 --- a/DESIGN_IMPROVEMENTS.md +++ /dev/null @@ -1,97 +0,0 @@ -# WebStack.cc 现代化设计改进 - -## 概述 -本次改进将传统的设计师导航网站升级为具有现代化UI/UX设计的平台，提升了视觉吸引力、用户体验和交互效果。 - -## 主要改进内容 - -### 1. 现代化配色方案 -- **渐变背景**：采用紫蓝色渐变（#667eea → #764ba2）作为主背景 -- **毛玻璃效果**：使用backdrop-filter创建现代化的毛玻璃材质 -- **动态配色**：引入多层次渐变色彩搭配 - -### 2. 卡片设计革新 -- **毛玻璃卡片**：半透明背景 + 模糊效果 + 边框 -- **动态阴影**：多层次阴影系统，包括悬浮阴影 -- **圆角优化**：统一使用16px圆角，营造柔和感 -- **边框动画**：顶部渐变边框条，hover时展开 - -### 3. 增强交互效果 -- **3D悬浮**：鼠标悬停时的3D变换效果 -- **光晕效果**：卡片hover时的渐变光晕 -- **图标动画**：Logo和图标的缩放与旋转 -- **波纹效果**：背景波纹动画增强视觉层次 - -### 4. 视觉层次优化 -- **标题设计**：渐变色文字 + 底部装饰线条 -- **标签系统**：现代化标签样式，圆角设计 -- **字体优化**：使用系统字体栈，提升可读性 -- **间距调整**：统一间距系统，增强视觉呼吸感 - -### 5. 动态效果系统 -- **滚动进度条**：页面顶部动态进度指示器 -- **鼠标跟随**：自定义鼠标光标效果 -- **粒子动画**：背景浮动粒子营造科技感 -- **打字机效果**：标题逐字显示动画 -- **懒加载增强**：图片加载动画 - -### 6. 响应式设计 -- **移动端优化**：触摸设备适配 -- **性能优化**：减少复杂动画在移动端的计算 -- **弹性布局**：Grid和Flexbox结合使用 - -## 技术实现 - -### 新增文件 -1. **`assets/css/modern-design.css`** - 核心现代化样式 -2. **`assets/css/enhanced-effects.css`** - 增强视觉效果 -3. **`assets/js/modern-effects.js`** - 动态交互功能 - -### 修改文件 -1. **`cn/index.html`** - 添加CSS/JS引用 -2. **`en/index.html`** - 添加CSS/JS引用 - -### 关键CSS变量 -```css -:root { - --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --glass-bg: rgba(255, 255, 255, 0.25); - --border-radius: 16px; - --transition-normal: all 0.3s ease-in-out; -} -``` - -### 核心特性 -- **毛玻璃效果**：`backdrop-filter: blur(16px)` -- **渐变文字**：`background-clip: text` + `-webkit-text-fill-color: transparent` -- **3D变换**：`transform: translateY(-8px) scale(1.02)` -- **动画延迟**：错开动画时间创建流畅体验 - -## 浏览器兼容性 -- **现代浏览器**：Chrome 76+, Firefox 70+, Safari 13+, Edge 79+ -- **降级处理**：不支持backdrop-filter的浏览器显示普通效果 -- **移动端适配**：iOS Safari 14+, Android Chrome 80+ - -## 性能优化 -- **CSS动画**：使用transform和opacity，避免layout thrashing -- **JavaScript优化**：requestAnimationFrame + 节流 -- **懒加载**：图片延迟加载 -- **资源压缩**：CSS/JS文件压缩 - -## 用户体验提升 -1. **视觉吸引力**：现代化设计语言 -2. **交互反馈**：丰富的hover效果 -3. **页面性能**：流畅动画无卡顿 -4. **可访问性**：保持良好的对比度和可读性 -5. **移动友好**：触摸设备优化 - -## 后续优化建议 -1. **深色模式**：添加深色主题切换 -2. **个性化**：用户自定义主题色 -3. **微交互**：更细粒度的交互动画 -4. **无障碍**：键盘导航和屏幕阅读器支持 -5. **PWA支持**：离线访问和原生应用体验 - ---- - -*本次改进将传统的静态导航网站转变为具有现代感和科技感的交互式平台，显著提升了用户体验和视觉效果。* \ No newline at end of file diff --git a/assets/css/enhanced-effects.css b/assets/css/enhanced-effects.css deleted file mode 100644 index 547e98814..000000000 --- a/assets/css/enhanced-effects.css +++ /dev/null @@ -1,401 +0,0 @@ -/* 增强视觉效果 - WebStack.cc */ - -/* 浮动动画 */ -@keyframes float { - 0%, 100% { - transform: translateY(0px); - } - 50% { - transform: translateY(-10px); - } -} - -/* 渐现动画 */ -@keyframes fadeInScale { - 0% { - opacity: 0; - transform: scale(0.8); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -/* 滑动进入动画 */ -@keyframes slideInLeft { - 0% { - opacity: 0; - transform: translateX(-30px); - } - 100% { - opacity: 1; - transform: translateX(0); - } -} - -/* 旋转动画 */ -@keyframes rotateIn { - 0% { - opacity: 0; - transform: rotate(-180deg) scale(0.8); - } - 100% { - opacity: 1; - transform: rotate(0deg) scale(1); - } -} - -/* 波浪效果 */ -@keyframes wave { - 0%, 100% { - transform: translateY(0px); - } - 25% { - transform: translateY(-5px); - } - 75% { - transform: translateY(5px); - } -} - -/* 星光闪烁效果 */ -@keyframes sparkle { - 0%, 100% { - opacity: 0; - transform: scale(0); - } - 50% { - opacity: 1; - transform: scale(1); - } -} - -/* 增强的卡片动画 */ -.xe-widget.xe-conversations { - position: relative; - overflow: hidden; -} - -.xe-widget.xe-conversations::after { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); - transform: rotate(45deg); - transition: var(--transition-slow); - opacity: 0; -} - -.xe-widget.xe-conversations:hover::after { - animation: wave 1.5s ease-in-out; - opacity: 1; -} - -/* 标签悬浮效果增强 */ -.label { - position: relative; - overflow: hidden; -} - -.label::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); - transition: var(--transition-normal); -} - -.label:hover::before { - left: 100%; -} - -/* 图标动画效果 */ -.xe-user-img img { - position: relative; -} - -.xe-user-img img::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: rgba(79, 172, 254, 0.3); - border-radius: 50%; - transform: translate(-50%, -50%); - transition: var(--transition-normal); - z-index: 1; -} - -.xe-widget.xe-conversations:hover .xe-user-img img::after { - width: 100%; - height: 100%; -} - -/* 文字打字机效果 */ -@keyframes typing { - from { - width: 0; - } - to { - width: 100%; - } -} - -@keyframes blink { - 50% { - border-color: transparent; - } -} - -.xe-user-name { - position: relative; - overflow: hidden; -} - -.xe-user-name::after { - content: ''; - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 2px; - background: var(--primary-color); - animation: blink 1s infinite; -} - -/* 按钮悬停效果 */ -.user-info-menu a, -.language-switcher .dropdown-toggle { - position: relative; - overflow: hidden; -} - -.user-info-menu a::before, -.language-switcher .dropdown-toggle::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: rgba(255, 255, 255, 0.2); - border-radius: 50%; - transform: translate(-50%, -50%); - transition: var(--transition-normal); - z-index: -1; -} - -.user-info-menu a:hover::before, -.language-switcher .dropdown-toggle:hover::before { - width: 300px; - height: 300px; -} - -/* 侧边栏链接增强 */ -#main-menu li { - position: relative; -} - -#main-menu li::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - width: 0; - height: 2px; - background: var(--accent-gradient); - transform: translateY(-50%); - transition: var(--transition-normal); -} - -#main-menu li:hover::before, -#main-menu li.active::before { - width: 4px; -} - -/* 标题动画 */ -h4.text-gray { - position: relative; - overflow: hidden; -} - -h4.text-gray::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: var(--transition-slow); -} - -h4.text-gray:hover::before { - left: 100%; -} - -/* 导航菜单增强 */ -.navbar.user-info-navbar { - position: relative; - overflow: hidden; -} - -.navbar.user-info-navbar::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); - transition: var(--transition-slow); -} - -.navbar.user-info-navbar:hover::before { - left: 100%; -} - -/* 滚动指示器 */ -.page-container::after { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 4px; - background: var(--primary-gradient); - transform-origin: left; - transform: scaleX(0); - z-index: 9999; - transition: var(--transition-fast); -} - -/* 页面加载动画 */ -@keyframes pageLoad { - 0% { - opacity: 0; - transform: translateY(20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.main-content { - animation: pageLoad 0.8s ease-out; -} - -/* 鼠标跟随效果 */ -.cursor-follower { - position: fixed; - width: 20px; - height: 20px; - background: var(--accent-gradient); - border-radius: 50%; - pointer-events: none; - z-index: 9999; - transition: transform 0.1s ease; - opacity: 0.7; - mix-blend-mode: difference; -} - -/* 悬浮粒子效果 */ -@keyframes particle { - 0% { - transform: translateY(100vh) scale(0); - opacity: 0; - } - 10% { - opacity: 1; - } - 90% { - opacity: 1; - } - 100% { - transform: translateY(-10vh) scale(1); - opacity: 0; - } -} - -.particle { - position: fixed; - width: 4px; - height: 4px; - background: var(--accent-gradient); - border-radius: 50%; - pointer-events: none; - z-index: 1; - animation: particle 15s linear infinite; -} - -/* 3D翻转效果 */ -.xe-widget.xe-conversations { - transform-style: preserve-3d; - perspective: 1000px; -} - -.xe-widget.xe-conversations:hover { - transform: rotateY(5deg) rotateX(5deg) translateY(-8px) scale(1.02); -} - -/* 边框动画 */ -@keyframes borderGlow { - 0%, 100% { - border-color: rgba(255, 255, 255, 0.2); - box-shadow: 0 0 20px rgba(79, 172, 254, 0.2); - } - 50% { - border-color: rgba(79, 172, 254, 0.6); - box-shadow: 0 0 30px rgba(79, 172, 254, 0.4); - } -} - -.xe-widget.xe-conversations:hover { - animation: borderGlow 2s ease-in-out infinite; -} - -/* 响应式增强 */ -@media (max-width: 768px) { - .xe-widget.xe-conversations { - transform: none !important; - } - - .xe-widget.xe-conversations:hover { - transform: translateY(-4px) !important; - } - - h4.text-gray { - font-size: 1.2rem; - } - - .xe-user-img img { - width: 36px !important; - height: 36px !important; - } -} - -@media (max-width: 480px) { - .xe-widget.xe-conversations { - padding: 1rem !important; - margin: 0.75rem 0 !important; - } - - .xe-user-img img { - width: 32px !important; - height: 32px !important; - } - - .xe-comment p { - font-size: 0.8rem !important; - } -} \ No newline at end of file diff --git a/assets/css/modern-design.css b/assets/css/modern-design.css deleted file mode 100644 index 94c722792..000000000 --- a/assets/css/modern-design.css +++ /dev/null @@ -1,434 +0,0 @@ -/* 现代化设计改进 - WebStack.cc */ - -/* 全局变量和基础设置 */ -:root { - /* 现代配色方案 */ - --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); - --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); - --dark-gradient: linear-gradient(135deg, #434343 0%, #000000 100%); - - /* 毛玻璃效果 */ - --glass-bg: rgba(255, 255, 255, 0.25); - --glass-border: rgba(255, 255, 255, 0.18); - --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - - /* 现代色彩 */ - --primary-color: #667eea; - --secondary-color: #764ba2; - --accent-color: #4facfe; - --text-primary: #2d3748; - --text-secondary: #4a5568; - --text-muted: #718096; - - /* 间距 */ - --card-padding: 2rem; - --card-margin: 1.5rem; - --border-radius: 16px; - --border-radius-small: 12px; - - /* 阴影 */ - --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - --shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - - /* 动画 */ - --transition-fast: all 0.15s ease-in-out; - --transition-normal: all 0.3s ease-in-out; - --transition-slow: all 0.5s ease-in-out; -} - -/* 全局背景和布局 */ -body { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - background-attachment: fixed; - min-height: 100vh; - font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -} - -.page-container { - backdrop-filter: blur(10px); - background: rgba(255, 255, 255, 0.1); - min-height: 100vh; -} - -/* 现代化侧边栏 */ -.sidebar-menu { - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(20px); - border-right: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: var(--shadow-large); -} - -.sidebar-menu .logo-expanded img { - transition: var(--transition-normal); - filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); -} - -.sidebar-menu .logo-expanded:hover img { - transform: scale(1.05); - filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2)); -} - -#main-menu li a { - border-radius: var(--border-radius-small); - margin: 0.25rem 0.5rem; - transition: var(--transition-normal); - position: relative; - overflow: hidden; -} - -#main-menu li a::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--accent-gradient); - transition: var(--transition-normal); - z-index: -1; -} - -#main-menu li a:hover::before, -#main-menu li.active a::before { - left: 0; -} - -#main-menu li a:hover, -#main-menu li.active a { - color: white; - transform: translateX(4px); - box-shadow: var(--shadow-medium); -} - -/* 顶部导航栏 */ -.navbar.user-info-navbar { - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px); - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: var(--shadow-soft); -} - -/* 现代化卡片设计 */ -.xe-widget.xe-conversations { - background: var(--glass-bg); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid var(--glass-border); - border-radius: var(--border-radius); - padding: var(--card-padding); - margin: var(--card-margin) 0; - transition: var(--transition-normal); - position: relative; - overflow: hidden; - cursor: pointer; - box-shadow: var(--shadow-soft); -} - -.xe-widget.xe-conversations::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: var(--primary-gradient); - transform: scaleX(0); - transition: var(--transition-normal); - transform-origin: left; -} - -.xe-widget.xe-conversations:hover::before { - transform: scaleX(1); -} - -.xe-widget.xe-conversations:hover { - transform: translateY(-8px) scale(1.02); - box-shadow: var(--shadow-hover); - border-color: rgba(255, 255, 255, 0.3); - background: rgba(255, 255, 255, 0.35); -} - -/* 卡片内容布局优化 */ -.xe-comment-entry { - display: flex; - align-items: center; - height: 100%; -} - -.xe-user-img { - flex-shrink: 0; - margin-right: 1rem; - position: relative; -} - -.xe-user-img::after { - content: ''; - position: absolute; - inset: -2px; - border-radius: 50%; - padding: 2px; - background: var(--accent-gradient); - mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); - mask-composite: exclude; - opacity: 0; - transition: var(--transition-normal); -} - -.xe-widget.xe-conversations:hover .xe-user-img::after { - opacity: 1; - animation: pulse 2s infinite; -} - -.xe-user-img img { - width: 48px; - height: 48px; - border-radius: 12px; - transition: var(--transition-normal); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.xe-widget.xe-conversations:hover .xe-user-img img { - transform: scale(1.1); - border-color: rgba(255, 255, 255, 0.6); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); -} - -.xe-comment { - flex: 1; - min-width: 0; -} - -.xe-user-name { - font-weight: 600; - font-size: 1.1rem; - color: var(--text-primary); - margin-bottom: 0.5rem; - background: var(--primary-gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - transition: var(--transition-normal); -} - -.xe-widget.xe-conversations:hover .xe-user-name { - background: var(--accent-gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.xe-comment p { - color: var(--text-secondary); - font-size: 0.9rem; - line-height: 1.5; - margin: 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* 标题样式优化 */ -h4.text-gray { - color: white !important; - font-weight: 700; - font-size: 1.5rem; - margin: 2rem 0 1.5rem 0; - padding: 1rem 0; - position: relative; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -h4.text-gray::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 60px; - height: 3px; - background: var(--accent-gradient); - border-radius: 2px; -} - -/* 网格布局优化 */ -.row { - margin: 0 -0.75rem; -} - -.col-sm-3 { - padding: 0 0.75rem; - margin-bottom: 1.5rem; -} - -/* 标签样式 */ -.label { - border-radius: 20px; - padding: 0.25rem 0.75rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - border: none; - backdrop-filter: blur(10px); -} - -.label-info { - background: var(--accent-gradient); - color: white; - box-shadow: 0 4px 8px rgba(79, 172, 254, 0.3); -} - -.label-primary { - background: var(--primary-gradient); - color: white; - box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3); -} - -.label-pink { - background: var(--secondary-gradient); - color: white; - box-shadow: 0 4px 8px rgba(245, 87, 108, 0.3); -} - -/* 语言切换器 */ -.language-switcher .dropdown-toggle { - background: var(--glass-bg); - backdrop-filter: blur(16px); - border: 1px solid var(--glass-border); - border-radius: var(--border-radius-small); - padding: 0.5rem 1rem; - transition: var(--transition-normal); -} - -.language-switcher .dropdown-toggle:hover { - background: rgba(255, 255, 255, 0.35); - transform: translateY(-2px); - box-shadow: var(--shadow-medium); -} - -.language-switcher .dropdown-menu { - background: var(--glass-bg); - backdrop-filter: blur(20px); - border: 1px solid var(--glass-border); - border-radius: var(--border-radius-small); - box-shadow: var(--shadow-large); -} - -.language-switcher .dropdown-menu li a { - transition: var(--transition-fast); - color: var(--text-primary); -} - -.language-switcher .dropdown-menu li a:hover { - background: var(--accent-gradient); - color: white; - transform: translateX(4px); -} - -/* GitHub 链接样式 */ -.user-info-menu.right-links a { - background: var(--glass-bg); - backdrop-filter: blur(16px); - border: 1px solid var(--glass-border); - border-radius: var(--border-radius-small); - padding: 0.5rem 1rem; - transition: var(--transition-normal); - color: var(--text-primary); -} - -.user-info-menu.right-links a:hover { - background: var(--primary-gradient); - color: white; - transform: translateY(-2px); - box-shadow: var(--shadow-medium); -} - -/* 移动端优化 */ -@media (max-width: 768px) { - .xe-widget.xe-conversations { - padding: 1.5rem; - margin: 1rem 0; - } - - .xe-user-img img { - width: 40px; - height: 40px; - } - - .xe-comment p { - font-size: 0.85rem; - -webkit-line-clamp: 3; - } - - h4.text-gray { - font-size: 1.3rem; - margin: 1.5rem 0 1rem 0; - } -} - -/* 动画效果 */ -@keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.7); - } - 70% { - box-shadow: 0 0 0 10px rgba(79, 172, 254, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(79, 172, 254, 0); - } -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.xe-widget.xe-conversations { - animation: fadeInUp 0.6s ease-out; - animation-fill-mode: both; -} - -.xe-widget.xe-conversations:nth-child(1) { animation-delay: 0.1s; } -.xe-widget.xe-conversations:nth-child(2) { animation-delay: 0.2s; } -.xe-widget.xe-conversations:nth-child(3) { animation-delay: 0.3s; } -.xe-widget.xe-conversations:nth-child(4) { animation-delay: 0.4s; } - -/* 滚动条美化 */ -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); - border-radius: 4px; -} - -::-webkit-scrollbar-thumb { - background: var(--accent-gradient); - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--primary-gradient); -} - -/* 选择文本样式 */ -::selection { - background: rgba(79, 172, 254, 0.3); - color: white; -} - -::-moz-selection { - background: rgba(79, 172, 254, 0.3); - color: white; -} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 000000000..892a6fef8 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,446 @@ +/* WebStack.cc 简洁样式 */ + +/* 基础重置 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + line-height: 1.6; + color: #333; + background-color: #f8f9fa; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* 头部样式 */ +.header { + background: #fff; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 100; +} + +.header .container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px 20px; +} + +.logo { + display: flex; + align-items: center; + gap: 15px; +} + +.logo img { + width: 48px; + height: 48px; + object-fit: contain; +} + +.logo h1 { + font-size: 24px; + font-weight: 700; + color: #2c3e50; + margin: 0; +} + +.logo p { + font-size: 14px; + color: #666; + margin: 0; + margin-left: 10px; +} + +/* 导航样式 */ +.nav { + flex: 1; + margin: 0 30px; +} + +.nav-list { + display: flex; + list-style: none; + gap: 25px; + justify-content: center; + margin: 0; + padding: 0; +} + +.nav-list a { + text-decoration: none; + color: #555; + font-weight: 500; + padding: 10px 0; + position: relative; + transition: color 0.3s ease; +} + +.nav-list a:hover { + color: #007bff; +} + +.nav-list a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: 0; + left: 50%; + background-color: #007bff; + transition: all 0.3s ease; +} + +.nav-list a:hover::after, +.nav-list a.active::after { + width: 100%; + left: 0; +} + +/* 语言切换 */ +.lang-switch { + display: flex; + gap: 5px; +} + +.lang-btn { + padding: 8px 12px; + text-decoration: none; + color: #666; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 12px; + transition: all 0.3s ease; +} + +.lang-btn:hover, +.lang-btn.active { + background-color: #007bff; + color: white; + border-color: #007bff; +} + +/* 主要内容区域 */ +.main { + min-height: calc(100vh - 200px); + padding: 40px 0; +} + +.content { + padding: 20px 0; +} + +/* 分类标题 */ +.category-title { + display: flex; + align-items: center; + margin: 40px 0 25px 0; + padding-bottom: 15px; + border-bottom: 2px solid #e9ecef; +} + +.category-title h2 { + font-size: 28px; + font-weight: 700; + color: #2c3e50; + margin: 0; +} + +.category-title .icon { + font-size: 24px; + margin-right: 15px; + color: #007bff; +} + +/* 子分类样式 */ +.subcategory { + margin: 30px 0; +} + +.subcategory-title { + display: flex; + align-items: center; + margin: 25px 0 20px 0; +} + +.subcategory-title h3 { + font-size: 22px; + font-weight: 600; + color: #495057; + margin: 0; +} + +.subcategory-title .label { + background: #007bff; + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + margin-left: 10px; +} + +/* 网站网格 */ +.websites-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + margin-bottom: 40px; +} + +/* 网站卡片 */ +.website-card { + background: #fff; + border: 1px solid #e9ecef; + border-radius: 8px; + padding: 20px; + text-decoration: none; + color: inherit; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 15px; + position: relative; +} + +.website-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border-color: #007bff; +} + +.website-logo { + width: 48px; + height: 48px; + border-radius: 8px; + object-fit: contain; + flex-shrink: 0; +} + +.website-info { + flex: 1; + min-width: 0; +} + +.website-name { + font-size: 16px; + font-weight: 600; + color: #2c3e50; + margin: 0 0 5px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.website-description { + font-size: 14px; + color: #666; + margin: 0; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.website-card::after { + content: '↗'; + position: absolute; + top: 15px; + right: 15px; + font-size: 16px; + color: #bbb; + transition: color 0.3s ease; +} + +.website-card:hover::after { + color: #007bff; +} + +/* 空状态 */ +.empty-state { + text-align: center; + padding: 60px 20px; + color: #6c757d; +} + +.empty-state h3 { + font-size: 18px; + margin-bottom: 10px; +} + +.empty-state p { + font-size: 14px; + margin: 0; +} + +/* 加载状态 */ +.loading { + text-align: center; + padding: 40px 20px; + color: #6c757d; +} + +.loading::before { + content: '⏳'; + font-size: 24px; + margin-right: 10px; +} + +/* 错误状态 */ +.error { + text-align: center; + padding: 40px 20px; + color: #dc3545; +} + +.error::before { + content: '⚠️'; + font-size: 24px; + margin-right: 10px; +} + +/* 底部样式 */ +.footer { + background: #fff; + border-top: 1px solid #e9ecef; + padding: 20px 0; + text-align: center; + color: #666; + font-size: 14px; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .header .container { + flex-direction: column; + gap: 15px; + padding: 15px 20px; + } + + .nav { + margin: 0; + } + + .nav-list { + flex-wrap: wrap; + justify-content: center; + gap: 15px; + } + + .nav-list a { + font-size: 14px; + padding: 8px 0; + } + + .logo { + order: -1; + justify-content: center; + } + + .logo h1 { + font-size: 20px; + } + + .logo p { + display: none; + } + + .websites-grid { + grid-template-columns: 1fr; + gap: 15px; + } + + .website-card { + padding: 15px; + } + + .website-logo { + width: 40px; + height: 40px; + } + + .website-name { + font-size: 15px; + } + + .website-description { + font-size: 13px; + } + + .category-title h2 { + font-size: 24px; + } + + .subcategory-title h3 { + font-size: 20px; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 15px; + } + + .nav-list { + gap: 10px; + } + + .nav-list a { + font-size: 13px; + padding: 6px 0; + } + + .website-card { + padding: 12px; + gap: 12px; + } + + .website-logo { + width: 36px; + height: 36px; + } +} + +/* 平滑滚动 */ +html { + scroll-behavior: smooth; +} + +/* 焦点样式 */ +.website-card:focus { + outline: 2px solid #007bff; + outline-offset: 2px; +} + +/* 过渡动画 */ +.category-title, +.subcategory-title, +.website-card { + opacity: 0; + transform: translateY(20px); + animation: fadeInUp 0.6s ease forwards; +} + +.website-card:nth-child(1) { animation-delay: 0.1s; } +.website-card:nth-child(2) { animation-delay: 0.2s; } +.website-card:nth-child(3) { animation-delay: 0.3s; } +.website-card:nth-child(4) { animation-delay: 0.4s; } +.website-card:nth-child(5) { animation-delay: 0.5s; } +.website-card:nth-child(6) { animation-delay: 0.6s; } + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file diff --git a/assets/js/app.js b/assets/js/app.js new file mode 100644 index 000000000..0fd0d31f3 --- /dev/null +++ b/assets/js/app.js @@ -0,0 +1,261 @@ +// WebStack.cc 应用脚本 + +class WebStackApp { + constructor() { + this.data = null; + this.init(); + } + + async init() { + try { + await this.loadData(); + this.renderContent(); + this.bindEvents(); + } catch (error) { + this.showError('加载数据失败，请刷新页面重试'); + console.error('Error loading data:', error); + } + } + + async loadData() { + const response = await fetch('./websites.json'); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + this.data = await response.json(); + } + + renderContent() { + const content = document.getElementById('content'); + if (!content) return; + + if (!this.data || !this.data.categories) { + this.showError('数据格式错误'); + return; + } + + content.innerHTML = ''; + + this.data.categories.forEach(category => { + const categoryElement = this.createCategoryElement(category); + content.appendChild(categoryElement); + }); + } + + createCategoryElement(category) { + const categoryDiv = document.createElement('section'); + categoryDiv.className = 'category'; + categoryDiv.id = category.id; + + // 分类标题 + const titleDiv = document.createElement('div'); + titleDiv.className = 'category-title'; + + const icon = this.getIcon(category.icon); + const titleHTML = ` + ${icon} +

${category.name}

+ `; + titleDiv.innerHTML = titleHTML; + + categoryDiv.appendChild(titleDiv); + + // 子分类或网站列表 + if (category.subcategories && category.subcategories.length > 0) { + // 有子分类的情况 + category.subcategories.forEach(subcategory => { + const subcategoryDiv = this.createSubcategoryElement(subcategory); + categoryDiv.appendChild(subcategoryDiv); + }); + } else if (category.websites && category.websites.length > 0) { + // 直接是网站列表 + const gridDiv = this.createWebsitesGrid(category.websites); + categoryDiv.appendChild(gridDiv); + } + + return categoryDiv; + } + + createSubcategoryElement(subcategory) { + const subcategoryDiv = document.createElement('div'); + subcategoryDiv.className = 'subcategory'; + subcategoryDiv.id = subcategory.id; + + // 子分类标题 + const titleDiv = document.createElement('div'); + titleDiv.className = 'subcategory-title'; + const titleHTML = ` +

${subcategory.name}

+ ${subcategory.websites ? subcategory.websites.length : 0} + `; + titleDiv.innerHTML = titleHTML; + + subcategoryDiv.appendChild(titleDiv); + + // 网站网格 + if (subcategory.websites && subcategory.websites.length > 0) { + const gridDiv = this.createWebsitesGrid(subcategory.websites); + subcategoryDiv.appendChild(gridDiv); + } + + return subcategoryDiv; + } + + createWebsitesGrid(websites) { + const gridDiv = document.createElement('div'); + gridDiv.className = 'websites-grid'; + + websites.forEach(website => { + const card = this.createWebsiteCard(website); + gridDiv.appendChild(card); + }); + + return gridDiv; + } + + createWebsiteCard(website) { + const card = document.createElement('a'); + card.className = 'website-card'; + card.href = website.url; + card.target = '_blank'; + card.rel = 'noopener noreferrer'; + card.title = website.description; + + // 处理logo图片 + let logoSrc = `../assets/images/logos/${website.logo}`; + if (window.location.pathname.includes('/index.html') || window.location.pathname === '/') { + logoSrc = `./assets/images/logos/${website.logo}`; + } + + const cardHTML = ` + +
+

${website.name}

+

${website.description}

+
+ `; + + card.innerHTML = cardHTML; + + // 添加点击事件 + card.addEventListener('click', (e) => { + // 可以在这里添加统计代码 + this.trackClick(website.name); + }); + + return card; + } + + getIcon(iconName) { + const icons = { + 'star': '⭐', + 'doc': '📄', + 'lightbulb': '💡', + 'thumbs-up': '👍', + 'diamond': '💎', + 'pencil': '✏️', + 'user': '👥', + 'recommended': '⭐', + 'community': '📄', + 'inspiration': '💡', + 'resources': '👍', + 'tools': '💎', + 'learning': '✏️', + 'teams': '👥' + }; + return icons[iconName] || '🔗'; + } + + bindEvents() { + // 平滑滚动 + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', (e) => { + e.preventDefault(); + const target = document.querySelector(anchor.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + + // 更新导航状态 + document.querySelectorAll('.nav-list a').forEach(link => { + link.classList.remove('active'); + }); + anchor.classList.add('active'); + } + }); + }); + + // 滚动时更新导航状态 + window.addEventListener('scroll', () => { + this.updateActiveNavigation(); + }); + } + + updateActiveNavigation() { + const sections = document.querySelectorAll('.category'); + const navLinks = document.querySelectorAll('.nav-list a'); + + let current = ''; + sections.forEach(section => { + const sectionTop = section.offsetTop - 100; + if (window.pageYOffset >= sectionTop) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${current}`) { + link.classList.add('active'); + } + }); + } + + showLoading() { + const content = document.getElementById('content'); + if (content) { + content.innerHTML = '
正在加载...
'; + } + } + + showError(message) { + const content = document.getElementById('content'); + if (content) { + content.innerHTML = `
${message}
`; + } + } + + showEmpty(message = '暂无数据') { + const content = document.getElementById('content'); + if (content) { + content.innerHTML = ` +
+

${message}

+

请稍后再试或联系管理员

+
+ `; + } + } + + trackClick(websiteName) { + // 可以在这里添加统计分析代码 + console.log('Clicked:', websiteName); + + // 例如：发送到Google Analytics + // gtag('event', 'click', { + // event_category: 'website', + // event_label: websiteName + // }); + } +} + +// 当页面加载完成后初始化应用 +document.addEventListener('DOMContentLoaded', () => { + const app = new WebStackApp(); +}); + +// 导出供其他脚本使用 +window.WebStackApp = WebStackApp; \ No newline at end of file diff --git a/assets/js/modern-effects.js b/assets/js/modern-effects.js deleted file mode 100644 index c9cef717c..000000000 --- a/assets/js/modern-effects.js +++ /dev/null @@ -1,336 +0,0 @@ -// 现代化动态效果 - WebStack.cc -document.addEventListener('DOMContentLoaded', function() { - - // 滚动进度条 - function updateScrollProgress() { - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; - const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; - const scrollProgress = (scrollTop / scrollHeight) * 100; - - let progressBar = document.querySelector('.scroll-progress'); - if (!progressBar) { - progressBar = document.createElement('div'); - progressBar.className = 'scroll-progress'; - progressBar.style.cssText = ` - position: fixed; - top: 0; - left: 0; - width: ${scrollProgress}%; - height: 3px; - background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); - z-index: 9999; - transition: width 0.1s ease; - `; - document.body.appendChild(progressBar); - } else { - progressBar.style.width = scrollProgress + '%'; - } - } - - // 鼠标跟随效果 - function initMouseFollower() { - const follower = document.createElement('div'); - follower.className = 'mouse-follower'; - follower.style.cssText = ` - position: fixed; - width: 20px; - height: 20px; - background: radial-gradient(circle, rgba(79, 172, 254, 0.6) 0%, transparent 70%); - border-radius: 50%; - pointer-events: none; - z-index: 9999; - transition: transform 0.1s ease; - mix-blend-mode: difference; - `; - document.body.appendChild(follower); - - document.addEventListener('mousemove', (e) => { - follower.style.left = e.clientX - 10 + 'px'; - follower.style.top = e.clientY - 10 + 'px'; - }); - - // 在卡片上悬停时放大效果 - document.querySelectorAll('.xe-widget').forEach(card => { - card.addEventListener('mouseenter', () => { - follower.style.transform = 'scale(2)'; - }); - card.addEventListener('mouseleave', () => { - follower.style.transform = 'scale(1)'; - }); - }); - } - - // 粒子效果 - function initParticles() { - const particleCount = 15; - const colors = ['#667eea', '#764ba2', '#4facfe', '#00f2fe']; - - for (let i = 0; i < particleCount; i++) { - const particle = document.createElement('div'); - particle.className = 'floating-particle'; - particle.style.cssText = ` - position: fixed; - width: ${Math.random() * 4 + 2}px; - height: ${Math.random() * 4 + 2}px; - background: ${colors[Math.floor(Math.random() * colors.length)]}; - border-radius: 50%; - pointer-events: none; - z-index: 1; - left: ${Math.random() * 100}vw; - top: 100vh; - opacity: 0.6; - animation: float ${Math.random() * 10 + 10}s linear infinite; - animation-delay: ${Math.random() * 5}s; - `; - document.body.appendChild(particle); - } - } - - // 视差滚动效果 - function initParallax() { - window.addEventListener('scroll', () => { - const scrolled = window.pageYOffset; - const parallax = scrolled * 0.5; - - document.querySelectorAll('.xe-widget').forEach((card, index) => { - const speed = 0.1 + (index * 0.05); - card.style.transform = `translateY(${scrolled * speed}px)`; - }); - }); - } - - // 卡片悬浮动画 - function initCardAnimations() { - const cards = document.querySelectorAll('.xe-widget.xe-conversations'); - - cards.forEach((card, index) => { - // 添加进入动画延迟 - card.style.animationDelay = `${index * 0.1}s`; - - // 鼠标进入效果 - card.addEventListener('mouseenter', function() { - this.style.transform = 'translateY(-10px) rotateX(5deg) scale(1.02)'; - this.style.boxShadow = '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 30px rgba(79, 172, 254, 0.3)'; - - // 添加光晕效果 - const glow = document.createElement('div'); - glow.className = 'card-glow'; - glow.style.cssText = ` - position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - background: linear-gradient(45deg, #667eea, #764ba2, #4facfe, #00f2fe); - border-radius: 18px; - z-index: -1; - opacity: 0; - transition: opacity 0.3s ease; - animation: borderRotate 3s linear infinite; - `; - this.style.position = 'relative'; - this.appendChild(glow); - - setTimeout(() => glow.style.opacity = '0.7', 100); - }); - - // 鼠标离开效果 - card.addEventListener('mouseleave', function() { - this.style.transform = ''; - this.style.boxShadow = ''; - - const glow = this.querySelector('.card-glow'); - if (glow) { - glow.style.opacity = '0'; - setTimeout(() => glow.remove(), 300); - } - }); - }); - } - - // 打字机效果 - function initTypewriter() { - const titles = document.querySelectorAll('h4.text-gray'); - - titles.forEach(title => { - const text = title.textContent; - title.textContent = ''; - title.style.borderRight = '2px solid #4facfe'; - - let i = 0; - const typeWriter = () => { - if (i < text.length) { - title.textContent += text.charAt(i); - i++; - setTimeout(typeWriter, 100); - } else { - setTimeout(() => { - title.style.borderRight = 'none'; - }, 1000); - } - }; - - // 当标题进入视口时开始打字机效果 - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - typeWriter(); - observer.unobserve(entry.target); - } - }); - }); - - observer.observe(title); - }); - } - - // 平滑滚动增强 - function initSmoothScroll() { - document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function (e) { - e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); - if (target) { - target.scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); - - // 添加目标高亮效果 - target.style.background = 'rgba(79, 172, 254, 0.1)'; - target.style.borderRadius = '8px'; - target.style.padding = '1rem'; - target.style.margin = '1rem 0'; - target.style.transition = 'all 0.5s ease'; - - setTimeout(() => { - target.style.background = ''; - target.style.padding = ''; - target.style.margin = ''; - }, 2000); - } - }); - }); - } - - // 懒加载增强 - function initLazyLoading() { - const images = document.querySelectorAll('img[data-src]'); - - const imageObserver = new IntersectionObserver((entries, observer) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - const img = entry.target; - img.src = img.dataset.src; - img.classList.remove('lazy'); - imageObserver.unobserve(img); - - // 添加图片加载动画 - img.style.opacity = '0'; - img.style.transform = 'scale(0.8)'; - img.style.transition = 'all 0.5s ease'; - - img.onload = () => { - img.style.opacity = '1'; - img.style.transform = 'scale(1)'; - }; - } - }); - }); - - images.forEach(img => imageObserver.observe(img)); - } - - // 添加CSS动画关键帧 - function addAnimationStyles() { - const style = document.createElement('style'); - style.textContent = ` - @keyframes float { - 0%, 100% { transform: translateY(0px); } - 50% { transform: translateY(-10px); } - } - - @keyframes borderRotate { - 0% { filter: hue-rotate(0deg); } - 100% { filter: hue-rotate(360deg); } - } - - @keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.05); } - 100% { transform: scale(1); } - } - - .floating-particle { - animation: float ${Math.random() * 10 + 10}s linear infinite; - } - - .xe-widget { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - } - - .xe-widget:hover { - transform: translateY(-8px) scale(1.02); - } - - .card-glow { - animation: borderRotate 3s linear infinite; - } - `; - document.head.appendChild(style); - } - - // 初始化所有效果 - function init() { - addAnimationStyles(); - updateScrollProgress(); - initMouseFollower(); - initParticles(); - initCardAnimations(); - initTypewriter(); - initSmoothScroll(); - initLazyLoading(); - - // 滚动事件监听 - window.addEventListener('scroll', updateScrollProgress); - - // 窗口大小改变时重新计算 - window.addEventListener('resize', () => { - setTimeout(updateScrollProgress, 100); - }); - } - - // 页面加载完成后初始化 - init(); - - // 添加页面切换动画 - window.addEventListener('beforeunload', () => { - document.body.style.opacity = '0'; - document.body.style.transform = 'scale(0.95)'; - document.body.style.transition = 'all 0.3s ease'; - }); -}); - -// 添加触摸设备优化 -if ('ontouchstart' in window) { - document.body.classList.add('touch-device'); - - // 移除鼠标跟随效果 - const mouseFollower = document.querySelector('.mouse-follower'); - if (mouseFollower) { - mouseFollower.remove(); - } - - // 调整动画以适应触摸设备 - const style = document.createElement('style'); - style.textContent = ` - .touch-device .xe-widget:hover { - transform: translateY(-4px) !important; - } - - .touch-device .floating-particle { - display: none; - } - `; - document.head.appendChild(style); -} \ No newline at end of file diff --git a/cn/index.html b/cn/index.html index eb3c18efb..1cf056828 100644 --- a/cn/index.html +++ b/cn/index.html @@ -1,4296 +1,54 @@ - - - - - - - - + + WebStack.cc - 设计师网址导航 - - + + - - - - - - - - - - - - - - - - - - - - - - - - - + - - - -
-
-
-
- - -
- - - - - - -
-
-