-
rn
ancrit keren bat :v
rahman on Monday, 31 July 2023 02:43 PM -
an
Waw
admin on Saturday, 05 August 2023 11:31 AM -
rx
mantap
rizxcodex on Sunday, 10 August 2025 04:25 PM -
&-
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CPANEL Creator — UI Preview</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <style> :root{ --bg1: #2b0047; --bg2: #5b1b8a; --card: #2f2730; --muted: #bfb2c1; --accent: #ffd7fb; } body{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,var(--bg1),var(--bg2)); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial; padding:24px; } .player-card{ width: 380px; max-width:96vw; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 26px; color: #fff; border: 1px solid rgba(255,255,255,0.03); } .art{ width:160px;height:160px;border-radius:50%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><rect fill="%23333" width="100%" height="100%"/><text x="50%" y="50%" font-size="22" fill="%23fff" text-anchor="middle" dominant-baseline="central">CPANEL</text></svg>'); background-size:cover;background-position:center; margin:0 auto;box-shadow: 0 15px 30px rgba(0,0,0,0.6), inset 0 4px 0 rgba(255,255,255,0.02); border:8px solid rgba(0,0,0,0.6); } .title{ text-align:center;margin-top:16px;margin-bottom:4px;font-weight:700;font-size:20px } .subtitle{ text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px } .progress-line{height:6px;background:rgba(255,255,255,0.06);border-radius:6px;margin-bottom:18px}.control-circle{ width:68px;height:68px;border-radius:50%;background:linear-gradient(180deg,#fff,#eee);display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 6px 18px rgba(0,0,0,0.5)} .control-circle button{background:transparent;border:none;font-size:26px} .form-row{ margin-top:16px } label.small{ font-size:12px;color:var(--muted); } .form-control:focus{ box-shadow:none;border-color:#9b6ad8 } .ip-box{ display:flex;gap:8px;align-items:center } .ip-badge{ background:rgba(255,255,255,0.03);padding:10px 12px;border-radius:10px;color:var(--muted);flex:1;border:1px solid rgba(255,255,255,0.02) } .big-action{ margin-top:18px;background:linear-gradient(90deg,#ff8bdc,#7b4bd9);color:#fff;border:none;padding:14px;border-radius:12px;width:100%;font-weight:700 } .muted-card{ margin-top:18px;background:rgba(0,0,0,0.25);padding:12px;border-radius:12px;color:var(--muted);text-align:center } .copy-btn{ background:transparent;border:1px dashed rgba(255,255,255,0.06);color:var(--muted);padding:8px 10px;border-radius:8px } .generate-btn{ background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 10px;border-radius:8px } .footer-note{ font-size:12px;color:var(--muted);text-align:center;margin-top:12px } @media (max-width:420px){ .player-card{padding:18px} .art{width:140px;height:140px} } </style> </head> <body> <div class="player-card"> <div class="art" id="art"></div> <div class="title">Create cPanel Account</div> <div class="subtitle">Fill the form — password will be generated</div><div class="progress-line"></div> <form id="cpanelForm" autocomplete="off"> <div class="mb-3"> <label class="small">Username</label> <input type="text" name="username" id="username" class="form-control form-control-lg bg-dark text-white" placeholder="example: user123" required> </div> <div class="mb-3 d-flex gap-2"> <div style="flex:1"> <label class="small">Password</label> <input type="text" name="password" id="password" class="form-control bg-dark text-white" readonly required> </div> <div style="width:120px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end"> <button type="button" id="genBtn" class="generate-btn">Generate</button> <button type="button" id="copyPassBtn" class="copy-btn">Copy</button> </div> </div> <div class="mb-3"> <label class="small">Confirm Password</label> <input type="text" id="confirm" class="form-control bg-dark text-white" placeholder="repeat password" required> </div> <div class="mb-3"> <label class="small">Package</label> <select id="package" class="form-select bg-dark text-white"> <option value="ekstra">Ekstra</option> <option value="super">Super</option> <option value="sedang">Sedang</option> <option value="mini">Mini</option> </select> </div> <div class="mb-3"> <label class="small">Server IP</label> <div class="ip-box"> <div class="ip-badge" id="ipText">70.153.136.43</div> <button type="button" id="copyIp" class="copy-btn">Salin</button> </div> </div> <div class="mb-3"> <button type="submit" id="createBtn" class="big-action" disabled>Create Account</button> </div> <div class="muted-card">Tip: Pastikan username unik dan sesuai aturan (6 karakter, huruf+angka).</div> </form> <div class="footer-note">UI Preview — API hook belum aktif. Nanti aku sambungkan ke WHM API.</div> </div><script> // utilities function generatePassword(len = 12){ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-='; let out = ''; for(let i=0;i<len;i++) out += chars.charAt(Math.floor(Math.random()*chars.length)); return out; } const genBtn = document.getElementById('genBtn'); const password = document.getElementById('password'); const confirm = document.getElementById('confirm'); const createBtn = document.getElementById('createBtn'); const copyIp = document.getElementById('copyIp'); const ipText = document.getElementById('ipText'); const copyPassBtn = document.getElementById('copyPassBtn'); const username = document.getElementById('username'); function validateForm(){ const pass = password.value; const conf = confirm.value; const user = username.value.trim(); const ok = user.length >= 4 && pass.length >= 8 && pass === conf; createBtn.disabled = !ok; } genBtn.addEventListener('click', ()=>{ const p = generatePassword(12); password.value = p; confirm.value = p; validateForm(); }); copyIp.addEventListener('click', async ()=>{ try{ await navigator.clipboard.writeText(ipText.textContent.trim()); copyIp.textContent = 'Copied!'; setTimeout(()=> copyIp.textContent = 'Salin', 1500); }catch(e){ alert('Copy failed: ' + e.message) } }); copyPassBtn.addEventListener('click', async ()=>{ try{ if(!password.value) return alert('Tidak ada password untuk dicopy'); await navigator.clipboard.writeText(password.value); copyPassBtn.textContent = 'Copied'; setTimeout(()=> copyPassBtn.textContent = 'Copy', 1500); }catch(e){ alert('Copy failed: ' + e.message) } }); password.addEventListener('input', validateForm); confirm.addEventListener('input', validateForm); username.addEventListener('input', validateForm); // submit handler (placeholder) document.getElementById('cpanelForm').addEventListener('submit', (e)=>{ e.preventDefault(); if(createBtn.disabled) return; const payload = { username: username.value.trim(), password: password.value, package: document.getElementById('package').value, ip: ipText.textContent.trim() }; // show preview modal / toast alert('Payload ready to send:\n' + JSON.stringify(payload, null, 2)); // TODO: post to backend endpoint (e.g. create.php) using fetch with proper auth token }); // auto-generate initial password window.addEventListener('load', ()=>{ const p = generatePassword(12); password.value = p; confirm.value = p; validateForm(); }); </script></body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial- on Sunday, 10 August 2025 04:25 PM -
hx
rugi yang ga beli source codenya
helix on Monday, 31 July 2023 03:05 PM -
rn
@helix gass 5rb
rahman on Tuesday, 01 August 2023 04:56 PM