commit 26defd9d698b068f4116457a99d635e161b6ca98
Author: 袁涛 <work@pandorastudio.cn>
Date:   Sun Mar 29 00:54:34 2026 +0800

    新增 汽车360度全景展示移动端Web应用
    
    - 实现触摸滑动旋转查看汽车360度全景
    - 添加惯性滑动效果和自动旋转展示功能
    - 实现全屏沉浸式体验和精美Loading动画
    - 添加Python视频帧提取脚本和浏览器端提取工具
    - 包含本地HTTP服务器和完整项目文档

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8e40f09
--- /dev/null
+++ b/README.md
@@ -0,0 +1,118 @@
+# 汽车360°全景展示应用
+
+一个移动端 Web 应用，用于汽车的 360 度全景交互展示。
+
+## 功能特性
+
+- **触摸滑动旋转** - 左右滑动查看汽车 360 度全景
+- **惯性滑动效果** - 滑动结束后保持惯性继续旋转
+- **自动旋转展示** - 空闲时自动缓慢旋转展示
+- **全屏沉浸体验** - 全屏显示，沉浸式查看
+- **精美加载动画** - 汽车图标描边动画 + 进度条
+- **移动端优化** - 专为移动端触摸交互设计
+
+## 文件结构
+
+```
+3D-pano/
+├── index.html          # 主页面
+├── app.js              # 应用逻辑
+├── styles.css          # 样式文件
+├── server.js           # 本地 HTTP 服务器
+├── extract_frames.py   # Python 视频帧提取脚本
+├── extract.html        # 浏览器端帧提取工具
+├── video.mp4           # 源视频文件
+├── images/             # 序列帧图片目录
+│   ├── car_001.jpg
+│   ├── car_002.jpg
+│   └── ...
+└── package.json        # 项目配置
+```
+
+## 快速开始
+
+### 1. 提取序列帧
+
+**方法一：Python 脚本（推荐）**
+
+```bash
+python extract_frames.py
+```
+
+需要安装 OpenCV：
+```bash
+pip install opencv-python
+```
+
+**方法二：浏览器工具**
+
+1. 启动本地服务器（见步骤2）
+2. 访问 `http://localhost:9000/extract.html`
+3. 点击「开始提取」
+4. 点击「应用到展示页」
+
+### 2. 启动本地服务器
+
+```bash
+node server.js
+```
+
+服务器将在 `http://localhost:9000` 启动。
+
+### 3. 访问应用
+
+在浏览器中打开 `http://localhost:9000/index.html`
+
+## 配置说明
+
+在 `app.js` 中可调整以下参数：
+
+```javascript
+this.config = {
+    totalFrames: 336,          // 总帧数
+    autoRotateSpeed: 80,       // 自动旋转速度（ms/帧）
+    autoRotateDelay: 3000,     // 停止操作后自动旋转延迟（ms）
+    inertiaFriction: 0.95,     // 惯性摩擦系数
+    imagePath: './images/',    // 图片路径
+    imagePrefix: 'car_',       // 图片前缀
+    imageExt: '.jpg'           // 图片扩展名
+};
+```
+
+## 图片命名规范
+
+序列帧图片命名格式：`car_XXX.jpg`
+
+- 前缀：`car_`
+- 编号：三位数字，从 001 开始
+- 扩展名：`.jpg`
+
+示例：`car_001.jpg`, `car_002.jpg`, ..., `car_336.jpg`
+
+## 技术栈
+
+- **前端**：原生 HTML5 + CSS3 + JavaScript
+- **Canvas**：2D 渲染引擎
+- **触摸交互**：Touch Events API
+- **视频处理**：Python OpenCV
+
+## 浏览器兼容性
+
+- Chrome for Android ✅
+- Safari iOS ✅
+- Firefox Mobile ✅
+- 微信内置浏览器 ✅
+
+## 性能优化建议
+
+1. 图片压缩：建议每张图片 50-100KB
+2. 帧数选择：36-72 帧适合网络传输，180-360 帧适合本地展示
+3. 使用 WebP 格式可进一步减小体积
+
+## 开发者
+
+如需修改或扩展功能，请参考源码注释。
+
+---
+
+**注意**：本应用需要通过 HTTP 服务器访问，直接打开 HTML 文件可能因浏览器安全限制导致图片加载失败。
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..3159a86
--- /dev/null
+++ b/app.js
@@ -0,0 +1,515 @@
+/**
+ * 汽车360°全景展示应用
+ * 支持触摸滑动、自动旋转、惯性效果
+ */
+
+class Car360Viewer {
+    constructor() {
+        // 配置
+        this.config = {
+            totalFrames: 336,          // 总帧数
+            framesPerSwipe: 1,         // 每像素滑动切换的帧数
+            inertiaFriction: 0.95,     // 惯性摩擦系数
+            minVelocity: 0.1,          // 最小速度阈值
+            autoRotateSpeed: 80,       // 自动旋转速度（ms/帧）
+            autoRotateDelay: 3000,     // 停止操作后自动旋转延迟（ms）
+            imagePath: './images/',    // 图片路径
+            imagePrefix: 'car_',       // 图片前缀
+            imageExt: '.jpg'           // 图片扩展名
+        };
+
+        // 状态
+        this.state = {
+            currentFrame: 0,
+            isDragging: false,
+            startX: 0,
+            lastX: 0,
+            velocity: 0,
+            images: [],
+            loaded: false,
+            animationId: null,
+            autoRotateTimer: null,
+            autoRotateInterval: null
+        };
+
+        // DOM元素
+        this.elements = {
+            canvas: document.getElementById('carCanvas'),
+            loadingScreen: document.getElementById('loadingScreen'),
+            loadingProgress: document.getElementById('loadingProgress'),
+            loadingText: document.getElementById('loadingText')
+        };
+
+        this.ctx = this.elements.canvas.getContext('2d');
+        
+        this.init();
+    }
+
+    init() {
+        this.setupCanvas();
+        this.bindEvents();
+        this.loadImages();
+    }
+
+    setupCanvas() {
+        const rect = this.elements.canvas.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        
+        this.elements.canvas.width = rect.width * dpr;
+        this.elements.canvas.height = rect.height * dpr;
+        this.ctx.scale(dpr, dpr);
+        
+        // 监听窗口大小变化
+        window.addEventListener('resize', () => {
+            const newRect = this.elements.canvas.getBoundingClientRect();
+            this.elements.canvas.width = newRect.width * dpr;
+            this.elements.canvas.height = newRect.height * dpr;
+            this.ctx.scale(dpr, dpr);
+            this.renderFrame(this.state.currentFrame);
+        });
+    }
+
+    bindEvents() {
+        const viewer = this.elements.canvas;
+        
+        // 触摸事件
+        viewer.addEventListener('touchstart', this.handleStart.bind(this), { passive: false });
+        viewer.addEventListener('touchmove', this.handleMove.bind(this), { passive: false });
+        viewer.addEventListener('touchend', this.handleEnd.bind(this), { passive: false });
+    }
+
+    handleStart(e) {
+        e.preventDefault();
+        this.stopInertia();
+        this.stopAutoRotate();
+        
+        const touch = e.touches[0];
+        this.state.isDragging = true;
+        this.state.startX = touch.clientX;
+        this.state.lastX = touch.clientX;
+        this.state.velocity = 0;
+    }
+
+    handleMove(e) {
+        if (!this.state.isDragging) return;
+        e.preventDefault();
+        
+        const touch = e.touches[0];
+        const deltaX = touch.clientX - this.state.lastX;
+        
+        // 计算速度
+        this.state.velocity = deltaX;
+        
+        // 根据滑动距离更新帧
+        const frameDelta = Math.round(deltaX / 5);
+        if (frameDelta !== 0) {
+            this.state.lastX = touch.clientX;
+            this.updateFrame(frameDelta);
+        }
+    }
+
+    handleEnd(e) {
+        if (!this.state.isDragging) return;
+        this.state.isDragging = false;
+        
+        // 启动惯性动画
+        if (Math.abs(this.state.velocity) > this.config.minVelocity) {
+            this.startInertia();
+        } else {
+            // 没有惯性，延迟启动自动旋转
+            this.scheduleAutoRotate();
+        }
+    }
+
+    startInertia() {
+        const animate = () => {
+            this.state.velocity *= this.config.inertiaFriction;
+            
+            if (Math.abs(this.state.velocity) > this.config.minVelocity) {
+                const frameDelta = Math.round(this.state.velocity / 5);
+                if (frameDelta !== 0) {
+                    this.updateFrame(frameDelta);
+                }
+                this.state.animationId = requestAnimationFrame(animate);
+            } else {
+                // 惯性结束，启动自动旋转
+                this.scheduleAutoRotate();
+            }
+        };
+        
+        this.state.animationId = requestAnimationFrame(animate);
+    }
+
+    stopInertia() {
+        if (this.state.animationId) {
+            cancelAnimationFrame(this.state.animationId);
+            this.state.animationId = null;
+        }
+        this.state.velocity = 0;
+    }
+
+    updateFrame(delta) {
+        let newFrame = this.state.currentFrame + delta;
+        
+        // 循环处理
+        while (newFrame < 0) newFrame += this.config.totalFrames;
+        newFrame = newFrame % this.config.totalFrames;
+        
+        this.state.currentFrame = newFrame;
+        this.renderFrame(newFrame);
+    }
+
+    async loadImages() {
+        // 首先尝试加载文件系统图片
+        try {
+            const images = [];
+            let loadedCount = 0;
+            
+            this.updateLoadingProgress(0, '正在加载图片资源...');
+            
+            for (let i = 0; i < this.config.totalFrames; i++) {
+                const img = new Image();
+                const frameNum = String(i + 1).padStart(3, '0');
+                img.src = `${this.config.imagePath}${this.config.imagePrefix}${frameNum}${this.config.imageExt}`;
+                
+                await new Promise((resolve, reject) => {
+                    img.onload = () => {
+                        loadedCount++;
+                        const progress = Math.round((loadedCount / this.config.totalFrames) * 100);
+                        this.updateLoadingProgress(progress, `加载中 ${loadedCount}/${this.config.totalFrames}`);
+                        resolve(img);
+                    };
+                    img.onerror = () => reject(new Error(`Failed to load frame ${i}`));
+                });
+                
+                images.push(img);
+            }
+            
+            this.updateLoadingProgress(100, '加载完成');
+            
+            this.state.images = images;
+            this.state.loaded = true;
+            
+            setTimeout(() => {
+                this.hideLoading();
+                this.renderFrame(0);
+            }, 500);
+            
+            console.log('Loaded', images.length, 'frames from files');
+            return;
+            
+        } catch (error) {
+            console.log('File load failed:', error.message);
+        }
+
+        // 尝试从 IndexedDB 加载
+        this.updateLoadingProgress(0, '正在从缓存加载...');
+        const indexedDBFrames = await this.loadFromIndexedDB();
+        if (indexedDBFrames && indexedDBFrames.length > 0) {
+            this.state.images = indexedDBFrames;
+            this.state.loaded = true;
+            this.config.totalFrames = indexedDBFrames.length;
+            this.updateLoadingProgress(100, '加载完成');
+            setTimeout(() => {
+                this.hideLoading();
+                this.renderFrame(0);
+            }, 500);
+            return;
+        }
+
+        // 演示模式
+        console.log('Using demo mode');
+        this.updateLoadingProgress(100, '进入演示模式');
+        setTimeout(() => {
+            this.hideLoading();
+            this.startDemoMode();
+        }, 500);
+    }
+
+    updateLoadingProgress(percent, text) {
+        if (this.elements.loadingProgress) {
+            this.elements.loadingProgress.style.width = `${percent}%`;
+        }
+        if (this.elements.loadingText) {
+            this.elements.loadingText.textContent = text;
+        }
+    }
+
+    hideLoading() {
+        if (this.elements.loadingScreen) {
+            this.elements.loadingScreen.classList.add('hidden');
+        }
+        // 加载完成后启动自动旋转
+        this.startAutoRotate();
+    }
+
+    scheduleAutoRotate() {
+        // 清除之前的定时器
+        if (this.state.autoRotateTimer) {
+            clearTimeout(this.state.autoRotateTimer);
+        }
+        // 延迟启动自动旋转
+        this.state.autoRotateTimer = setTimeout(() => {
+            this.startAutoRotate();
+        }, this.config.autoRotateDelay);
+    }
+
+    startAutoRotate() {
+        // 清除之前的自动旋转
+        this.stopAutoRotate();
+        
+        // 启动新的自动旋转
+        this.state.autoRotateInterval = setInterval(() => {
+            this.updateFrame(1);
+        }, this.config.autoRotateSpeed);
+    }
+
+    stopAutoRotate() {
+        if (this.state.autoRotateTimer) {
+            clearTimeout(this.state.autoRotateTimer);
+            this.state.autoRotateTimer = null;
+        }
+        if (this.state.autoRotateInterval) {
+            clearInterval(this.state.autoRotateInterval);
+            this.state.autoRotateInterval = null;
+        }
+    }
+
+    loadFromIndexedDB() {
+        return new Promise((resolve) => {
+            const request = indexedDB.open('Car360DB', 1);
+            
+            request.onerror = () => {
+                console.log('IndexedDB error');
+                resolve(null);
+            };
+            
+            request.onupgradeneeded = (e) => {
+                const db = e.target.result;
+                if (!db.objectStoreNames.contains('frames')) {
+                    db.createObjectStore('frames', { keyPath: 'id' });
+                }
+            };
+            
+            request.onsuccess = async () => {
+                const db = request.result;
+                
+                try {
+                    if (!db.objectStoreNames.contains('frames')) {
+                        db.close();
+                        resolve(null);
+                        return;
+                    }
+                    
+                    const tx = db.transaction('frames', 'readonly');
+                    const store = tx.objectStore('frames');
+                    const getRequest = store.get('frames');
+                    
+                    getRequest.onsuccess = async () => {
+                        if (getRequest.result && getRequest.result.data && getRequest.result.data.length > 0) {
+                            console.log('Loading', getRequest.result.data.length, 'frames from IndexedDB');
+                            const images = getRequest.result.data.map(dataUrl => {
+                                const img = new Image();
+                                img.src = dataUrl;
+                                return img;
+                            });
+                            
+                            await Promise.all(images.map(img => 
+                                new Promise(res => { 
+                                    img.onload = () => res(); 
+                                    img.onerror = () => res(); 
+                                })
+                            ));
+                            
+                            db.close();
+                            resolve(images);
+                        } else {
+                            console.log('No frames data in IndexedDB');
+                            db.close();
+                            resolve(null);
+                        }
+                    };
+                    
+                    getRequest.onerror = () => {
+                        console.log('Failed to get frames from IndexedDB');
+                        db.close();
+                        resolve(null);
+                    };
+                } catch (e) {
+                    console.log('IndexedDB exception:', e);
+                    db.close();
+                    resolve(null);
+                }
+            };
+        });
+    }
+
+    startDemoMode() {
+        // 演示模式：生成占位图形
+        this.state.loaded = true;
+        this.renderFrame(0);
+    }
+
+    renderFrame(frameIndex) {
+        const canvas = this.elements.canvas;
+        const ctx = this.ctx;
+        const rect = canvas.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        
+        // 清空画布
+        ctx.clearRect(0, 0, width, height);
+        
+        const img = this.state.images[frameIndex];
+        if (img && img.complete && img.naturalWidth > 0) {
+            // 绘制真实图片
+            const scale = Math.max(width / img.naturalWidth, height / img.naturalHeight);
+            const x = (width - img.naturalWidth * scale) / 2;
+            const y = (height - img.naturalHeight * scale) / 2;
+            
+            ctx.drawImage(img, x, y, img.naturalWidth * scale, img.naturalHeight * scale);
+        } else {
+            // 演示模式：绘制占位图形
+            this.drawDemoFrame(ctx, width, height, frameIndex);
+        }
+    }
+
+    drawDemoFrame(ctx, width, height, frameIndex) {
+        const angle = (frameIndex / this.config.totalFrames) * Math.PI * 2;
+        
+        // 背景渐变
+        const gradient = ctx.createLinearGradient(0, 0, width, height);
+        gradient.addColorStop(0, '#1a1a2e');
+        gradient.addColorStop(1, '#16213e');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+        
+        // 网格效果
+        ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)';
+        ctx.lineWidth = 1;
+        const gridSize = 30;
+        
+        for (let x = 0; x < width; x += gridSize) {
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, height);
+            ctx.stroke();
+        }
+        
+        for (let y = 0; y < height; y += gridSize) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(width, y);
+            ctx.stroke();
+        }
+        
+        // 绘制示意汽车（简化的3D效果）
+        const centerX = width / 2;
+        const centerY = height / 2;
+        
+        // 车身主体
+        ctx.save();
+        ctx.translate(centerX, centerY);
+        
+        // 阴影
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
+        ctx.beginPath();
+        ctx.ellipse(0, height * 0.25, width * 0.35, height * 0.08, 0, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // 车身渐变
+        const bodyGradient = ctx.createLinearGradient(0, -height * 0.3, 0, height * 0.2);
+        bodyGradient.addColorStop(0, '#4a4a5a');
+        bodyGradient.addColorStop(0.5, '#2a2a3a');
+        bodyGradient.addColorStop(1, '#1a1a2a');
+        
+        // 车身形状（根据角度变化）
+        const perspective = Math.cos(angle);
+        const bodyWidth = width * 0.35 * Math.abs(perspective) + width * 0.15;
+        const bodyHeight = height * 0.18;
+        
+        ctx.fillStyle = bodyGradient;
+        ctx.beginPath();
+        ctx.roundRect(-bodyWidth, -bodyHeight, bodyWidth * 2, bodyHeight * 2, 10);
+        ctx.fill();
+        
+        // 车顶
+        const roofGradient = ctx.createLinearGradient(0, -height * 0.35, 0, -height * 0.15);
+        roofGradient.addColorStop(0, '#5a5a6a');
+        roofGradient.addColorStop(1, '#3a3a4a');
+        
+        ctx.fillStyle = roofGradient;
+        ctx.beginPath();
+        ctx.roundRect(-bodyWidth * 0.7, -height * 0.35, bodyWidth * 1.4, height * 0.2, [15, 15, 5, 5]);
+        ctx.fill();
+        
+        // 车窗
+        ctx.fillStyle = 'rgba(0, 212, 255, 0.3)';
+        ctx.beginPath();
+        const windowWidth = bodyWidth * 0.5;
+        ctx.roundRect(-windowWidth, -height * 0.32, windowWidth * 2, height * 0.12, 5);
+        ctx.fill();
+        
+        // 车灯光效
+        const lightIntensity = 0.5 + Math.sin(angle * 2) * 0.3;
+        
+        // 左车灯
+        const leftLightGradient = ctx.createRadialGradient(
+            -bodyWidth * 0.8, 0, 0,
+            -bodyWidth * 0.8, 0, 30
+        );
+        leftLightGradient.addColorStop(0, `rgba(255, 220, 100, ${lightIntensity})`);
+        leftLightGradient.addColorStop(1, 'rgba(255, 220, 100, 0)');
+        ctx.fillStyle = leftLightGradient;
+        ctx.beginPath();
+        ctx.arc(-bodyWidth * 0.8, 0, 30, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // 右车灯
+        const rightLightGradient = ctx.createRadialGradient(
+            bodyWidth * 0.8, 0, 0,
+            bodyWidth * 0.8, 0, 30
+        );
+        rightLightGradient.addColorStop(0, `rgba(255, 100, 100, ${lightIntensity})`);
+        rightLightGradient.addColorStop(1, 'rgba(255, 100, 100, 0)');
+        ctx.fillStyle = rightLightGradient;
+        ctx.beginPath();
+        ctx.arc(bodyWidth * 0.8, 0, 30, 0, Math.PI * 2);
+        ctx.fill();
+        
+        // 车轮
+        ctx.fillStyle = '#1a1a2a';
+        ctx.strokeStyle = '#3a3a4a';
+        ctx.lineWidth = 3;
+        
+        // 左轮
+        ctx.beginPath();
+        ctx.ellipse(-bodyWidth * 0.6, bodyHeight, 25, 20, 0, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        
+        // 右轮
+        ctx.beginPath();
+        ctx.ellipse(bodyWidth * 0.6, bodyHeight, 25, 20, 0, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        
+        ctx.restore();
+        
+        // 帧号显示
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+        ctx.font = '14px monospace';
+        ctx.textAlign = 'center';
+        ctx.fillText(`帧 ${frameIndex + 1}/${this.config.totalFrames}`, centerX, height - 20);
+        
+        // 演示模式提示
+        ctx.fillStyle = 'rgba(0, 212, 255, 0.6)';
+        ctx.font = '12px sans-serif';
+        ctx.fillText('演示模式 - 请添加实际序列帧图片到 images 文件夹', centerX, 30);
+    }
+}
+
+// 初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+    window.carViewer = new Car360Viewer();
+});
diff --git a/extract.html b/extract.html
new file mode 100644
index 0000000..9608b7d
--- /dev/null
+++ b/extract.html
@@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>视频序列帧提取工具</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            padding: 20px;
+            color: #fff;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            background: linear-gradient(135deg, #00d4ff, #ff6b35);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            padding: 20px;
+            margin-bottom: 20px;
+            backdrop-filter: blur(10px);
+        }
+
+        .video-container {
+            position: relative;
+            width: 100%;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            margin-bottom: 15px;
+        }
+
+        video {
+            width: 100%;
+            display: block;
+        }
+
+        .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            margin-bottom: 15px;
+        }
+
+        .control-group {
+            flex: 1;
+            min-width: 150px;
+        }
+
+        label {
+            display: block;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
+            margin-bottom: 5px;
+        }
+
+        input[type="number"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            background: rgba(0, 0, 0, 0.3);
+            color: #fff;
+            font-size: 14px;
+        }
+
+        input[type="number"]:focus {
+            outline: none;
+            border-color: #00d4ff;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #00d4ff, #0099cc);
+            color: #fff;
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            color: #fff;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .progress-container {
+            margin: 20px 0;
+        }
+
+        .progress-bar {
+            height: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #00d4ff, #ff6b35);
+            width: 0%;
+            transition: width 0.3s;
+        }
+
+        .progress-text {
+            text-align: center;
+            margin-top: 10px;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        .preview-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+            gap: 10px;
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+        }
+
+        .preview-item {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .preview-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .preview-item .frame-num {
+            position: absolute;
+            bottom: 2px;
+            right: 2px;
+            background: rgba(0, 0, 0, 0.7);
+            color: #fff;
+            font-size: 10px;
+            padding: 1px 4px;
+            border-radius: 2px;
+        }
+
+        .actions {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+            margin-top: 20px;
+        }
+
+        .status {
+            text-align: center;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+        }
+
+        .status.success {
+            background: rgba(0, 200, 100, 0.2);
+            color: #00c864;
+        }
+
+        .status.error {
+            background: rgba(255, 100, 100, 0.2);
+            color: #ff6464;
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>视频序列帧提取工具</h1>
+
+        <div class="card">
+            <div class="video-container">
+                <video id="video" src="video.mp4" controls></video>
+            </div>
+
+            <div class="controls">
+                <div class="control-group">
+                    <label>提取帧数</label>
+                    <input type="number" id="frameCount" value="36" min="1" max="360">
+                </div>
+                <div class="control-group">
+                    <label>输出宽度 (px)</label>
+                    <input type="number" id="outputWidth" value="800" min="100" max="2000">
+                </div>
+                <div class="control-group">
+                    <label>输出质量 (1-100)</label>
+                    <input type="number" id="quality" value="90" min="1" max="100">
+                </div>
+            </div>
+
+            <div class="actions">
+                <button class="btn btn-primary" id="extractBtn">开始提取</button>
+            </div>
+        </div>
+
+        <div class="progress-container hidden" id="progressContainer">
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-text" id="progressText">准备中...</div>
+        </div>
+
+        <div id="statusBox" class="status hidden"></div>
+
+        <div class="card hidden" id="previewCard">
+            <h3 style="margin-bottom: 15px;">提取预览</h3>
+            <div class="preview-grid" id="previewGrid"></div>
+            <div class="actions">
+                <button class="btn btn-secondary" id="downloadAllBtn">打包下载 (ZIP)</button>
+                <button class="btn btn-primary" id="useFramesBtn">应用到展示页</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script>
+        class FrameExtractor {
+            constructor() {
+                this.video = document.getElementById('video');
+                this.canvas = document.createElement('canvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.frames = [];
+
+                this.bindEvents();
+            }
+
+            bindEvents() {
+                document.getElementById('extractBtn').addEventListener('click', () => this.extract());
+                document.getElementById('downloadAllBtn').addEventListener('click', () => this.downloadAll());
+                document.getElementById('useFramesBtn').addEventListener('click', () => this.useFrames());
+            }
+
+            async extract() {
+                const frameCount = parseInt(document.getElementById('frameCount').value) || 36;
+                const outputWidth = parseInt(document.getElementById('outputWidth').value) || 800;
+                const quality = (parseInt(document.getElementById('quality').value) || 90) / 100;
+
+                this.frames = [];
+                this.video.currentTime = 0;
+
+                const duration = this.video.duration;
+                const interval = duration / frameCount;
+
+                // 设置 canvas 尺寸
+                const aspectRatio = this.video.videoHeight / this.video.videoWidth;
+                this.canvas.width = outputWidth;
+                this.canvas.height = Math.round(outputWidth * aspectRatio);
+
+                // 显示进度
+                document.getElementById('progressContainer').classList.remove('hidden');
+                document.getElementById('previewCard').classList.add('hidden');
+                this.updateProgress(0, '准备提取...');
+
+                try {
+                    for (let i = 0; i < frameCount; i++) {
+                        const time = i * interval;
+                        await this.seekTo(time);
+                        const frame = await this.captureFrame(i, quality);
+                        this.frames.push(frame);
+
+                        this.updateProgress(
+                            ((i + 1) / frameCount) * 100,
+                            `提取中... ${i + 1}/${frameCount}`
+                        );
+                    }
+
+                    this.showStatus('success', `成功提取 ${frameCount} 帧！`);
+                    this.showPreview();
+                } catch (error) {
+                    this.showStatus('error', `提取失败: ${error.message}`);
+                }
+            }
+
+            seekTo(time) {
+                return new Promise((resolve) => {
+                    this.video.currentTime = time;
+                    this.video.onseeked = () => resolve();
+                });
+            }
+
+            captureFrame(index, quality) {
+                this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+                const dataUrl = this.canvas.toDataURL('image/jpeg', quality);
+                return { index, dataUrl };
+            }
+
+            updateProgress(percent, text) {
+                document.getElementById('progressFill').style.width = `${percent}%`;
+                document.getElementById('progressText').textContent = text;
+            }
+
+            showStatus(type, message) {
+                const box = document.getElementById('statusBox');
+                box.className = `status ${type}`;
+                box.textContent = message;
+                box.classList.remove('hidden');
+            }
+
+            showPreview() {
+                const grid = document.getElementById('previewGrid');
+                grid.innerHTML = '';
+
+                this.frames.forEach((frame, i) => {
+                    const item = document.createElement('div');
+                    item.className = 'preview-item';
+                    item.innerHTML = `
+                        <img src="${frame.dataUrl}" alt="Frame ${i + 1}">
+                        <span class="frame-num">${i + 1}</span>
+                    `;
+                    grid.appendChild(item);
+                });
+
+                document.getElementById('previewCard').classList.remove('hidden');
+                document.getElementById('progressContainer').classList.add('hidden');
+            }
+
+            async downloadAll() {
+                if (this.frames.length === 0) return;
+
+                this.updateProgress(0, '打包中...');
+                document.getElementById('progressContainer').classList.remove('hidden');
+
+                const zip = new JSZip();
+                const folder = zip.folder('images');
+
+                this.frames.forEach((frame, i) => {
+                    const frameNum = String(i + 1).padStart(3, '0');
+                    const base64 = frame.dataUrl.split(',')[1];
+                    folder.file(`car_${frameNum}.jpg`, base64, { base64: true });
+
+                    this.updateProgress(
+                        ((i + 1) / this.frames.length) * 50,
+                        `打包中... ${i + 1}/${this.frames.length}`
+                    );
+                });
+
+                this.updateProgress(50, '生成 ZIP 文件...');
+
+                const blob = await zip.generateAsync({ type: 'blob' }, (metadata) => {
+                    this.updateProgress(50 + metadata.percent / 2, '生成 ZIP 文件...');
+                });
+
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = 'car_frames.zip';
+                link.click();
+
+                this.updateProgress(100, '下载完成！');
+                setTimeout(() => {
+                    document.getElementById('progressContainer').classList.add('hidden');
+                }, 2000);
+            }
+
+            async useFrames() {
+                if (this.frames.length === 0) return;
+                
+                this.showStatus('success', '正在保存数据...');
+                
+                const framesData = this.frames.map(f => f.dataUrl);
+                
+                // 直接使用 IndexedDB 存储
+                try {
+                    await this.saveToIndexedDB(framesData);
+                    this.showStatus('success', '已保存！正在跳转到展示页面...');
+                    
+                    setTimeout(() => {
+                        window.location.href = 'index.html';
+                    }, 500);
+                } catch (e) {
+                    console.error('IndexedDB save failed:', e);
+                    this.showStatus('error', '保存失败，请尝试下载ZIP文件后手动解压到images文件夹');
+                }
+            }
+
+            saveToIndexedDB(frames) {
+                return new Promise((resolve, reject) => {
+                    const request = indexedDB.open('Car360DB', 1);
+                    
+                    request.onerror = () => reject(request.error);
+                    
+                    request.onupgradeneeded = (e) => {
+                        const db = e.target.result;
+                        if (!db.objectStoreNames.contains('frames')) {
+                            db.createObjectStore('frames', { keyPath: 'id' });
+                        }
+                    };
+                    
+                    request.onsuccess = () => {
+                        const db = request.result;
+                        const tx = db.transaction('frames', 'readwrite');
+                        const store = tx.objectStore('frames');
+                        store.put({ id: 'frames', data: frames });
+                        
+                        tx.oncomplete = () => {
+                            console.log('IndexedDB save complete');
+                            resolve();
+                        };
+                        tx.onerror = () => reject(tx.error);
+                    };
+                });
+            }
+        }
+
+        // 初始化
+        document.addEventListener('DOMContentLoaded', () => {
+            new FrameExtractor();
+        });
+    </script>
+</body>
+</html>
diff --git a/extract_frames.py b/extract_frames.py
new file mode 100644
index 0000000..adb7772
--- /dev/null
+++ b/extract_frames.py
@@ -0,0 +1,37 @@
+import cv2
+import os
+
+# 配置
+video_path = r'J:\git\3D-pano\video.mp4'
+output_dir = r'J:\git\3D-pano\images'
+total_frames = 336
+
+# 确保输出目录存在
+os.makedirs(output_dir, exist_ok=True)
+
+# 打开视频
+cap = cv2.VideoCapture(video_path)
+if not cap.isOpened():
+    print('Error: Cannot open video')
+    exit(1)
+
+video_frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+print(f'Video total frames: {video_frame_count}')
+
+# 计算帧间隔
+interval = video_frame_count // total_frames
+
+for i in range(total_frames):
+    frame_idx = i * interval
+    cap.set(cv2.CAP_PROP_POS_FRAMES, frame_idx)
+    ret, frame = cap.read()
+    
+    if ret:
+        output_path = os.path.join(output_dir, f'car_{str(i+1).zfill(3)}.jpg')
+        cv2.imwrite(output_path, frame, [cv2.IMWRITE_JPEG_QUALITY, 90])
+        print(f'Saved: {output_path}')
+    else:
+        print(f'Failed to read frame {frame_idx}')
+
+cap.release()
+print(f'Done! Extracted {total_frames} frames to {output_dir}')
diff --git a/images/car_001.jpg b/images/car_001.jpg
new file mode 100644
index 0000000..d9cb86c
Binary files /dev/null and b/images/car_001.jpg differ
diff --git a/images/car_002.jpg b/images/car_002.jpg
new file mode 100644
index 0000000..bc66a7d
Binary files /dev/null and b/images/car_002.jpg differ
diff --git a/images/car_003.jpg b/images/car_003.jpg
new file mode 100644
index 0000000..b3d0478
Binary files /dev/null and b/images/car_003.jpg differ
diff --git a/images/car_004.jpg b/images/car_004.jpg
new file mode 100644
index 0000000..50f476d
Binary files /dev/null and b/images/car_004.jpg differ
diff --git a/images/car_005.jpg b/images/car_005.jpg
new file mode 100644
index 0000000..40afb58
Binary files /dev/null and b/images/car_005.jpg differ
diff --git a/images/car_006.jpg b/images/car_006.jpg
new file mode 100644
index 0000000..0e63bb2
Binary files /dev/null and b/images/car_006.jpg differ
diff --git a/images/car_007.jpg b/images/car_007.jpg
new file mode 100644
index 0000000..7df08a5
Binary files /dev/null and b/images/car_007.jpg differ
diff --git a/images/car_008.jpg b/images/car_008.jpg
new file mode 100644
index 0000000..171c787
Binary files /dev/null and b/images/car_008.jpg differ
diff --git a/images/car_009.jpg b/images/car_009.jpg
new file mode 100644
index 0000000..6f02c13
Binary files /dev/null and b/images/car_009.jpg differ
diff --git a/images/car_010.jpg b/images/car_010.jpg
new file mode 100644
index 0000000..59a1247
Binary files /dev/null and b/images/car_010.jpg differ
diff --git a/images/car_011.jpg b/images/car_011.jpg
new file mode 100644
index 0000000..a18dd8e
Binary files /dev/null and b/images/car_011.jpg differ
diff --git a/images/car_012.jpg b/images/car_012.jpg
new file mode 100644
index 0000000..2713a20
Binary files /dev/null and b/images/car_012.jpg differ
diff --git a/images/car_013.jpg b/images/car_013.jpg
new file mode 100644
index 0000000..77efcc1
Binary files /dev/null and b/images/car_013.jpg differ
diff --git a/images/car_014.jpg b/images/car_014.jpg
new file mode 100644
index 0000000..749972c
Binary files /dev/null and b/images/car_014.jpg differ
diff --git a/images/car_015.jpg b/images/car_015.jpg
new file mode 100644
index 0000000..ef6dd6f
Binary files /dev/null and b/images/car_015.jpg differ
diff --git a/images/car_016.jpg b/images/car_016.jpg
new file mode 100644
index 0000000..936af48
Binary files /dev/null and b/images/car_016.jpg differ
diff --git a/images/car_017.jpg b/images/car_017.jpg
new file mode 100644
index 0000000..e40f29c
Binary files /dev/null and b/images/car_017.jpg differ
diff --git a/images/car_018.jpg b/images/car_018.jpg
new file mode 100644
index 0000000..00c4688
Binary files /dev/null and b/images/car_018.jpg differ
diff --git a/images/car_019.jpg b/images/car_019.jpg
new file mode 100644
index 0000000..b619a14
Binary files /dev/null and b/images/car_019.jpg differ
diff --git a/images/car_020.jpg b/images/car_020.jpg
new file mode 100644
index 0000000..ebd7114
Binary files /dev/null and b/images/car_020.jpg differ
diff --git a/images/car_021.jpg b/images/car_021.jpg
new file mode 100644
index 0000000..447e5c6
Binary files /dev/null and b/images/car_021.jpg differ
diff --git a/images/car_022.jpg b/images/car_022.jpg
new file mode 100644
index 0000000..b94df2b
Binary files /dev/null and b/images/car_022.jpg differ
diff --git a/images/car_023.jpg b/images/car_023.jpg
new file mode 100644
index 0000000..cd49ed4
Binary files /dev/null and b/images/car_023.jpg differ
diff --git a/images/car_024.jpg b/images/car_024.jpg
new file mode 100644
index 0000000..a150482
Binary files /dev/null and b/images/car_024.jpg differ
diff --git a/images/car_025.jpg b/images/car_025.jpg
new file mode 100644
index 0000000..af60544
Binary files /dev/null and b/images/car_025.jpg differ
diff --git a/images/car_026.jpg b/images/car_026.jpg
new file mode 100644
index 0000000..3767d59
Binary files /dev/null and b/images/car_026.jpg differ
diff --git a/images/car_027.jpg b/images/car_027.jpg
new file mode 100644
index 0000000..bbd9740
Binary files /dev/null and b/images/car_027.jpg differ
diff --git a/images/car_028.jpg b/images/car_028.jpg
new file mode 100644
index 0000000..ba7d40a
Binary files /dev/null and b/images/car_028.jpg differ
diff --git a/images/car_029.jpg b/images/car_029.jpg
new file mode 100644
index 0000000..79ee8cd
Binary files /dev/null and b/images/car_029.jpg differ
diff --git a/images/car_030.jpg b/images/car_030.jpg
new file mode 100644
index 0000000..033c22d
Binary files /dev/null and b/images/car_030.jpg differ
diff --git a/images/car_031.jpg b/images/car_031.jpg
new file mode 100644
index 0000000..e2027e0
Binary files /dev/null and b/images/car_031.jpg differ
diff --git a/images/car_032.jpg b/images/car_032.jpg
new file mode 100644
index 0000000..42d622c
Binary files /dev/null and b/images/car_032.jpg differ
diff --git a/images/car_033.jpg b/images/car_033.jpg
new file mode 100644
index 0000000..3bb2b26
Binary files /dev/null and b/images/car_033.jpg differ
diff --git a/images/car_034.jpg b/images/car_034.jpg
new file mode 100644
index 0000000..bc5caa8
Binary files /dev/null and b/images/car_034.jpg differ
diff --git a/images/car_035.jpg b/images/car_035.jpg
new file mode 100644
index 0000000..f1729e1
Binary files /dev/null and b/images/car_035.jpg differ
diff --git a/images/car_036.jpg b/images/car_036.jpg
new file mode 100644
index 0000000..8762293
Binary files /dev/null and b/images/car_036.jpg differ
diff --git a/images/car_037.jpg b/images/car_037.jpg
new file mode 100644
index 0000000..58e4565
Binary files /dev/null and b/images/car_037.jpg differ
diff --git a/images/car_038.jpg b/images/car_038.jpg
new file mode 100644
index 0000000..79c2796
Binary files /dev/null and b/images/car_038.jpg differ
diff --git a/images/car_039.jpg b/images/car_039.jpg
new file mode 100644
index 0000000..1c44dbb
Binary files /dev/null and b/images/car_039.jpg differ
diff --git a/images/car_040.jpg b/images/car_040.jpg
new file mode 100644
index 0000000..11968dd
Binary files /dev/null and b/images/car_040.jpg differ
diff --git a/images/car_041.jpg b/images/car_041.jpg
new file mode 100644
index 0000000..dc08393
Binary files /dev/null and b/images/car_041.jpg differ
diff --git a/images/car_042.jpg b/images/car_042.jpg
new file mode 100644
index 0000000..8df2293
Binary files /dev/null and b/images/car_042.jpg differ
diff --git a/images/car_043.jpg b/images/car_043.jpg
new file mode 100644
index 0000000..22b81ab
Binary files /dev/null and b/images/car_043.jpg differ
diff --git a/images/car_044.jpg b/images/car_044.jpg
new file mode 100644
index 0000000..e822f49
Binary files /dev/null and b/images/car_044.jpg differ
diff --git a/images/car_045.jpg b/images/car_045.jpg
new file mode 100644
index 0000000..b95ba39
Binary files /dev/null and b/images/car_045.jpg differ
diff --git a/images/car_046.jpg b/images/car_046.jpg
new file mode 100644
index 0000000..3f8174c
Binary files /dev/null and b/images/car_046.jpg differ
diff --git a/images/car_047.jpg b/images/car_047.jpg
new file mode 100644
index 0000000..b8bd31e
Binary files /dev/null and b/images/car_047.jpg differ
diff --git a/images/car_048.jpg b/images/car_048.jpg
new file mode 100644
index 0000000..452ca95
Binary files /dev/null and b/images/car_048.jpg differ
diff --git a/images/car_049.jpg b/images/car_049.jpg
new file mode 100644
index 0000000..2f6bedc
Binary files /dev/null and b/images/car_049.jpg differ
diff --git a/images/car_050.jpg b/images/car_050.jpg
new file mode 100644
index 0000000..a388af1
Binary files /dev/null and b/images/car_050.jpg differ
diff --git a/images/car_051.jpg b/images/car_051.jpg
new file mode 100644
index 0000000..f8214b4
Binary files /dev/null and b/images/car_051.jpg differ
diff --git a/images/car_052.jpg b/images/car_052.jpg
new file mode 100644
index 0000000..8bceba1
Binary files /dev/null and b/images/car_052.jpg differ
diff --git a/images/car_053.jpg b/images/car_053.jpg
new file mode 100644
index 0000000..df5eab0
Binary files /dev/null and b/images/car_053.jpg differ
diff --git a/images/car_054.jpg b/images/car_054.jpg
new file mode 100644
index 0000000..c70d815
Binary files /dev/null and b/images/car_054.jpg differ
diff --git a/images/car_055.jpg b/images/car_055.jpg
new file mode 100644
index 0000000..b665318
Binary files /dev/null and b/images/car_055.jpg differ
diff --git a/images/car_056.jpg b/images/car_056.jpg
new file mode 100644
index 0000000..d9b3ae9
Binary files /dev/null and b/images/car_056.jpg differ
diff --git a/images/car_057.jpg b/images/car_057.jpg
new file mode 100644
index 0000000..a3bd40f
Binary files /dev/null and b/images/car_057.jpg differ
diff --git a/images/car_058.jpg b/images/car_058.jpg
new file mode 100644
index 0000000..4559e3d
Binary files /dev/null and b/images/car_058.jpg differ
diff --git a/images/car_059.jpg b/images/car_059.jpg
new file mode 100644
index 0000000..73abb45
Binary files /dev/null and b/images/car_059.jpg differ
diff --git a/images/car_060.jpg b/images/car_060.jpg
new file mode 100644
index 0000000..77cd536
Binary files /dev/null and b/images/car_060.jpg differ
diff --git a/images/car_061.jpg b/images/car_061.jpg
new file mode 100644
index 0000000..735da21
Binary files /dev/null and b/images/car_061.jpg differ
diff --git a/images/car_062.jpg b/images/car_062.jpg
new file mode 100644
index 0000000..a58cff2
Binary files /dev/null and b/images/car_062.jpg differ
diff --git a/images/car_063.jpg b/images/car_063.jpg
new file mode 100644
index 0000000..59333bb
Binary files /dev/null and b/images/car_063.jpg differ
diff --git a/images/car_064.jpg b/images/car_064.jpg
new file mode 100644
index 0000000..d65cb30
Binary files /dev/null and b/images/car_064.jpg differ
diff --git a/images/car_065.jpg b/images/car_065.jpg
new file mode 100644
index 0000000..0bfcc41
Binary files /dev/null and b/images/car_065.jpg differ
diff --git a/images/car_066.jpg b/images/car_066.jpg
new file mode 100644
index 0000000..354a6ee
Binary files /dev/null and b/images/car_066.jpg differ
diff --git a/images/car_067.jpg b/images/car_067.jpg
new file mode 100644
index 0000000..84c4b07
Binary files /dev/null and b/images/car_067.jpg differ
diff --git a/images/car_068.jpg b/images/car_068.jpg
new file mode 100644
index 0000000..4f1b1fa
Binary files /dev/null and b/images/car_068.jpg differ
diff --git a/images/car_069.jpg b/images/car_069.jpg
new file mode 100644
index 0000000..6d4e981
Binary files /dev/null and b/images/car_069.jpg differ
diff --git a/images/car_070.jpg b/images/car_070.jpg
new file mode 100644
index 0000000..97be95e
Binary files /dev/null and b/images/car_070.jpg differ
diff --git a/images/car_071.jpg b/images/car_071.jpg
new file mode 100644
index 0000000..753d5d1
Binary files /dev/null and b/images/car_071.jpg differ
diff --git a/images/car_072.jpg b/images/car_072.jpg
new file mode 100644
index 0000000..bd90062
Binary files /dev/null and b/images/car_072.jpg differ
diff --git a/images/car_073.jpg b/images/car_073.jpg
new file mode 100644
index 0000000..ae9db55
Binary files /dev/null and b/images/car_073.jpg differ
diff --git a/images/car_074.jpg b/images/car_074.jpg
new file mode 100644
index 0000000..79fc09c
Binary files /dev/null and b/images/car_074.jpg differ
diff --git a/images/car_075.jpg b/images/car_075.jpg
new file mode 100644
index 0000000..0a0b018
Binary files /dev/null and b/images/car_075.jpg differ
diff --git a/images/car_076.jpg b/images/car_076.jpg
new file mode 100644
index 0000000..a7b81d5
Binary files /dev/null and b/images/car_076.jpg differ
diff --git a/images/car_077.jpg b/images/car_077.jpg
new file mode 100644
index 0000000..6eb7493
Binary files /dev/null and b/images/car_077.jpg differ
diff --git a/images/car_078.jpg b/images/car_078.jpg
new file mode 100644
index 0000000..9b733b4
Binary files /dev/null and b/images/car_078.jpg differ
diff --git a/images/car_079.jpg b/images/car_079.jpg
new file mode 100644
index 0000000..514a910
Binary files /dev/null and b/images/car_079.jpg differ
diff --git a/images/car_080.jpg b/images/car_080.jpg
new file mode 100644
index 0000000..b5e667b
Binary files /dev/null and b/images/car_080.jpg differ
diff --git a/images/car_081.jpg b/images/car_081.jpg
new file mode 100644
index 0000000..54e8258
Binary files /dev/null and b/images/car_081.jpg differ
diff --git a/images/car_082.jpg b/images/car_082.jpg
new file mode 100644
index 0000000..ea9f353
Binary files /dev/null and b/images/car_082.jpg differ
diff --git a/images/car_083.jpg b/images/car_083.jpg
new file mode 100644
index 0000000..5941f79
Binary files /dev/null and b/images/car_083.jpg differ
diff --git a/images/car_084.jpg b/images/car_084.jpg
new file mode 100644
index 0000000..22a1b10
Binary files /dev/null and b/images/car_084.jpg differ
diff --git a/images/car_085.jpg b/images/car_085.jpg
new file mode 100644
index 0000000..ecc0f10
Binary files /dev/null and b/images/car_085.jpg differ
diff --git a/images/car_086.jpg b/images/car_086.jpg
new file mode 100644
index 0000000..f544ef0
Binary files /dev/null and b/images/car_086.jpg differ
diff --git a/images/car_087.jpg b/images/car_087.jpg
new file mode 100644
index 0000000..94c4f7e
Binary files /dev/null and b/images/car_087.jpg differ
diff --git a/images/car_088.jpg b/images/car_088.jpg
new file mode 100644
index 0000000..459ebf1
Binary files /dev/null and b/images/car_088.jpg differ
diff --git a/images/car_089.jpg b/images/car_089.jpg
new file mode 100644
index 0000000..efb17d9
Binary files /dev/null and b/images/car_089.jpg differ
diff --git a/images/car_090.jpg b/images/car_090.jpg
new file mode 100644
index 0000000..9154c63
Binary files /dev/null and b/images/car_090.jpg differ
diff --git a/images/car_091.jpg b/images/car_091.jpg
new file mode 100644
index 0000000..c570da5
Binary files /dev/null and b/images/car_091.jpg differ
diff --git a/images/car_092.jpg b/images/car_092.jpg
new file mode 100644
index 0000000..603b279
Binary files /dev/null and b/images/car_092.jpg differ
diff --git a/images/car_093.jpg b/images/car_093.jpg
new file mode 100644
index 0000000..0093223
Binary files /dev/null and b/images/car_093.jpg differ
diff --git a/images/car_094.jpg b/images/car_094.jpg
new file mode 100644
index 0000000..6824063
Binary files /dev/null and b/images/car_094.jpg differ
diff --git a/images/car_095.jpg b/images/car_095.jpg
new file mode 100644
index 0000000..24fcc11
Binary files /dev/null and b/images/car_095.jpg differ
diff --git a/images/car_096.jpg b/images/car_096.jpg
new file mode 100644
index 0000000..3afaa33
Binary files /dev/null and b/images/car_096.jpg differ
diff --git a/images/car_097.jpg b/images/car_097.jpg
new file mode 100644
index 0000000..72659c7
Binary files /dev/null and b/images/car_097.jpg differ
diff --git a/images/car_098.jpg b/images/car_098.jpg
new file mode 100644
index 0000000..7aa4447
Binary files /dev/null and b/images/car_098.jpg differ
diff --git a/images/car_099.jpg b/images/car_099.jpg
new file mode 100644
index 0000000..99ae199
Binary files /dev/null and b/images/car_099.jpg differ
diff --git a/images/car_100.jpg b/images/car_100.jpg
new file mode 100644
index 0000000..683af34
Binary files /dev/null and b/images/car_100.jpg differ
diff --git a/images/car_101.jpg b/images/car_101.jpg
new file mode 100644
index 0000000..21dde7c
Binary files /dev/null and b/images/car_101.jpg differ
diff --git a/images/car_102.jpg b/images/car_102.jpg
new file mode 100644
index 0000000..f11a05a
Binary files /dev/null and b/images/car_102.jpg differ
diff --git a/images/car_103.jpg b/images/car_103.jpg
new file mode 100644
index 0000000..ee1c4d4
Binary files /dev/null and b/images/car_103.jpg differ
diff --git a/images/car_104.jpg b/images/car_104.jpg
new file mode 100644
index 0000000..83b4d18
Binary files /dev/null and b/images/car_104.jpg differ
diff --git a/images/car_105.jpg b/images/car_105.jpg
new file mode 100644
index 0000000..f9c1abb
Binary files /dev/null and b/images/car_105.jpg differ
diff --git a/images/car_106.jpg b/images/car_106.jpg
new file mode 100644
index 0000000..8f0c13d
Binary files /dev/null and b/images/car_106.jpg differ
diff --git a/images/car_107.jpg b/images/car_107.jpg
new file mode 100644
index 0000000..ba457cd
Binary files /dev/null and b/images/car_107.jpg differ
diff --git a/images/car_108.jpg b/images/car_108.jpg
new file mode 100644
index 0000000..15aa381
Binary files /dev/null and b/images/car_108.jpg differ
diff --git a/images/car_109.jpg b/images/car_109.jpg
new file mode 100644
index 0000000..0799d34
Binary files /dev/null and b/images/car_109.jpg differ
diff --git a/images/car_110.jpg b/images/car_110.jpg
new file mode 100644
index 0000000..a34f8a0
Binary files /dev/null and b/images/car_110.jpg differ
diff --git a/images/car_111.jpg b/images/car_111.jpg
new file mode 100644
index 0000000..d4bc773
Binary files /dev/null and b/images/car_111.jpg differ
diff --git a/images/car_112.jpg b/images/car_112.jpg
new file mode 100644
index 0000000..6e59769
Binary files /dev/null and b/images/car_112.jpg differ
diff --git a/images/car_113.jpg b/images/car_113.jpg
new file mode 100644
index 0000000..ccd7477
Binary files /dev/null and b/images/car_113.jpg differ
diff --git a/images/car_114.jpg b/images/car_114.jpg
new file mode 100644
index 0000000..b26c419
Binary files /dev/null and b/images/car_114.jpg differ
diff --git a/images/car_115.jpg b/images/car_115.jpg
new file mode 100644
index 0000000..6b28460
Binary files /dev/null and b/images/car_115.jpg differ
diff --git a/images/car_116.jpg b/images/car_116.jpg
new file mode 100644
index 0000000..7d98fe1
Binary files /dev/null and b/images/car_116.jpg differ
diff --git a/images/car_117.jpg b/images/car_117.jpg
new file mode 100644
index 0000000..00abd50
Binary files /dev/null and b/images/car_117.jpg differ
diff --git a/images/car_118.jpg b/images/car_118.jpg
new file mode 100644
index 0000000..a454219
Binary files /dev/null and b/images/car_118.jpg differ
diff --git a/images/car_119.jpg b/images/car_119.jpg
new file mode 100644
index 0000000..3052d0f
Binary files /dev/null and b/images/car_119.jpg differ
diff --git a/images/car_120.jpg b/images/car_120.jpg
new file mode 100644
index 0000000..aa37e75
Binary files /dev/null and b/images/car_120.jpg differ
diff --git a/images/car_121.jpg b/images/car_121.jpg
new file mode 100644
index 0000000..61dd280
Binary files /dev/null and b/images/car_121.jpg differ
diff --git a/images/car_122.jpg b/images/car_122.jpg
new file mode 100644
index 0000000..59e1564
Binary files /dev/null and b/images/car_122.jpg differ
diff --git a/images/car_123.jpg b/images/car_123.jpg
new file mode 100644
index 0000000..d25ba8c
Binary files /dev/null and b/images/car_123.jpg differ
diff --git a/images/car_124.jpg b/images/car_124.jpg
new file mode 100644
index 0000000..f05a2d2
Binary files /dev/null and b/images/car_124.jpg differ
diff --git a/images/car_125.jpg b/images/car_125.jpg
new file mode 100644
index 0000000..7267e17
Binary files /dev/null and b/images/car_125.jpg differ
diff --git a/images/car_126.jpg b/images/car_126.jpg
new file mode 100644
index 0000000..415e399
Binary files /dev/null and b/images/car_126.jpg differ
diff --git a/images/car_127.jpg b/images/car_127.jpg
new file mode 100644
index 0000000..bbf06dc
Binary files /dev/null and b/images/car_127.jpg differ
diff --git a/images/car_128.jpg b/images/car_128.jpg
new file mode 100644
index 0000000..5b37d77
Binary files /dev/null and b/images/car_128.jpg differ
diff --git a/images/car_129.jpg b/images/car_129.jpg
new file mode 100644
index 0000000..90c639f
Binary files /dev/null and b/images/car_129.jpg differ
diff --git a/images/car_130.jpg b/images/car_130.jpg
new file mode 100644
index 0000000..a457967
Binary files /dev/null and b/images/car_130.jpg differ
diff --git a/images/car_131.jpg b/images/car_131.jpg
new file mode 100644
index 0000000..535889a
Binary files /dev/null and b/images/car_131.jpg differ
diff --git a/images/car_132.jpg b/images/car_132.jpg
new file mode 100644
index 0000000..47c832f
Binary files /dev/null and b/images/car_132.jpg differ
diff --git a/images/car_133.jpg b/images/car_133.jpg
new file mode 100644
index 0000000..f6b3f31
Binary files /dev/null and b/images/car_133.jpg differ
diff --git a/images/car_134.jpg b/images/car_134.jpg
new file mode 100644
index 0000000..d1cf24a
Binary files /dev/null and b/images/car_134.jpg differ
diff --git a/images/car_135.jpg b/images/car_135.jpg
new file mode 100644
index 0000000..edb8b1a
Binary files /dev/null and b/images/car_135.jpg differ
diff --git a/images/car_136.jpg b/images/car_136.jpg
new file mode 100644
index 0000000..b61f53c
Binary files /dev/null and b/images/car_136.jpg differ
diff --git a/images/car_137.jpg b/images/car_137.jpg
new file mode 100644
index 0000000..71aa9f8
Binary files /dev/null and b/images/car_137.jpg differ
diff --git a/images/car_138.jpg b/images/car_138.jpg
new file mode 100644
index 0000000..dc43607
Binary files /dev/null and b/images/car_138.jpg differ
diff --git a/images/car_139.jpg b/images/car_139.jpg
new file mode 100644
index 0000000..b150613
Binary files /dev/null and b/images/car_139.jpg differ
diff --git a/images/car_140.jpg b/images/car_140.jpg
new file mode 100644
index 0000000..aacc716
Binary files /dev/null and b/images/car_140.jpg differ
diff --git a/images/car_141.jpg b/images/car_141.jpg
new file mode 100644
index 0000000..491efb1
Binary files /dev/null and b/images/car_141.jpg differ
diff --git a/images/car_142.jpg b/images/car_142.jpg
new file mode 100644
index 0000000..c933f1b
Binary files /dev/null and b/images/car_142.jpg differ
diff --git a/images/car_143.jpg b/images/car_143.jpg
new file mode 100644
index 0000000..8d548f8
Binary files /dev/null and b/images/car_143.jpg differ
diff --git a/images/car_144.jpg b/images/car_144.jpg
new file mode 100644
index 0000000..ccf21e4
Binary files /dev/null and b/images/car_144.jpg differ
diff --git a/images/car_145.jpg b/images/car_145.jpg
new file mode 100644
index 0000000..cc06b48
Binary files /dev/null and b/images/car_145.jpg differ
diff --git a/images/car_146.jpg b/images/car_146.jpg
new file mode 100644
index 0000000..66e4110
Binary files /dev/null and b/images/car_146.jpg differ
diff --git a/images/car_147.jpg b/images/car_147.jpg
new file mode 100644
index 0000000..9e0b4d2
Binary files /dev/null and b/images/car_147.jpg differ
diff --git a/images/car_148.jpg b/images/car_148.jpg
new file mode 100644
index 0000000..873bdb5
Binary files /dev/null and b/images/car_148.jpg differ
diff --git a/images/car_149.jpg b/images/car_149.jpg
new file mode 100644
index 0000000..0fb0ac5
Binary files /dev/null and b/images/car_149.jpg differ
diff --git a/images/car_150.jpg b/images/car_150.jpg
new file mode 100644
index 0000000..6bbc734
Binary files /dev/null and b/images/car_150.jpg differ
diff --git a/images/car_151.jpg b/images/car_151.jpg
new file mode 100644
index 0000000..947d1a4
Binary files /dev/null and b/images/car_151.jpg differ
diff --git a/images/car_152.jpg b/images/car_152.jpg
new file mode 100644
index 0000000..58af7e0
Binary files /dev/null and b/images/car_152.jpg differ
diff --git a/images/car_153.jpg b/images/car_153.jpg
new file mode 100644
index 0000000..899df2e
Binary files /dev/null and b/images/car_153.jpg differ
diff --git a/images/car_154.jpg b/images/car_154.jpg
new file mode 100644
index 0000000..a2e8c65
Binary files /dev/null and b/images/car_154.jpg differ
diff --git a/images/car_155.jpg b/images/car_155.jpg
new file mode 100644
index 0000000..9e61363
Binary files /dev/null and b/images/car_155.jpg differ
diff --git a/images/car_156.jpg b/images/car_156.jpg
new file mode 100644
index 0000000..02158df
Binary files /dev/null and b/images/car_156.jpg differ
diff --git a/images/car_157.jpg b/images/car_157.jpg
new file mode 100644
index 0000000..2d7c6c1
Binary files /dev/null and b/images/car_157.jpg differ
diff --git a/images/car_158.jpg b/images/car_158.jpg
new file mode 100644
index 0000000..498e4ef
Binary files /dev/null and b/images/car_158.jpg differ
diff --git a/images/car_159.jpg b/images/car_159.jpg
new file mode 100644
index 0000000..65eac9b
Binary files /dev/null and b/images/car_159.jpg differ
diff --git a/images/car_160.jpg b/images/car_160.jpg
new file mode 100644
index 0000000..ec25590
Binary files /dev/null and b/images/car_160.jpg differ
diff --git a/images/car_161.jpg b/images/car_161.jpg
new file mode 100644
index 0000000..27c6288
Binary files /dev/null and b/images/car_161.jpg differ
diff --git a/images/car_162.jpg b/images/car_162.jpg
new file mode 100644
index 0000000..09686bb
Binary files /dev/null and b/images/car_162.jpg differ
diff --git a/images/car_163.jpg b/images/car_163.jpg
new file mode 100644
index 0000000..8fbd48d
Binary files /dev/null and b/images/car_163.jpg differ
diff --git a/images/car_164.jpg b/images/car_164.jpg
new file mode 100644
index 0000000..1b8c81f
Binary files /dev/null and b/images/car_164.jpg differ
diff --git a/images/car_165.jpg b/images/car_165.jpg
new file mode 100644
index 0000000..3abfbc7
Binary files /dev/null and b/images/car_165.jpg differ
diff --git a/images/car_166.jpg b/images/car_166.jpg
new file mode 100644
index 0000000..6752786
Binary files /dev/null and b/images/car_166.jpg differ
diff --git a/images/car_167.jpg b/images/car_167.jpg
new file mode 100644
index 0000000..197d184
Binary files /dev/null and b/images/car_167.jpg differ
diff --git a/images/car_168.jpg b/images/car_168.jpg
new file mode 100644
index 0000000..a8043ec
Binary files /dev/null and b/images/car_168.jpg differ
diff --git a/images/car_169.jpg b/images/car_169.jpg
new file mode 100644
index 0000000..c697b76
Binary files /dev/null and b/images/car_169.jpg differ
diff --git a/images/car_170.jpg b/images/car_170.jpg
new file mode 100644
index 0000000..cc4e72d
Binary files /dev/null and b/images/car_170.jpg differ
diff --git a/images/car_171.jpg b/images/car_171.jpg
new file mode 100644
index 0000000..01f7a94
Binary files /dev/null and b/images/car_171.jpg differ
diff --git a/images/car_172.jpg b/images/car_172.jpg
new file mode 100644
index 0000000..2c0382e
Binary files /dev/null and b/images/car_172.jpg differ
diff --git a/images/car_173.jpg b/images/car_173.jpg
new file mode 100644
index 0000000..02fa6ea
Binary files /dev/null and b/images/car_173.jpg differ
diff --git a/images/car_174.jpg b/images/car_174.jpg
new file mode 100644
index 0000000..70710fb
Binary files /dev/null and b/images/car_174.jpg differ
diff --git a/images/car_175.jpg b/images/car_175.jpg
new file mode 100644
index 0000000..203b235
Binary files /dev/null and b/images/car_175.jpg differ
diff --git a/images/car_176.jpg b/images/car_176.jpg
new file mode 100644
index 0000000..a1c587e
Binary files /dev/null and b/images/car_176.jpg differ
diff --git a/images/car_177.jpg b/images/car_177.jpg
new file mode 100644
index 0000000..13a86d5
Binary files /dev/null and b/images/car_177.jpg differ
diff --git a/images/car_178.jpg b/images/car_178.jpg
new file mode 100644
index 0000000..4d86858
Binary files /dev/null and b/images/car_178.jpg differ
diff --git a/images/car_179.jpg b/images/car_179.jpg
new file mode 100644
index 0000000..08ef00e
Binary files /dev/null and b/images/car_179.jpg differ
diff --git a/images/car_180.jpg b/images/car_180.jpg
new file mode 100644
index 0000000..0d1d344
Binary files /dev/null and b/images/car_180.jpg differ
diff --git a/images/car_181.jpg b/images/car_181.jpg
new file mode 100644
index 0000000..c9fde58
Binary files /dev/null and b/images/car_181.jpg differ
diff --git a/images/car_182.jpg b/images/car_182.jpg
new file mode 100644
index 0000000..e35fa31
Binary files /dev/null and b/images/car_182.jpg differ
diff --git a/images/car_183.jpg b/images/car_183.jpg
new file mode 100644
index 0000000..d143c7a
Binary files /dev/null and b/images/car_183.jpg differ
diff --git a/images/car_184.jpg b/images/car_184.jpg
new file mode 100644
index 0000000..5128519
Binary files /dev/null and b/images/car_184.jpg differ
diff --git a/images/car_185.jpg b/images/car_185.jpg
new file mode 100644
index 0000000..aa822e9
Binary files /dev/null and b/images/car_185.jpg differ
diff --git a/images/car_186.jpg b/images/car_186.jpg
new file mode 100644
index 0000000..48ffd3c
Binary files /dev/null and b/images/car_186.jpg differ
diff --git a/images/car_187.jpg b/images/car_187.jpg
new file mode 100644
index 0000000..ad7bb0e
Binary files /dev/null and b/images/car_187.jpg differ
diff --git a/images/car_188.jpg b/images/car_188.jpg
new file mode 100644
index 0000000..69119e9
Binary files /dev/null and b/images/car_188.jpg differ
diff --git a/images/car_189.jpg b/images/car_189.jpg
new file mode 100644
index 0000000..0382d2f
Binary files /dev/null and b/images/car_189.jpg differ
diff --git a/images/car_190.jpg b/images/car_190.jpg
new file mode 100644
index 0000000..d0d0efa
Binary files /dev/null and b/images/car_190.jpg differ
diff --git a/images/car_191.jpg b/images/car_191.jpg
new file mode 100644
index 0000000..bb017d1
Binary files /dev/null and b/images/car_191.jpg differ
diff --git a/images/car_192.jpg b/images/car_192.jpg
new file mode 100644
index 0000000..6b8f470
Binary files /dev/null and b/images/car_192.jpg differ
diff --git a/images/car_193.jpg b/images/car_193.jpg
new file mode 100644
index 0000000..40c9cdf
Binary files /dev/null and b/images/car_193.jpg differ
diff --git a/images/car_194.jpg b/images/car_194.jpg
new file mode 100644
index 0000000..e66025f
Binary files /dev/null and b/images/car_194.jpg differ
diff --git a/images/car_195.jpg b/images/car_195.jpg
new file mode 100644
index 0000000..6c3f0fb
Binary files /dev/null and b/images/car_195.jpg differ
diff --git a/images/car_196.jpg b/images/car_196.jpg
new file mode 100644
index 0000000..2b4bc00
Binary files /dev/null and b/images/car_196.jpg differ
diff --git a/images/car_197.jpg b/images/car_197.jpg
new file mode 100644
index 0000000..9f484d6
Binary files /dev/null and b/images/car_197.jpg differ
diff --git a/images/car_198.jpg b/images/car_198.jpg
new file mode 100644
index 0000000..ae6b17d
Binary files /dev/null and b/images/car_198.jpg differ
diff --git a/images/car_199.jpg b/images/car_199.jpg
new file mode 100644
index 0000000..b1ca7c9
Binary files /dev/null and b/images/car_199.jpg differ
diff --git a/images/car_200.jpg b/images/car_200.jpg
new file mode 100644
index 0000000..091544e
Binary files /dev/null and b/images/car_200.jpg differ
diff --git a/images/car_201.jpg b/images/car_201.jpg
new file mode 100644
index 0000000..8911527
Binary files /dev/null and b/images/car_201.jpg differ
diff --git a/images/car_202.jpg b/images/car_202.jpg
new file mode 100644
index 0000000..fc1b9cb
Binary files /dev/null and b/images/car_202.jpg differ
diff --git a/images/car_203.jpg b/images/car_203.jpg
new file mode 100644
index 0000000..78f1c7b
Binary files /dev/null and b/images/car_203.jpg differ
diff --git a/images/car_204.jpg b/images/car_204.jpg
new file mode 100644
index 0000000..1a60eaf
Binary files /dev/null and b/images/car_204.jpg differ
diff --git a/images/car_205.jpg b/images/car_205.jpg
new file mode 100644
index 0000000..92a72ec
Binary files /dev/null and b/images/car_205.jpg differ
diff --git a/images/car_206.jpg b/images/car_206.jpg
new file mode 100644
index 0000000..7d31a5c
Binary files /dev/null and b/images/car_206.jpg differ
diff --git a/images/car_207.jpg b/images/car_207.jpg
new file mode 100644
index 0000000..766d5a5
Binary files /dev/null and b/images/car_207.jpg differ
diff --git a/images/car_208.jpg b/images/car_208.jpg
new file mode 100644
index 0000000..e600415
Binary files /dev/null and b/images/car_208.jpg differ
diff --git a/images/car_209.jpg b/images/car_209.jpg
new file mode 100644
index 0000000..a3fbff6
Binary files /dev/null and b/images/car_209.jpg differ
diff --git a/images/car_210.jpg b/images/car_210.jpg
new file mode 100644
index 0000000..5504c27
Binary files /dev/null and b/images/car_210.jpg differ
diff --git a/images/car_211.jpg b/images/car_211.jpg
new file mode 100644
index 0000000..5f43904
Binary files /dev/null and b/images/car_211.jpg differ
diff --git a/images/car_212.jpg b/images/car_212.jpg
new file mode 100644
index 0000000..7a89fb7
Binary files /dev/null and b/images/car_212.jpg differ
diff --git a/images/car_213.jpg b/images/car_213.jpg
new file mode 100644
index 0000000..caaa2b0
Binary files /dev/null and b/images/car_213.jpg differ
diff --git a/images/car_214.jpg b/images/car_214.jpg
new file mode 100644
index 0000000..90ed3ff
Binary files /dev/null and b/images/car_214.jpg differ
diff --git a/images/car_215.jpg b/images/car_215.jpg
new file mode 100644
index 0000000..11e2992
Binary files /dev/null and b/images/car_215.jpg differ
diff --git a/images/car_216.jpg b/images/car_216.jpg
new file mode 100644
index 0000000..3576370
Binary files /dev/null and b/images/car_216.jpg differ
diff --git a/images/car_217.jpg b/images/car_217.jpg
new file mode 100644
index 0000000..2360aff
Binary files /dev/null and b/images/car_217.jpg differ
diff --git a/images/car_218.jpg b/images/car_218.jpg
new file mode 100644
index 0000000..f15bf29
Binary files /dev/null and b/images/car_218.jpg differ
diff --git a/images/car_219.jpg b/images/car_219.jpg
new file mode 100644
index 0000000..cf38c6a
Binary files /dev/null and b/images/car_219.jpg differ
diff --git a/images/car_220.jpg b/images/car_220.jpg
new file mode 100644
index 0000000..8c6b102
Binary files /dev/null and b/images/car_220.jpg differ
diff --git a/images/car_221.jpg b/images/car_221.jpg
new file mode 100644
index 0000000..b80930a
Binary files /dev/null and b/images/car_221.jpg differ
diff --git a/images/car_222.jpg b/images/car_222.jpg
new file mode 100644
index 0000000..3ff5a98
Binary files /dev/null and b/images/car_222.jpg differ
diff --git a/images/car_223.jpg b/images/car_223.jpg
new file mode 100644
index 0000000..ab684ff
Binary files /dev/null and b/images/car_223.jpg differ
diff --git a/images/car_224.jpg b/images/car_224.jpg
new file mode 100644
index 0000000..9a66557
Binary files /dev/null and b/images/car_224.jpg differ
diff --git a/images/car_225.jpg b/images/car_225.jpg
new file mode 100644
index 0000000..c9455b5
Binary files /dev/null and b/images/car_225.jpg differ
diff --git a/images/car_226.jpg b/images/car_226.jpg
new file mode 100644
index 0000000..a493cf7
Binary files /dev/null and b/images/car_226.jpg differ
diff --git a/images/car_227.jpg b/images/car_227.jpg
new file mode 100644
index 0000000..98f1e61
Binary files /dev/null and b/images/car_227.jpg differ
diff --git a/images/car_228.jpg b/images/car_228.jpg
new file mode 100644
index 0000000..bd4d3ca
Binary files /dev/null and b/images/car_228.jpg differ
diff --git a/images/car_229.jpg b/images/car_229.jpg
new file mode 100644
index 0000000..6999e0b
Binary files /dev/null and b/images/car_229.jpg differ
diff --git a/images/car_230.jpg b/images/car_230.jpg
new file mode 100644
index 0000000..4cf100c
Binary files /dev/null and b/images/car_230.jpg differ
diff --git a/images/car_231.jpg b/images/car_231.jpg
new file mode 100644
index 0000000..c46a0b3
Binary files /dev/null and b/images/car_231.jpg differ
diff --git a/images/car_232.jpg b/images/car_232.jpg
new file mode 100644
index 0000000..e9829bb
Binary files /dev/null and b/images/car_232.jpg differ
diff --git a/images/car_233.jpg b/images/car_233.jpg
new file mode 100644
index 0000000..5a29ef9
Binary files /dev/null and b/images/car_233.jpg differ
diff --git a/images/car_234.jpg b/images/car_234.jpg
new file mode 100644
index 0000000..19cc7eb
Binary files /dev/null and b/images/car_234.jpg differ
diff --git a/images/car_235.jpg b/images/car_235.jpg
new file mode 100644
index 0000000..d1796a5
Binary files /dev/null and b/images/car_235.jpg differ
diff --git a/images/car_236.jpg b/images/car_236.jpg
new file mode 100644
index 0000000..66a0d1e
Binary files /dev/null and b/images/car_236.jpg differ
diff --git a/images/car_237.jpg b/images/car_237.jpg
new file mode 100644
index 0000000..4b0f1df
Binary files /dev/null and b/images/car_237.jpg differ
diff --git a/images/car_238.jpg b/images/car_238.jpg
new file mode 100644
index 0000000..3096a30
Binary files /dev/null and b/images/car_238.jpg differ
diff --git a/images/car_239.jpg b/images/car_239.jpg
new file mode 100644
index 0000000..aa17740
Binary files /dev/null and b/images/car_239.jpg differ
diff --git a/images/car_240.jpg b/images/car_240.jpg
new file mode 100644
index 0000000..1d0345a
Binary files /dev/null and b/images/car_240.jpg differ
diff --git a/images/car_241.jpg b/images/car_241.jpg
new file mode 100644
index 0000000..ac01b4b
Binary files /dev/null and b/images/car_241.jpg differ
diff --git a/images/car_242.jpg b/images/car_242.jpg
new file mode 100644
index 0000000..9ee9a54
Binary files /dev/null and b/images/car_242.jpg differ
diff --git a/images/car_243.jpg b/images/car_243.jpg
new file mode 100644
index 0000000..247b2be
Binary files /dev/null and b/images/car_243.jpg differ
diff --git a/images/car_244.jpg b/images/car_244.jpg
new file mode 100644
index 0000000..679a32b
Binary files /dev/null and b/images/car_244.jpg differ
diff --git a/images/car_245.jpg b/images/car_245.jpg
new file mode 100644
index 0000000..720b2e7
Binary files /dev/null and b/images/car_245.jpg differ
diff --git a/images/car_246.jpg b/images/car_246.jpg
new file mode 100644
index 0000000..c50c08f
Binary files /dev/null and b/images/car_246.jpg differ
diff --git a/images/car_247.jpg b/images/car_247.jpg
new file mode 100644
index 0000000..59dbfad
Binary files /dev/null and b/images/car_247.jpg differ
diff --git a/images/car_248.jpg b/images/car_248.jpg
new file mode 100644
index 0000000..a530b90
Binary files /dev/null and b/images/car_248.jpg differ
diff --git a/images/car_249.jpg b/images/car_249.jpg
new file mode 100644
index 0000000..85b1a53
Binary files /dev/null and b/images/car_249.jpg differ
diff --git a/images/car_250.jpg b/images/car_250.jpg
new file mode 100644
index 0000000..982e934
Binary files /dev/null and b/images/car_250.jpg differ
diff --git a/images/car_251.jpg b/images/car_251.jpg
new file mode 100644
index 0000000..dd2826c
Binary files /dev/null and b/images/car_251.jpg differ
diff --git a/images/car_252.jpg b/images/car_252.jpg
new file mode 100644
index 0000000..89162b2
Binary files /dev/null and b/images/car_252.jpg differ
diff --git a/images/car_253.jpg b/images/car_253.jpg
new file mode 100644
index 0000000..2f65458
Binary files /dev/null and b/images/car_253.jpg differ
diff --git a/images/car_254.jpg b/images/car_254.jpg
new file mode 100644
index 0000000..f5c0e29
Binary files /dev/null and b/images/car_254.jpg differ
diff --git a/images/car_255.jpg b/images/car_255.jpg
new file mode 100644
index 0000000..e39290b
Binary files /dev/null and b/images/car_255.jpg differ
diff --git a/images/car_256.jpg b/images/car_256.jpg
new file mode 100644
index 0000000..1bef09c
Binary files /dev/null and b/images/car_256.jpg differ
diff --git a/images/car_257.jpg b/images/car_257.jpg
new file mode 100644
index 0000000..617636e
Binary files /dev/null and b/images/car_257.jpg differ
diff --git a/images/car_258.jpg b/images/car_258.jpg
new file mode 100644
index 0000000..1afedcf
Binary files /dev/null and b/images/car_258.jpg differ
diff --git a/images/car_259.jpg b/images/car_259.jpg
new file mode 100644
index 0000000..3d9f823
Binary files /dev/null and b/images/car_259.jpg differ
diff --git a/images/car_260.jpg b/images/car_260.jpg
new file mode 100644
index 0000000..1eb5748
Binary files /dev/null and b/images/car_260.jpg differ
diff --git a/images/car_261.jpg b/images/car_261.jpg
new file mode 100644
index 0000000..2ff3d51
Binary files /dev/null and b/images/car_261.jpg differ
diff --git a/images/car_262.jpg b/images/car_262.jpg
new file mode 100644
index 0000000..bf3e944
Binary files /dev/null and b/images/car_262.jpg differ
diff --git a/images/car_263.jpg b/images/car_263.jpg
new file mode 100644
index 0000000..36ee098
Binary files /dev/null and b/images/car_263.jpg differ
diff --git a/images/car_264.jpg b/images/car_264.jpg
new file mode 100644
index 0000000..2c38668
Binary files /dev/null and b/images/car_264.jpg differ
diff --git a/images/car_265.jpg b/images/car_265.jpg
new file mode 100644
index 0000000..c3b86c9
Binary files /dev/null and b/images/car_265.jpg differ
diff --git a/images/car_266.jpg b/images/car_266.jpg
new file mode 100644
index 0000000..ef0746e
Binary files /dev/null and b/images/car_266.jpg differ
diff --git a/images/car_267.jpg b/images/car_267.jpg
new file mode 100644
index 0000000..c76632f
Binary files /dev/null and b/images/car_267.jpg differ
diff --git a/images/car_268.jpg b/images/car_268.jpg
new file mode 100644
index 0000000..e89a344
Binary files /dev/null and b/images/car_268.jpg differ
diff --git a/images/car_269.jpg b/images/car_269.jpg
new file mode 100644
index 0000000..40b1439
Binary files /dev/null and b/images/car_269.jpg differ
diff --git a/images/car_270.jpg b/images/car_270.jpg
new file mode 100644
index 0000000..516d446
Binary files /dev/null and b/images/car_270.jpg differ
diff --git a/images/car_271.jpg b/images/car_271.jpg
new file mode 100644
index 0000000..ef5d239
Binary files /dev/null and b/images/car_271.jpg differ
diff --git a/images/car_272.jpg b/images/car_272.jpg
new file mode 100644
index 0000000..75f1858
Binary files /dev/null and b/images/car_272.jpg differ
diff --git a/images/car_273.jpg b/images/car_273.jpg
new file mode 100644
index 0000000..8f2860b
Binary files /dev/null and b/images/car_273.jpg differ
diff --git a/images/car_274.jpg b/images/car_274.jpg
new file mode 100644
index 0000000..92bdba7
Binary files /dev/null and b/images/car_274.jpg differ
diff --git a/images/car_275.jpg b/images/car_275.jpg
new file mode 100644
index 0000000..68f5e71
Binary files /dev/null and b/images/car_275.jpg differ
diff --git a/images/car_276.jpg b/images/car_276.jpg
new file mode 100644
index 0000000..cf90f93
Binary files /dev/null and b/images/car_276.jpg differ
diff --git a/images/car_277.jpg b/images/car_277.jpg
new file mode 100644
index 0000000..8ddb8a8
Binary files /dev/null and b/images/car_277.jpg differ
diff --git a/images/car_278.jpg b/images/car_278.jpg
new file mode 100644
index 0000000..122d857
Binary files /dev/null and b/images/car_278.jpg differ
diff --git a/images/car_279.jpg b/images/car_279.jpg
new file mode 100644
index 0000000..88f0b8b
Binary files /dev/null and b/images/car_279.jpg differ
diff --git a/images/car_280.jpg b/images/car_280.jpg
new file mode 100644
index 0000000..2833c46
Binary files /dev/null and b/images/car_280.jpg differ
diff --git a/images/car_281.jpg b/images/car_281.jpg
new file mode 100644
index 0000000..4abefcd
Binary files /dev/null and b/images/car_281.jpg differ
diff --git a/images/car_282.jpg b/images/car_282.jpg
new file mode 100644
index 0000000..303045b
Binary files /dev/null and b/images/car_282.jpg differ
diff --git a/images/car_283.jpg b/images/car_283.jpg
new file mode 100644
index 0000000..01ad30a
Binary files /dev/null and b/images/car_283.jpg differ
diff --git a/images/car_284.jpg b/images/car_284.jpg
new file mode 100644
index 0000000..630a217
Binary files /dev/null and b/images/car_284.jpg differ
diff --git a/images/car_285.jpg b/images/car_285.jpg
new file mode 100644
index 0000000..8fc489a
Binary files /dev/null and b/images/car_285.jpg differ
diff --git a/images/car_286.jpg b/images/car_286.jpg
new file mode 100644
index 0000000..911d9d7
Binary files /dev/null and b/images/car_286.jpg differ
diff --git a/images/car_287.jpg b/images/car_287.jpg
new file mode 100644
index 0000000..c7ea374
Binary files /dev/null and b/images/car_287.jpg differ
diff --git a/images/car_288.jpg b/images/car_288.jpg
new file mode 100644
index 0000000..051f5f5
Binary files /dev/null and b/images/car_288.jpg differ
diff --git a/images/car_289.jpg b/images/car_289.jpg
new file mode 100644
index 0000000..4014526
Binary files /dev/null and b/images/car_289.jpg differ
diff --git a/images/car_290.jpg b/images/car_290.jpg
new file mode 100644
index 0000000..e2eaa3a
Binary files /dev/null and b/images/car_290.jpg differ
diff --git a/images/car_291.jpg b/images/car_291.jpg
new file mode 100644
index 0000000..e511acc
Binary files /dev/null and b/images/car_291.jpg differ
diff --git a/images/car_292.jpg b/images/car_292.jpg
new file mode 100644
index 0000000..c5035ce
Binary files /dev/null and b/images/car_292.jpg differ
diff --git a/images/car_293.jpg b/images/car_293.jpg
new file mode 100644
index 0000000..58d36cd
Binary files /dev/null and b/images/car_293.jpg differ
diff --git a/images/car_294.jpg b/images/car_294.jpg
new file mode 100644
index 0000000..efc5b7e
Binary files /dev/null and b/images/car_294.jpg differ
diff --git a/images/car_295.jpg b/images/car_295.jpg
new file mode 100644
index 0000000..7a3a162
Binary files /dev/null and b/images/car_295.jpg differ
diff --git a/images/car_296.jpg b/images/car_296.jpg
new file mode 100644
index 0000000..b3f626e
Binary files /dev/null and b/images/car_296.jpg differ
diff --git a/images/car_297.jpg b/images/car_297.jpg
new file mode 100644
index 0000000..142ef2a
Binary files /dev/null and b/images/car_297.jpg differ
diff --git a/images/car_298.jpg b/images/car_298.jpg
new file mode 100644
index 0000000..556f005
Binary files /dev/null and b/images/car_298.jpg differ
diff --git a/images/car_299.jpg b/images/car_299.jpg
new file mode 100644
index 0000000..a7fffba
Binary files /dev/null and b/images/car_299.jpg differ
diff --git a/images/car_300.jpg b/images/car_300.jpg
new file mode 100644
index 0000000..6b15892
Binary files /dev/null and b/images/car_300.jpg differ
diff --git a/images/car_301.jpg b/images/car_301.jpg
new file mode 100644
index 0000000..ffcbeb4
Binary files /dev/null and b/images/car_301.jpg differ
diff --git a/images/car_302.jpg b/images/car_302.jpg
new file mode 100644
index 0000000..6af3b09
Binary files /dev/null and b/images/car_302.jpg differ
diff --git a/images/car_303.jpg b/images/car_303.jpg
new file mode 100644
index 0000000..60e5c23
Binary files /dev/null and b/images/car_303.jpg differ
diff --git a/images/car_304.jpg b/images/car_304.jpg
new file mode 100644
index 0000000..5686d18
Binary files /dev/null and b/images/car_304.jpg differ
diff --git a/images/car_305.jpg b/images/car_305.jpg
new file mode 100644
index 0000000..b61b170
Binary files /dev/null and b/images/car_305.jpg differ
diff --git a/images/car_306.jpg b/images/car_306.jpg
new file mode 100644
index 0000000..a1a2d88
Binary files /dev/null and b/images/car_306.jpg differ
diff --git a/images/car_307.jpg b/images/car_307.jpg
new file mode 100644
index 0000000..a8706c5
Binary files /dev/null and b/images/car_307.jpg differ
diff --git a/images/car_308.jpg b/images/car_308.jpg
new file mode 100644
index 0000000..591599c
Binary files /dev/null and b/images/car_308.jpg differ
diff --git a/images/car_309.jpg b/images/car_309.jpg
new file mode 100644
index 0000000..1d424af
Binary files /dev/null and b/images/car_309.jpg differ
diff --git a/images/car_310.jpg b/images/car_310.jpg
new file mode 100644
index 0000000..ebd36f0
Binary files /dev/null and b/images/car_310.jpg differ
diff --git a/images/car_311.jpg b/images/car_311.jpg
new file mode 100644
index 0000000..31a2095
Binary files /dev/null and b/images/car_311.jpg differ
diff --git a/images/car_312.jpg b/images/car_312.jpg
new file mode 100644
index 0000000..c143e08
Binary files /dev/null and b/images/car_312.jpg differ
diff --git a/images/car_313.jpg b/images/car_313.jpg
new file mode 100644
index 0000000..1a243b2
Binary files /dev/null and b/images/car_313.jpg differ
diff --git a/images/car_314.jpg b/images/car_314.jpg
new file mode 100644
index 0000000..cf40db5
Binary files /dev/null and b/images/car_314.jpg differ
diff --git a/images/car_315.jpg b/images/car_315.jpg
new file mode 100644
index 0000000..71b3b60
Binary files /dev/null and b/images/car_315.jpg differ
diff --git a/images/car_316.jpg b/images/car_316.jpg
new file mode 100644
index 0000000..9cc231b
Binary files /dev/null and b/images/car_316.jpg differ
diff --git a/images/car_317.jpg b/images/car_317.jpg
new file mode 100644
index 0000000..a74b992
Binary files /dev/null and b/images/car_317.jpg differ
diff --git a/images/car_318.jpg b/images/car_318.jpg
new file mode 100644
index 0000000..4d8de77
Binary files /dev/null and b/images/car_318.jpg differ
diff --git a/images/car_319.jpg b/images/car_319.jpg
new file mode 100644
index 0000000..a52a061
Binary files /dev/null and b/images/car_319.jpg differ
diff --git a/images/car_320.jpg b/images/car_320.jpg
new file mode 100644
index 0000000..6f5df44
Binary files /dev/null and b/images/car_320.jpg differ
diff --git a/images/car_321.jpg b/images/car_321.jpg
new file mode 100644
index 0000000..9c3cbaf
Binary files /dev/null and b/images/car_321.jpg differ
diff --git a/images/car_322.jpg b/images/car_322.jpg
new file mode 100644
index 0000000..a52fd47
Binary files /dev/null and b/images/car_322.jpg differ
diff --git a/images/car_323.jpg b/images/car_323.jpg
new file mode 100644
index 0000000..d16ec28
Binary files /dev/null and b/images/car_323.jpg differ
diff --git a/images/car_324.jpg b/images/car_324.jpg
new file mode 100644
index 0000000..4289192
Binary files /dev/null and b/images/car_324.jpg differ
diff --git a/images/car_325.jpg b/images/car_325.jpg
new file mode 100644
index 0000000..4ab048e
Binary files /dev/null and b/images/car_325.jpg differ
diff --git a/images/car_326.jpg b/images/car_326.jpg
new file mode 100644
index 0000000..a365eec
Binary files /dev/null and b/images/car_326.jpg differ
diff --git a/images/car_327.jpg b/images/car_327.jpg
new file mode 100644
index 0000000..203bbe7
Binary files /dev/null and b/images/car_327.jpg differ
diff --git a/images/car_328.jpg b/images/car_328.jpg
new file mode 100644
index 0000000..5f9c9b9
Binary files /dev/null and b/images/car_328.jpg differ
diff --git a/images/car_329.jpg b/images/car_329.jpg
new file mode 100644
index 0000000..1c43bf8
Binary files /dev/null and b/images/car_329.jpg differ
diff --git a/images/car_330.jpg b/images/car_330.jpg
new file mode 100644
index 0000000..b8fbc95
Binary files /dev/null and b/images/car_330.jpg differ
diff --git a/images/car_331.jpg b/images/car_331.jpg
new file mode 100644
index 0000000..d74fd84
Binary files /dev/null and b/images/car_331.jpg differ
diff --git a/images/car_332.jpg b/images/car_332.jpg
new file mode 100644
index 0000000..ac50eed
Binary files /dev/null and b/images/car_332.jpg differ
diff --git a/images/car_333.jpg b/images/car_333.jpg
new file mode 100644
index 0000000..252a51f
Binary files /dev/null and b/images/car_333.jpg differ
diff --git a/images/car_334.jpg b/images/car_334.jpg
new file mode 100644
index 0000000..d6b177c
Binary files /dev/null and b/images/car_334.jpg differ
diff --git a/images/car_335.jpg b/images/car_335.jpg
new file mode 100644
index 0000000..33eb065
Binary files /dev/null and b/images/car_335.jpg differ
diff --git a/images/car_336.jpg b/images/car_336.jpg
new file mode 100644
index 0000000..25ff667
Binary files /dev/null and b/images/car_336.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f398f0c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <title>汽车360°全景展示</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Loading 画面 -->
+        <div class="loading-screen" id="loadingScreen">
+            <div class="loading-content">
+                <div class="loading-logo">
+                    <svg viewBox="0 0 100 100" class="car-icon">
+                        <path class="car-body" d="M15,60 Q20,45 35,42 L65,42 Q80,45 85,60 L85,70 L15,70 Z" fill="none" stroke="currentColor" stroke-width="2"/>
+                        <circle class="wheel wheel-front" cx="28" cy="70" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
+                        <circle class="wheel wheel-rear" cx="72" cy="70" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
+                        <path class="car-window" d="M30,42 L38,32 L62,32 L70,42" fill="none" stroke="currentColor" stroke-width="2"/>
+                    </svg>
+                </div>
+                <h1 class="loading-title">汽车360°全景展示</h1>
+                <div class="loading-bar">
+                    <div class="loading-progress" id="loadingProgress"></div>
+                </div>
+                <p class="loading-text" id="loadingText">正在加载资源...</p>
+            </div>
+        </div>
+        
+        <main class="viewer-container">
+            <div class="viewer">
+                <canvas id="carCanvas"></canvas>
+            </div>
+            <div class="hint-bar">
+                <span class="hint-icon">↔</span>
+                <span class="hint-text">左右滑动旋转查看</span>
+            </div>
+        </main>
+    </div>
+    
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..64dc1e8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "3d-pano",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.pandorastudio.cn/demo/3D-pano.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..57bc741
--- /dev/null
+++ b/server.js
@@ -0,0 +1,43 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = 9000;
+const ROOT = 'J:/git/3D-pano';
+
+const mimeTypes = {
+    '.html': 'text/html',
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.mp4': 'video/mp4',
+    '.json': 'application/json'
+};
+
+const server = http.createServer((req, res) => {
+    console.log('Request:', req.url);
+    
+    let filePath = path.join(ROOT, req.url === '/' ? 'index.html' : req.url);
+    const ext = path.extname(filePath).toLowerCase();
+    
+    fs.readFile(filePath, (err, data) => {
+        if (err) {
+            res.writeHead(404);
+            res.end('Not Found');
+            return;
+        }
+        
+        res.writeHead(200, {
+            'Content-Type': mimeTypes[ext] || 'application/octet-stream',
+            'Access-Control-Allow-Origin': '*',
+            'Cache-Control': 'no-cache'
+        });
+        res.end(data);
+    });
+});
+
+server.listen(PORT, '127.0.0.1', () => {
+    console.log(`Server running at http://127.0.0.1:${PORT}/`);
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..1d49db6
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,281 @@
+/* 基础重置与变量 */
+:root {
+    --primary-color: #00d4ff;
+    --primary-glow: rgba(0, 212, 255, 0.3);
+    --secondary-color: #ff6b35;
+    --bg-dark: #0a0a0f;
+    --text-primary: #ffffff;
+    --text-secondary: rgba(255, 255, 255, 0.6);
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--bg-dark);
+    color: var(--text-primary);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/* 背景效果 */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(ellipse at 20% 20%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 50%, rgba(100, 100, 150, 0.1) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* 主容器 - 全屏 */
+.container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 查看器容器 - 全屏 */
+.viewer-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 查看器 - 全屏 */
+.viewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#carCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+
+/* 加载画面 */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--bg-dark);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+
+.loading-screen.hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.loading-content {
+    text-align: center;
+    padding: 20px;
+}
+
+.loading-logo {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 30px;
+    color: var(--primary-color);
+}
+
+.car-icon {
+    width: 100%;
+    height: 100%;
+    animation: float 2s ease-in-out infinite;
+}
+
+.car-body {
+    stroke-dasharray: 200;
+    stroke-dashoffset: 200;
+    animation: drawLine 2s ease forwards;
+}
+
+.car-window {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: drawLine 1.5s ease 0.5s forwards;
+}
+
+.wheel {
+    stroke-dasharray: 63;
+    stroke-dashoffset: 63;
+    animation: drawLine 1s ease 1s forwards;
+}
+
+.wheel-front {
+    transform-origin: 28px 70px;
+    animation: drawLine 1s ease 1s forwards, spin-wheel 3s linear 2s infinite;
+}
+
+.wheel-rear {
+    transform-origin: 72px 70px;
+    animation: drawLine 1s ease 1.1s forwards, spin-wheel 3s linear 2s infinite;
+}
+
+@keyframes drawLine {
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes spin-wheel {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 30px;
+    opacity: 0;
+    animation: fadeIn 0.5s ease 0.8s forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+.loading-bar {
+    width: 200px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    margin: 0 auto 15px;
+    overflow: hidden;
+}
+
+.loading-progress {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+
+.loading-text {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    opacity: 0;
+    animation: fadeIn 0.5s ease 1s forwards;
+}
+
+/* 底部操作提示 */
+.hint-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 20px;
+    padding-bottom: max(20px, env(safe-area-inset-bottom));
+    background: linear-gradient(to top, rgba(10, 10, 15, 0.9), transparent);
+    z-index: 10;
+    opacity: 0;
+    animation: hintFadeIn 0.5s ease 2s forwards;
+}
+
+@keyframes hintFadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+.hint-icon {
+    font-size: 1.2rem;
+    color: var(--primary-color);
+    animation: hintPulse 2s ease-in-out infinite;
+}
+
+@keyframes hintPulse {
+    0%, 100% {
+        transform: translateX(0);
+        opacity: 0.6;
+    }
+    50% {
+        transform: translateX(5px);
+        opacity: 1;
+    }
+}
+
+.hint-text {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    letter-spacing: 0.5px;
+}
+
+/* 暗黑模式增强 */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-dark: #050508;
+    }
+}
\ No newline at end of file
diff --git a/video.mp4 b/video.mp4
new file mode 100644
index 0000000..121311e
Binary files /dev/null and b/video.mp4 differ