Arkadaşlar merhabalar. Web sitemde bir içeriğin içerisine hesaplama aracı eklemem lazım. HTML kodu elimde mevcut. Ben bu HTML kodunu içerik içerisine HTML ekleme alanından eklesem bunun web siteye herhangi bir zararı var mıdır? Farklı alandan mı eklemem lazım. jAVA ve CSS bilgim olmadığı için yapay zekaya HTML yaptırıp eklemek istiyorum.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Tuğla Duvar Hesaplayıcı</title>
<!-- İsteğe bağlı: Tailwind yüklüyse sınıflar çalışır; yoksa işlevsel kısım yine çalışır -->
<style>
/* Tailwind yoksa minimum okunabilirlik için ufak dokunuş */
body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 16px; background:#f8fafc}
.container {max-width: 960px; margin: auto}
.card {background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.row {display:grid; gap:16px}
@media (min-width:1024px){ .row{grid-template-columns:repeat(2,minmax(0,1fr))} }
label{display:block;margin-bottom:6px;font-weight:600}
input,select,button{height:44px;font-size:14px;padding:0 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff}
button.primary{background:#111827;color:#fff;border-color:#111827}
button.ghost{background:#fff}
.muted{color:#6b7280;font-size:12px;margin-top:4px}
.stack{display:flex; gap:12px; flex-wrap:wrap}
.w-100{width:100%}
.result{border-top:1px dashed #e5e7eb;padding-top:16px;margin-top:16px}
.pill{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:999px;padding:4px 10px;font-size:12px;margin-right:6px;margin-top:6px}
.error{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;padding:10px;border-radius:8px;margin-top:10px}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div style="padding:24px 24px 8px">
<h1 style="font-size:20px;font-weight:800;margin:0 0 4px">Tuğla Duvar Hesaplayıcı</h1>
<p class="muted">Duvar ölçülerini girin, tuğla/blok tipini seçin; toplam adet ve m² detayını görün.</p>
</div>
<div style="padding:8px 24px 24px">
<form id="brickForm" class="space-y-6">
<div class="row">
<div>
<label for="width">Duvar Genişliği (metre)</label>
<input type="number" name="width" id="width" step="0.01" placeholder="Örn: 10.5" required />
</div>
<div>
<label for="height">Duvar Yüksekliği (metre)</label>
<input type="number" name="height" id="height" step="0.01" placeholder="Örn: 2.8" required />
</div>
<div style="grid-column: 1 / -1">
<label for="brickType">Tuğla / Blok Cinsi</label>
<select id="brickType" name="brickType" required class="w-100">
<option value="" disabled selected>Bir tuğla / blok cinsi seçin</option>
<option value="delikli-85">Delikli Tuğla 8.5 cm (19×19×8.5) ≈ 25 adet/m²</option>
<option value="delikli-13_5">Delikli Tuğla 13.5 cm (19×19×13.5) ≈ 20 adet/m²</option>
<option value="delikli-19">Delikli Tuğla 19 cm (19×19×19) ≈ 16 adet/m²</option>
<option value="gazbeton-60x25">Gazbeton (60×25 cm yüzey) ≈ 6.67 adet/m²</option>
<option value="bims-40x20">Bims Briket (40×20 cm yüzey) ≈ 12.5 adet/m²</option>
</select>
<p class="muted">Not: m² başına adet, tipik derz kalınlığı varsayılarak hesaplanan ortalama değerlerdir.</p>
</div>
<div>
<label for="thickness">Duvar Kalınlığı</label>
<select id="thickness" name="thickness" required>
<!-- JS, seçilen tuğla cinsine göre seçenekleri doldurur -->
</select>
</div>
<div>
<label for="voidArea">Boşluk Alanı (m² - kapı, pencere vb.)</label>
<input type="number" name="voidArea" id="voidArea" step="0.01" placeholder="Örn: 3.5" value="0" />
<p class="muted">Kapı, pencere gibi alanlar için düşülecek m²</p>
</div>
<div>
<label for="wastage">Fire Payı (%)</label>
<input type="number" name="wastage" id="wastage" min="0" max="50" placeholder="5" value="5" />
<p class="muted">Kesme, kırık ve işçilik firesi (önerilen: %510)</p>
</div>
</div>
<div class="stack" style="margin-top:8px">
<button type="submit" class="primary">Hesapla</button>
<button type="button" id="resetBtn" class="ghost">Temizle</button>
</div>
</form>
<div id="feedback"></div>
<div id="result" class="result" style="display:none">
<h3 style="margin:0 0 8px;font-size:16px;font-weight:800">Sonuç</h3>
<div id="summary" style="margin-bottom:6px"></div>
<div id="tags"></div>
</div>
</div>
</div>
</div>
<script>
// --- Veri tabanı (tipik değerler) ---
const BRICK_DB = {
"delikli-85": {
label: "Delikli Tuğla 8.5 cm",
perM2: 25, // adet/m²
thicknesses: ["8.5 cm"]
},
"delikli-13_5": {
label: "Delikli Tuğla 13.5 cm",
perM2: 20,
thicknesses: ["13.5 cm"]
},
"delikli-19": {
label: "Delikli Tuğla 19 cm",
perM2: 16,
thicknesses: ["19 cm"]
},
"gazbeton-60x25": {
label: "Gazbeton 60×25 cm",
perM2: 6.6667, // 60×25 = 0.15 m² yüzey → 1 / 0.15 = 6.67 adet/m²
thicknesses: ["10 cm","12.5 cm","15 cm","17.5 cm","20 cm","25 cm"]
},
"bims-40x20": {
label: "Bims Briket 40×20 cm",
perM2: 12.5, // 40×20 = 0.08 m² yüzey → 1 / 0.08 = 12.5
thicknesses: ["20 cm"]
}
};
// --- Elemanlar ---
const form = document.getElementById("brickForm");
const brickTypeEl = document.getElementById("brickType");
const thicknessEl = document.getElementById("thickness");
const resultEl = document.getElementById("result");
const summaryEl = document.getElementById("summary");
const tagsEl = document.getElementById("tags");
const feedbackEl = document.getElementById("feedback");
const resetBtn = document.getElementById("resetBtn");
// --- Yardımcılar ---
const fmt = (n, frac = 2) => Number(n).toLocaleString("tr-TR", { maximumFractionDigits: frac, minimumFractionDigits: 0 });
function showError(msg){
feedbackEl.innerHTML = `<div class="error">${msg}</div>`;
}
function clearError(){
feedbackEl.innerHTML = "";
}
// Tuğla cinsine göre duvar kalınlığı seçeneklerini doldur
function populateThicknessOptions(){
const type = brickTypeEl.value;
thicknessEl.innerHTML = "";
if(!type || !BRICK_DB[type]) {
const opt = document.createElement("option");
opt.textContent = "Önce tuğla/blok cinsi seçin";
opt.disabled = true; opt.selected = true;
thicknessEl.appendChild(opt);
return;
}
BRICK_DB[type].thicknesses.forEach((t, idx) => {
const opt = document.createElement("option");
opt.value = t;
opt.textContent = t;
if(idx === 0) opt.selected = true;
thicknessEl.appendChild(opt);
});
}
brickTypeEl.addEventListener("change", populateThicknessOptions);
// İlk yüklemede (placeholder)
populateThicknessOptions();
// Hesapla
form.addEventListener("submit", (e) => {
e.preventDefault();
clearError();
const width = parseFloat(form.width.value);
const height = parseFloat(form.height.value);
const voidArea = parseFloat(form.voidArea.value || "0") || 0;
const wastage = parseFloat(form.wastage.value || "0") || 0;
const type = form.brickType.value;
if(!(width > 0) || !(height > 0)){
showError("Lütfen geçerli bir genişlik ve yükseklik girin.");
resultEl.style.display = "none";
return;
}
if(!type || !BRICK_DB[type]){
showError("Lütfen bir tuğla/blok cinsi seçin.");
resultEl.style.display = "none";
return;
}
if(voidArea < 0){
showError("Boşluk alanı negatif olamaz.");
resultEl.style.display = "none";
return;
}
if(wastage < 0 || wastage > 50){
showError("Fire payı %0 ile %50 arasında olmalıdır.");
resultEl.style.display = "none";
return;
}
const grossArea = width * height;
const netArea = grossArea - voidArea;
if(netArea <= 0){
showError("Net duvar alanı sıfırdan büyük olmalıdır. Boşluk alanını kontrol edin.");
resultEl.style.display = "none";
return;
}
const perM2 = BRICK_DB[type].perM2;
// Fire uygula
const areaWithWastage = netArea * (1 + (wastage/100));
// Toplam birim adedi
const totalUnits = Math.ceil(areaWithWastage * perM2);
// Çıktı
const label = BRICK_DB[type].label;
const thick = thicknessEl.value || "";
summaryEl.innerHTML = `
<div class="row" style="grid-template-columns:repeat(2,minmax(0,1fr));gap:10px">
<div><strong>Brüt Alan</strong><br/>${fmt(grossArea,2)} m²</div>
<div><strong>Boşluklar</strong><br/>${fmt(voidArea,2)} m²</div>
<div><strong>Net Alan</strong><br/>${fmt(netArea,2)} m²</div>
<div><strong>Fireli Alan</strong><br/>${fmt(areaWithWastage,2)} m²</div>
</div>
<div style="margin-top:10px"><strong>Tuğla/Blok:</strong> ${label} <strong>Duvar Kalınlığı:</strong> ${thick}</div>
<div style="margin-top:10px;font-size:18px"><strong>Toplam Adet:</strong> ${fmt(totalUnits,0)} </div>
`;
tagsEl.innerHTML = `
<span class="pill">m² başına ≈ ${fmt(perM2,2)} adet</span>
<span class="pill">Fire: %${fmt(wastage,0)}</span>
`;
resultEl.style.display = "block";
});
// Temizle
resetBtn.addEventListener("click", () => {
form.reset();
populateThicknessOptions();
resultEl.style.display = "none";
clearError();
});
</script>
</body>
</html>