Selamat Datang!
Silakan isi data Anda
M. Fahrul
Online sekarang
Halo! Ada yang bisa kami bantu? š
š” Bikin Order Makin Gampang! Form dengan Upload Gambar Siap Naikin Konversi
Semua yang Anda Butuhkan untuk Kustomisasi Tanpa Batas
Kami menghilangkan semua kerumitan. Fokus pada kreativitas Anda, biarkan kami yang mengurus sisanya dengan cepat, mudah, dan terpercaya.
Upload bukti transfer customermu, dapatkan url gambarnya di WhatsApp.
Saksikan interaksi pelangganmu bertransformasi. Ubah sesuai keinginanmu ya.
<section class="bg-gray-50 py-12 md:py-16">
<div class="container mx-auto max-w-lg px-4">
<!-- Main Card -->
<div class="bg-white rounded-lg shadow-lg p-6 md:p-8 text-gray-800">
<div class="text-center">
<h1 class="text-2xl md:text-3xl font-bold mb-2 custom-cursor">Selesaikan Pembayaran Pulsa</h1>
<p class="text-gray-600 mb-6 custom-cursor">Silakan transfer ke rekening Bank Jago berikut ini:</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Logo-jago.svg/1200px-Logo-jago.svg.png" alt="Logo Bank Jago" class="h-12 mx-auto mb-6 custom-cursor">
</div>
<!-- Wrapper for content blocks with consistent spacing -->
<div class="space-y-8">
<!-- Detail Rekening -->
<div>
<h2 class="text-lg font-semibold mb-2 custom-cursor">Detail Rekening Bank:</h2>
<div class="bg-blue-50 p-4 rounded-md border border-blue-100">
<p class="text-sm text-gray-700 mb-1 custom-cursor">
<span class="font-medium custom-cursor">Bank Tujuan:</span> Bank Jago
</p>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white p-3 rounded-md border border-blue-200 mt-2 gap-3 sm:gap-4">
<span id="account-number" class="font-mono text-lg md:text-xl font-bold text-purple-700 select-all custom-cursor">
502142812682
</span>
<button id="copy-button" class="flex items-center justify-center bg-purple-700 text-white text-sm px-4 py-2 rounded-md hover:bg-purple-800 transition duration-200 active:scale-95 focus:outline-none focus:ring focus:ring-purple-300 w-full sm:w-auto flex-shrink-0 custom-cursor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 custom-cursor" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
Salin Nomor
</button>
</div>
<p class="text-sm text-gray-700 mt-3 custom-cursor">
<span class="font-medium custom-cursor">Atas Nama:</span> M. Fahrul Alam Yuniarsa
</p>
<p class="text-xs text-gray-500 mt-1 italic custom-cursor">Pastikan nama penerima sudah sesuai.</p>
</div>
</div>
<!-- Form Upload Bukti Transfer -->
<div>
<h2 class="text-lg font-semibold mb-2 custom-cursor">Upload Bukti Transfer:</h2>
<div class="bg-gray-50 p-4 rounded-md border border-gray-200">
<p class="text-center text-sm text-gray-600 mb-4 custom-cursor">
Pilih gambar bukti transfer, lalu klik tombol untuk mengirim konfirmasi ke WhatsApp kami.
</p>
<form id="uploadForm" class="custom-cursor">
<input type="file" id="imageInput" accept="image/*" required="" class="block w-full text-sm text-gray-500 mb-4 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100 cursor-pointer">
<button type="submit" id="submitButton" class="w-full bg-[#25D366] text-white font-bold py-3 px-4 rounded-full hover:bg-[#128C7E] transition duration-300 flex items-center justify-center text-base custom-cursor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 custom-cursor" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.518.759a1.65 1.65 0 00-1.074 2.474l3.363 3.363a1.65 1.65 0 002.474-1.074l.759-1.518a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
</svg>
Kirim ke WhatsApp
</button>
</form>
<div id="status" class="text-center mt-3 font-semibold text-sm"></div>
</div>
</div>
<!-- Instruksi Konfirmasi -->
<div>
<h3 class="text-lg font-semibold flex items-center mb-2 custom-cursor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-500 mr-2 custom-cursor" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
Penting: Jangan Lupa Konfirmasi!
</h3>
<p class="text-gray-700 bg-yellow-50 p-4 rounded-md border border-yellow-200 text-sm custom-cursor">
Setelah transfer, mohon segera upload bukti pembayaran di atas agar pesanan pulsa Anda dapat segera kami proses.
</p>
</div>
</div>
<!-- End of content blocks wrapper -->
</div>
<!-- End of Main Card -->
</div>
<!-- End of Container -->
<!-- All JavaScript is placed here at the end -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- PENGATURAN FORM UPLOAD ---
const apiKey = '0197e394-d521-7-b3bb-20622fd2f7056777';
const noWhatsApp = '6281230272157'; // GANTI DENGAN NOMOR WA ANDA
// -----------------------------
const uploadForm = document.getElementById('uploadForm');
const imageInput = document.getElementById('imageInput');
const statusDiv = document.getElementById('status');
const submitButton = document.getElementById('submitButton');
const copyButton = document.getElementById('copy-button');
const accountNumberSpan = document.getElementById('account-number');
// 1. Script untuk Form Upload ke WhatsApp
if (uploadForm) {
uploadForm.addEventListener('submit', function(event) {
event.preventDefault();
const file = imageInput.files[0];
if (!file) {
statusDiv.textContent = 'ā ļø Silakan pilih file terlebih dahulu.';
statusDiv.style.color = '#ef4444';
return;
}
submitButton.disabled = true;
statusDiv.textContent = 'ā³ Mengupload gambar...';
statusDiv.style.color = '#3b82f6';
const formData = new FormData();
formData.append('file', file);
fetch(`https://tapsite.ai/api/assets?auth_id=${apiKey}`, {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
return response.json().then(errData => {
throw new Error(errData.error?.message || `HTTP error! Status: ${response.status}`);
});
}
return response.json();
})
.then(data => {
// --- LANGKAH DIAGNOSTIK: CETAK RESPON MENTAH KE KONSOL ---
console.log('--- RESPON MENTAH DARI TAPSITE ---');
console.log(JSON.stringify(data, null, 2)); // Ini akan menampilkan struktur JSON dengan rapi
// --- PERBAIKAN: BUAT LOGIKA LEBIH FLEKSIBEL ---
let imageUrl = null;
// Coba cari URL di beberapa lokasi umum
if (data && data.url) {
// Kemungkinan 1: { "url": "..." }
imageUrl = data.url;
} else if (data && data.data && data.data.url) {
// Kemungkinan 2: { "data": { "url": "..." } }
imageUrl = data.data.url;
} else if (data && data.link) {
// Kemungkinan 3: { "link": "..." }
imageUrl = data.link;
}
// Tambahkan `else if` lain di sini jika Anda menemukan struktur lain dari console.log
if (imageUrl) {
// Jika URL berhasil ditemukan
statusDiv.textContent = 'ā
Upload berhasil! Mengalihkan ke WhatsApp...';
statusDiv.style.color = '#16a34a';
const pesan = `Halo, saya ingin konfirmasi pembayaran pulsa.\n\nBerikut bukti transfer saya:\n${imageUrl}`;
const whatsappUrl = `https://wa.me/${noWhatsApp}?text=${encodeURIComponent(pesan)}`;
setTimeout(() => {
window.location.href = whatsappUrl;
submitButton.disabled = false;
}, 1000);
} else {
// Jika URL tetap tidak ditemukan setelah semua pengecekan
throw new Error('Format respons API tidak dikenali. Cek console untuk detail.');
}
})
.catch(error => {
console.error('Error saat upload:', error);
statusDiv.textContent = `ā Gagal: ${error.message}`;
statusDiv.style.color = '#ef4444';
submitButton.disabled = false;
});
});
}
// 2. Script untuk Tombol "Salin Nomor"
if (copyButton && accountNumberSpan) {
copyButton.addEventListener('click', function() {
const accountNumber = accountNumberSpan.textContent.trim();
navigator.clipboard.writeText(accountNumber).then(function() {
const originalContent = copyButton.innerHTML;
copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg> Tersalin!`;
copyButton.classList.remove('bg-purple-700', 'hover:bg-purple-800');
copyButton.classList.add('bg-green-600');
setTimeout(function() {
copyButton.innerHTML = originalContent;
copyButton.classList.remove('bg-green-600');
copyButton.classList.add('bg-purple-700', 'hover:bg-purple-800');
}, 2000);
}, function(err) {
console.error('Gagal menyalin teks: ', err);
alert('Gagal menyalin nomor rekening. Mohon salin secara manual.');
});
});
}
});
</script>
</section>Unggah desain Anda, pilih ukuran, tentukan jumlah, dan berikan catatan khusus. Semua dalam satu antarmuka yang mudah digunakan.
Saksikan interaksi pelangganmu bertransformasi. Ubah sesuai keinginanmu ya.
<section class="py-16 lg:py-24 bg-white">
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="text-center mb-16" id="order">
<h2 class="text-3xl lg:text-5xl font-bold text-gray-900 mb-6 custom-cursor">
Wujudkan Imajinasi Anda -
<span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-blue-500 custom-cursor">
Kami yang Kerjakan!
</span>
</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-8 custom-cursor">
Dari ide hingga produk jadi, hanya butuh 1 hari kerja. Kreativitas tanpa batas, kualitas tanpa kompromi.
</p>
<div class="inline-flex items-center gap-3 bg-gradient-to-r from-orange-500 to-red-500 text-white px-6 py-3 rounded-full shadow-lg">
<span class="text-xl custom-cursor">ā”</span>
<span class="font-bold custom-cursor">Express Production: Selesai dalam 24 Jam!</span>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">
<!-- Left Side: Custom Options -->
<div class="space-y-8">
<h3 class="text-2xl lg:text-3xl font-bold text-gray-900 custom-cursor">
Opsi Kustomisasi Lengkap
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<!-- Option Cards -->
<div class="option-card group p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl border border-blue-100 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center text-white text-3xl mx-auto mb-4 group-hover:scale-110 transition-transform">
šø
</div>
<h4 class="text-xl font-bold text-gray-900 mb-2 custom-cursor">Upload Foto Pribadi</h4>
<p class="text-gray-600 text-sm leading-relaxed custom-cursor">Momen spesial yang ingin diabadikan</p>
</div>
</div>
<div class="option-card group p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl border border-purple-100 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center text-white text-3xl mx-auto mb-4 group-hover:scale-110 transition-transform">
šØ
</div>
<h4 class="text-xl font-bold text-gray-900 mb-2 custom-cursor">Pilih Karakter Favorit</h4>
<p class="text-gray-600 text-sm leading-relaxed custom-cursor">Anime, kartun, atau tokoh kesayangan</p>
</div>
</div>
<div class="option-card group p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl border border-green-100 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center text-white text-3xl mx-auto mb-4 group-hover:scale-110 transition-transform">
š
</div>
<h4 class="text-xl font-bold text-gray-900 mb-2 custom-cursor">Tentukan Ukuran</h4>
<p class="text-gray-600 text-sm leading-relaxed custom-cursor">A4 (21x30cm) atau A3 (30x42cm)</p>
</div>
</div>
<div class="option-card group p-6 bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl border border-orange-100 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="text-center">
<div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-2xl flex items-center justify-center text-white text-3xl mx-auto mb-4 group-hover:scale-110 transition-transform">
āļø
</div>
<h4 class="text-xl font-bold text-gray-900 mb-2 custom-cursor">Custom Shape Cutting</h4>
<p class="text-gray-600 text-sm leading-relaxed custom-cursor">Dipotong sesuai bentuk karakter</p>
</div>
</div>
</div>
</div>
<!-- Right Side: Custom Order Form -->
<div class="bg-gradient-to-br from-gray-50 to-blue-50 rounded-3xl p-8 shadow-xl">
<div class="text-center mb-6">
<h3 class="text-2xl font-bold text-gray-900 mb-2 custom-cursor">Buat Pesanan Custom Anda</h3>
<p class="text-gray-600 custom-cursor">Isi form di bawah untuk memulai kreasi Anda</p>
</div>
<form id="customOrderForm" class="space-y-6 custom-cursor">
<!-- File Upload Area -->
<div>
<label for="imageInputOrder" class="block text-sm font-semibold text-gray-700 mb-2">Upload Desain Anda</label>
<input type="file" id="imageInputOrder" name="image" accept="image/*" required="" class="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100 cursor-pointer">
<p id="imageStatus" class="text-xs text-gray-500 mt-1 custom-cursor"></p>
</div>
<!-- Size and Quantity Row -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="customSize" class="block text-sm font-semibold text-gray-700 mb-2">Ukuran</label>
<select id="customSize" name="size" class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500" required="">
<option value="">Pilih Ukuran</option>
<option value="A4 (21x30cm)">A4 (21x30cm)</option>
<option value="A3 (30x42cm)">A3 (30x42cm)</option>
</select>
</div>
<div>
<label for="customQuantity" class="block text-sm font-semibold text-gray-700 mb-2">Jumlah</label>
<input type="number" id="customQuantity" name="quantity" min="1" value="1" class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500" required="">
</div>
</div>
<!-- Special Notes -->
<div>
<label for="customNotes" class="block text-sm font-semibold text-gray-700 mb-2">Catatan Khusus (Opsional)</label>
<textarea id="customNotes" name="notes" rows="3" class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 resize-none" placeholder="Contoh: Tambahkan tulisan 'Happy Birthday', ganti background, dll."></textarea>
</div>
<!-- Submit Button -->
<button type="submit" id="submitButton" class="w-full relative px-8 py-4 bg-gradient-to-r from-teal-500 to-blue-500 text-white font-bold text-lg rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 custom-cursor">
<span class="flex items-center justify-center gap-3 custom-cursor">
<span class="custom-cursor">šØ</span>
<span id="buttonText" class="custom-cursor">Pesan Sekarang via WhatsApp</span>
<span class="custom-cursor">→</span>
</span>
</button>
<p id="formStatus" class="text-center text-sm font-semibold custom-cursor"></p>
</form>
</div>
</div>
</div>
<!-- SCRIPT UTAMA - Diubah untuk menggunakan TAPSITE API -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- PENGATURAN ---
const TAPSITE_AUTH_ID = '0197e394-d521-7-b3bb-20622fd2f7056777'; // API Key dari Tapsite
const WHATSAPP_NUMBER = '6285784408881'; // Ganti dengan nomor WA tujuan Anda
// ------------------
const form = document.getElementById('customOrderForm');
const imageInput = document.getElementById('imageInputOrder');
const imageStatus = document.getElementById('imageStatus');
const submitButton = document.getElementById('submitButton');
const buttonText = document.getElementById('buttonText');
const formStatus = document.getElementById('formStatus');
if (form) {
// Tampilkan nama file jika dipilih
imageInput.addEventListener('change', () => {
if (imageInput.files.length > 0) {
imageStatus.textContent = `File dipilih: ${imageInput.files[0].name}`;
imageStatus.style.color = 'green';
} else {
imageStatus.textContent = '';
}
});
// Proses saat form disubmit
form.addEventListener('submit', async function(event) {
event.preventDefault();
if (imageInput.files.length === 0) {
formStatus.textContent = 'ā ļø Harap pilih gambar desain Anda.';
formStatus.style.color = '#ef4444';
return;
}
submitButton.disabled = true;
buttonText.textContent = 'Memproses...';
formStatus.textContent = 'Mengupload gambar Anda, mohon tunggu...';
formStatus.style.color = '#3b82f6';
// UPLOAD MENGGUNAKAN TAPSITE API
const formData = new FormData();
// Penting: Tapsite menggunakan key 'file', bukan 'image'
formData.append('file', imageInput.files[0]);
try {
const response = await fetch(`https://tapsite.ai/api/assets?auth_id=${TAPSITE_AUTH_ID}`, {
method: 'POST',
body: formData,
});
const result = await response.json();
// Cetak respons ke console untuk debugging
console.log('Respon dari Tapsite API:', result);
if (!response.ok) {
throw new Error(result.error?.message || `HTTP error! Status: ${response.status}`);
}
// Cari URL gambar di dalam respons (logika fleksibel)
let imageUrl = null;
if (result && result.url) {
imageUrl = result.url;
} else if (result && result.data && result.data.url) {
imageUrl = result.data.url;
}
if (imageUrl) {
// JIKA SUKSES
formStatus.textContent = 'ā
Upload berhasil! Menyiapkan pesan WhatsApp...';
formStatus.style.color = '#16a34a';
const customSize = document.getElementById('customSize').value;
const customQuantity = document.getElementById('customQuantity').value;
const customNotes = document.getElementById('customNotes').value;
const message = `Halo, saya ingin pesan custom design dengan detail berikut:
-----------------------------------
š¼ļø *Link Desain:* ${imageUrl}
š *Ukuran:* ${customSize}
š¢ *Jumlah:* ${customQuantity} pcs
š *Catatan Tambahan:* ${customNotes || 'Tidak ada catatan khusus.'}
-----------------------------------
Mohon informasikan total biayanya. Terima kasih! š`;
const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`;
window.location.href = whatsappUrl;
setTimeout(() => form.reset(), 3000);
} else {
// JIKA GAGAL (format respons tidak dikenali)
throw new Error('Format respons API tidak dikenali. Cek console.');
}
} catch (error) {
console.error('Error:', error);
formStatus.textContent = `ā Terjadi Kesalahan: ${error.message}`;
formStatus.style.color = '#ef4444';
} finally {
submitButton.disabled = false;
buttonText.textContent = 'Pesan Sekarang via WhatsApp';
}
});
}
});
</script>
</section>INTEGRASI CEPAT & EFISIEN
Buka potensi upload tanpa batas. Ikuti panduan sederhana ini untuk mendapatkan API key dan mulai mengotomatiskan alur kerja Anda.
Langkah pertama adalah mengakses halaman manajemen aset Tapsite. Di sinilah semua file Anda tersimpan dan API key Anda berada.
Buka Halaman Aset TapsiteSetelah berada di halaman aset, cari tombol bertuliskan Panduan API. Tombol ini akan membuka pop-up yang berisi semua informasi teknis yang Anda butuhkan.
Di dalam panduan, Anda akan melihat API Key unik Anda. Salin API key Anda dan ikuti contoh kode untuk melakukan upload gambar menggunakan HTTP POST request. Selamat mengotomatiskan!
Silakan isi data Anda
Online sekarang
Halo! Ada yang bisa kami bantu? š