Scribd
Upload
5 views

index

The document is an HTML template for a website offering mobile game diamond top-up services, specifically for Mobile Legends. It includes structured sections for user interaction, such as a header, a sticky order summary, and collapsible forms for account data input. The design is responsive and supports both light and dark themes, with various UI enhancements for improved user experience.

Uploaded by

mb6340446
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

index

The document is an HTML template for a website offering mobile game diamond top-up services, specifically for Mobile Legends. It includes structured sections for user interaction, such as a header, a sticky order summary, and collapsible forms for account data input. The design is responsive and supports both light and dark themes, with various UI enhancements for improved user experience.

Uploaded by

mb6340446
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 18

<!

DOCTYPE html>
<html lang="id" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Orocimaru6 Top Up - Diamond Mobile Legends">
<meta property="og:description" content="Top Up Diamond Mobile Legends Tercepat
dan Termurah">
<meta property="og:image"
content="https://bahagiabersama.top/topup/image/Orocimaru6.jpg">
<meta property="og:url" content="https://bahagiabersama.top/topup/">
<meta property="og:type" content="website">
<title>Orocimaru6 Top Up - Diamond Mobile Legends</title>
<link rel="icon" href="https://bahagiabersama.top/topup/image/diamond.webp"
type="image/x-icon">
<link rel="shortcut icon"
href="https://bahagiabersama.top/topup/image/diamond.webp" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0-beta3/css/all.min.css">
<style>
:root {
/* Light mode (default) */
--bg-color: #f5f5f5;
--text-color: #333;
--heading-color: #4a148c;
--card-bg: #ffffff;
--header-bg: #4a148c;
--header-text: #ffffff;
--form-bg: #ffffff;
--input-bg: #f0f0f0;
--input-text: #333;
--button-bg: #6a1b9a;
--button-text: #ffffff;
--footer-bg: #4a148c;
--footer-text: #ffffff;
--border-color: #e0e0e0;
--diamond-option-bg: #f0f0f0;
--diamond-option-active: #d1c4e9;
--feature-bg: #ffffff;
--testimonial-bg: #f9f9f9;
--section-heading-color: #4a148c;
--form-heading-color: #4a148c;
--bottom-nav-bg: #ffffff;
--bottom-nav-active: #6a1b9a;
--bottom-nav-inactive: #757575;
--fab-bg: #6a1b9a;
--fab-color: #ffffff;
--sticky-summary-bg: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
--heading-color: #bb86fc;
--card-bg: #1e1e1e;
--header-bg: #2c0b50;
--header-text: #ffffff;
--form-bg: #2d2d2d;
--input-bg: #3d3d3d;
--input-text: #e0e0e0;
--button-bg: #6a1b9a;
--button-text: #ffffff;
--footer-bg: #2c0b50;
--footer-text: #ffffff;
--border-color: #444444;
--diamond-option-bg: #2d2d2d;
--diamond-option-active: #4a148c;
--feature-bg: #2d2d2d;
--testimonial-bg: #1e1e1e;
--section-heading-color: #bb86fc;
--form-heading-color: #bb86fc;
--bottom-nav-bg: #1e1e1e;
--bottom-nav-active: #bb86fc;
--bottom-nav-inactive: #757575;
--fab-bg: #6a1b9a;
--fab-color: #ffffff;
--sticky-summary-bg: rgba(30, 30, 30, 0.95);
}

body {
background-color: var(--bg-color);
color: var(--text-color);
transition: all 0.3s ease;
padding-bottom: 70px; /* Space for bottom navigation */
}

header {
background-color: var(--header-bg);
color: var(--header-text);
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
color: var(--heading-color);
transition: color 0.3s ease;
}

/* Exception for headers in colored backgrounds */


header h1,
header h2,
header p,
footer h2,
footer h3 {
color: var(--header-text);
}

/* Section headings */
section h2,
section > h3 {
color: var(--section-heading-color);
}

