Update index.html
Browse files- index.html +33 -11
index.html
CHANGED
|
@@ -12,7 +12,7 @@
|
|
| 12 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
|
| 13 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
|
| 14 |
<style>
|
| 15 |
-
/* ========== المتغيرات والتنسيقات الأساسية
|
| 16 |
:root {
|
| 17 |
--bg: #0d0f14; --surface: #161920; --surface2: #1e2230; --surface3: #252a3a;
|
| 18 |
--border: #2a2f42; --border2: #333a52;
|
|
@@ -47,6 +47,29 @@
|
|
| 47 |
.s-logo{display:flex;align-items:center;gap:12px;flex:1}
|
| 48 |
.s-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover; box-shadow: 0 4px 12px var(--accent-soft);}
|
| 49 |
.s-logo-name{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 50 |
.btn-new{margin:12px 16px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
|
| 51 |
color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;
|
| 52 |
font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px; justify-content:center;
|
|
@@ -236,7 +259,7 @@
|
|
| 236 |
.chips { gap: 8px; }
|
| 237 |
.chip { font-size: .82rem; padding: 8px 14px; }
|
| 238 |
|
| 239 |
-
/*
|
| 240 |
.sidebar {
|
| 241 |
position: fixed;
|
| 242 |
top: 0;
|
|
@@ -268,13 +291,15 @@
|
|
| 268 |
<body>
|
| 269 |
<div class="app">
|
| 270 |
|
| 271 |
-
<!--
|
| 272 |
<aside class="sidebar collapsed" id="sidebar">
|
| 273 |
<div class="sidebar-header">
|
| 274 |
<div class="s-logo">
|
| 275 |
<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>
|
| 276 |
<span class="s-logo-name">Genisi AI</span>
|
| 277 |
</div>
|
|
|
|
|
|
|
| 278 |
</div>
|
| 279 |
<button class="btn-new" onclick="newChat()" id="i18n-new-chat">✦ New Chat</button>
|
| 280 |
<div class="s-label" id="i18n-chats-label">CHATS</div>
|
|
@@ -287,7 +312,6 @@
|
|
| 287 |
|
| 288 |
<main class="main">
|
| 289 |
<div class="topbar">
|
| 290 |
-
<!-- زر القائمة (سيتم تحديث أيقونته ديناميكيًا) -->
|
| 291 |
<button class="btn-icon" id="menu-toggle-btn" onclick="toggleSidebar()">☰</button>
|
| 292 |
<div class="topbar-title" id="topbar-title">Genisi AI</div>
|
| 293 |
</div>
|
|
@@ -309,7 +333,7 @@
|
|
| 309 |
</main>
|
| 310 |
</div>
|
| 311 |
|
| 312 |
-
<!-- SETTINGS MODAL
|
| 313 |
<div class="overlay" id="settings-modal">
|
| 314 |
<div class="modal">
|
| 315 |
<div class="m-header">
|
|
@@ -495,7 +519,7 @@ function applyTheme(t){
|
|
| 495 |
function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
|
| 496 |
function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
|
| 497 |
|
| 498 |
-
//
|
| 499 |
function updateMenuIcon() {
|
| 500 |
const btn = document.getElementById('menu-toggle-btn');
|
| 501 |
const sidebar = document.getElementById('sidebar');
|
|
@@ -506,17 +530,16 @@ function updateMenuIcon() {
|
|
| 506 |
}
|
| 507 |
}
|
| 508 |
|
| 509 |
-
//
|
| 510 |
function toggleSidebar() {
|
| 511 |
const sidebar = document.getElementById('sidebar');
|
| 512 |
sidebar.classList.toggle('collapsed');
|
| 513 |
updateMenuIcon();
|
| 514 |
}
|
| 515 |
|
| 516 |
-
//
|
| 517 |
function initSidebarState() {
|
| 518 |
const sidebar = document.getElementById('sidebar');
|
| 519 |
-
// على الهواتف نضمن أنه مخفي (collapsed)، على الكبيرة نجعله ظاهرًا
|
| 520 |
if (window.innerWidth <= 640) {
|
| 521 |
sidebar.classList.add('collapsed');
|
| 522 |
} else {
|
|
@@ -525,7 +548,6 @@ function initSidebarState() {
|
|
| 525 |
updateMenuIcon();
|
| 526 |
}
|
| 527 |
|
| 528 |
-
// استدعاء عند تغيير حجم النافذة (لضبط الشاشات الكبيرة تلقائيًا)
|
| 529 |
window.addEventListener('resize', () => {
|
| 530 |
const sidebar = document.getElementById('sidebar');
|
| 531 |
if (window.innerWidth > 640) {
|
|
@@ -763,7 +785,7 @@ function appendMemBadge(count, total){
|
|
| 763 |
applyTheme(localStorage.getItem('genisi_theme')||'dark');
|
| 764 |
document.getElementById('lang-select').value = currentLang;
|
| 765 |
applyI18n();
|
| 766 |
-
initSidebarState(); //
|
| 767 |
|
| 768 |
if (typeof DOMPurify === 'undefined') {
|
| 769 |
console.warn("DOMPurify not loaded - XSS protection disabled");
|
|
|
|
| 12 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
|
| 13 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
|
| 14 |
<style>
|
| 15 |
+
/* ========== المتغيرات والتنسيقات الأساسية ========== */
|
| 16 |
:root {
|
| 17 |
--bg: #0d0f14; --surface: #161920; --surface2: #1e2230; --surface3: #252a3a;
|
| 18 |
--border: #2a2f42; --border2: #333a52;
|
|
|
|
| 47 |
.s-logo{display:flex;align-items:center;gap:12px;flex:1}
|
| 48 |
.s-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover; box-shadow: 0 4px 12px var(--accent-soft);}
|
| 49 |
.s-logo-name{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
| 50 |
+
|
| 51 |
+
/* 🆕 زر الإغلاق الداخلي */
|
| 52 |
+
.close-sidebar-btn {
|
| 53 |
+
background: none;
|
| 54 |
+
border: none;
|
| 55 |
+
color: var(--text2);
|
| 56 |
+
font-size: 1.4rem;
|
| 57 |
+
cursor: pointer;
|
| 58 |
+
padding: 6px 10px;
|
| 59 |
+
border-radius: var(--radius-pill);
|
| 60 |
+
transition: all 0.2s;
|
| 61 |
+
display: flex;
|
| 62 |
+
align-items: center;
|
| 63 |
+
justify-content: center;
|
| 64 |
+
width: 36px;
|
| 65 |
+
height: 36px;
|
| 66 |
+
}
|
| 67 |
+
.close-sidebar-btn:hover {
|
| 68 |
+
background: var(--surface2);
|
| 69 |
+
color: var(--danger);
|
| 70 |
+
transform: scale(1.1);
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
.btn-new{margin:12px 16px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
|
| 74 |
color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;
|
| 75 |
font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px; justify-content:center;
|
|
|
|
| 259 |
.chips { gap: 8px; }
|
| 260 |
.chip { font-size: .82rem; padding: 8px 14px; }
|
| 261 |
|
| 262 |
+
/* جعل السايدبار طبقة منزلقة على الهواتف */
|
| 263 |
.sidebar {
|
| 264 |
position: fixed;
|
| 265 |
top: 0;
|
|
|
|
| 291 |
<body>
|
| 292 |
<div class="app">
|
| 293 |
|
| 294 |
+
<!-- الشريط الجانبي (مخفي افتراضيًا) مع زر الإغلاق الداخلي -->
|
| 295 |
<aside class="sidebar collapsed" id="sidebar">
|
| 296 |
<div class="sidebar-header">
|
| 297 |
<div class="s-logo">
|
| 298 |
<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>
|
| 299 |
<span class="s-logo-name">Genisi AI</span>
|
| 300 |
</div>
|
| 301 |
+
<!-- 🆕 زر الإغلاق داخل الشريط -->
|
| 302 |
+
<button class="close-sidebar-btn" onclick="toggleSidebar()" title="إخفاء القائمة">✕</button>
|
| 303 |
</div>
|
| 304 |
<button class="btn-new" onclick="newChat()" id="i18n-new-chat">✦ New Chat</button>
|
| 305 |
<div class="s-label" id="i18n-chats-label">CHATS</div>
|
|
|
|
| 312 |
|
| 313 |
<main class="main">
|
| 314 |
<div class="topbar">
|
|
|
|
| 315 |
<button class="btn-icon" id="menu-toggle-btn" onclick="toggleSidebar()">☰</button>
|
| 316 |
<div class="topbar-title" id="topbar-title">Genisi AI</div>
|
| 317 |
</div>
|
|
|
|
| 333 |
</main>
|
| 334 |
</div>
|
| 335 |
|
| 336 |
+
<!-- SETTINGS MODAL -->
|
| 337 |
<div class="overlay" id="settings-modal">
|
| 338 |
<div class="modal">
|
| 339 |
<div class="m-header">
|
|
|
|
| 519 |
function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
|
| 520 |
function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
|
| 521 |
|
| 522 |
+
// تحديث أيقونة زر القائمة الرئيسي فقط (داخل topbar)
|
| 523 |
function updateMenuIcon() {
|
| 524 |
const btn = document.getElementById('menu-toggle-btn');
|
| 525 |
const sidebar = document.getElementById('sidebar');
|
|
|
|
| 530 |
}
|
| 531 |
}
|
| 532 |
|
| 533 |
+
// دالة التبديل (تستدعى من زر القائمة وزر الإغلاق الداخلي)
|
| 534 |
function toggleSidebar() {
|
| 535 |
const sidebar = document.getElementById('sidebar');
|
| 536 |
sidebar.classList.toggle('collapsed');
|
| 537 |
updateMenuIcon();
|
| 538 |
}
|
| 539 |
|
| 540 |
+
// ضبط الحالة الافتراضية بناءً على حجم الشاشة
|
| 541 |
function initSidebarState() {
|
| 542 |
const sidebar = document.getElementById('sidebar');
|
|
|
|
| 543 |
if (window.innerWidth <= 640) {
|
| 544 |
sidebar.classList.add('collapsed');
|
| 545 |
} else {
|
|
|
|
| 548 |
updateMenuIcon();
|
| 549 |
}
|
| 550 |
|
|
|
|
| 551 |
window.addEventListener('resize', () => {
|
| 552 |
const sidebar = document.getElementById('sidebar');
|
| 553 |
if (window.innerWidth > 640) {
|
|
|
|
| 785 |
applyTheme(localStorage.getItem('genisi_theme')||'dark');
|
| 786 |
document.getElementById('lang-select').value = currentLang;
|
| 787 |
applyI18n();
|
| 788 |
+
initSidebarState(); // تهيئة حالة الشريط الجانبي
|
| 789 |
|
| 790 |
if (typeof DOMPurify === 'undefined') {
|
| 791 |
console.warn("DOMPurify not loaded - XSS protection disabled");
|