科普网站产品系统Vibe Coding

本项目立项旨在解决传统化学与生活安全科普“术语枯燥、原理抽象、受众理解门槛高”的痛点。在生活健康与科学教育场景下，大众对日常遇到的化学现象（如胃药抗酸、洗涤剂配比等）往往知其然而不知其所以然。网站作为轻量化的知识可视化平台，通过真实案例与科学解密，将抽象的化学分子反应转化为可视化的交互体验，降低了科普知识的传播门槛，为普通用户提供了一个零门槛、无需安装即可探索科学原理的实用工具站。

网站围绕“场景导向-交互解密-知识获取”进行功能设计：
生活场景导航模块：按居家、清洁、出行等真实场景分类，引导用户快速定位感兴趣的科普疑问。
交互式原理模拟模块（核心）：提供可视化的实时实验工具。例如在“胃药抗酸”案例中，用户可拖动滑块调节浓度与滴速，实时观察pH滴定动画、指示剂颜色变化及动态曲线绘制。
真实案例与溯源模块：展示新闻报道、医学病例等真实案例，并附上政府监管政策与信息来源，支持用户自行查证。
即点即用与自测模块：无需注册登录，打开即可进行参数调节互动，配套生活场景提问与自测小练习，增强知识留存率。

我负责的任务：作为核心前端开发，独立完成了各科普页面的响应式布局开发。重点负责了“交互式模拟组件”的代码实现，并运用基础PS能力对网站内的粒子视觉素材、指示剂变色图层及案例配图进行了精准切图、裁剪与调色处理，确保了科普展示的严谨性与视觉美观度。
技术栈与架构：采用 HTML5 + CSS3 + JavaScript 构建基础页面与交互逻辑。复杂数据曲线（如pH滴定曲线）使用 SVG / Canvas 绘制保证高清不模糊，并结合 DOM 事件监听实现拖动滑块实时重绘；样式方面采用响应式布局（Media Queries + Flexbox），实现多端适配。
实现亮点与难点：亮点在于实现了“数据驱动+动画渲染”的实时联动，通过前端算法精确模拟化学滴定过程；难点在于跨端交互体验的一致性，在不引入重型3D引擎的前提下，纯靠原生前端技术确保了动画在移动端和PC端都能保持流畅不卡顿，并且所有模型做到了“打开即用、无需加载等待”。