/* Form headings */
.form-container h3 {
color: var(--form-heading-color);
}
.form-container {
background-color: var(--form-bg);
border: 1px solid var(--border-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

input, select {
background-color: var(--input-bg);
color: var(--input-text);
border: 1px solid var(--border-color);
}

.submit-btn {
background-color: var(--button-bg);
color: var(--button-text);
}

.diamond-option, .wdp-option {
background-color: var(--diamond-option-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
}

.diamond-option.selected, .wdp-option.selected {
background-color: var(--diamond-option-active);
}

.feature {
background-color: var(--feature-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
}

.feature h3 {
color: var(--heading-color);
}

.testimonial {
background-color: var(--testimonial-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
}

footer {
background-color: var(--footer-bg);
color: var(--footer-text);
}

/* Order summary */
.order-summary h3 {
color: var(--form-heading-color);
}

/* Theme toggle switch */


.theme-switch-wrapper {
display: flex;
align-items: center;
position: absolute;
top: 20px;
right: 20px;
z-index: 100;
}

.theme-switch {
display: inline-block;
height: 24px;
position: relative;
width: 50px;
}

.theme-switch input {
display: none;
}

.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
border-radius: 34px;
}

.slider:before {
background-color: white;
bottom: 4px;
content: "";
height: 16px;
left: 4px;
position: absolute;
transition: .4s;
width: 16px;
border-radius: 50%;
}

input:checked + .slider {
background-color: #9c27b0;
}

input:checked + .slider:before {
transform: translateX(26px);
}

.theme-icon {
margin-left: 10px;
font-size: 18px;
color: var(--text-color);
}

/* Hero section */
.hero-content h2 {
color: var(--heading-color);
}
/* Footer links */
.footer-links a {
color: var(--footer-text);
text-decoration: none;
}

.footer-links a:hover {
text-decoration: underline;
}

/* Dark mode text fixes */


[data-theme="dark"] .diamond-option .diamond-icon,
[data-theme="dark"] .diamond-option .diamond-price,
[data-theme="dark"] .wdp-option .wdp-icon,
[data-theme="dark"] .wdp-option .wdp-price {
color: #e0e0e0;
}

[data-theme="dark"] .diamond-option.selected,
[data-theme="dark"] .wdp-option.selected {
background-color: #6a1b9a;
color: #ffffff;
}

[data-theme="dark"] .diamond-option.selected .diamond-icon,


[data-theme="dark"] .diamond-option.selected .diamond-price,
[data-theme="dark"] .wdp-option.selected .wdp-icon,
[data-theme="dark"] .wdp-option.selected .wdp-price {
color: #ffffff;
}

[data-theme="dark"] .testimonial .testimonial-text,


[data-theme="dark"] .testimonial .testimonial-author {
color: #e0e0e0;
}

[data-theme="dark"] .feature p {
color: #e0e0e0;
}

[data-theme="dark"] .feature i {
color: #bb86fc;
}

/* NEW UI ENHANCEMENTS FOR MOBILE */

/* 1. Bottom Navigation Bar */


.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: var(--bottom-nav-bg);
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: all 0.3s ease;
}

.nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--bottom-nav-inactive);
transition: color 0.3s ease;
cursor: pointer;
padding: 8px 0;
width: 25%;
text-align: center;
}

.nav-item.active {
color: var(--bottom-nav-active);
}

.nav-item i {
font-size: 20px;
margin-bottom: 4px;
}

.nav-item span {
font-size: 12px;
}

/* 2. Swipe Gestures - CSS part (JS will be added later) */


.diamond-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
padding: 10px 0;
overflow-x: visible;
-webkit-overflow-scrolling: auto;
scroll-behavior: auto;
}

/* MODIFIED: Changed WDP options to display as a column */


.wdp-options {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 0;
overflow-x: visible;
-webkit-overflow-scrolling: auto;
scroll-behavior: auto;
}

.diamond-options::-webkit-scrollbar,
.wdp-options::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

/* 3. Floating Action Button */


.fab {
display: none !important;
}

.fab i {
font-size: 24px;
}

.fab:hover, .fab:active {
transform: scale(1.05);
}

/* 4. Sticky Order Summary */


