Back to Details

city-tourism-website-builder

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

City Tourism Website Builder

城市旅游网站构建工具

Create stunning, modern tourism websites for any city with comprehensive research, historical facts, and beautiful animations.
基于全面调研、历史史实与精美动画，为任意城市打造惊艳的现代化旅游网站。

Overview

概述

This skill enables the creation of professional city tourism websites featuring:
  • Deep research on city history, facts, and tourist attractions
  • Modern, colorful designs with white backgrounds
  • Smooth animations and hover effects
  • Responsive layouts for all devices
  • Interactive OpenStreetMap centered on the city
  • Optional map snapshot download as PNG
  • IPFS hosting for permanent availability
该技能可用于创建具备以下特性的专业城市旅游网站：
  • 对城市历史、史实及旅游景点进行深度调研
  • 以白色为背景的现代化多彩设计
  • 流畅的动画与悬停效果
  • 适配所有设备的响应式布局
  • 以城市为中心的交互式OpenStreetMap
  • 可选的地图快照PNG下载功能
  • 基于IPFS的永久托管

Workflow

工作流程

1. Research Phase

1. 调研阶段

Gather comprehensive information about the city:
bash
undefined
收集关于该城市的全面信息：
bash
undefined

Search for city information

Search for city information

websearch query="CITY_NAME history facts tourist places visiting sites" websearch query="CITY_NAME famous temples monuments landmarks" websearch query="CITY_NAME best time to visit how to reach"

**Key Information to Collect:**
- Historical origins and etymology
- Famous personalities associated
- Religious/spiritual significance
- Major tourist attractions
- Geography and climate
- Cultural heritage
- Quick facts (population, distance from major cities, etc.)
websearch query="CITY_NAME history facts tourist places visiting sites" websearch query="CITY_NAME famous temples monuments landmarks" websearch query="CITY_NAME best time to visit how to reach"

**需收集的关键信息：**
- 历史起源与词源
- 相关知名人物
- 宗教/精神意义
- 主要旅游景点
- 地理与气候
- 文化遗产
- 快速信息（人口、与主要城市的距离等）

2. Design Principles

2. 设计原则

Color Scheme:
  • White background for clean, modern look
  • Vibrant gradient accents (coral, teal, yellow, mint)
  • Dark text for readability
  • Colorful cards with hover effects
Animations:
  • Floating background shapes
  • Fade-in on scroll
  • Card hover lift effects
  • Smooth scroll navigation
  • Gradient text animations
  • Pulse effects on badges
配色方案：
  • 白色背景打造简洁现代的视觉效果
  • 活力渐变强调色（珊瑚色、蓝绿色、黄色、薄荷绿）
  • 深色文本保障可读性
  • 带悬停效果的彩色卡片
动画效果：
  • 悬浮背景图形
  • 滚动时渐入效果
  • 卡片悬停抬升效果
  • 平滑滚动导航
  • 渐变文本动画
  • 徽章脉冲效果

3. Website Structure

3. 网站结构

Sections:
  1. Hero Header
    • Large gradient text city name
    • Tagline
    • Animated badge
    • Scroll indicator
  2. History Section
    • Historical facts in card grid
    • Interactive timeline
    • Origin stories
  3. Places to Visit
    • Categorized cards (Religious, Nature, Adventure, Historic)
    • Icons and emojis for visual appeal
    • Distance information
  4. Quick Facts
    • Animated number counters
    • Grid layout
    • Key statistics
  5. Interactive City Map
    • OpenStreetMap map centered on city coordinates
    • Marker in city center with popup details
    • "Download Map PNG" action
  6. Visual Gallery
    • Colorful placeholder grid
    • Hover zoom effects
  7. Footer
    • Navigation links
    • Copyright
板块：
  1. 英雄头部
    • 大尺寸渐变文本城市名称
    • 标语
    • 动画徽章
    • 滚动指示器
  2. 历史板块
    • 卡片网格展示历史史实
    • 交互式时间线
    • 起源故事
  3. 游览景点
    • 分类卡片（宗教类、自然类、探险类、历史类）
    • 图标与表情符号提升视觉吸引力
    • 距离信息
  4. 快速信息
    • 动画数字计数器
    • 网格布局
    • 关键统计数据
  5. 交互式城市地图
    • 以城市坐标为中心的OpenStreetMap
    • 城市中心标记点及弹窗详情
    • "下载地图PNG"功能
  6. 视觉图库
    • 彩色占位网格
    • 悬停缩放效果
  7. 页脚
    • 导航链接
    • 版权信息

4. Technical Implementation

4. 技术实现

CSS Features:
css
/* Animated gradient text */
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/* Floating shapes */
animation: float 20s infinite ease-in-out;

/* Card hover effects */
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);

/* Scroll-triggered animations */
IntersectionObserver for fade-in effects
JavaScript Features:
  • Smooth scroll navigation
  • Navbar hide/show on scroll
  • Intersection Observer for reveal animations
  • Mobile-responsive menu
  • Interactive OpenStreetMap (Leaflet)
  • City-center marker and popup
  • Download map image as PNG (with fallback)
CSS特性：
css
/* Animated gradient text */
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/* Floating shapes */
animation: float 20s infinite ease-in-out;

/* Card hover effects */
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);

/* Scroll-triggered animations */
IntersectionObserver for fade-in effects
JavaScript特性：
  • 平滑滚动导航
  • 滚动时导航栏显示/隐藏
  • Intersection Observer实现渐显动画
  • 移动端响应式菜单
  • 交互式OpenStreetMap（Leaflet）
  • 城市中心标记点与弹窗
  • 地图图片PNG下载（含降级方案）

4.1 OpenStreetMap integration (required)

4.1 OpenStreetMap集成（必填）

Use free OpenStreetMap tiles through Leaflet.
html
<!-- In <head> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- In body -->
<section id="map" aria-label="City map section">
   <h2>Explore the City Map</h2>
   <div id="cityMap" style="height: 420px; border-radius: 16px;"></div>
   <button id="downloadMapBtn" type="button" aria-label="Download Map PNG">Download Map PNG</button>
</section>
javascript
// Example city center (replace per city)
const city = {
   name: 'Kathua',
   lat: 32.3693,
   lon: 75.5254,
   zoom: 12
};

