Code Kia Ora

<!DOCTYPE html>

<html lang="mi">

<head>

<meta charset="UTF-8">

<title>Hangaia Mihimihi</title>

<style>

body {

font-family: Arial, sans-serif;

font-size: 1.4em;

background-color: #fffde7;

padding: 20px;

}

label {

font-weight: bold;

margin-right: 10px;

}

select {

font-size: 1em;

margin: 10px 0;

}

#output {

margin-top: 30px;

font-size: 1.8em;

line-height: 1.5em;

}

.people { color: #0000FF; }

.informal { color: #C71585; }

.formal { color: #333333; }

.time { color: #8B4513; }

</style>

</head>

<body>

<h1>Hangaia Mihimihi</h1>

<label for="greeting">Kōwhiria he kupu mihimihi / poroporoaki:</label>

<select id="greeting" onchange="updatePeopleOptions()">

<optgroup label="Ngā Mihimihi Ngāwari (Informal Greetings)">

<option value="Mōrena|Good morning|informal">Mōrena</option>

<option value="Kia ora|Hi|informal">Kia ora</option>

<option value="Ata mārie|Good morning|informal">Ata mārie</option>

<option value="Pō mārie|Peaceful night|informal">Pō mārie</option>

</optgroup>

<optgroup label="Ngā Mihimihi Ōkawa (Formal Greetings)">

<option value="Tēnā koe|Formal greeting to 1 person|formal">Tēnā koe</option>

<option value="Tēnā kōrua|Formal greeting to 2 people|formal">Tēnā kōrua</option>

<option value="Tēnā koutou|Formal greeting to 3+ people|formal">Tēnā koutou</option>

<option value="Ngā mihi|Formal acknowledgement|formal">Ngā mihi</option>

<option value="Ngā mihi nui|Warm greetings|formal">Ngā mihi nui</option>

</optgroup>

<optgroup label="Ngā Poroporoaki Ngāwari (Informal Farewells)">

<option value="Ka kite|See you|informal">Ka kite</option>

<option value="Ka kite anō|See you again|informal">Ka kite anō</option>

<option value="Hei āpōpō|See you tomorrow|informal">Hei āpōpō</option>

<option value="Mā te wā|See you sometime|informal">Mā te wā</option>

<option value="Ka kite i a koe|See you (single)|informal">Ka kite i a koe</option>

</optgroup>

<optgroup label="Ngā Poroporoaki Ōkawa (Formal Farewells)">

<option value="Hei konā rā|Goodbye (to someone staying)|formal">Hei konā rā</option>

<option value="Hei konā|Goodbye (to someone staying)|formal">Hei konā</option>

<option value="Haere rā|Goodbye (to someone leaving)|formal">Haere rā</option>

<option value="E noho rā|Stay well (to someone staying)|formal">E noho rā</option>

<option value="Ngā mihi nui ki a koe|Farewell with respect|formal">Ngā mihi nui ki a koe</option>

</optgroup>

</select>

<br>

<label for="people">Kōwhiria te tangata / rōpū:</label>

<select id="people" onchange="updateTimeOptions()"></select>

<br>

<label for="timeRef">Kōwhiria te wā / poroporoaki āpiti:</label>

<select id="timeRef" onchange="buildSentence()"></select>

<div id="output"></div>

<script>

const options = {

greetings: {

people: {

"Tēnā koe": ["e hoa|my friend"],

"Tēnā kōrua": [

"māmā rāua ko pāpā|mum and dad",

"kuia rāua ko koro|grandmother and grandfather",

"kaiako rāua ko tumuaki|teacher and principal",

"tāku tama rāua ko tāku kōtiro|my son and my daughter"

],

"Tēnā koutou": [

"tamariki mā|children",

"ngā kaumātua|elders",

"ngā rangatahi|youth",

"e te whānau|family"

],

"default": [

"e hoa|my friend",

"tamariki mā|children",

"ngā kaumātua|elders",

"ngā rangatahi|youth",

"e te whānau|family"

]

},

followUps: {

"e hoa": ["Kei te pēhea koe?|How are you?"],

"tamariki mā": ["Kei te pēhea koutou?|How are you all?"],

"ngā kaumātua": ["Kei te pēhea koutou?|How are you all?"],

"ngā rangatahi": ["Kei te pēhea koutou?|How are you all?"],

"e te whānau": ["Kei te pēhea koutou?|How are you all?"]

},

formalWeather: [

"He rā pai tēnei.|It’s a good day",

"He rā ātaahua tēnei.|It’s a beautiful day",

"He rā mātao tēnei.|It’s a cold day",

"He rā paki tēnei.|It’s a fine day",

"He rā ua tēnei.|It’s a rainy day",

"He rā hauhau tēnei.|It’s a windy day",

"He rā makariri tēnei.|It’s a chilly day"

]

},

farewells: {

people: [

"e hoa|my friend",

"tamariki mā|children",

"ngā kaumātua|elders",

"ngā rangatahi|youth",

"e te whānau|family"

],

time: [

"Kia pai te rā|have a good day",

"Kia pai te wiki|have a good week",

"Kia pai te pō|have a good night"

]

}

};

function updatePeopleOptions() {

const greetingValue = document.getElementById("greeting").value;

const [greetM, , formality] = greetingValue.split("|");

const peopleSelect = document.getElementById("people");

peopleSelect.innerHTML = "";

let peopleList = [];

if (formality === "formal" && options.greetings.people[greetM]) {

peopleList = options.greetings.people[greetM];

} else {

const isFarewell = greetingValue.includes("Ka kite") || greetingValue.includes("Hei") || greetingValue.includes("Haere rā") || greetingValue.includes("E noho rā") || greetingValue.includes("Ngā mihi nui ki a koe");

peopleList = isFarewell ? options.farewells.people : options.greetings.people["default"];

}

peopleList.forEach(p => {

const [maori, eng] = p.split("|");

const opt = document.createElement("option");

opt.value = p;

opt.textContent = maori;

peopleSelect.appendChild(opt);

});

updateTimeOptions();

}

function updateTimeOptions() {

const [greetM, , formality] = document.getElementById("greeting").value.split("|");

const [personM, ] = document.getElementById("people").value.split("|");

const timeSelect = document.getElementById("timeRef");

timeSelect.innerHTML = "";

let timeList = [];

const isFarewell = [

"Ka kite", "Ka kite anō", "Hei āpōpō", "Mā te wā", "Ka kite i a koe",

"Hei konā rā", "Hei konā", "Haere rā", "E noho rā", "Ngā mihi nui ki a koe"

].includes(greetM);

if (formality === "informal" && !isFarewell) {

timeList = options.greetings.followUps[personM] || [];

} else if (formality === "formal" && !isFarewell) {

timeList = options.greetings.formalWeather;

} else {

timeList = options.farewells.time;

}

timeList.forEach(t => {

const [maori, eng] = t.split("|");

const opt = document.createElement("option");

opt.value = t;

opt.textContent = maori;

timeSelect.appendChild(opt);

});

buildSentence();

}

function buildSentence() {

const [greetM, greetE, formality] = document.getElementById("greeting").value.split("|");

const [peopleM, peopleE] = document.getElementById("people").value.split("|");

const [timeM, timeE] = document.getElementById("timeRef").value.split("|");

const maoriSentence = `<span class="${formality}">${greetM}</span> <span class="people">${peopleM}</span>, <span class="time">${timeM}</span>`;

const englishSentence = `<span class="${formality}">${greetE}</span> <span class="people">${peopleE}</span>, <span class="time">${timeE}</span>`;

document.getElementById("output").innerHTML = `

<div>${maoriSentence}</div>

<div>${englishSentence}</div>

`;

}

updatePeopleOptions();

</script>

</body>

</html>

Page updated

Google Sites

Report abuse