Tambah Produk
Beranda Produk
Output HTML (Klik untuk Copy)
Belum ada output...
✔ Disalin!
<!DOCTYPE html>
<html>
<head>
<meta expr:charset='data:blog.encoding'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<style>
.output-box {
width: 100%;
background: #f5f5f5;
border: 1px solid #ccc;
padding: 12px;
margin-top: 25px;
border-radius: 6px;
white-space: pre-wrap;
cursor: pointer;
}
.output-box:hover { background: #e8e8e8; }
.toast {
position: fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#00c853;
color:#fff;
padding:10px 20px;
border-radius:8px;
display:none;
}
.form-box input, .form-box select {
width:100%;
padding:8px;
margin-bottom:10px;
border-radius:6px;
border:1px solid #ccc;
}
button {
padding:10px;
border:none;
border-radius:6px;
background:#00b0ff;
color:white;
width:100%;
}
</style>
</head>
<body>
<h3>Tambah Produk</h3>
<form id="addProductForm" class="form-box">
Nama Produk:<br>
<input type="text" id="name" required>
Toko:<br>
<input type="text" id="shop" required>
Kategori:<br>
<select id="category" required>
<option value="Elektronik">Elektronik</option>
<option value="Fashion">Fashion</option>
<option value="Makanan">Makanan</option>
</select>
Harga Asli:<br>
<input type="number" id="originalPrice" required>
Harga Diskon:<br>
<input type="number" id="discountPrice" required>
Stok Barang (contoh: 1/2/habis):<br>
<input type="text" id="stock" required>
Rating (1–5):<br>
<input type="number" id="rating" min="1" max="5" required>
URL Gambar:<br>
<input type="text" id="imgURL" required>
URL Pembelian:<br>
<input type="text" id="buyURL" required>
<button type="submit">Tambah Produk</button>
</form>
<h3>Beranda Produk</h3>
<div id="productContainer"></div>
<h3>Output HTML (Klik untuk Copy)</h3>
<div id="outputBox" class="output-box">Belum ada output...</div>
<div id="toast" class="toast">✔ Disalin!</div>
<script>
document.getElementById("addProductForm").addEventListener("submit", function(e){
e.preventDefault();
const name = document.getElementById("name").value;
const shop = document.getElementById("shop").value;
const category = document.getElementById("category").value;
const originalPrice = document.getElementById("originalPrice").value;
const discountPrice = document.getElementById("discountPrice").value;
const imgURL = document.getElementById("imgURL").value;
const buyURL = document.getElementById("buyURL").value;
const stock = document.getElementById("stock").value;
const rating = document.getElementById("rating").value;
const date = new Date().toLocaleDateString("id-ID");
let stars = "";
for(let i=0; i<rating; i++) stars += "⭐";
const cardHTML = `
<div class="card" style="border-radius: 8px; border: 1px solid rgb(221,221,221); box-sizing: border-box; display: inline-block; margin: 10px; padding: 10px; vertical-align: top; width: 180px; position:relative;">
<div style='position:absolute; top:5px; left:5px; background:#ff0000; color:white; padding:2px 5px; font-size:11px; border-radius:4px;'>Stock: ${stock}</div>
<div onclick="alert('Ditambahkan ke troli: ${name}')"
style="position:absolute; top:5px; right:5px; background:white; border-radius:50%; padding:5px; box-shadow:0 0 4px rgba(0,0,0,0.3); cursor:pointer;">
🛒
</div>
<img alt="${name}" src="${imgURL}" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 5px; border: 1px solid rgb(238,238,238); box-shadow: rgba(0,0,0,0.1) 1px 1px 5px; box-sizing: border-box; display: block; height: auto; max-width: 100%; padding: 5px; width: 158px;" />
<div class="title" style="box-sizing: border-box; font-weight: bold; margin-top: 5px;">${name}</div>
<div class="shop" style="box-sizing: border-box; color: #555; font-size: 12px;">${shop}</div>
<div class="category" style="box-sizing: border-box; color: #555; font-size: 12px;">${category}</div>
<div class="price" style="box-sizing: border-box; font-weight: bold; margin-top: 5px;">
Rp ${discountPrice}
<span class="old-price" style="box-sizing: border-box; color: #999; font-size: 12px; margin-left: 5px; text-decoration-line: line-through;">Rp ${originalPrice}</span>
</div>
<div class="date" style="box-sizing: border-box; margin-top:4px; font-size:10px;">
${stars} | ${date}
</div>
<a class="button" href="${buyURL}" style="background: rgb(0,191,255); border-radius: 5px; box-sizing: border-box; color: white; display: block; margin-top: 8px; padding: 5px; text-decoration-line: none;">Beli Sekarang</a>
</div>`.trim();
const temp = document.createElement("div");
temp.innerHTML = cardHTML;
document.getElementById("productContainer").appendChild(temp.firstElementChild);
document.getElementById("outputBox").textContent = cardHTML;
this.reset();
});
document.getElementById("outputBox").addEventListener("click", function(){
navigator.clipboard.writeText(this.textContent).then(() => {
const t = document.getElementById("toast");
t.style.display = "block";
setTimeout(()=> t.style.display="none", 1200);
});
});
</script>
</body>
</html>
No comments:
Post a Comment