WebGallery 是专注静态网页设计展示的轻量级平台，响应式适配全设备。有作品筛选、上传等功能，采用原生 JS 交互，防复制保护创作者权益，以轻盈高效设计哲学，为用户带来优质体验。
WebGallery 静态网页展示平台源码简介
WebGallery 是一个专注于静态网页设计展示的轻量级平台，采用响应式设计，适配桌面与移动端设备。平台以“发现精美静态网页设计”为核心定位，通过结构化布局与交互功能实现作品展示、筛选、上传及社区交流功能。
核心架构与功能模块
响应式导航系统
- 顶部固定导航栏：支持滚动特效（滚动超过 30px 时高度压缩并添加阴影）
- 移动端适配：汉堡菜单（点击切换为关闭图标），响应式显示/隐藏导航链接
- 导航项：包含首页、展示、上传、关于四大核心板块锚点链接
视觉展示体系
- 英雄区域：采用渐入动画，突出平台核心价值主张
- 作品卡片：
- 网格布局（sm:2 列/lg:3 列/xl:4 列）
- 每张卡片集成：
- 响应式图片容器（aspect-video 保持 16:9 比例）
- 类别标签（作品集/着陆页/博客/电商四类配色标识）
- 动态悬停效果（图片缩放+卡片上移+阴影增强）
- 演示链接外部跳转功能
交互功能组件
- 筛选系统：类别选择器+搜索框组合筛选
- 加载更多机制：点击按钮触发动画加载（模拟 1.2 秒延迟），新增 4 张动态卡片
- 回到顶部按钮：滚动超过 300px 时渐变显示，支持平滑滚动
- 防复制保护：禁用右键菜单、文本选择、快捷键复制，并通过 MutationObserver 监控 DOM 变更
用户创作系统
- 上传表单：包含标题、描述、类别、截图上传、演示链接五要素
- 文件上传区域：支持拖拽交互，限制 PNG/JPG 格式
- 表单提交：触发成功提示并重置表单
品牌与社区模块
- 关于区域：采用图文分栏布局，阐述平台使命
- 页脚：集成社交媒体链接、快速导航、版权声明
- 版权保护标识：嵌入源多多资源网首发信息
技术特性
- CSS 框架：采用 Tailwind CSS 实现快速原型开发，自定义配色方案（主色#3B82F6，辅色#60A5FA 等）
- 图标库：集成 Font Awesome 图标库增强视觉引导
- 交互逻辑：纯原生 JavaScript 实现，无第三方依赖
- 图片加载：加载失败时自动切换为灰度占位图
- 动画系统：采用 CSS 关键帧（fadeIn/spinner），配合 content-visibility 优化性能
设计理念
平台贯彻“轻盈高效”的设计哲学，通过以下细节提升用户体验：
- 半透明导航栏
- 卡片悬停微动效
- 渐入加载动画
- 严格的防复制措施保护创作者权益
整体布局遵循内容优先原则，在保证功能完整性的同时，通过合理的留白与层级设计提升视觉舒适度。
