e85802e3.js

let shareButton,startButton,fireworks=[],clicked=!1,userName="",nomorWA="",showModal=!0,confetti=[],candleLightIntensity=0,horns=[],modalY=0,isDragging=!1,startY=0,currentY=0;const generateHashedId=t=>{const e=(new TextEncoder).encode(t);let o=0;for(let t=0;t<e.length;t++)o=(o<<5)-o+e[t],o|=0;return`id_${Math.abs(o).toString(16)}`},idMap={modal:generateHashedId("modal"),inputName:generateHashedId("inputName"),inputPhone:generateHashedId("inputPhone"),modalContent:generateHashedId("modal-content")},wishes=["Semoga panjang umur dan sehat selalu! 🎂","Wish you all the best! May all your dreams come true! 🌟","Selamat ulang tahun! Semoga sukses selalu! 🎉","Happy Birthday! Semoga bahagia selalu! 🎊","Selamat bertambah usia! Tetap semangat! 💪"];let audioContext,birthdayAudio,skeletonTimeout,isLoading=!0;function createSkeletonLoader(){const t=window.matchMedia("(prefers-color-scheme: dark)").matches,e=createDiv("");e.class("skeleton-modal"),e.style("background","rgba(0,0,0,0.8)"),e.style("position","fixed"),e.style("top","0"),e.style("left","0"),e.style("width","100%"),e.style("height","100%"),e.style("display","flex"),e.style("justify-content","center"),e.style("align-items","center"),e.style("z-index","999");const o=createDiv("");o.class("skeleton-content"),o.style("padding","20px"),o.style("border-radius","20px"),o.style("text-align","center"),o.style("width","80%"),o.style("max-width","500px"),o.style("position",window.innerWidth<=768?"absolute":"relative"),o.style("bottom",window.innerWidth<=768?"10px":"0"),o.style("background-color",t?"#1e1e1e":"#ffffff");const a=createDiv("");a.class("skeleton-swipe"),a.style("width","40px"),a.style("height","4px"),a.style("background-color",t?"#333":"#ddd"),a.style("border-radius","2px"),a.style("margin","0 auto 15px auto"),a.style("display",window.innerWidth<=768?"block":"none");const n=createDiv("");n.class("skeleton-title skeleton-animation"),n.style("height","24px"),n.style("width","60%"),n.style("margin","15px auto"),n.style("background-color",t?"#333":"#eee"),n.style("border-radius","4px");const s=createDiv("");s.class("skeleton-input skeleton-animation"),s.style("height","45px"),s.style("width","80%"),s.style("margin","10px auto"),s.style("background-color",t?"#333":"#eee"),s.style("border-radius","5px");const r=createDiv("");r.class("skeleton-input skeleton-animation"),r.style("height","45px"),r.style("width","80%"),r.style("margin","10px auto"),r.style("background-color",t?"#333":"#eee"),r.style("border-radius","5px");const i=createDiv("");return i.class("skeleton-button skeleton-animation"),i.style("height","45px"),i.style("width","120px"),i.style("margin","10px auto"),i.style("background-color",t?"#333":"#eee"),i.style("border-radius","5px"),o.child(a),o.child(n),o.child(s),o.child(r),o.child(i),e.child(o),e}function initAudio(){audioContext||(audioContext=new(window.AudioContext||window.webkitAudioContext),birthdayAudio=new Audio("./hbd.mp3"),birthdayAudio.loop=!0)}document.addEventListener("visibilitychange",(()=>{document.hidden?birthdayAudio&&birthdayAudio.pause():clicked&&birthdayAudio&&birthdayAudio.play().catch(console.error)})),window.addEventListener("pageshow",(t=>{t.persisted&&(fireworks=[],confetti=[],clicked&&birthdayAudio&&birthdayAudio.play().catch(console.error))}));class Horn{constructor(t,e,o){this.x=t,this.y=e,this.isLeft=o,this.angle=o?-PI/4:PI/4,this.blowing=!1}draw(){push(),translate(this.x,this.y),rotate(this.angle),fill(218,165,32),rect(0,0,60,20),ellipse(60,10,30,30),this.blowing&&random()>.5&&this.createConfetti(),pop()}createConfetti(){for(let t=0;t<3;t++){let t=p5.Vector.random2D();t.mult(random(2,5)),confetti.push({x:this.x+(this.isLeft?60:-60),y:this.y,vx:t.x,vy:t.y,color:color(random(255),random(255),random(255)),rotation:random(TWO_PI)})}}}function updateOGMetadata(t,e){const o={"og:title":`Selamat Ulang Tahun ${t} 🎉`,"og:description":`Selamat Ulang Tahun ${t}! ${e}`,"og:image":"https://4211421036.github.io/hbd/hbd.jpg","og:url":window.location.href,"og:type":"website","twitter:card":"summary_large_image","twitter:title":`Selamat Ulang Tahun ${t} 🎉`,"twitter:description":`Selamat Ulang Tahun ${t}! ${e}`,"twitter:image":"https://4211421036.github.io/hbd/hbd.jpg"};Object.entries(o).forEach((([t,e])=>{let o=document.querySelector(`meta[property="${t}"]`);o||(o=document.createElement("meta"),o.setAttribute("property",t),document.head.appendChild(o)),o.setAttribute("content",e)})),document.title=`Selamat Ulang Tahun ${t} 🎉`}function createModal(){if(showModal){const e=select(".skeleton-modal");function t(){const t=createSkeletonLoader();skeletonTimeout=setTimeout((()=>{isLoading=!1,t.remove();const e=createDiv("");e.style("background","rgba(0,0,0,0.8)"),e.style("position","fixed"),e.style("top","0"),e.style("left","0"),e.style("width","100%"),e.style("height","100%"),e.style("display","flex"),e.style("justify-content","center"),e.style("align-items","center"),e.style("z-index","1000"),e.style("transition","transform 0.3s ease"),e.id(idMap.modal),e.attribute("role","document"),e.attribute("tabindex","0");const o=createDiv("");o.style("background","radial-gradient(100% 193.51% at 100% 0%, #EDF4F8 0%, #EFF2FA 16.92%, #FAEFF6 34.8%, #FAE6F2 48.8%, #FAF0F7 63.79%, #F1F1FB 81.34%, #F0F4F8 100%);"),o.style("padding","20px"),o.style("border-radius","20px"),o.style("text-align","center"),o.style("width","80%"),o.style("max-width","500px"),o.style("position","relative"),o.style("touch-action","none"),o.style("transition","transform 0.5s ease"),o.style("bottom","0"),o.style("transform","translateY(0)"),o.id(idMap.modalContent),o.attribute("role","document");const a=createDiv("");a.style("width","40px"),a.style("height","4px"),a.style("background-color","rgb(205 205 205)"),a.style("border-radius","2px"),a.style("margin","0 auto 15px auto");const n=window.matchMedia("(prefers-color-scheme: dark)").matches,s=createDiv("");s.style("width","100%"),s.style("text-align","left");const r=createP("Siapa yang ulang tahun?");r.attribute("role","text"),r.style("font-size","18px"),r.style("font-weight","bold"),r.style("text-align","center"),r.style("margin-bottom","20px");const i=createDiv("");i.style("margin","0 auto"),i.style("width","80%");const l=createInput("");l.id(idMap.inputName),l.attribute("aria-label","Nama yang Ulang Tahun"),l.attribute("name","name"),l.attribute("autocomplete","name"),l.attribute("required","true"),l.style("padding","10px"),l.style("width","100%"),l.style("border","1px solid #ddd"),l.style("border-radius","5px"),l.style("font-size","16px"),l.style("margin-bottom","15px"),l.attribute("placeholder","Nama yang Ulang Tahun");const d=createDiv("");d.style("margin","0 auto"),d.style("width","80%");const u=createInput("");u.id(idMap.inputPhone),u.attribute("name","phone"),u.attribute("autocomplete","tel"),u.attribute("pattern","\\+62[0-9]{9,}"),u.style("padding","10px"),u.style("width","100%"),u.style("border","1px solid #ddd"),u.style("border-radius","5px"),u.style("font-size","16px"),u.style("margin-bottom","15px"),u.attribute("placeholder","Nomor WA (dimulai dengan 62)"),l.attribute("autofocus","true");const c=createButton("OK");c.style("margin","10px auto"),c.style("display","block"),c.style("padding","10px 30px"),c.style("background","rgb(52 127 56)"),c.attribute("accesskey","n"),c.attribute("type","submit"),c.attribute("role","button"),isDragging||startButton.hide(),c.style("border","none"),c.style("border-radius","5px"),c.style("cursor","pointer"),c.style("font-size","16px"),c.mousePressed((()=>function(){if(userName=l.value(),nomorWA=u.value(),""!==userName.trim()&&nomorWA.startsWith("62")){showModal=!1,clicked=!0,select(`#${idMap.modal}`).remove(),startButton.remove();const t=wishes[Math.floor(Math.random()*wishes.length)];updateOGMetadata(userName,t);const e=`${window.location.origin}${window.location.pathname}?name=${encodeURIComponent(userName)}`;window.shareableUrl=e,initAudio(),birthdayAudio.play().catch((t=>{console.log("Audio playback failed:",t)}))}else alert("Pastikan nomor WA dimulai dengan 62.")}())),o.child(a),o.child(r),i.child(l),d.child(u),s.child(i),s.child(d),s.child(c),o.child(s),e.child(o);let h=select(`#${idMap.modalContent}`).elt;h.addEventListener("touchstart",handleTouchStart,!1),h.addEventListener("touchmove",handleTouchMove,!1),h.addEventListener("touchend",handleTouchEnd,!1),window.innerWidth<=768?(o.style("position","absolute"),o.style("bottom","10px"),a.style("display","block")):a.style("display","none"),n?(e.style("background","rgba(0,0,0,0.8)"),o.style("backgroundColor","#1e1e1e"),o.style("color","#ffffff"),a.style("backgroundColor","#333"),c.style("background","rgb(52 127 56)"),l.style("background","#2c2c2c"),l.style("color","#ffffff"),l.style("border","1px solid #444"),u.style("background","#2c2c2c"),u.style("color","#ffffff"),u.style("border","1px solid #444")):(e.style("background","rgba(255, 246, 246, 0.8)"),o.style("background","radial-gradient(100% 193.51% at 100% 0%, #EDF4F8 0%, #EFF2FA 16.92%, #FAEFF6 34.8%, #FAE6F2 48.8%, #FAF0F7 63.79%, #F1F1FB 81.34%, #F0F4F8 100%)"),o.style("color","#000000"),c.style("background","rgb(115 235 121)"),a.style("backgroundColor","rgb(205 205 205)"),l.style("background","#ffffff"),l.style("color","#000000"),u.style("background","#ffffff"),u.style("color","#000000")),e.style("opacity","0"),o.style("opacity","0"),requestAnimationFrame((()=>{requestAnimationFrame((()=>{e.style("opacity","1"),o.style("opacity","1"),o.style("transform","translateY(0)")}))}))}),300)}e&&e.remove(),document.fonts?document.fonts.load("14px Arial, sans-serif").then((()=>{t()})):t()}}function cleanup(){skeletonTimeout&&clearTimeout(skeletonTimeout);const t=select(".skeleton-modal");t&&t.remove()}function handleTouchStart(t){startY=t.touches[0].clientY,isDragging=!0,currentY=0}function handleTouchMove(t){if(!isDragging)return;currentY=t.touches[0].clientY-startY,currentY<0&&(currentY=0);select(`#${idMap.modalContent}`).elt.style.transform=`translateY(${currentY}px)`}function handleTouchEnd(){startButton.position(windowWidth/2-100,windowHeight/2-25),startButton.style("width","max-content"),startButton.style("height","max-content"),startButton.style("font-size","16px"),isDragging=!1;const t=select(`#${idMap.modalContent}`).elt;currentY>150?(showModal=!1,select(`#${idMap.modal}`).remove(),startButton.show()):t.style.transform="translateY(0)"}function createStartButton(){startButton=createButton("Selamat Ulang Tahun! 🎂"),startButton.position(windowWidth/2-100,windowHeight/2-25),startButton.style("padding","15px 30px"),startButton.style("background-color","#FF4081"),startButton.style("color","white"),startButton.style("border","none"),startButton.style("border-radius","25px"),startButton.style("cursor","pointer"),startButton.style("font-size","18px"),startButton.style("box-shadow","0 4px 8px rgba(0,0,0,0.2)"),startButton.style("transition","all 0.3s ease"),startButton.style("z-index","999"),startButton.style("transform","translateX(-5%)"),startButton.attribute("role","button"),startButton.attribute("type","button"),startButton.attribute("aria-label","Selamat Ulang Tahun 🎂"),startButton.hide(),startButton.mousePressed((()=>{startButton.hide(),showModal=!0,createModal()})),startButton.mouseOver((()=>{startButton.style("transform","scale(1.05)"),startButton.style("box-shadow","0 6px 12px rgba(0,0,0,0.3)")})),startButton.mouseOut((()=>{startButton.style("transform","scale(1)"),startButton.style("box-shadow","0 4px 8px rgba(0,0,0,0.2)")}))}function getUrlParams(){return{name:new URLSearchParams(window.location.search).get("name")}}function initializeApp(){const t=getUrlParams();if(t.name){userName=decodeURIComponent(t.name);const e=wishes[Math.floor(Math.random()*wishes.length)];return updateOGMetadata(userName,e),showModal=!1,clicked=!0,initAudio(),birthdayAudio.play().catch((t=>{console.log("Audio playback failed:",t)})),startButton&&startButton.remove(),!0}return!1}function shareToWhatsApp(){const t=`${wishes[Math.floor(Math.random()*wishes.length)]}\nUcapkan selamat ulang tahun untuk ${userName}!`,e=window.shareableUrl||`${window.location.origin}${window.location.pathname}?name=${encodeURIComponent(userName)}`,o=encodeURIComponent(t),a=`https://wa.me/${nomorWA}?text=${o}%0A${encodeURIComponent(e)}`;window.open(a,"_blank")}function createShareButton(){shareButton=createButton("Download & Share to WhatsApp 📱"),shareButton.style("padding","20px 10px"),shareButton.style("background","rgb(12 77 36 / 50%)"),shareButton.style("color","white"),shareButton.style("border","none"),shareButton.style("border-radius","10px"),shareButton.style("cursor","pointer"),shareButton.style("backdrop-filter","blur(15px)"),shareButton.style("font-size","16px"),shareButton.style("z-index","1000"),shareButton.style("position","absolute"),shareButton.style("left","50%"),shareButton.style("bottom","10px"),shareButton.style("transform","translateX(-50%)"),shareButton.attribute("role","alertdialog"),shareButton.attribute("aria-label","Share Sosial Media"),shareButton.attribute("accesskey","s"),shareButton.attribute("role","button"),shareButton.attribute("type","button"),shareButton.hide(),shareButton.mousePressed(shareToWhatsApp)}function setup(){createCanvas(windowWidth,windowHeight),rectMode(CENTER);initializeApp()||(createStartButton(),createModal()),horns.push(new Horn(50,50,!0)),horns.push(new Horn(width-50,50,!1)),createShareButton()}function windowResized(){resizeCanvas(windowWidth,windowHeight);const t=select(".skeleton-content");t&&(t.style("position",window.innerWidth<=768?"absolute":"relative"),t.style("bottom",window.innerWidth<=768?"10px":"0")),shareButton&&(shareButton.style("left","50%"),shareButton.style("transform","translateX(-50%)")),startButton&&(startButton.style("left","50%"),startButton.style("top","50%"),startButton.style("transform","translate(-50%, -50%)"))}function draw(){background(0,0,0,25);let t=window.innerWidth<=768,e=t?30:50,o=t?15:20;if(clicked){horns.forEach((t=>{t.blowing=!0,t.draw()}));for(let t=confetti.length-1;t>=0;t--){let e=confetti[t];e.x+=e.vx,e.y+=e.vy,e.vy+=.1,e.rotation+=.1,push(),translate(e.x,e.y),rotate(e.rotation),fill(e.color),rect(0,0,5,5),pop(),e.y>height&&confetti.splice(t,1)}candleLightIntensity=sin(.1*frameCount)*o+50,textSize(e);let a=candleLightIntensity/255;for(let t=20;t>0;t--){fill(255,200,0,a*(t/20)*255),textAlign(CENTER,CENTER),text(`Selamat Ulang Tahun\n${userName}!`,width/2+random(-1,1),height/2+random(-1,1))}fill(255,255,255),text(`Selamat Ulang Tahun\n${userName}!`,width/2,height/2),t&&shareButton.show();for(let t of fireworks)t.step()}else fill(255,255,255,10),noStroke(),textAlign(CENTER,CENTER),text("Klik untuk memulai",width/2,height/2)}function mouseReleased(){if(clicked&&mouseY<windowHeight&&mouseX<windowWidth){let t={x:mouseX,y:mouseY};fireworks.push(new Firework(t))}}