<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EV Smart Charge - World Edition</title>
<style>
body { font-family: sans-serif; background: #f4f7f6; display: flex; justify-content: center; padding: 20px; }
.card { background: white; width: 100%; max-width: 500px; padding: 25px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; }
.lang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 25px; }
.lang-btn { border: 1px solid #eee; background: #fff; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 18px; transition: 0.2s; }
.lang-btn:hover { background: #f0f0f0; }
.lang-btn.active { border-color: #10b981; background: #e6fffa; }
h2 { color: #10b981; margin-bottom: 20px; }
input { width: 100%; padding: 12px; margin: 8px 0; border: 2px solid #f1f5f9; border-radius: 10px; box-sizing: border-box; font-size: 16px; }
.res-card { background: #10b981; color: white; padding: 20px; border-radius: 15px; margin-top: 20px; }
.res-val { font-size: 35px; font-weight: bold; margin: 5px 0; }
.footer { margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; font-size: 12px; color: #64748b; }
</style>
</head>
<body>
<div class="card">
<div class="lang-grid">
<button class="lang-btn active" title="ไทย" onclick="setL('th',this)">🇹🇭</button>
<button class="lang-btn" title="China" onclick="setL('cn',this)">🇨🇳</button>
<button class="lang-btn" title="USA" onclick="setL('en',this)">🇺🇸</button>
<button class="lang-btn" title="Germany" onclick="setL('de',this)">🇩🇪</button>
<button class="lang-btn" title="UK" onclick="setL('en',this)">🇬🇧</button>
<button class="lang-btn" title="France" onclick="setL('fr',this)">🇫🇷</button>
<button class="lang-btn" title="Canada" onclick="setL('en',this)">🇨🇦</button>
<button class="lang-btn" title="Belgium" onclick="setL('fr',this)">🇧🇪</button>
<button class="lang-btn" title="Netherlands" onclick="setL('nl',this)">🇳🇱</button>
<button class="lang-btn" title="Sweden" onclick="setL('sv',this)">🇸🇪</button>
<button class="lang-btn" title="South Korea" onclick="setL('ko',this)">🇰🇷</button>
<button class="lang-btn" title="Spain" onclick="setL('es',this)">🇪🇸</button>
<button class="lang-btn" title="Brazil" onclick="setL('pt',this)">🇧🇷</button>
<button class="lang-btn" title="Italy" onclick="setL('it',this)">🇮🇹</button>
<button class="lang-btn" title="Norway" onclick="setL('no',this)">🇳🇴</button>
<button class="lang-btn" title="Australia" onclick="setL('en',this)">🇦🇺</button>
<button class="lang-btn" title="Turkey" onclick="setL('tr',this)">🇹🇷</button>
<button class="lang-btn" title="Japan" onclick="setL('ja',this)">🇯🇵</button>
<button class="lang-btn" title="Denmark" onclick="setL('da',this)">🇩🇰</button>
<button class="lang-btn" title="India" onclick="setL('en',this)">🇮🇳</button>
</div>
<h2 id="title">EV Smart Charge</h2>
<input type="number" id="dist" placeholder="ระยะทาง (km)" oninput="calc()">
<input type="number" id="eff" placeholder="กินไฟ (kWh/100km)" oninput="calc()">
<input type="number" id="p1" placeholder="ราคาที่นี่" oninput="calc()">
<input type="number" id="p2" placeholder="ราคาบ้าน" oninput="calc()">
<div class="res-card">
<div id="r_title">จุดคุ้มทุนคือ</div>
<div class="res-val" id="res">0.00</div>
<div id="r_unit">หน่วย (kWh)</div>
</div>
<div class="footer">
<b>พิเศษสิฐ เสวีกุลวงศ์</b> (Phisesssit)<br>
<i>Powered by Gemini AI - Global Edition</i>
</div>
</div>
<script>
const langData = {
th: { t: "EV Smart Charge", d: "ระยะทาง (km)", e: "กินไฟ (kWh/100km)", p1: "ราคาที่นี่", p2: "ราคาบ้าน", rt: "จุดคุ้มทุนคือ", ru: "หน่วย (kWh)" },
en: { t: "EV Smart Charge", d: "Distance (km)", e: "Efficiency (kWh/100km)", p1: "Public Price", p2: "Home Price", rt: "Break-even Point", ru: "Units (kWh)" },
cn: { t: "电动车智能充电", d: "距离 (公里)", e: "能耗 (kWh/100km)", p1: "此处电价", p2: "家庭电价", rt: "盈亏平衡点", ru: "度 (kWh)" },
de: { t: "EV Smart Charge", d: "Strecke (km)", e: "Verbrauch (kWh/100km)", p1: "Öffentlicher Preis", p2: "Heimpreis", rt: "Break-Even-Punkt", ru: "Einheiten (kWh)" },
fr: { t: "EV Smart Charge", d: "Distance (km)", e: "Consommation (kWh/100km)", p1: "Prix public", p2: "Prix maison", rt: "Point mort", ru: "Unités (kWh)" },
it: { t: "EV Smart Charge", d: "Distanza (km)", e: "Consumo (kWh/100km)", p1: "Prezzo pubblico", p2: "Prezzo casa", rt: "Punto di pareggio", ru: "Unità (kWh)" },
ja: { t: "EVスマートチャージ", d: "距離 (km)", e: "効率 (kWh/100km)", p1: "公共料金", p2: "自宅料金", rt: "損益分岐点", ru: "単位 (kWh)" },
ko: { t: "EV 스마트 차지", d: "거리 (km)", e: "효율 (kWh/100km)", p1: "공공 요금", p2: "가정 요금", rt: "손익분기점", ru: "단위 (kWh)" },
es: { t: "EV Smart Charge", d: "Distancia (km)", e: "Eficiencia (kWh/100km)", p1: "Precio público", p2: "Precio casa", rt: "Punto de equilibrio", ru: "Unidades (kWh)" },
pt: { t: "EV Smart Charge", d: "Distância (km)", e: "Eficiência (kWh/100km)", p1: "Preço público", p2: "Preço casa", rt: "Ponto de equilíbrio", ru: "Unidades (kWh)" },
nl: { t: "EV Smart Charge", d: "Afstand (km)", e: "Efficiëntie (kWh/100km)", p1: "Openbare prijs", p2: "Thuisprijs", rt: "Break-even punt", ru: "Eenheden (kWh)" },
no: { t: "EV Smart Charge", d: "Avstand (km)", e: "Effektivitet (kWh/100km)", p1: "Offentlig pris", p2: "Hjemmepris", rt: "Nullpunkt", ru: "Enheter (kWh)" },
sv: { t: "EV Smart Charge", d: "Avstånd (km)", e: "Effektivitet (kWh/100km)", p1: "Offentligt pris", p2: "Hemma pris", rt: "Nollpunkt", ru: "Enheter (kWh)" },
tr: { t: "EV Smart Charge", d: "Mesafe (km)", e: "Verimlilik (kWh/100km)", p1: "Genel Fiyat", p2: "Ev Fiyatı", rt: "Başabaş Noktası", ru: "Birim (kWh)" },
da: { t: "EV Smart Charge", d: "Afstand (km)", e: "Effektivitet (kWh/100km)", p1: "Offentlig pris", p2: "Hjemmepris", rt: "Nulpunkt", ru: "Enheder (kWh)" }
};
function setL(l, btn) {
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const d = langData[l] || langData['en'];
// เปลี่ยนหัวข้อและข้อความแสดงผล
document.getElementById('title').innerText = d.t;
document.getElementById('r_title').innerText = d.rt;
document.getElementById('r_unit').innerText =
d.ru;
// เพิ่มการเปลี่ยน Placeholder ในช่องกรอกข้อมูล
document.getElementById('dist').placeholder = d.d;
document.getElementById('eff').placeholder = d.e;
document.getElementById('p1').placeholder = d.p1;
document.getElementById('p2').placeholder = d.p2;
calc();
}
function calc() {
const d = parseFloat(document.getElementById('dist').value) || 0;
const e = parseFloat(document.getElementById('eff').value) || 0;
const p1 = parseFloat(document.getElementById('p1').value) || 0;
const p2 = parseFloat(document.getElementById('p2').value) || 0;
const res = document.getElementById('res');
if (p1 > p2) res.innerText = (((d * e / 100) * p2) / (p1 - p2)).toFixed(2);
else res.innerText = "0.00";
}
</script>
</body>
</html>