คำนวณกำไรแฟรนไชส์ก๋วยเตี๋ยวเรือนรกแตก
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>คำนวณกำไรแฟรนไชส์ก๋วยเตี๋ยวเรือนรกแตก</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Kanit', sans-serif;
background-color: #1a1a1a;
color: #ffffff;
}
.fire-text {
background: -webkit-linear-gradient(#ffcc00, #ff3300);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-bg {
background: linear-gradient(145deg, #2a2a2a, #333333);
border: 1px solid #ff4500;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4 bg-[url('https://images.unsplash.com/photo-1555126634-323283e090fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')] bg-cover bg-center bg-no-repeat bg-fixed relative">
<!-- Overlay -->
<div class="absolute inset-0 bg-black bg-opacity-80 z-0"></div>
<div class="relative z-10 w-full max-w-2xl">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-extrabold mb-2 uppercase tracking-wider">
ก๋วยเตี๋ยวเรือ<br><span class="fire-text">นรกแตก</span>
</h1>
<p class="text-gray-300 text-lg">โปรแกรมคำนวณจุดคุ้มทุน & กำไร (ฉบับประเมิน)</p>
</div>
<!-- Calculator Card -->
<div class="card-bg rounded-2xl shadow-2xl p-6 md:p-8 space-y-6">
<!-- Inputs -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Investment -->
<div class="col-span-1 md:col-span-2 p-4 bg-gray-800 rounded-lg border border-gray-700">
<h3 class="text-xl font-bold text-orange-400 mb-4"><i class="fas fa-money-bill-wave mr-2"></i>เงินลงทุนเริ่มต้น</h3>
<div class="flex flex-col space-y-2">
<label class="text-sm text-gray-400">ค่าแฟรนไชส์ (โปรโมชั่น) + อุปกรณ์ตกแต่ง + โครงสร้าง</label>
<div class="flex items-center">
<input type="number" id="investment" value="123000" class="w-full bg-gray-700 text-white p-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-right text-lg">
<span class="bg-orange-600 p-3 rounded-r-lg font-bold">บาท</span>
</div>
<p class="text-xs text-gray-500">*ค่าเริ่มต้นประเมินที่ 123,000 (แฟรนไชส์ 60k + อุปกรณ์อื่นๆ)</p>
</div>
</div>
<!-- Sales Assumptions -->
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ราคาขายต่อชาม</label>
<div class="flex items-center">
<input type="number" id="pricePerBowl" value="50" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">บาท</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ต้นทุนวัตถุดิบต่อชาม (ประมาณ 50-60%)</label>
<div class="flex items-center">
<input type="number" id="costPerBowl" value="25" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">บาท</span>
</div>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ยอดขายที่คาดหวัง (ชาม/วัน)</label>
<div class="flex items-center">
<input type="number" id="bowlsPerDay" value="100" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">ชาม</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ค่าเช่าที่ + ค่าน้ำไฟ + พนักงาน (ต่อเดือน)</label>
<div class="flex items-center">
<input type="number" id="fixedCost" value="15000" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">บาท</span>
</div>
</div>
</div>
</div>
<button onclick="calculate()" class="w-full bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white font-bold py-4 rounded-lg shadow-lg transform transition hover:scale-105 duration-200 text-xl">
<i class="fas fa-calculator mr-2"></i> คำนวณกำไร
</button>
<!-- Results -->
<div id="resultArea" class="hidden animate-fade-in-up mt-6 border-t border-gray-600 pt-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
<div class="p-4 bg-gray-800 rounded-lg">
<p class="text-gray-400 text-sm">กำไรต่อวัน (โดยประมาณ)</p>
<p id="dailyProfit" class="text-2xl font-bold text-green-400">0 บาท</p>
</div>
<div class="p-4 bg-gray-800 rounded-lg">
<p class="text-gray-400 text-sm">กำไรต่อเดือน (30 วัน)</p>
<p id="monthlyProfit" class="text-2xl font-bold text-green-400">0 บาท</p>
</div>
<div class="p-4 bg-yellow-900 bg-opacity-30 border border-yellow-600 rounded-lg">
<p class="text-yellow-400 text-sm font-bold">คืนทุนภายใน (ประมาณ)</p>
<p id="breakeven" class="text-3xl font-extrabold text-white">0 เดือน</p>
</div>
</div>
<p class="text-center text-xs text-gray-500 mt-4">*ตัวเลขนี้เป็นการประมาณการเบื้องต้น ผลลัพธ์จริงขึ้นอยู่กับทำเลและการบริหารจัดการ</p>
<div class="mt-6 text-center">
<p class="text-lg font-bold mb-2">สนใจแฟรนไชส์ ติดต่อด่วน!</p>
<div class="inline-flex space-x-4">
<a href="#" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full transition"><i class="fab fa-line mr-1"></i> แอดไลน์</a>
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition"><i class="fab fa-facebook mr-1"></i> Facebook</a>
</div>
</div>
</div>
</div>
</div>
<script>
function calculate() {
// Get inputs
const investment = parseFloat(document.getElementById('investment').value) || 0;
const price = parseFloat(document.getElementById('pricePerBowl').value) || 0;
const cost = parseFloat(document.getElementById('costPerBowl').value) || 0;
const quantity = parseFloat(document.getElementById('bowlsPerDay').value) || 0;
const fixedCost = parseFloat(document.getElementById('fixedCost').value) || 0;
// Calculations
const profitPerBowl = price - cost;
const dailyProfitGross = profitPerBowl * quantity;
const monthlyProfitGross = dailyProfitGross * 30;
const monthlyProfitNet = monthlyProfitGross - fixedCost;
// Display Results
document.getElementById('dailyProfit').innerText = dailyProfitGross.toLocaleString() + ' บาท';
// Handle loss scenarios
if (monthlyProfitNet <= 0) {
document.getElementById('monthlyProfit').innerText = "ขาดทุน " + Math.abs(monthlyProfitNet).toLocaleString() + ' บาท';
document.getElementById('monthlyProfit').classList.remove('text-green-400');
document.getElementById('monthlyProfit').classList.add('text-red-400');
document.getElementById('breakeven').innerText = "ไม่คืนทุน";
} else {
document.getElementById('monthlyProfit').innerText = monthlyProfitNet.toLocaleString() + ' บาท';
document.getElementById('monthlyProfit').classList.remove('text-red-400');
document.getElementById('monthlyProfit').classList.add('text-green-400');
const monthsToBreakeven = investment / monthlyProfitNet;
const daysToBreakeven = monthsToBreakeven * 30;
let timeText = "";
if (monthsToBreakeven < 1) {
timeText = Math.ceil(daysToBreakeven) + " วัน";
} else {
timeText = monthsToBreakeven.toFixed(1) + " เดือน";
}
document.getElementById('breakeven').innerText = timeText;
}
// Show Result Area
document.getElementById('resultArea').classList.remove('hidden');
}
</script>
</body>
</html><style>
body {
font-family: 'Kanit', sans-serif;
background-color: #1a1a1a;
color: #ffffff;
}
.fire-text {
background: -webkit-linear-gradient(#ffcc00, #ff3300);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-bg {
background: linear-gradient(145deg, #2a2a2a, #333333);
border: 1px solid #ff4500;
}
</style><!-- Overlay -->
<div class="absolute inset-0 bg-black bg-opacity-80 z-0"></div>
<div class="relative z-10 w-full max-w-2xl">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-extrabold mb-2 uppercase tracking-wider">
ก๋วยเตี๋ยวเรือ<br><span class="fire-text">นรกแตก</span>
</h1>
<p class="text-gray-300 text-lg">โปรแกรมคำนวณจุดคุ้มทุน & กำไร (ฉบับประเมิน)</p>
</div>
<!-- Calculator Card -->
<div class="card-bg rounded-2xl shadow-2xl p-6 md:p-8 space-y-6">
<!-- Inputs -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Investment -->
<div class="col-span-1 md:col-span-2 p-4 bg-gray-800 rounded-lg border border-gray-700">
<h3 class="text-xl font-bold text-orange-400 mb-4"><i class="fas fa-money-bill-wave mr-2"></i>เงินลงทุนเริ่มต้น</h3>
<div class="flex flex-col space-y-2">
<label class="text-sm text-gray-400">ค่าแฟรนไชส์ (โปรโมชั่น) + อุปกรณ์ตกแต่ง + โครงสร้าง</label>
<div class="flex items-center">
<input type="number" id="investment" value="123000" class="w-full bg-gray-700 text-white p-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-right text-lg">
<span class="bg-orange-600 p-3 rounded-r-lg font-bold">บาท</span>
</div>
<p class="text-xs text-gray-500">*ค่าเริ่มต้นประเมินที่ 123,000 (แฟรนไชส์ 60k + อุปกรณ์อื่นๆ)</p>
</div>
</div>
<!-- Sales Assumptions -->
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ราคาขายต่อชาม</label>
<div class="flex items-center">
<input type="number" id="pricePerBowl" value="50" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">บาท</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ต้นทุนวัตถุดิบต่อชาม (ประมาณ 50-60%)</label>
<div class="flex items-center">
<input type="number" id="costPerBowl" value="25" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">บาท</span>
</div>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ยอดขายที่คาดหวัง (ชาม/วัน)</label>
<div class="flex items-center">
<input type="number" id="bowlsPerDay" value="100" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">ชาม</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">ค่าเช่าที่ + ค่าน้ำไฟ + พนักงาน (ต่อเดือน)</label>
<div class="flex items-center">
<input type="number" id="fixedCost" value="15000" class="w-full bg-gray-700 text-white p-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-orange-500 text-right">
<span class="bg-gray-600 p-2 rounded-r-lg text-sm">บาท</span>
</div>
</div>
</div>
</div>
<button onclick="calculate()" class="w-full bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white font-bold py-4 rounded-lg shadow-lg transform transition hover:scale-105 duration-200 text-xl">
<i class="fas fa-calculator mr-2"></i> คำนวณกำไร
</button>
<!-- Results -->
<div id="resultArea" class="hidden animate-fade-in-up mt-6 border-t border-gray-600 pt-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
<div class="p-4 bg-gray-800 rounded-lg">
<p class="text-gray-400 text-sm">กำไรต่อวัน (โดยประมาณ)</p>
<p id="dailyProfit" class="text-2xl font-bold text-green-400">0 บาท</p>
</div>
<div class="p-4 bg-gray-800 rounded-lg">
<p class="text-gray-400 text-sm">กำไรต่อเดือน (30 วัน)</p>
<p id="monthlyProfit" class="text-2xl font-bold text-green-400">0 บาท</p>
</div>
<div class="p-4 bg-yellow-900 bg-opacity-30 border border-yellow-600 rounded-lg">
<p class="text-yellow-400 text-sm font-bold">คืนทุนภายใน (ประมาณ)</p>
<p id="breakeven" class="text-3xl font-extrabold text-white">0 เดือน</p>
</div>
</div>
<p class="text-center text-xs text-gray-500 mt-4">*ตัวเลขนี้เป็นการประมาณการเบื้องต้น ผลลัพธ์จริงขึ้นอยู่กับทำเลและการบริหารจัดการ</p>
<div class="mt-6 text-center">
<p class="text-lg font-bold mb-2">สนใจแฟรนไชส์ ติดต่อด่วน!</p>
<div class="inline-flex space-x-4">
<a href="#" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full transition"><i class="fab fa-line mr-1"></i> แอดไลน์</a>
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition"><i class="fab fa-facebook mr-1"></i> Facebook</a>
</div>
</div>
</div>
</div>
</div>
<script>
function calculate() {
// Get inputs
const investment = parseFloat(document.getElementById('investment').value) || 0;
const price = parseFloat(document.getElementById('pricePerBowl').value) || 0;
const cost = parseFloat(document.getElementById('costPerBowl').value) || 0;
const quantity = parseFloat(document.getElementById('bowlsPerDay').value) || 0;
const fixedCost = parseFloat(document.getElementById('fixedCost').value) || 0;
// Calculations
const profitPerBowl = price - cost;
const dailyProfitGross = profitPerBowl * quantity;
const monthlyProfitGross = dailyProfitGross * 30;
const monthlyProfitNet = monthlyProfitGross - fixedCost;
// Display Results
document.getElementById('dailyProfit').innerText = dailyProfitGross.toLocaleString() + ' บาท';
// Handle loss scenarios
if (monthlyProfitNet <= 0) {
document.getElementById('monthlyProfit').innerText = "ขาดทุน " + Math.abs(monthlyProfitNet).toLocaleString() + ' บาท';
document.getElementById('monthlyProfit').classList.remove('text-green-400');
document.getElementById('monthlyProfit').classList.add('text-red-400');
document.getElementById('breakeven').innerText = "ไม่คืนทุน";
} else {
document.getElementById('monthlyProfit').innerText = monthlyProfitNet.toLocaleString() + ' บาท';
document.getElementById('monthlyProfit').classList.remove('text-red-400');
document.getElementById('monthlyProfit').classList.add('text-green-400');
const monthsToBreakeven = investment / monthlyProfitNet;
const daysToBreakeven = monthsToBreakeven * 30;
let timeText = "";
if (monthsToBreakeven < 1) {
timeText = Math.ceil(daysToBreakeven) + " วัน";
} else {
timeText = monthsToBreakeven.toFixed(1) + " เดือน";
}
document.getElementById('breakeven').innerText = timeText;
}
// Show Result Area
document.getElementById('resultArea').classList.remove('hidden');
}
</script>Share this content:
