Tarif Ölçü ve Porsiyon Hesaplama
Ham HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarif Ölçü ve Porsiyon Hesaplama - Ücretsiz Online Araç</title>
<meta name="description" content="Orijinal ve hedef porsiyon sayısını girin; tarifinizdeki tüm malzeme miktarlarını tek seferde yeni porsiyona göre otomatik ölçeklendirin. %100 tarayıcıda çalışır.">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="Tarif Ölçü ve Porsiyon Hesaplama - Ücretsiz Online Araç">
<meta property="og:description" content="Orijinal ve hedef porsiyon sayısını girin; tarifinizdeki tüm malzeme miktarlarını tek seferde otomatik ölçeklendirin. %100 tarayıcıda çalışır, veri gönderilmez.">
<meta name="theme-color" content="#6366f1">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Tarif Ölçü ve Porsiyon Hesaplama Aracı",
"description": "Orijinal porsiyon sayısı, hedef porsiyon sayısı ve tarifteki malzeme miktarlarından yola çıkarak tüm malzemelerin yeni miktarlarını otomatik olarak hesaplayan ücretsiz online araç.",
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Any",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "TRY" }
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Porsiyon hesaplama aracı nasıl çalışır?",
"acceptedAnswer": { "@type": "Answer", "text": "Araç, hedef porsiyon sayısını orijinal porsiyon sayısına bölerek bir ölçek çarpanı bulur. Ardından girdiğiniz her malzeme miktarını bu çarpanla çarparak yeni tarifinizde kullanmanız gereken miktarı hesaplar." }
},
{
"@type": "Question",
"name": "Tarifte birden fazla malzeme varsa hepsini aynı anda ölçeklendirebilir miyim?",
"acceptedAnswer": { "@type": "Answer", "text": "Evet. \"Malzeme Ekle\" butonuyla tarifinizdeki tüm malzemeleri listeye ekleyebilir ve tek bir \"Hesapla\" tıklamasıyla hepsinin yeni miktarını aynı anda görebilirsiniz." }
},
{
"@type": "Question",
"name": "Ölçü birimlerini (gram, bardak, kaşık) değiştirebilir miyim?",
"acceptedAnswer": { "@type": "Answer", "text": "Evet, her malzeme için kendi kullandığınız birimi (gram, mililitre, su bardağı, yemek kaşığı, adet vb.) serbestçe yazabilirsiniz. Araç sadece sayısal miktarı ölçeklendirir, birimi olduğu gibi sonuçta gösterir." }
},
{
"@type": "Question",
"name": "Porsiyonu büyütürken pişirme süresi de aynı oranda artmalı mı?",
"acceptedAnswer": { "@type": "Answer", "text": "Hayır, pişirme süresi malzeme miktarlarıyla doğru orantılı artmaz. Tarifi büyütürken fırın veya ocak süresini kısa aralıklarla kontrol ederek ayarlamanız, yalnızca miktarları oranlamaktan daha güvenilir bir sonuç verir." }
}
]
}
</script>
<style>
:root {
--bg:#f5f6fb; --surface:#fff; --surface-2:#f0f2f9; --border:#e3e6f0;
--text:#1d2033; --muted:#6b7089; --primary:#6366f1; --primary-600:#4f46e5;
--primary-soft:#eef0ff; --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
--radius:16px; --shadow:0 10px 30px -12px rgba(30,35,90,.18);
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height:1.55; }
.container { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
header.hero { text-align:center; padding: 28px 0 8px; }
header.hero h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 8px; }
header.hero p { color: var(--muted); margin:0; font-size: 1rem; }
.trust-badge { display:inline-flex; align-items:center; gap:6px; background: var(--primary-soft); color: var(--primary-600); font-size: .8rem; font-weight:600; padding:6px 14px; border-radius:999px; margin-top:12px; }
.ad-slot { min-height: 0; }
.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 20px 0; }
.field { margin-bottom: 16px; }
.field label { display:block; font-size: .88rem; font-weight:600; margin-bottom:6px; color: var(--text); }
.field .hint { font-size:.78rem; color: var(--muted); margin-top:4px; }
.section-title { font-size: .78rem; font-weight:700; text-transform: uppercase; letter-spacing:.04em; color: var(--primary-600); margin: 4px 0 12px; }
.divider { border:none; border-top: 1px dashed var(--border); margin: 20px 0; }
input[type="text"] { width:100%; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; font-size: 1rem; color: var(--text); outline:none; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.btn { width:100%; padding: 14px 20px; border:none; border-radius: 12px; background: var(--primary); color:#fff; font-size: 1rem; font-weight:700; cursor:pointer; transition: background .15s, transform .05s; margin-top: 6px; }
.btn:hover { background: var(--primary-600); }
.btn:active { transform: scale(.99); }
.add-btn { width:100%; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); color: var(--primary-600); font-size: .9rem; font-weight:600; cursor:pointer; margin-bottom: 16px; }
.add-btn:hover { background: var(--primary-soft); }
.ingredient-row { display:grid; grid-template-columns: 1.4fr .8fr .8fr 36px; gap: 8px; margin-bottom: 10px; align-items:center; }
.ingredient-row input { padding: 10px 12px; font-size: .92rem; }
.remove-btn { width:36px; height:36px; border:none; border-radius: 10px; background: var(--surface-2); color: var(--danger); font-size: 1.1rem; cursor:pointer; line-height:1; }
.remove-btn:hover { background: #fde8e8; }
.col-labels { display:grid; grid-template-columns: 1.4fr .8fr .8fr 36px; gap: 8px; margin-bottom: 8px; }
.col-labels span { font-size: .72rem; color: var(--muted); font-weight:600; text-transform:uppercase; }
.warning { display:none; background: #fff4e5; border: 1px solid var(--warning); color:#8a5a00; padding: 12px 14px; border-radius: 12px; font-size:.88rem; margin-top: 14px; }
.warning.show { display:block; }
.result { display:none; margin-top: 20px; border-top: 1px dashed var(--border); padding-top: 18px; }
.result.show { display:block; }
.result-summary { background: var(--primary-soft); color: var(--primary-600); border-radius: 12px; padding: 12px 14px; font-size: .9rem; font-weight:600; margin-bottom: 14px; text-align:center; }
.result-list-item { display:flex; justify-content:space-between; align-items:center; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; margin-bottom: 8px; font-size: .92rem; }
.result-list-item .r-name { color: var(--muted); }
.result-list-item .r-amount { font-weight:700; color: var(--text); }
section.seo h2 { font-size: 1.25rem; margin: 28px 0 10px; }
section.seo p { color: var(--text); font-size: .96rem; }
details { background: var(--surface); border:1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
summary { cursor:pointer; font-weight:600; font-size:.95rem; }
details p { margin: 10px 0 0; color: var(--muted); font-size:.9rem; }
@media (max-width:480px) {
.card { padding:18px; }
.ingredient-row, .col-labels { grid-template-columns: 1fr 1fr 1fr 32px; }
}
</style>
</head>
<body>
<div class="container">
<header class="hero">
<h1>Tarif Ölçü ve Porsiyon Hesaplama Aracı</h1>
<p>Orijinal ve hedef porsiyon sayınızı girin; tüm malzemelerinizi tek seferde yeni porsiyona göre ölçeklendirin.</p>
<span class="trust-badge">🔒 %100 Tarayıcıda — Veriniz Hiçbir Yere Gönderilmez</span>
</header>
<!-- [reklam:arac-header] -->
<div class="ad-slot"></div>
<main class="card">
<div class="section-title">1. Porsiyon Bilgisi</div>
<div class="grid">
<div class="field">
<label for="origServings">Orijinal Porsiyon Sayısı</label>
<input type="text" inputmode="decimal" id="origServings" placeholder="Örn: 4">
</div>
<div class="field">
<label for="targetServings">Hedef Porsiyon Sayısı</label>
<input type="text" inputmode="decimal" id="targetServings" placeholder="Örn: 10">
</div>
</div>
<hr class="divider">
<div class="section-title">2. Malzemeler</div>
<div class="col-labels">
<span>Malzeme</span>
<span>Miktar</span>
<span>Birim</span>
<span></span>
</div>
<div id="ingredientRows">
<div class="ingredient-row">
<input type="text" class="ing-name" placeholder="Örn: Un">
<input type="text" class="ing-amount" inputmode="decimal" placeholder="500">
<input type="text" class="ing-unit" placeholder="gr">
<button type="button" class="remove-btn" onclick="removeRow(this)" aria-label="Malzemeyi sil">×</button>
</div>
<div class="ingredient-row">
<input type="text" class="ing-name" placeholder="Örn: Şeker">
<input type="text" class="ing-amount" inputmode="decimal" placeholder="200">
<input type="text" class="ing-unit" placeholder="gr">
<button type="button" class="remove-btn" onclick="removeRow(this)" aria-label="Malzemeyi sil">×</button>
</div>
<div class="ingredient-row">
<input type="text" class="ing-name" placeholder="Örn: Yumurta">
<input type="text" class="ing-amount" inputmode="decimal" placeholder="2">
<input type="text" class="ing-unit" placeholder="adet">
<button type="button" class="remove-btn" onclick="removeRow(this)" aria-label="Malzemeyi sil">×</button>
</div>
</div>
<button type="button" class="add-btn" onclick="addRow()">+ Malzeme Ekle</button>
<button class="btn" onclick="hesaplaTarif()">Hesapla</button>
<div class="warning" id="warningBox"></div>
<div class="result" id="resultBox">
<div class="result-summary" id="resSummary"></div>
<div id="resList"></div>
</div>
</main>
<!-- [reklam:arac-alt] -->
<div class="ad-slot"></div>
<section class="seo">
<h2>Tarif Ölçü ve Porsiyon Hesaplama Nedir?</h2>
<p>Tarif ölçü ve porsiyon hesaplama, elinizdeki bir tarifi orijinal porsiyon sayısından farklı bir porsiyon sayısına uyarlarken, tüm malzeme miktarlarını doğru oranda büyütmenizi veya küçültmenizi sağlayan bir yöntemdir. Örneğin 4 kişilik bir tarifi 10 kişiye çıkarmak istediğinizde, her malzemeyi tek tek elle hesaplamak hem zaman alır hem de hata yapma riski taşır. Bu araç, hedef porsiyon sayısını orijinal porsiyon sayısına bölerek bir ölçek çarpanı bulur ve bu çarpanı tüm malzemelerinize aynı anda uygular; böylece tarifinizin orijinal lezzet dengesini koruyarak doğru miktarlara ulaşırsınız.</p>
<h2>Nasıl Kullanılır?</h2>
<p>Öncelikle tarifinizin kaç kişilik olduğunu "Orijinal Porsiyon Sayısı" alanına, kaç kişilik hazırlamak istediğinizi ise "Hedef Porsiyon Sayısı" alanına girin. Ardından "Malzemeler" bölümünde her malzeme için isim (isteğe bağlı), miktar ve birim bilgisini girin; daha fazla malzeme eklemek için "+ Malzeme Ekle" butonunu, bir satırı kaldırmak için satırın yanındaki "×" butonunu kullanabilirsiniz. "Hesapla" butonuna bastığınızda araç, girdiğiniz tüm malzemelerin yeni porsiyona göre güncellenmiş miktarlarını tek bir listede önünüze getirir. Tüm işlem tarayıcınızda gerçekleşir, hiçbir tarif bilginiz kaydedilmez veya herhangi bir sunucuya gönderilmez.</p>
<h2>Sıkça Sorulan Sorular</h2>
<details>
<summary>Porsiyon hesaplama aracı nasıl çalışır?</summary>
<p>Araç, hedef porsiyon sayısını orijinal porsiyon sayısına bölerek bir ölçek çarpanı bulur. Ardından girdiğiniz her malzeme miktarını bu çarpanla çarparak yeni tarifinizde kullanmanız gereken miktarı hesaplar.</p>
</details>
<details>
<summary>Tarifte birden fazla malzeme varsa hepsini aynı anda ölçeklendirebilir miyim?</summary>
<p>Evet. "Malzeme Ekle" butonuyla tarifinizdeki tüm malzemeleri listeye ekleyebilir ve tek bir "Hesapla" tıklamasıyla hepsinin yeni miktarını aynı anda görebilirsiniz.</p>
</details>
<details>
<summary>Ölçü birimlerini (gram, bardak, kaşık) değiştirebilir miyim?</summary>
<p>Evet, her malzeme için kendi kullandığınız birimi (gram, mililitre, su bardağı, yemek kaşığı, adet vb.) serbestçe yazabilirsiniz. Araç sadece sayısal miktarı ölçeklendirir, birimi olduğu gibi sonuçta gösterir.</p>
</details>
<details>
<summary>Porsiyonu büyütürken pişirme süresi de aynı oranda artmalı mı?</summary>
<p>Hayır, pişirme süresi malzeme miktarlarıyla doğru orantılı artmaz. Tarifi büyütürken fırın veya ocak süresini kısa aralıklarla kontrol ederek ayarlamanız, yalnızca miktarları oranlamaktan daha güvenilir bir sonuç verir.</p>
</details>
</section>
</div>
<script>
function addRow() {
var container = document.getElementById("ingredientRows");
var row = document.createElement("div");
row.className = "ingredient-row";
row.innerHTML =
'<input type="text" class="ing-name" placeholder="Malzeme adı">' +
'<input type="text" class="ing-amount" inputmode="decimal" placeholder="Miktar">' +
'<input type="text" class="ing-unit" placeholder="Birim">' +
'<button type="button" class="remove-btn" onclick="removeRow(this)" aria-label="Malzemeyi sil">×</button>';
container.appendChild(row);
}
function removeRow(btn) {
var container = document.getElementById("ingredientRows");
var rows = container.querySelectorAll(".ingredient-row");
var row = btn.closest(".ingredient-row");
if (rows.length <= 1) {
row.querySelector(".ing-name").value = "";
row.querySelector(".ing-amount").value = "";
row.querySelector(".ing-unit").value = "";
return;
}
row.remove();
}
function showWarning(msg) {
var box = document.getElementById("warningBox");
box.textContent = msg;
box.classList.add("show");
document.getElementById("resultBox").classList.remove("show");
}
function clearWarning() {
var box = document.getElementById("warningBox");
box.textContent = "";
box.classList.remove("show");
}
function roundNice(value) {
var rounded = Math.round(value * 100) / 100;
if (Number.isInteger(rounded)) return rounded.toString();
return rounded.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
}
function hesaplaTarif() {
clearWarning();
var orig = parseFloat(document.getElementById("origServings").value.replace(",", "."));
var target = parseFloat(document.getElementById("targetServings").value.replace(",", "."));
if (isNaN(orig) || orig <= 0) {
showWarning("Lütfen geçerli bir orijinal porsiyon sayısı girin (0'dan büyük olmalı).");
return;
}
if (isNaN(target) || target <= 0) {
showWarning("Lütfen geçerli bir hedef porsiyon sayısı girin (0'dan büyük olmalı).");
return;
}
var scale = target / orig;
var rows = document.querySelectorAll(".ingredient-row");
var results = [];
for (var i = 0; i < rows.length; i++) {
var amountRaw = rows[i].querySelector(".ing-amount").value.trim();
if (amountRaw === "") continue;
var amount = parseFloat(amountRaw.replace(",", "."));
if (isNaN(amount) || amount <= 0) {
showWarning((i + 1) + ". malzeme satırındaki miktar geçersiz görünüyor. Lütfen 0'dan büyük bir sayı girin veya alanı boş bırakın.");
return;
}
var name = rows[i].querySelector(".ing-name").value.trim() || ((i + 1) + ". Malzeme");
var unit = rows[i].querySelector(".ing-unit").value.trim();
var newAmount = amount * scale;
results.push({ name: name, amount: roundNice(newAmount), unit: unit });
}
if (results.length === 0) {
showWarning("Lütfen en az bir malzeme için miktar girin.");
return;
}
document.getElementById("resSummary").textContent = "Ölçek Çarpanı: " + scale.toFixed(3) + "x (" + orig + " porsiyon → " + target + " porsiyon)";
var listHtml = "";
for (var j = 0; j < results.length; j++) {
listHtml += '<div class="result-list-item"><span class="r-name">' + escapeHtml(results[j].name) + '</span><span class="r-amount">' + results[j].amount + (results[j].unit ? " " + escapeHtml(results[j].unit) : "") + '</span></div>';
}
document.getElementById("resList").innerHTML = listHtml;
document.getElementById("resultBox").classList.add("show");
}
function escapeHtml(str) {
var div = document.createElement("div");
div.textContent = str;
return div.innerHTML;
}
</script>
</body>
</html>
Kategori
Günlük Yaşam Araçları
MMUTLU.CMS
Kurumsal web siteleri için içerik yönetim sistemi.
© 2026 Mutlu DoğruBu site MUTLU.CMS ile yayınlanmaktadır.