const map = L.map('cityMap').setView([city.lat, city.lon], city.zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

L.marker([city.lat, city.lon])
   .addTo(map)
   .bindPopup(`${city.name} City Center`)
   .openPopup();
通过Leaflet使用免费的OpenStreetMap瓦片。
html
<!-- In <head> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- In body -->
<section id="map" aria-label="City map section">
   <h2>Explore the City Map</h2>
   <div id="cityMap" style="height: 420px; border-radius: 16px;"></div>
   <button id="downloadMapBtn" type="button" aria-label="Download Map PNG">Download Map PNG</button>
</section>
javascript
// Example city center (replace per city)
const city = {
   name: 'Kathua',
   lat: 32.3693,
   lon: 75.5254,
   zoom: 12
};

const map = L.map('cityMap').setView([city.lat, city.lon], city.zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

L.marker([city.lat, city.lon])
   .addTo(map)
   .bindPopup(`${city.name} City Center`)
   .openPopup();

4.2 Download map as PNG (if possible)

4.2 地图PNG下载（若可行）

Client-side PNG export from interactive tiles can fail in some browsers due to canvas/CORS restrictions.
Reliable fallback (recommended): download a static PNG from the free OSM static map endpoint.
javascript
document.getElementById('downloadMapBtn').addEventListener('click', () => {
   const url = `https://staticmap.openstreetmap.de/staticmap.php?center=${city.lat},${city.lon}&zoom=${city.zoom}&size=1280x720&markers=${city.lat},${city.lon},red-pushpin`;
   const link = document.createElement('a');
   link.href = url;
   link.download = `${city.name.toLowerCase().replace(/\s+/g, '-')}-map.png`;
   link.click();
});
CLI option (same free endpoint):
bash
CITY_LAT="32.3693"
CITY_LON="75.5254"
CITY_NAME="kathua"

curl -fsS "https://staticmap.openstreetmap.de/staticmap.php?center=${CITY_LAT},${CITY_LON}&zoom=12&size=1280x720&markers=${CITY_LAT},${CITY_LON},red-pushpin" \
   -o "${CITY_NAME}-map.png"
部分浏览器中，从交互式瓦片导出客户端PNG可能因canvas/CORS限制失败。
推荐可靠降级方案： 从免费OSM静态地图端点下载静态PNG。
javascript
document.getElementById('downloadMapBtn').addEventListener('click', () => {
   const url = `https://staticmap.openstreetmap.de/staticmap.php?center=${city.lat},${city.lon}&zoom=${city.zoom}&size=1280x720&markers=${city.lat},${city.lon},red-pushpin`;
   const link = document.createElement('a');
   link.href = url;
   link.download = `${city.name.toLowerCase().replace(/\s+/g, '-')}-map.png`;
   link.click();
});
CLI选项（使用同一免费端点）：
bash
CITY_LAT="32.3693"
CITY_LON="75.5254"
CITY_NAME="kathua"

curl -fsS "https://staticmap.openstreetmap.de/staticmap.php?center=${CITY_LAT},${CITY_LON}&zoom=12&size=1280x720&markers=${CITY_LAT},${CITY_LON},red-pushpin" \
   -o "${CITY_NAME}-map.png"

5. Example Implementation

5. 示例实现

File Structure:
city-website.html
├── Animated background shapes
├── Fixed navigation with blur effect
├── Hero section with gradient text
├── History cards with top accent line
├── Timeline with alternating layout
├── Places grid with category badges
├── Facts section with large numbers
├── Interactive OpenStreetMap section (city-centered)
├── Download Map PNG button
├── Gallery grid with color blocks
└── Dark footer
Key CSS Variables:
css
:root {
  --primary: #FF6B6B;      /* Coral */
  --secondary: #4ECDC4;    /* Teal */
  --accent: #FFE66D;       /* Yellow */
  --purple: #A8E6CF;       /* Mint */
  --dark: #2C3E50;         /* Dark text */
  --light: #F7F9FC;        /* Light bg */
}
文件结构：
city-website.html
├── Animated background shapes
├── Fixed navigation with blur effect
├── Hero section with gradient text
├── History cards with top accent line
├── Timeline with alternating layout
├── Places grid with category badges
├── Facts section with large numbers
├── Interactive OpenStreetMap section (city-centered)
├── Download Map PNG button
├── Gallery grid with color blocks
└── Dark footer
关键CSS变量：
css
:root {
  --primary: #FF6B6B;      /* Coral */
  --secondary: #4ECDC4;    /* Teal */
  --accent: #FFE66D;       /* Yellow */
  --purple: #A8E6CF;       /* Mint */
  --dark: #2C3E50;         /* Dark text */
  --light: #F7F9FC;        /* Light bg */
}

6. Content Guidelines

6. 内容规范

History Section:
  • 4 key historical cards
  • 3-timeline items
  • Focus on origin stories
  • Include royal/religious heritage
Places Section:
  • 6-8 major attractions
  • Categorize: Religious, Nature, Adventure, Historic
  • Include distances from city center
  • Add emojis for visual appeal
Facts Section:
  • 6 key statistics
  • Large numbers with gradient
  • Mix of distances, heights, years
历史板块：
  • 4个关键历史卡片
  • 3个时间线条目
  • 聚焦起源故事
  • 包含皇室/宗教遗产
景点板块：
  • 6-8个主要景点
  • 分类：宗教类、自然类、探险类、历史类
  • 包含距市中心的距离
  • 添加表情符号提升视觉吸引力
信息板块：
  • 6个关键统计数据
  • 带渐变效果的大数字
  • 混合距离、高度、年份等信息

7. Upload & Deployment

7. 上传与部署

bash
undefined
bash
undefined

Upload to IPFS via Originless

Upload to IPFS via Originless

curl -fsS -X POST -F "file=@city-website.html" https://filedrop.besoeasy.com/upload
curl -fsS -X POST -F "file=@city-website.html" https://filedrop.besoeasy.com/upload

Response includes:

Response includes:

- IPFS URL: https://dweb.link/ipfs/{CID}

- IPFS URL: https://dweb.link/ipfs/{CID}

- CID for permanent access

- CID for permanent access

undefined
undefined

Example Output

示例输出

Kathua Tourism Website:
Kathua旅游网站：

Best Practices

最佳实践

  1. Research Thoroughly
    • Use multiple sources
    • Verify historical facts
    • Include local legends
  2. Design for All Devices
    • Mobile-first approach
    • Responsive grids
    • Touch-friendly interactions
    • Map container sized for mobile and desktop
  3. Performance
    • Minimize external dependencies
    • Use CSS animations (GPU accelerated)
    • Lazy load below-fold content
  4. Accessibility
    • Semantic HTML structure
    • ARIA labels where needed
    • Keyboard navigation support
    • Map controls remain keyboard reachable
  5. Content Quality
    • Engaging copy
    • Accurate information
    • Local context and flavor
  6. Map Quality
    • Keep city marker exactly at city center coordinates
    • Include attribution for OpenStreetMap contributors
    • Prefer static-map fallback for guaranteed PNG download
  1. 全面调研
    • 使用多来源信息
    • 验证历史史实
    • 包含当地传说
  2. 适配全设备设计
    • 移动端优先方案
    • 响应式网格
    • 触控友好交互
    • 地图容器适配移动端与桌面端
  3. 性能优化
    • 减少外部依赖
    • 使用CSS动画（GPU加速）
    • 懒加载视口下方内容
  4. 无障碍支持
    • 语义化HTML结构
    • 必要时添加ARIA标签
    • 支持键盘导航
    • 地图控件保持键盘可访问
  5. 内容质量
    • 引人入胜的文案
    • 准确的信息
    • 本地背景与特色
  6. 地图质量
    • 城市标记点精准定位市中心坐标
    • 包含OpenStreetMap贡献者署名
    • 优先使用静态地图降级方案保障PNG下载功能

Variations

变体选项

Theme Options:
  • Colorful Modern (default): Gradients on white
  • Elegant Dark: Dark mode with gold accents
  • Minimal: Clean monochrome
  • Cultural: Colors reflecting local culture
Layout Options:
  • Standard: Header → History → Places → Facts → Gallery
  • Parallax: Scroll-triggered depth effects
  • Single Page: All content in vertical scroll
  • Multi-page: Separate pages for sections
主题选项：
  • 多彩现代风（默认）：白色背景搭配渐变
  • 典雅深色风：深色模式搭配金色强调色
  • 极简风：简洁单色
  • 文化风：反映当地文化的配色
布局选项：
  • 标准布局：头部 → 历史 → 景点 → 信息 → 图库
  • 视差布局：滚动触发深度效果
  • 单页布局：所有内容垂直滚动展示
  • 多页布局：各板块分页面展示

Resources

资源

Color Palettes:
  • https://coolors.co/ for gradient generation
  • Vibrant cities: coral (#FF6B6B), teal (#4ECDC4), yellow (#FFE66D), mint (#A8E6CF)
Icons:
  • Emojis for universal recognition
  • Lucide icons (lightweight)
  • Custom SVG for specific landmarks
Hosting:
  • Originless/IPFS for permanent storage
  • GitHub Pages for traditional hosting
  • Netlify for continuous deployment
This skill combines research, design, and technical implementation to create professional city tourism websites that showcase the best of any destination.
配色方案：
  • https://coolors.co/ 用于生成渐变
  • 活力城市配色：珊瑚色(#FF6B6B)、蓝绿色(#4ECDC4)、黄色(#FFE66D)、薄荷绿(#A8E6CF)
图标：
  • 表情符号实现通用识别
  • Lucide图标（轻量型）
  • 针对特定地标定制SVG
托管服务：
  • Originless/IPFS用于永久存储
  • GitHub Pages用于传统托管
  • Netlify用于持续部署
该技能结合调研、设计与技术实现，打造能够展示任意目的地特色的专业城市旅游网站。