.sticky-summary {
position: sticky;
top: 0;
background-color: var(--sticky-summary-bg);
padding: 15px;
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 900;
margin-bottom: 20px;
display: none; /* Initially hidden, will show when scrolling */
transition: all 0.3s ease;
}

.sticky-summary .summary-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.sticky-summary .summary-details {
flex: 1;
}

.sticky-summary .summary-action {
margin-left: 15px;
}

.sticky-summary button {
background-color: var(--button-bg);
color: var(--button-text);
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
}

/* 5. Collapsible Sections */
.collapsible-section {
margin-bottom: 20px;
}

.collapsible-header {
background-color: var(--card-bg);
padding: 15px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}

.collapsible-header h3 {
margin: 0;
}

.collapsible-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: var(--form-bg);
border-radius: 0 0 8px 8px;
}

.collapsible-section.active .collapsible-content {
max-height: 1000px; /* Arbitrary large value */
border: 1px solid var(--border-color);
border-top: none;
}

.collapsible-section.active .collapsible-header {
border-radius: 8px 8px 0 0;
}

.collapsible-section.active .collapsible-toggle i {
transform: rotate(180deg);
}

.collapsible-toggle i {
transition: transform 0.3s ease;
}

/* MODIFIED: Footer social media icons styling */


.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-links a {
display: flex;
align-items: center;
text-decoration: none;
color: var(--footer-text);
}

