Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>عرض احترافي - المساعد السعودي</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #1a2a6c, #4a148c); | |
| color: #fff; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .header { | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 15px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .logo { | |
| font-size: 24px; | |
| font-weight: bold; | |
| background: linear-gradient(90deg, #ff8a00, #e52e71); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .btn { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 8px 16px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 14px; | |
| } | |
| .btn:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #ff8a00, #e52e71); | |
| border: none; | |
| } | |
| .container { | |
| display: flex; | |
| height: calc(100vh - 70px); | |
| } | |
| .iframe-container { | |
| flex: 1; | |
| padding: 15px; | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .iframe-wrapper { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| background-color: white; | |
| } | |
| .info-panel { | |
| width: 300px; | |
| background: rgba(0, 0, 0, 0.6); | |
| padding: 20px; | |
| overflow-y: auto; | |
| border-left: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .info-title { | |
| font-size: 18px; | |
| margin-bottom: 15px; | |
| color: #ff8a00; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-bottom: 8px; | |
| } | |
| .info-text { | |
| line-height: 1.6; | |
| margin-bottom: 15px; | |
| color: #ddd; | |
| } | |
| .features { | |
| list-style: none; | |
| margin-top: 15px; | |
| } | |
| .features li { | |
| padding: 8px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .features li:before { | |
| content: "✓"; | |
| color: #4CAF50; | |
| margin-left: 10px; | |
| font-weight: bold; | |
| } | |
| .loading { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100%; | |
| font-size: 18px; | |
| color: #aaa; | |
| } | |
| .status-bar { | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 8px 15px; | |
| font-size: 14px; | |
| display: flex; | |
| justify-content: space-between; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| flex-direction: column; | |
| } | |
| .info-panel { | |
| width: 100%; | |
| height: 250px; | |
| border-left: none; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .header { | |
| flex-direction: column; | |
| gap: 10px; | |
| text-align: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="logo">المساعد السعودي الذكي</div> | |
| <div class="controls"> | |
| <button class="btn" onclick="refreshFrame()">🔄 تحديث</button> | |
| <button class="btn" onclick="openFullscreen()">📺 ملء الشاشة</button> | |
| <button class="btn btn-primary" onclick="openOriginal()">🌐 فتح في نافذة جديدة</button> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="iframe-container"> | |
| <div class="iframe-wrapper"> | |
| <iframe id="mainFrame" src="https://rebot2.lahjai.net" title="المساعد السعودي"></iframe> | |
| </div> | |
| </div> | |
| <div class="info-panel"> | |
| <div class="info-title">معلومات عن المساعد</div> | |
| <div class="info-text"> | |
| هذا الإطار يعرض المساعد السعودي الذكي الذي يعمل باللهجة السعودية. يمكنك التفاعل مع المساعد مباشرة من خلال هذا الإطار. | |
| </div> | |
| <div class="info-text"> | |
| <strong>كيفية الاستخدام:</strong> | |
| <ul class="features"> | |
| <li>أدخل مفتاح LAHJA للبدء</li> | |
| <li>تفاعل مع المساعد باللهجة السعودية</li> | |
| <li>استخدم الأزرار أعلاه للتحكم في العرض</li> | |
| <li>يمكنك تحديث الصفحة أو فتحها في نافذة جديدة</li> | |
| </ul> | |
| </div> | |
| <div class="info-text"> | |
| <strong>ملاحظة:</strong> إذا ظهرت صفحة فارغة، قد تكون هناك قيود على عرض الموقع عبر الإطارات من قبل الخادم المصدر. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status-bar"> | |
| <div id="urlStatus">جارٍ تحميل: https://rebot2.lahjai.net</div> | |
| <div id="frameStatus">الإطار نشط وجاهز للاستخدام</div> | |
| </div> | |
| <script> | |
| const iframe = document.getElementById('mainFrame'); | |
| // تحديث الإطار | |
| function refreshFrame() { | |
| iframe.src = iframe.src; | |
| document.getElementById('frameStatus').textContent = 'جارٍ التحديث...'; | |
| setTimeout(() => { | |
| document.getElementById('frameStatus').textContent = 'تم التحديث بنجاح'; | |
| }, 1500); | |
| } | |
| // فتح في وضع ملء الشاشة | |
| function openFullscreen() { | |
| const iframeContainer = document.querySelector('.iframe-container'); | |
| if (iframeContainer.requestFullscreen) { | |
| iframeContainer.requestFullscreen(); | |
| } else if (iframeContainer.webkitRequestFullscreen) { | |
| iframeContainer.webkitRequestFullscreen(); | |
| } else if (iframeContainer.msRequestFullscreen) { | |
| iframeContainer.msRequestFullscreen(); | |
| } | |
| document.getElementById('frameStatus').textContent = 'وضع ملء الشاشة نشط'; | |
| } | |
| // فتح في نافذة جديدة | |
| function openOriginal() { | |
| window.open('https://rebot2.lahjai.net', '_blank'); | |
| } | |
| // تحديث حالة التحمير | |
| iframe.onload = function() { | |
| document.getElementById('frameStatus').textContent = 'تم التحميل بنجاح'; | |
| }; | |
| iframe.onerror = function() { | |
| document.getElementById('frameStatus').textContent = 'حدث خطأ في التحميل'; | |
| }; | |
| // إضافة تأثير عند تحميل الصفحة | |
| window.onload = function() { | |
| document.body.style.opacity = '0'; | |
| document.body.style.transition = 'opacity 0.5s ease'; | |
| setTimeout(() => { | |
| document.body.style.opacity = '1'; | |
| }, 100); | |
| }; | |
| </script> | |
| </body> | |
| </html> |