Hugging Face's logo

Spaces:
hader1890
/
hg3
Running

App Files Community
hg3 / index.html
hader1890's picture
hader1890
برنامح تقوية الشبكة الوايفاي الشبكات التي موجوده عل عاتف - Initial Deployment
6e62789 verified
raw
history blame contribute delete
16.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;
 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
.signal-strength {
 position: relative;
 height: 20px;
 width: 100%;
 background: #e0e0e0;
 border-radius: 10px;
 overflow: hidden;
 }
.signal-bar {
 position: absolute;
 height: 100%;
 background: linear-gradient(90deg, #4CAF50 0%, #2E7D32 100%);
 border-radius: 10px;
 transition: width 0.5s ease;
 }
.network-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
.animate-pulse {
 animation: pulse 1.5s infinite;
 }
@keyframes pulse {
 0% { opacity: 0.6; }
 50% { opacity: 1; }
 100% { opacity: 0.6; }
 }
 </style>
</head>
<body class="min-h-screen py-8 px-4">
 <div class="max-w-4xl mx-auto">
 <!-- Header -->
 <header class="text-center mb-10">
 <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">
 <i class="fas fa-wifi mr-2"></i> برنامج تقوية الشبكة الواي فاي
 </h1>
 <p class="text-gray-600 text-lg">تحليل الشبكات المتاحة وتحسين إشارة الواي فاي</p>
 </header>
<!-- Main Card -->
 <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
 <div class="flex flex-col md:flex-row gap15">
 <!-- WiFi Signal -->
 <div class="md:w-1/2 p-4 border border-gray-200 rounded-lg mb-4 md:mb-0">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">
 <i class="fas fa-signal mr-2 text-blue-500"></i> قوة الإشارة الحالية
 </h2>
 <div class="flex items-center mb-3">
 <div class="signal-strength mr-3">
 <div id="currentSignal" class="signal-bar" style="width: 45%;"></div>
 </div>
 <span id="signalPercent" class="font-bold text-gray-700">45%</span>
 </div>
 <p id="signalStatus" class="text-gray-600 mb-4">إشارة ضعيفة - قد تواجه مشاكل في الاتصال</p>
<button id="boostBtn" class="w-full py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-indigo-700 transition-all duration-300 flex items-center justify-center">
 <i class="fas fa-bolt mr-2 animate-pulse"></i> تقوية الإشارة
 </button>
<div class="mt-6">
 <h3 class="font-medium text-gray-700 mb-2">
 <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> نصائح لتحسين الإشارة:
 </h3>
 <ul class="list-disc pr-5 text-gray-600 space-y-1">
 <li>وضع الراوتر في مكان مرتفع ومركزي</li>
 <li>البعد عن مصادر التشويش مثل الميكروويف</li>
 <li>تغيير قناة الواي فاي في إعدادات الراوتر</li>
 <li>استخدام معزز إشارة إذا كانت المساحة كبيرة</li>
 </ul>
 </div>
 </div>
<!-- Network Info -->
 <div class="md:w-1/2 p-4 border border-gray-200 rounded-lg">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">
 <i class="fas fa-network-wired mr-2 text-green-500"></i> معلومات الشبكة
 </h2>
<div class="space-y-3 mb-4">
 <div class="flex justify-between">
 <span class="text-gray-600">اسم الشبكة (SSID):</span>
 <span id="ssid" class="font-medium">MyWiFi_5G</span>
 </div>
 <div class="flex justify-between">
 <span class="text-gray-600">عنوان IP:</span>
 <span id="ipAddress" class="font-medium">192.168.1.105</span>
 </div>
 <div class="flex justify-between">
 <span class="text-gray-600">سرعة التحميل:</span>
 <span id="downloadSpeed" class="font-medium">32.4 Mbps</span>
 </div>
 <div class="flex justify-between">
 <span class="text-gray-600">سرعة الرفع:</span>
 <span id="uploadSpeed" class="font-medium">8.7 Mbps</span>
 </div>
 <div class="flex justify-between">
 <span class="text-gray-600">زمن الاستجابة:</span>
 <span id="ping" class="font-medium">24 ms</span>
 </div>
 </div>
<button id="refreshBtn" class="w-full py-2 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition flex items-center justify-center">
 <i class="fas fa-sync-alt mr-2"></i> تحديث المعلومات
 </button>
<div class="mt-6">
 <h3 class="font-medium text-gray-700 mb-2">
 <i class="fas fa-chart-line mr-2 text-purple-500"></i> إحصاءات الاستخدام:
 </h3>
 <div class="h-24 flex items-end space-x-2">
 <div class="flex-1 bg-blue-100 rounded-t-sm" style="height: 20%"></div>
 <div class="flex-1 bg-blue-200 rounded-t-sm" style="height: 45%"></div>
 <div class="flex-1 bg-blue-300 rounded-t-sm" style="height: 70%"></div>
 <div class="flex-1 bg-blue-400 rounded-t-sm" style="height: 30%"></div>
 <div class="flex-1 bg-blue-500 rounded-t-sm" style="height: 90%"></div>
 <div class="flex-1 bg-blue-600 rounded-t-sm" style="height: 60%"></div>
 <div class="flex-1 bg-blue-700 rounded-t-sm" style="height: 40%"></div>
 </div>
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>الأحد</span>
 <span>الإثنين</span>
 <span>الثلاثاء</span>
 <span>الأربعاء</span>
 <span>الخميس</span>
 <span>الجمعة</span>
 <span>السبت</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Available Networks -->
 <div class="bg-white rounded-xl shadow-lg p-6">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">
 <i class="fas fa-wifi mr-2 text-indigo-500"></i> الشبكات المتاحة
 </h2>
<div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الشبكة</th>
 <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">قوة الإشارة</th>
 <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التشفير</th>
 <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">القناة</th>
 <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراء</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200" id="networksTable">
 <!-- Networks will be populated here -->
 </tbody>
 </table>
 </div>
<div class="mt-4 text-gray-500 text-sm flex items-center">
 <i class="fas fa-info-circle mr-2"></i> آخر تحديث: <span id="lastUpdated">الآن</span>
 </div>
 </div>
<!-- Footer -->
 <footer class="mt-12 text-center text-gray-500 text-sm">
 <p>برنامج تقوية الشبكة الواي فاي &copy; 2023 - جميع الحقوق محفوظة</p>
 </footer>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Sample data for available networks
 const availableNetworks = [
 { name: 'HomeWiFi_5G', strength: 90, encryption: 'WPA2', channel: 36, connected: true },
 { name: 'NeighborNet', strength: 65, encryption: 'WPA2', channel: 6, connected: false },
 { name: 'PublicWiFi', strength: 40, encryption: 'مفتوحة', channel: 11, connected: false },
 { name: 'OfficeNetwork', strength: 78, encryption: 'WPA3', channel: 149, connected: false },
 { name: 'GuestWiFi', strength: 30, encryption: 'WPA2', channel: 1, connected: false }
 ];
// Populate networks table
 const networksTable = document.getElementById('networksTable');
availableNetworks.forEach(network => {
 const row = document.createElement('tr');
 row.className = network.connected ? 'bg-blue-50' : 'hover:bg-gray-50';
row.innerHTML = `
 <td class="px-6 py-4 whitespace-nowrap ${network.connected ? 'font-bold text-blue-600' : 'text-gray-900'}">
 <div class="flex items-center">
 <i class="fas fa-wifi mr-2 ${network.connected ? 'text-blue-500' : 'text-gray-400'}"></i>
 ${network.name}
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="signal-strength" style="width: 100px;">
 <div class="signal-bar" style="width: ${network.strength}%;"></div>
 </div>
 <span class="text-sm text-gray-500 mr-2">${network.strength}%</span>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
 ${network.encryption === 'مفتوحة' ?
'<span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">مفتوحة</span>' :
'<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">'+network.encryption+'</span>'}
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
 ${network.channel}
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
 ${network.connected ?
'<button class="text-blue-600 hover:text-blue-900 mr-3">تغيير</button>' :
'<button class="text-indigo-600 hover:text-indigo-900 mr-3">اتصال</button>'}
 </td>
 `;
networksTable.appendChild(row);
 });
// Boost button functionality
 const boostBtn = document.getElementById('boostBtn');
 const currentSignal = document.getElementById('currentSignal');
 const signalPercent = document.getElementById('signalPercent');
 const signalStatus = document.getElementById('signalStatus');
boostBtn.addEventListener('click', function() {
 // Simulate boosting
 boostBtn.disabled = true;
 boostBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> جاري تحسين الإشارة...';
setTimeout(() => {
 const newStrength = Math.min(100, Math.floor(Math.random() * 30) + 55);
 currentSignal.style.width = newStrength + '%';
 signalPercent.textContent = newStrength + '%';
if (newStrength > 75) {
 signalStatus.textContent = 'إشارة ممتازة - اتصال سريع ومستقر';
 signalStatus.className = 'text-green-600 mb-4';
 } else if (newStrength > 50) {
 signalStatus.textContent = 'إشارة جيدة - اتصال مستقر';
 signalStatus.className = 'text-blue-600 mb-4';
 } else {
 signalStatus.textContent = 'إشارة ضعيفة - قد تواجه مشاكل في الاتصال';
 signalStatus.className = 'text-orange-600 mb-4';
 }
// Pulse animation for feedback
 currentSignal.classList.add('animate-pulse');
 setTimeout(() => {
 currentSignal.classList.remove('animate-pulse');
 }, 1000);
boostBtn.disabled = false;
 boostBtn.innerHTML = '<i class="fas fa-bolt mr-2 animate-pulse"></i> تقوية الإشارة';
 }, 2000);
 });
// Refresh button functionality
 const refreshBtn = document.getElementById('refreshBtn');
 const lastUpdated = document.getElementById('lastUpdated');
refreshBtn.addEventListener('click', function() {
 refreshBtn.disabled = true;
 refreshBtn.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-2"></i> جاري التحديث...';
// Update timestamp
 const now = new Date();
 const timeString = now.toLocaleTimeString('ar-EG');
 lastUpdated.textContent = timeString;
setTimeout(() => {
 refreshBtn.disabled = false;
 refreshBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> تحديث المعلومات';
 }, 1500);
 });
 });
 </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/hg3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>