ڈیش بورڈ
آج کے اپائنٹمنٹ
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> |
savicenkonogm-png
commented
Aug 12, 2026
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
Buatlah aplikasi ai yang menghasilkan video modal ketik dan ide
<title>ai app - Prompt to App Generator</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<script>
// Template Kode Generator AI Lokal (Lokal Engine)
const templates = {
'game-tebak': `
<style>
body { background: #0d1117; color: #58a6ff; font-family: sans-serif; text-align: center; padding: 40px; }
input { padding: 10px; font-size: 16px; border-radius: 6px; border: 1px solid #30363d; background: #161b22; color: white; width: 100px; text-align: center; }
button { padding: 10px 20px; font-size: 16px; background: #238636; color: white; border: none; border-radius: 6px; cursor: pointer; }
.box { background: #161b22; padding: 30px; border-radius: 12px; display: inline-block; border: 1px solid #30363d; }
</style>
body {
background-color: #0f172a;
color: #f8fafc;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
header {
background-color: #1e293b;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #334155;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #38bdf8;
display: flex;
align-items: center;
gap: 8px;
}
.badge {
background-color: #22c55e;
color: #000;
font-size: 0.75rem;
padding: 3px 8px;
border-radius: 12px;
font-weight: bold;
}
.main-container {
display: flex;
flex: 1;
height: calc(100vh - 65px);
}
/* Sidebar Control Panel */
.control-panel {
width: 350px;
background-color: #1e293b;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
border-right: 1px solid #334155;
overflow-y: auto;
}
label {
font-size: 0.9rem;
color: #94a3b8;
}
textarea {
width: 100%;
height: 120px;
background-color: #0f172a;
border: 1px solid #475569;
border-radius: 8px;
padding: 12px;
color: #fff;
font-size: 0.95rem;
resize: none;
outline: none;
}
textarea:focus {
border-color: #38bdf8;
}
button.btn-generate {
background-color: #0284c7;
color: white;
border: none;
padding: 12px;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
}
button.btn-generate:hover {
background-color: #0369a1;
}
.presets {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.preset-btn {
background-color: #334155;
border: none;
color: #e2e8f0;
padding: 8px 12px;
border-radius: 6px;
text-align: left;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s;
}
.preset-btn:hover {
background-color: #475569;
}
/* Area Preview Apps/Game */
.preview-panel {
flex: 1;
background-color: #020617;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
iframe {
width: 100%;
height: 100%;
border: none;
background-color: #ffffff;
}
.placeholder-text {
color: #64748b;
text-align: center;
}
@media (max-width: 768px) {
.main-container {
flex-direction: column;
}
.control-panel {
width: 100%;
height: auto;
}
}
🤖 ai app 100% GRATIS
Ketik Ide Aplikasi atau Game kamu:
<textarea id="promptInput" placeholder="Contoh: Buatkan game tebak angka neon atau kalkulator diskon..."></textarea>
<button class="btn-generate" onclick="generateApp()">✨ Buat Aplikasi Sekarang</button>
<div>
<label>Coba Contoh Ide Instan:</label>
<div class="presets">
<button class="preset-btn" onclick="usePreset('game-tebak')">🎮 Game Tebak Angka Neon</button>
<button class="preset-btn" onclick="usePreset('kalkulator')">🧮 Kalkulator Diskon Belanja</button>
<button class="preset-btn" onclick="usePreset('todo')">📝 Aplikasi Catatan Tugas</button>
</div>
</div>
</div>
<!-- Panel Preview -->
<div class="preview-panel" id="previewPanel">
<div class="placeholder-text" id="placeholder">
<h3>Layar Aplikasi/Game AI</h3>
<p>Ketik ide di sebelah kiri lalu klik "Buat Aplikasi Sekarang"</p>
</div>
<iframe id="appFrame" style="display: none;"></iframe>
</div>
</head>
<body>
<div class="box">
<h2>🎯 Game Tebak Angka (1-10)</h2>
<p style="color:#8b949e">Ketik angka lalu tekan tebak!</p><br>
<input type="number" id="num" min="1" max="10">
<button onclick="check()">Tebak</button>
<h3 id="res" style="margin-top:20px; color:#f0883e;"></h3>
</div>
<script>
let target = Math.floor(Math.random() * 10) + 1;
function check() {
let val = document.getElementById('num').value;
let res = document.getElementById('res');
if(val == target) {
res.innerHTML = "🎉 Benar Sekali! Angkanya adalah " + target;
res.style.color = "#3fb950";
} else if(val > target) {
res.innerHTML = "📉 Terlalu Tinggi!";
} else {
res.innerHTML = "📈 Terlalu Rendah!";
}
}
<\/script>
</body>
</html>
`,
'kalkulator': `
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 30px; background: #f4f4f9; display: flex; justify-content: center; }
.card { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 100%; max-width: 300px; }
input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
button { width: 100%; padding: 10px; background: #4f46e5; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
.result { margin-top: 15px; font-weight: bold; color: #16a34a; }
</style>
</head>
<body>
<div class="card">
<h3>🧮 Kalkulator Diskon</h3>
<label>Harga Asli (Rp):</label>
<input type="number" id="price" placeholder="100000">
<label>Diskon (%):</label>
<input type="number" id="discount" placeholder="20">
<button onclick="calc()">Hitung Diskon</button>
<div class="result" id="output"></div>
</div>
<script>
function calc() {
let p = parseFloat(document.getElementById('price').value) || 0;
let d = parseFloat(document.getElementById('discount').value) || 0;
let cut = (p * d) / 100;
let total = p - cut;
document.getElementById('output').innerHTML = "Hemat: Rp " + cut.toLocaleString() + "<br>Bayar: Rp " + total.toLocaleString();
}
<\/script>
</body>
</html>
`,
'todo': `
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background: #fff; }
input { padding: 8px; width: 70%; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 8px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
ul { list-style: none; padding: 0; margin-top: 15px; }
li { background: #f8f9fa; padding: 10px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; }
</style>
</head>
<body>
<h3>📝 Catatan Tugas</h3>
<input type="text" id="task" placeholder="Tambah tugas baru...">
<button onclick="add()">Tambah</button>
<ul id="list"></ul>
<script>
function add() {
let inp = document.getElementById('task');
if(!inp.value) return;
let li = document.createElement('li');
li.innerHTML = inp.value + ' <span style="color:red;cursor:pointer" onclick="this.parentElement.remove()">❌</span>';
document.getElementById('list').appendChild(li);
inp.value = '';
}
<\/script>
</body>
</html>
`
};
function usePreset(key) {
if(key === 'game-tebak') {
document.getElementById('promptInput').value = "Buatkan game tebak angka neon sederhana";
} else if(key === 'kalkulator') {
document.getElementById('promptInput').value = "Buatkan kalkulator hitung diskon belanja";
} else if(key === 'todo') {
document.getElementById('promptInput').value = "Buatkan aplikasi daftar catatan tugas simpel";
}
generateApp();
}
function generateApp() {
const prompt = document.getElementById('promptInput').value.toLowerCase();
const iframe = document.getElementById('appFrame');
const placeholder = document.getElementById('placeholder');
let selectedHtml = "";
if (prompt.includes("game") || prompt.includes("tebak")) {
selectedHtml = templates['game-tebak'];
} else if (prompt.includes("kalkulator") || prompt.includes("diskon") || prompt.includes("hitung")) {
selectedHtml = templates['kalkulator'];
} else if (prompt.includes("tugas") || prompt.includes("catatan") || prompt.includes("todo")) {
selectedHtml = templates['todo'];
} else {
// Generik default jika tidak mencakup kata kunci khusus
selectedHtml = `
<!DOCTYPE html>
<html>
<body style="font-family:sans-serif; text-align:center; padding:50px; background:#f0f4f8;">
<h2>🚀 Aplikasi Berhasil Dibuat!</h2>
<p>Hasil generasi untuk prompt: <b>"${prompt}"</b></p>
<button onclick="alert('Fitur aplikasi berjalan!')" style="padding:10px 20px; background:#0284c7; color:white; border:none; border-radius:6px; cursor:pointer;">Uji Coba Tombol</button>
</body>
</html>
`;
}
placeholder.style.display = 'none';
iframe.style.display = 'block';
// Render kode ke Iframe
const doc = iframe.contentWindow.document;
doc.open();
doc.write(selectedHtml);
doc.close();
}
<title>قطتي التفاعلية</title> <style> * { box-sizing: border-box; user-select: none; } body { margin: 0; min-height: 100vh; background: linear-gradient(145deg, #1f3a5f, #0d1b2a); display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', Tahoma, sans-serif; } .game-container { background: #2a4b74; padding: 25px 30px 35px; border-radius: 70px 70px 40px 40px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.7), inset 0 0 15px #6d9fd1; text-align: center; max-width: 450px; width: 100%; } h1 { color: #ffe484; text-shadow: 0 3px 0 #a57c1e, 0 5px 10px black; font-size: 2rem; margin: -5px 0 10px 0; letter-spacing: 2px; } #catCanvas { background: #9ac2d9; border-radius: 120px 120px 60px 60px; display: block; margin: 10px auto; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1/1; cursor: pointer; box-shadow: inset 0 -8px 0 #4a6f8a, 0 12px 18px rgba(0, 0, 0, 0.5); touch-action: none; } .status-box { background: #0f263b; padding: 12px 10px; border-radius: 60px; margin: 18px 0 14px; color: #c7e6ff; font-weight: bold; font-size: 1.1rem; box-shadow: inset 0 3px 8px #00000066; border: 1px solid #5787b0; min-height: 55px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .status-box span { background: #1d3d57; padding: 5px 18px; border-radius: 40px; color: #ffd966; } .btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 10px 0 5px; } .btn { background: #fedb5f; border: none; border-radius: 60px; padding: 10px 22px; font-weight: bold; font-size: 1rem; color: #1f2e3f; box-shadow: 0 6px 0 #896e1f, 0 6px 10px black; cursor: pointer; transition: 0.08s linear; display: inline-flex; align-items: center; gap: 6px; touch-action: manipulation; } .btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #896e1f; } .btn-secondary { background: #b3d0e8; box-shadow: 0 6px 0 #5c7993; color: #0b1d2b; } .footer { color: #8bb3d1; margin-top: 15px; font-size: 0.8rem; } #speechHint { background: #192f42; padding: 4px 14px; border-radius: 50px; color: #9fc9e5; font-size: 0.9rem; } </style> ```<script> (function() { // ---------- إعدادات اللعبة ---------- const canvas = document.getElementById('catCanvas'); const ctx = canvas.getContext('2d'); const moodDisplay = document.getElementById('moodDisplay'); const speechHint = document.getElementById('speechHint'); // حالات القطة const MOOD = { HAPPY: '😊 سعيدة', SAD: '😢 حزينة', ANGRY: '😾 غضبانة', SLEEPY: '😴 نعسانة', TALKING: '🗣️ تتكلم' }; let currentMood = MOOD.HAPPY; let eyeBlink = 0; // 0 مفتوح, 1 مغلق let blinkTimer = 0; let earAngle = 0; // لتحريك الأذن let mouthOpen = 0; // 0 مغلق, 1 مفتوح let talkTimer = 0; let tailWag = 0; // متغيرات الصوت let recognition = null; let isListening = false; let lastRecognizedText = ''; // ---------- رسم القطة ---------- function drawCat(blink, ear, mouth, tail, mood) { ctx.clearRect(0, 0, 400, 400); // خلفية دائرية ناعمة const grd = ctx.createRadialGradient(200, 200, 50, 200, 200, 200); grd.addColorStop(0, '#b8daf0'); grd.addColorStop(1, '#7aa5c4'); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(200, 200, 190, 0, Math.PI * 2); ctx.fill(); // ---- جسم القطة ---- ctx.shadowColor = 'rgba(0,0,0,0.3)'; ctx.shadowBlur = 18; ctx.shadowOffsetY = 5; // الجسد (بيضاوي) ctx.fillStyle = '#f5b27e'; ctx.strokeStyle = '#b16d3a'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.ellipse(200, 240, 90, 70, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); // الرأس (دائرة) ctx.fillStyle = '#f5b27e'; ctx.strokeStyle = '#b16d3a'; ctx.beginPath(); ctx.arc(200, 160, 80, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); // ---- الأذنان ---- ctx.fillStyle = '#f5b27e'; ctx.strokeStyle = '#b16d3a'; ctx.lineWidth = 2; // أذن يمنى (مع زاوية) ctx.save(); ctx.translate(245, 100); ctx.rotate(0.3 + ear * 0.1); ctx.beginPath(); ctx.moveTo(0, -10); ctx.lineTo(-25, -50); ctx.lineTo(25, -45); ctx.closePath(); ctx.fill(); ctx.stroke(); // أذن داخلي ctx.fillStyle = '#f7c2a0'; ctx.beginPath(); ctx.moveTo(0, -10); ctx.lineTo(-15, -40); ctx.lineTo(15, -37); ctx.closePath(); ctx.fill(); ctx.restore(); // أذن يسرى ctx.save(); ctx.translate(155, 100); ctx.rotate(-0.3 - ear * 0.1); ctx.fillStyle = '#f5b27e'; ctx.strokeStyle = '#b16d3a'; ctx.beginPath(); ctx.moveTo(0, -10); ctx.lineTo(-25, -45); ctx.lineTo(25, -50); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.fillStyle = '#f7c2a0'; ctx.beginPath(); ctx.moveTo(0, -10); ctx.lineTo(-15, -37); ctx.lineTo(15, -40); ctx.closePath(); ctx.fill(); ctx.restore(); // ---- العينان ---- ctx.shadowBlur = 8; // العين اليمنى ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.ellipse(230, 155, 22, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#4a2810'; ctx.lineWidth = 2; ctx.stroke(); // بؤبؤ العين ctx.fillStyle = '#2d1a0a'; if (blink < 0.3) { ctx.beginPath(); ctx.ellipse(232, 158, 11, 14, 0, 0, Math.PI * 2); ctx.fill(); // انعكاس ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(237, 152, 4, 0, Math.PI * 2); ctx.fill(); } else { // رمش (خط) ctx.strokeStyle = '#2d1a0a'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(210, 155); ctx.lineTo(250, 155); ctx.stroke(); } // العين اليسرى ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.ellipse(170, 155, 22, 25, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#4a2810'; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = '#2d1a0a'; if (blink < 0.3) { ctx.beginPath(); ctx.ellipse(168, 158, 11, 14, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(163, 152, 4, 0, Math.PI * 2); ctx.fill(); } else { ctx.strokeStyle = '#2d1a0a'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(150, 155); ctx.lineTo(190, 155); ctx.stroke(); } // ---- الأنف ---- ctx.shadowBlur = 5; ctx.fillStyle = '#f08080'; ctx.beginPath(); ctx.moveTo(200, 180); ctx.lineTo(190, 190); ctx.lineTo(210, 190); ctx.closePath(); ctx.fill(); // ---- الفم ---- ctx.strokeStyle = '#7a3f1a'; ctx.lineWidth = 2.5; ctx.beginPath(); if (mouth > 0.3) { // فم مفتوح (دائرة) ctx.arc(200, 202, 14, 0, Math.PI); ctx.fillStyle = '#a04a3a'; ctx.fill(); } else { // فم مغلق (خط) ctx.moveTo(182, 195); ctx.quadraticCurveTo(200, 205, 218, 195); } ctx.stroke(); // ---- الشوارب ---- ctx.strokeStyle = '#4f3a2a'; ctx.lineWidth = 1.8; ctx.shadowBlur = 3; for (let i = -1; i <= 1; i += 2) { ctx.beginPath(); ctx.moveTo(170 + i * 20, 185 + i * 5); ctx.lineTo(120 + i * 30, 175 + i * 12); ctx.stroke(); ctx.beginPath(); ctx.moveTo(170 + i * 20, 195 + i * 5); ctx.lineTo(120 + i * 30, 195 + i * 12); ctx.stroke(); ctx.beginPath(); ctx.moveTo(170 + i * 20, 205 + i * 5); ctx.lineTo(125 + i * 30, 215 + i * 10); ctx.stroke(); } // ---- الذيل (يتحرك) ---- ctx.shadowBlur = 10; ctx.fillStyle = '#e8a06b'; ctx.strokeStyle = '#b16d3a'; ctx.lineWidth = 6; ctx.beginPath(); const tailBaseX = 290, tailBaseY = 260; ctx.moveTo(tailBaseX, tailBaseY); const tailSway = Math.sin(tail) * 12; ctx.quadraticCurveTo(330 + tailSway, 200 + tailSway * 0.4, 350 + tailSway * 1.2, 150 + tailSway * 0.3); ctx.stroke(); // نهاية الذيل ctx.fillStyle = '#d68b50'; ctx.beginPath(); ctx.arc(350 + tailSway * 1.2, 150 + tailSway * 0.3, 12, 0, Math.PI * 2); ctx.fill(); // ---- الكفوف الأمامية ---- ctx.shadowBlur = 8; ctx.fillStyle = '#f5b27e'; ctx.strokeStyle = '#b16d3a'; ctx.lineWidth = 2; for (let side = -1; side <= 1; side += 2) { ctx.beginPath(); ctx.ellipse(160 + side * 50, 290, 18, 22, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); // وسادة ctx.fillStyle = '#e8967a'; ctx.beginPath(); ctx.ellipse(160 + side * 50, 295, 8, 10, 0, 0, Math.PI * 2); ctx.fill(); } ctx.shadowBlur = 0; ctx.shadowOffsetY = 0; // تعبيرات إضافية حسب المزاج if (mood === MOOD.SAD) { ctx.fillStyle = '#5b7f9e'; ctx.font = '30px sans-serif'; ctx.fillText('💧', 140, 130); ctx.fillText('💧', 230, 125); } else if (mood === MOOD.ANGRY) { ctx.strokeStyle = '#3f1a0a'; ctx.lineWidth = 4; // حاجبين مقطبين ctx.beginPath(); ctx.moveTo(150, 120); ctx.lineTo(185, 130); ctx.stroke(); ctx.beginPath(); ctx.moveTo(250, 120); ctx.lineTo(215, 130); ctx.stroke(); // علامة غضب ctx.fillStyle = '#cc3333'; ctx.font = '28px sans-serif'; ctx.fillText('⚡', 270, 100); } else if (mood === MOOD.SLEEPY) { ctx.fillStyle = '#4a6f8a'; ctx.font = '28px sans-serif'; ctx.fillText('💤', 140, 110); ctx.fillText('💤', 240, 105); } } // ---------- تحديث الحالة ---------- function updateGame() { // الطرفة التلقائية blinkTimer++; if (blinkTimer > 120) { eyeBlink = 1; if (blinkTimer > 135) { eyeBlink = 0; blinkTimer = 0; } } // تحريك الذيل tailWag += 0.06; // إنهاء التحدث بعد فترة if (talkTimer > 0) { talkTimer--; if (talkTimer === 0) { mouthOpen = 0; if (currentMood === MOOD.TALKING) { currentMood = MOOD.HAPPY; updateMoodDisplay(); } } } // تحريك الأذن بشكل طبيعي earAngle = Math.sin(Date.now() / 1500) * 0.2; drawCat(eyeBlink, earAngle, mouthOpen, tailWag, currentMood); requestAnimationFrame(updateGame); } function updateMoodDisplay() { moodDisplay.textContent = currentMood; } // ---------- التفاعل مع القطة ---------- function setMood(newMood, duration = 0) { currentMood = newMood; updateMoodDisplay(); if (duration > 0) { setTimeout(() => { if (currentMood === newMood) { currentMood = MOOD.HAPPY; updateMoodDisplay(); } }, duration); } } function petCat() { setMood(MOOD.HAPPY); speechHint.textContent = '🤗 دلعتني! أنا سعيدة'; // حركة الأذن earAngle = 0.7; setTimeout(() => { earAngle = 0; }, 300); // فتح الفم قليلاً mouthOpen = 0.6; setTimeout(() => { mouthOpen = 0; }, 400); } function hitCat() { setMood(MOOD.ANGRY, 1800); speechHint.textContent = '😾 آه! لماذا تضربني؟'; mouthOpen = 1; setTimeout(() => { mouthOpen = 0; }, 600); earAngle = -0.9; setTimeout(() => { earAngle = 0; }, 400); } function makeSleepy() { setMood(MOOD.SLEEPY, 2500); speechHint.textContent = '😴 أنعس... نمت...'; eyeBlink = 1; setTimeout(() => { eyeBlink = 0; }, 2000); } // ---------- خاصية التعرف على الصوت (كرر كلامي) ---------- function initSpeech() { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { speechHint.textContent = '😺 قطتي
<canvas id="catCanvas" width="400" height="400"></canvas> <div class="status-box" id="statusBox"> <span id="speechHint">👆 اضغط القطة</span> <span id="moodDisplay">😊 سعيدة</span> </div> <div class="btn-group"> <button class="btn" id="micBtn">🎤 كرر كلامي</button> <button class="btn btn-secondary" id="petBtn">🤚 دلّعني</button> <button class="btn btn-secondary" id="resetBtn">🌀 إعادة</button> </div> <div class="footer"> اضغط على القطة أو استخدم الأزرار </div>⚠️ متصفحك لا يدعم الصوت'; return false; } const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; recognition = new SpeechRecognition(); recognition.lang = 'ar-AR'; recognition.continuous = false; recognition.interimResults = false; recognition.onstart = function() { isListening = true; speechHint.textContent = '🎤 استمع... تكلم الآن'; }; recognition.onresult = function(event) { const text = event.results[0][0].transcript; lastRecognizedText = text; speechHint.textContent = '🗣️ قلت: "' + text + '"'; // تفاعل القطة setMood(MOOD.TALKING, 1500); mouthOpen = 1; talkTimer = 25; // تحريك الأذن earAngle = 0.8; setTimeout(() => { earAngle = 0; }, 500); // نطق النص (تخيلي) setTimeout(() => { if (currentMood === MOOD.TALKING) { currentMood = MOOD.HAPPY; updateMoodDisplay(); } }, 1200); isListening = false; }; recognition.onerror = function(event) { speechHint.textContent = '❌ خطأ: ' + event.error; isListening = false; if (event.error === 'not-allowed') { speechHint.textContent = '🚫 امنح إذن الميكروفون'; } }; recognition.onend = function() { isListening = false; if (speechHint.textContent.includes('استمع')) { speechHint.textContent = '👆 اضغط "كرر كلامي" مرة أخرى'; } }; return true; } function startListening() { if (!recog ```nition) { const supported = initSpeech(); if (!supported) return; } if (isListening) { recogniti
https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js
<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