অ্যানিমেটেড পেমেন্ট কার্ড ডিজাইন: HTML, CSS ও JS দিয়ে তৈরি করুন আকর্ষণীয় চেকআউট পেজ

 

”নিচে দেওয়া ভিডিওটি দেখে আপনি কোডটির লাইভ ডেমো দেখে নিতে পারেন।”

অ্যানিমেটেড পেমেন্ট কার্ড ডিজাইন: HTML, CSS এবং JavaScript দিয়ে তৈরি করুন আকর্ষণীয় চেকআউট পেজ

বর্তমান সময়ে ওয়েব ডিজাইনের জগতে Glassmorphism বা স্বচ্ছ কাঁচের মতো ডিজাইন অত্যন্ত জনপ্রিয় হয়ে উঠেছে। আপনি যদি আপনার ওয়েবসাইট বা ই-কমার্স প্রজেক্টের জন্য একটি আধুনিক এবং প্রিমিয়াম লুকিং পেমেন্ট কার্ড সেকশন তৈরি করতে চান, তবে আজকের এই পোস্টটি আপনার জন্য। আজ আমি আপনাদের সাথে শেয়ার করবো একটি Animated Payment Card তৈরির কোড, যা দেখতে যেমন সুন্দর, তেমনি এটি ব্যবহারে ইউজার এক্সপেরিয়েন্সও (UX) অনেক উন্নত হবে।

কেন এই অ্যানিমেটেড কার্ডটি বিশেষ?

এই প্রজেক্টটিতে আমরা সাধারণ ডিজাইনের বাইরে গিয়ে কিছু অ্যাডভান্সড ফিচার যুক্ত করেছি:

1. রিয়েল-টাইম প্রিভিউ: ইউজার যখন নিচের ইনপুট বক্সে তাদের নাম বা কার্ড নম্বর লিখবেন, তখন সাথে সাথেই উপরের ভার্চুয়াল কার্ডে সেই তথ্যগুলো আপডেট হবে।

2. অটো-ফ্লিপ অ্যানিমেশন: কার্ডের পেছনের অংশে সাধারণত CVV নম্বর থাকে। এই কোডটিতে এমনভাবে জাভাস্ক্রিপ্ট ব্যবহার করা হয়েছে যে, যখনই ইউজার CVV ইনপুট বক্সে ক্লিক করবেন, কার্ডটি স্বয়ংক্রিয়ভাবে ১৮০ ডিগ্রি ঘুরে গিয়ে পেছনের অংশ দেখাবে।

3. গ্লাসমরফিজম স্টাইল: CSS-এর backdrop-filter এবং হালকা গ্রাডিয়েন্ট ব্যবহার করে কার্ডটিতে একটি স্বচ্ছ কাঁচের মতো লুক দেওয়া হয়েছে।

কোডটি কীভাবে ব্যবহার করবেন?

আপনার সুবিধার্থে আমি পুরো কোডটিকে চারটি ভাগে ভাগ করে দিয়েছি: HTML, CSS, JavaScript এবং যারা সরাসরি ব্লগারে ব্যবহার করতে চান তাদের জন্য একটি কম্বাইন্ড Blogger Code। নিচে প্রতিটি সেকশনের কাজ সংক্ষেপে আলোচনা করা হলো:

১. HTML (কাঠামো তৈরি)

HTML ফাইলের মাধ্যমে আমরা কার্ডের সামনের এবং পেছনের অংশ এবং ইনপুট ফর্মের লেআউট তৈরি করেছি। এখানে প্রতিটি ইনপুট ফিল্ডের একটি নির্দিষ্ট id দেওয়া আছে, যাতে জাভাস্ক্রিপ্ট সহজেই সেগুলোকে খুঁজে পায়।

২. CSS (ডিজাইন ও স্টাইলিং)