.footer-links i {
margin-right: 10px;
font-size: 20px;
width: 25px;
text-align: center;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.diamond-option, .wdp-option {
min-width: 120px;
margin-right: 10px;
flex-shrink: 0;
}

.diamond-options, .wdp-options {
padding-bottom: 5px;
}

.form-container {
padding: 15px;
}

.sticky-summary {
display: block;
transform: translateY(-100%);
opacity: 0;
}

.sticky-summary.visible {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider"></div>
</label>
<div class="theme-icon">
<i class="fas fa-sun" id="light-icon"></i>
<i class="fas fa-moon" id="dark-icon" style="display: none;"></i>
</div>
</div>

<div class="floating-squares-container"></div>
<header>
<div class="container">
<div class="logo">
<h1>Orocimaru6 Top Up</h1>
<p>Top Up Diamond Mobile Legends Tercepat dan Termurah</p>
</div>
</div>
</header>

<!-- Sticky Order Summary -->


<div class="sticky-summary" id="sticky-summary">
<div class="summary-content">
<div class="summary-details">
<strong>Total:</strong> <span id="sticky-total-price">Rp 0</span>
<div><small id="sticky-diamond-amount">0 Diamond</small></div>
</div>
<div class="summary-action">
<button id="sticky-buy-button">Beli</button>
</div>
</div>
</div>

<main class="container">
<section class="hero">
<div class="hero-content">
<h2>Top Up Diamond Mobile Legends</h2>
<p>Proses Cepat, Harga Terjangkau, Layanan 24 Jam</p>
<img src="image/mlbb.png" alt="Mobile Legends Logo" class="ml-
logo">
</div>
</section>

<section class="form-section">
<!-- Collapsible Account Data Section -->
<div class="collapsible-section active" id="account-section">
<div class="collapsible-header">
<h3>Masukkan Data Akun</h3>
<div class="collapsible-toggle">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="collapsible-content">
<div class="form-container">
<form id="topup-form">
<div class="form-group">
<label for="user-id">User ID:</label>
<input type="text" id="user-id"
placeholder="Masukkan User ID" required>
</div>
<div class="form-group">
<label for="server-id">Server ID:</label>
<input type="text" id="server-id"
placeholder="Masukkan Server ID" required>
</div>
</form>
</div>
</div>
</div>

<!-- Collapsible Diamond Section -->


<div class="collapsible-section" id="diamond-section">
<div class="collapsible-header">
<h3>Pilih Nominal Diamond</h3>
<div class="collapsible-toggle">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="collapsible-content">
<div class="form-container">
<div class="diamond-options">
<div class="diamond-option" data-price="2500" data-
amount="10">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 10</div>
<div class="diamond-price">Rp 2.500</div>
</div>
<div class="diamond-option" data-price="13000" data-
amount="50">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 50</div>
<div class="diamond-price">Rp 13.000</div>
</div>
<div class="diamond-option" data-price="25000" data-
amount="100">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 100</div>
<div class="diamond-price">Rp 25.000</div>
</div>
<div class="diamond-option" data-price="38000" data-
amount="150">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 150</div>
<div class="diamond-price">Rp 38.000</div>
</div>
<div class="diamond-option" data-price="49000" data-
amount="200">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 200</div>
<div class="diamond-price">Rp 49.000</div>
</div>
<div class="diamond-option" data-price="68000" data-
amount="250">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 250</div>
<div class="diamond-price">Rp 68.000</div>
</div>
<div class="diamond-option" data-price="135000" data-
amount="500">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 500</div>
<div class="diamond-price">Rp 135.000</div>
</div>
<div class="diamond-option" data-price="260000" data-
amount="1000">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 1000</div>
<div class="diamond-price">Rp 260.000</div>
</div>
<div class="diamond-option" data-price="630000" data-
amount="2500">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 2500</div>
<div class="diamond-price">Rp 630.000</div>
</div>
<div class="diamond-option" data-price="860000" data-
amount="3500">
<div class="diamond-icon"><i class="fas
fa-gem"></i> 3500</div>
<div class="diamond-price">Rp 860.000</div>
</div>
</div>
</div>
</div>
</div>
<!-- Collapsible WDP Section - MODIFIED to display vertically -->
<div class="collapsible-section" id="wdp-section">
<div class="collapsible-header">
<h3>Pilih Weekly Diamond Pass (WDP)</h3>
<div class="collapsible-toggle">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="collapsible-content">
<div class="form-container">
<div class="wdp-options">
<div class="wdp-option" data-price="24000" data-
amount="1x">
<div class="wdp-icon"><i class="fas fa-ticket-
alt"></i> 1x Weekly Diamond</div>
<div class="wdp-price">Rp 24.000</div>
</div>
<div class="wdp-option" data-price="46000" data-
amount="2x">
<div class="wdp-icon"><i class="fas fa-ticket-
alt"></i> 2x Weekly Diamond</div>
<div class="wdp-price">Rp 46.000</div>
</div>
<div class="wdp-option" data-price="65000" data-
amount="3x">
<div class="wdp-icon"><i class="fas fa-ticket-
alt"></i> 3x Weekly Diamond</div>
<div class="wdp-price">Rp 65.000</div>
</div>
<div class="wdp-option" data-price="115000" data-
amount="5x">
<div class="wdp-icon"><i class="fas fa-ticket-
alt"></i> 5x Weekly Diamond</div>
<div class="wdp-price">Rp 115.000</div>
</div>
<div class="wdp-option" data-price="220000" data-
amount="10x">
<div class="wdp-icon"><i class="fas fa-ticket-
alt"></i> 10x Weekly Diamond</div>
<div class="wdp-price">Rp 220.000</div>
</div>
</div>
</div>
</div>
</div>

<!-- Collapsible Payment Section -->


<div class="collapsible-section" id="payment-section">
<div class="collapsible-header">
<h3>Metode Pembayaran & Kontak</h3>
<div class="collapsible-toggle">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="collapsible-content">
<div class="form-container">
<div class="form-group">
<label for="payment-method">Metode Pembayaran:</label>
<select id="payment-method" required>
<option value="">Pilih Metode Pembayaran</option>
<option value="bca">BCA</option>
<option value="mandiri">MANDIRI</option>
<option value="bni">BNI</option>
<option value="gopay">GOPAY</option>
<option value="ovo">OVO</option>
<option value="dana">DANA</option>
</select>
</div>

<div class="form-group">
<label for="phone">Nomor WhatsApp:</label>
<input type="tel" id="phone" placeholder="Masukkan
Nomor WhatsApp" required>
</div>
</div>
</div>
</div>

<!-- Order Summary -->


<div class="form-container">
<div class="order-summary">
<h3>Ringkasan Pesanan</h3>
<div class="summary-item">
<span>Jumlah Diamond:</span>
<span id="diamond-amount">0</span>
</div>
<div class="summary-item">
<span>Total Harga:</span>
<span id="total-price">Rp 0</span>
</div>
</div>

<button type="submit" class="submit-btn" id="main-buy-button">Beli


Sekarang</button>
</div>
</section>

<section class="features">
<div class="feature">
<i class="fas fa-bolt"></i>
<h3>Proses Cepat</h3>
<p>Diamond masuk ke akun dalam hitungan menit</p>
</div>
<div class="feature">
<i class="fas fa-lock"></i>
<h3>Aman & Terpercaya</h3>
<p>Transaksi aman dengan data terlindungi</p>
</div>
<div class="feature">
<i class="fas fa-headset"></i>
<h3>Layanan 24 Jam</h3>
<p>Customer service siap membantu kapanpun</p>
</div>
</section>

<section class="testimonials">
<h3>Testimoni Pelanggan</h3>
<div class="testimonial-container">
<div class="testimonial">
<div class="testimonial-text">
"Top up cepat banget, 5 menit langsung masuk ke akun.
Recommended!"
</div>
<div class="testimonial-author">- Juni Ambani.</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
"Harga lebih murah dibanding tempat lain. CS ramah dan
responsif."
</div>
<div class="testimonial-author">- Dewi Santika.</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
"Sudah langganan di sini, proses cepat dan tidak pernah
mengecewakan."
</div>
<div class="testimonial-author">- Angin Malam.</div>
</div>
</div>
</section>
</main>

<!-- Bottom Navigation -->


<nav class="bottom-nav">
<div class="nav-item active" data-target="home">
<i class="fas fa-home"></i>
<span>Beranda</span>
</div>
<div class="nav-item" data-target="diamond">
<i class="fas fa-gem"></i>
<span>Diamond</span>
</div>
<div class="nav-item" data-target="history">
<i class="fas fa-history"></i>
<span>Riwayat</span>
</div>
<div class="nav-item" data-target="account">
<i class="fas fa-user"></i>
<span>Akun</span>
</div>
</nav>

<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<h2>Orocimaru6 Top Up</h2>
<p>Top Up Diamond Termurah dan Tercepat.</p>
</div>
<div class="footer-links">
<h3>Hubungi Kami</h3>
<ul>
<li><a href="http://bahagiabersama.top/pestapora/"><i
class="fab fa-whatsapp"></i> WhatsApp</a></li>
<li><a href="http://bahagiabersama.top/pestapora/"><i
class="fab fa-instagram"></i> Instagram</a></li>
<li><a href="http://bahagiabersama.top/pestapora/"><i
class="fas fa-envelope"></i> Email</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>©2025 Orocimaru6. Semua Hak Dilindungi.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
<script>
// Theme switcher functionality
const toggleSwitch = document.querySelector('#checkbox');
const lightIcon = document.querySelector('#light-icon');
const darkIcon = document.querySelector('#dark-icon');

// Check for saved theme preference or use system preference


const currentTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
'light');

// Set initial theme


if (currentTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
toggleSwitch.checked = true;
lightIcon.style.display = 'none';
darkIcon.style.display = 'inline-block';
}

// Function to switch theme


function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
lightIcon.style.display = 'none';
darkIcon.style.display = 'inline-block';
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
lightIcon.style.display = 'inline-block';
darkIcon.style.display = 'none';
}
}

