Hugging Face's logo

Spaces:
my0919175
/
neya
Running

App Files Community
neya / static /about.html
my0919175's picture
my0919175
Upload 21 files
06521f9 verified
Raw
History Blame Contribute Delete
12.7 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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: 860px;
 --warn-bg: #FFF4E5; --warn-border: #E67E00; --warn-ink: #7A4A00;
 --danger-bg: #FDECEC; --danger-border: #C00000; --danger-ink: #7A0000;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background: var(--bg); color: var(--ink); font-family:'IBM Plex Sans Arabic', sans-serif; line-height:1.9; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.brand-name,.btn{ font-family:'Cairo', sans-serif; }
a{ color: inherit; }
.page{ max-width: var(--max-w); margin:0 auto; padding: 0 20px 70px; }
.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; text-decoration:none; }
.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; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font-weight:700; font-size:13.5px; text-decoration:none; }
.btn:hover{ background:var(--surface); }
.hero{ text-align:center; padding: 48px 0 20px; }
.hero h1{ font-size:28px; font-weight:800; margin:0 0 10px; }
.hero p{ color:var(--muted); font-size:15px; max-width:560px; margin:0 auto; }
.updated{ text-align:center; font-size:12.5px; color:var(--muted-soft); margin-bottom:36px; }
.callout{
 border-radius: var(--radius); padding: 20px 22px; margin: 26px 0;
 border: 1.5px solid var(--danger-border); background: var(--danger-bg); color: var(--danger-ink);
}
.callout.warn{ border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); }
.callout .icon{ font-size:20px; }
.callout h3{ margin:0 0 8px; font-size:16px; display:flex; align-items:center; gap:8px; }
.callout p{ margin:0; font-size:14px; }
.callout ul{ margin:8px 0 0; padding-inline-start:20px; font-size:14px; }
.callout li{ margin-bottom:6px; }
section{ margin: 34px 0; }
section h2{ font-size:19px; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
section h2 .num{
 width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--bg);
 display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
section p, section li{ font-size:14.5px; color: #1a1a1a; }
section ul{ padding-inline-start:22px; margin:10px 0; }
section li{ margin-bottom:8px; }
.card{ border:1.5px solid var(--line); border-radius: var(--radius); padding:20px 22px; background:var(--bg); }
.tag{ display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); margin-inline-end:6px; }
.footer-note{ text-align:center; padding:40px 20px 10px; color:var(--muted-soft); font-size:12.5px; }
.divider{ height:1px; background:var(--line); margin:36px 0; border:none; }
/* mobile app shell */
.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; text-decoration:none; transition: all .15s ease; }
 .bn-item svg{ width:22px; height:22px; stroke: currentColor; fill:none; stroke-width:1.8; }
 .bn-item:active{ transform: scale(.92); }
 .topbar{ padding:14px 18px; }
}
@media (max-width:640px){ .topbar{ padding:14px 16px; } .page{ padding:0 14px 50px; } .hero h1{ font-size:23px; } }
/* ---------- 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">
 <a class="brand" href="index.html">
 <div class="brand-mark"></div>
 <div class="brand-name">ู†ูŠู‘ุฉ</div>
 </a>
 <a class="btn" href="index.html">ุฑุฌูˆุน ู„ู„ู…ู†ุตุฉ</a>
</div>
<div class="page">
<div class="hero">
 <h1>ู…ู† ู†ุญู†</h1>
 <p>"ู†ูŠู‘ุฉ" ู…ู†ุตุฉ ุชูˆุงุตู„ ุจุชู‚ุฑู‘ุจ ุฃุตุญุงุจ ุงู„ู…ุดุงุฑูŠุน ูˆุงู„ู…ุญู„ุงุช ุงู„ุตุบูŠุฑุฉ ู…ู† ู…ุณุชุซู…ุฑูŠู† ู…ู‡ุชู…ูŠู† โ€” ุจุฏูˆู† ูˆุณุงุทุฉ ู…ุงู„ูŠุฉุŒ ูˆุจุฏูˆู† ุชุนู‚ูŠุฏ.</p>
 </div>
<section>
 <h2><span class="num">1</span> ู„ูŠู‡ "ู†ูŠู‘ุฉ"ุŸ</h2>
 <div class="card">
 <p>ูƒุชูŠุฑ ู…ู† ุฃุตุญุงุจ ุงู„ู…ุญู„ุงุช ูˆุงู„ู…ุดุงุฑูŠุน ู…ุญุชุงุฌูŠู† ุชู…ูˆูŠู„ ุฃูˆ ุดุฑูŠูƒุŒ ู„ูƒู† ู…ุด ุนุงุฑููŠู† ูŠูˆุตู„ูˆุง ู„ู…ุณุชุซู…ุฑ ุฌุงุฏ. ูˆูƒุชูŠุฑ ู…ู† ุงู„ู…ุณุชุซู…ุฑูŠู† ุนุงูŠุฒูŠู† ูุฑุต ุญู‚ูŠู‚ูŠุฉ ู‚ุฑูŠุจุฉ ู…ู†ู‡ู… ู„ูƒู† ู…ุด ู„ุงู‚ูŠูŠู† ู…ูƒุงู† ู…ูˆุซูˆู‚ ูŠุดูˆููˆู‡ุง ููŠู‡. "ู†ูŠู‘ุฉ" ู‡ูŠ ุงู„ู…ูƒุงู† ุงู„ู„ูŠ ุจูŠุฌู…ุน ุงู„ุทุฑููŠู†ุŒ ูˆุจุนุฏ ูƒุฏู‡ ุงู„ุงุชูุงู‚ ุจูŠุชู… ู…ุจุงุดุฑุฉ ุจูŠู†ู‡ู….</p>
 </div>
 </section>
<section>
 <h2><span class="num">2</span> ุชูˆุงุตู„ ู…ุนุงู†ุง</h2>
 <div class="card">
 <p>ุนู†ุฏูƒ ุณุคุงู„ุŒ ู…ุดูƒู„ุฉ ุชู‚ู†ูŠุฉุŒ ุฃูˆ ุนุงูŠุฒ ุชุจู„ู‘ุบ ุนู† ุญุงุฌุฉุŸ</p>
 <p style="margin-top:12px;"><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 5h16v14H4z"/><path d="M4 6l8 7 8-7"/></svg> <a href="mailto:neya.app.eg@gmail.com" style="text-decoration:underline;">neya.app.eg@gmail.com</a></p>
 <p style="margin-top:8px;"><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"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg> ูˆุงุชุณุงุจ: <a href="https://wa.me/201100627772" style="text-decoration:underline;">01100627772</a></p>
 </div>
 </section>
<section>
 <h2><span class="num">3</span> ุงู„ู…ุฑุญู„ุฉ ุงู„ุญุงู„ูŠุฉ</h2>
 <div class="callout warn">
 <p>ุฅุญู†ุง ููŠ ู…ุฑุญู„ุฉ ุชุฌุฑูŠุจูŠุฉ (Proof of Concept) ู‚ุจู„ ุงู„ุชุณุฌูŠู„ ุงู„ุฑุณู…ูŠ. ู„ูˆ ุนู†ุฏูƒ ู…ู„ุงุญุธุฉ ุฃูˆ ุงู‚ุชุฑุงุญุŒ ุฅุญู†ุง ุณุงู…ุนูŠู†ูƒ โ€” ูƒู„ ููŠุฏุจุงูƒ ุจูŠุดูƒู‘ู„ ุดูƒู„ ุงู„ู…ู†ุตุฉ ุงู„ู‚ุงุฏู….</p>
 </div>
 </section>
<div class="footer-note">ยฉ ู†ูŠู‘ุฉ โ€” ู†ุณุฎุฉ ุชุฌุฑูŠุจูŠุฉ (Proof of Concept). ูƒู„ ุงู„ุญู‚ูˆู‚ ู…ุญููˆุธุฉ.</div>
</div>
<div class="bottom-nav" id="bottom-nav">
 <a class="bn-item" href="index.html"><svg viewBox="0 0 24 24"><path d="M12 3l9 8h-2v9h-5v-6H10v6H5v-9H3z"/></svg><span>ุงุณุชูƒุดู</span></a>
 <a class="bn-item" href="create.html"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg><span>ุงุนุฑุถ</span></a>
 <a class="bn-item active" href="about.html"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg><span>ุชูˆุงุตู„</span></a>
</div>
<script>
(function(){
 const nav = document.getElementById('bottom-nav');
 if(!nav) return;
 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 });
})();
</script>
</body>
</html>