Compare commits
4 Commits
eac2bfad2d
...
b85ed0e0b4
| Author | SHA1 | Date | |
|---|---|---|---|
|
b85ed0e0b4 | ||
|
|
5822253998 | ||
|
|
b132997aed | ||
|
|
34dc5d7028 |
148
Form Profile.html
Normal file
148
Form Profile.html
Normal file
@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Profile Editor</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
background-color: #f8f9fa;
|
||||
margin: 40px;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
form {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.2);
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button {
|
||||
margin-top: 15px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#tambah {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
#reset {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
#daftar {
|
||||
margin-top: 30px;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.2);
|
||||
width: 400px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.profile-card {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.hapus-btn {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Profile Editor</h2>
|
||||
|
||||
<form id="profileForm">
|
||||
<label>Nama:</label>
|
||||
<input type="text" id="nama" placeholder="Masukkan nama" required>
|
||||
|
||||
<label>Tanggal Lahir:</label>
|
||||
<input type="date" id="tgl" required>
|
||||
|
||||
<label>Kota:</label>
|
||||
<input type="text" id="kota" placeholder="Masukkan kota" required>
|
||||
|
||||
<button type="button" id="tambah" onclick="tambahProfil()">Tambah Profile</button>
|
||||
<button type="reset" id="reset">Reset Form</button>
|
||||
</form>
|
||||
|
||||
<div id="daftar">
|
||||
<h3>Daftar Profile</h3>
|
||||
<div id="listProfile"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let profiles = [];
|
||||
|
||||
function tambahProfil() {
|
||||
const nama = document.getElementById("nama").value.trim();
|
||||
const tgl = document.getElementById("tgl").value;
|
||||
const kota = document.getElementById("kota").value.trim();
|
||||
|
||||
if (!nama || !tgl || !kota) {
|
||||
alert("Semua data harus diisi!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Hitung umur
|
||||
const lahir = new Date(tgl);
|
||||
const sekarang = new Date();
|
||||
let umur = sekarang.getFullYear() - lahir.getFullYear();
|
||||
const bulan = sekarang.getMonth() - lahir.getMonth();
|
||||
if (bulan < 0 || (bulan === 0 && sekarang.getDate() < lahir.getDate())) {
|
||||
umur--;
|
||||
}
|
||||
|
||||
// Simpan ke array
|
||||
profiles.push({ nama, tgl, kota, umur });
|
||||
tampilkanProfile();
|
||||
document.getElementById("profileForm").reset();
|
||||
}
|
||||
|
||||
function tampilkanProfile() {
|
||||
let output = "";
|
||||
profiles.forEach((p, index) => {
|
||||
output += `
|
||||
<div class="profile-card">
|
||||
<strong>${p.nama}</strong><br>
|
||||
Umur: ${p.umur} tahun<br>
|
||||
Tanggal Lahir: ${p.tgl}<br>
|
||||
Kota: ${p.kota}<br>
|
||||
<button class="hapus-btn" onclick="hapusProfile(${index})">Hapus</button>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
document.getElementById("listProfile").innerHTML = output;
|
||||
}
|
||||
|
||||
function hapusProfile(i) {
|
||||
profiles.splice(i, 1);
|
||||
tampilkanProfile();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
28
GAMES#2.html
28
GAMES#2.html
@ -4,34 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title> Blackjack [21] </title>
|
||||
<style>
|
||||
:root{--bg:#0b1220;--card:#ffffff;--muted:#9aa6b2;--accent:#0abf5b}
|
||||
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}
|
||||
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#08101a 0%, #0c1620 100%);color:var(--card);display:flex;align-items:center;justify-content:center;padding:24px}
|
||||
.table{width:960px;max-width:98vw;background:linear-gradient(180deg,#072029,#0a2530);border-radius:14px;padding:20px;box-shadow:0 10px 40px rgba(2,6,12,.6)}
|
||||
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
|
||||
header h1{font-size:20px;margin:0}
|
||||
.controls{display:flex;gap:10px;align-items:center}
|
||||
|
||||
.info{display:flex;gap:12px;align-items:center}
|
||||
.chip{background:#072a1f;padding:8px 12px;border-radius:12px;color:var(--muted);font-weight:600}
|
||||
.bet{display:flex;gap:8px;align-items:center}
|
||||
input[type=number]{width:90px;padding:6px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:transparent;color:var(--card)}
|
||||
button{background:var(--accent);border:none;padding:8px 12px;border-radius:10px;font-weight:700;color:#02220f;cursor:pointer}
|
||||
button.secondary{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--card)}
|
||||
main{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||||
.board{padding:14px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border-radius:12px;min-height:220px}
|
||||
.section-title{color:var(--muted);font-size:12px;margin-bottom:6px}
|
||||
.hand{display:flex;gap:10px;align-items:flex-end}
|
||||
.card{width:86px;height:120px;border-radius:8px;background:white;color:#000;display:flex;flex-direction:column;justify-content:space-between;padding:8px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.35)}
|
||||
.card.red{color:#b22222}
|
||||
.card.back{background:linear-gradient(180deg,#0a76b9,#094e7a);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
|
||||
.values{margin-top:8px;color:var(--muted);font-weight:700}
|
||||
.actions{display:flex;gap:8px;margin-top:12px}
|
||||
.message{margin-top:10px;color:var(--muted)}
|
||||
footer{margin-top:12px;text-align:center;color:var(--muted);font-size:13px}
|
||||
@media(max-width:700px){.hand{overflow:auto;padding-bottom:8px}.card{min-width:72px;width:72px;height:100px}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="table" role="application" aria-label="Blackjack tanpa iklan">
|
||||
|
||||
28
cliff.git.html
Normal file
28
cliff.git.html
Normal file
@ -0,0 +1,28 @@
|
||||
<style>
|
||||
:root{--bg:#0b1220;--card:#ffffff;--muted:#9aa6b2;--accent:#0abf5b}
|
||||
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}
|
||||
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#08101a 0%, #0c1620 100%);color:var(--card);display:flex;align-items:center;justify-content:center;padding:24px}
|
||||
.table{width:960px;max-width:98vw;background:linear-gradient(180deg,#072029,#0a2530);border-radius:14px;padding:20px;box-shadow:0 10px 40px rgba(2,6,12,.6)}
|
||||
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
|
||||
header h1{font-size:20px;margin:0}
|
||||
.controls{display:flex;gap:10px;align-items:center}
|
||||
|
||||
.info{display:flex;gap:12px;align-items:center}
|
||||
.chip{background:#072a1f;padding:8px 12px;border-radius:12px;color:var(--muted);font-weight:600}
|
||||
.bet{display:flex;gap:8px;align-items:center}
|
||||
input[type=number]{width:90px;padding:6px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:transparent;color:var(--card)}
|
||||
button{background:var(--accent);border:none;padding:8px 12px;border-radius:10px;font-weight:700;color:#02220f;cursor:pointer}
|
||||
button.secondary{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--card)}
|
||||
main{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||||
.board{padding:14px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border-radius:12px;min-height:220px}
|
||||
.section-title{color:var(--muted);font-size:12px;margin-bottom:6px}
|
||||
.hand{display:flex;gap:10px;align-items:flex-end}
|
||||
.card{width:86px;height:120px;border-radius:8px;background:white;color:#000;display:flex;flex-direction:column;justify-content:space-between;padding:8px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.35)}
|
||||
.card.red{color:#b22222}
|
||||
.card.back{background:linear-gradient(180deg,#0a76b9,#094e7a);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
|
||||
.values{margin-top:8px;color:var(--muted);font-weight:700}
|
||||
.actions{display:flex;gap:8px;margin-top:12px}
|
||||
.message{margin-top:10px;color:var(--muted)}
|
||||
footer{margin-top:12px;text-align:center;color:var(--muted);font-size:13px}
|
||||
@media(max-width:700px){.hand{overflow:auto;padding-bottom:8px}.card{min-width:72px;width:72px;height:100px}}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<html>
|
||||
<title>Test Cliff Julyano - 5803025013</title>
|
||||
<h1>Haloo, Aku Cliff Julyano</h1>
|
||||
<h1>Dengan NRP : 5803025013</h1>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user