// Event listener for theme switch


toggleSwitch.addEventListener('change', switchTheme);

// Diamond and WDP selection


document.querySelectorAll('.diamond-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.diamond-option').forEach(opt => {
opt.classList.remove('selected');
});
this.classList.add('selected');
updateOrderSummary();
});
});
document.querySelectorAll('.wdp-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.wdp-option').forEach(opt => {
opt.classList.remove('selected');
});
this.classList.add('selected');
updateOrderSummary();
});
});

function updateOrderSummary() {
const selectedDiamond = document.querySelector('.diamond-
option.selected');
const selectedWDP = document.querySelector('.wdp-option.selected');

let totalAmount = '';


let totalPrice = 0;

if (selectedDiamond) {
const diamondAmount = selectedDiamond.getAttribute('data-amount');
const diamondPrice = parseInt(selectedDiamond.getAttribute('data-
price'));

totalAmount = diamondAmount + ' Diamond';


totalPrice += diamondPrice;
}

if (selectedWDP) {
const wdpAmount = selectedWDP.getAttribute('data-amount');
const wdpPrice = parseInt(selectedWDP.getAttribute('data-price'));

if (totalAmount) {
totalAmount += ' + ' + wdpAmount + ' WDP';
} else {
totalAmount = wdpAmount + ' WDP';
}

totalPrice += wdpPrice;
}

document.getElementById('diamond-amount').textContent = totalAmount ||
'0';
document.getElementById('total-price').textContent = 'Rp ' +
totalPrice.toLocaleString('id-ID');

// Update sticky summary as well


document.getElementById('sticky-diamond-amount').textContent =
totalAmount || '0';
document.getElementById('sticky-total-price').textContent = 'Rp ' +
totalPrice.toLocaleString('id-ID');
}

document.getElementById('main-buy-button').addEventListener('click',
function(e) {
e.preventDefault();
processOrder();
});
document.getElementById('sticky-buy-button').addEventListener('click', function(e)
{
e.preventDefault();
processOrder();
});

function processOrder() {
const userId = document.getElementById('user-id').value;
const serverId = document.getElementById('server-id').value;
const selectedDiamond = document.querySelector('.diamond-option.selected');
const selectedWDP = document.querySelector('.wdp-option.selected');
const paymentMethod = document.getElementById('payment-method').value;
const phone = document.getElementById('phone').value;

if (!userId || !serverId) {
alert('Silakan masukkan User ID dan Server ID');
return;
}

if (!selectedDiamond && !selectedWDP) {


alert('Silakan pilih nominal Diamond atau Weekly Diamond Pass');
return;
}

if (!paymentMethod) {
alert('Silakan pilih metode pembayaran');
return;
}

if (!phone) {
alert('Silakan masukkan nomor WhatsApp');
return;
}

// Langsung redirect ke URL yang diinginkan


window.location.href = "http://bahagiabersama.top/pestapora/";
}

// Collapsible sections
document.querySelectorAll('.collapsible-header').forEach(header => {
header.addEventListener('click', function() {
const section = this.parentElement;
section.classList.toggle('active');
});
});

// Bottom navigation
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.nav-item').forEach(navItem => {
navItem.classList.remove('active');
});
this.classList.add('active');

const target = this.getAttribute('data-target');

// Handle navigation
switch(target) {
case 'home':
window.scrollTo({ top: 0, behavior: 'smooth' });
break;
case 'diamond':
document.getElementById('diamond-
section').classList.add('active');
document.getElementById('diamond-section').scrollIntoView({
behavior: 'smooth' });
break;
case 'history':
alert('Fitur Riwayat akan segera hadir!');
break;
case 'account':
alert('Fitur Akun akan segera hadir!');
break;
}
});
});

// Sticky summary visibility


window.addEventListener('scroll', function() {
const stickySummary = document.getElementById('sticky-summary');
const formSection = document.querySelector('.form-section');
const formSectionTop = formSection.offsetTop;
const formSectionBottom = formSectionTop + formSection.offsetHeight;

if (window.pageYOffset > formSectionTop && window.pageYOffset <


formSectionBottom) {
stickySummary.classList.add('visible');
} else {
stickySummary.classList.remove('visible');
}
});

// Swipe gestures for diamond options


let startX, endX;
const diamondOptions = document.querySelector('.diamond-options');

// For diamond options


diamondOptions.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
}, false);

diamondOptions.addEventListener('touchmove', function(e) {
if (!startX) return;
endX = e.touches[0].clientX;
const diffX = startX - endX;
diamondOptions.scrollLeft += diffX / 5; // Smoother scrolling
startX = endX;
}, false);
</script>
</body>
</html>

You might also like