feat: Update database connection and error display settings

- Changed database connection credentials in footer.php for improved security.
- Disabled error display in ajax.inc.php to prevent sensitive information exposure.
- Added comprehensive design documentation for the news flow application.
- Implemented a modernized index.php layout with responsive design and enhanced user experience.
- Developed main.js for dynamic news loading, including infinite scroll and date filtering functionalities.
- Structured interaction.md to detail core interactive features of the application.
- Organized outline.md to clarify project structure and core functionalities.
- Populated mock-data.json with realistic news data for testing and development purposes.

news/design.md

@@ -0,0 +1,59 @@
+# 新闻流应用设计风格
+
+## 设计理念
+
+### 视觉语言
+- **现代简约**：采用简洁的设计语言，突出内容本身
+- **层次分明**：通过字体大小、颜色和间距建立清晰的信息层级
+- **呼吸感强**：充足的留白空间，避免视觉拥挤
+- **专业可信**：使用稳重的色彩搭配，传达权威感
+
+### 色彩方案
+- **主色调**：深蓝灰 (#1e293b) - 专业、稳重
+- **辅助色**：浅灰蓝 (#64748b) - 次要信息
+- **强调色**：天蓝 (#0ea5e9) - 链接、按钮
+- **背景色**：纯白 (#ffffff) 和浅灰 (#f8fafc)
+- **文本色**：深灰 (#334155) 主文本，中灰 (#64748b) 次要文本
+
+### 字体系统
+- **标题字体**：Noto Serif SC - 优雅的衬线字体，适合标题
+- **正文字体**：Noto Sans SC - 清晰的无衬线字体，易读性强
+- **字体层级**：
+  - 主标题：text-2xl (24px) font-bold
+  - 副标题：text-lg (18px) font-semibold  
+  - 正文：text-base (16px) font-normal
+  - 辅助文本：text-sm (14px) font-normal
+
+## 视觉效果
+
+### 动画效果
+- **展开动画**：使用CSS transition实现平滑的内容展开/收起
+- **加载动画**：简洁的旋转加载指示器
+- **悬停效果**：微妙的阴影和颜色变化
+- **滚动动画**：元素进入视口时的淡入效果
+
+### 布局设计
+- **卡片式设计**：每条新闻采用卡片容器，增强视觉分组
+- **网格系统**：使用Tailwind CSS的网格系统确保响应式布局
+- **弹性布局**：Flexbox实现灵活的组件排列
+- **间距系统**：统一的间距规范，保持视觉一致性
+
+### 交互样式
+- **按钮样式**：圆角设计，悬停时轻微阴影效果
+- **链接样式**：下划线动画，悬停时颜色变化
+- **状态指示**：清晰的加载、成功、错误状态视觉反馈
+- **焦点样式**：键盘导航时的可见焦点指示
+
+### 响应式设计
+- **断点设置**：
+  - 移动端：< 768px
+  - 平板端：768px - 1024px  
+  - 桌面端：> 1024px
+- **布局适配**：不同屏幕尺寸下的最佳布局展示
+- **触摸优化**：移动端更大的点击区域和手势支持
+
+### 微交互细节
+- **阴影效果**：卡片悬停时的微妙阴影提升
+- **颜色渐变**：按钮和链接的状态过渡
+- **图标使用**：简洁的线性图标，增强视觉引导
+- **状态反馈**：清晰的视觉状态变化，提升用户体验