Acil durum krokisi yapmak için bir HTML projesi

Anonim kullanıcı27 Ağustos 20266 dk okumaİçerik kontrolü: 26 Ağustos 2026

Kısa cevap

SVG tabanlı, tek dosyalık HTML/CSS/JavaScript projesi acil durum krokisi için en uygun başlangıçtır: oda, çıkış ve yangın tüpü işaretleri eklenip sürüklenebilir, plan yazdırılabilir. Aşağıdaki örnek çalışır durumdadır; ancak gerçek bina planı ve güvenlik işaretleri yetkili kişilerce doğrulanmadan kullanılmamalıdır.

Konseyin değerlendirmesi

SVG, vektörel olduğu için yakınlaştırma ve baskıda netliğini korur; Canvas ise serbest çizim aracı gerektiğinde daha uygundur. Aşağıdaki tek dosya, oda, acil çıkış ve yangın tüpü ekleme; nesneleri fare veya dokunmatik işaretçiyle sürükleme; temizleme ve yazdırma işlevlerini içerir. Dosyayı index.html adıyla kaydedip tarayıcıda açın.

HTML

<!doctype html>
<html lang="tr">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Acil Durum Krokisi</title>
 <style>
 * { box-sizing: border-box; }
 body { margin: 0; font-family: Arial, sans-serif; background: #edf1f3; color: #17202a; }
 header { padding: 16px; text-align: center; color: #fff; background: #b71c1c; }
 header h1, header p { margin: 4px; }.toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; background: #fff; }
 button { border: 0; border-radius: 5px; padding: 10px 14px; color: #fff; font-weight: bold; cursor: pointer; }
 button:hover { opacity:.86; }.room { background: #1976d2; }.exit { background: #2e7d32; }.fire { background: #d32f2f; }.clear { background: #455a64; }.print { background: #6a1b9a; }
 main { max-width: 1100px; margin: 20px auto; padding: 0 12px; }
 svg { display: block; width: 100%; min-height: 600px; background: #fff; border: 3px solid #263238; }.legend { margin-top: 12px; padding: 12px; background: #fff; border-radius: 6px; }.legend span { display: inline-block; margin: 4px 18px 4px 0; }.box { display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; border: 1px solid #222; }.hint { color: #46515a; }.item { cursor: move; touch-action: none; }
 @media print {
 header,.toolbar,.legend { display: none; }
 body, main { margin: 0; padding: 0; background: #fff; }
 svg { border: 2px solid #000; }
 }
 </style>
</head>
<body>
 <header>
 <h1>Acil Durum Krokisi</h1>
 <p>Kaçış yolları ve acil durum ekipmanları için taslak</p>
 </header>

 <div class="toolbar" aria-label="Kroki araçları">
 <button class="room" type="button" onclick="addRoom()">Oda ekle</button>
 <button class="exit" type="button" onclick="addExit()">Acil çıkış ekle</button>
 <button class="fire" type="button" onclick="addExtinguisher()">Yangın tüpü ekle</button>
 <button class="clear" type="button" onclick="clearPlan()">Temizle</button>
 <button class="print" type="button" onclick="window.print()">Yazdır / PDF</button>
 </div>

 <main>
 <svg id="plan" viewBox="0 0 1000 600" role="img" aria-label="Düzenlenebilir acil durum krokisi">
 <rect width="1000" height="600" fill="white"></rect>
 <text x="500" y="38" text-anchor="middle" font-size="24" font-weight="bold">BİNA KAT PLANI</text>
 <text x="500" y="580" text-anchor="middle" font-size="16">Toplanma alanı: Güvenli dış alan</text>
 </svg>
 <div class="legend">
 <strong>Lejant:</strong>
 <span><i class="box" style="background:#90caf9"></i>Oda</span>
 <span><i class="box" style="background:#43a047"></i>Acil çıkış</span>
 <span><i class="box" style="background:#e53935"></i>Yangın tüpü</span>
 <p class="hint">Eklenen öğeleri sürükleyin. Çıkış yönleri, merdivenler, ilk yardım noktaları ve gerçek toplanma alanı bina planına göre ayrıca eklenmelidir.</p>
 </div>
 </main>

 <script>
 const svg = document.getElementById('plan');
 const ns = 'http://www.w3.org/2000/svg';
 let roomNo = 1, dragging = null, start = null, origin = null;

 function el(name, attrs = {}) {
 const node = document.createElementNS(ns, name);
 Object.entries(attrs).forEach(([key, value]) => node.setAttribute(key, value));
 return node;
 }
 function makeItem(group, x, y) {
 group.setAttribute('class', 'item');
 group.setAttribute('transform', `translate(${x} ${y})`);
 group.addEventListener('pointerdown', startDrag);
 svg.appendChild(group);
 }
 function startDrag(event) {
 dragging = event.currentTarget;
 dragging.setPointerCapture(event.pointerId);
 start = point(event);
 origin = parseTransform(dragging.getAttribute('transform'));
 }
 function point(event) {
 const p = svg.createSVGPoint();
 p.x = event.clientX; p.y = event.clientY;
 return p.matrixTransform(svg.getScreenCTM().inverse());
 }
 function parseTransform(value) {
 const numbers = (value.match(/-?\d+(\.\d+)?/g) || [0, 0]).map(Number);
 return { x: numbers[0], y: numbers[1] };
 }
 svg.addEventListener('pointermove', event => {
 if (!dragging) return;
 const p = point(event);
 dragging.setAttribute('transform', `translate(${origin.x + p.x - start.x} ${origin.y + p.y - start.y})`);
 });
 ['pointerup', 'pointercancel'].forEach(type => svg.addEventListener(type, () => dragging = null));

 function addRoom() {
 const name = prompt('Oda adı:', `Oda ${roomNo}`) || `Oda ${roomNo}`;
 const g = el('g');
 g.append(el('rect', { x: 0, y: 0, width: 180, height: 100, rx: 4, fill: '#90caf9', stroke: '#1565c0', 'stroke-width': 3 }));
 const text = el('text', { x: 90, y: 55, 'text-anchor': 'middle', 'font-size': 18, 'font-weight': 'bold' });
 text.textContent = name; g.append(text);
 makeItem(g, 80 + ((roomNo - 1) % 4) * 210, 90 + Math.floor((roomNo - 1) / 4) * 130);
 roomNo++;
 }
 function addExit() {
 const g = el('g');
 g.append(el('rect', { x: 0, y: 0, width: 115, height: 48, rx: 4, fill: '#43a047' }));
 const text = el('text', { x: 57, y: 31, 'text-anchor': 'middle', fill: 'white', 'font-size': 16, 'font-weight': 'bold' });
 text.textContent = '← ÇIKIŞ'; g.append(text); makeItem(g, 440, 280);
 }
 function addExtinguisher() {
 const g = el('g');
 g.append(el('circle', { cx: 24, cy: 24, r: 23, fill: '#e53935', stroke: '#8e0000', 'stroke-width': 2 }));
 const text = el('text', { x: 24, y: 30, 'text-anchor': 'middle', fill: 'white', 'font-size': 20, 'font-weight': 'bold' });
 text.textContent = 'Y'; g.append(text); makeItem(g, 550, 280);
 }
 function clearPlan() {
 if (confirm('Eklenen tüm öğeler silinsin mi?')) {
 svg.querySelectorAll('.item').forEach(node => node.remove());
 roomNo = 1;
 }
 }
 </script>
</body>
</html>

Bu şablon resmi mevzuat veya yangın güvenliği uygunluk denetimi yerine geçmez. Nihai planda kaçış rotası, çıkış kapasitesi, ekipman konumu ve toplanma alanı bina sorumlusu ya da yetkin iş sağlığı ve güvenliği uzmanıyla doğrulanmalıdır.

Konseyin hemfikir olduğu noktalar

Kroki, HTML ile CSS ve JavaScript birlikte kullanılarak hazırlanabilir.
Kroki çizim alanı için SVG veya Canvas uygundur.
Etkileşimli ekleme, konumlandırma ya da çizim işlemleri JavaScript ile sağlanabilir.
Erişilebilirlik, mobil uyumluluk ve yazdırma gibi kullanım gereksinimleri dikkate alınmalıdır.OpenAI Claude Gemini

Üyelerin hemfikir olması tek başına doğruluk kanıtı değildir; önemli iddialar kaynaklar bölümünde ayrıca doğrulanır.

Modellerin ayrıldığı noktalar

Çizim teknolojisi

OpenAISVG tabanlı, sembol ekleme ve sürükleme destekli bir taslak önerir.
ClaudeSVG veya Canvas arasında ihtiyaca göre seçim yapılmasını önerir.
GeminiÖlçeklenebilirlik nedeniyle SVG'yi öne çıkarır; Canvas'ı alternatif olarak belirtir.
GrokSerbest çizim araçları için Canvas tabanlı yaklaşımı önerir.

Proje kapsamı

OpenAITek dosyalık, doğrudan kullanılabilir bir uygulama sunmaya çalışır; ancak verilen kod metni tamamlanmadan kesilmiştir.
ClaudeStatik sayfa, dinamik sistem, CAD entegrasyonu ve konum takibi gibi gereksinimlerin netleştirilmesi gerektiğini söyler.
GeminiGenel yöntem ve olası kütüphaneler önerir.
GrokKaydedilebilir serbest çizim aracına odaklanır.

Bu soruda belirsiz kalan noktalar

Binanın gerçek kat planı, ölçüleri ve acil durum ekipmanlarının konumları verilmediği için örnek bir yerleşim kullanılmıştır.
Bu örnek resmi iş güvenliği veya yangın yönetmeliği uygunluk kontrolünün yerine geçmez.
Sorunun tam kapsamı belirsizdir; basit statik bir HTML sayfası mı, yoksa veritabanı entegrasyonlu dinamik sistem mi gerekli olduğu netleştirilmemiştir
Kroki çiziminin CAD sistemi entegrasyonu yapması gerekip gerekmediği açık değildir
Mobil cihazlarda gerçek zamanlı konum gösterimi (GPS/indoor mapping) gerekli olup olmadığı belli değildir
Kullanıcının teknik beceri seviyesi veya kullanmak istediği belirli bir kütüphane belirtilmediği için genel bir yöntem önerilmiştir.

Dört yapay zekâ ne söyledi?

Konsey kararı bu değerlendirmelerin ortak ve ayrışan noktalarından oluşturuldu. Aşağıda her üyenin cevabına eklediği özgün nokta yer alıyor; tam cevaplar Konsey tutanağı olarak açılabilir durumda.

Uzlaşma 84/100 · güvenilirlik 82/100 · 4 üye yanıtladı.

OpenAI`gpt-5.6-luna`

SVG kullanıldığı için kroki öğeleri tarayıcıda ölçeklenebilir. Oda, acil çıkış ve yangın tüpü sembolleri eklenebilir.

Tam değerlendirmeyi oku

Acil durum krokisi için tarayıcıda doğrudan çalıştırılabilen, oda ve kaçış yolu eklemeye uygun tek dosyalık bir HTML projesi aşağıdadır. Dosyayı `index.html` adıyla kaydedip açabilirsiniz.

Bu örnek SVG tabanlı bir kroki alanı, oda ekleme, acil çıkış işareti ekleme, yangın tüpü işareti ekleme, temizleme ve yazdırma işlevleri içerir. Krokide gerçek bina planına göre ölçüleri, çıkışları ve toplanma alanını mutlaka güncelleyin.

Kod:

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Acil Durum Krokisi</title> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: #eef2f3; color: #17202a; } header { background: #b71c1c; color: white; padding: 16px; text-align: center; }.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: white; justify-content: center; box-shadow: 0 2px 5px #9995; } button { border: 0; border-radius: 5px; padding: 10px 14px; cursor: pointer; font-weight: bold; } button:hover { opacity:.85; }.room { background: #90caf9; }.exit { background: #66bb6a; color: white; }.extinguisher { background: #ef5350; color: white; }.clear { background: #455a64; color: white; }.print { background: #1565c0; color: white; } main { max-width: 1100px; margin: 20px auto; padding: 0 12px; } #plan { width: 100%; min-height: 600px; background: white; border: 3px solid #263238; }.legend { margin-top: 12px; background: white; padding: 12px; border-radius: 6px; }.legend span { display: inline-block; margin-right: 18px; }.color { display: inline-block; width: 18px; height: 18px; vertical-align: middle; margin-right: 5px; border: 1px solid #333; }.note { color: #555; font-size:.95rem; } @media print {.toolbar,.note { display: none; } body, main { margin: 0; padding: 0; background: white; } #plan { border: 2px solid #000; } } </style> </head> <body> <header> <h1>Acil Durum Krokisi</h1> <p>Kaçış yollarını ve acil durum ekipmanlarını gösteren plan</p> </header>

<div class="toolbar"> <button class="room" onclick="addRoom()">Oda Ekle</button> <button class="exit" onclick="addExit()">Acil Çıkış Ekle</button> <button class="extinguisher" onclick="addExtinguisher()">Yangın Tüpü Ekle</button> <button class="clear" onclick="clearPlan()">Temizle</button> <button class="print" onclick="window.print()">Yazdır / PDF</button> </div>

<main> <svg id="plan" viewBox="0 0 1000 600" role="img" aria-label="Acil durum krokisi"> <rect x="0" y="0" width="1000" height="600" fill="#fff"/> <text x="500" y="35" text-anchor="middle" font-size="24" font-weight="bold">BİNA KAT PLANI</text> <text x="500" y="575" text-anchor="middle" font-size="16">Toplanma alanı: Bina dışındaki güvenli bölge</text> </svg> <div class="legend"> <strong>Lejant:</strong> <span><i class="color" style="background:#90caf9"></i>Oda</span> <span><i class="color" style="background:#66bb6a"></i>Acil çıkış</span> <span><i class="color" style="background:#ef5350"></i>Yangın tüpü</span> <p class="note">Eklenen nesneleri fareyle sürükleyerek konumlandırabilirsiniz. Oda adını ekledikten sonra tarayıcı istemiyle belirleyin.</p> </div> </main>

function point(evt) { const p = svg.createSVGPoint(); p.x = evt.clientX; p.y = evt.clientY; return p.matrixTransform(svg.getScreenCTM().inverse()); }

function makeDraggable(element) { element.style.cursor = 'move'; element.addEventListener('mousedown', e => { selected = element; const p = point(e); offsetX = p.x - parseFloat(element.getAttribute('x')); offsetY = p.y - parseFloat(element.getAttribute('y')); }); }

document.addEventListener('mousemove', e => { if (!selected) return; const p = point(e); selected.setAttribute('x', p.x - offsetX); selected.setAttribute('y', p.y - offsetY); }); document.addEventListener('mouseup', () => selected = null);

function addRoom() { const name = prompt('Oda adı:', 'Oda ' + roomNo) || ('Oda ' + roomNo); const x = 100 + ((roomNo - 1) % 3) * 260; const y = 90 + Math.floor((roomNo - 1) / 3)

SVG kullanıldığı için kroki öğeleri tarayıcıda ölçeklenebilir.
Oda, acil çıkış ve yangın tüpü sembolleri eklenebilir.
Eklenen semboller fareyle sürüklenerek taşınabilir.
Kroki yazdırılabilir veya PDF olarak kaydedilebilir.
Gerçek kullanım öncesinde kaçış yönleri, merdivenler, ilk yardım noktası ve toplanma alanı eklenmelidir.

BelirsizlikBinanın gerçek kat planı, ölçüleri ve acil durum ekipmanlarının konumları verilmediği için örnek bir yerleşim kullanılmıştır. Bu örnek resmi iş güvenliği veya yangın yönetmeliği uygunluk kontrolünün yerine geçmez.

OpenAI (gpt-5.6-luna) yapay zekâ modelinin düzenlenmemiş cevabıdır; 26.3 saniyede üretildi.

Claude`claude-haiku-4-5`

Semantik HTML5 elementleri (header, nav, main, section, figure) kullanarak yapıyı oluşturmak SVG veya Canvas ile kroki çizimini gerçekleştirmek (statik veya dinamik)

Tam değerlendirmeyi oku

Acil durum krokisi yapmak için HTML projesi oluştururken, semantik HTML elementleri kullanarak erişilebilir bir yapı kurmalı, CSS ile görsel hiyerarşi sağlamalı ve etkileşim için JavaScript eklenebilmelidir.

Acil durum krokisi (evacuation plan/emergency exit map), güvenlik amaçlı bir dokümandır ve web tabanlı olarak oluşturulurken erişilebilirlik, netlik ve hızlı anlaşılabilirlik kritik önemdedir. HTML, CSS ve JavaScript kombinasyonu kullanarak interaktif, mobil uyumlu ve güncellenebilir bir çözüm geliştirilebilir.

Semantik HTML5 elementleri (header, nav, main, section, figure) kullanarak yapıyı oluşturmak
SVG veya Canvas ile kroki çizimini gerçekleştirmek (statik veya dinamik)
CSS Grid/Flexbox ile duyarlı (responsive) tasarım yapmak
Zoom, arama (odaları bulma) gibi interaktif özellikler için JavaScript eklemek
WCAG erişilebilirlik standartlarına uygun alt metinler ve ARIA etiketleri
Yazdırma için basılı formata uygun CSS medya sorgusu (@media print) tanımlamak

BelirsizlikSorunun tam kapsamı belirsizdir; basit statik bir HTML sayfası mı, yoksa veritabanı entegrasyonlu dinamik sistem mi gerekli olduğu netleştirilmemiştir Kroki çiziminin CAD sistemi entegrasyonu yapması gerekip gerekmediği açık değildir Mobil cihazlarda gerçek zamanlı konum gösterimi (GPS/indoor mapping) gerekli olup olmadığı belli değildir

Claude (claude-haiku-4-5) yapay zekâ modelinin düzenlenmemiş cevabıdır; 8.9 saniyede üretildi.

Gemini`gemini-3.1-flash-lite`

Kat planını temel yapı olarak SVG formatında dışa aktarın. CSS ile acil çıkış rotalarını vurgulayan animasyonlar ekleyin.

Tam değerlendirmeyi oku

Acil durum krokisi hazırlamak için HTML5 Canvas veya SVG kullanarak kat planınızı çizebilir, üzerine JavaScript ile interaktif acil durum çıkışlarını işaretleyebilirsiniz.

SVG, ölçeklenebilir yapısı sayesinde mimari çizimler için en uygun formattır; JavaScript kütüphaneleri (Leaflet.js veya D3.js gibi) ise bu krokiler üzerinde interaktif yönlendirme ve acil durum ekipmanı yerleşimi yapmanıza olanak tanır.

Kat planını temel yapı olarak SVG formatında dışa aktarın.
CSS ile acil çıkış rotalarını vurgulayan animasyonlar ekleyin.
JavaScript kullanarak acil durum butonları veya bilgi pencereleri oluşturun.
Responsive tasarım için viewport meta etiketlerini yapılandırın.
Veri güvenliği için krokiyi yerel bir sunucuda barındırın.
Erişilebilirlik için ARIA etiketlerini kullanın.

BelirsizlikKullanıcının teknik beceri seviyesi veya kullanmak istediği belirli bir kütüphane belirtilmediği için genel bir yöntem önerilmiştir.

Gemini (gemini-3.1-flash-lite) yapay zekâ modelinin düzenlenmemiş cevabıdır; 2.1 saniyede üretildi.

Grok`grok-4.3`

HTML5 Canvas elementi ile çizim alanı oluşturun Çizgi, dikdörtgen ve metin araçları ekleyin

Tam değerlendirmeyi oku

Acil durum krokisi için basit bir HTML5 Canvas tabanlı sayfa oluşturun. Kullanıcıların çizgi, metin ve şekiller ekleyip kaydedebileceği interaktif bir araç hazırlayın.

Proje, acil durum planlarını hızlıca çizmek için Canvas ve temel JavaScript ile yapılabilir; butonlar ve renk seçici eklenerek kullanılabilir hale getirilir.

HTML5 Canvas elementi ile çizim alanı oluşturun
Çizgi, dikdörtgen ve metin araçları ekleyin
Renk seçici ve kalınlık ayarı ekleyin
Çizimi PNG olarak indirme özelliği ekleyin
Grid ve kat planı şablonu arka planı kullanın

Grok (grok-4.3) yapay zekâ modelinin düzenlenmemiş cevabıdır; 8.4 saniyede üretildi.

Kullanılan modeller: OpenAI (gpt-5.6-luna), Claude (claude-haiku-4-5), Gemini (gemini-3.1-flash-lite), Grok (grok-4.3). Bu bölümdeki değerlendirmeler ve Konsey kararı yapay zekâ üretimidir; insan uzman görüşü değildir ve 4 üyenin cevabı otomatik kalite ile kaynak kontrolünden geçirilmiştir. Şeffaflık ilkelerimiz.

Nihai Konsey kararı

Modeller, HTML5 ile CSS ve JavaScript’in birlikte kullanılmasını; kroki için SVG veya Canvas seçilmesini; erişilebilirlik, duyarlı tasarım ve yazdırma desteğini ortak biçimde öneriyor. SVG’nin ölçeklenebilir ve yazdırma dostu yapısı nedeniyle daha uygun olduğu değerlendirilmiştir.

İnsan cevapları

Bu soruya henüz insan cevabı eklenmedi.

Bu konuda deneyiminiz veya uzmanlığınız var mı? Konsey kararının üzerine kendi cevabınızı ekleyebilirsiniz.

Zaten üyeyim

Yorumlar (0)

Yorum yazmak için giriş yapın veya üye olun. Üyelik ücretsizdir.

Acil durum krokisi yapmak için bir HTML projesi

Kısa cevap

Konseyin değerlendirmesi

HTML

Konseyin hemfikir olduğu noktalar

Modellerin ayrıldığı noktalar

Çizim teknolojisi

Proje kapsamı

Bu soruda belirsiz kalan noktalar

Dört yapay zekâ ne söyledi?

OpenAIgpt-5.6-luna

Claudeclaude-haiku-4-5

Geminigemini-3.1-flash-lite

Grokgrok-4.3

Nihai Konsey kararı

İnsan cevapları

Yorumlar (0)

OpenAI`gpt-5.6-luna`

Claude`claude-haiku-4-5`

Gemini`gemini-3.1-flash-lite`

Grok`grok-4.3`