Initial commit of complete Beat Saber Pricing Website
This commit is contained in:
commit
ac0249ceb9
5 changed files with 1232 additions and 0 deletions
137
index.html
Normal file
137
index.html
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Custom Mapping Pricing</title>
|
||||
|
||||
<!-- Google Fonts: Outfit for a modern, geometric look -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome for Social Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Background Animated Elements -->
|
||||
<div class="bg-glow bg-blue"></div>
|
||||
<div class="bg-glow bg-red"></div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Dynamic Header Section -->
|
||||
<header class="glass-panel text-center">
|
||||
<h1 id="site-title" class="glitch-text" data-text="Loading...">Loading...</h1>
|
||||
<p id="site-intro" class="subtitle">Fetching configuration...</p>
|
||||
|
||||
<div id="social-links" class="social-container">
|
||||
<!-- Social links injected here -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<main class="grid-content">
|
||||
|
||||
<!-- Video Input / Duration Section -->
|
||||
<section class="glass-panel main-section">
|
||||
<h2><i class="fa-brands fa-youtube icon-red"></i> Song Source</h2>
|
||||
<div class="input-group">
|
||||
<input type="text" id="youtube-url" placeholder="Paste YouTube URL here..." autocomplete="off">
|
||||
<button id="fetch-btn" class="neon-btn neon-blue">Fetch Info <i class="fa-solid fa-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="video-info hidden" id="video-info">
|
||||
<div class="info-row">
|
||||
<span class="label">Song:</span>
|
||||
<span class="value yt-title" id="video-title-display">Loading...</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">Duration:</span>
|
||||
<span class="value" id="duration-display">0:00</span>
|
||||
</div>
|
||||
<div class="info-row highlight">
|
||||
<span class="label">Base Cost (<span id="base-price-display">$0</span>/min):</span>
|
||||
<span class="value neon-text-blue" id="base-cost-display">$0.00</span>
|
||||
</div>
|
||||
<p class="help-text">The base cost covers the mapping time and includes exactly ONE difficulty of your choice.</p>
|
||||
</div>
|
||||
<div id="error-message" class="error-msg hidden"></div>
|
||||
</section>
|
||||
|
||||
<!-- Options Container -->
|
||||
<div class="options-grid disabled-until-fetch" id="options-container">
|
||||
|
||||
<!-- Base Difficulty Selection -->
|
||||
<section class="glass-panel">
|
||||
<h2><i class="fa-solid fa-cube icon-blue"></i> Included Difficulty</h2>
|
||||
<p class="section-desc">Select the difficulty included in your base price.</p>
|
||||
<div id="base-difficulty-options" class="option-list">
|
||||
<!-- Radios injected here -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Extra Difficulties Selection -->
|
||||
<section class="glass-panel">
|
||||
<h2><i class="fa-solid fa-cubes icon-red"></i> Extra Difficulties</h2>
|
||||
<p class="section-desc">Add additional difficulties to your map.</p>
|
||||
<div id="extra-difficulty-options" class="option-list">
|
||||
<!-- Checkboxes injected here -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lighting Selection -->
|
||||
<section class="glass-panel">
|
||||
<h2><i class="fa-solid fa-lightbulb icon-blue"></i> Lighting Options</h2>
|
||||
<div id="lighting-options" class="option-list">
|
||||
<!-- Radios injected here -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Addons Selection -->
|
||||
<section class="glass-panel">
|
||||
<h2><i class="fa-solid fa-puzzle-piece icon-red"></i> Extras / Addons</h2>
|
||||
<div id="addons-options" class="option-list">
|
||||
<!-- Checkboxes injected here -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Bottom Dynamic Text -->
|
||||
<footer class="footer-text text-center">
|
||||
<p id="site-bottom">Loading...</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Sticky Total Pricing Bar -->
|
||||
<div class="total-bar glass-panel-heavy">
|
||||
<div class="total-content">
|
||||
<div class="total-info">
|
||||
<div class="total-label">Estimated Total</div>
|
||||
<div class="selected-summary" id="selected-summary">Rate: $0/min</div>
|
||||
<div class="discount-summary hidden" id="discount-summary">10% Discount Applied!</div>
|
||||
</div>
|
||||
<div class="price-container">
|
||||
<div class="total-price neon-text-red" id="total-price">$0.00</div>
|
||||
<a href="#" id="paypal-btn" class="neon-btn checkout-btn hidden" target="_blank">
|
||||
<i class="fa-brands fa-paypal"></i> Pay via PayPal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden YouTube Player for API -->
|
||||
<div id="yt-player-container" style="display: none;"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://www.youtube.com/iframe_api"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue