---
name: scenic-website-builder
description: Generate standardized, SEO-optimized single-page HTML websites for scenic spots, attractions, and tourism businesses. Use when the user wants to create a website for a tourist attraction, scenic area, theme park, zoo, museum, resort, shooting club, or any tourism-related business. Accepts venue name, images, languages, ticket/product info, and booking links as input, and outputs a complete production-ready HTML file with full SEO optimization including TDK, Schema.org structured data, hreflang multi-language tags, Open Graph, semantic HTML, and URL-path-based multi-language routing. Automatically adapts visual style (colors, decorative elements, fonts) based on venue type.
---

# Scenic Website Builder

Generate production-ready, SEO-optimized single-page HTML websites for tourism businesses.

## Input Requirements

Collect ALL of the following from user before generating:

### Basic Information
1. **Venue name** (in each language if available)
2. **Venue type** (shooting club / zoo / theme park / beach resort / museum / temple / aquarium / mountain / night market / winter resort / other)
3. **Location** (city, country)
4. **Domain name** (e.g., www.example.com - for canonical URL and hreflang)

### Images (ALL will be embedded as base64)
5. **Hero background image** (full-width, high resolution)
6. **About section image** (venue photo)
7. **Logo** (optional - if not provided, use venue name as text)
8. **Ticket card images** (one per ticket/package)
9. **Gallery images** (4-8 photos)

### Languages
10. **Supported languages** (list: en, zh, zh-HK, th, kr, ja, ru, etc.)

### Tickets/Products
11. **Ticket information** for each package:
    - Name (per language)
    - Price
    - Currency
    - Itemized contents (e.g., "Glock / Pistol - 15 Shots")

