HTML ile ilgil bir sorum var

21-10-2025, 20:43:48

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} &nbsp;&nbsp; <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>

21-10-2025, 20:53:55

#2

_4uwp

her şey inline, dışarıdan çağrılan bir şey de yok. bu şekilde kullanabilirsin. öneri; inputlar boş olduğunda hesaplama çalışmasın, eksik alanların doldurulmasını söylesin.
21-10-2025, 21:12:54

#3

Sdemirdag

_4uwp adlı üyeden alıntı: mesajı görüntüle

her şey inline, dışarıdan çağrılan bir şey de yok. bu şekilde kullanabilirsin. öneri; inputlar boş olduğunda hesaplama çalışmasın, eksik alanların doldurulmasını söylesin.

Peki bunun o sayfaya hız veya SEO açısından herhangi bir zararı var mıdır?
21-10-2025, 21:17:36

#4

Protex

Sdemirdag adlı üyeden alıntı: mesajı görüntüle

Peki bunun o sayfaya hız veya SEO açısından herhangi bir zararı var mıdır?

Hız açısından sorun yok ama seo açısından o html problemli eksik biraz. Oraya sitenizin head yapsıını , menünüzü ve footer kısmınıda entegre etmek lazım.
Yardıma ihtiyaç duyarsanız pm atmanız yeterlidir.
21-10-2025, 21:22:49

#5

_4uwp

Sdemirdag adlı üyeden alıntı: mesajı görüntüle

Peki bunun o sayfaya hız veya SEO açısından herhangi bir zararı var mıdır?

kodun tamamı 10kb, js de yük binderecek bir işlemde yok. ateş olsa cürmü yok kodun, hiçbir zararı olmaz. mevcut şekilde doğrudan kullanmayacaksan bir sayfanın içerisinde kullanacaksan bazı stil sorunları doğabilir ama. sen sitene ekle kodları, sayfanın linkinide at buraya. varsa bir sorun söylerim.