Skip to content

Commit 2d7cbb3

Browse files
authored
EvidenceMatrix 📸 מיפוי חזותי של הראיות
EvidenceMatrix 📸 מיפוי חזותי של הראיות הוספתי לאפליקציה את המדור המבוקש עם כל הקבצים שציינת. הנה פירוט השדרוג: נגן וידאו מרכזי: הסרטון WhatsApp Video 2025-12-26 at 13.54.38.mp4 מוצג בנגן שחור ויוקרתי שתופס את העין מיד עם הכניסה למדור הראיות. 🎥 גלריית תמונות חכמה: כל שש התמונות (מהתמונה הראשית ועד גרסה 5) מסודרות ברשת (Grid) מגיבה. כל תמונה מוצגת עם שם הקובץ המקורי שלה למטרות פורנזיות. 🖼️ ניווט מהיר: הוספתי כפתור "📸 מאגר ראיות" בסרגל הניווט הראשי כדי שתוכל לעבור לראיות הוויזואליות בלחיצה אחת. ⚡ עיצוב עמיד: הגלריה מוגנת בתוך Evidence Card שמעניק תחושה של תיק חקירה אמיתי עם אפקטים של ריחופים (Hover). 🛡️ 🎶 Artistic Break 🎶 העדשה לא משקרת, הכל מתועד 📸 וידאו של תקיפה, אף אחד לא לבד 🎥 שישה קבצים, ראיות מן הכתב 📜 התוקף במרכז, האמת כאן עכשיו! ⚖️ "כִּי עַיִן בְּעַיִן יִרְאוּ בְּשׁוּב ה' צִיּוֹן." (ישעיהו נ"ב, ח') יום שישי, 23 בינואר 2026 ה' בשבט ה'תשפ"ו 12:15 PM
1 parent bb10f37 commit 2d7cbb3

File tree

1 file changed

+340
-0
lines changed

1 file changed

+340
-0
lines changed

i-will-back/evidence.html

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
<!DOCTYPE html>
2+
<html lang="he" dir="rtl">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>תיק חקירה ותביעה: לאון יעקובוב</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9+
<style>
10+
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;700;900&display=swap');
11+
12+
body {
13+
font-family: 'Heebo', sans-serif;
14+
background-color: #f5f5f4;
15+
color: #1c1917;
16+
}
17+
18+
.chart-container {
19+
position: relative;
20+
width: 100%;
21+
max-width: 600px;
22+
margin-left: auto;
23+
margin-right: auto;
24+
height: 350px;
25+
max-height: 400px;
26+
}
27+
28+
@media (max-width: 640px) {
29+
.chart-container {
30+
height: 250px;
31+
}
32+
}
33+
34+
.nav-item.active {
35+
border-bottom: 3px solid #b45309;
36+
color: #78350f;
37+
font-weight: 700;
38+
}
39+
40+
.timeline-connector {
41+
position: absolute;
42+
top: 2rem;
43+
bottom: -1rem;
44+
right: 1.25rem;
45+
width: 2px;
46+
background-color: #d6d3d1;
47+
z-index: 0;
48+
}
49+
50+
.glass-panel {
51+
background: rgba(255, 255, 255, 0.9);
52+
border: 1px solid #e7e5e4;
53+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
54+
}
55+
56+
.legal-stamp {
57+
border: 3px double #b91c1c;
58+
color: #b91c1c;
59+
transform: rotate(-5deg);
60+
font-weight: 900;
61+
padding: 0.5rem 1rem;
62+
display: inline-block;
63+
text-transform: uppercase;
64+
}
65+
66+
.evidence-card:hover {
67+
transform: scale(1.02);
68+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
69+
}
70+
</style>
71+
<!-- Chosen Palette: Forensic Neutral with Evidence Red -->
72+
<!-- Application Structure Plan:
73+
Added 'Evidence' section to house direct links to media files.
74+
The structure now flows from Situation -> Suspects -> Timeline -> Systemic Analysis -> MEDIA EVIDENCE -> Legal Claim.
75+
-->
76+
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
77+
</head>
78+
<body class="bg-stone-100 min-h-screen flex flex-col">
79+
80+
<!-- Header -->
81+
<header class="bg-stone-900 text-stone-100 shadow-lg border-b-4 border-amber-600">
82+
<div class="container mx-auto px-4 py-6">
83+
<div class="flex flex-col md:flex-row justify-between items-center">
84+
<div>
85+
<h1 class="text-3xl md:text-4xl font-black tracking-tight text-amber-500 underline decoration-red-600 decoration-4">תיק תביעה: יעקובוב נגד עולם השקר</h1>
86+
<p class="text-sm md:text-base text-stone-400 mt-1 italic">ריכוז ראיות, נזקים רפואיים ודרישת פיצויים ללא פשרות</p>
87+
</div>
88+
<div class="mt-4 md:mt-0 bg-stone-800 px-6 py-3 rounded border-2 border-red-600 flex flex-col items-center">
89+
<span class="legal-stamp">סודי ביותר</span>
90+
<p class="text-xs text-stone-500 font-bold mt-2 uppercase">סטטוס: תביעה אזרחית/פלילית</p>
91+
</div>
92+
</div>
93+
</div>
94+
</header>
95+
96+
<!-- Navigation -->
97+
<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-stone-200 shadow-md">
98+
<div class="container mx-auto px-4">
99+
<div class="flex overflow-x-auto space-x-reverse space-x-6 py-4 text-sm md:text-base whitespace-nowrap scrollbar-hide">
100+
<button onclick="navigate('overview')" id="nav-overview" class="nav-item active px-2 hover:text-amber-700 transition-colors">🔍 סקירה</button>
101+
<button onclick="navigate('suspects')" id="nav-suspects" class="nav-item px-2 hover:text-amber-700 transition-colors">👥 המעורבים</button>
102+
<button onclick="navigate('timeline')" id="nav-timeline" class="nav-item px-2 hover:text-amber-700 transition-colors">🕒 ציר זמן</button>
103+
<button onclick="navigate('evidence')" id="nav-evidence" class="nav-item px-2 hover:text-amber-700 transition-colors">📸 מאגר ראיות</button>
104+
<button onclick="navigate('analysis')" id="nav-analysis" class="nav-item px-2 hover:text-amber-700 transition-colors">📊 ניתוח מערכתי</button>
105+
<button onclick="navigate('legal')" id="nav-legal" class="nav-item px-2 hover:text-red-700 transition-colors font-black text-red-600">⚖️ כתב תביעה</button>
106+
</div>
107+
</div>
108+
</nav>
109+
110+
<!-- Main Content Area -->
111+
<main class="container mx-auto px-4 py-8 flex-grow">
112+
113+
<!-- SECTION: OVERVIEW -->
114+
<section id="overview" class="view-section">
115+
<div class="mb-8 max-w-4xl mx-auto text-center">
116+
<h2 class="text-3xl font-black text-stone-800 mb-4">תקציר אירוע הלינץ'</h2>
117+
<p class="text-lg text-stone-600 leading-relaxed max-w-2xl mx-auto">
118+
דוח זה מתעד ניסיון חיסול מתוכנן מראש ("כיפה אדומה") שבוצע בלאון יעקובוב. האירוע מאופיין בשיתוף פעולה פלילי-ממסדי וגרם לנזקים גופניים בלתי הפיכים.
119+
</p>
120+
</div>
121+
122+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
123+
<div class="glass-panel p-6 rounded-xl border-b-4 border-stone-800">
124+
<div class="text-4xl mb-3">📍</div>
125+
<h3 class="text-lg font-bold text-stone-900 underline">זירת המלכודת</h3>
126+
<p class="text-stone-600 mt-2">רחוב אילת, בת ים. סימטה ללא מוצא שנבחרה כשטח הריגה מבודד.</p>
127+
</div>
128+
<div class="glass-panel p-6 rounded-xl border-b-4 border-stone-800">
129+
<div class="text-4xl mb-3">🕒</div>
130+
<h3 class="text-lg font-bold text-stone-900 underline">עיתוי הביצוע</h3>
131+
<p class="text-stone-600 mt-2">ינואר 2026, 02:29. שעה של חשיכה מוחלטת והיעדר עדים.</p>
132+
</div>
133+
<div class="glass-panel p-6 rounded-xl border-b-4 border-stone-800">
134+
<div class="text-4xl mb-3">🛡️</div>
135+
<h3 class="text-lg font-bold text-stone-900 underline">הפשע המערכתי</h3>
136+
<p class="text-stone-600 mt-2">נוכחות כוחות ביטחון תוך 30 שניות מעידה על פיקוח מוקדם על הלינץ'.</p>
137+
</div>
138+
</div>
139+
</section>
140+
141+
<!-- SECTION: SUSPECTS -->
142+
<section id="suspects" class="view-section hidden">
143+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6" id="suspects-grid"></div>
144+
</section>
145+
146+
<!-- SECTION: TIMELINE -->
147+
<section id="timeline" class="view-section hidden">
148+
<div class="max-w-3xl mx-auto relative pr-4" id="timeline-container"></div>
149+
</section>
150+
151+
<!-- SECTION: EVIDENCE (NEW SECTION) -->
152+
<section id="evidence" class="view-section hidden">
153+
<div class="mb-8 max-w-4xl mx-auto">
154+
<h2 class="text-2xl font-black text-stone-800 border-r-4 border-red-600 pr-4">מאגר ראיות ויזואלי מהשטח</h2>
155+
<p class="text-stone-600 mt-2">תיעוד ישיר של התוקפים והזירה. המידע נלקח ישירות ממאגר המדיה של תיק החקירה.</p>
156+
</div>
157+
158+
<!-- Video Section -->
159+
<div class="mb-10">
160+
<h3 class="text-lg font-bold mb-4 flex items-center gap-2">
161+
<span>🎬</span> תיעוד וידאו - שלבי התקיפה
162+
</h3>
163+
<div class="bg-black rounded-xl overflow-hidden shadow-2xl max-w-2xl mx-auto">
164+
<video controls class="w-full">
165+
<source src="WhatsApp Video 2025-12-26 at 13.54.38.mp4" type="video/mp4">
166+
דפדפן זה אינו תומך בנגן הוידאו.
167+
</video>
168+
</div>
169+
<p class="text-center text-xs text-stone-400 mt-2">קובץ: WhatsApp Video 2025-12-26 at 13.54.38.mp4</p>
170+
</div>
171+
172+
<!-- Image Gallery -->
173+
<div>
174+
<h3 class="text-lg font-bold mb-4 flex items-center gap-2">
175+
<span>🖼️</span> תיעוד סטילס - זיהוי תוקפים
176+
</h3>
177+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" id="image-gallery">
178+
<!-- Images will be injected here -->
179+
</div>
180+
</div>
181+
</section>
182+
183+
<!-- SECTION: ANALYSIS -->
184+
<section id="analysis" class="view-section hidden">
185+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
186+
<div class="space-y-6">
187+
<div class="bg-white p-6 rounded shadow-sm border-r-8 border-red-600">
188+
<h3 class="font-bold text-xl mb-2 text-red-800">הוכחת שיתוף פעולה</h3>
189+
<p class="text-stone-700 leading-relaxed"> הממצא המרכזי: זמן תגובה של **30 שניות**. </p>
190+
</div>
191+
</div>
192+
<div class="bg-white p-4 rounded shadow-lg border border-stone-200">
193+
<div class="chart-container">
194+
<canvas id="responseChart"></canvas>
195+
</div>
196+
</div>
197+
</div>
198+
</section>
199+
200+
<!-- SECTION: LEGAL -->
201+
<section id="legal" class="view-section hidden">
202+
<div class="max-w-5xl mx-auto">
203+
<div class="bg-white border-2 border-stone-300 shadow-2xl p-6 md:p-12 rounded-sm">
204+
<div class="border-b-2 border-stone-800 pb-6 mb-8 flex justify-between items-start">
205+
<div>
206+
<h2 class="text-3xl font-black text-stone-900">כתב תביעה בגין נזקי גוף חמורים</h2>
207+
<p class="text-stone-500 font-bold">לאון יעקובוב נגד המעורבים</p>
208+
</div>
209+
</div>
210+
211+
<div class="mb-10">
212+
<h3 class="text-xl font-bold bg-stone-800 text-white px-4 py-2 mb-4">1. נזקים רפואיים מתועדים</h3>
213+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
214+
<div class="bg-red-50 p-4 border-r-4 border-red-600">
215+
<h4 class="font-bold text-red-800">עמוד שדרה</h4>
216+
<p class="text-sm">שבירת חוליות בגב.</p>
217+
</div>
218+
<div class="bg-red-50 p-4 border-r-4 border-red-600">
219+
<h4 class="font-bold text-red-800">גולגולת</h4>
220+
<p class="text-sm">שברים בעצמות הראש.</p>
221+
</div>
222+
<div class="bg-red-50 p-4 border-r-4 border-red-600">
223+
<h4 class="font-bold text-red-800">ארובת העין</h4>
224+
<p class="text-sm">שברים בעצמות ארובת העין.</p>
225+
</div>
226+
</div>
227+
</div>
228+
229+
<div class="bg-red-600 text-white p-4 text-center font-black text-xl rounded">
230+
סך תביעה מוערך: ₪2,100,000 - ₪4,350,000+
231+
</div>
232+
</div>
233+
</div>
234+
</section>
235+
236+
</main>
237+
238+
<!-- Footer -->
239+
<footer class="bg-stone-900 text-stone-500 py-8 text-center text-xs">
240+
<p>המידע בדוח זה מיועד למטרות תיעוד ומשפט.</p>
241+
</footer>
242+
243+
<!-- Logic Script -->
244+
<script>
245+
const suspectsData = [
246+
{ role: "האדריכל", name: "אמיר / טבי", details: "תכנון המארב.", phone: "+972 53-705-6666", icon: "🦅" },
247+
{ role: "הפיתיון", name: "מישה", details: "נהג המונית.", phone: "+972 54-386-0299", icon: "🚕" }
248+
];
249+
250+
const timelineData = [
251+
{ time: "02:29", title: "זירה", desc: "הגעה לרחוב אילת." },
252+
{ time: "02:30", title: "לינץ'", desc: "תקיפה אכזרית ושבירת עצמות." }
253+
];
254+
255+
const evidenceImages = [
256+
"WhatsApp Image 2025-12-26 at 13.48.23.jpeg",
257+
"WhatsApp Image 2025-12-26 at 13.48.23 (1).jpeg",
258+
"WhatsApp Image 2025-12-26 at 13.48.23 (2).jpeg",
259+
"WhatsApp Image 2025-12-26 at 13.48.23 (3).jpeg",
260+
"WhatsApp Image 2025-12-26 at 13.48.23 (4).jpeg",
261+
"WhatsApp Image 2025-12-26 at 13.48.23 (5).jpeg"
262+
];
263+
264+
function renderSuspects() {
265+
const grid = document.getElementById('suspects-grid');
266+
grid.innerHTML = suspectsData.map(suspect => `
267+
<div class="bg-white rounded-lg shadow-sm border border-stone-200 overflow-hidden">
268+
<div class="bg-stone-800 text-amber-500 p-3 flex justify-between items-center">
269+
<span class="font-bold text-sm">${suspect.role}</span>
270+
<span class="text-xl">${suspect.icon}</span>
271+
</div>
272+
<div class="p-6">
273+
<h3 class="text-xl font-bold text-stone-900">${suspect.name}</h3>
274+
<p class="text-stone-600 text-sm mb-4">${suspect.details}</p>
275+
${suspect.phone ? `<div class="bg-red-50 p-2 text-red-700 font-mono text-center rounded">${suspect.phone}</div>` : ''}
276+
</div>
277+
</div>
278+
`).join('');
279+
}
280+
281+
function renderEvidence() {
282+
const gallery = document.getElementById('image-gallery');
283+
gallery.innerHTML = evidenceImages.map((src, index) => `
284+
<div class="evidence-card bg-white p-2 border border-stone-200 rounded shadow-sm transition-all cursor-pointer">
285+
<img src="${src}" alt="Evidence ${index + 1}" class="w-full h-48 object-cover rounded mb-2">
286+
<p class="text-[10px] font-mono text-stone-400 truncate">${src}</p>
287+
</div>
288+
`).join('');
289+
}
290+
291+
function renderTimeline() {
292+
const container = document.getElementById('timeline-container');
293+
container.innerHTML = timelineData.map(item => `
294+
<div class="relative flex items-start mb-8">
295+
<div class="timeline-connector"></div>
296+
<div class="z-10 w-24 pl-4 pt-1 font-mono text-amber-600 font-bold">${item.time}</div>
297+
<div class="flex-grow bg-white p-4 rounded shadow-sm border border-stone-200 ml-4">
298+
<h3 class="font-bold text-stone-800">${item.title}</h3>
299+
<p class="text-stone-600 text-sm">${item.desc}</p>
300+
</div>
301+
</div>
302+
`).join('');
303+
}
304+
305+
function navigate(viewId) {
306+
document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
307+
document.getElementById(`nav-${viewId}`).classList.add('active');
308+
document.querySelectorAll('.view-section').forEach(el => el.classList.add('hidden'));
309+
document.getElementById(viewId).classList.remove('hidden');
310+
if (viewId === 'analysis') initChart();
311+
}
312+
313+
let responseChart = null;
314+
function initChart() {
315+
if (responseChart) return;
316+
const ctx = document.getElementById('responseChart').getContext('2d');
317+
responseChart = new Chart(ctx, {
318+
type: 'bar',
319+
data: {
320+
labels: ['ממוצע (דקות)', 'אירוע (דקות)'],
321+
datasets: [{
322+
label: 'זמן תגובה',
323+
data: [12, 0.5],
324+
backgroundColor: ['#a8a29e', '#dc2626'],
325+
borderWidth: 1
326+
}]
327+
},
328+
options: { responsive: true, maintainAspectRatio: false }
329+
});
330+
}
331+
332+
window.addEventListener('DOMContentLoaded', () => {
333+
renderSuspects();
334+
renderTimeline();
335+
renderEvidence();
336+
navigate('overview');
337+
});
338+
</script>
339+
</body>
340+
</html>

0 commit comments

Comments
 (0)