Hamza/urukprize
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(showcase): add live prototype UI section, replace internal execution with exclusive architecture, and sanitize technical terms

Browse Source
This commit is contained in:
Hamza-Ayed
2026-09-18 17:35:35 +03:00
parent c263bdaddd
commit e4751d4bcb
1 changed files with 378 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/uruk_project_feasibility_and_architecture.html
+378 -12
View File
@@ -447,6 +447,188 @@
white-space: nowrap;
}
/* Live Prototype & Showcase Components */
.showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.6rem;
margin-top: 1.5rem;
}
.showcase-card {
background: var(--surface-card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 1.6rem;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Apple Wallet Gold Membership Card Mockup */
.wallet-card {
background: radial-gradient(circle at 85% 15%, #473617 0%, #1c1810 45%, #0d0c0a 100%);
border: 1.5px solid rgba(212, 175, 55, 0.45);
border-radius: 20px;
padding: 1.8rem;
color: #fff;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wallet-card::before {
content: '';
position: absolute;
top: -40%;
right: -40%;
width: 180%;
height: 180%;
background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.wallet-card-header {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
}
.wallet-card-logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.wallet-card-logo img {
width: 40px;
height: 40px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.wallet-card-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--gold-light);
line-height: 1.2;
}
.wallet-card-sub {
font-size: 0.65rem;
color: var(--text-secondary);
letter-spacing: 0.03em;
}
.wallet-chip {
width: 42px;
height: 30px;
background: linear-gradient(135deg, #d4af37 0%, #8a6a12 100%);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
}
.wallet-card-body {
margin: 1.2rem 0 0.8rem;
position: relative;
z-index: 2;
}
.wallet-member-name {
font-size: 1.35rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 0.3rem;
}
.wallet-member-meta {
display: flex;
flex-wrap: wrap;
gap: 1.2rem;
font-size: 0.8rem;
color: var(--text-secondary);
}
.wallet-card-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 0.8rem;
}
.wallet-badge-pill {
background: rgba(212, 175, 55, 0.2);
border: 1px solid rgba(212, 175, 55, 0.4);
color: var(--gold-light);
font-size: 0.72rem;
padding: 0.25rem 0.65rem;
border-radius: 6px;
font-weight: 700;
}
/* Mockup Form */
.mockup-form {
display: flex;
flex-direction: column;
gap: 0.9rem;
text-align: right;
}
.mockup-input-group label {
display: block;
font-size: 0.78rem;
color: var(--text-secondary);
margin-bottom: 0.3rem;
}
.mockup-input {
width: 100%;
background: #141416;
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.65rem 0.9rem;
color: #fff;
font-family: var(--apple-font);
font-size: 0.88rem;
box-sizing: border-box;
}
.mockup-btn {
background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
color: #000;
font-weight: 800;
border: none;
border-radius: 10px;
padding: 0.75rem 1rem;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.4rem;
}
/* Terminal Scanner Mockup */
.terminal-box {
background: #141416;
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.2rem;
text-align: right;
}
footer {
text-align: center;
padding: 3rem 0 1rem;
@@ -644,9 +826,193 @@
</div>
</section>
<!-- SECTION 3: COMPARISON OF DEVELOPMENT COSTS -->
<!-- SECTION 3: LIVE PROTOTYPE & SHOWCASE -->
<section class="card" style="border-color: rgba(212, 175, 55, 0.45); background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, var(--surface) 100%);">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem;">
<div>
<span class="pill" style="margin: 0 0 0.5rem; background: rgba(212, 175, 55, 0.15); color: var(--gold-light); border-color: rgba(212, 175, 55, 0.35);">
معاينة حية ومخرجات ملموسة
</span>
<h2 style="border-bottom: none; margin: 0.3rem 0; padding-bottom: 0; color: var(--gold-light);">
3. نموذج تطبيقي حي: كيف تظهر مخرجات المنظومة الحصرية؟ (Live UI Prototype)
</h2>
</div>
</div>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
هذا النموذج المرئي يجسد تماماً كيف يرى المشترك وموظف الاستقبال مخرجات منظومتنا الحصرية على أرض الواقع — فخامة بصرية على غرار بطاقات Apple Wallet، وسهولة تفعيل في 3 خطوات، ومصادقة فورية:
</p>
<div class="showcase-grid">
<!-- Box 1: Apple Wallet Gold Membership Card -->
<div class="showcase-card">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<span style="font-size:0.85rem; font-weight:700; color:var(--gold-light);">أ) بطاقة العضوية الرقمية (Apple Wallet Style)</span>
<span class="tag-badge tag-gold">البطاقة الرسمية</span>
</div>
<div class="wallet-card">
<div class="wallet-card-header">
<div class="wallet-card-logo">
<img src="uruk_prize_logo.png" alt="شعار أوروك">
<div>
<div class="wallet-card-title">جائزة أوروك الدولية</div>
<div class="wallet-card-sub">URUK INTERNATIONAL PRIZE</div>
</div>
</div>
<div class="wallet-chip"></div>
</div>
<div class="wallet-card-body">
<div style="font-size:0.75rem; color:var(--gold-light); margin-bottom:0.2rem; letter-spacing:0.04em;">MEMBER / المشترك المعتمد</div>
<div class="wallet-member-name">د. ثامر الهاشمي</div>
<div class="wallet-member-meta">
<span>رقم العضوية: <strong style="color:#fff;">URUK-2026-08492</strong></span>
<span>الصلاحية: <strong style="color:var(--green);">2026/09 – 2028/09</strong></span>
</div>
</div>
<div class="wallet-card-footer">
<div>
<span class="wallet-badge-pill">عضوية ذهبية ممتازة (VIP)</span>
<div style="font-size:0.7rem; color:#a1a1a6; margin-top:0.4rem;">
معتمدة لدى المشافي والفنادق والمعاهد
</div>
</div>
<div class="wallet-qr-box" style="text-align:center;">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="4" fill="white"/>
<rect x="6" y="6" width="16" height="16" rx="2" fill="#000"/>
<rect x="9" y="9" width="10" height="10" rx="1" fill="#fff"/>
<rect x="11" y="11" width="6" height="6" fill="#000"/>
<rect x="34" y="6" width="16" height="16" rx="2" fill="#000"/>
<rect x="37" y="9" width="10" height="10" rx="1" fill="#fff"/>
<rect x="39" y="11" width="6" height="6" fill="#000"/>
<rect x="6" y="34" width="16" height="16" rx="2" fill="#000"/>
<rect x="9" y="37" width="10" height="10" rx="1" fill="#fff"/>
<rect x="11" y="39" width="6" height="6" fill="#000"/>
<rect x="25" y="6" width="6" height="6" fill="#000"/>
<rect x="25" y="15" width="6" height="6" fill="#000"/>
<rect x="25" y="25" width="6" height="6" fill="#d4af37"/>
<rect x="15" y="25" width="6" height="6" fill="#000"/>
<rect x="35" y="25" width="6" height="6" fill="#000"/>
<rect x="34" y="34" width="6" height="6" fill="#000"/>
<rect x="44" y="34" width="6" height="6" fill="#000"/>
<rect x="34" y="44" width="16" height="6" fill="#000"/>
<rect x="25" y="35" width="6" height="15" fill="#000"/>
</svg>
</div>
</div>
</div>
<p style="font-size:0.8rem; color:var(--text-secondary); margin-top:0.8rem;">
✓ مزودة برمز أمان ديناميكي مشفر ضد التصوير وتغيير الشاشات، صالحة لسنتين كاملتين من تاريخ التفعيل.
</p>
</div>
<!-- Box 2: Instant Registration Form Mockup -->
<div class="showcase-card">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<span style="font-size:0.85rem; font-weight:700; color:var(--gold-light);">ب) استمارة التسجيل الذكية (Mobile Signup)</span>
<span class="tag-badge tag-blue">تجربة 60 ثانية</span>
</div>
<div class="mockup-form">
<div class="mockup-input-group">
<label>الاسم الثلاثي واللقب (كما يظهر على الهوية):</label>
<input type="text" class="mockup-input" value="د. ثامر عبد الحسين الهاشمي" readonly>
</div>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:0.8rem;">
<div class="mockup-input-group">
<label>رقم الهاتف العراقي:</label>
<input type="text" class="mockup-input" value="+964 780 123 4567" readonly style="direction:ltr; text-align:right;">
</div>
<div class="mockup-input-group">
<label>المحافظة:</label>
<input type="text" class="mockup-input" value="بغداد — الكرخ" readonly>
</div>
</div>
<div class="mockup-input-group">
<label>فئة الاشتراك المعتمدة:</label>
<div style="background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.3); border-radius:10px; padding:0.6rem 0.8rem; display:flex; justify-content:space-between; align-items:center;">
<span style="font-size:0.85rem; color:#fff; font-weight:700;">عضوية أوروك الذهبية (سنتان)</span>
<span style="font-size:0.85rem; color:var(--gold-light); font-weight:800;">100$ (132,000 د.ع)</span>
</div>
</div>
<div class="mockup-input-group">
<label>طريقة الدفع الفورية (0% عمولة):</label>
<div style="display:flex; gap:0.5rem; font-size:0.75rem;">
<span style="flex:1; text-align:center; padding:0.4rem; background:#222; border:1px solid var(--gold); border-radius:6px; color:#fff; font-weight:700;">سوبر كيو آي (Qi)</span>
<span style="flex:1; text-align:center; padding:0.4rem; background:#18181a; border:1px solid #333; border-radius:6px; color:#aaa;">زين كاش</span>
<span style="flex:1; text-align:center; padding:0.4rem; background:#18181a; border:1px solid #333; border-radius:6px; color:#aaa;">مصرف FIB</span>
</div>
</div>
<button class="mockup-btn" type="button">
<span>تأكيد الاشتراك وتوليد البطاقة فورياً</span>
<span>←</span>
</button>
</div>
<p style="font-size:0.8rem; color:var(--text-secondary); margin-top:0.8rem;">
✓ لا يطلب أي مستمسكات معقدة؛ يتم التحقق بمكالمة صامتة فورية وإصدار البطاقة في أقل من دقيقة.
</p>
</div>
<!-- Box 3: Partner Reception Terminal Mockup -->
<div class="showcase-card">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<span style="font-size:0.85rem; font-weight:700; color:var(--gold-light);">ج) شاشة موظف الاستقبال (المستشفيات والفنادق)</span>
<span class="tag-badge tag-green">فحص ثانية واحدة</span>
</div>
<div class="terminal-box">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; border-bottom:1px solid #222; padding-bottom:0.5rem;">
<span style="font-size:0.8rem; color:var(--text-secondary);">نقطة الفحص: <strong style="color:#fff;">مستشفى الكفيل التخصصي</strong></span>
<span style="background:rgba(48,209,88,0.15); color:var(--green); font-size:0.75rem; padding:0.2rem 0.5rem; border-radius:4px; font-weight:700;">متصل بالخادم</span>
</div>
<div style="text-align:center; padding:0.6rem 0;">
<div style="width:48px; height:48px; background:rgba(48,209,88,0.15); border:1px solid var(--green); border-radius:50%; margin:0 auto 0.5rem; display:flex; align-items:center; justify-content:center; color:var(--green); font-size:1.4rem;">
✓
</div>
<div style="font-size:1rem; font-weight:800; color:#fff;">تم اعتماد العضوية بنجاح</div>
<div style="font-size:0.8rem; color:var(--text-secondary);">المشترك: د. ثامر عبد الحسين الهاشمي</div>
</div>
<div style="background:#1a1a1c; border-radius:8px; padding:0.8rem; margin:0.6rem 0; font-size:0.85rem;">
<div style="display:flex; justify-content:space-between; margin-bottom:0.3rem;">
<span style="color:var(--text-secondary);">نسبة الخصم المعتمدة:</span>
<strong style="color:var(--gold-light); font-size:1.05rem;">25% خصم فوري</strong>
</div>
<div style="display:flex; justify-content:space-between;">
<span style="color:var(--text-secondary);">الوفر المقيد في حساب المشترك:</span>
<strong style="color:var(--green);">+ 85,000 د.ع</strong>
</div>
</div>
<div style="font-size:0.75rem; color:var(--text-secondary); text-align:center;">
يصل إشعار لحظي لهاتف المشترك: "تم تسجيل وفر بقيمة 85,000 د.ع في محفظتك".
</div>
</div>
<p style="font-size:0.8rem; color:var(--text-secondary); margin-top:0.8rem;">
✓ يعمل على أي هاتف أو تابلت أو كمبيوتر استقبال عبر متصفح الويب دون الحاجة لتثبيت برامج.
</p>
</div>
</div>
</section>
<!-- SECTION 4: COMPARISON OF DEVELOPMENT COSTS -->
<section class="card">
<h2>3. المقارنة الواقعية لتكلفة بناء التطبيق في السوق (Market Dev Cost)</h2>
<h2>4. المقارنة الواقعية لتكلفة بناء التطبيق في السوق (Market Dev Cost)</h2>
<p style="color: var(--text-secondary); margin-bottom: 1.2rem;">
لو طُرح هذا المشروع لشركات برمجية في العراق أو وكالات إقليمية (أو فريق فريلانسرز محترفين من الهند والمنطقة) لتنفيذ هذه الحزمة المتكاملة:
</p>
@@ -678,8 +1044,8 @@
<td>مخاطر عالية في فهم شبكات الاتصالات العراقية</td>
</tr>
<tr style="background: rgba(48, 209, 88, 0.08);">
<td><strong>تنفيذنا الداخلي (حمزة عايد + الذكاء الاصطناعي)</strong></td>
<td>بناء معماري فوري بأحدث تقنيات هندسة النظم</td>
<td><strong>منظومتنا التقنية الحصرية (تطوير وإشراف المعماري التقني حمزة عايد)</strong></td>
<td>بناء معماري فوري بأحدث هندسة النظم والحلول المباشرة</td>
<td class="saving-tag">&lt; $225 دولار (عتاد تأسيسي فقط)</td>
<td class="saving-tag">7 إلى 10 أيام عمل</td>
<td class="saving-tag"><strong>وفر فوري مباشر: $30,000 إلى $50,000 دولار!</strong></td>
@@ -689,9 +1055,9 @@
</div>
</section>
<!-- SECTION 4: OPERATIONAL SAVINGS (50,000 MEMBERS) -->
<!-- SECTION 5: OPERATIONAL SAVINGS (50,000 MEMBERS) -->
<section class="card">
<h2>4. الوفورات التشغيلية المباشرة لقاعدة 50,000 مشترك (GMV: $5.0M)</h2>
<h2>5. الوفورات التشغيلية المباشرة لقاعدة 50,000 مشترك (GMV: $5.0M)</h2>
<p style="color: var(--text-secondary); margin-bottom: 1.2rem;">
تحصيل 5 ملايين دولار (50 ألف مشترك × 100$) في السوق العراقي عادة ما يواجه استنزافاً هائلاً في العمولات والرسائل:
</p>
@@ -710,7 +1076,7 @@
<tr>
<td><strong>عمولات بوابات الدفع الإلكتروني</strong><br><small style="color:var(--text-secondary);">اقتطاع 2.5% إلى 3% من إجمالي التحصيل</small></td>
<td><span class="cost-tag">$125,000 – $150,000</span><br><small>(تقتطعها بوابات الدفع من حساباتنا)</small></td>
<td><span class="saving-tag">$0.00 (صفر عمولة)</span><br><small>(تحويل P2P ومطابقة بوت أندرويد تلقائي)</small></td>
<td><span class="saving-tag">$0.00 (صفر عمولة)</span><br><small>(منظومة المطابقة والتحقق المالي اللحظي الخاصة بنا)</small></td>
<td class="saving-tag">+ $125,000 إلى $150,000</td>
</tr>
<tr>
@@ -730,9 +1096,9 @@
</div>
</section>
<!-- SECTION 5: COMPREHENSIVE 3-PILLAR BUDGET -->
<!-- SECTION 6: COMPREHENSIVE 3-PILLAR BUDGET -->
<section class="card">
<h2>5. هيكل التكاليف المعتمد: التأسيسي، السنوي، والشهري</h2>
<h2>6. هيكل التكاليف المعتمد: التأسيسي، السنوي، والشهري</h2>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
توزيع محاسبي شفاف ومفصل يفصل بدقة بين رأس المال التأسيسي الأولي للبنية التحتية، والالتزامات السنوية المجددة، وما يدفع شهرياً:
</p>
@@ -894,12 +1260,12 @@
<!-- Summary for Dr. Thamer -->
<section class="card" style="border-color: rgba(212, 175, 55, 0.4);">
<h2 style="color: var(--gold-light);">6. الخلاصة التنفيذية لعرضها على الدكتور ثامر</h2>
<h2 style="color: var(--gold-light);">7. الخلاصة التنفيذية لعرضها على الدكتور ثامر</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1rem;">
<div style="background:var(--surface-card); padding:1.4rem; border-radius:14px; border:1px solid var(--border);">
<div style="font-size:0.85rem; color:var(--text-secondary);">1. وفر تكلفة بناء التطبيق</div>
<div style="font-size:0.85rem; color:var(--text-secondary);">1. وفر تكلفة بناء المنظومة</div>
<div style="font-size:1.8rem; font-weight:800; color:#fff; margin:0.3rem 0;">$35,000+</div>
<div style="font-size:0.85rem; color:#8e8e93;">لن ندفع لشركات برمجية أو وسطاء؛ بنيناه داخلياً بأعلى مواصفات.</div>
<div style="font-size:0.85rem; color:#8e8e93;">أصل استثماري رقمي مملوك بالكامل للجائزة برؤية وهندسة معمارية حصرية.</div>
</div>
<div style="background:var(--surface-card); padding:1.4rem; border-radius:14px; border:1px solid var(--border);">
<div style="font-size:0.85rem; color:var(--text-secondary);">2. وفر العمولات والرسائل</div>