Hugging Face's logo

Spaces:
hader1890
/
gh4
Running

App Files Community
gh4 / index.html
hader1890's picture
hader1890
برنامج كشف رمز وايفاي ؤتصال بهاء مباشر - Initial Deployment
34f2c95 verified
raw
history blame contribute delete
17.8 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>كاشف شبكات الواي فاي</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
 body {
 font-family: 'Tajawal', sans-serif;
 }
 .signal-strength {
 position: relative;
 width: 24px;
 height: 24px;
 }
 .signal-bar {
 position: absolute;
 bottom: 0;
 background-color: #4ade80;
 border-radius: 2px;
 }
 .signal-bar-1 { width: 4px; height: 6px; left: 0; }
 .signal-bar-2 { width: 4px; height: 10px; left: 6px; }
 .signal-bar-3 { width: 4px; height: 14px; left: 12px; }
 .signal-bar-4 { width: 4px; height: 18px; left: 18px; }
.animate-pulse {
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 @keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
 }
.network-card {
 transition: all 0.3s ease;
 }
 .network-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 </style>
</head>
<body class="bg-gray-100 min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="mb-8 text-center">
 <h1 class="text-3xl font-bold text-indigo-800 mb-2">كاشف شبكات الواي فاي</h1>
 <p class="text-gray-600">أداة لفحص الشبكات اللاسلكية القريبة وعرض معلومات الاتصال</p>
 </header>
<!-- Main Card -->
 <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
 <div class="flex flex-col md:flex-row items-center justify-between gap-4">
 <div class="flex items-center gap-3">
 <div class="p-3 bg-indigo-100 rounded-full">
 <i class="fas fa-wifi text-indigo-600 text-xl"></i>
 </div>
 <div>
 <h2 class="font-bold text-lg">فحص الشبكات المتاحة</h2>
 <p class="text-gray-500 text-sm">سيتم عرض جميع الشبكات اللاسلكية القريبة</p>
 </div>
 </div>
 <button id="scanBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-colors">
 <i class="fas fa-sync-alt"></i>
 بدء الفحص
 </button>
 </div>
<div id="scanProgress" class="mt-6 hidden">
 <div class="flex items-center gap-3 mb-3">
 <div class="animate-pulse">
 <i class="fas fa-circle-notch fa-spin text-indigo-600"></i>
 </div>
 <span class="text-gray-700">جاري البحث عن الشبكات المتاحة...</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
 </div>
<!-- Networks List -->
 <div id="networksContainer" class="hidden">
 <div class="flex items-center justify-between mb-4">
 <h3 class="font-bold text-lg">الشبكات المكتشفة</h3>
 <div class="text-sm text-gray-500">
 <span id="networksCount">0</span> شبكة
 </div>
 </div>
<div id="networksList" class="grid gap-4">
 <!-- Networks will be added here by JavaScript -->
 </div>
 </div>
<!-- No Networks Message -->
 <div id="noNetworks" class="hidden text-center py-12 bg-white rounded-xl shadow">
 <i class="fas fa-wifi-slash text-4xl text-gray-300 mb-4"></i>
 <h4 class="text-lg font-medium text-gray-700">لم يتم العثور على شبكات واي فاي</h4>
 <p class="text-gray-500 mt-2">تأكد من تشغيل الواي فاي على جهازك</p>
 </div>
<!-- Network Details Modal -->
 <div id="networkModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
 <div class="bg-white rounded-xl w-full max-w-md">
 <div class="p-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold" id="modalNetworkName">اسم الشبكة</h3>
 <button id="closeModal" class="text-gray-400 hover:text-gray-600">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <div class="flex items-center gap-3">
 <div class="p-2 bg-indigo-100 rounded-lg">
 <i class="fas fa-lock text-indigo-600"></i>
 </div>
 <div>
 <p class="text-gray-500 text-sm">نوع الحماية</p>
 <p class="font-medium" id="modalSecurity">WPA2</p>
 </div>
 </div>
<div class="flex items-center gap-3">
 <div class="p-2 bg-indigo-100 rounded-lg">
 <i class="fas fa-signal text-indigo-600"></i>
 </div>
 <div>
 <p class="text-gray-500 text-sm">قوة الإشارة</p>
 <p class="font-medium" id="modalStrength">قوية</p>
 </div>
 </div>
<div class="flex items-center gap-3">
 <div class="p-2 bg-indigo-100 rounded-lg">
 <i class="fas fa-key text-indigo-600"></i>
 </div>
 <div>
 <p class="text-gray-500 text-sm">كلمة المرور</p>
 <div class="flex items-center gap-2">
 <input type="password" id="passwordInput" class="border rounded px-3 py-1 w-full" value="********" readonly>
 <button id="showPassword" class="text-indigo-600">
 <i class="far fa-eye"></i>
 </button>
 </div>
 </div>
 </div>
<div class="pt-4">
 <button id="connectBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg flex items-center justify-center gap-2">
 <i class="fas fa-plug"></i>
 الاتصال بالشبكة
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 const scanBtn = document.getElementById('scanBtn');
 const scanProgress = document.getElementById('scanProgress');
 const progressBar = document.getElementById('progressBar');
 const networksContainer = document.getElementById('networksContainer');
 const networksList = document.getElementById('networksList');
 const noNetworks = document.getElementById('noNetworks');
 const networksCount = document.getElementById('networksCount');
 const networkModal = document.getElementById('networkModal');
 const closeModal = document.getElementById('closeModal');
 const showPassword = document.getElementById('showPassword');
 const passwordInput = document.getElementById('passwordInput');
 const connectBtn = document.getElementById('connectBtn');
