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 charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<title> Blackjack [21] </title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="table" role="application" aria-label="Blackjack tanpa iklan">
|
<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