এই সেকশনেই আসল ম্যাজিক! আমরা এখানে perspective প্রোপার্টি ব্যবহার করেছি যাতে কার্ডটি ঘোরার সময় একটি থ্রিডি (3D) ফিল দেয়। এছাড়া কালার হিসেবে গাঢ় বেগুনি এবং সাদার মিশ্রণ ব্যবহার করা হয়েছে যা একটি লাক্সারি ভাইব দেয়।

৩. JavaScript (কার্যকারিতা)

জাভাস্ক্রিপ্ট ব্যবহার করা হয়েছে ইন্টারঅ্যাক্টিভিটির জন্য। কার্ড নম্বর টাইপ করার সময় প্রতি ৪ ডিজিট পর পর অটো স্পেস তৈরি হওয়া এবং CVV ফিল্ডে ফোকাস করলে কার্ড ঘুরে যাওয়ার ফাংশনটি এখান থেকেই নিয়ন্ত্রিত হয়।

ডেভেলপারদের জন্য নির্দেশাবলী:

আপনি যদি আপনার সাইটে এই কার্ডটি যুক্ত করতে চান, তবে নিচের ধাপগুলো অনুসরণ করুন:

• প্রথমে আপনার প্রজেক্ট ফোল্ডারে index.html, style.css এবং script.js নামে তিনটি ফাইল তৈরি করুন।

• নিচের বক্স থেকে কোডগুলো কপি করে নিজ নিজ ফাইলে পেস্ট করুন।

• আপনি চাইলে CSS ফাইলে গিয়ে কার্ডের ব্যাকগ্রাউন্ড কালার বা ফন্ট পরিবর্তন করে নিজের ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ করে নিতে পারেন।

উপসংহার

একটি সাধারণ স্ট্যাটিক চেকআউট পেজের চেয়ে এই ধরণের ইন্টারঅ্যাক্টিভ ডিজাইন ইউজারদের মনে আপনার সাইট সম্পর্কে একটি ইতিবাচক ধারণা তৈরি করে। যারা নতুন ওয়েব ডেভেলপমেন্ট শিখছেন, তাদের জন্য এটি একটি চমৎকার প্র্যাকটিস প্রজেক্ট হতে পারে।

নিচের কপি বাটন ব্যবহার করে কোডটি সংগ্রহ করুন এবং আপনার প্রজেক্টে ব্যবহার শুরু করুন। যদি কোনো সমস্যা হয় বা কোড বুঝতে অসুবিধা হয়, তবে অবশ্যই কমেন্ট বক্সে জানাবেন। আমি আপনাদের সাহায্য করতে পেরে খুশি হবো।

ধন্যবাদ PDF Pedia BD এর সাথে থাকার জন্য।

Blogger html code

<div class="card-demo-wrapper"> <div class="container"> <div class="card"> <div class="card-inner" id="card-inner"> <div class="front"> <div class="top-row"> <div class="chip"></div> <div class="visa-text">VISA</div> </div> <div class="card-no-display" id="display-number">0000 0000 0000 0000</div> <div class="card-info-row"> <div class="info-col"> <span class="label">CARD HOLDER</span> <span class="value" id="display-name" style="font-size: 13px !important;">YOUR NAME HERE</span> </div> <div class="info-col" style="text-align: right;"> <span class="label">EXPIRES</span> <span class="value" id="display-date">MM/YY</span> </div> </div> </div> <div class="back"> <div class="black-strip"></div> <div class="signature-bar" id="display-signature">YOUR NAME HERE</div> <div class="back-footer"> <div class="cvv-sticker" id="display-cvv">...</div> </div> </div> </div> </div> <form class="checkout-form" onsubmit="return false;"> <h2 class="form-title">Payment Details</h2> <div class="input-group"> <label>Card Number</label> <input type="text" id="input-number" maxlength="19" placeholder="0000 0000 0000 0000"> </div> <div class="input-group"> <label>Card Holder</label> <input type="text" id="input-name" placeholder="YOUR NAME HERE"> </div> <div class="flex-row"> <div class="input-group" style="flex: 2;"> <label>Expiration Date</label> <div class="date-inputs"> <select id="input-month" class="custom-select"> <option value="MM" selected disabled>MM</option> <option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option> </select> <select id="input-year" class="custom-select"> <option value="YY" selected disabled>YY</option> <option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option> </select> </div> </div> <div class="input-group" style="flex: 1;"> <label>CVV</label> <input type="text" id="input-cvv" maxlength="3" placeholder="123"> </div> </div> <button type="button" class="pay-btn">Pay Now</button> </form> </div> </div> <style> /* 🎯 গ্লোবাল রিসেট ও লেআউট ফিক্স */ .card-demo-wrapper { width: 100%; min-height: 600px; display: flex; align-items: center; justify-content: center; background: #1a0633; border-radius: 15px; padding: 30px 15px; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; } /* ব্লজারের ডিফল্ট স্টাইল ওভাররাইড */ .card-demo-wrapper *, .card-demo-wrapper *::before { box-sizing: border-box !important; border: none !important; text-decoration: none !important; box-shadow: none !important; line-height: 1.2 !important; color: #ffffff !important; margin: 0; padding: 0; } .container { width: 100%; max-width: 450px; background: rgba(255, 255, 255, 0.05); padding: 30px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* 💳 কার্ড স্ট্রাকচার ফিক্স */ .card { width: 330px; height: 195px; margin: 0 auto 35px; perspective: 1000px; } .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .card-inner.flip { transform: rotateY(180deg); } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; background: #4a267a !important; box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important; overflow: hidden; } .front { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .top-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; } .chip { width: 45px; height: 35px; background: #ffca28 !important; border-radius: 6px; } .visa-text { font-size: 24px; font-weight: bold; font-style: italic; } .card-no-display { font-size: 22px; letter-spacing: 2px; margin: 25px 0; text-align: center; width: 100%; display: block; } /* 🖋️ এলাইনমেন্ট ফিক্স */ .card-info-row { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; } .info-col { display: flex; flex-direction: column; gap: 4px; } .label { font-size: 10px !important; opacity: 0.8; letter-spacing: 1px; display: block; } .value { font-size: 15px !important; font-weight: 500; text-transform: uppercase; display: block; } .back { transform: rotateY(180deg); } .black-strip { width: 100%; height: 40px; background: #111 !important; margin-top: 20px; } .signature-bar { background: #fff !important; height: 35px; width: 85%; margin: 15px auto; display: flex; align-items: center; padding-left: 10px; border-radius: 4px; color: #333 !important; font-style: italic; } .back-footer { position: absolute; bottom: 20px; right: 20px; } .cvv-sticker { background: #fff !important; color: #000 !important; padding: 5px 10px; border-radius: 4px; font-weight: bold; } /* 🛠️ ফর্ম স্টাইল */ .form-title { margin-bottom: 20px; font-size: 18px; text-align: left; } .input-group { margin-bottom: 15px; width: 100%; } .input-group label { display: block; color: #ccc !important; font-size: 11px; margin-bottom: 5px; text-align: left; } .input-group input, .custom-select { width: 100%; padding: 12px; background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 8px; outline: none; } .custom-select option { background-color: #1d033e !important; color: #ffffff !important; } .flex-row { display: flex; gap: 15px; width: 100%; } .date-inputs { display: flex; gap: 8px; } .pay-btn { width: 100%; padding: 15px; background: #6f42c1 !important; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 10px; } </style> <script> (function() { const run = () => { const get = (id) => document.getElementById(id); const card = get('card-inner'); const iNum = get('input-number'), iName = get('input-name'), iM = get('input-month'), iY = get('input-year'), iC = get('input-cvv'); const dNum = get('display-number'), dName = get('display-name'), dDate = get('display-date'), dCVV = get('display-cvv'), dSig = get('display-signature'); if(iNum) iNum.oninput = (e) => { let v = e.target.value.replace(/\D/g,'').substring(0,16); let fmt = v.match(/.{1,4}/g)?.join(' ') || ''; e.target.value = fmt; dNum.innerText = fmt || "#### #### #### ####"; }; if(iName) iName.oninput = (e) => { let v = e.target.value; dName.innerText = v.toUpperCase() || "YOUR NAME HERE"; if(dSig) dSig.innerText = v || "YOUR NAME HERE"; }; const updateDate = () => { let mm = (iM.value !== 'MM') ? iM.value : 'MM'; let yy = (iY.value !== 'YY') ? iY.value : 'YY'; dDate.innerText = mm + '/' + yy; }; if(iM) iM.onchange = updateDate; if(iY) iY.onchange = updateDate; if(iC) { iC.oninput = (e) => dCVV.innerText = e.target.value || "..."; iC.onfocus = () => card.classList.add('flip'); iC.onblur = () => card.classList.remove('flip'); } }; if (document.readyState === 'complete') run(); else window.addEventListener('load', run); })(); </script>

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Glassmorphism Card</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <!-- Card Area --> <div class="card"> <!-- এই card-inner টাই ঘুরবে --> <div class="card-inner" id="card-inner"> <!-- Front Side --> <div class="front"> <div class="top-row"> <div class="chip"></div> <div class="visa-text">VISA</div> </div> <div class="card-no-display" id="display-number">#### #### #### ####</div> <div class="card-info"> <div class="holder-section"> <p>CARD HOLDER</p> <h3 id="display-name">FULL NAME</h3> </div> <div class="expiry-section"> <p>EXPIRES</p> <h3 id="display-date">MM/YY</h3> </div> </div> </div> <!-- Back Side (হুবহু ছবির মতো) --> <div class="back"> <div class="black-strip"></div> <div class="signature-container"> <div class="signature-bar" id="display-signature">FULL NAME</div> </div> <div class="back-footer"> <div class="visa-back">VISA</div> <div class="cvv-sticker" id="display-cvv">...</div> </div> </div> </div> </div> <!-- Payment Form --> <form class="checkout-form"> <h2 class="form-title">Payment Details</h2> <div class="input-group"> <label>Card Number</label> <input type="text" id="input-number" maxlength="19" placeholder="1234 5678 9347 5083"> </div> <div class="input-group"> <label>Card Holder</label> <input type="text" id="input-name" placeholder="deveQUE"> </div> <div class="flex-row"> <div class="input-group"> <label>Expiration Date</label> <div class="date-inputs"> <select id="input-month"> <option value="MM" selected disabled>MM</option> <option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option> </select> <select id="input-year"> <option value="YY" selected disabled>YY</option> <option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option> </select> </div> </div> <div class="input-group"> <label>CVV</label> <input type="text" id="input-cvv" maxlength="3" placeholder="123"> </div> </div> <button type="button" class="pay-btn">Pay Now</button> </form> </div> <script src="script.js"></script> </body> </html>

Style.css

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #1d033e, #2d0055); } .container { width: 480px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px; border-radius: 20px; } /* 3D Card Animation CSS */ .card { width: 330px; height: 195px; margin: 0 auto 35px; perspective: 1000px; /* থ্রিডি ইফেক্টের জন্য জরুরি */ } .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } /* JS দিয়ে এই ক্লাসটি যোগ হলে কার্ডটি ঘুরবে */ .card-inner.flip { transform: rotateY(180deg); } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* মিরর হওয়া বন্ধ করবে */ border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); color: #fff; background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } /* --- FRONT SIDE DESIGN --- */ .front { padding: 18px; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; /* ফ্রন্ট সবসময় উপরে থাকবে */ } .top-row { display: flex; justify-content: space-between; align-items: flex-start; } .chip { width: 40px; height: 32px; background: #e0b000; border-radius: 4px; } .visa-text { font-size: 20px; font-weight: bold; font-style: italic; } .card-no-display { font-size: 19px; letter-spacing: 2px; margin-top: 10px; } p { font-size: 8px; opacity: 0.8; margin-bottom: 2px; } h3 { font-size: 10px; font-weight: 500; text-transform: uppercase; } /* --- BACK SIDE DESIGN (হুবহু ছবির মতো) --- */ .back { transform: rotateY(180deg); /* ব্যাক সাইড আগে থেকেই উল্টো করে রাখা হয়েছে */ z-index: 1; } .black-strip { width: 100%; height: 38px; background: #1a1a1a; margin-top: 20px; } .signature-container { padding: 15px; } .signature-bar { background: #fff; height: 32px; width: 85%; color: #333; font-size: 11px; display: flex; align-items: center; padding-left: 10px; border-radius: 3px; font-style: italic; } .back-footer { position: absolute; bottom: 12px; right: 15px; display: flex; flex-direction: column; align-items: flex-end; } .visa-back { font-size: 18px; font-weight: bold; font-style: italic; opacity: 0.9; margin-bottom: 2px; } .cvv-sticker { background: #fff; color: #000; padding: 3px 8px; border-radius: 4px; font-weight: bold; font-size: 11px; min-width: 38px; text-align: center; } /* --- FORM DESIGN --- */ .form-title { color: #fff; font-size: 18px; margin-bottom: 20px; font-weight: 400; text-align: left; } .input-group { margin-bottom: 15px; } label { display: block; color: #ccc; font-size: 11px; margin-bottom: 5px; } input, select { width: 100%; padding: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; color: #fff; font-size: 13px; outline: none; } option { background: #1d033e; color: #fff; } .flex-row { display: flex; gap: 15px; } .date-inputs { display: flex; gap: 8px; } .pay-btn { width: 100%; padding: 12px; background: linear-gradient(90deg, #6c3ff2, #a43ff2); border: none; border-radius: 8px; color: #fff; cursor: pointer; margin-top: 10px; font-weight: bold; }

Script.js

document.addEventListener('DOMContentLoaded', () => { // সরাসরি card-inner কে টার্গেট করা হয়েছে const cardInner = document.getElementById('card-inner'); const inputNumber = document.getElementById('input-number'); const inputName = document.getElementById('input-name'); const inputMonth = document.getElementById('input-month'); const inputYear = document.getElementById('input-year'); const inputCVV = document.getElementById('input-cvv'); const displayNumber = document.getElementById('display-number'); const displayName = document.getElementById('display-name'); const displayDate = document.getElementById('display-date'); const displayCVV = document.getElementById('display-cvv'); const displaySignature = document.getElementById('display-signature'); // কার্ড নম্বর ফরম্যাটিং inputNumber.addEventListener('input', (e) => { let val = e.target.value.replace(/\D/g, '').substring(0, 16); val = val.match(/.{1,4}/g)?.join(' ') || ''; e.target.value = val; displayNumber.innerText = val || "#### #### #### ####"; }); // নাম আপডেট inputName.addEventListener('input', (e) => { let val = e.target.value; displayName.innerText = val.toUpperCase() || "FULL NAME"; // পেছনের সিগনেচার বারে নাম আপডেট হবে displaySignature.innerText = val || "FULL NAME"; }); // তারিখ আপডেট const updateDate = () => { displayDate.innerText = `${inputMonth.value}/${inputYear.value}`; }; inputMonth.addEventListener('change', updateDate); inputYear.addEventListener('change', updateDate); // CVV আপডেট inputCVV.addEventListener('input', (e) => { displayCVV.innerText = e.target.value || "..."; }); // CVV-তে ক্লিক করলে কার্ড ঘুরবে inputCVV.addEventListener('focus', () => { cardInner.classList.add('flip'); }); // CVV থেকে ক্লিক সরালে কার্ড আগের অবস্থায় আসবে inputCVV.addEventListener('blur', () => { cardInner.classList.remove('flip'); }); });