<!DOCTYPE html>

<head>

<title>Okosító.hu - Szimbiózis Prototípus</title>

<style>

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f4f8; display: flex; flex-direction: column; align-items: center; padding: 20px; }

h1 { color: #2c3e50; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; width: 100%; max-width: 800px; }

.card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; cursor: pointer; transition: transform 0.2s; }

.card:hover { transform: translateY(-5px); background: #e8f0fe; }

.syllable { font-size: 1.5em; font-weight: bold; color: #3498db; }

.lang-selector { margin-bottom: 20px; }

select { padding: 10px; border-radius: 5px; font-size: 1em; }

</style>

</head>

<body>

<h1>Okosító.hu</h1>

<p>Kattints a szóra a kiejtéshez!</p>

<label for="lang">Nyelv / Language / 语言: </label>

<option value="hu-HU">Magyar</option>

<option value="en-US">English</option>

<option value="zh-CN">普通话 (Mandarin)</option>

</select>

</div>

const words = [

{ hu: "ma-ma", en: "mom", zh: "妈妈 (māma)" },

{ hu: "ma-mi", en: "mummy", zh: "妈咪 (māmī)" },

{ hu: "ma-ci", en: "teddy bear", zh: "泰迪熊 (tàidíxióng)" },

{ hu: "Mi-ci", en: "Mitzie", zh: "米齐 (mǐqí)" },

{ hu: "ci-ci", en: "boob", zh: "胸部 (xiōngbù)" },

{ hu: "étel", en: "food", zh: "食物 (shíwù)" },

{ hu: "víz", en: "water", zh: "水 (shuǐ)" },

{ hu: "ház", en: "house", zh: "房子 (fángzi)" },

{ hu: "tudás", en: "knowledge", zh: "知识 (zhīshì)" },

{ hu: "béke", en: "peace", zh: "和平 (hépíng)" }

];

const container = document.getElementById('content');

const langSelect = document.getElementById('lang');

function render() {

container.innerHTML = '';

const currentLang = langSelect.value.split('-')[0];

words.forEach(word => {

const div = document.createElement('div');

div.className = 'card';

const displayText = currentLang === 'hu' ? word.hu : (currentLang === 'en' ? word.en : word.zh);

div.innerHTML = `<div class="syllable">${displayText}</div>`;

div.onclick = () => speak(displayText, langSelect.value);

container.appendChild(div);

});

}

function speak(text, lang) {

const utterance = new SpeechSynthesisUtterance(text);

utterance.lang = lang;

window.speechSynthesis.speak(utterance);

}

langSelect.onchange = render;

render();

</script>

</body>

</html>