Spotify
TikTok
YouTube
InstagramCreate your cardDiscord
Balancing Bean mascot
✦ Create Your Bean Card ✦
Fill in all the fields and click the arrow button, your card will appear instantly!
Isi nickname, bean type, dan goal dulu ya!
★ BEAN CLUB ★
♥ OFFICIAL MEMBER ♥
MEMBERSHIP ID
NO. —
···················· >
👤Member photo
♥ BEANS
SUPPORT BEANS ♥
Nickname—
Bean Type—
Fav. Fuel—
Strength—
Goal—
Since—
THE BEARER OF THIS CARD IS AN OFFICIAL BEAN CLUB MEMBER.
SPREAD KINDNESS, STAY CONSISTENT, AND KEEP GROWING! ♥
Keep Growing, Little Bean! ✦
document.querySelectorAll('.bcc-app').forEach(function(app){ function el(cls){ return app.querySelector('.' + cls); } /* barcode decoration */ var bars = el('bcc-bars-target'); if (bars) { [16,20,12,24,16,11,20,14,22,16,12,18,24,11,16,20,14,22,12,18].forEach(function(h){ var s = document.createElement('span'); s.style.height = h + 'px'; bars.appendChild(s); }); } var photoUrl = ''; var fileInput = el('bcc-in-photo'); if (fileInput) { fileInput.addEventListener('change', function(e){ var f = e.target.files[0]; if (!f) return; var r = new FileReader(); r.onload = function(ev){ photoUrl = ev.target.result; }; r.readAsDataURL(f); }); } function fmtDate(v){ if (!v) return '—'; var p = v.split('-'); if (p.length !== 3) return v; var M = ['January','February','March','April','May','June', 'July','August','September','October','November','December']; return M[parseInt(p[1],10)-1] + ' ' + parseInt(p[2],10) + ', ' + p[0]; } function genId(){ var d = new Date(); return 'NO. ' + d.getFullYear() + String(d.getMonth()+1).padStart(2,'0') + String(d.getDate()).padStart(2,'0') + String(Math.floor(Math.random()*900)+100); } var genBtn = el('bcc-btn-go'); if (genBtn) { genBtn.addEventListener('click', function(){ var nick = (el('bcc-in-nick') || {}).value; var bean = (el('bcc-in-bean') || {}).value; var fuel = (el('bcc-in-fuel') || {}).value; var str = (el('bcc-in-str') || {}).value; var goal = (el('bcc-in-goal') || {}).value; var since= (el('bcc-in-since') || {}).value; nick = nick ? nick.trim() : ''; bean = bean ? bean.trim() : ''; goal = goal ? goal.trim() : ''; var err = el('bcc-err'); if (!nick || !bean || !goal) { if (err) err.style.display = 'block'; return; } if (err) err.style.display = 'none'; var setTxt = function(cls, val){ var nodes = app.querySelectorAll('.' + cls); nodes.forEach(function(n){ n.textContent = val || '—'; }); }; setTxt('bcc-out-nick', nick); setTxt('bcc-out-bean', bean); setTxt('bcc-out-fuel', fuel ? fuel.trim() : ''); setTxt('bcc-out-str', str ? str.trim() : ''); setTxt('bcc-out-goal', goal); setTxt('bcc-out-since', fmtDate(since)); setTxt('bcc-out-id', genId()); var img = el('bcc-card-img'); var noPh = el('bcc-card-noph'); if (img && noPh) { if (photoUrl) { img.src = photoUrl; img.style.display = 'block'; noPh.style.display = 'none'; } else { img.style.display = 'none'; noPh.style.display = 'block'; } } var formView = app.querySelector('.bcc-form-view'); var cardView = app.querySelector('.bcc-card-view'); if (formView) formView.style.display = 'none'; if (cardView) { cardView.style.display = 'flex'; cardView.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); } var backBtn = el('bcc-btn-back'); if (backBtn) { backBtn.addEventListener('click', function(){ var formView = app.querySelector('.bcc-form-view'); var cardView = app.querySelector('.bcc-card-view'); if (cardView) cardView.style.display = 'none'; if (formView) formView.style.display = 'block'; }); } var dlBtn = el('bcc-btn-dl'); if (dlBtn) { dlBtn.addEventListener('click', function(){ if (typeof html2canvas === 'undefined') { alert('Gagal memuat fitur download, coba refresh halaman.'); return; } var card = el('bcc-card-target'); if (!card) return; dlBtn.textContent = '⏳ Menyimpan…'; dlBtn.disabled = true; html2canvas(card, { scale: 3, useCORS: true, backgroundColor: '#F8F1E7' }) .then(function(canvas){ var link = document.createElement('a'); link.download = 'bean-club-card.png'; link.href = canvas.toDataURL('image/png'); link.click(); dlBtn.textContent = '✓ Tersimpan!'; setTimeout(function(){ dlBtn.textContent = '⬇ Download'; dlBtn.disabled = false; }, 2000); }) .catch(function(e){ console.error('[BeanCard] download error:', e); dlBtn.textContent = '⬇ Download'; dlBtn.disabled = false; }); }); } });