Upload 13 files

static/create.html

@@ -214,7 +214,10 @@ textarea{ resize:vertical; min-height:100px; }
     background: var(--bg); border-top:1px solid var(--line);
     padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
     box-shadow: 0 -2px 14px rgba(10,10,10,0.05);
+    transform: translateY(0); transition: transform .28s cubic-bezier(.4,0,.2,1);
+    will-change: transform;
   }
+  .bottom-nav.bn-hidden{ transform: translateY(100%); }
   .bn-item{
     flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
     padding:6px 2px; border-radius:12px; color: var(--muted-soft);
@@ -434,7 +437,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -447,11 +451,30 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
   nav.innerHTML = tabs.map(t => `<a class="bn-item ${t.key===active?'active':''}" href="${t.href}">${icons[t.key]}<span>${t.label}</span></a>`).join('');
   document.body.appendChild(nav);
+  initBottomNavAutoHide(nav);
+}
+
+function initBottomNavAutoHide(nav){
+  let lastY = window.scrollY, ticking = false;
+  window.addEventListener('scroll', () => {
+    if(ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      const y = window.scrollY;
+      const delta = y - lastY;
+      if(y < 40){ nav.classList.remove('bn-hidden'); }
+      else if(delta > 6){ nav.classList.add('bn-hidden'); }
+      else if(delta < -6){ nav.classList.remove('bn-hidden'); }
+      lastY = y;
+      ticking = false;
+    });
+  }, { passive:true });
 }
 
 function renderFooter(){
@@ -460,7 +483,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/dashboard.html

@@ -378,7 +378,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -391,6 +392,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -423,7 +425,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/forgot-password.html

@@ -378,7 +378,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -391,6 +392,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -423,7 +425,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/index.html

@@ -410,7 +410,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -423,6 +424,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -455,7 +457,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/login.html

@@ -383,7 +383,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -396,6 +397,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -428,7 +430,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/messages.html

@@ -382,7 +382,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -395,6 +396,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -427,7 +429,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/profile.html

@@ -424,7 +424,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -437,6 +438,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -469,7 +471,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 
@@ -543,7 +545,7 @@ async function load(){
 function renderHeader(p){
   const me = API.user();
   const isMe = me && me.id === p.id;
-  const roleLabel = p.role === 'owner' ? 'صاحب مشاريع' : p.role === 'investor' ? 'مستثمر' : 'صاحب مشاريع ومستثمر';
+  const roleLabel = p.role === 'owner' ? 'صاحب مشاريع' : p.role === 'investor' ? 'مستثمر' : p.role === 'broker' ? 'عارض (وسيط)' : 'صاحب مشاريع ومستثمر';
   const stars = p.ratingAvg ? `⭐ ${p.ratingAvg} (${p.ratingCount} تقييم)` : 'لسه من غير تقييمات';
   document.getElementById('profile-header').innerHTML = `
     <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">

static/project.html

@@ -447,7 +447,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -460,6 +461,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -492,7 +494,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/reset-password.html

@@ -378,7 +378,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -391,6 +392,7 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
@@ -423,7 +425,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 

static/signup.html

@@ -225,7 +225,10 @@ textarea{ resize:vertical; min-height:100px; }
     background: var(--bg); border-top:1px solid var(--line);
     padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
     box-shadow: 0 -2px 14px rgba(10,10,10,0.05);
+    transform: translateY(0); transition: transform .28s cubic-bezier(.4,0,.2,1);
+    will-change: transform;
   }
+  .bottom-nav.bn-hidden{ transform: translateY(100%); }
   .bn-item{
     flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
     padding:6px 2px; border-radius:12px; color: var(--muted-soft);
@@ -300,6 +303,11 @@ img,video{ max-width:100%; height:auto; }
           <div class="role-title">الاتنين</div>
           <div class="role-desc">أعرض مشروعي وكمان أستكشف فرص تانية</div>
         </div>
+        <div class="role-card" data-role="broker">
+          <div class="role-icon">🤝</div>
+          <div class="role-title">عارض (وسيط)</div>
+          <div class="role-desc">هعرض مشاريع لأصحابها بالنيابة عنهم</div>
+        </div>
       </div>
     </div>
 
@@ -444,7 +452,8 @@ function renderBottomNav(active){
     dashboard: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>',
     messages: '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H8l-5 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     profile: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>',
-    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>'
+    login: '<svg viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>',
+    about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>'
   };
   let tabs = [
     { key:'browse', href:'index.html', label:'\u0627\u0633\u062a\u0643\u0634\u0641' },
@@ -457,11 +466,30 @@ function renderBottomNav(active){
   } else {
     tabs.push({ key:'login', href:'login.html', label:'\u062f\u062e\u0648\u0644' });
   }
+  tabs.push({ key:'about', href:'about.html', label:'\u062a\u0648\u0627\u0635\u0644' });
   const nav = document.createElement('div');
   nav.id = 'bottom-nav';
   nav.className = 'bottom-nav';
   nav.innerHTML = tabs.map(t => `<a class="bn-item ${t.key===active?'active':''}" href="${t.href}">${icons[t.key]}<span>${t.label}</span></a>`).join('');
   document.body.appendChild(nav);
+  initBottomNavAutoHide(nav);
+}
+
+function initBottomNavAutoHide(nav){
+  let lastY = window.scrollY, ticking = false;
+  window.addEventListener('scroll', () => {
+    if(ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      const y = window.scrollY;
+      const delta = y - lastY;
+      if(y < 40){ nav.classList.remove('bn-hidden'); }
+      else if(delta > 6){ nav.classList.add('bn-hidden'); }
+      else if(delta < -6){ nav.classList.remove('bn-hidden'); }
+      lastY = y;
+      ticking = false;
+    });
+  }, { passive:true });
 }
 
 function renderFooter(){
@@ -470,7 +498,7 @@ function renderFooter(){
   el.id = 'global-footer-note';
   el.className = 'footer-note';
   el.style.cssText = 'margin-top:8px;';
-  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a>';
+  el.innerHTML = '\u0646\u064a\u0651\u0629 \u0648\u0633\u064a\u0637 \u062a\u0648\u0627\u0635\u0644 \u0641\u0642\u0637 \u00b7 <a href="terms.html" style="text-decoration:underline;">\u0627\u0644\u0634\u0631\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u0643\u0627\u0645</a> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
   document.body.appendChild(el);
 }
 
@@ -523,7 +551,7 @@ let selectedRole = 'both';
 
 function updateRoleUI(){
   document.querySelectorAll('.role-card').forEach(c => c.classList.toggle('active', c.dataset.role === selectedRole));
-  document.getElementById('owner-fields').style.display = (selectedRole === 'owner' || selectedRole === 'both') ? 'block' : 'none';
+  document.getElementById('owner-fields').style.display = (selectedRole === 'owner' || selectedRole === 'both' || selectedRole === 'broker') ? 'block' : 'none';
   document.getElementById('investor-fields').style.display = (selectedRole === 'investor' || selectedRole === 'both') ? 'block' : 'none';
 }
 document.querySelectorAll('.role-card').forEach(card => {