### Booking Links
12. **Trip.com booking URL** for each language (e.g., en: https://us.trip.com/w/..., kr: https://kr.trip.com/t/...)

### Contact Information
13. **Full address** (for footer and Schema.org)
14. **Phone number**
15. **Opening hours** (e.g., "09:00 - 18:00")
16. **Suggested visit duration** (e.g., "2-3 hours")
17. **Coordinates** (latitude/longitude - optional but recommended for SEO)

### Social Media
18. **Social media links** (Facebook, Instagram, TikTok, etc.)

### Content
19. **Venue introduction** (detailed description: what kind of venue, highlights, unique features - per language)

## Generation Process

### Step 1: Convert All Images to Base64
- Convert ALL images to base64 data URIs
- Format: `data:image/jpeg;base64,...` or `data:image/png;base64,...`
- Replace all image placeholders in template with base64 strings
- This ensures the HTML file is fully self-contained

### Step 2: Select Visual Style
Read `references/visual-style-guide.md` and select color palette based on venue type:
- Set CSS variables: `--bg`, `--card`, `--accent`, `--accent2`, `--text`, `--muted`
- Apply appropriate fonts and decorative elements

### Step 3: Generate Multi-language Configuration
For each language:
- Map to hreflang code (en→en, kr→ko, ja→ja, zh→zh, th→th, ru→ru)
- Generate URL path (/en, /kr, /jp, /zh, /th, /ru)
- Create translations object with ALL text content
- Generate language-specific TDK (title, description, keywords)

### Step 4: Fill Template Placeholders
Replace ALL placeholders in `assets/template.html`:

**Head Section:**
- `{{SITE_NAME}}` - Venue name
- `{{SITE_TYPE}}` - Venue type (e.g., "Shooting Club")
- `{{LOCATION}}` - City, Country
- `{{META_DESCRIPTION}}` - SEO description (150-160 chars)
- `{{KEYWORDS}}` - SEO keywords (5-10 terms)
- `{{CANONICAL_URL}}` - https://www.domain.com/en
- `{{HREFLANG_TAGS}}` - All hreflang link tags
- `{{OG_TITLE}}`, `{{OG_DESCRIPTION}}`, `{{OG_IMAGE_BASE64}}`, `{{OG_URL}}` - Open Graph tags
- `{{OG_LOCALE_ALTERNATES}}` - og:locale:alternate tags
- `{{TWITTER_TITLE}}`, `{{TWITTER_DESCRIPTION}}`, `{{TWITTER_IMAGE_BASE64}}` - Twitter Card tags
- `{{SCHEMA_TYPE}}` - TouristAttraction / LocalBusiness / etc.
- `{{SCHEMA_DESCRIPTION}}` - Schema description
- `{{SCHEMA_IMAGE_BASE64}}` - Schema image
- `{{STREET_ADDRESS}}`, `{{CITY}}`, `{{REGION}}`, `{{COUNTRY}}` - Address components
- `{{LATITUDE}}`, `{{LONGITUDE}}` - Geo coordinates
- `{{OPENING_HOURS}}` - Opening hours
- `{{PRICE_RANGE}}` - Price range (e.g., "$$")
- `{{PHONE}}` - Phone number

**Body Section:**
- `{{HERO_IMAGE_BASE64}}` - Hero background image
- `{{HERO_TAG}}`, `{{HERO_SUBTITLE}}`, `{{HERO_INFO}}`, `{{HERO_BTN}}` - Hero content
- `{{LOGO_BASE64}}` - Venue logo (or hide if not provided)
- `{{ABOUT_IMAGE_BASE64}}`, `{{ABOUT_IMAGE_ALT}}` - About section image
- `{{ABOUT_LABEL}}`, `{{ABOUT_TITLE}}`, `{{ABOUT_TEXT}}` - About text content
- `{{FEAT_ICON_1/2/3}}`, `{{FEAT_LABEL_1/2/3}}` - Feature highlights
- `{{OPENING_HOURS}}`, `{{SUGGESTED_DURATION}}`, `{{ADDRESS}}`, `{{PHONE}}` - Basic info
- `{{TICKET_LABEL}}`, `{{TICKET_TITLE}}` - Ticket section headers
- `{{TICKET_CARDS}}` - Generated ticket card HTML
- `{{GALLERY_LABEL}}`, `{{GALLERY_TITLE}}` - Gallery section headers
- `{{GALLERY_ITEMS}}` - Generated gallery item HTML
- `{{SOCIAL_ICONS}}` - Social media icon links
- `{{LANGUAGE_OPTIONS}}` - Language selector options
- `{{LANGUAGE_URL_MAP}}` - Language URL mapping for JS
- `{{DEFAULT_LANG}}` - Default language code
- `{{TRANSLATIONS}}` - Complete translations object
- `{{BASE_DOMAIN}}` - Base domain URL

**Color Variables:**
- `{{COLOR_BG}}`, `{{COLOR_CARD}}`, `{{COLOR_ACCENT}}`, `{{COLOR_ACCENT2}}`, `{{COLOR_TEXT}}`, `{{COLOR_MUTED}}`

### Step 5: Generate Ticket Cards HTML
For each ticket/package, generate:
```html
<div class="ticket-card trip-link">
    <img class="ticket-card-image" src="[BASE64]" alt="[NAME]" loading="lazy">
    <div class="ticket-card-header">
        <div class="ticket-name">[NAME]</div>
        <div class="ticket-price">[PRICE] <span>[CURRENCY]</span></div>
    </div>
    <div class="ticket-body">
        <div class="ticket-item"><span>[ITEM_NAME]</span><span>[ITEM_DETAIL]</span></div>
        ...
    </div>
</div>
```

### Step 6: Generate Gallery Items HTML
For each gallery image:
```html
<div class="gallery-item">
    <img src="[BASE64]" alt="[DESCRIPTION]" loading="lazy">
</div>
```

### Step 7: Generate Translations Object
Create complete translations for ALL languages:
```javascript
var translations = {
    en: {
        nav_about: "About", nav_tickets: "Tickets", nav_gallery: "Gallery",
        hero_tag: "...", hero_sub: "...", hero_info: "...", hero_btn: "...",
        about_label: "...", about_title: "...", about_text: "...",
        feat_1: "...", feat_2: "...", feat_3: "...",
        about_info_title: "Basic Information",
        info_hours_label: "Opening Hours", info_hours: "...",
        info_duration_label: "Suggested Duration", info_duration: "...",
        info_address_label: "Address", info_address: "...",
        info_phone_label: "Phone", info_phone: "...",
        ticket_label: "...", ticket_title: "...",
        gallery_label: "...", gallery_title: "...",
        footer_follow: "Follow Us"
    },
    kr: { ... },
    ja: { ... }
};
```

### Step 8: Generate hreflang Tags
```html
<link rel="alternate" hreflang="en" href="https://www.domain.com/en">
<link rel="alternate" hreflang="ko" href="https://www.domain.com/kr">
<link rel="alternate" hreflang="ja" href="https://www.domain.com/jp">
<link rel="alternate" hreflang="x-default" href="https://www.domain.com/en">
```

### Step 9: Generate Language URL Map
```javascript
languages: {
    'en': { path: '/en', tripUrl: 'https://us.trip.com/w/...' },
    'kr': { path: '/kr', tripUrl: 'https://kr.trip.com/t/...' },
    'ja': { path: '/jp', tripUrl: 'https://jp.trip.com/t/...' }
}
```

## Standardized Elements (Mandatory)

### 1. Image Embedding
- ALL images MUST be embedded as base64 data URIs
- No external file references allowed
- Ensures HTML file is fully self-contained and works offline

### 2. Navigation Logo
- **With logo**: Display venue logo image in top-left
- **Without logo**: Display venue name as styled text
- Implementation: If logo provided, use `<img>` tag; otherwise use `<div class="logo-text">`

### 3. Minimal Footer (Required)
- Keep the footer minimal: venue logo, venue address, and optional social media links only.
- Never add an "Official Partner" section, partner badge, third-party partner logo, copyright notice, or site-operator/copyright footer text.
- This rule applies to every language page and every future website generated from this Skill.

### 5. About Section Structure
**Upper Part - Introduction:**
- Left: Venue image
- Right: Section label, title, description, 3 feature highlights

**Divider:**
- Gradient horizontal line (accent color)

**Lower Part - Basic Info:**
- 4-column grid (2-column on mobile)
- Opening Hours ( icon)
- Suggested Duration ( icon)
- Address (📍 icon)
- Phone (📞 icon)
- Each item: icon + label + value

## Output

Generate a single `index.html` file that is:
- Fully self-contained (all images as base64)
- SEO-optimized (TDK, Schema.org, hreflang, OG, Twitter Card)
- Multi-language ready (JS-based switching with URL path support)
- Responsive (mobile-friendly)
- Production-ready (can be deployed immediately)

## File References

- `assets/template.html` - Base HTML template (clean, no template syntax)
- `references/seo-standards.md` - TDK, Schema.org, hreflang, OG standards
- `references/visual-style-guide.md` - Color palettes, fonts, decorations by venue type