Beat Saber Custom Mapping Pricing

A modern, responsive, configuration-driven pricing calculator for Beat Saber custom mapping commissions. Simply paste a YouTube URL and the tool automatically grabs the actual duration to exactly calculate standard and fractional pricing dynamically.

It outputs a pre-filled PayPal.Me link with the final cost and an itemized order note tracking the requested map and selected options!

Features

• YouTube Ingestion: Invisible IFrame API queries the video and extracts exact duration down to the second.
• Exact Fractional Pricing: (Base Price Per Minute + Selected Extras Per Minute) / 60 * Total Seconds
• Included Difficulty Logic: Your Base Price always accounts for exactly 1 included difficulty. When a user selects their "Base Difficulty", it is prevented from being added as an "Extra" paid difficulty.
• Smart Discounts: Support for Percentages, Flat Total, and Flat Base discounts using easy URL query parameters.
• Glassmorphism Aesthetic: Animated, glowing neon red and blue UI styling without external bloated CSS frameworks.
• Fully Configured by JSON: You do not need to rewrite HTML to change descriptions, names, social links, or complex pricing logic.

How to Set Up

Due to browser CORS permissions, the system cannot fetch the localized config.json configuration file simply by double-clicking index.html. It must be run on a local HTTP server or hosted on an active website.

To run locally for testing:

python3 -m http.server 8000

Then visit http://localhost:8000 in your browser.

Configuration Options (config.json)

All primary values are declared inside config.json:

{
  "site": {
    "headerTitle": "Your custom title",
    "introText": "Your custom introduction rules/text",
    "bottomText": "Your custom footer disclaimer text",
    "socialLinks": [
      {
        "icon": "fa-brands fa-discord",  // FontAwesome CSS classes
        "url": "https://discord.com",
        "label": "Discord"
      }
    ],
    "paypalUser": "YourPaypalMeUsername" // E.g., paypal.me/Joetastic
  },
  "pricing": {
    "basePricePerMinute": 15, // The $ rate per minute of mapping
    "difficulties": [...],    // Available difficulties options
    "lighting": [...],        // Available lighting tiers  
    "addons": [...]           // Misc options 
  }
}

For Difficulties, Lighting, and Addons, each object accepts:

• id: The programmatic reference ID
• name: The user-facing display name
• description: The subtext beneath the option in the UI
• price: The cost of the extra. Note: For Difficulties, this price is per minute. It is added to the base rate before the duration calculation happens.

Applying Custom Discounts (?discount=)

You can generate special links to automatically apply discounts when users load the page. It will prominently display a green banner explaining the discount to the user and recalculate the final cost before creating the tracked PayPal link.

• ?discount_pct=20 Takes 20% Off the final calculated total cost.
• ?discount_total=10 Takes a flat $10.00 Off the final calculated total cost.
• ?discount_base=5 Deducts $5.00 from your standard basePricePerMinute configuration before any duration or extras logic is calculated.

Example Link:

http://localhost:8000/?discount_pct=15