\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[261,179,98],"3f5ee9ba-6670-436e-bc82-1d27dd718b02",["D",1787997603045],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst SOURCES = [\n { id:\"teleworks\", name:\"برنامج العمل عن بُعد\", type:\"رسمي سعودي\", trust:\"رسمي\", url:\"https://teleworks.sa\", desc:\"بوابة سعودية رسمية للعمل عن بُعد. ابدأ منها إذا كنت تبحث عن فرصة داخل المملكة.\", tags:[\"سعودي\",\"وظائف\",\"عن بُعد\"], icon:\"🇸🇦\" },\n { id:\"sabbar\", name:\"صبّار\", type:\"منصة سعودية\", trust:\"موثوق\", url:\"https://sabbar.com\", desc:\"منصة سعودية للوظائف المرنة والجزئية، ومفيدة للطلاب والباحثين عن بداية مهنية.\", tags:[\"طلاب\",\"جزئي\",\"سعودي\"], icon:\"🎓\" },\n { id:\"mostaql\", name:\"مستقل\", type:\"عمل حر عربي\", trust:\"موثوق\", url:\"https://mostaql.com\", desc:\"مشاريع عربية في الكتابة والتصميم والترجمة والبرمجة والتسويق وغيرها.\", tags:[\"عمل حر\",\"عربي\",\"مشاريع\"], icon:\"💼\" },\n { id:\"khamsat\", name:\"خمسات\", type:\"خدمات مصغّرة\", trust:\"موثوق\", url:\"https://khamsat.com\", desc:\"ابدأ ببيع خدمة صغيرة من مهارتك، مثل التصميم أو الكتابة أو الترجمة أو المونتاج.\", tags:[\"عمل حر\",\"بدون خبرة\",\"عربي\"], icon:\"✨\" },\n { id:\"upwork\", name:\"Upwork\", type:\"منصة عالمية\", trust:\"موثوق\", url:\"https://www.upwork.com/freelance-jobs/\", desc:\"فرص ومشاريع عالمية عن بُعد لمن يجيد الإنجليزية ويملك مهارة قابلة للتقديم عبر الإنترنت.\", tags:[\"عالمي\",\"إنجليزي\",\"عمل حر\"], icon:\"🌍\" },\n { id:\"remoteok\", name:\"Remote OK\", type:\"وظائف عالمية\", trust:\"تحقق قبل التقديم\", url:\"https://remoteok.com\", desc:\"لوحة وظائف عالمية عن بُعد. راجع متطلبات كل وظيفة وبلد التوظيف قبل التقديم.\", tags:[\"عالمي\",\"تقنية\",\"عن بُعد\"], icon:\"🛰️\" },\n];\n\nconst CATEGORIES = [\n [\"تقنية وبرمجة\",\"💻\"],[\"كتابة وتحرير\",\"✍️\"],[\"تصميم\",\"🎨\"],[\"شبكات اجتماعية\",\"📱\"],\n [\"خدمة عملاء\",\"🎧\"],[\"إدخال بيانات\",\"⌨️\"],[\"تسويق ومبيعات\",\"📣\"],[\"ترجمة\",\"🌐\"],\n [\"ذكاء اصطناعي\",\"🤖\"],[\"تعليم وتدريب\",\"🎓\"],[\"مساعد افتراضي\",\"🧑‍💼\"],[\"مونتاج ومحتوى\",\"🎬\"]\n];\n\nfunction scrollToId(id:string){ document.getElementById(id)?.scrollIntoView({behavior:\"smooth\",block:\"start\"}); }\nfunction copyText(text:string){ navigator.clipboard?.writeText(text); }\n\nfunction SectionTitle({title,desc}:{title:string;desc:string}){\n return

◆ {title}

{desc}

;\n}\n\nfunction TrustBadge({trust}:{trust:string}){\n const cls = trust===\"رسمي\" ? \"text-emerald-300 border-emerald-400/30 bg-emerald-400/10\" : trust===\"موثوق\" ? \"gold-text border-yellow-400/30 bg-yellow-400/10\" : \"text-orange-200 border-orange-400/30 bg-orange-400/10\";\n return {trust===\"رسمي\"?\"✓ \":trust===\"موثوق\"?\"🛡 \":\"⚠ \"}{trust};\n}\n\nfunction ToolModal({tool,onClose}:{tool:string|null;onClose:()=>void}){\n const [name,setName]=useState(\"\"); const [field,setField]=useState(\"\"); const [skills,setSkills]=useState(\"\");\n const [job,setJob]=useState(\"\"); const [company,setCompany]=useState(\"\"); const [output,setOutput]=useState(\"\");\n if(!tool) return null;\n const titles:any={cv:\"منشئ سيرة ذاتية مبسطة\",letter:\"مولد خطاب تقديم\",interview:\"مساعد المقابلة\"};\n const generate=()=>{\n if(tool===\"cv\") setOutput(`السيرة الذاتية\\n\\nالاسم: ${name||\"—\"}\\nالمجال المستهدف: ${field||\"—\"}\\n\\nنبذة مهنية\\nطالب/باحث عن فرصة أطمح إلى تطوير خبرتي العملية في مجال ${field||\"المجال المستهدف\"}، وأتميز بالالتزام وسرعة التعلم والعمل عن بُعد.\\n\\nالمهارات\\n${skills||\"أضف مهاراتك هنا\"}\\n\\nالمشاريع والدورات\\nأضف هنا مشاريعك الجامعية أو التطوعية أو الدورات المرتبطة بالمجال.\\n\\nملاحظة: راجع النص وأضف بياناتك الحقيقية فقط قبل الإرسال.`);\n if(tool===\"letter\") setOutput(`السلام عليكم،\\n\\nأتقدم باهتمام لفرصة «${job||\"المسمى الوظيفي\"}» لدى ${company||\"الجهة\"}. أنا ${name||\"متقدم مهتم\"}، وأرغب في توظيف مهاراتي في ${skills||field||\"المجال\"} والمساهمة بجدية والتزام في العمل. أمتلك استعدادًا للتعلم السريع والعمل ضمن فريق وتحمل المسؤولية، ويسعدني مناقشة مدى ملاءمتي للفرصة في مقابلة.\\n\\nمع خالص التقدير.`);\n if(tool===\"interview\") setOutput(`تدريب مقابلة: ${job||field||\"الوظيفة المستهدفة\"}\\n\\n1) عرفنا بنفسك في 60 ثانية.\\nركز على دراستك أو خبرتك، مهارتين مرتبطتين بالوظيفة، وسبب اهتمامك بها.\\n\\n2) لماذا تريد هذه الفرصة؟\\nاربط بين ما ستتعلمه وما تستطيع تقديمه للجهة.\\n\\n3) كيف تنظم وقتك مع الدراسة أو الالتزامات؟\\nاذكر جدولًا واضحًا وساعات ثابتة للعمل.\\n\\n4) اذكر موقفًا تعلمت فيه مهارة بسرعة.\\nاستخدم مثالًا من مشروع دراسي أو تطوعي حقيقي.\\n\\n5) ما الأدوات التي تجيدها؟\\nاذكر فقط الأدوات التي استخدمتها فعلًا: ${skills||\"أضف أدواتك ومهاراتك\"}.`);\n };\n return

e.stopPropagation()}>\n

{titles[tool]}

أدخل معلومات بسيطة، وستحصل على مسودة قابلة للتعديل والنسخ.

\n setName(e.target.value)} />\n setField(e.target.value)} />\n {tool!==\"cv\" && setJob(e.target.value)} />}\n {tool===\"letter\" && setCompany(e.target.value)} />}\n

setSkills(e.target.value)} />\n      </div>\n      <button className=\"gold-btn w-full py-3 mt-4\" onClick={generate}>✨ أنشئ المسودة الآن</button>\n      {output && <div className=\"mt-5\"><div className=\"flex items-center justify-between mb-2\"><b>النتيجة</b><button className=\"gold-outline px-3 py-2\" onClick={()=>copyText(output)}>نسخ النص</button></div><pre className=\"whitespace-pre-wrap text-sm leading-8 bg-black/25 border border-slate-700 rounded-xl p-4\">{output}</pre></div>}\n    </div>\n  </div>;\n}\n\nexport function App(){\n  const [query,setQuery]=useState(\"\"); const [activeTag,setActiveTag]=useState(\"الكل\"); const [saved,setSaved]=useState<string[]>([]);\n  const [stage,setStage]=useState(\"جامعي\"); const [english,setEnglish]=useState(\"أساسي\"); const [hours,setHours]=useState(\"2-4\"); const [goal,setGoal]=useState(\"وظيفة\"); const [match,setMatch]=useState<any[]>([]);\n  const [tool,setTool]=useState<string|null>(null); const [alertEmail,setAlertEmail]=useState(\"\"); const [alertField,setAlertField]=useState(\"\"); const [alertSaved,setAlertSaved]=useState(false);\n  const [tracker,setTracker]=useState<any[]>([]); const [trackTitle,setTrackTitle]=useState(\"\"); const [trackCompany,setTrackCompany]=useState(\"\");\n  const [jobs,setJobs]=useState<any[]>([]); const [jobsLoading,setJobsLoading]=useState(true); const [adminOpen,setAdminOpen]=useState(false);\n\n  useEffect(()=>{ try{setSaved(JSON.parse(localStorage.getItem(\"forsati-saved\")||\"[]\"));setTracker(JSON.parse(localStorage.getItem(\"forsati-tracker\")||\"[]\"));}catch{} },[]);\n  useEffect(()=>{ fetch('/api/jobs').then(r=>r.json()).then(d=>setJobs(d.jobs||[])).catch(()=>setJobs([])).finally(()=>setJobsLoading(false)); },[]);\n  const toggleSave=(id:string)=>{ const next=saved.includes(id)?saved.filter(x=>x!==id):[...saved,id]; setSaved(next);localStorage.setItem(\"forsati-saved\",JSON.stringify(next)); };\n  const addTrack=()=>{ if(!trackTitle.trim())return; const next=[{id:Date.now(),title:trackTitle,company:trackCompany,status:\"حفظتها\"},...tracker];setTracker(next);localStorage.setItem(\"forsati-tracker\",JSON.stringify(next));setTrackTitle(\"\");setTrackCompany(\"\"); };\n  const updateTrack=(id:number,status:string)=>{const next=tracker.map(x=>x.id===id?{...x,status}:x);setTracker(next);localStorage.setItem(\"forsati-tracker\",JSON.stringify(next));};\n\n  const filtered=useMemo(()=>SOURCES.filter(s=>{\n    const text=(s.name+s.desc+s.tags.join(\" \")+s.type).toLowerCase();\n    const q=query.trim().toLowerCase(); const qOk=!q||text.includes(q); const tagOk=activeTag===\"الكل\"||s.tags.includes(activeTag)||s.type.includes(activeTag);\n    return qOk&&tagOk;\n  }),[query,activeTag]);\n\n  const runMatch=()=>{\n    const ranked=SOURCES.map(s=>{let score=55; const reasons=[] as string[];\n      if(goal===\"عمل حر\"&&s.tags.includes(\"عمل حر\")){score+=25;reasons.push(\"مناسب للعمل الحر\");}\n      if(goal===\"وظيفة\"&&(s.id===\"teleworks\"||s.id===\"sabbar\"||s.id===\"remoteok\")){score+=18;reasons.push(\"يركز على الوظائف\");}\n      if(stage!==\"خريج\"&&s.tags.includes(\"طلاب\")){score+=15;reasons.push(\"مناسب للطلاب\");}\n      if(english===\"جيد\"||english===\"ممتاز\"){if(s.tags.includes(\"عالمي\")){score+=15;reasons.push(\"يفتح لك فرصًا عالمية\");}}\n      else if(s.tags.includes(\"عالمي\")){score-=12;}\n      if(hours===\"1-2\"&&(s.id===\"khamsat\"||s.id===\"mostaql\")){score+=10;reasons.push(\"مرن مع وقت محدود\");}\n      return {...s,score:Math.max(35,Math.min(97,score)),reasons};\n    }).sort((a,b)=>b.score-a.score); setMatch(ranked.slice(0,4)); setTimeout(()=>scrollToId(\"match-results\"),60);\n  };\n\n  const saveAlertPref=async()=>{ if(!alertEmail||!alertField)return; try{ const r=await fetch('/api/alerts',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({email:alertEmail,field:alertField})}); if(r.ok){setAlertSaved(true);localStorage.setItem('forsati-alert',JSON.stringify({email:alertEmail,field:alertField}));} }catch{} };\n  const quick=(tag:string)=>{setActiveTag(tag);setQuery(\"\");scrollToId(\"sources\");};\n\n  return <div>\n    <ToolModal tool={tool} onClose={()=>setTool(null)} />\n    <AdminModal open={adminOpen} onClose={()=>setAdminOpen(false)} onAdded={(fresh)=>{setJobs(fresh);setJobsLoading(false)}} />\n\n    <div className=\"text-center text-sm font-bold gold-text bg-yellow-400/10 border-b border-yellow-400/20 px-4 py-3\">مبادرة من الإعلامي أحمد عبدالغني الثقفي للباحثين والطلاب عن وظائف مناسبة لهم</div>\n\n    <header className=\"sticky top-0 z-40 backdrop-blur-xl bg-[#071426]/90 border-b border-slate-700/60\">\n      <div className=\"max-w-7xl mx-auto px-4 py-3 flex items-center gap-4\">\n        <button onClick={()=>scrollToId(\"top\")} className=\"text-right\"><div className=\"text-2xl font-black gold-text\">فرصتي</div><div className=\"text-[11px] muted\">بوابة العمل عن بُعد</div></button>\n        <nav className=\"nav-scroll flex-1 flex gap-2 text-sm font-bold\">\n          {[['كيف تبدأ','how'],['المصادر الموثوقة','sources'],['المطابقة الذكية','matcher'],['أدوات مجانية','tools'],['متابعة طلباتي','tracker'],['الأمان','safety']].map(([label,id])=><button key={id} onClick={()=>scrollToId(id)} className=\"px-3 py-2 rounded-xl hover:bg-white/5\">{label}</button>)}\n        </nav>\n        <button className=\"gold-btn px-4 py-2 hide-mobile\" onClick={()=>scrollToId(\"matcher\")}>اعثر لي على فرصة</button>\n        <button className=\"gold-outline px-3 py-2\" onClick={()=>setAdminOpen(true)}>الإدارة</button>\n      </div>\n    </header>\n\n    <main id=\"top\">\n      <section className=\"max-w-7xl mx-auto px-4 pt-14 pb-10 text-center\">\n        <div className=\"inline-flex chip mb-5\">للطلاب • للطالبات • للباحثين عن عمل • بدون تعقيد</div>\n        <h1 className=\"hero-title text-5xl sm:text-6xl font-black leading-tight\">فرصتك أقرب مما تتوقع<br/><span className=\"gold-text\">ابدأ من مكانك</span></h1>\n        <p className=\"muted max-w-3xl mx-auto mt-5 text-lg leading-9\">نجمع لك الطرق والمصادر الموثوقة للوصول إلى العمل عن بُعد، ونشرح كل خطوة بلغة بسيطة. لا تحتاج أن تعرف أين تبحث؛ ابدأ من هنا.</p>\n        <div className=\"max-w-3xl mx-auto mt-7 panel p-3 flex flex-col sm:flex-row gap-3\">\n          <input value={query} onChange={e=>setQuery(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')scrollToId('sources')}} placeholder=\"مثال: تصميم، خدمة عملاء، ذكاء اصطناعي، عمل حر...\" className=\"flex-1 bg-transparent px-4 py-3 outline-none text-white\" />\n          <button className=\"gold-btn px-7 py-3\" onClick={()=>scrollToId(\"sources\")}>🔎 ابحث الآن</button>\n        </div>\n        <div className=\"flex flex-wrap justify-center gap-2 mt-5\">\n          {[\"طلاب\",\"بدون خبرة\",\"عمل حر\",\"عالمي\",\"سعودي\"].map(t=><button key={t} onClick={()=>quick(t)} className=\"gold-outline px-4 py-2\">{t}</button>)}\n        </div>\n      </section>\n\n      <section id=\"how\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"ابدأ بالطريقة التي تشبهك\" desc=\"اختر حالتك، ونحن ننقلك مباشرة إلى الجزء الأنسب لك. كل زر هنا ينفذ خطوة فعلية.\" />\n        <div className=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mobile-stack\">\n          {[\n            [\"🎓\",\"أنا طالب\",\"أبحث عن فرصة مرنة لا تتعارض مع الدراسة.\",()=>{setStage('جامعي');scrollToId('matcher')}],\n            [\"🧑‍💼\",\"أنا باحث عن عمل\",\"أريد وظيفة عن بُعد من مصدر موثوق.\",()=>{setGoal('وظيفة');scrollToId('matcher')}],\n            [\"💻\",\"أريد عملًا حرًا\",\"أريد تحويل مهارتي إلى خدمة أو مشروع مدفوع.\",()=>{setGoal('عمل حر');scrollToId('matcher')}],\n            [\"🌱\",\"بدون خبرة\",\"أحتاج بداية مناسبة للمبتدئين.\",()=>quick('بدون خبرة')]\n          ].map(([ico,title,desc,fn]:any)=><div className=\"panel p-5\" key={title}><div className=\"text-4xl\">{ico}</div><h3 className=\"font-black text-xl mt-3\">{title}</h3><p className=\"muted leading-7 mt-2 min-h-14\">{desc}</p><button className=\"gold-btn w-full py-3 mt-4\" onClick={fn}>ابدأ من هنا ←</button></div>)}\n        </div>\n      </section>\n\n      <section id=\"matcher\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"المطابقة الذكية\" desc=\"أجب عن أربعة أسئلة فقط. سنرتب لك المنصات الأنسب كبداية حسب وقتك ووضعك، بدل أن تتنقل عشوائيًا بين المواقع.\" />\n        <div className=\"panel p-5 sm:p-7 grid lg:grid-cols-4 gap-4\">\n          <label className=\"text-sm font-bold\">أنت الآن<select value={stage} onChange={e=>setStage(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>ثانوي</option><option>جامعي</option><option>خريج</option></select></label>\n          <label className=\"text-sm font-bold\">الإنجليزية<select value={english} onChange={e=>setEnglish(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>ضعيف</option><option>أساسي</option><option>جيد</option><option>ممتاز</option></select></label>\n          <label className=\"text-sm font-bold\">الوقت اليومي<select value={hours} onChange={e=>setHours(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>1-2</option><option>2-4</option><option>4+</option></select></label>\n          <label className=\"text-sm font-bold\">ماذا تريد؟<select value={goal} onChange={e=>setGoal(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>وظيفة</option><option>عمل حر</option></select></label>\n          <button className=\"gold-btn lg:col-span-4 py-4 text-lg\" onClick={runMatch}>✨ اعثر لي على أفضل بداية</button>\n        </div>\n        {match.length>0&&<div id=\"match-results\" className=\"mt-6 grid sm:grid-cols-2 lg:grid-cols-4 gap-4\">{match.map(s=><div className=\"panel p-5\" key={s.id}><div className=\"flex justify-between items-start\"><span className=\"text-3xl\">{s.icon}</span><span className=\"chip\">{s.score}% مناسبة</span></div><h3 className=\"font-black text-xl mt-3\">{s.name}</h3><p className=\"muted text-sm leading-7 mt-2\">{s.reasons.length?s.reasons.join(' • '):s.desc}</p><a href={s.url} target=\"_blank\" rel=\"noopener noreferrer\" className=\"gold-btn block text-center py-3 mt-4\">افتح المصدر الرسمي ↗</a></div>)}</div>}\n      </section>\n\n      <section id=\"live-jobs\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"الفرص المنشورة فعليًا\" desc=\"هذا القسم مخصص للفرص الحقيقية التي نضيفها بعد التحقق من رابطها الأصلي. إذا لم توجد فرصة الآن فلن نملأ المكان بإعلانات وهمية.\" />\n        {jobsLoading?<div className=\"panel p-6 muted\">جارٍ تحميل الفرص...</div>:jobs.length===0?<div className=\"panel p-6\"><h3 className=\"font-black text-lg gold-text\">لا توجد فرصة منشورة الآن</h3><p className=\"muted leading-8 mt-2\">استخدم المصادر الموثوقة أدناه الآن، وسنضيف هنا الفرص التي يتم التحقق منها واحدةً واحدة.</p></div>:<div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">{jobs.map((j:any)=><article className=\"panel p-5 flex flex-col\" key={j.id}><div className=\"flex justify-between gap-3 items-start\"><div><h3 className=\"font-black text-xl\">{j.title}</h3><p className=\"muted text-sm mt-1\">{j.company}</p></div><TrustBadge trust={j.trust||'تحقق قبل التقديم'}/></div>{j.summary&&<p className=\"muted leading-8 mt-4\">{j.summary}</p>}<div className=\"flex flex-wrap gap-2 mt-4\"><span className=\"chip\">{j.work_type||'عن بُعد'}</span><span className=\"chip\">{j.experience||'—'}</span><span className=\"chip\">{j.country||'—'}</span>{j.category&&<span className=\"chip\">{j.category}</span>}</div>{j.income_text&&<p className=\"mt-4 text-sm\"><b className=\"gold-text\">الدخل المعلن:</b> {j.income_text}</p>}<p className=\"muted text-xs mt-3\">المصدر: {j.source_name||'المصدر الأصلي'}</p><a className=\"gold-btn text-center py-3 mt-5\" href={j.apply_url} target=\"_blank\" rel=\"noopener noreferrer\">التقديم من المصدر الأصلي ↗</a></article>)}</div>}\n      </section>\n\n      <section id=\"sources\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"مصادر موثوقة نبدأ منها\" desc=\"لا ننسب وظائف وهمية إلى شركات. هذه روابط مباشرة لمنصات معروفة، ويجب دائمًا قراءة شروط كل إعلان في المصدر الأصلي.\" />\n        <div className=\"flex flex-wrap gap-2 mb-5\">{[\"الكل\",\"سعودي\",\"طلاب\",\"عمل حر\",\"عالمي\",\"بدون خبرة\"].map(t=><button key={t} className={activeTag===t?\"gold-btn px-4 py-2\":\"gold-outline px-4 py-2\"} onClick={()=>setActiveTag(t)}>{t}</button>)}</div>\n        <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">\n          {filtered.map(s=><article key={s.id} className=\"source-card panel p-5 flex flex-col\">\n            <div className=\"flex items-start gap-3\"><div className=\"text-4xl\">{s.icon}</div><div className=\"flex-1\"><h3 className=\"font-black text-xl\">{s.name}</h3><p className=\"text-xs muted mt-1\">{s.type}</p></div><TrustBadge trust={s.trust}/></div>\n            <p className=\"muted leading-8 mt-4 flex-1\">{s.desc}</p><div className=\"flex flex-wrap gap-2 mt-3\">{s.tags.map(t=><span className=\"chip\" key={t}>{t}</span>)}</div>\n            <div className=\"grid grid-cols-[1fr_auto] gap-2 mt-5\"><a className=\"gold-btn text-center py-3\" href={s.url} target=\"_blank\" rel=\"noopener noreferrer\">فتح المنصة والتقديم ↗</a><button className=\"gold-outline px-4\" onClick={()=>toggleSave(s.id)} aria-label=\"حفظ\">{saved.includes(s.id)?\"★\":\"☆\"}</button></div>\n          </article>)}\n        </div>\n        {filtered.length===0&&<div className=\"panel p-6 muted\">لا توجد نتيجة مطابقة لعبارة البحث. جرّب كلمة أوسع مثل «تصميم» أو «عمل حر».</div>}\n      </section>\n\n      <section className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"مجالات تستطيع البحث فيها\" desc=\"اضغط على أي مجال ليتم وضعه في البحث تلقائيًا وعرض المصادر التي يمكن أن تبدأ منها.\" />\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3\">{CATEGORIES.map(([name,ico])=><button key={name} className=\"panel p-4 text-center hover:border-yellow-400/40\" onClick={()=>{setQuery(name);setActiveTag('الكل');scrollToId('sources')}}><div className=\"text-3xl\">{ico}</div><div className=\"font-bold mt-2 text-sm\">{name}</div></button>)}</div>\n      </section>\n\n      <section id=\"tools\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"أدوات مجانية تساعدك قبل التقديم\" desc=\"بدل أن تخرج من الموقع تبحث عن طريقة كتابة السيرة أو الخطاب، استخدم هذه الأدوات البسيطة ثم راجع الناتج وأضف معلوماتك الحقيقية.\" />\n        <div className=\"grid md:grid-cols-3 gap-5\">\n          {[[\"📄\",\"سيرتي للطالب\",\"حوّل دراستك ومهاراتك إلى مسودة سيرة واضحة.\",\"cv\"],[\"✉️\",\"خطاب تقديم\",\"أنشئ رسالة مخصصة للمسمى والجهة.\",\"letter\"],[\"🎤\",\"تدريب المقابلة\",\"احصل على أسئلة متوقعة وطريقة الإجابة.\",\"interview\"]].map(([ico,title,desc,key])=><div className=\"panel p-6\" key={key}><div className=\"text-4xl\">{ico}</div><h3 className=\"text-xl font-black mt-3\">{title}</h3><p className=\"muted leading-8 mt-2\">{desc}</p><button className=\"gold-btn w-full py-3 mt-5\" onClick={()=>setTool(key)}>فتح الأداة</button></div>)}\n        </div>\n      </section>\n\n      <section id=\"tracker\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"متابعة طلباتي\" desc=\"أضف الوظائف التي قدمت عليها وتابع حالتها. في هذه النسخة تُحفظ القائمة على جهازك حتى لا تضيع منك.\" />\n        <div className=\"panel p-5 sm:p-7\">\n          <div className=\"grid sm:grid-cols-[1fr_1fr_auto] gap-3\"><input value={trackTitle} onChange={e=>setTrackTitle(e.target.value)} placeholder=\"المسمى الوظيفي\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><input value={trackCompany} onChange={e=>setTrackCompany(e.target.value)} placeholder=\"الجهة\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><button className=\"gold-btn px-6\" onClick={addTrack}>+ أضف للمتابعة</button></div>\n          <div className=\"mt-5 space-y-3\">{tracker.length===0?<p className=\"muted\">لم تضف أي طلب بعد.</p>:tracker.map(x=><div key={x.id} className=\"bg-black/20 border border-slate-700 rounded-xl p-4 flex flex-col sm:flex-row gap-3 sm:items-center\"><div className=\"flex-1\"><b>{x.title}</b><div className=\"muted text-sm\">{x.company||\"—\"}</div></div><select value={x.status} onChange={e=>updateTrack(x.id,e.target.value)} className=\"bg-[#06111f] border border-slate-600 rounded-xl p-2\"><option>حفظتها</option><option>قدمت عليها</option><option>بانتظار الرد</option><option>مقابلة</option><option>مقبولة</option><option>مرفوضة</option></select></div>)}</div>\n        </div>\n      </section>\n\n      <section className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"احفظ تفضيلات البحث\" desc=\"اكتب بريدك والمجال الذي تريده. سنحفظ تفضيلك في قاعدة بيانات «فرصتي» لتجهيز التنبيهات عند تفعيل خدمة الإرسال.\" />\n        <div className=\"panel p-5 sm:p-7 grid sm:grid-cols-[1fr_1fr_auto] gap-3\"><input value={alertEmail} onChange={e=>setAlertEmail(e.target.value)} placeholder=\"البريد الإلكتروني\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><input value={alertField} onChange={e=>setAlertField(e.target.value)} placeholder=\"مثال: تصميم عن بُعد بدون خبرة\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><button className=\"gold-btn px-6\" onClick={saveAlertPref}>🔔 احفظ تفضيلي</button>{alertSaved&&<p className=\"sm:col-span-3 text-emerald-300 font-bold\">✓ تم حفظ تفضيلك بنجاح.</p>}</div>\n      </section>\n\n      <section id=\"safety\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <div className=\"panel p-6 sm:p-8 border-orange-400/30\"><SectionTitle title=\"احذر الاحتيال الوظيفي\" desc=\"وجود رابط في الإنترنت لا يعني أنه آمن. التقديم الطبيعي لا يتطلب منك إعطاء أسرار حساباتك.\"/><div className=\"grid md:grid-cols-2 gap-4\"><div className=\"bg-red-400/10 border border-red-400/20 rounded-2xl p-5\"><h3 className=\"text-red-200 font-black text-lg\">لا ترسل أبدًا</h3><p className=\"muted leading-8 mt-2\">رمز OTP • كلمة مرور البنك • بيانات البطاقة • رمز التحقق • تحويل مالي للحصول على وظيفة.</p></div><div className=\"bg-emerald-400/10 border border-emerald-400/20 rounded-2xl p-5\"><h3 className=\"text-emerald-200 font-black text-lg\">افعل دائمًا</h3><p className=\"muted leading-8 mt-2\">اقرأ الإعلان من المصدر الأصلي • تحقق من اسم الشركة • راجع نطاق البريد والرابط • احتفظ بنسخة من الإعلان.</p></div></div></div>\n      </section>\n\n      <section className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"كيف تستخدم فرصتي؟\" desc=\"ثلاث خطوات فقط، حتى لو كانت هذه أول مرة تبحث فيها عن عمل عن بُعد.\" />\n        <div className=\"grid md:grid-cols-3 gap-4\">{[[\"1\",\"حدد وضعك\",\"طالب، خريج، باحث عن عمل أو عمل حر.\"],[\"2\",\"استخدم المطابقة\",\"دع الصفحة ترتب لك أفضل مصادر البداية.\"],[\"3\",\"قدم من المصدر\",\"راجع الإعلان الحقيقي ثم قدم مباشرة من الجهة الأصلية.\"]].map(([n,t,d])=><div className=\"panel p-6\" key={n}><div className=\"w-11 h-11 rounded-full gold-btn flex items-center justify-center text-xl\">{n}</div><h3 className=\"font-black text-xl mt-4\">{t}</h3><p className=\"muted leading-8 mt-2\">{d}</p></div>)}</div>\n      </section>\n    </main>\n\n    <footer className=\"border-t border-slate-700/70 mt-8 bg-black/20\"><div className=\"max-w-7xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-8\"><div><div className=\"text-3xl font-black gold-text\">فرصتي</div><p className=\"muted mt-2\">ادرس.. واعمل.. وابنِ خبرتك من مكانك.</p></div><div><b>عن المبادرة</b><p className=\"muted leading-8 mt-2\">مبادرة من الإعلامي أحمد عبدالغني الثقفي للباحثين والطلاب عن وظائف مناسبة لهم.</p></div><div><b>ملاحظة مهمة</b><p className=\"muted leading-8 mt-2\">«فرصتي» دليل مساعد للوصول إلى المصادر، وليست جهة توظيف ولا تضمن القبول في أي فرصة.</p></div></div><div className=\"text-center muted text-xs border-t border-slate-800 py-5\">© {new Date().getFullYear()} فرصتي — جميع الحقوق محفوظة</div></footer>\n  </div>;\n}\n\n\nfunction AdminModal({open,onClose,onAdded}:{open:boolean;onClose:()=>void;onAdded:(job:any)=>void}){\n  const [key,setKey]=useState(\"\");\n  const [form,setForm]=useState<any>({title:\"\",company:\"\",summary:\"\",category:\"\",work_type:\"جزئي\",experience:\"بدون خبرة\",country:\"السعودية\",income_text:\"\",expires_at:\"\",apply_url:\"\",source_name:\"\",trust:\"موثوق\",tags:\"\"});\n  const [message,setMessage]=useState(\"\"); const [busy,setBusy]=useState(false);\n  if(!open) return null;\n  const set=(k:string,v:string)=>setForm((f:any)=>({...f,[k]:v}));\n  const submit=async()=>{setBusy(true);setMessage(\"\");try{const r=await fetch('/api/admin/jobs',{method:'POST',headers:{'content-type':'application/json','x-admin-key':key},body:JSON.stringify({...form,tags:form.tags.split(/[،,]/).map((x:string)=>x.trim()).filter(Boolean)})});const d=await r.json();if(!r.ok){setMessage(d.error||'تعذر الحفظ');return;}setMessage('✓ تمت إضافة الفرصة وستظهر في الصفحة');const fresh=await fetch('/api/jobs').then(x=>x.json());onAdded(fresh.jobs||[]);setForm((f:any)=>({...f,title:'',company:'',summary:'',income_text:'',expires_at:'',apply_url:'',source_name:'',tags:''}));}catch{setMessage('تعذر الاتصال بالخادم');}finally{setBusy(false)}};\n  const input=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3 w-full\";\n  return <div className=\"fixed inset-0 z-[110] bg-black/80 flex items-end sm:items-center justify-center p-3\" onClick={onClose}>\n    <div className=\"panel w-full max-w-3xl p-5 sm:p-7 max-h-[94vh] overflow-auto\" onClick={e=>e.stopPropagation()}>\n      <div className=\"flex justify-between items-start gap-4\"><div><h3 className=\"text-2xl font-black gold-text\">لوحة إدارة فرصتي</h3><p className=\"muted mt-1\">أضف فرصة حقيقية بعد التحقق من رابط المصدر. ستظهر فورًا في قسم الفرص المنشورة.</p></div><button onClick={onClose} className=\"text-2xl\">×</button></div>\n      <div className=\"mt-5\"><label className=\"text-sm font-bold\">مفتاح الإدارة<input type=\"password\" className={`${input} mt-2`} value={key} onChange={e=>setKey(e.target.value)} placeholder=\"أدخل مفتاح الإدارة\"/></label></div>\n      <div className=\"grid sm:grid-cols-2 gap-3 mt-4\">\n        <input className={input} placeholder=\"المسمى الوظيفي *\" value={form.title} onChange={e=>set('title',e.target.value)}/>\n        <input className={input} placeholder=\"الجهة *\" value={form.company} onChange={e=>set('company',e.target.value)}/>\n        <input className={input} placeholder=\"التصنيف: تصميم، خدمة عملاء...\" value={form.category} onChange={e=>set('category',e.target.value)}/>\n        <select className={input} value={form.work_type} onChange={e=>set('work_type',e.target.value)}><option>جزئي</option><option>كامل</option><option>عمل حر</option><option>تدريب</option></select>\n        <select className={input} value={form.experience} onChange={e=>set('experience',e.target.value)}><option>بدون خبرة</option><option>مبتدئ</option><option>خبرة مطلوبة</option></select>\n        <input className={input} placeholder=\"الدولة\" value={form.country} onChange={e=>set('country',e.target.value)}/>\n        <input className={input} placeholder=\"الدخل إن كان معلنًا\" value={form.income_text} onChange={e=>set('income_text',e.target.value)}/>\n        <input className={input} type=\"date\" value={form.expires_at} onChange={e=>set('expires_at',e.target.value)}/>\n        <input className={input} placeholder=\"اسم المصدر\" value={form.source_name} onChange={e=>set('source_name',e.target.value)}/>\n        <select className={input} value={form.trust} onChange={e=>set('trust',e.target.value)}><option>رسمي</option><option>موثوق</option><option>تحقق قبل التقديم</option></select>\n        <input className=\"sm:col-span-2 bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\" placeholder=\"رابط التقديم الأصلي https://... *\" value={form.apply_url} onChange={e=>set('apply_url',e.target.value)}/>\n        <input className=\"sm:col-span-2 bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\" placeholder=\"وسوم مفصولة بفاصلة: طلاب، بدون خبرة، ذكاء اصطناعي\" value={form.tags} onChange={e=>set('tags',e.target.value)}/>\n        <textarea className=\"sm:col-span-2 bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3 min-h-24\" placeholder=\"وصف مختصر للفرصة\" value={form.summary} onChange={e=>set('summary',e.target.value)}/>\n      </div>\n      <button className=\"gold-btn w-full py-4 mt-4\" disabled={busy} onClick={submit}>{busy?'جارٍ الحفظ...':'نشر الفرصة بعد التحقق'}</button>\n      {message&&<p className={`mt-3 font-bold ${message.startsWith('✓')?'text-emerald-300':'text-orange-200'}`}>{message}</p>}\n    </div>\n  </div>;\n}\n",[261,179,87],"pulls","branches","forks","envVars",{"_94":51,"_280":26},"connections",{"_94":26,"_279":26},"unfilledCount","emptyCount",{"_44":353,"_13":261,"_85":254,"_54":-5,"_46":47,"_255":51,"_256":24,"_48":354,"_50":26,"_88":180,"_258":-5,"_90":30,"_259":-5,"_298":355,"_17":356},{"_44":253,"_13":179,"_85":178,"_54":254,"_46":47,"_255":51,"_256":24,"_48":350,"_50":26,"_88":180,"_258":-5,"_90":30,"_259":-5,"_298":351,"_17":352},{"_44":268,"_13":87,"_85":86,"_54":178,"_46":47,"_255":173,"_256":24,"_48":347,"_50":145,"_88":89,"_258":270,"_90":30,"_259":-5,"_298":348,"_17":349},{"_44":264,"_13":98,"_85":97,"_54":178,"_46":47,"_255":51,"_256":24,"_48":344,"_50":26,"_88":89,"_258":266,"_90":30,"_259":-5,"_298":345,"_17":346},{"_44":337,"_13":338,"_85":339,"_54":254,"_46":47,"_255":51,"_256":24,"_48":340,"_50":26,"_88":21,"_258":341,"_90":30,"_259":-5,"_298":342,"_17":343},{"_44":330,"_13":331,"_85":332,"_54":254,"_46":47,"_255":51,"_256":24,"_48":333,"_50":26,"_88":89,"_258":334,"_90":30,"_259":-5,"_298":335,"_17":336},{"_44":323,"_13":324,"_85":325,"_54":254,"_46":47,"_255":95,"_256":24,"_48":326,"_50":51,"_88":89,"_258":327,"_90":30,"_259":-5,"_298":328,"_17":329},{"_44":316,"_13":317,"_85":318,"_54":-5,"_46":47,"_255":51,"_256":24,"_48":319,"_50":26,"_88":21,"_258":320,"_90":30,"_259":-5,"_298":321,"_17":322},{"_44":309,"_13":310,"_85":311,"_54":-5,"_46":47,"_255":51,"_256":24,"_48":312,"_50":26,"_88":21,"_258":313,"_90":30,"_259":-5,"_298":314,"_17":315},{"_44":301,"_13":302,"_85":303,"_54":-5,"_46":47,"_255":304,"_256":24,"_48":305,"_50":26,"_88":89,"_258":306,"_90":30,"_259":-5,"_298":307,"_17":308},{"_44":292,"_13":293,"_85":192,"_54":-5,"_46":47,"_255":294,"_256":24,"_48":295,"_50":51,"_88":296,"_258":297,"_90":30,"_259":14,"_298":299,"_17":300},"e1e3320c-5cfb-4e25-a61a-0f23e8d88797","index.ts",5,["D",1787997490755],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { addJob, listJobs, saveAlert, saveReport } from \"./db.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/jobs\", async (c) => {\n  const jobs = await listJobs();\n  return c.json({ jobs });\n});\n\napp.post(\"/api/alerts\", async (c) => {\n  const body = await c.req.json().catch(() => ({}));\n  const email = String(body.email || \"\").trim().slice(0, 180);\n  const field = String(body.field || \"\").trim().slice(0, 300);\n  if (!email.includes(\"@\") || !field) return c.json({ ok:false, error:\"بيانات غير مكتملة\" }, 400);\n  await saveAlert(email, field);\n  return c.json({ ok:true });\n});\n\napp.post(\"/api/reports\", async (c) => {\n  const body = await c.req.json().catch(() => ({}));\n  const reason = String(body.reason || \"\").trim().slice(0, 1000);\n  if (!reason) return c.json({ ok:false, error:\"اكتب سبب البلاغ\" }, 400);\n  await saveReport(String(body.url || \"\").slice(0, 1000), reason, String(body.email || \"\").slice(0, 180));\n  return c.json({ ok:true });\n});\n\napp.post(\"/api/admin/jobs\", async (c) => {\n  const configured = Deno.env.get(\"FORSATI_ADMIN_KEY\") || \"\";\n  const supplied = c.req.header(\"x-admin-key\") || \"\";\n  if (!configured || supplied !== configured) return c.json({ ok:false, error:\"غير مصرح\" }, 401);\n  const body = await c.req.json().catch(() => ({}));\n  if (!String(body.title || \"\").trim() || !String(body.company || \"\").trim() || !String(body.apply_url || \"\").startsWith(\"http\")) {\n    return c.json({ ok:false, error:\"العنوان والجهة ورابط التقديم مطلوبة\" }, 400);\n  }\n  const id = await addJob(body);\n  return c.json({ ok:true, id });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","children",[],[293],"ccd3226d-f898-4657-90af-359822fa5aed","db.ts","1cd3bf4c-a390-11f1-b830-1607ee4eb77e",4,["D",1787997477926],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function listJobs() {\n  const result = await sqlite.execute(`SELECT id,title,company,summary,category,work_type,experience,country,income_text,posted_at,expires_at,apply_url,source_name,trust,tags,status,is_example FROM jobs WHERE status='active' AND (expires_at IS NULL OR expires_at='' OR date(expires_at) >= date('now')) ORDER BY datetime(posted_at) DESC, id DESC`);\n  return result.rows;\n}\n\nexport async function addJob(input:any) {\n  const tags = Array.isArray(input.tags) ? JSON.stringify(input.tags) : '[]';\n  const result = await sqlite.execute({\n    sql: `INSERT INTO jobs (title,company,summary,category,work_type,experience,country,income_text,posted_at,expires_at,apply_url,source_name,trust,tags,status,is_example) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`,\n    args: [input.title,input.company,input.summary||'',input.category||'',input.work_type||'جزئي',input.experience||'بدون خبرة',input.country||'السعودية',input.income_text||'',input.posted_at||new Date().toISOString(),input.expires_at||'',input.apply_url,input.source_name||'',input.trust||'تحقق قبل التقديم',tags,input.status||'active',input.is_example?1:0]\n  });\n  return result.lastInsertRowid;\n}\n\nexport async function saveAlert(email:string, field:string) {\n  await sqlite.execute({sql:\"INSERT INTO alerts (email,field) VALUES (?,?)\", args:[email,field]});\n}\n\nexport async function saveReport(url:string, reason:string, contactEmail:string) {\n  await sqlite.execute({sql:\"INSERT INTO reports (url,reason,contact_email) VALUES (?,?,?)\", args:[url||'',reason,contactEmail||'']});\n}\n",[],[302],"e53cdf86-15fa-4ec4-b545-8ec7fea4ad0d","README.md","01a04cf0-647d-750d-9613-6b36729f303d",["D",1787997217786],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[310],"9a533d7a-3a54-41dd-bc04-2e3492aebc68","CHANGELOG.md","01a04cf0-647d-750d-9613-643926b6eb9c",["D",1787997217786],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[],[317],"31a04db9-4e63-419e-8942-dabecc725858","root.tsx","01a04cf0-647d-750d-9613-5ebe7f88c98b",["D",1787997283378],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"ar\" dir=\"rtl\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\" />\n          <meta name=\"theme-color\" content=\"#071426\" />\n          <meta name=\"description\" content=\"فرصتي — بوابة عربية للعمل عن بُعد للطلاب والطالبات والباحثين عن فرص مناسبة من مصادر موثوقة.\" />\n          <title>فرصتي | العمل عن بُعد للطلاب والباحثين</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n          <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n          <link href=\"https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n          <style>{raw(`\n            :root{--navy:#071426;--navy2:#0b1e36;--gold:#d7ae48;--gold2:#f0d789;--cream:#fffaf0;--line:#24364d}\n            *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Tajawal',system-ui,sans-serif;background:radial-gradient(circle at top right,#153454 0,#071426 32%,#050d18 100%);color:#f8fafc;min-height:100vh}\n            button,input,select,textarea{font:inherit}a{text-decoration:none}.gold-btn{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17120a;font-weight:900;border:0;border-radius:16px;box-shadow:0 10px 30px rgba(215,174,72,.24);transition:.18s ease;cursor:pointer}.gold-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.gold-btn:active{transform:translateY(1px)}\n            .gold-outline{border:1px solid rgba(215,174,72,.65);color:var(--gold2);background:rgba(215,174,72,.06);border-radius:14px;font-weight:800;cursor:pointer}.panel{background:linear-gradient(180deg,rgba(15,35,58,.94),rgba(8,24,41,.96));border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 60px rgba(0,0,0,.22);border-radius:24px}.muted{color:#aebed0}.gold-text{color:var(--gold2)}\n            .chip{border:1px solid rgba(215,174,72,.35);background:rgba(215,174,72,.08);color:#f5dda0;border-radius:999px;padding:7px 11px;font-size:13px;font-weight:700}.source-card:hover{border-color:rgba(215,174,72,.55);transform:translateY(-2px)}.source-card{transition:.18s ease}\n            @media(max-width:640px){.mobile-stack{grid-template-columns:1fr!important}.hero-title{font-size:38px!important}.hide-mobile{display:none!important}.nav-scroll{overflow-x:auto;white-space:nowrap;padding-bottom:5px}.nav-scroll::-webkit-scrollbar{display:none}.gold-btn{min-height:48px}}\n          `)}</style>\n        </head>\n        <body>\n          <div id=\"root\" />\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[261,324],"b1d4cbfe-7a74-4e59-abb6-c8ea6c93422f","index.tsx","01a04cf0-647d-750d-9613-59fa8c59632e",["D",1787997217786],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[261,331],"27e8f8a2-6ca3-4f43-abd8-553184e84419","favicon.svg","01a04cf0-647d-750d-9613-544b38356f85",["D",1787997217786],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[261,338],["D",1787997217786],[],[261,179,98],["D",1787997603045],[],[261,179,87],["D",1787997217786],[283,284],[261,179],"e7319c8c-06a7-4a1d-8439-5da96e653cc7",["D",1787997217786],[282,285,286,287],[261],["D",1787997217786],["D",1789475460618],{"_11":12,"_231":93},{"_11":12,"_227":12,"_92":93,"_31":91,"_228":229,"_230":30},{"_50":173,"_13":16,"_44":47,"_219":182,"_220":-5,"_221":-5,"_222":-5,"_223":-5,"_224":-5,"_225":14,"_226":12},"ctx",{"_65":-5,"_250":395,"_396":397,"_398":399,"_400":30,"_401":30,"_402":30,"_403":24,"_404":-5,"_405":-7,"_406":-7,"_407":26,"_408":30,"_409":30,"_410":-5,"_411":30,"_412":30,"_413":30,"_414":-5},"ENV",{"_366":367,"_368":369,"_370":16,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

History · components