Hugging Face's logo

Spaces:
my0919175
/
neya
Running

App Files Community
neya / static /create.html
my0919175's picture
my0919175
Upload 20 files
50c11e2 verified
Raw
History Blame Contribute Delete
39 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<title>اعرض مشروعك — نيّة</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap');
:root{
 --bg:#FFFFFF;
 --ink:#0A0A0A;
 --line: rgba(10,10,10,0.12);
 --line-strong: rgba(10,10,10,0.22);
 --muted: rgba(10,10,10,0.55);
 --muted-soft: rgba(10,10,10,0.4);
 --surface: rgba(10,10,10,0.03);
 --surface-hover: rgba(10,10,10,0.05);
 --radius: 14px;
 --max-w: 1080px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* ---------- app polish: smooth motion + native app feel ---------- */
@media (prefers-reduced-motion: no-preference){
 body{ animation: pageFadeIn .28s ease both; }
 .card, .interest-item, .grid > *{ animation: cardRise .32s ease both; }
 .overlay.show .modal{ animation: modalPop .22s cubic-bezier(.2,.8,.3,1.2) both; }
 .toast.show{ animation: toastRise .3s ease both; }
}
@keyframes pageFadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@keyframes cardRise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
@keyframes modalPop{ from{ opacity:0; transform:scale(.96) translateY(8px);} to{ opacity:1; transform:none; } }
@keyframes toastRise{ from{ opacity:0; transform:translateX(-50%) translateY(14px);} to{ opacity:1; transform:translateX(-50%) translateY(0);} }
.btn, .nav-link, .file-drop, .interest-item, .card{ transition: all .18s ease; }
.btn:active{ transform: scale(.96); }
.btn-primary:active{ opacity:.85; }
a.card:hover, .card:hover{ box-shadow: 0 4px 18px rgba(10,10,10,0.06); }
input, textarea, select{ transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus, select:focus{ box-shadow: 0 0 0 3px rgba(10,10,10,0.06); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: rgba(10,10,10,0.15); border-radius:8px; }
@supports (padding: max(0px)){
 body{ padding-bottom: env(safe-area-inset-bottom); }
 .topbar{ padding-top: max(18px, env(safe-area-inset-top)); }
}
@media (max-width:720px){
 .btn{ font-size:14px; }
 .card{ border-radius:16px; }
 .modal{ border-radius:20px 20px 0 0; position:fixed; bottom:0; left:0; right:0; max-width:100%; max-height:85vh; margin:0; }
 .overlay{ align-items:flex-end; padding:0; }
 .overlay.show .modal{ animation: sheetUp .25s cubic-bezier(.2,.8,.3,1) both; }
}
@keyframes sheetUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
body{
 background: var(--bg);
 color: var(--ink);
 font-family:'IBM Plex Sans Arabic', sans-serif;
 min-height:100vh;
 -webkit-font-smoothing: antialiased;
 line-height:1.6;
}
h1,h2,h3,.display,.btn,.brand-name{ font-family:'Cairo', sans-serif; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
/* ---------- layout ---------- */
.page{ max-width: var(--max-w); margin: 0 auto; padding: 0 20px 60px; }
.center-page{ max-width: 440px; margin: 0 auto; padding: 20px 20px 60px; }
/* ---------- topbar ---------- */
.topbar{
 display:flex; justify-content:space-between; align-items:center;
 padding: 18px 24px; border-bottom: 1px solid var(--line);
 position: sticky; top:0; background: var(--bg); z-index: 40;
}
.brand{ display:flex; align-items:center; gap:9px; }
.brand-mark{
 width:30px; height:30px; border-radius:50%;
 border: 2px solid var(--ink); position:relative; flex-shrink:0;
}
.brand-mark::after{
 content:''; position:absolute; inset:7px; border-radius:50%; background: var(--ink);
}
.brand-name{ font-weight:800; font-size:20px; letter-spacing:0.3px; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-link{
 padding:9px 14px; border-radius:999px; font-size:14px; font-weight:600; color: var(--muted);
 transition: all .15s ease;
}
.nav-link:hover{ background: var(--surface); color: var(--ink); }
.nav-link.active{ background: var(--ink); color: var(--bg); }
.hamburger{ display:none; }
@media (max-width:720px){
 .nav-links{ display:none; }
 .hamburger{ display:block; }
}
/* ---------- buttons ---------- */
.btn{
 display:inline-flex; align-items:center; justify-content:center; gap:8px;
 padding: 13px 26px; border-radius: 11px; border: 1.5px solid var(--ink); cursor:pointer;
 font-weight:700; font-size:14.5px; transition: all .15s ease; background: transparent; color: var(--ink);
}
.btn-primary{ background: var(--ink); color: var(--bg); }
.btn-primary:hover{ opacity:0.82; transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--surface); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-sm{ padding: 9px 16px; font-size:13px; border-radius:9px; }
/* ---------- cards ---------- */
.card{
 background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius);
 padding: 22px; transition: border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color: var(--line-strong); }
/* ---------- forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; }
.field .hint{ font-size:12px; color: var(--muted-soft); margin-top:6px; line-height:1.6; }
input, textarea, select{
 width:100%; padding: 13px 15px; border-radius:10px; border: 1.5px solid var(--line);
 background: var(--bg); color: var(--ink); font-family:inherit; font-size:14.5px;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--ink); }
textarea{ resize:vertical; min-height:100px; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }
@media (max-width:520px){ .field-row{ flex-direction:column; gap:0; } }
.file-drop{
 border: 1.5px dashed var(--line-strong); border-radius:12px; padding: 26px 16px;
 text-align:center; cursor:pointer; transition: all .15s ease; font-size:13.5px; color: var(--muted);
}
.file-drop:hover{ border-color: var(--ink); background: var(--surface); }
.file-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.file-thumb{
 width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--line); position:relative;
}
.file-thumb img{ width:100%; height:100%; object-fit:cover; }
.file-chip{
 display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line);
 border-radius:999px; font-size:12px;
}
/* ---------- grid / misc ---------- */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap:18px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin: 30px 0 20px; flex-wrap:wrap; gap:10px; }
.section-head h2{ font-size:22px; font-weight:800; margin:0; }
.muted{ color: var(--muted); }
.badge{
 display:inline-block; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px;
 border: 1px solid var(--line-strong); color: var(--muted);
}
.badge-ink{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.empty{ text-align:center; padding: 60px 20px; color: var(--muted-soft); border: 1.5px dashed var(--line); border-radius: var(--radius); }
.divider{ height:1px; background: var(--line); margin: 24px 0; border:none; }
.progress-track{ height:8px; background: var(--surface); border-radius:999px; overflow:hidden; }
.progress-fill{ height:100%; width:0; background: var(--ink); border-radius:999px; transition: width .4s ease; }
.toast{
 position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
 background: var(--ink); color: var(--bg); padding:14px 24px; border-radius:12px;
 font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; opacity:0; transition: all .3s ease;
 pointer-events:none; z-index:100; white-space:nowrap; max-width: 90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.spinner{
 width:20px; height:20px; border:2.5px solid var(--line); border-top-color: var(--ink);
 border-radius:50%; animation: spin .7s linear infinite; margin: 0 auto;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.loading-row{ display:flex; justify-content:center; padding: 40px 0; }
/* ---------- modal ---------- */
.overlay{
 position:fixed; inset:0; background: rgba(10,10,10,0.5);
 display:none; align-items:center; justify-content:center; z-index:60; padding:20px;
}
.overlay.show{ display:flex; }
.modal{
 background: var(--bg); border: 1.5px solid var(--ink); border-radius: 18px;
 width:100%; max-width:460px; padding:26px; max-height:88vh; overflow-y:auto; position:relative;
}
.modal h3{ font-size:19px; margin:0 0 16px; }
.close-x{
 position:absolute; top:18px; left:18px; background:none; border:none; font-size:19px; cursor:pointer; opacity:0.5;
}
.close-x:hover{ opacity:1; }
/* footer */
.footer-note{ text-align:center; padding: 40px 20px 30px; color: var(--muted-soft); font-size:12.5px; }
@media (max-width: 640px){
 .topbar{ padding:14px 16px; }
 .page{ padding: 0 14px 50px; }
}
/* ---------- mobile app shell (bottom tab bar, thndr-style) ---------- */
.bottom-nav{ display:none; }
@media (max-width:720px){
 body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
 .bottom-nav{
 display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
 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);
 font-size:10.5px; font-weight:600; transition: all .15s ease; -webkit-tap-highlight-color:transparent;
 }
 .bn-item svg{ width:22px; height:22px; stroke: currentColor; fill:none; stroke-width:1.8; transition: transform .15s ease; }
 .bn-item.active{ color: var(--ink); }
 .bn-item.active svg{ transform: translateY(-1px) scale(1.05); }
 .bn-item:active{ transform: scale(.92); }
 .topbar .nav-links{ display:none !important; }
 .hamburger{ display:none !important; }
 .topbar{ padding:14px 18px; }
 .brand-name{ font-size:18px; }
}
/* ---------- final QA polish: no overflow, no overlap, no glitches ---------- */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }
img,video{ max-width:100%; height:auto; }
*{ word-wrap:break-word; overflow-wrap:break-word; }
.page, .center-page{ overflow-x:hidden; }
@media (max-width:720px){
 .toast{ bottom: calc(78px + env(safe-area-inset-bottom)) !important; max-width: calc(100vw - 32px); }
 .modal{ max-height: calc(85vh - env(safe-area-inset-bottom)); padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
 .overlay.show{ z-index:70; }
 table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* ================= premium polish layer ================= */
:root{
 --radius: 16px; --radius-sm: 10px; --radius-lg: 22px;
 --ease: cubic-bezier(.22,1,.36,1);
 --shadow-sm: 0 1px 3px rgba(10,10,10,0.05), 0 1px 2px rgba(10,10,10,0.04);
 --shadow-md: 0 6px 20px rgba(10,10,10,0.07), 0 2px 6px rgba(10,10,10,0.04);
 --shadow-lg: 0 14px 40px rgba(10,10,10,0.12), 0 4px 12px rgba(10,10,10,0.06);
}
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
::selection{ background: var(--ink); color: var(--bg); }
::-webkit-scrollbar-thumb{ border-radius:999px; }
a, button, input, textarea, select{ font-family:inherit; }
:focus-visible{ outline: 2px solid rgba(10,10,10,0.5); outline-offset:2px; border-radius:6px; }
@keyframes fadeSlideUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:scale(.96) translateY(6px); } to{ opacity:1; transform:none; } }
.topbar{ backdrop-filter:saturate(1.5) blur(10px); -webkit-backdrop-filter:saturate(1.5) blur(10px); background: rgba(255,255,255,0.86); }
.btn{
 border-radius: var(--radius-sm) !important; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}
.btn:hover{ box-shadow: var(--shadow-sm); }
.btn:active{ transform: scale(.96); }
.btn-primary{ box-shadow: 0 2px 8px rgba(10,10,10,0.16); }
.btn-primary:hover{ box-shadow: var(--shadow-md); transform: translateY(-1.5px); }
.btn-ghost:hover{ background: var(--surface); }
.card{
 border-radius: var(--radius) !important; transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease);
 animation: fadeSlideUp .5s var(--ease) both;
}
.card:hover{ box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.project-card:hover .thumb img{ transform: scale(1.04); }
.thumb img{ transition: transform .5s var(--ease); }
input, textarea, select{
 border-radius: var(--radius-sm) !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
input:focus, textarea:focus, select:focus{
 outline:none !important; border-color: var(--ink) !important; box-shadow: 0 0 0 3.5px rgba(10,10,10,0.07);
}
.badge{ border-radius:999px !important; transition: transform .15s var(--ease); }
.modal{ animation: popIn .3s var(--ease) both; border-radius: var(--radius-lg) !important; }
.overlay{ transition: opacity .22s var(--ease); }
.overlay.show{ animation: fadeIn .22s var(--ease) both; }
.toast{ animation: fadeSlideUp .35s var(--ease) both; }
.progress-track, .progress-fill{ border-radius:999px !important; }
.progress-fill{ transition: width .6s var(--ease) !important; }
.stat-box, .stat{ transition: transform .2s var(--ease), box-shadow .2s var(--ease); border-radius: var(--radius-sm) !important; }
.stat-box:hover, .stat:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.filter-chip, .role-card{ transition: all .2s var(--ease); }
.role-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
@media (max-width:720px){
 .btn{ min-height:44px; }
 input, textarea, select{ font-size:16px !important; }
 .card{ border-radius: var(--radius-sm) !important; }
}
</style>
</head>
<body>
<div class="topbar" id="topbar"></div>
<div class="page" style="max-width:640px; margin:0 auto;">
 <div class="section-head" style="margin-top:30px;">
 <h2 id="page-title">اعرض مشروعك</h2>
 </div>
<div class="card">
 <div class="field">
 <label>اسم المشروع / المحل</label>
 <input type="text" id="f-name" placeholder="مثلاً: كافيه سبريسو دقي">
 </div>
 <div class="field-row">
 <div class="field">
 <label>القطاع</label>
 <select id="f-sector">
 <option>مطاعم وكافيهات</option>
 <option>تجزئة وبيع منتجات</option>
 <option>صناعة وتصنيع</option>
 <option>خدمات</option>
 <option>تكنولوجيا</option>
 <option>أخرى</option>
 </select>
 </div>
 <div class="field">
 <label>المكان</label>
 <input type="text" id="f-loc" placeholder="مثلاً: المهندسين، القاهرة">
 </div>
 </div>
 <div class="field">
 <label>وصف المشروع</label>
 <textarea id="f-desc" placeholder="اكتب باختصار: إيه المشروع، محتاج التمويل ليه، وإيه اللي هتقدمه للمستثمر"></textarea>
 </div>
 <div class="field-row">
 <div class="field">
 <label>المبلغ المستهدف (جنيه)</label>
 <input type="number" id="f-target" placeholder="100000">
 </div>
 <div class="field">
 <label>أقل مبلغ للمشاركة (جنيه)</label>
 <input type="number" id="f-min" placeholder="5000">
 </div>
 </div>
 <div class="field">
 <label>وسيلة تواصل (تظهر للمستثمرين اللي سجّلوا نية استثمار حقيقية على مشروعك)</label>
 <input type="text" id="f-contact" placeholder="رقم واتساب أو إيميل">
 </div>
<hr class="divider">
<div class="field">
 <label>صور المشروع (اختياري)</label>
 <div class="file-drop" onclick="document.getElementById('img-input').click()"><svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13.5" r="3.2"/></svg> دوس هنا لرفع صور (JPG, PNG, WEBP)</div>
 <input type="file" id="img-input" accept="image/*" multiple style="display:none">
 <div class="file-list" id="img-preview"></div>
 </div>
<div class="field">
 <label>دراسة جدوى أو ملف داعم (اختياري)</label>
 <div class="file-drop" onclick="document.getElementById('study-input').click()"><svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/><path d="M9 12h6M9 16h6"/></svg> دوس هنا لرفع PDF أو Word</div>
 <input type="file" id="study-input" accept=".pdf,.doc,.docx" style="display:none">
 <div class="file-list" id="study-preview"></div>
 </div>
<button class="btn btn-primary btn-block" id="submit-btn" style="margin-top:8px;" onclick="showPreview()">معاينة قبل النشر</button>
 </div>
</div>
<div class="overlay" id="preview-overlay">
 <div class="modal">
 <button class="close-x" onclick="document.getElementById('preview-overlay').classList.remove('show')">✕</button>
 <h3>كده هيبان مشروعك للمستثمرين</h3>
 <div class="card" id="preview-card" style="margin-bottom:18px;"></div>
 <button class="btn btn-primary btn-block" id="confirm-publish-btn" onclick="submitProject()">تأكيد ونشر <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M5 13l4 4L19 7"/></svg></button>
 <button class="btn btn-ghost btn-block" style="margin-top:10px;" onclick="document.getElementById('preview-overlay').classList.remove('show')">رجوع للتعديل</button>
 </div>
</div>
<div class="overlay" id="upload-issue-overlay">
 <div class="modal">
 <h3 style="display:flex; align-items:center; gap:8px;"><svg viewBox="0 0 24 24" style="width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"><path d="M12 3l9 16H3z"/><path d="M12 9v5M12 17h.01"/></svg> في مشكلة في بعض الملفات</h3>
 <p style="font-size:13.5px;color:var(--muted);margin:0 0 12px;">الملفات دي فشل رفعها. ممكن تعيد المحاولة، أو تكمل نشر المشروع من غيرها دلوقتي وتضيفها بعدين:</p>
 <div id="upload-issue-list" style="font-size:13px;background:var(--surface);border-radius:10px;padding:10px 14px;margin-bottom:16px;"></div>
 <button class="btn btn-primary btn-block" id="retry-upload-btn" onclick="retryFailedUploads()">إعادة محاولة رفع الملفات دي</button>
 <button class="btn btn-ghost btn-block" style="margin-top:10px;" onclick="publishWithoutFailed()">نشر من غير الملفات دي</button>
 </div>
</div>
<script>
// ---------- نيّة: طبقة الاتصال بالـ API + إدارة الجلسة ----------
const API = {
 base: '',
 token(){ return localStorage.getItem('neya_token'); },
 user(){ try{ return JSON.parse(localStorage.getItem('neya_user') || 'null'); }catch(e){ return null; } },
 isLoggedIn(){ return !!this.token(); },
 setSession(token, user){
 localStorage.setItem('neya_token', token);
 localStorage.setItem('neya_user', JSON.stringify(user));
 },
 clearSession(){
 localStorage.removeItem('neya_token');
 localStorage.removeItem('neya_user');
 },
 async _fetch(path, opts = {}){
 const headers = opts.headers || {};
 if(this.token()) headers['Authorization'] = 'Bearer ' + this.token();
 if(opts.body && !(opts.body instanceof FormData)){
 headers['Content-Type'] = 'application/json';
 }
 const res = await fetch(this.base + path, { ...opts, headers });
 let data = null;
 try{ data = await res.json(); }catch(e){ /* no body */ }
 if(!res.ok){
 const msg = (data && data.detail) ? data.detail : 'حصل خطأ، حاول تاني';
 const err = new Error(typeof msg === 'string' ? msg : JSON.stringify(msg));
 err.status = res.status; // بيسمح للصفحات تفرّق بين خطأ صلاحيات (مش هيتحل بإعادة المحاولة) وخطأ شبكة عابر
 throw err;
 }
 return data;
 },
 signup(payload){ return this._fetch('/api/auth/signup', { method:'POST', body: JSON.stringify(payload) }); },
 login(payload){ return this._fetch('/api/auth/login', { method:'POST', body: JSON.stringify(payload) }); },
 me(){ return this._fetch('/api/auth/me'); },
 listProjects(){ return this._fetch('/api/projects'); },
 createProject(payload){ return this._fetch('/api/projects', { method:'POST', body: JSON.stringify(payload) }); },
 editProject(id, payload){ return this._fetch(`/api/projects/${id}`, { method:'PATCH', body: JSON.stringify(payload) }); },
 setProjectStatus(id, status){ return this._fetch(`/api/projects/${id}/status`, { method:'POST', body: JSON.stringify({status}) }); },
 uploadFile(projectId, kind, file){
 const fd = new FormData();
 fd.append('kind', kind);
 fd.append('file', file);
 return this._fetch(`/api/projects/${projectId}/files`, { method:'POST', body: fd });
 },
 listInterests(projectId){ return this._fetch(`/api/projects/${projectId}/interests`); },
 addInterest(projectId, payload){ return this._fetch(`/api/projects/${projectId}/interests`, { method:'POST', body: JSON.stringify(payload) }); },
 bookAppointment(projectId, payload){ return this._fetch(`/api/projects/${projectId}/appointments`, { method:'POST', body: JSON.stringify(payload) }); },
 listAppointments(projectId){ return this._fetch(`/api/projects/${projectId}/appointments`); },
 fileUrl(filename){ return `/api/uploads/${filename}`; },
 listConversations(){ return this._fetch('/api/conversations'); },
 getThread(projectId, withUser){ return this._fetch(`/api/projects/${projectId}/messages?with_user=${encodeURIComponent(withUser)}`); },
 sendMessage(projectId, payload){ return this._fetch(`/api/projects/${projectId}/messages`, { method:'POST', body: JSON.stringify(payload) }); },
 getUserProfile(userId){ return this._fetch(`/api/users/${userId}/profile`); },
 getUserProjects(userId){ return this._fetch(`/api/users/${userId}/projects`); },
 listReviews(userId){ return this._fetch(`/api/users/${userId}/reviews`); },
 addReview(userId, payload){ return this._fetch(`/api/users/${userId}/reviews`, { method:'POST', body: JSON.stringify(payload) }); },
 submitReport(payload){ return this._fetch('/api/reports', { method:'POST', body: JSON.stringify(payload) }); },
 uploadAvatar(file){
 const fd = new FormData();
 fd.append('file', file);
 return this._fetch('/api/auth/me/avatar', { method:'POST', body: fd });
 },
};
function formatMoney(n){ return Number(n || 0).toLocaleString('en-US'); }
function escapeHtml(str){
 const div = document.createElement('div');
 div.textContent = str || '';
 return div.innerHTML;
}
function showToast(msg){
 let toast = document.getElementById('global-toast');
 if(!toast){
 toast = document.createElement('div');
 toast.id = 'global-toast';
 toast.className = 'toast';
 document.body.appendChild(toast);
 }
 toast.innerHTML = msg;
 toast.classList.add('show');
 clearTimeout(toast._t);
 toast._t = setTimeout(() => toast.classList.remove('show'), 2800);
}
// يبني التوب بار الموحّد في كل الصفحات ويعكس حالة تسجيل الدخول
function renderBottomNav(active){
 if(window.innerWidth > 720) return;
 if(document.getElementById('bottom-nav')) return;
 const user = API.user();
 const icons = {
 browse: '<svg viewBox="0 0 24 24"><path d="M12 3l9 8h-2v9h-5v-6H10v6H5v-9H3z"/></svg>',
 create: '<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>',
 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>',
 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' },
 { key:'create', href:'create.html', label:'\u0627\u0639\u0631\u0636' },
 ];
 if(user){
 tabs.push({ key:'dashboard', href:'dashboard.html', label:'\u0644\u0648\u062d\u062a\u064a' });
 tabs.push({ key:'messages', href:'messages.html', label:'\u0631\u0633\u0627\u0626\u0644' });
 tabs.push({ key:'profile', href:'profile.html?id='+user.id, label:'\u062d\u0633\u0627\u0628\u064a' });
 } 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(){
 if(document.getElementById('global-footer-note')) return;
 const el = document.createElement('p');
 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> \u00b7 <a href="about.html" style="text-decoration:underline;">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0646\u0627</a>';
 document.body.appendChild(el);
}
function renderTopbar(activePage){
 const el = document.getElementById('topbar');
 if(!el) return;
 const user = API.user();
 const links = [
 { href:'index.html', label:'استكشف المشاريع', key:'browse' },
 { href:'create.html', label:'اعرض مشروعك', key:'create' },
 ];
 if(user){
 links.push({ href:'dashboard.html', label:'لوحتي', key:'dashboard' });
 links.push({ href:'messages.html', label:'الرسائل', key:'messages' });
 }
 const authArea = user
 ? `<a class="nav-link" href="profile.html?id=${user.id}">أهلاً، ${escapeHtml(user.name.split(' ')[0])}</a>
 <button class="btn btn-ghost btn-sm" onclick="API.clearSession(); location.href='index.html';">خروج</button>`
 : `<a class="btn btn-ghost btn-sm" href="login.html">دخول</a>
 <a class="btn btn-primary btn-sm" href="signup.html">حساب جديد</a>`;
 el.innerHTML = `
 <a class="brand" href="index.html">
 <div class="brand-mark"></div>
 <div class="brand-name">نيّة</div>
 </a>
 <div class="nav-links">
 ${links.map(l => `<a class="nav-link ${l.key===activePage?'active':''}" href="${l.href}">${l.label}</a>`).join('')}
 ${authArea}
 </div>
 `;
}
// حماية صفحات لازم تسجيل دخول لها
function requireAuth(){
 if(!API.isLoggedIn()){
 location.href = 'login.html';
 return false;
 }
 return true;
}
</script>
<script>
renderTopbar('create'); renderFooter(); renderBottomNav('create');
if(!requireAuth()){ /* redirected */ }
let selectedImages = [];
let selectedStudy = null;
document.getElementById('img-input').addEventListener('change', (e) => {
 selectedImages = [...selectedImages, ...Array.from(e.target.files)].slice(0, 6);
 renderImagePreview();
});
document.getElementById('study-input').addEventListener('change', (e) => {
 selectedStudy = e.target.files[0] || null;
 renderStudyPreview();
});
function renderImagePreview(){
 document.getElementById('img-preview').innerHTML = selectedImages.map((f,i) => {
 const url = URL.createObjectURL(f);
 return `<div class="file-thumb"><img src="${url}"></div>`;
 }).join('');
}
function renderStudyPreview(){
 document.getElementById('study-preview').innerHTML = selectedStudy
 ? `<div class="file-chip"><svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/><path d="M9 12h6M9 16h6"/></svg> ${escapeHtml(selectedStudy.name)}</div>` : '';
}
function readPayload(){
 return {
 name: document.getElementById('f-name').value.trim(),
 sector: document.getElementById('f-sector').value,
 loc: document.getElementById('f-loc').value.trim(),
 desc: document.getElementById('f-desc').value.trim(),
 target: Number(document.getElementById('f-target').value),
 min_amount: Number(document.getElementById('f-min').value),
 contact: document.getElementById('f-contact').value.trim(),
 };
}
function showPreview(){
 const p = readPayload();
 if(!p.name || !p.desc || !p.target || !p.min_amount || !p.contact){
 showToast('من فضلك املأ كل الحقول الأساسية');
 return;
 }
 const imgUrl = selectedImages[0] ? URL.createObjectURL(selectedImages[0]) : null;
 document.getElementById('preview-card').innerHTML = `
 <div class="thumb" style="margin-bottom:12px;">
 ${imgUrl ? `<img src="${imgUrl}">` : `<span class="ph"><svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M4 9l1-5h14l1 5"/><path d="M4 9v11h16V9M4 9h16M10 20v-5h4v5"/></svg></span>`}
 </div>
 <div class="p-top">
 <div>
 <h3 class="p-name">${escapeHtml(p.name)}</h3>
 <div class="p-loc"><svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.3"/></svg> ${escapeHtml(p.loc||'')}</div>
 </div>
 <span class="badge">${escapeHtml(p.sector)}</span>
 </div>
 <p class="p-desc" style="margin:10px 0;">${escapeHtml(p.desc)}</p>
 <div class="p-progress-row"><span>الهدف: ${formatMoney(p.target)} جنيه</span><span>أقل مشاركة: ${formatMoney(p.min_amount)}</span></div>
 `;
 document.getElementById('preview-overlay').classList.add('show');
}
let editId = new URLSearchParams(location.search).get('edit');
async function initEditMode(){
 if(!editId) return;
 document.getElementById('page-title').textContent = 'تعديل المشروع';
 document.getElementById('confirm-publish-btn').innerHTML = 'حفظ التعديلات <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M4 20l1-4L16 5l3 3-11 11z"/><path d="M14 7l3 3"/></svg>️';
 try{
 const all = await API.listProjects();
 const p = all.find(x => x.id === editId);
 if(!p){ showToast('المشروع مش موجود'); return; }
 document.getElementById('f-name').value = p.name;
 document.getElementById('f-sector').value = p.sector;
 document.getElementById('f-loc').value = p.loc || '';
 document.getElementById('f-desc').value = p.desc;
 document.getElementById('f-target').value = p.target;
 document.getElementById('f-min').value = p.min;
 document.getElementById('f-contact').value = p.contact;
 }catch(e){ showToast('تعذّر تحميل بيانات المشروع'); }
}
initEditMode();
let pendingProjectId = null;
let pendingFailedFiles = []; // [{file, kind, reason}]
function renderUploadIssueList(){
 document.getElementById('upload-issue-list').innerHTML = pendingFailedFiles
 .map(f => `<div style="margin-bottom:6px; display:flex; align-items:flex-start; gap:6px;"><svg viewBox="0 0 24 24" style="width:13px;height:13px;margin-top:3px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"><path d="M21.4 11.1l-8.5 8.5a4.2 4.2 0 01-6-6l8.5-8.5a2.8 2.8 0 014 4l-8.1 8.1a1.4 1.4 0 01-2-2l7.4-7.4"/></svg><span><b>${escapeHtml(f.file.name || 'ملف بدون اسم')}</b> — ${escapeHtml(f.reason)}</span></div>`)
 .join('');
}
async function retryFailedUploads(){
 const retryBtn = document.getElementById('retry-upload-btn');
 retryBtn.disabled = true; retryBtn.textContent = 'جاري إعادة المحاولة...';
 const stillFailing = [];
 for(const item of pendingFailedFiles){
 try{ await API.uploadFile(pendingProjectId, item.kind, item.file); }
 catch(e){
 console.error(e);
 stillFailing.push({ file: item.file, kind: item.kind, reason: e.message || 'فشل الرفع' });
 }
 }
 pendingFailedFiles = stillFailing;
 retryBtn.disabled = false; retryBtn.textContent = 'إعادة محاولة رفع الملفات دي';
 if(pendingFailedFiles.length === 0){
 document.getElementById('upload-issue-overlay').classList.remove('show');
 finishPublish(pendingProjectId);
 } else {
 renderUploadIssueList();
 showToast(`لسه ${pendingFailedFiles.length} ملف مش راضي يترفع`);
 }
}
function publishWithoutFailed(){
 document.getElementById('upload-issue-overlay').classList.remove('show');
 finishPublish(pendingProjectId);
}
function finishPublish(projectId){
 showToast('اتنشر مشروعك بنجاح <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M5 13l4 4L19 7"/></svg>');
 setTimeout(() => location.href = `project.html?id=${projectId}`, 900);
}
async function submitProject(){
 const payload = readPayload();
 if(!payload.name || !payload.desc || !payload.target || !payload.min_amount || !payload.contact){
 showToast('من فضلك املأ كل الحقول الأساسية');
 return;
 }
 const btn = document.getElementById('confirm-publish-btn');
 btn.disabled = true; btn.textContent = editId ? 'جاري الحفظ...' : 'جاري النشر...';
 if(editId){
 try{
 await API.editProject(editId, payload);
 showToast('اتحفظت التعديلات <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M5 13l4 4L19 7"/></svg>');
 setTimeout(() => location.href = `project.html?id=${editId}`, 900);
 }catch(e){
 showToast(e.message);
 btn.disabled = false; btn.innerHTML = 'حفظ التعديلات <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M4 20l1-4L16 5l3 3-11 11z"/><path d="M14 7l3 3"/></svg>️';
 }
 return;
 }
 try{
 const res = await API.createProject(payload);
 const projectId = res.id;
 pendingProjectId = projectId;
 const failed = [];
 for(const img of selectedImages){
 try{ await API.uploadFile(projectId, 'image', img); }
 catch(e){
 console.error(e);
 failed.push({ file: img, kind: 'image', reason: e.message || 'فشل الرفع' });
 }
 }
 if(selectedStudy){
 try{ await API.uploadFile(projectId, 'study', selectedStudy); }
 catch(e){
 console.error(e);
 failed.push({ file: selectedStudy, kind: 'study', reason: e.message || 'فشل الرفع' });
 }
 }
 document.getElementById('preview-overlay').classList.remove('show');
 if(failed.length){
 // منوقفش النشر بصمت — بنوقف هنا فعليًا ونوريله المشكلة، وهو اللي
 // يقرر يعيد المحاولة ولا يكمل بدون الملفات دي، بدل ما نقرر بالنيابة عنه
 pendingFailedFiles = failed;
 renderUploadIssueList();
 document.getElementById('upload-issue-overlay').classList.add('show');
 btn.disabled = false; btn.innerHTML = 'تأكيد ونشر <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M5 13l4 4L19 7"/></svg>';
 } else {
 finishPublish(projectId);
 }
 }catch(e){
 showToast(e.message);
 btn.disabled = false; btn.innerHTML = 'تأكيد ونشر <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:3px"><path d="M5 13l4 4L19 7"/></svg>';
 }
}
</script>
</body>
</html>