ALL SPICE THAI Restaurant Website

A modern Thai restaurant showcase website with beautiful visual design and complete functional modules.

Features

🏠 Main Pages

• Hero Banner - Attractive visual display and navigation
• Restaurant Story - Showcase restaurant history, philosophy and features
• Menu Display - Categorized menu items with elegant presentation
• Location Information - Integrated Google Maps showing restaurant location
• Online Reservation - Complete reservation form system

🎨 Design Features

• Modern, sophisticated visual design
• Responsive layout, compatible with all devices
• Thai-style color scheme (golden theme)
• Smooth animations and interactive effects
• Elegant typography and image presentation

🔧 Technical Features

• Menu category filtering
• Form validation and submission
• Google Maps integration
• Square payment system integration
• Mobile-friendly navigation

File Structure

thai-demo/
├── index.html          # Main page file
├── styles.css          # Stylesheet
├── script.js           # JavaScript functionality
└── README.md           # Documentation

Quick Start

1. Download Files

   # Ensure all files are in the same directory
   - index.html
   - styles.css
   - script.js

2. Configure Google Maps

   • Get Google Maps API key
   • Replace YOUR_API_KEY in index.html
   • 更新餐厅坐标位置

3. 配置Square支付

   • 注册Square开发者账户
   • 在 index.html 中替换 YOUR_APPLICATION_ID 和 YOUR_LOCATION_ID

4. 启动网站

   • 直接在浏览器中打开 index.html
   • 或使用本地服务器（推荐）

配置说明

Google Maps集成

1. 访问 Google Cloud Console
2. 创建新项目或选择现有项目
3. 启用 Maps JavaScript API
4. 创建API密钥
5. 在 index.html 中替换：

   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

Square支付集成

1. 访问 Square Developer
2. 创建应用程序
3. 获取Application ID和Location ID
4. 在 index.html 中替换：

   Square.payments('sandbox-sq0idb-YOUR_APPLICATION_ID', 'YOUR_LOCATION_ID')

自定义内容

餐厅信息

在 index.html 中修改：

• 餐厅名称和描述
• 联系信息
• 营业时间
• 地址信息

菜单内容

在 index.html 的菜单部分添加或修改菜品：

<div class="menu-item" data-category="appetizers">
    <div class="menu-image">
        <div class="placeholder-img your-dish-class"></div>
    </div>
    <div class="menu-content">
        <h3>菜品名称</h3>
        <p class="thai-name">泰文名称</p>
        <p class="description">菜品描述</p>
        <div class="menu-footer">
            <span class="price">¥价格</span>
            <span class="dietary-info">
                <i class="fas fa-leaf" title="素食"></i>
            </span>
        </div>
    </div>
</div>

颜色主题

在 styles.css 中修改CSS变量：

:root {
    --primary-color: #d4af37;    /* 主色调 */
    --secondary-color: #8b4513;  /* 辅助色 */
    --accent-color: #ff6b35;     /* 强调色 */
    /* 其他颜色变量... */
}

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

移动端优化

网站已针对移动设备进行优化：

• 响应式导航菜单
• 触摸友好的按钮和表单
• 优化的图片和布局
• 快速加载性能

性能优化建议

1. 图片优化

   • 使用WebP格式
   • 实现懒加载
   • 压缩图片文件

2. 代码优化

   • 压缩CSS和JavaScript
   • 使用CDN加载外部资源
   • 启用Gzip压缩

3. 缓存策略

   • 设置适当的缓存头
   • 使用Service Worker

部署选项

静态托管

• GitHub Pages
• Netlify
• Vercel
• Firebase Hosting

传统主机

• 上传所有文件到web服务器
• 确保支持HTTPS（Google Maps需要）

常见问题

Q: Google Maps不显示？ A: 检查API密钥是否正确，确保启用了Maps JavaScript API

Q: 预订表单提交后没有反应？ A: 当前是演示版本，需要集成后端服务处理表单数据

Q: 在移动设备上菜单显示异常？ A: 确保viewport meta标签正确设置，检查CSS媒体查询

技术支持

如需技术支持或定制开发，请联系：

• 邮箱: support@example.com
• 电话: 021-1234-5678

许可证

本项目仅供演示使用。商业使用请联系获取授权。

---

© 2024 泰香园餐厅网站演示版本