All Prompts
All Prompts
formcheckoutenrollmentpricingpaymentmoderndarkresponsiveinteractivegradient
Course Enrollment Checkout Form
Форма оформления курса: выбор тарифа, оплата, информация о курсе. Интерактивные элементы, купоны, безопасные платежи.
Prompt
<div class="bg-gray-950 bg-cover py-20 w-full">
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');
</style>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-6">
<div class="rounded-2xl border border-white/10 bg-gradient-to-b from-gray-900/70 to-black p-6">
<div class="flex items-center justify-between">
<h3 class="text-lg tracking-tight text-white" style="font-family: 'Geist', 'Inter', sans-serif;">Secure checkout</h3>
<span class="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white" style="font-family: 'Geist', 'Inter', sans-serif;">SSL 256‑bit</span>
</div>
<p class="mt-1 text-sm text-gray-400" style="font-family: 'Geist', 'Inter', sans-serif;">Complete your enrollment. No hidden fees.</p>
<form class="mt-6 space-y-4" id="enroll-form">
<div>
<label for="plan" class="block text-sm mb-1 text-white" style="font-family: 'Geist', 'Inter', sans-serif;">Plan</label>
<div class="grid grid-cols-3 gap-2">
<button type="button" data-plan="Starter" data-amount="149" class="plan-btn col-span-1 px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-sm hover:bg-white/10 text-white transition-colors" style="font-family: 'Geist', 'Inter', sans-serif;">Starter</button>
<button type="button" data-plan="Pro" data-amount="299" class="plan-btn col-span-1 px-3 py-2 rounded-lg border border-blue-400/30 bg-blue-400/10 text-sm hover:bg-blue-400/20 ring-1 ring-inset ring-blue-400/30 text-white transition-colors" style="font-family: 'Geist', 'Inter', sans-serif;">Pro</button>
<button type="button" data-plan="Team" data-amount="1490" class="plan-btn col-span-1 px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-sm hover:bg-white/10 text-white transition-colors" style="font-family: 'Geist', 'Inter', sans-serif;">Team</button>
</div>
</div>
<div>
<label for="email" class="block text-sm mb-1 text-white" style="font-family: 'Geist', 'Inter', sans-serif;">Email</label>
<input id="email" name="email" type="email" required="" placeholder="you@company.com" class="w-full placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-white bg-black/40 border-white/10 border rounded-lg pt-2 pr-3 pb-2 pl-3" style="font-family: 'Geist', 'Inter', sans-serif;">
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label for="name" class="block text-sm mb-1 text-white" style="font-family: 'Geist', 'Inter', sans-serif;">Full name</label>
<input id="name" name="name" type="text" required="" placeholder="Jane Doe" class="w-full placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-white bg-black/40 border-white/10 border rounded-lg pt-2 pr-3 pb-2 pl-3" style="font-family: 'Geist', 'Inter', sans-serif;">
</div>
<div>
<label for="country" class="block text-sm mb-1 text-white" style="font-family: 'Geist', 'Inter', sans-serif;">Country</label>
<select id="country" name="country" class="w-full focus:outline-none focus:ring-2 focus:ring-blue-500 bg-black/40 border-white/10 border rounded-lg pt-2 pr-3 pb-2 pl-3 text-sm text-white" style="font-family: 'Geist', 'Inter', sans-serif;">
<option style="font-family: 'Geist', 'Inter', sans-serif; background-color: #000; color: #fff;">United States</option>
<option style="font-family: 'Geist', 'Inter', sans-serif; background-color: #000; color: #fff;">Canada</option>
<option style="font-family: 'Geist', 'Inter', sans-serif; background-color: #000; color: #fff;">United Kingdom</option>
<option style="font-family: 'Geist', 'Inter', sans-serif; background-color: #000; color: #fff;">Germany</option>
<option style="font-family: 'Geist', 'Inter', sans-serif; background-color: #000; color: #fff;">India</option>
<option style="font-family: 'Geist', 'Inter', sans-serif; background-color: #000; color: #fff;">Australia</option>
<option style="font-family: 'Geist', 'Inter', sans-serif; background-color: #000; color: #fff;">Other</option>
</select>
</div>
</div>
<div>
<label for="coupon" class="block text-sm mb-1 text-white" style="font-family: 'Geist', 'Inter', sans-serif;">Coupon code</label>
<div class="flex gap-2">
<input id="coupon" name="coupon" type="text" placeholder="REACTPRO10" class="w-full placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-white bg-black/40 border-white/10 border rounded-lg pt-2 pr-3 pb-2 pl-3" style="font-family: 'Geist', 'Inter', sans-serif;">
<button type="button" id="apply-coupon" class="px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-sm hover:bg-white/10 text-white transition-colors" style="font-family: 'Geist', 'Inter', sans-serif;">Apply</button>
</div>
<p id="coupon-msg" class="mt-1 text-xs text-gray-500" style="font-family: 'Geist', 'Inter', sans-serif;"></p>
</div>
<div class="pt-4 border-t border-white/10">
<dl class="text-sm space-y-2">
<div class="flex items-center justify-between">
<dt class="text-gray-400" style="font-family: 'Geist', 'Inter', sans-serif;">Selected plan</dt>
<dd id="summary-plan" class="text-gray-200" style="font-family: 'Geist', 'Inter', sans-serif;">Pro</dd>
</div>
<div class="flex items-center justify-between">
<dt class="text-gray-400" style="font-family: 'Geist', 'Inter', sans-serif;">Subtotal</dt>
<dd id="summary-subtotal" class="text-gray-200" style="font-family: 'Geist', 'Inter', sans-serif;">$299</dd>
</div>
<div class="flex items-center justify-between">
<dt class="text-gray-400" style="font-family: 'Geist', 'Inter', sans-serif;">Discount</dt>
<dd id="summary-discount" class="text-blue-300" style="font-family: 'Geist', 'Inter', sans-serif;">-$0</dd>
</div>
<div class="flex items-center justify-between font-medium pt-2 border-t border-white/10">
<dt class="text-white" style="font-family: 'Geist', 'Inter', sans-serif;">Total</dt>
<dd id="summary-total" class="text-white" style="font-family: 'Geist', 'Inter', sans-serif;">$299</dd>
</div>
</dl>
<button type="submit" class="mt-4 inline-flex w-full items-center justify-center gap-2 px-4 py-2.5 rounded-full text-sm bg-blue-400 text-black hover:bg-blue-300 transition-all" style="font-family: 'Geist', 'Inter', sans-serif;">
Pay securely
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</button>
<p class="mt-3 text-xs text-gray-500 text-center" style="font-family: 'Geist', 'Inter', sans-serif;">By continuing you agree to the Terms and Privacy Policy.</p>
</div>
</form>
</div>
<div class="border-white/10 border rounded-2xl bg-black/20 backdrop-blur-xl pt-6 pr-6 pb-6 pl-6">
<h3 class="text-lg tracking-tight text-white" style="font-family: 'Geist', 'Inter', sans-serif;">What you'll get</h3>
<ul class="mt-4 space-y-3 text-sm text-gray-300">
<li class="flex items-start gap-3" style="font-family: 'Geist', 'Inter', sans-serif;">
Lifetime access to all lessons and updates
<span class="mt-0.5 inline-flex w-6 h-6 items-center justify-center rounded-md bg-white/5 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-teal-300">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</span>
</li>
<li class="flex items-start gap-3" style="font-family: 'Geist', 'Inter', sans-serif;">
Full project codebases and walkthroughs
<span class="mt-0.5 inline-flex w-6 h-6 items-center justify-center rounded-md bg-white/5 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-teal-300">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</span>
</li>
<li class="flex items-start gap-3" style="font-family: 'Geist', 'Inter', sans-serif;">
Community support and career tips
<span class="mt-0.5 inline-flex w-6 h-6 items-center justify-center rounded-md bg-white/5 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-teal-300">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</span>
</li>
<li class="flex items-start gap-3" style="font-family: 'Geist', 'Inter', sans-serif;">
Pro plan: code reviews and certificate
<span class="mt-0.5 inline-flex w-6 h-6 items-center justify-center rounded-md bg-white/5 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-teal-300">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</span>
</li>
</ul>
<div class="mt-8 rounded-xl border border-white/10 bg-black/40 p-4">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=96&auto=format&fit=crop" alt="Student" class="w-10 h-10 rounded-full object-cover border border-white/10">
<div>
<p class="text-sm text-gray-200" style="font-family: 'Geist', 'Inter', sans-serif;">"This course helped me refactor a legacy app and ship features twice as fast."</p>
<p class="text-xs text-gray-500 mt-1" style="font-family: 'Geist', 'Inter', sans-serif;">— Jamie, Frontend Engineer</p>
</div>
</div>
</div>
<div class="mt-6 grid sm:grid-cols-2 gap-3">
<div class="flex items-center gap-2 text-sm text-gray-400" style="font-family: 'Geist', 'Inter', sans-serif;">
14‑day money back
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
<path d="M3 3v5h5"></path>
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
<path d="M16 16h5v5"></path>
</svg>
</div>
<div class="flex items-center gap-2 text-sm text-gray-400" style="font-family: 'Geist', 'Inter', sans-serif;">
Safe & secure checkout
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {const planBtns = document.querySelectorAll('.plan-btn');const summaryPlan = document.getElementById('summary-plan');const summarySubtotal = document.getElementById('summary-subtotal');const summaryTotal = document.getElementById('summary-total');const summaryDiscount = document.getElementById('summary-discount');const applyCouponBtn = document.getElementById('apply-coupon');const couponInput = document.getElementById('coupon');const couponMsg = document.getElementById('coupon-msg');let currentAmount = 299;let currentPlan = 'Pro';let discountAmount = 0;planBtns.forEach(btn => {btn.addEventListener('click', function() {planBtns.forEach(b => {b.classList.remove('border-blue-400/30', 'bg-blue-400/10', 'ring-1', 'ring-inset', 'ring-blue-400/30');b.classList.add('border-white/10', 'bg-white/5');});this.classList.remove('border-white/10', 'bg-white/5');this.classList.add('border-blue-400/30', 'bg-blue-400/10', 'ring-1', 'ring-inset', 'ring-blue-400/30');currentPlan = this.dataset.plan;currentAmount = parseInt(this.dataset.amount);updateSummary();});});function updateSummary() {summaryPlan.textContent = currentPlan;summarySubtotal.textContent = '$' + currentAmount;const total = currentAmount - discountAmount;summaryTotal.textContent = '$' + total;summaryDiscount.textContent = '-$' + discountAmount;}applyCouponBtn.addEventListener('click', function() {const code = couponInput.value.trim().toLowerCase();if (code === 'reactpro10') {discountAmount = Math.floor(currentAmount * 0.1);couponMsg.textContent = '10% discount applied!';couponMsg.className = 'mt-1 text-xs text-green-400';} else if (code === '') {couponMsg.textContent = 'Please enter a coupon code.';couponMsg.className = 'mt-1 text-xs text-red-400';} else {couponMsg.textContent = 'Invalid coupon code.';couponMsg.className = 'mt-1 text-xs text-red-400';}updateSummary();});document.getElementById('enroll-form').addEventListener('submit', function(e) {e.preventDefault();alert('Form submitted! This is a demo component.');});});
</script>
</div>