Skip to content

Instantly share code, notes, and snippets.

@khannedy

khannedy/checkout.html

Last active December 5, 2024 14:28
Show Gist options
  • Save khannedy/b2dc0694f1dc1225138f16532080b466 to your computer and use it in GitHub Desktop.
Save khannedy/b2dc0694f1dc1225138f16532080b466 to your computer and use it in GitHub Desktop.
Download ZIP
Flashsale Template (for learning)
Raw
checkout.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pembayaran</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.btn-success {
background-color: #4caf50;
border: none;
}
.btn-success:hover {
background-color: #43a047;
}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="text-center mb-4 text-uppercase">Pembayaran</h1>
<div class="col-md-3 mx-auto mb-3">
<div class="card">
<img src="https://via.placeholder.com/300x300.png" class="card-img-top rounded" alt="Nama Produk">
<div class="card-body text-center">
<h5 class="card-title">Nama Produk</h5>
<p class="card-text text-success fw-bold">
Rp. 1000</p>
</div>
</div>
</div>
<div class="card shadow p-4 mx-auto" style="max-width: 500px;">
<form action="/pay/1" method="post">
<div class="mb-3">
<label for="nama" class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" id="nama" name="customer_name" required>
</div>
<div class="mb-3">
<label for="alamat" class="form-label">Alamat Pengiriman</label>
<textarea class="form-control" id="alamat" name="customer_address" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-success w-100">Bayar Sekarang</button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Raw
failed.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terjadi Kesalahan</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.btn-primary {
background-color: #d9534f;
border: none;
}
.btn-primary:hover {
background-color: #c9302c;
}
</style>
</head>
<body>
<div class="container text-center py-5">
<div class="card shadow p-4 mx-auto" style="max-width: 600px;">
<h1 class="mb-4 text-uppercase text-danger">Terjadi Kesalahan!</h1>
<p class="fs-5">Pesanan Anda gagal diproses. Silakan coba lagi nanti atau hubungi layanan pelanggan.</p>
<a href="/products" class="btn btn-primary">Kembali ke Beranda</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Raw
products.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flash Sale</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.card {
border: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn-primary {
background-color: #ff5722;
border: none;
}
.btn-primary:hover {
background-color: #e64a19;
}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="text-center mb-5 text-uppercase fw-bold text-danger">🚀 Flash Sale - Limited Time Offer! 🚀</h1>
<div class="row g-4">
<div class="col-md-3">
<div class="card">
<img src="https://via.placeholder.com/300x300.png" class="card-img-top rounded" alt="Nama Produk">
<div class="card-body text-center">
<h5 class="card-title">Nama Produk</h5>
<p class="card-text text-success fw-bold">
Rp. 1000</p>
<a href="/checkout/1" class="btn btn-primary">Beli Sekarang</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Raw
success.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terima Kasih</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.btn-primary {
background-color: #ff5722;
border: none;
}
.btn-primary:hover {
background-color: #e64a19;
}
</style>
</head>
<body>
<div class="container text-center py-5">
<div class="card shadow p-4 mx-auto" style="max-width: 600px;">
<h1 class="mb-4 text-uppercase">Terima Kasih!</h1>
<p class="fs-5">Pesanan Anda telah berhasil diproses. Kami akan segera mengirimkan produk Anda.</p>
<a href="/products" class="btn btn-primary">Kembali ke Beranda</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment