ڈیش بورڈ
آج کے اپائنٹمنٹ
0
0
کل مریض
0
0
+ نیا مریض
+ اپائنٹمنٹ
+ نسخہ بنائیں
Logout
Last active
August 17, 2026 02:51
-
Star
(254)
You must be signed in to star a gist -
Fork
(338)
You must be signed in to fork a gist
-
-
Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8" /> | |
| <script src="Scripts/jquery-1.9.1.min.js"></script> | |
| <link href="Content/bootstrap.min.css" rel="stylesheet" /> | |
| <script src="Scripts/isRockFx.js"></script> | |
| <script> | |
| $(function () { | |
| $('#ButtonCal').click( | |
| function () { | |
| //取得用戶輸入的參數 | |
| var para = { 'height': $('#txbHeight').val(), 'weight': $('#txbWeight').val() }; | |
| //呼叫API | |
| ExecuteAPI('Example', 'BMI', para, | |
| //呼叫WebAPI成功時運行的Call Back Function | |
| function (result) { | |
| alert(result.Data); | |
| } | |
| ); | |
| } | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="row" style="margin:10px"> | |
| <div class="col-md-12"> | |
| <div class="form-group"> | |
| 身高: | |
| <input id="txbHeight" class="form-control" placeholder="請輸入身高" /> | |
| 體重: | |
| <input id="txbWeight" class="form-control" placeholder="請輸入體重" /> | |
| <br /> | |
| <button class="btn btn-primary" id="ButtonCal">計算</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
tamimvigamilcom-crypto
commented
Aug 13, 2026
<title>TAMIM SIGNAL 2.0</title>
<style>
*{
box-sizing:border-box;
}
body{
margin:0;
background:#020205;
color:white;
font-family:Arial,sans-serif;
}
.container{
max-width:500px;
margin:auto;
padding:20px;
}
.robot{
width:110px;
height:110px;
margin:10px auto 25px;
border:3px solid #b000ff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:50px;
box-shadow:0 0 30px #a000ff;
}
.card{
background:#07070a;
border:1px solid #8b00c9;
border-radius:30px;
padding:30px 20px;
box-shadow:0 0 30px #6500a855;
}
.logo{
width:125px;
height:125px;
margin:auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-weight:bold;
background:linear-gradient(135deg,#ff2100,#0909ff);
border:4px solid #7b8cff;
box-shadow:0 0 30px #006eff;
}
h1{
text-align:center;
color:#ff1744;
font-size:32px;
letter-spacing:2px;
text-shadow:0 0 15px red;
}
.version{
text-align:center;
color:red;
font-size:28px;
font-weight:bold;
}
input{
width:100%;
padding:18px;
margin:25px 0 12px;
border-radius:35px;
border:1px solid #9d00d7;
background:#050509;
color:white;
text-align:center;
font-size:18px;
outline:none;
}
button{
width:100%;
padding:17px;
margin:8px 0;
border:0;
border-radius:35px;
color:white;
font-size:20px;
font-weight:bold;
cursor:pointer;
}
.login{
background:linear-gradient(90deg,#9a70aa,#ff0018,#e000d5);
box-shadow:0 0 25px #ff00aa88;
}
.buy{
width:75%;
display:block;
margin:auto;
background:linear-gradient(90deg,#925e9f,#ff0018,#e000d5);
}
.support{
color:#00ff55;
background:#031407;
border:2px solid #00ff55;
box-shadow:0 0 20px #00ff5544;
}
.signal{
margin:25px 0;
padding:25px;
text-align:center;
border-radius:25px;
border:2px solid #00eaff;
background:#061018;
box-shadow:0 0 25px #00eaff55;
}
.signal-title{
color:#aaa;
font-size:14px;
}
.multiplier{
margin:12px 0;
color:#00ff66;
font-size:55px;
font-weight:bold;
text-shadow:0 0 20px #00ff66
<title>TAMIM SIGNAL 2.0</title>
<style>
*{
box-sizing:border-box;
}
body{
margin:0;
background:#020205;
color:white;
font-family:Arial,sans-serif;
}
.container{
max-width:500px;
margin:auto;
padding:20px;
}
.robot{
width:110px;
height:110px;
margin:10px auto 25px;
border:3px solid #b000ff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:50px;
box-shadow:0 0 30px #a000ff;
}
.card{
background:#07070a;
border:1px solid #8b00c9;
border-radius:30px;
padding:30px 20px;
box-shadow:0 0 30px #6500a855;
}
.logo{
width:125px;
height:125px;
margin:auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-weight:bold;
background:linear-gradient(135deg,#ff2100,#0909ff);
border:4px solid #7b8cff;
box-shadow:0 0 30px #006eff;
}
h1{
text-align:center;
color:#ff1744;
font-size:32px;
letter-spacing:2px;
text-shadow:0 0 15px red;
}
.version{
text-align:center;
color:red;
font-size:28px;
font-weight:bold;
}
input{
width:100%;
padding:18px;
margin:25px 0 12px;
border-radius:35px;
border:1px solid #9d00d7;
background:#050509;
color:white;
text-align:center;
font-size:18px;
outline:none;
}
button{
width:100%;
padding:17px;
margin:8px 0;
border:0;
border-radius:35px;
color:white;
font-size:20px;
font-weight:bold;
cursor:pointer;
}
.login{
background:linear-gradient(90deg,#9a70aa,#ff0018,#e000d5);
box-shadow:0 0 25px #ff00aa88;
}
.buy{
width:75%;
display:block;
margin:auto;
background:linear-gradient(90deg,#925e9f,#ff0018,#e000d5);
}
.support{
color:#00ff55;
background:#031407;
border:2px solid #00ff55;
box-shadow:0 0 20px #00ff5544;
}
.signal{
margin:25px 0;
padding:25px;
text-align:center;
border-radius:25px;
border:2px solid #00eaff;
background:#061018;
box-shadow:0 0 25px #00eaff55;
}
.signal-title{
color:#aaa;
font-size:14px;
}
.multiplier{
margin:12px 0;
color:#00ff66;
font-size:55px;
font-weight:bold;
text-shadow:0 0 20px #00ff66
আমি একটা এপস বানিয়ে নিতে চাই সিগনাল দেখাবে তার
<title>एडवांस्ड काउंटर</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #eef2f5;
padding-top: 50px;
}
.card {
background: white;
padding: 24px;
width: 320px;
margin: auto;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-group {
display: flex;
justify-content: center;
gap: 8px;
}
button {
padding: 8px 14px;
font-size: 15px;
border: none;
border-radius: 6px;
cursor: pointer;
color: white;
}
.btn-add { background-color: #28a745; }
.btn-sub { background-color: #dc3545; }
.btn-reset { background-color: #6c757d; }
</style>
<script>
let count = 0;
const display = document.getElementById("count-display");
function badhao() {
count++;
display.innerText = count;
}
function ghatao() {
count--;
display.innerText = count;
}
function resetKaro() {
count = 0;
display.innerText = count;
}
</script>
स्मार्ट काउंटर
0
<div class="btn-group">
<button class="btn-sub" onclick="ghatao()">- घटाएं</button>
<button class="btn-reset" onclick="resetKaro()">रीसेट</button>
<button class="btn-add" onclick="badhao()">+ बढ़ाएं</button>
</div>
<title>एडवांस्ड काउंटर</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #eef2f5;
padding-top: 50px;
}
.card {
background: white;
padding: 24px;
width: 320px;
margin: auto;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-group {
display: flex;
justify-content: center;
gap: 8px;
}
button {
padding: 8px 14px;
font-size: 15px;
border: none;
border-radius: 6px;
cursor: pointer;
color: white;
}
.btn-add { background-color: #28a745; }
.btn-sub { background-color: #dc3545; }
.btn-reset { background-color: #6c757d; }
</style>
<script>
let count = 0;
const display = document.getElementById("count-display");
function badhao() {
count++;
display.innerText = count;
}
function ghatao() {
count--;
display.innerText = count;
}
function resetKaro() {
count = 0;
display.innerText = count;
}
</script>
html
स्मार्ट काउंटर
0
<div class="btn-group">
<button class="btn-sub" onclick="ghatao()">- घटाएं</button>
<button class="btn-reset" onclick="resetKaro()">रीसेट</button>
<button class="btn-add" onclick="badhao()">+ बढ़ाएं</button>
</div>
<title>Arjuna Aditya - CV Online</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: #f5f7fa; color: #333; line-height: 1.6; }
.container { max-width: 900px; margin: 30px auto; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
header { text-align: center; border-bottom: 3px solid #ff6600; padding-bottom: 20px; margin-bottom: 30px; }
header h1 { color: #ff6600; font-size: 32px; }
header p { color: #666; margin-top: 5px; }
.contact { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.section { margin-bottom: 25px; }
.section h2 { color: #ff6600; border-left: 4px solid #ff6600; padding-left: 10px; margin-bottom: 12px; font-size: 20px; }
.item { margin-bottom: 15px; }
.item h3 { font-size: 16px; color: #222; }
.item span { font-size: 14px; color: #777; }
ul { padding-left: 20px; }
ul li { margin-bottom: 6px; }
.skills { display: flex; flex-wrap: wrap; gap: 10px; }
.skill { background: #fff0e6; color: #ff6600; padding: 6px 12px; border-radius: 20px; font-size: 14px; }
footer { text-align: center; margin-top: 30px; font-size: 13px; color: #888; }
@media(max-width: 600px) { .container { padding: 20px; } header h1 { font-size: 24px; } }
</style>
ARJUNA ADITYA
Teknik Kendaraan Ringan | Lulusan SMK Muhammadiyah 1 Blora
📞 0852-9322-1654
📧 arjunaaditya661@gmail.com
📍 Blora, Jawa Tengah
<div class="section">
<h2>PROFIL SINGKAT</h2>
<p>Lulusan SMK Muhammadiyah 1 Blora jurusan Teknik Kendaraan Ringan yang disiplin, pekerja keras, dan cepat belajar. Memiliki semangat tinggi, bertanggung jawab, dan mampu bekerja dalam tim maupun individu. Siap ditempatkan dimanapun dan ingin mengembangkan karir serta keterampilan di dunia kerja.</p>
</div>
<div class="section">
<h2>PENDIDIKAN</h2>
<div class="item">
<h3>SMK MUHAMMADIYAH 1 BLORA</h3>
<span>2023 - 2026 | Jurusan: Teknik Kendaraan Ringan</span>
<ul>
<li>Mempelajari perawatan mesin, sistem kelistrikan, dan K3</li>
<li>Terbiasa bekerja sesuai prosedur dan tepat waktu</li>
</ul>
</div>
</div>
<div class="section">
<h2>PENGALAMAN KERJA
<title>ZOHAN MEDICAL CENTRE</title>
<style>
*{margin:0; padding:0; box-sizing:border-box}
body{font-family:'Arial'; background:linear-gradient(135deg,#007bff,#00c6ff); min-height:100vh; padding:20px}
.box{background:white; padding:25px; border-radius:15px; max-width:500px; margin:50px auto; box-shadow:0 10px 30px rgba(0,0,0,0.2)}
h1{color:#007bff; text-align:center; margin-bottom:20px}
input,button,select{width:100%; padding:12px; margin:8px 0; border-radius:8px; border:1px solid #ddd; font-size:16px}
button{background:#007bff; color:white; border:none; cursor:pointer; font-weight:bold}
button:hover{background:#0056b3}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0}
.card{background:#e7f1ff; padding:15px; border-radius:10px; text-align:center}
.card b{font-size:24px; color:#007bff}
.menu button{margin:5px 0}
</style>
<script>
const CORRECT_USER = "zohan medical center";
const CORRECT_PASS = "Mrzohanahmad";
function login(){
let u = document.getElementById('user').value;
let p = document.getElementById('pass').value;
if(u==CORRECT_USER && p==CORRECT_PASS){
document.getElementById('login').style.display='none';
document.getElementById('main').style.display='block';
loadData();
}else alert('غلط یوزر نیم یا پاسورڈ!');
}
function logout(){
document.getElementById('login').style.display='block';
document.getElementById('main').style.display='none';
}
function show(id){
document.getElementById('patient').style.display='none';
document.getElementById('app').style.display='none';
document.getElementById(id).style.display='block';
}
function savePatient(){
let patients = JSON.parse(localStorage.getItem('patients')||'[]');
patients.push({name:document.getElementById('pname').value});
localStorage.setItem('patients', JSON.stringify(patients));
alert('مریض سیو ہو گیا!');
loadData();
}
function saveApp(){
let apps = JSON.parse(localStorage.getItem('apps')||'[]');
apps.push({name:document.getElementById('aname').value});
localStorage.setItem('apps', JSON.stringify(apps));
alert('اپائنٹمنٹ بک ہو گئی!');
loadData();
}
function loadData(){
document.getElementById('totalPat').innerText = JSON.parse(localStorage.getItem('patients')||'[]').length;
document.getElementById('todayApp').innerText = JSON.parse(localStorage.getItem('apps')||'[]').length;
}
</script>
ZOHAN MEDICAL CENTRE
Login
<title>Self Attendance</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
background: #f1f5f9;
color: #1e293b;
}
.container {
max-width: 500px;
margin: 40px auto;
padding: 20px;
}
.header {
background: #2563eb;
color: white;
padding: 25px;
border-radius: 18px;
text-align: center;
margin-bottom: 20px;
}
.header h1 {
margin-bottom: 8px;
}
.card {
background: white;
padding: 22px;
border-radius: 18px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input {
width: 100%;
padding: 13px;
border: 1px solid #cbd5e1;
border-radius: 10px;
margin-bottom: 15px;
font-size: 16px;
}
button {
width: 100%;
padding: 14px;
border: none;
border-radius: 10px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-top: 8px;
}
.checkin {
background: #16a34a;
}
.checkout {
background: #dc2626;
}
button:disabled {
background: #94a3b8;
cursor: not-allowed;
}
.status {
text-align: center;
padding: 15px;
background: #eff6ff;
border-radius: 10px;
margin-top: 15px;
}
.attendance-item {
border-bottom: 1px solid #e2e8f0;
padding: 15px 0;
}
.attendance-item:last-child {
border-bottom: none;
}
.present {
color: #16a34a;
font-weight: bold;
}
.empty {
text-align: center;
color: #64748b;
}
</style>
<script>
let attendance =
JSON.parse(localStorage.getItem("attendance")) || [];
function updateDateTime() {
const now = new Date();
document.getElementById("currentDate").innerText =
now.toLocaleDateString();
document.getElementById("currentTime").innerText =
now.toLocaleTimeString();
}
setInterval(updateDateTime, 1000);
updateDateTime();
function getToday() {
const now = new Date();
return now.toISOString().split("T")[0];
}
function getCurrentTime() {
return new Date().toLocaleTimeString();
}
function checkIn() {
const name =
document.getElementById("userName").value.trim();
if (!name) {
alert("Please enter your name.");
return;
}
const today = getToday();
const existing =
attendance.find(record =>
record.date === today
);
if (existing) {
alert("You have already checked in today.");
return;
}
const record = {
name: name,
date: today,
checkIn: getCurrentTime(),
checkOut: null
};
attendance.push(record);
localStorage.setItem(
"attendance",
JSON.stringify(attendance)
);
document.getElementById("status").innerHTML =
`
✓ Present - Checked in at ${record.checkIn}
`;
displayHistory();
alert("Attendance marked successfully!");
}
function checkOut() {
const today = getToday();
const record =
attendance.find(record =>
record.date === today
);
if (!record) {
alert("Please check in first.");
return;
}
if (record.checkOut) {
alert("You have already checked out today.");
return;
}
record.checkOut = getCurrentTime();
localStorage.setItem(
"attendance",
JSON.stringify(attendance)
);
document.getElementById("status").innerHTML =
`
✓ Checked out at ${record.checkOut}
`;
displayHistory();
alert("Check-out recorded!");
}
function displayHistory() {
const history =
document.getElementById("history");
if (attendance.length === 0) {
history.innerHTML =
`
<div class="header">
<h1>Self Attendance</h1>
<p id="currentDate"></p>
<p id="currentTime"></p>
</div>
<div class="card">
<label for="userName">Name</label>
<input
type="text"
id="userName"
placeholder="Enter your name"
>
<button
class="checkin"
id="checkInBtn"
onclick="checkIn()">
✓ Check In
</button>
<button
class="checkout"
id="checkOutBtn"
onclick="checkOut()">
⏰ Check Out
</button>
<div class="status" id="status">
Attendance not marked
</div>
</div>
<div class="card">
<h2>Attendance History</h2>
<br>
<div id="history">
<p class="empty">No attendance records</p>
</div>
</div>
No attendance records
`; return; } history.innerHTML = ""; [...attendance].reverse().forEach(record => { const item = document.createElement("div"); item.className = "attendance-item"; item.innerHTML = ` ${record.name}📅 ${record.date}
🟢 Check In: ${record.checkIn}
🔴 Check Out: ${record.checkOut || "Not checked out"}
`; history.appendChild(item); }); } displayHistory(); </script>
<title>ZOHAN MEDICAL CENTRE</title>
<style>
*{margin:0; padding:0; box-sizing:border-box}
body{font-family:'Arial'; background:linear-gradient(135deg,#007bff,#00c6ff); min-height:100vh; padding:20px}
.box{background:white; padding:25px; border-radius:15px; max-width:500px; margin:50px auto; box-shadow:0 10px 30px rgba(0,0,0,0.2)}
h1{color:#007bff; text-align:center; margin-bottom:20px}
input,button{width:100%; padding:12px; margin:8px 0; border-radius:8px; border:1px solid #ddd; font-size:16px}
button{background:#007bff; color:white; border:none; cursor:pointer; font-weight:bold}
</style>
<script>
const CORRECT_USER = "zohan medical center";
const CORRECT_PASS = "Mrzohanahmad";
function login(){
let u = document.getElementById('user').value;
let p = document.getElementById('pass').value;
if(u==CORRECT_USER && p==CORRECT_PASS){
document.getElementById('login').style.display='none';
document.getElementById('main').style.display='block';
}else alert('غلط یوزر نیم یا پاسورڈ!');
}
function logout(){
document.getElementById('login').style.display='block';
document.getElementById('main').style.display='none';
}
</script>
ZOHAN MEDICAL CENTRE
Loginخوش آمدید سر
نیا مریض اپائنٹمنٹ Logout
import os, zipfile
root="/mnt/data/ma_soi_mobile_v1"
os.makedirs(root, exist_ok=True)
html='''<!doctype html>
🐺
MA SÓI
Phiên bản Mobile
🎮 Chơiℹ️ Giới thiệu
'}
function setup(){players=[];roles=shuffle(pool);app.innerHTML='👥 Tạo phòng
Cần 6 người chơi
➕ Thêm
';render()}
function add(){let x=document.getElementById("name"),n=x.value.trim();if(n&&players.length<6){players.push(n);x.value="";render()}}
function render(){let l=document.getElementById("list");if(!l)return;l.innerHTML=players.map((p,n)=>'0/6
🎲 Chia vai← Quay lại'+(n+1)+'. '+p+'
').join("");document.getElementById("count").textContent=players.length+'/6';document.getElementById("start").disabled=players.length!==6}
function reveal(){i=0;show=false;role()}
function role(){app.innerHTML='🎭 Chia vai
Đưa điện thoại cho
'+players[i]+'
'+(show?roles[i]:'❓')+'
'+(show?'Không cho người khác nhìn thấy.
✓ Đã xem':'👁️ Xem vai')+'🏠 Phòng chơi
6 người đã nhận vai.
'+players.map(p=>'
🌙 Bắt đầu đêm 1👤 '+p+'
Sẵn sàng
').join("")+'Sẵn sàng
🌙 Đêm 1
🌙
Bản Mobile V1 đã hoàn tất phần menu, người chơi và chia vai.
Hệ thống hành động ban đêm và bỏ phiếu sẽ được thêm ở phiên bản tiếp theo.
↩️ Về phòngwith open(root+"/index.html","w",encoding="utf-8") as f:f.write(html)
with open(root+"/README.txt","w",encoding="utf-8") as f:f.write("Ma Sói Mobile V1 - mở index.html bằng Chrome trên điện thoại.")
zip_path="/mnt/data/Ma_Soi_Mobile_Phan_1.zip"
with zipfile.ZipFile(zip_path,"w",zipfile.ZIP_DEFLATED) as z:
z.write(root+"/index.html","index.html")
z.write(root+"/README.txt","README.txt")
print(zip_path)
website/
│
├── index.html
│
├── assets/
│ ├── logo.png
│ ├── aditya-vikram-singh.jpg
│ ├── hero.jpg
│ ├── about.jpg
│ ├── education.jpg
│ ├── gau-seva.jpg
│ ├── temple.jpg
│ ├── women.jpg
│ ├── lok-seva.jpg
│ ├── farmer.jpg
│ └── donation-bg.jpg
│
├── donate.html
└── server/
index.html
assets/
server/
Website design kijiye
Hello
Nice
Hello
<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>
<title>Pemindai Wi-Fi Sederhana</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
<script>
const dummyNetworks = [
{ id: 1, ssid: "Home_WiFi_5G", signal: 4, signalText: "Sangat Kuat", secured: true },
{ id: 2, ssid: "Cafe_Kopi_Free", signal: 3, signalText: "Kuat", secured: false },
{ id: 3, ssid: "Office_Internal", signal: 2, signalText: "Sedang", secured: true },
{ id: 4, ssid: "Tetangga_Sebelah", signal: 1, signalText: "Lemah", secured: true },
{ id: 5, ssid: "Public_Hotspot", signal: 3, signalText: "Kuat", secured: false },
{ id: 6, ssid: "Tiga Putra", signal: 4, signalText: "Sangat Kuat", secured: true }
];
let currentConnectedId = null;
let pendingNetworkId = null;
function getSignalSVG(level) {
return `
`;
}
function getSecuritySVG(secured) {
if (secured) {
return ``;
}
return ``;
}
function renderWifiList(networks) {
const listElement = document.getElementById("wifiList");
listElement.innerHTML = "";
networks.forEach(net => {
const isConnected = net.id === currentConnectedId;
const li = document.createElement("li");
li.className = `wifi-item ${isConnected ? 'connected' : ''}`;
li.innerHTML = `
${isConnected ? 'Putuskan' : 'Hubungkan'}
`;
listElement.appendChild(li);
});
}
function handleConnectClick(id) {
if (currentConnectedId === id) {
currentConnectedId = null;
renderWifiList(dummyNetworks);
return;
}
const network = dummyNetworks.find(n => n.id === id);
if (network.secured) {
openModal(network);
} else {
currentConnectedId = id;
renderWifiList(dummyNetworks);
}
}
function openModal(network) {
pendingNetworkId = network.id;
document.getElementById("modalTitle").innerText = `Hubungkan ke "${network.ssid}"`;
const passInput = document.getElementById("passwordInput");
passInput.value = "";
passInput.type = "password";
updateEyeIcon(false);
document.getElementById("errorText").style.display = "none";
document.getElementById("passwordModal").classList.add("active");
setTimeout(() => passInput.focus(), 100);
}
function closeModal() {
pendingNetworkId = null;
document.getElementById("passwordModal").classList.remove("active");
}
function togglePasswordVisibility() {
const passInput = document.getElementById("passwordInput");
const isPassword = passInput.type === "password";
passInput.type = isPassword ? "text" : "password";
updateEyeIcon(isPassword);
}
function updateEyeIcon(isVisible) {
const eyeIcon = document.getElementById("eyeIcon");
if (isVisible) {
// Ikon Mata Coret (Hide Password)
eyeIcon.innerHTML = `
`;
} else {
// Ikon Mata Terbuka (Show Password)
eyeIcon.innerHTML = `
`;
}
}
function submitPassword() {
const passwordVal = document.getElementById("passwordInput").value;
const errorText = document.getElementById("errorText");
if (passwordVal.length < 8) {
errorText.style.display = "block";
return;
}
currentConnectedId = pendingNetworkId;
closeModal();
renderWifiList(dummyNetworks);
}
document.getElementById("passwordInput").addEventListener("keypress", function(e) {
if (e.key === "Enter") {
submitPassword();
}
});
function scanWifi() {
const statusBar = document.getElementById("statusBar");
const listElement = document.getElementById("wifiList");
const scanBtn = document.getElementById("scanBtn");
scanBtn.classList.add("spinning");
statusBar.style.display = "flex";
listElement.style.opacity = "0.4";
setTimeout(() => {
scanBtn.classList.remove("spinning");
statusBar.style.display = "none";
listElement.style.opacity = "1";
const shuffled = [...dummyNetworks].sort(() => 0.5 - Math.random());
renderWifiList(shuffled);
}, 1500);
}
scanWifi();
</script>
body {
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: #ffffff;
width: 100%;
max-width: 400px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 24px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.header h2 {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
display: flex;
align-items: center;
gap: 8px;
}
.btn-scan {
background-color: #eff6ff;
color: #2563eb;
border: none;
padding: 8px 14px;
border-radius: 20px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.btn-scan:hover {
background-color: #dbeafe;
}
.btn-scan svg {
transition: transform 0.5s ease;
}
.btn-scan.spinning svg {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.status-bar {
background-color: #eff6ff;
color: #2563eb;
padding: 10px 14px;
border-radius: 10px;
font-size: 0.85rem;
margin-bottom: 16px;
display: none;
align-items: center;
gap: 8px;
}
.wifi-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.wifi-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 12px;
transition: all 0.2s ease;
}
.wifi-item:hover {
border-color: #3b82f6;
}
.wifi-main {
display: flex;
align-items: center;
gap: 12px;
}
.wifi-icon-container {
display: flex;
align-items: center;
justify-content: center;
color: #4b5563;
}
.wifi-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.wifi-name {
font-weight: 600;
color: #1f2937;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 6px;
}
.wifi-details {
font-size: 0.75rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 4px;
}
.btn-action {
border: none;
padding: 6px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-connect {
background-color: #f3f4f6;
color: #374151;
}
.btn-connect:hover {
background-color: #e5e7eb;
}
.btn-disconnect {
background-color: #fee2e2;
color: #dc2626;
}
.btn-disconnect:hover {
background-color: #fca5a5;
}
.connected {
border-color: #10b981;
background-color: #f0fdf4;
}
.connected .wifi-icon-container {
color: #10b981;
}
/* SVG Signal Custom Bar Styles */
.signal-bar {
fill: #d1d5db;
}
.signal-bar.active {
fill: currentColor;
}
/* Modal Styling */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 100;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.modal {
background: #ffffff;
width: 90%;
max-width: 340px;
border-radius: 16px;
padding: 20px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.modal h3 {
font-size: 1.1rem;
color: #111827;
margin-bottom: 4px;
}
.modal p {
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 14px;
}
.input-group {
margin-bottom: 16px;
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-wrapper input {
width: 100%;
padding: 10px 38px 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.9rem;
outline: none;
}
.input-wrapper input:focus {
border-color: #2563eb;
}
.toggle-password {
position: absolute;
right: 10px;
background: none;
border: none;
cursor: pointer;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.toggle-password:hover {
color: #111827;
}
.error-text {
color: #dc2626;
font-size: 0.75rem;
margin-top: 6px;
display: none;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.btn-secondary {
background: #f3f4f6;
border: none;
color: #374151;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
}
.btn-primary {
background: #2563eb;
color: white;
border: none;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
}
.btn-primary:hover {
background-color: #1d4ed8;
}
Wi-Fi
Pindai<div id="statusBar" class="status-bar">Memindai jaringan di sekitar...</div>
<ul id="wifiList" class="wifi-list"></ul>
Masukkan Kata Sandi
Masukkan kata sandi untuk jaringan ini.
<div class="input-group">
<div class="input-wrapper">
<input type="password" id="passwordInput" placeholder="Kata Sandi (min. 8 karakter)" autocomplete="off">
<button type="button" class="toggle-password" onclick="togglePasswordVisibility()" title="Tampilkan Kata Sandi">
<svg id="eyeIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
</div>
<span id="errorText" class="error-text">Kata sandi minimal 8 karakter!</span>
</div>
<div class="modal-actions">
<button class="btn-secondary" onclick="closeModal()">Batal</button>
<button class="btn-primary" onclick="submitPassword()">Hubungkan</button>
</div>
</div>
${getSignalSVG(net.signal)}
${net.ssid}
${getSecuritySVG(net.secured)}
${net.secured ? 'Tersandi' : 'Terbuka'} • ${net.signalText}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment