Skip to content

Instantly share code, notes, and snippets.

@isdaviddong

isdaviddong/index.html

Last active August 17, 2026 02:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save isdaviddong/23cc140c1780828b44f79397f737b95e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
@mangalguruji

mangalguruji commented Aug 16, 2026

Copy link
Copy Markdown

Website design kijiye

@pawanji4204-bit

pawanji4204-bit commented Aug 17, 2026

Copy link
Copy Markdown

Hello

@pawanji4204-bit

pawanji4204-bit commented Aug 17, 2026

Copy link
Copy Markdown

Nice

@pawanji4204-bit

pawanji4204-bit commented Aug 17, 2026

Copy link
Copy Markdown

Hello

@epotfatma-web

epotfatma-web commented Aug 17, 2026

Copy link
Copy Markdown
<script src="https://gist.github.com/isdaviddong/23cc140c1780828b44f79397f737b95e.js"></script>

@epotfatma-web

epotfatma-web commented Aug 17, 2026

Copy link
Copy Markdown
<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; } 
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;
}
</style>

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>
<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 = `
${getSignalSVG(net.signal)}
${net.ssid} ${getSecuritySVG(net.secured)} ${net.secured ? 'Tersandi' : 'Terbuka'} • ${net.signalText}
${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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment