<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>feed rss</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ayiedadevafsun/je-es@main/Fd.css">
</head>
<body>
<div id="feedContainer"></div>
<script src="https://cdn.jsdelivr.net/gh/Ayiedadevafsun/je-es@main/Fd.js"></script>
</body>
</html>
Safelink Converter
🔗
✔️
👍 Berhasil! Link Anda sudah diamankan.
Contoh Tombol Download dengan efek loading
5
<!-- Tombol Get File Awal -->
<div style="text-align:center; margin-top:50px;">
<a id="getFileBtn" href="javascript:void(0);"
style="padding:15px 30px; background:#4caf50; color:#fff;
text-decoration:none; border-radius:8px; font-size:20px;">Get File</a>
</div>
<!-- Countdown Fullscreen -->
<div id="fullscreenCountdown"
style="position:fixed; top:0; left:0; width:100%; height:100%;
display:none; justify-content:center; align-items:center;
background:#000; color:#fff; font-size:100vw; font-weight:bold; z-index:9999;">
5
</div>
<!-- Tombol Download -->
<div style="text-align:center; margin-top:50px;">
<a id="downloadBtn" href="https://example.com/file.zip"
style="display:none; padding:15px 30px; background:#2196F3; color:#fff;
text-decoration:none; border-radius:8px; font-size:20px;">Download</a>
</div>
<script>
let duration = 5; // durasi countdown
let elapsed = 0;
let getFileBtn = document.getElementById('getFileBtn');
let countdownDiv = document.getElementById('fullscreenCountdown');
let downloadBtn = document.getElementById('downloadBtn');
getFileBtn.addEventListener('click', function() {
// Sembunyikan tombol Get File
getFileBtn.style.display = "none";
// Tampilkan countdown fullscreen
countdownDiv.style.display = "flex";
countdownDiv.innerText = duration;
elapsed = 0;
let interval = setInterval(() => {
elapsed++;
countdownDiv.innerText = duration - elapsed;
if(elapsed >= duration){
clearInterval(interval);
countdownDiv.style.display = "none"; // sembunyikan countdown
downloadBtn.style.display = "inline-block"; // tampilkan tombol download
}
}, 1000);
});
</script>
💾 Kode Otomatis:
Artikel Lainnya :
Belajar berhitung
0 + 0 = ?
Skor: 0
<div id="game-container" style="position: relative; width: 100%; max-width: 400px; margin: 20px auto; border: 2px solid #ccc; border-radius: 10px; overflow: hidden; background: #e0f7fa;">
<canvas id="bgCanvas" width="400" height="300" style="width:100%; height:300px; display:block;"></canvas>
<div id="quiz-box" style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; color: #000; font-family: sans-serif;">
<h3 id="question">0 + 0 = ?</h3>
</div>
<input type="number" id="answer" style="width:60px; text-align:center; font-size:16px;">
<button id="submitBtn" style="padding:5px 10px; margin-left:5px;">Jawab</button>
<p id="feedback" style="margin-top:50px;"></p>
<p>Skor: <span id="score">0</span></p>
</div>
<script>
const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');
// gambar karakter
const guruImg = new Image();
guruImg.src = 'https://cdn.pixabay.com/animation/2025/10/08/10/58/10-58-05-213_512.gif'; // ganti dengan link PNG guru
const muridImg = new Image();
muridImg.src = 'https://png.pngtree.com/element_our/20200703/ourmid/pngtree-cartoon-elementary-school-student-thinking-about-problems-png-transparent-background-image_2300340.jpg'; // ganti dengan link PNG murid
function drawScene() {
ctx.fillStyle = '#aee1f9';
ctx.fillRect(0,0,canvas.width,canvas.height);
// misal papan tulis & latar
ctx.fillStyle = '#fff';
ctx.fillRect(120, 20, 160, 100);
ctx.strokeStyle = '#000';
ctx.strokeRect(120,20,160,100);
// gambar guru & murid
// tunggu gambar selesai load dulu
if (guruImg.complete) {
ctx.drawImage(guruImg, 180, 50, 80, 120);
}
if (muridImg.complete) {
ctx.drawImage(muridImg, 60, 150, 60, 90);
ctx.drawImage(muridImg, 140, 150, 60, 90);
ctx.drawImage(muridImg, 220, 150, 60, 90);
}
requestAnimationFrame(drawScene);
}
drawScene();
// — sama logika soal & skor seperti sebelumnya —
let score = 0;
let currentAnswer = 0;
function generateQuestion() {
const a = Math.floor(Math.random()*20);
const b = Math.floor(Math.random()*20);
const ops = ['+','-','*'];
const op = ops[Math.floor(Math.random()*ops.length)];
let q = `${a} ${op} ${b}`;
currentAnswer = eval(q);
document.getElementById('question').textContent = q + " = ?";
document.getElementById('answer').value = '';
document.getElementById('feedback').textContent = '';
}
document.getElementById('submitBtn').addEventListener('click',()=>{
const userAns = parseInt(document.getElementById('answer').value);
if(userAns === currentAnswer){
score += 10;
document.getElementById('feedback').textContent = '✅ Benar!';
// bisa tambahkan animasi confetti di sini
} else {
score -= 5;
document.getElementById('feedback').textContent = '❌ Salah!';
}
document.getElementById('score').textContent = score;
generateQuestion();
});
generateQuestion();
</script>
💾 Kode Otomatis:
Artikel Lainnya :
Marketplace Generator
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>
💾 Kode Otomatis:
Artikel Lainnya :
Bob Marley & The Wailers/Africa Unite – The Singles Collection
Simple Music Player
💾 Kode Otomatis:
Artikel Lainnya :
Contoh halaman 404 tidak di temukan
<style>
body {
margin: 0;
padding: 0;
font-family: "Segoe UI", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #111827, #1e293b);
color: #fff;
}
.container404 {
text-align: center;
padding: 20px;
max-width: 380px;
width: 90%;
background: rgba(255,255,255,0.06);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
animation: fadeIn .8s ease;
}
@keyframes fadeIn {
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0);}
}
.number404 {
font-size: 80px;
font-weight: 800;
background: linear-gradient(90deg,#60a5fa,#a855f7);
-webkit-background-clip: text;
color: transparent;
}
.message404 {
font-size: 17px;
line-height: 1.5;
margin-top: -10px;
opacity: .85;
}
.btn404 {
margin-top: 22px;
display: inline-block;
padding: 12px 26px;
font-size: 16px;
border-radius: 40px;
background: linear-gradient(90deg,#6366f1,#8b5cf6);
color: #fff;
text-decoration: none;
font-weight: 600;
letter-spacing: .5px;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
transition: .25s;
}
.btn404:hover {
transform: scale(1.05);
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.illustration {
margin: 20px auto;
}
.illustration svg {
width: 120px;
height: auto;
opacity: 0.9;
}
</style>
<div class="container404">
<div class="illustration">
<!-- SVG Android Style -->
<svg fill="none" stroke="#93c5fd" stroke-width="1.5" viewBox="0 0 24 24">
<path d="M12 2L15 6H9L12 2Z"></path>
<rect x="4" y="8" width="16" height="12" rx="2"></rect>
<circle cx="9" cy="14" r="1.5"></circle>
<circle cx="15" cy="14" r="1.5"></circle>
</svg>
</div>
<div class="number404">404</div>
<div class="message404">
Halaman tidak ditemukan.<br>
Mungkin link sudah berubah atau tidak tersedia.
</div>
<a href="/" class="btn404">Kembali ke Beranda</a>
</div>
💾 Kode Otomatis:
Artikel Lainnya :
View Source tool generator
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>View Source — Cara Melihat Kode Sumber Halaman Web</title>
<style>
#vsBox{font-family:monospace;background:#111;color:#e6e6e6;padding:12px;border-radius:8px}
#vsControls{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
#vsBox textarea{width:100%;height:100vh;background:#0b0b0b;color:#dcdcdc;border:1px solid #222;padding:8px;resize:vertical}
#vsControls input[type=text]{flex:1;min-width:180px;padding:8px;border-radius:6px;border:1px solid #333;background:#0f0f0f;color:#fff}
.button{padding:8px 10px;border-radius:6px;border:none;cursor:pointer}
.btn-primary{background:#1e88e5;color:#fff}
.btn-plain{background:#2b2b2b;color:#fff}
.small{font-size:12px;padding:6px 8px}
</style>
</head>
<body>
<header>View Source HTML</header>
<div id="vsBox">
<div id="vsControls">
<input id="vsUrl" type="text" placeholder="Masukkan URL (opsional, kosong = halaman ini)">
<button id="vsLoad" class="button btn-primary small">Tampilkan Source</button>
<button id="vsCopy" class="button btn-plain small">Copy</button>
<button id="vsDownload" class="button btn-plain small">Download .html</button>
<label style="align-self:center;font-size:12px;margin-left:6px;color:#bbb">Note: fetch eksternal butuh proxy/CORS.</label>
</div>
<textarea id="vsArea" readonly spellcheck="false">Tekan "Tampilkan Source" untuk mulai...</textarea>
</div>
<script>
(function(){
const area = document.getElementById('vsArea');
const urlInput = document.getElementById('vsUrl');
const loadBtn = document.getElementById('vsLoad');
const copyBtn = document.getElementById('vsCopy');
const dlBtn = document.getElementById('vsDownload');
function show(text){
area.value = text;
area.scrollTop = 0;
}
function getThisPageSource(){
// ambil source DOM sebagai HTML terformat
const doctype = document.doctype ? new XMLSerializer().serializeToString(document.doctype) + '\n' : '';
const html = document.documentElement.outerHTML;
return doctype + html;
}
async function fetchUrl(u){
try {
const res = await fetch(u, {method:'GET', mode:'cors'});
if(!res.ok) throw new Error(res.status + ' ' + res.statusText);
const text = await res.text();
return text;
} catch(e){
throw e;
}
}
loadBtn.addEventListener('click', async ()=>{
const raw = urlInput.value.trim();
if(!raw){
show('Loading source halaman ini...\n\n');
try{
const src = getThisPageSource();
show(src);
}catch(e){
show('Error saat ambil source halaman ini: ' + e.message);
}
return;
}
// kalau user minta URL eksternal — CORS berlaku
// saran: gunakan proxy seperti https://api.allorigins.win/raw?url= atau CORS-Proxy sendiri
let target = raw;
// jika bukan http(s) maka tambahkan https://
if(!/^https?:\/\//i.test(target)) target = 'https://' + target;
show('Mengambil: ' + target + '\n\n(Perhatian: Jika server target menolak CORS, gunakan proxy seperti https://api.allorigins.win/raw?url= atau server proxy sendiri)\n\n');
// coba langsung dulu; jika gagal, user bisa gunakan proxy
try {
const txt = await fetchUrl(target);
show(txt);
} catch (err) {
show('Gagal langsung ambil: ' + err.message + '\n\nMencoba via proxy public allorigins...');
// fallback ke allorigins
try {
const proxy = 'https://api.allorigins.win/raw?url=' + encodeURIComponent(target);
const txt2 = await fetchUrl(proxy);
show(txt2);
} catch (err2) {
show('Gagal ambil via proxy juga: ' + err2.message + '\n\nSolusi: pakai proxy/CORS-own server atau ambil source server-side.');
}
}
});
copyBtn.addEventListener('click', ()=>{
area.select();
try{
document.execCommand('copy');
copyBtn.textContent = 'Copied ✓';
setTimeout(()=> copyBtn.textContent = 'Copy',1200);
}catch(e){
copyBtn.textContent = 'Copy failed';
setTimeout(()=> copyBtn.textContent = 'Copy',1200);
}
});
dlBtn.addEventListener('click', ()=>{
const blob = new Blob([area.value], {type:'text/html'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = (document.title||'source') + '.html';
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
});
})();
</script>
</body>
</html>
💾 Kode Otomatis:
Artikel Lainnya :
Subscribe to:
Comments (Atom)