// Sample WiFi networks data (in a real app, this would come from an API)
 const sampleNetworks = [
 { name: 'STC_5G_Home', strength: 4, security: 'WPA2', password: 'stc123456', connected: false },
 { name: 'Zain_WiFi', strength: 3, security: 'WPA2', password: 'zain2023', connected: false },
 { name: 'Mobily_WiFi', strength: 2, security: 'WPA', password: 'mobily789', connected: false },
 { name: 'CoffeeShop_Free', strength: 3, security: 'None', password: '', connected: true },
 { name: 'Home_Network', strength: 4, security: 'WPA2', password: 'myhome123', connected: false },
 { name: 'Neighbor_WiFi', strength: 1, security: 'WPA2', password: 'neighbor456', connected: false }
 ];
// Scan button click handler
 scanBtn.addEventListener('click', function() {
 // Show loading state
 scanBtn.disabled = true;
 scanProgress.classList.remove('hidden');
// Simulate scanning progress
 let progress = 0;
 const interval = setInterval(() => {
 progress += 5;
 progressBar.style.width = `${progress}%`;
if (progress >= 100) {
 clearInterval(interval);
 setTimeout(showNetworks, 500);
 }
 }, 100);
 });
// Display networks after scan
 function showNetworks() {
 scanProgress.classList.add('hidden');
 scanBtn.disabled = false;
if (sampleNetworks.length > 0) {
 networksContainer.classList.remove('hidden');
 noNetworks.classList.add('hidden');
// Clear previous results
 networksList.innerHTML = '';
// Add networks to the list
 sampleNetworks.forEach((network, index) => {
 const networkCard = document.createElement('div');
 networkCard.className = 'network-card bg-white rounded-lg shadow p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50';
 networkCard.innerHTML = `
 <div class="flex items-center gap-3">
 <div class="p-2 bg-indigo-100 rounded-lg">
 <i class="fas fa-wifi text-indigo-600"></i>
 </div>
 <div>
 <h4 class="font-medium">${network.name}</h4>
 <div class="flex items-center gap-2 text-xs text-gray-500">
 <span>${network.security}</span>
 <span>•</span>
 <div class="flex items-center gap-1">
 ${renderSignalStrength(network.strength)}
 </div>
 </div>
 </div>
 </div>
 <div class="flex items-center gap-2">
 ${network.connected ? '<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">متصل</span>' : ''}
 <i class="fas fa-chevron-left text-gray-400"></i>
 </div>
 `;
networkCard.addEventListener('click', () => openNetworkModal(network));
 networksList.appendChild(networkCard);
 });
networksCount.textContent = sampleNetworks.length;
 } else {
 networksContainer.classList.add('hidden');
 noNetworks.classList.remove('hidden');
 }
 }
// Render signal strength indicator
 function renderSignalStrength(strength) {
 let bars = '';
 for (let i = 1; i <= 4; i++) {
 const active = i <= strength;
 bars += `<div class="w-1 h-${i} rounded-sm ${active ? 'bg-green-500' : 'bg-gray-300'}"></div>`;
 }
 return bars;
 }
// Open network details modal
 function openNetworkModal(network) {
 document.getElementById('modalNetworkName').textContent = network.name;
 document.getElementById('modalSecurity').textContent = network.security || 'غير محمي';
let strengthText = '';
 if (network.strength === 4) strengthText = 'قوية جداً';
 else if (network.strength === 3) strengthText = 'قوية';
 else if (network.strength === 2) strengthText = 'متوسطة';
 else strengthText = 'ضعيفة';
document.getElementById('modalStrength').textContent = strengthText;
 passwordInput.value = network.password ? '********' : 'غير محمية';
 passwordInput.type = 'password';
if (network.connected) {
 connectBtn.innerHTML = '<i class="fas fa-sign-out-alt"></i> قطع الاتصال';
 connectBtn.className = connectBtn.className.replace('bg-indigo-600 hover:bg-indigo-700', 'bg-red-600 hover:bg-red-700');
 } else {
 connectBtn.innerHTML = '<i class="fas fa-plug"></i> الاتصال بالشبكة';
 connectBtn.className = connectBtn.className.replace('bg-red-600 hover:bg-red-700', 'bg-indigo-600 hover:bg-indigo-700');
 }
networkModal.classList.remove('hidden');
 }
// Close modal
 closeModal.addEventListener('click', () => {
 networkModal.classList.add('hidden');
 });
// Toggle password visibility
 showPassword.addEventListener('click', function() {
 const network = sampleNetworks.find(n => n.name === document.getElementById('modalNetworkName').textContent);
 if (passwordInput.type === 'password') {
 passwordInput.type = 'text';
 passwordInput.value = network.password || 'غير محمية';
 showPassword.innerHTML = '<i class="far fa-eye-slash"></i>';
 } else {
 passwordInput.type = 'password';
 passwordInput.value = network.password ? '********' : 'غير محمية';
 showPassword.innerHTML = '<i class="far fa-eye"></i>';
 }
 });
// Connect button handler
 connectBtn.addEventListener('click', function() {
 const networkName = document.getElementById('modalNetworkName').textContent;
 const networkIndex = sampleNetworks.findIndex(n => n.name === networkName);
if (networkIndex !== -1) {
 // Toggle connection status
 sampleNetworks[networkIndex].connected = !sampleNetworks[networkIndex].connected;
// Show connection status
 alert(sampleNetworks[networkIndex].connected ?
`تم الاتصال بنجاح بشبكة ${networkName}` :
`تم قطع الاتصال عن شبكة ${networkName}`);
// Close modal and refresh list
 networkModal.classList.add('hidden');
 showNetworks();
 }
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hader1890/gh4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>