480 lines
18 KiB
HTML
480 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>المخطط المعماري الهندسي | منظومة المعالم التراثية والسيادية Siro Maps</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-base: #0a0f1d;
|
|
--bg-surface: #111827;
|
|
--bg-card: #1e293b;
|
|
--border-subtle: rgba(255, 255, 255, 0.08);
|
|
--border-accent: rgba(56, 189, 248, 0.3);
|
|
--text-primary: #f8fafc;
|
|
--text-secondary: #94a3b8;
|
|
--accent-cyan: #38bdf8;
|
|
--accent-emerald: #10b981;
|
|
--accent-gold: #f59e0b;
|
|
--accent-purple: #a855f7;
|
|
--accent-rose: #f43f5e;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-family: 'Tajawal', sans-serif;
|
|
line-height: 1.7;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1240px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 2.5rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.35rem 1rem;
|
|
background: rgba(56, 189, 248, 0.1);
|
|
color: var(--accent-cyan);
|
|
border: 1px solid rgba(56, 189, 248, 0.3);
|
|
border-radius: 9999px;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
font-weight: 900;
|
|
color: #ffffff;
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: 1.05rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.image-showcase {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.image-showcase h2 {
|
|
font-size: 1.3rem;
|
|
color: var(--accent-cyan);
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.image-frame {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-accent);
|
|
background: #000;
|
|
}
|
|
|
|
.image-frame img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.diagram-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.diagram-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 14px;
|
|
padding: 1.75rem;
|
|
position: relative;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.card.recommended {
|
|
border-color: var(--accent-emerald);
|
|
box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.15);
|
|
}
|
|
|
|
.card-tag {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.tag-alt {
|
|
background: rgba(148, 163, 184, 0.15);
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.tag-rec {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-emerald);
|
|
border: 1px solid rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.card p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.metric-list {
|
|
list-style: none;
|
|
margin-top: 1rem;
|
|
border-top: 1px solid var(--border-subtle);
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.metric-list li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.4rem 0;
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.metric-list li span:last-child {
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
direction: ltr;
|
|
}
|
|
|
|
.code-box {
|
|
direction: ltr;
|
|
text-align: left;
|
|
background: #0a0f1d;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.85rem;
|
|
color: #38bdf8;
|
|
overflow-x: auto;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.svg-section {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.svg-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 8px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #0284c7;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #0369a1;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #334155;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<div class="badge">ARCHITECTURAL BLUEPRINT & SYSTEM DESIGN</div>
|
|
<h1>المخطط المعماري لدمج منظومة المعالم والمسارات التراثية</h1>
|
|
<p class="subtitle">
|
|
تحليل المفاضلة الهندسية بين العزل في حاوية مستقلة والدمج المعياري في قاعدة البيانات، مع رسم بياني شامل لتدفق البيانات وتطبيق الموبايل.
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Visual Architecture Render -->
|
|
<div class="image-showcase">
|
|
<h2>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<path d="M21 15l-5-5L5 21"/>
|
|
</svg>
|
|
الرسم البياني التنفيذي للمعمارية (Executive System Architecture)
|
|
</h2>
|
|
<div class="image-frame">
|
|
<img src="/heritage-architecture.jpg" alt="Architecture Diagram: Dedicated Docker vs Modular Stack">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comparative Grid -->
|
|
<div class="diagram-grid">
|
|
<!-- Option A -->
|
|
<div class="card">
|
|
<span class="card-tag tag-alt">خيار بديل | Option A</span>
|
|
<h3>حاوية ميكروسيرفيس مستقلة (Dedicated Docker)</h3>
|
|
<p>
|
|
فصل المعالم التراثية ووزارة الثقافة في حاوية خاصة تماماً على منفذ شبكي مخصص مع قاعدة بيانات أو استعلامات مفصولة.
|
|
</p>
|
|
|
|
<div class="code-box">
|
|
services:
|
|
map-heritage:
|
|
image: node:20-alpine
|
|
container_name: map-heritage
|
|
ports: ["3205:3205"]
|
|
deploy:
|
|
resources:
|
|
limits:
|
|
memory: 300m
|
|
</div>
|
|
|
|
<ul class="metric-list">
|
|
<li>
|
|
<span>استهلاك الذاكرة الإضافي (Server RAM):</span>
|
|
<span style="color: var(--accent-rose);">+250MB to 350MB</span>
|
|
</li>
|
|
<li>
|
|
<span>العزل التشغيلي (Fault Isolation):</span>
|
|
<span style="color: var(--accent-emerald);">مطلق (100%)</span>
|
|
</li>
|
|
<li>
|
|
<span>الربط المكاني بشبكة الطرق (Spatial Joins):</span>
|
|
<span style="color: var(--accent-gold);">عبر واجهة برمجة (أبطأ)</span>
|
|
</li>
|
|
<li>
|
|
<span>جاهزية التسليم للوزارة (On-Premise Handover):</span>
|
|
<span style="color: var(--accent-emerald);">فورية بحاوية جاهزة</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Option B (Recommended) -->
|
|
<div class="card recommended">
|
|
<span class="card-tag tag-rec">الخيار الموصى به هندسياً | Option B</span>
|
|
<h3>المخطط المعزول والوحدة المعيارية (Modular Schema)</h3>
|
|
<p>
|
|
إنشاء مخطط مستقل داخل قاعدة البيانات الحالية، مع وحدة معزولة بالكامل داخل الخادم، والاستفادة المباشرة من خادم البلاطات.
|
|
</p>
|
|
|
|
<div class="code-box">
|
|
PostGIS:
|
|
Schema: "heritage" (Landmarks, Trails, Gates)
|
|
Schema: "public" (OSM Roads, Buildings)
|
|
Martin:
|
|
Exposes "heritage.*" directly as MVT tiles
|
|
NestJS:
|
|
Imports: [HeritageModule] (/api/v1/heritage/*)
|
|
</div>
|
|
|
|
<ul class="metric-list">
|
|
<li>
|
|
<span>استهلاك الذاكرة الإضافي (Server RAM):</span>
|
|
<span style="color: var(--accent-emerald);">~ 0 MB (نفس العمليات الحالية)</span>
|
|
</li>
|
|
<li>
|
|
<span>العزل التشغيلي (Fault Isolation):</span>
|
|
<span style="color: var(--accent-emerald);">معزول منطقياً بمسارات مستقلة</span>
|
|
</li>
|
|
<li>
|
|
<span>الربط المكاني بشبكة الطرق (Spatial Joins):</span>
|
|
<span style="color: var(--accent-emerald);">فائق السرعة (Sub-millisecond)</span>
|
|
</li>
|
|
<li>
|
|
<span>بث البلاطات للتطبيق (Tile Server):</span>
|
|
<span style="color: var(--accent-emerald);">مباشر عبر خادم مارتن دون كود إضافي</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive SVG Architecture Vector -->
|
|
<div class="svg-section">
|
|
<h2 style="font-size: 1.3rem; color: var(--accent-cyan); margin-bottom: 1.5rem;">
|
|
مخطط تدفق البيانات والمكونات المكانية (Detailed Component Data Flow)
|
|
</h2>
|
|
|
|
<div class="svg-container">
|
|
<svg width="1050" height="520" viewBox="0 0 1050 520" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background Grid Pattern -->
|
|
<rect width="1050" height="520" rx="12" fill="#0c1322"/>
|
|
<path d="M0 60 H1050 M0 120 H1050 M0 180 H1050 M0 240 H1050 M0 300 H1050 M0 360 H1050 M0 420 H1050 M0 480 H1050" stroke="#1e293b" stroke-width="0.75" stroke-dasharray="3 3"/>
|
|
<path d="M70 0 V520 M140 0 V520 M210 0 V520 M280 0 V520 M350 0 V520 M420 0 V520 M490 0 V520 M560 0 V520 M630 0 V520 M700 0 V520 M770 0 V520 M840 0 V520 M910 0 V520 M980 0 V520" stroke="#1e293b" stroke-width="0.75" stroke-dasharray="3 3"/>
|
|
|
|
<!-- Client Layer (Flutter Mobile App) -->
|
|
<rect x="50" y="80" width="220" height="360" rx="10" fill="#172033" stroke="#38bdf8" stroke-width="2"/>
|
|
<text x="160" y="115" fill="#38bdf8" font-size="14" font-weight="bold" font-family="'JetBrains Mono', monospace" text-anchor="middle">CLIENT APP (FLUTTER)</text>
|
|
<text x="160" y="135" fill="#94a3b8" font-size="12" text-anchor="middle">Siro Maps / Siro Maps</text>
|
|
|
|
<rect x="70" y="160" width="180" height="48" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
|
<text x="160" y="188" fill="#f8fafc" font-size="12" font-weight="600" text-anchor="middle">Tactical Heritage Layer</text>
|
|
|
|
<rect x="70" y="225" width="180" height="48" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
|
<text x="160" y="253" fill="#f8fafc" font-size="12" font-weight="600" text-anchor="middle">Audio Geofence Trigger</text>
|
|
|
|
<rect x="70" y="290" width="180" height="48" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
|
<text x="160" y="318" fill="#f8fafc" font-size="12" font-weight="600" text-anchor="middle">Gate / Parking Nav</text>
|
|
|
|
<rect x="70" y="355" width="180" height="60" rx="6" fill="#10b981" fill-opacity="0.1" stroke="#10b981" stroke-width="1"/>
|
|
<text x="160" y="380" fill="#10b981" font-size="11" font-weight="bold" text-anchor="middle">Offline Heritage Store</text>
|
|
<text x="160" y="400" fill="#94a3b8" font-size="10" font-family="'JetBrains Mono', monospace" text-anchor="middle">Cache-First (Hive/SQLite)</text>
|
|
|
|
<!-- Middle Layer: Martin & NestJS -->
|
|
<!-- Martin Tile Server -->
|
|
<rect x="360" y="80" width="280" height="150" rx="10" fill="#172033" stroke="#a855f7" stroke-width="2"/>
|
|
<text x="500" y="115" fill="#a855f7" font-size="14" font-weight="bold" font-family="'JetBrains Mono', monospace" text-anchor="middle">MARTIN TILE SERVER (:3202)</text>
|
|
<text x="500" y="135" fill="#94a3b8" font-size="11" text-anchor="middle">Ultra-Fast Rust Vector Engine (MVT)</text>
|
|
<rect x="380" y="150" width="240" height="60" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
|
<text x="500" y="175" fill="#e2e8f0" font-size="12" font-family="'JetBrains Mono', monospace" text-anchor="middle">/heritage.landmarks/{z}/{x}/{y}</text>
|
|
<text x="500" y="195" fill="#10b981" font-size="11" text-anchor="middle">Direct Streaming Without Node.js</text>
|
|
|
|
<!-- NestJS API Gateway -->
|
|
<rect x="360" y="270" width="280" height="170" rx="10" fill="#172033" stroke="#10b981" stroke-width="2"/>
|
|
<text x="500" y="305" fill="#10b981" font-size="14" font-weight="bold" font-family="'JetBrains Mono', monospace" text-anchor="middle">NESTJS BACKEND (:3200)</text>
|
|
<text x="500" y="325" fill="#94a3b8" font-size="11" text-anchor="middle">apps/api with Clean Modular Architecture</text>
|
|
<rect x="380" y="340" width="240" height="40" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="500" y="365" fill="#38bdf8" font-size="12" font-family="'JetBrains Mono', monospace" text-anchor="middle">MapsModule & GraphHopper (Core)</text>
|
|
<rect x="380" y="388" width="240" height="40" rx="6" fill="#10b981" fill-opacity="0.15" stroke="#10b981" stroke-width="1"/>
|
|
<text x="500" y="413" fill="#10b981" font-size="12" font-family="'JetBrains Mono', monospace" text-anchor="middle">HeritageModule (/api/v1/heritage/*)</text>
|
|
|
|
<!-- Database Layer: PostGIS -->
|
|
<rect x="730" y="80" width="270" height="360" rx="10" fill="#172033" stroke="#f59e0b" stroke-width="2"/>
|
|
<text x="865" y="115" fill="#f59e0b" font-size="14" font-weight="bold" font-family="'JetBrains Mono', monospace" text-anchor="middle">POSTGIS DATABASE (:5432)</text>
|
|
<text x="865" y="135" fill="#94a3b8" font-size="11" text-anchor="middle">Container: map-db</text>
|
|
|
|
<!-- Isolated Schema: heritage -->
|
|
<rect x="750" y="160" width="230" height="110" rx="8" fill="#10b981" fill-opacity="0.1" stroke="#10b981" stroke-width="1.5"/>
|
|
<text x="865" y="185" fill="#10b981" font-size="12" font-weight="bold" font-family="'JetBrains Mono', monospace" text-anchor="middle">SCHEMA: heritage</text>
|
|
<text x="865" y="210" fill="#e2e8f0" font-size="11" text-anchor="middle">heritage.landmarks (Centroid, Gate, Parking)</text>
|
|
<text x="865" y="230" fill="#e2e8f0" font-size="11" text-anchor="middle">heritage.trails (MultiLineString)</text>
|
|
<text x="865" y="250" fill="#e2e8f0" font-size="11" text-anchor="middle">heritage.thesaurus (75K Terms)</text>
|
|
|
|
<!-- Public Schema -->
|
|
<rect x="750" y="290" width="230" height="130" rx="8" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
|
<text x="865" y="315" fill="#cbd5e1" font-size="12" font-weight="bold" font-family="'JetBrains Mono', monospace" text-anchor="middle">SCHEMA: public (CORE)</text>
|
|
<text x="865" y="340" fill="#94a3b8" font-size="11" text-anchor="middle">planet_osm_roads (Routing)</text>
|
|
<text x="865" y="360" fill="#94a3b8" font-size="11" text-anchor="middle">places_jordan (Geocoding)</text>
|
|
<text x="865" y="380" fill="#94a3b8" font-size="11" text-anchor="middle">admin_boundaries (Districts)</text>
|
|
<text x="865" y="402" fill="#38bdf8" font-size="10" font-weight="bold" text-anchor="middle">Spatial Query: ST_DWithin(roads, gate)</text>
|
|
|
|
<!-- Connecting Arrows -->
|
|
<!-- Flutter to Martin (Vector Tiles) -->
|
|
<path d="M270 184 L360 155" stroke="#a855f7" stroke-width="2" stroke-dasharray="4 4"/>
|
|
<!-- Flutter to NestJS (API & Metadata) -->
|
|
<path d="M270 314 L360 380" stroke="#10b981" stroke-width="2"/>
|
|
<!-- Martin to PostGIS -->
|
|
<path d="M640 155 L750 190" stroke="#a855f7" stroke-width="2"/>
|
|
<!-- NestJS HeritageModule to PostGIS heritage schema -->
|
|
<path d="M640 408 L750 240" stroke="#10b981" stroke-width="2"/>
|
|
<!-- NestJS Core to PostGIS public schema -->
|
|
<path d="M640 360 L750 340" stroke="#38bdf8" stroke-width="2"/>
|
|
|
|
<!-- Footer Status Indicator -->
|
|
<circle cx="80" cy="485" r="5" fill="#10b981"/>
|
|
<text x="95" y="489" fill="#10b981" font-size="11" font-weight="bold">ISOLATION VERIFIED: Core Routing Never Blocked by Heritage Operations</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation & Links -->
|
|
<div class="action-bar">
|
|
<a href="/siro-maps.html" class="btn btn-secondary">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
|
العودة إلى بوابة Siro Maps
|
|
</a>
|
|
<a href="/heritage-memo.html" class="btn btn-primary">
|
|
المذكرة الاستراتيجية والتنفيذية
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|