17 files changed, 611 insertions, 337 deletions

diff --git a/js/app.js b/js/app.js
index 98da025..cc206f9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -12,7 +12,6 @@ if (navigator.serviceWorker) {
         }
     });
 }
-if (location.protocol != 'https:')
-{
+if (location.protocol != 'https:') {
  location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
 }
diff --git a/js/initialize.js b/js/initialize.js
index d62e8d4..b64cbcc 100644
--- a/js/initialize.js
+++ b/js/initialize.js
@@ -21,7 +21,9 @@ function setupStorage() {
         localforage.setItem("absences", {}),
         localforage.setItem("messages", {}),
         localforage.setItem("directory", {}),
-        localforage.setItem("meals", {})
+        localforage.setItem("meals", {}),
+        // localforage.setItem("chosenCapitalize", true), // poor unused feature
+        localforage.setItem("chosenLang", "en")
     ];
 
     Promise.all(promises_to_run)
diff --git a/js/lang/bundle.js b/js/lang/bundle.js
new file mode 100644
index 0000000..98a5345
--- /dev/null
+++ b/js/lang/bundle.js
@@ -0,0 +1,391 @@
+// there's an DoS backdoor in BežiApp because of this (-:<
+var chosenLang;
+async function refreshLangDOM() {
+	let promises_to_runn = [
+		localforage.getItem("chosenLang").then( (value) => {
+			chosenLang = value;
+		})
+		// localforage.getItem("chosenCapitalize").then( (value) => { // poor unused code
+		// 	chosenCapitalize = value;
+		// })
+	];
+	await Promise.all(promises_to_runn);
+	// this could be done nicer. p. s.: lahko bi se uporablil x-s in x-S za razločitev med capitalize in !capitalize queryselectorall ni case sensitive za imena elementov
+	let stringContainerss = document.querySelectorAll("x-sl:not(.langFinished)");
+	for (i = 0; i < stringContainerss.length; i++) {
+		stringContainerss[i].innerHTML = s(stringContainerss[i].innerHTML);
+		stringContainerss[i].classList.add("langFinished");
+		stringContainerss[i].hidden = false;
+	}
+	let stringContainersd = document.querySelectorAll("x-dl:not(.langFinished)");
+	for (i = 0; i < stringContainersd.length; i++) {
+		stringContainersd[i].innerHTML = d(stringContainersd[i].innerHTML);
+		stringContainersd[i].classList.add("langFinished");
+		stringContainersd[i].hidden = false;
+	}
+	let stringContainersS = document.querySelectorAll("x-su:not(.langFinished)");
+	for (i = 0; i < stringContainersS.length; i++) {
+		stringContainersS[i].innerHTML = S(stringContainersS[i].innerHTML);
+		stringContainersS[i].classList.add("langFinished");
+		stringContainersS[i].hidden = false;
+	}
+	let stringContainersD = document.querySelectorAll("x-du:not(.langFinished)");
+	for (i = 0; i < stringContainersD.length; i++) {
+		stringContainersD[i].innerHTML = D(stringContainersD[i].innerHTML);
+		stringContainersD[i].classList.add("langFinished");
+		stringContainersD[i].hidden = false;
+	}
+}
+async function setLangConfigAndReload() {
+	let promises_to_run = [
+		/* localforage.setItem("chosenCapitalize", true), */ // F for unused code
+		localforage.setItem("chosenLang", "en")
+	];
+	await Promise.all(promises_to_run);
+	window.location.reload();
+}
+window.addEventListener('DOMContentLoaded', (event) => {
+	refreshLangDOM();
+	localforage.getItem("chosenLang").then( (value) => {
+			if(value == null) {
+				setLangConfigAndReload();
+			}
+		}
+	);
+});
+const capitalize = (s) => {
+  if (typeof s !== 'string') return ''
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+var s = function(whatString) {
+	return getLang.s(whatString);
+};
+var d = function(whatString) {
+	return getLang.d(whatString);
+};
+var S = function(whatString) {
+	return getLang.S(whatString);
+};
+var D = function(whatString) {
+	return getLang.D(whatString);
+};
+var getLang = { // language object
+	s: function(whatString) { // get string
+		return langstrings[chosenLang][whatString];
+	},
+	S: function(whatString) { // get capitalized string
+		return capitalize(langstrings[chosenLang][whatString]);
+	},
+	d: function(whatString) { // add a dot and get string
+		if(langstrings[chosenLang][whatString].slice(-1) != ".") {
+			return langstrings[chosenLang][whatString]+".";
+		} else {
+			return langstrings[chosenLang][whatString];
+		}
+	},
+	D: function(whatString) { // add a dot and get capitalized string
+		if(langstrings[chosenLang][whatString].slice(-1) != ".") {
+			return capitalize(langstrings[chosenLang][whatString]+".");
+		} else {
+			return capitalize(langstrings[chosenLang][whatString]);
+		}
+	},
+}
+var langstrings = {
+	en: {
+		miscTranslationLanguage: "English",
+		miscTranslationAuthors: "Rok Štular",
+		// date
+		monday: "monday",
+		tuesday: "tuesday",
+		wednesday: "wednesday",
+		thursday: "thursday",
+		friday: "friday",
+		saturday: "saturday",
+		sunday: "sunday",
+		am: "am",
+		pm: "pm",
+		january: "january",
+		february: "february",
+		march: "march",
+		april: "april",
+		may: "may",
+		june: "june",
+		july: "july",
+		august: "august",
+		september: "september",
+		october: "october",
+		november: "november",
+		december: "december",
+		// login
+		username: "username",
+		password: "password",
+		signIn: "sign in",
+		bySigningInYouAgreeTo: "by signing in, you agree to",
+		theToS: "the terms and conditions",
+		and: "and",
+		thePrivacyPolicy: "the privacy policy",
+		// index
+		timetable: "timetable",
+		gradings: "gradings",
+		grades: "grades",
+		teachers: "teachers",
+		absences: "absences",
+		messaging: "messaging",
+		meals: "meals",
+		about: "about",
+		logout: "logout",
+		// gradings
+		requestFailed: "request failed",
+		noInternetConnection: "no internet connection",
+		// grades
+		temporary: "temporary",
+		useOnlyPermanentGrades: "use only permanent grades",
+		useOnlyPermanentGradesNote1: "if checked, only permanent grades will be used in the average grade calculation",
+		useOnlyPermanentGradesNote2: "if left unchecked, the calculation will include every available grade",
+		type: "type",
+		// teachers
+		name: "name",
+		schoolSubject: "subject",
+		tpMeetings: "TP meetings",
+		// absences
+		from: "from",
+		to: "to",
+		cancel: "cancel",
+		ok: "ok",
+		noAbsences: "no absences in the chosen time period",
+		// messaging
+		sendAMessage: "send a message",
+		recipient: "recipient",
+		messageSubject: "subject",
+		messageBody: "message body",
+		removeImages: "remove images",
+		note: "note",
+		largeImagesNote: "GimB servers don't like large messages, so only very small images may be attached or your message will not be delivered",
+		attachedImages: "attached images",
+		passwordForE2EE: "password for encrypting the message",
+		messages: "messages",
+		received: "received",
+		sent: "sent",
+		deleted: "deleted",
+		messageStorageUsed: "message storage used in this folder",
+		maxMessagesNote: "you can only have 120 messages per message folder, older messages will not be shown. Remember to delete read and sent messages regulary to avoid any issues.",
+		loadMessageBody: "load message body",
+		thisMessageWasEncrypted: "this message was encrypted by BežiApp",
+		enterPassword: "enter password",
+		decrypt: "decrypt",
+		nameDirecroryNotSet: "name directory not set, sending unavailable",
+		errorFetchingMessages: "error fetching messages",
+		unableToReceiveTheMessage: "unable to receive the message",
+		unableToDeleteTheMessage: "unable to delete the message",
+		messageWasProbablySent: "message was probably sent, check the Sent folder to be sure",
+		errorSendingMessage: "error sending message",
+		imageAddedAsAnAttachment: "image added as an attachment",
+		unableToReadDirectory: "unable to read directory of people",
+		messageCouldNotBeSent: "message could to be sent",
+		// meals
+		loginToLopolis: "login to Lopolis",
+		loginToLopolisNote: "it seems like you're not currently logged in to eRestavracija, so this form has been presented to you. You have a different username and password combination used for applying and opting out of of menus. In order to use this feature, you have to log in with your Lopolis account.",
+		logInToLopolis: "log in to Lopolis",
+		logOutFromLopolis: "log out from Lopolis",
+		readOnly: "read only",
+		usage: "usage",
+		mealsUsageNote: "click on a date to open the collapsible menu with choices and click on a specific meal to select it. Reload the meals when you're done and check the entries.",
+		lunchesNote: "app was not tested with lunches in mind. Meals probably won't work with lunches and having a lunch subscription may even break its functionality.",
+		mealNotShownNote: "if a meal is not present in the meals collapsible field, this does not necessarily mean it does not exist. Meals that haven't been altered by you and are unchangable (read-only) are not shown for clarity.",
+		mealsContributeNote: "you are welcome to contribute to the LopolisAPI project and add features, such as checkouts.",
+		authenticationError: "authentication error",
+		lopolisAPIConnectionError: "LopolisAPI server connection error",
+		errorGettingMenus: "error getting menus",
+		errorUnexpectedResponse: "error: unexpected response",
+		requestForAuthenticationFailed: "request for authentication failed",
+		credentialsMatch: "credentials match",
+		errorSettingMeals: "error setting meals",
+		mealSet: "meal set! Reload meals to be sure",
+		// about
+		version: "version",
+		authors: "authors",
+		translatorsForThisLanguage: "translators for this language",
+		whatIsNew: "what's new",
+		whatsNew: "what's new",
+		reportABug: "report a bug",
+		sendASuggestion: "send a suggestion",
+		instagram: "instagram",
+		// changelog
+		changelog: "changelog",
+		// terms and conditions
+		termsOfUse: "terms of use",
+		termsOfUseDescription: "as a condition of use, you promise not to use the BežiApp (App or application) and its related infrastructure (API, hosting service) for any purpose that is unlawful or prohibited by these Terms, or any other purpose not reasonably intended by the authors of the App. By way of example, and not as a limitation, you agree not to use the App",
+		termsOfUseHarass: "to abuse, harass, threaten, impersonate or intimidate any person",
+		termsOfUsePost: "to post or transmit, or cause to be posted or transmitted, any Content that is libelous, defamatory, obscene, pornographic, abusive, offensive, profane or that infringes any copyright or other right of any person",
+		termsOfUseCommunicate: "to communicate with the App developers or other users in abusive or offensive manner",
+		termsOfUsePurpose: "for any purpose that is not permitted under the laws of the jurisdiction where you use the App",
+		termsOfUseExploit: "to post or transmit, or cause to be posted or transmitted, any Communication designed or intended to obtain password, account or private information of any App user",
+		termsOfUseSpam: "to create or transmit unwanted “spam” to any person or any URL",
+		termsOfUseModify: "you may also not reverse engineer, modify or redistribute the app without written consent from the developers",
+		terminationOfServices: "termination of services",
+		terminationOfServicesDescriptions: "the developers of the App may terminate your access to the App without any prior warning or notice for any of the following reasons",
+		terminationOfServicesBreaching: "breaching the Terms of Service",
+		terminationOfServicesRequest: "receiving a formal request from authorities of Gimnazija Bežigrad administration requesting termination of your access to the App",
+		limitationOfLiability: "limitation of Liability",
+		limitationOfLiabilityContent: "the developers of the App provide no warranty; You expressly acknowledge and agree that the use of the licensed application is at your sole risk. To the maximum extent permited by applicable law, the licensed application and any services performed of provided by the licensed application are provided “as is” and “as available”, with all faults and without warranty of any kind, and licensor hereby disclaims all warranties and conditions with respect to the licensed application and any services, either express, implied or statutory, including, but not limited to, the implied warranties and/or conditions of merchantability, of satisfactory quality, of fitness for a particular purpose, of accuracy, of quiet enjoyment, and of noninfringement of third-party rights. No oral or written information or advice given by licensor or its authorized representative shall create a warranty. Should the licensed application or services prove defective, you assume the entire cost of all necessary servicing, repair or correction. Some jurisdictions do not allow the exclusion of the implied warranties or limitations on applicable statutory rights of a customer, so the above exclusion may not apply to you.",
+		tosAreEffectiveAsOf: "the Terms of Service are effective as of",
+		// privacy policy
+		privacyImportant: "your privacy is important to us. It is the developers' policy to respect your privacy regarding any information we may collect from you through our app, BežiApp.",
+		privacyOnlyAskedWhen: "we only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.",
+		privacyDataCollection: "we only retain collected information for as long as necessary to provide you with your requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorized access, disclosure, copying, use or modification.",
+		privacySharingData: "we don’t share any personally identifying information publicly or with third-parties, except when required to by law",
+		privacyExternalSites: "our app may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.",
+		privacyRefuse: "you are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services.",
+		privacyAcceptWithUse: "your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.",
+		privacyEffectiveAsOf: "this policy is effective as of"
+	},
+	sl: {
+		miscTranslationLanguage: "slovenščina",
+		miscTranslationAuthors: "Anton Luka Šijanec",
+		// date
+		monday: "ponedeljek",
+		tuesday: "torek",
+		wednesday: "sreda",
+		thursday: "četrtek",
+		friday: "petek",
+		saturday: "sobota",
+		sunday: "nedelja",
+		am: "dop.",
+		pm: "pop.",
+		january: "januar",
+		february: "februar",
+		march: "marec",
+		april: "april",
+		may: "maj",
+		june: "junij",
+		july: "julij",
+		august: "avgust",
+		september: "september",
+		october: "oktober",
+		november: "november",
+		december: "december",
+		// login
+		username: "uporabniško ime",
+		password: "geslo",
+		signIn: "prijava",
+		bySigningInYouAgreeTo: "s prijavo se strinjate s",
+		theToS: "pogoji uporabe (v angleščini)",
+		and: "in",
+		thePrivacyPolicy: "politika zasebnosti (v angleščini)",
+		// index
+		timetable: "urnik",
+		gradings: "ocenjevanja",
+		grades: "ocene",
+		teachers: "profesorji",
+		absences: "izostanki",
+		messaging: "sporočanje",
+		meals: "obroki",
+		about: "o",
+		logout: "odjava",
+		// gradings
+		requestFailed: "zahteva spodletela",
+		noInternetConnection: "ni povezave s spletom",
+		// grades
+		temporary: "zacasno",
+		useOnlyPermanentGrades: "uporabi le stalne ocene",
+		useOnlyPermanentGradesNote1: "če je označeno, bodo za izračun povprečja uporabljene le stalne ocene",
+		useOnlyPermanentGradesNote2: "če pa je polje neoznačeno, pa se ob izračunu povprečne ocene upoštevajo vse ocene",
+		type: "tip",
+		// teachers
+		name: "ime",
+		schoolSubject: "predmet",
+		tpMeetings: "govorilne ure",
+		// absences
+		from: "od",
+		to: "do",
+		cancel: "preklic",
+		ok: "v redu",
+		noAbsences: "ni izostankov v izbranem časovnem obdobju",
+		// messaging
+		sendAMessage: "pošlji sporočilo",
+		recipient: "prejemnik",
+		messageSubject: "zadeva",
+		messageBody: "telo",
+		removeImages: "odstrani slike",
+		note: "opomba",
+		largeImagesNote: "GimB strežniki ne marajo velikih sporočil, zato lahko pošiljate le zelo male slike, v nasprotnem primeru sporočilo ne bo dostavljeno",
+		attachedImages: "pripete slike",
+		passwordForE2EE: "geslo za šifriranje sporočila",
+		messages: "sporočila",
+		received: "prejeta",
+		sent: "poslana",
+		deleted: "izbrisana",
+		messageStorageUsed: "zasedenost shrambe sporočil v tej mapi",
+		maxMessagesNote: "v vsaki mapi imate lahko največ sto dvajset sporočil. Starejša sporočila ne bodo prikazana. Redno brišite sporočila, da se izognete morebitnim težavam.",
+		loadMessageBody: "naloži telo sporočila",
+		thisMessageWasEncrypted: "to sporočilo je šifriral BežiApp",
+		enterPassword: "vnesite geslo",
+		decrypt: "odšifriraj",
+		nameDirecroryNotSet: "imenik ni nastavljen, pošiljanje ni mogoče",
+		errorFetchingMessages: "sporočil ni bilo mogoče prenesti",
+		unableToReceiveTheMessage: "sporočila ni bilo mogoče prenesti",
+		unableToDeleteTheMessage: "sporočila ni bilo mogoče izbrisati",
+		messageWasProbablySent: "sporočilo je bilo verjetno poslano, prepričajte se in preverite mapo s poslanimi sporočili",
+		errorSendingMessage: "sporočila ni bilo mogoče poslati",
+		imageAddedAsAnAttachment: "slika dodana kot priloga",
+		unableToReadDirectory: "imenika ni bilo mogoče prebrati",
+		messageCouldNotBeSent: "sporočila ni bilo mogoče poslati",
+		// meals
+		loginToLopolis: "prijava v Lopolis",
+		loginToLopolisNote: "izgleda, da niste prijavljeni v eRestavracijo, zato se vam je prikazal prijavni obrazec. Za uporavljanje s prehrano se uporablja druga kombinacija uporabniškega imena in gesla, zato se prijavite s svojimi Lopolis prijavnimi podatki za nadaljevanje.",
+		logInToLopolis: "prijava v Lopolis",
+		logOutFromLopolis: "odjava iz Lopolisa",
+		readOnly: "samo za branje",
+		usage: "uporaba",
+		mealsUsageNote: "kliknite na datum za prikaz menijev, nato pa si enega izberite s klikom na ime menija. Po nastavitvi menijev ponovno naložite menije in se prepričajte o pravilnih nastavitvah.",
+		lunchesNote: "aplikacija ni testirana za naročanje na koslila, zato verjetno to ne deluje. Če ste naročeni na kosila lahko naročanje na menije sploh ne deluje ali pa deluje narobe.",
+		mealNotShownNote: "če nek dan manjka med meniji, to verjetno pomeni, da ni več spremenljiv in zanj niste ročno spremenili menija",
+		mealsContributeNote: "vabimo vas k urejanju LopolisAPI programa za upravljanje z meniji.",
+		authenticationError: "napaka avtentikacije",
+		lopolisAPIConnectionError: "napaka povezave na LopolisAPI strežnik",
+		errorGettingMenus: "napaka branja menijev",
+		errorUnexpectedResponse: "napaka: nepričakovan odgovor",
+		requestForAuthenticationFailed: "zahteva za avtentikacijo ni uspela",
+		credentialsMatch: "prijavni podatki so pravilni",
+		errorSettingMeals: "napaka pri nastavljanju menijev",
+		mealSet: "obrok nastavljen! osvežite obroke in se prepričajte sami",
+		// about
+		version: "različica",
+		authors: "avtorji",
+		translatorsForThisLanguage: "prevajalci izbranega jezika",
+		whatIsNew: "kaj je novega",
+		whatsNew: "kaj je novega",
+		reportABug: "prijavite napako ali hrošča",
+		sendASuggestion: "pošljite pripombo/predlog/pohvalo/pritožbo",
+		instagram: "instagram",
+		// changelog
+		changelog: "dnevnik sprememb",
+		// terms and conditions
+		termsOfUse: "terms of use",
+		termsOfUseDescription: "as a condition of use, you promise not to use the BežiApp (App or application) and its related infrastructure (API, hosting service) for any purpose that is unlawful or prohibited by these Terms, or any other purpose not reasonably intended by the authors of the App. By way of example, and not as a limitation, you agree not to use the App",
+		termsOfUseHarass: "to abuse, harass, threaten, impersonate or intimidate any person",
+		termsOfUsePost: "to post or transmit, or cause to be posted or transmitted, any Content that is libelous, defamatory, obscene, pornographic, abusive, offensive, profane or that infringes any copyright or other right of any person",
+		termsOfUseCommunicate: "to communicate with the App developers or other users in abusive or offensive manner",
+		termsOfUsePurpose: "for any purpose that is not permitted under the laws of the jurisdiction where you use the App",
+		termsOfUseExploit: "to post or transmit, or cause to be posted or transmitted, any Communication designed or intended to obtain password, account or private information of any App user",
+		termsOfUseSpam: "to create or transmit unwanted “spam” to any person or any URL",
+		termsOfUseModify: "you may also not reverse engineer, modify or redistribute the app without written consent from the developers",
+		terminationOfServices: "termination of services",
+		terminationOfServicesDescriptions: "the developers of the App may terminate your access to the App without any prior warning or notice for any of the following reasons",
+		terminationOfServicesBreaching: "breaching the Terms of Service",
+		terminationOfServicesRequest: "receiving a formal request from authorities of Gimnazija Bežigrad administration requesting termination of your access to the App",
+		limitationOfLiability: "limitation of Liability",
+		limitationOfLiabilityContent: "the developers of the App provide no warranty; You expressly acknowledge and agree that the use of the licensed application is at your sole risk. To the maximum extent permited by applicable law, the licensed application and any services performed of provided by the licensed application are provided “as is” and “as available”, with all faults and without warranty of any kind, and licensor hereby disclaims all warranties and conditions with respect to the licensed application and any services, either express, implied or statutory, including, but not limited to, the implied warranties and/or conditions of merchantability, of satisfactory quality, of fitness for a particular purpose, of accuracy, of quiet enjoyment, and of noninfringement of third-party rights. No oral or written information or advice given by licensor or its authorized representative shall create a warranty. Should the licensed application or services prove defective, you assume the entire cost of all necessary servicing, repair or correction. Some jurisdictions do not allow the exclusion of the implied warranties or limitations on applicable statutory rights of a customer, so the above exclusion may not apply to you.",
+		tosAreEffectiveAsOf: "the Terms of Service are effective as of",
+		// privacy policy
+		privacyImportant: "your privacy is important to us. It is the developers' policy to respect your privacy regarding any information we may collect from you through our app, BežiApp.",
+		privacyOnlyAskedWhen: "we only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.",
+		privacyDataCollection: "we only retain collected information for as long as necessary to provide you with your requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorized access, disclosure, copying, use or modification.",
+		privacySharingData: "we don’t share any personally identifying information publicly or with third-parties, except when required to by law",
+		privacyExternalSites: "our app may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.",
+		privacyRefuse: "you are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services.",
+		privacyAcceptWithUse: "your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.",
+		privacyEffectiveAsOf: "this policy is effective as of"
+	},
+}
diff --git a/js/meals.js b/js/meals.js
index ec810f3..e41756b 100644
--- a/js/meals.js
+++ b/js/meals.js
@@ -3,7 +3,7 @@ const jsDateDayString = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
 const jsDateMonthString = ["January", "February", "March", "April", "May", "June", "July", "August", "October", "November", "December"];
 async function checkLogin() {
 	localforage.getItem("logged_in_lopolis").then((value) => {
-		if (value !== true) {
+		if (value != true) {
 			document.getElementById("meals-container").hidden = true;
 			document.getElementById("meals-login").hidden = false;
 		} else {
diff --git a/login.html b/login.html
index 576506d..840856d 100644
--- a/login.html
+++ b/login.html
@@ -20,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -40,22 +41,22 @@
             <div class="row">
                 <div class="input-field col s12">
                     <input id="username" type="text" class="validate">
-                    <label for="username">GimSIS username</label>
+                    <label for="username">GimSIS <x-sl>username</x-sl></label>
                 </div>
             </div>
             <div class="row">
                 <div class="input-field col s12">
                     <input autocomplete="new-password" id="password" type="password" class="validate">
-                    <label for="password">Password</label>
+                    <label for="password"><x-su>password</x-su></label>
                 </div>
             </div>
             <div class="row">
-                <button id="login-button" class="btn waves-effect waves-light">Sign in</button>
+                <button id="login-button" class="btn waves-effect waves-light"><x-sl>signIn</x-sl></button>
             </div>
             <div class="row">
-                <p class="grey-text text-darken-2">By signing in, you agree to the <a href="/pages/tos.html">terms and
-                        conditions</a>
-                    and the <a href="/pages/privacypolicy.html">privacy policy</a>.</p>
+                <p class="grey-text text-darken-2"><x-su>bySigningInYouAgreeTo</x-su> <a href="/pages/tos.html"><x-sl>theToS</x-sl></a> <x-sl>and</x-sl>
+									<a href="/pages/privacypolicy.html"><x-dl>thePrivacyPolicy</x-dl></a>
+								</p>
             </div>
         </div>
     </div>
diff --git a/pages/about.html b/pages/about.html
index 2f41d45..73826a0 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -1,5 +1,4 @@
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -21,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -32,7 +32,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; About
+            <b>Beži</b><span>App</span> &raquo; <x-su>about</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -48,24 +48,24 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a></li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
-        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+				<li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
+        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
+        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i><x-su>teachers</x-su></a></li>
+        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
     </ul>
 
@@ -81,7 +81,7 @@
             <div class="col s12">
                 <ul class="collection with-header">
                     <li class="collection-header">
-                        <h5>Authors</h5>
+                        <h5><x-su>authors</x-su></h5>
                     </li>
                     <li class="collection-item avatar">
                         <img src="/img/avatars/rstular.png" class="circle">
@@ -112,12 +112,25 @@
         </div>
         <div class="row">
             <div class="col s12">
+                <ul class="collection with-header">
+                    <li class="collection-header">
+                        <h5><x-su>translatorsForThisLanguage</x-su> - <x-su>miscTranslationLanguage</x-su></h5>
+                    </li>
+                    <li class="collection-item avatar">
+                        <span class="title about-text"><x-su>miscTranslationAuthors</x-su></span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col s12">
                 <div class="collection">
-                    <a href="/pages/changelog.html" class="collection-item">What's new</a>
-                    <a href="/pages/tos.html" class="collection-item">Terms of Service</a>
-                    <a href="/pages/privacypolicy.html" class="collection-item">Privacy policy</a>
-                    <a href="https://instagram.com/beziapp/" target="_blank" class="collection-item">Report a bug / Send
-                        a suggestion (instagram: @beziapp)</a>
+                    <a href="/pages/changelog.html" class="collection-item"><x-su>whatIsNew</x-su></a>
+                    <a href="/pages/tos.html" class="collection-item"><x-su>theToS</x-su></a>
+                    <a href="/pages/privacypolicy.html" class="collection-item"><x-su>thePrivacyPolicy</x-su></a>
+                    <a href="https://instagram.com/beziapp/" target="_blank" class="collection-item">
+											<x-su>reportABug</x-su> / <x-su>sendASuggestion</x-su> (<x-su>instagram></x-su>: @beziapp)
+										</a>
                 </div>
             </div>
         </div>
diff --git a/pages/absences.html b/pages/absences.html
index adf957c..477ce88 100644
--- a/pages/absences.html
+++ b/pages/absences.html
@@ -20,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -31,7 +32,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Absences
+            <b>Beži</b><span>App</span> &raquo; <x-su>absences</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -50,27 +51,25 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a>
-        </li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
-        <li><a href="/pages/teachers.html" class="waves-effect"><i
-                    class="material-icons">supervisor_account</i>Teachers</a></li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a>
-        </li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+	
+        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
+        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
+        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i><x-su>teachers</x-su></a></li>
+        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
     </ul>
 
@@ -79,11 +78,11 @@
         <div class="row">
             <div class="col s6 l6">
                 <input type="text" class="datepicker" id="datepicker-from">
-                <label for="datepicker-from">From</label>
+                <label for="datepicker-from"><x-su>from</x-su></label>
             </div>
             <div class="col s6 l6">
                 <input type="text" class="datepicker" id="datepicker-to">
-                <label for="datepicker-to">To</label>
+                <label for="datepicker-to"><x-su>to</x-su></label>
             </div>
         </div>
         <div class="row">
@@ -96,4 +95,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/changelog.html b/pages/changelog.html
index e82c09c..e77e0ed 100644
--- a/pages/changelog.html
+++ b/pages/changelog.html
@@ -1,5 +1,4 @@
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -21,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -32,7 +32,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Changelog
+            <b>Beži</b><span>App</span> &raquo; <x-su>changelog</x-su>
             <span class="right white-text" id="nav-back-button">
                 <i class="material-icons">arrow_back</i>
             </span>
@@ -44,10 +44,10 @@
 
     <div class="container">
         <div class="row">
-            <h3>Changelog</h3>
+            <h3><x-su>changelog</x-su></h3>
             <ul class="collapsible">
                 <li>
-                    <div class="collapsible-header">Version 1.0.10-beta</div>
+                    <div class="collapsible-header">Version 1.0.11-beta</div> <!-- i think -->
                     <div class="collapsible-body">
                         <ul class="collection">
                             <li class="collection-item">Added end-to-end encrypton support to messaging</li>
diff --git a/pages/grades.html b/pages/grades.html
index 8c8350b..6541f5b 100644
--- a/pages/grades.html
+++ b/pages/grades.html
@@ -20,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -31,7 +32,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Grades
+            <b>Beži</b><span>App</span> &raquo; <x-su>grades</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -50,27 +51,24 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a>
-        </li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
-        <li><a href="/pages/teachers.html" class="waves-effect"><i
-                    class="material-icons">supervisor_account</i>Teachers</a></li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a>
-        </li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
+        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
+        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i><x-su>teachers</x-su></a></li>
+        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
     </ul>
 
@@ -96,9 +94,9 @@
 
     <div id="help-modal" class="modal bottom-sheet">
         <div class="modal-content">
-            <h4>Use only permanent grades</h4>
-            <p>If checked, only permanent grades will be used in the average grade calculation.</p>
-            <p>If left unchecked, the calculation will include every available grade.</p>
+            <h4><x-su>useOnlyPermanentGrades</x-su></h4>
+            <p><x-du>useOnlyPermanentGradesNote1</x-du></p>
+            <p><x-du>useOnlyPermanentGradesNote2</x-du></p>
         </div>
         <!-- <div class="modal-footer">
             <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
@@ -107,17 +105,19 @@
 
     <br>
     <div class="container">
-        <p>
-            <label>
-                <input id="permanent-grades-checkbox" class="no-select" type="checkbox" />
-                <span style="vertical-align: sub;">Use only permanent grades <a id="help-icon" class="modal-trigger"
-                        href="#help-modal"><i class="material-icons"
-                            style="vertical-align: sub;">help_outline</i></a></span>
-
-            </label></p>
+ 				<p>
+					<label>
+						<input id="permanent-grades-checkbox" class="no-select" type="checkbox" />
+						<span style="vertical-align: sub;"><x-su>useOnlyPermanentGrades</x-su>
+							<a id="help-icon" class="modal-trigger" href="#help-modal">
+								<i class="material-icons" style="vertical-align: sub;">help_outline</i>
+							</a>
+						</span>
+					</label>
+				</p>
         <ul class="collapsible" id="grades-collapsible"></ul>
     </div>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/gradings.html b/pages/gradings.html
index b54ddc2..56d244e 100644
--- a/pages/gradings.html
+++ b/pages/gradings.html
@@ -27,6 +27,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -38,7 +39,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Gradings
+            <b>Beži</b><span>App</span> &raquo; <x-su>gradings</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -57,27 +58,24 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a>
-        </li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
-        <li><a href="/pages/teachers.html" class="waves-effect"><i
-                    class="material-icons">supervisor_account</i>Teachers</a></li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a>
-        </li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+				<li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
+				<li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+				<li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
+				<li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i><x-su>teachers</x-su></a></li>
+				<li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
     </ul>
 
@@ -134,4 +132,4 @@
 -->
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/meals.html b/pages/meals.html
index 36ba07b..28070e9 100644
--- a/pages/meals.html
+++ b/pages/meals.html
@@ -1,5 +1,4 @@
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -21,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -32,7 +32,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Meals
+            <b>Beži</b><span>App</span> &raquo; <x-su>meals</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -51,77 +51,53 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a></li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
-        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
+        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
+        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i><x-su>teachers</x-su></a></li>
+        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
-        </li>
-    </ul>
-
-    <ul id="grade-info" class="sidenav side-modal">
-        <br>
-        <li><a class="header">
-                <h5 id="meal-header"></h5>
-            </a></li>
-        <br>
-        <li id="meal-subheader-root"><a class="subheader">
-                <h6 id="meal-subheader"></h6>
-            </a></li>
-        <li><a class="subheader" id="meal-date">
-            </a></li>
-        <li>
-            <div class="divider"></div>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
-        <li><a class="waves-effect" id="meal-option1"></a></li>
-        <li><a class="waves-effect" id="meal-option2"></a></li>
-        <li><a class="waves-effect" id="meal-option3"></a></li>
-        <li><a class="waves-effect" id="meal-option4"></a></li>
-        <li><a class="waves-effect" id="meal-option5"></a></li>
-        <li><a class="waves-effect" id="meal-option6"></a></li>
-        <li><a class="waves-effect" id="meal-option7"></a></li>
     </ul>
 
     <br>
     <div class="container login" hidden="hidden" id="meals-login">
-	<h4>Login to Lopolis</h4>
+	<h4><x-su>loginToLopolis</x-su></h4>
 	<p>
-		It seems like you're not currently logged in to eRestavracija, so this form has been presented to you. You have a different username and password combination used
-		for applying and opting out from menus. In order to use this feature, you have to log in with your Lopolis account.
+		<x-du>loginToLopolisNote</x-du>
 	</p>
 	  <div class="row">
 	    <div class="col s12">
 	      <div class="row">
 	        <div class="input-field col s12">
 	          <input id="meals_username" type="text" value="" required="required" name="meals_password" class="validate">
-	          <label for="meals_username">Lopolis username</label>
+	          <label for="meals_username">Lopolis <x-su>username</x-su></label>
 	        </div>
 	      </div>
 	      <div class="row">
 	        <div class="input-field col s12">
 	          <input autocomplete="new-password" id="meals_password" type="password" value="" required="required" name="meals_password" class="validate">
-	          <label for="meals_password">Lopolis password</label>
+	          <label for="meals_password">Lopolis <x-su>password</x-su></label>
 	        </div>
 	      </div>
 	      <div class="row">
 	        <div class="input-field col s12">
 	          <button id="meals_login" type="button" class="waves-effect waves-light btn" onclick="lopolisLogin();">
-			Log in to Lopolis
-			<i class="material-icons right">arrow_right_alt</i>
-		  </button>
+							<x-su>loginToLopolis</x-su>
+							<i class="material-icons right">arrow_right_alt</i>
+		  			</button>
 	        </div>
 	      </div>
 	    </div>
@@ -130,58 +106,32 @@
     <div class="meals-container container" hidden="hidden" id="meals-container">
 	<h4>Meals
 		<button id="meals_logout" onclick="lopolisLogout();" type="button" class="waves-effect waves-light btn" style="float: right">
-	           Log out from Lopolis
-        	   <i class="material-icons right">exit_to_app</i>
-	        </button>
+			<x-su>logOutFromLopolis</x-su>
+			<i class="material-icons right">exit_to_app</i>
+		</button>
 	</h4>
 	<ul id="meals-collapsible" class="collapsible"></ul>
-	<!--
-		<div class="row">
-			<div class="input-field col s4">
-				<input type="text" class="datepicker" id="datepicker-from">
-				<label for="datepicker-from" class="active">Date</label>
-			</div>
-			<div class="input-field col s4">
-				<select>
-					<option value="" disabled selected>Meal type</option>
-					<option value="Malica">Malica</option>
-					<option value="Kosilo">Kosilo</option>
-				</select>
-				<label>Meal type</label>
-			</div>
-			<div class="input-field col s4">
-				<button id="meals_checkout" href="#meals_checkout-warning-modal" type="button" class="modal-trigger waves-effect waves-light btn" style="float: right">
-					Checkout from a meal
-					<i class="material-icons right">trending_up</i>
-				</button>	
-			</div>
-		</div>
-	<h4>Checkouts</h4>
-	
-	<hr>
-	-->
 	<p>
 		<small>
 			<b>
-				Usage:
+				<x-su>usage</x-su>:
 			</b>
-			Click on a date to open the collapsible menu with choices and click on a specific meal to select it. Reload the meals when you're done and check the entries.
+			<x-du>mealsUsageNote</x-du>
 			<br>
 			<b>
-				Note:
+				<x-su>note</x-su>:
 			</b>
-			App was not tested with lunches in mind. Meals probably won't work with lunches and having a lunch subscription may even break its functionality.
+			<x-du>lunchesNote</x-du>
 			<br>
 			<b>
-				Note:
+				<x-su>note</x-su>:
 			</b>
-			If a meal is not present in the Meals collapsible field, this does not necessarily mean it does not exist. Meals that haven't been altered by you or are unchangable
-			(read-only) are not shown for clarity.
+			<x-du>mealNotShownNote</x-du>
 			<br>
 			<b>
 				Note:
 			</b>
-			You are welcome to contribute to the <a href="https://github.com/rstular/lopolis-api/" target="_blank">LopolisAPI project source (py)</a> and add features, such as checkouts.
+				<x-du>mealsContributeNote</x-du>
 		</small>
 	</p>
 	</div>
diff --git a/pages/messaging.html b/pages/messaging.html
index 1ebe322..4a97fb6 100644
--- a/pages/messaging.html
+++ b/pages/messaging.html
@@ -1,5 +1,4 @@
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -20,6 +19,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <script src="/js/lib/xss.js"></script>
     <script src="/js/lib/sjcl.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
@@ -33,7 +33,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Messaging
+            <b>Beži</b><span>App</span> &raquo; <x-su>messaging</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -49,28 +49,24 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a>
-        </li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
-        <li><a href="/pages/teachers.html" class="waves-effect"><i
-                    class="material-icons">supervisor_account</i>Teachers</a>
-        </li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a>
-        </li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
+        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
+        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i><x-su>teachers</x-su></a></li>
+        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
     </ul>
 
@@ -82,16 +78,15 @@
                     <div class="input-field col s5">
                         <i class="material-icons prefix">account_circle</i>
                         <input id="full-name" type="text" class="autocomplete-fullname validate">
-                        <label for="full-name">Recipient</label>
+                        <label for="full-name"><x-su>recipient</x-su></label>
                     </div>
                     <div class="input-field col s5">
                         <i class="material-icons prefix">subject</i>
                         <input id="msg-subject" type="text" class="">
-                        <label for="msg-subject">Subject</label>
+                        <label for="msg-subject"><x-su>messageSubject</x-su></label>
                     </div>
                     <div class="input-field col s2">
-                        <button class="btn waves-effect waves-light" id="msg-send" type="button" disabled="disabled"
-                            name="action">
+                        <button class="btn waves-effect waves-light" id="msg-send" type="button" disabled="disabled" name="action">
                             <i class="material-icons">send</i>
                         </button>
                     </div>
@@ -100,7 +95,7 @@
                     <div class="input-field col s8">
                         <i class="material-icons prefix">mode_edit</i>
                         <textarea id="msg-body" class="materialize-textarea"></textarea>
-                        <label for="msg-body">Message body</label>
+                        <label for="msg-body"><x-su>messageBody</x-su></label>
                     </div>
                     <div class="input-field col s2">
                         <button class="btn waves-effect waves-light" id="msg-add-photo" type="button">
@@ -117,33 +112,33 @@
                     <div class="input-field col s12">
                         <i class="material-icons prefix">lock</i>
                         <input id="msg-e2ee-pass-input" type="password" autocomplete="new-password" class="">
-                        <label for="msg-e2ee-pass-input">Password for encrypting the message</label>
+                        <label for="msg-e2ee-pass-input"><x-su>passwordForE2EE</x-su></label>
                     </div>
 		</div>
             </div>
             <div id="msg-added-image"></div>
         </div>
         <h4>Messages</h4>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 0);"
-            type="button">Received
-            <i class="material-icons right">system_update</i>
+        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 0);" type="button">
+					<x-su>received</x-su>
+					<i class="material-icons right">system_update</i>
         </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 1);"
-            type="button">Sent
-            <i class="material-icons right">system_update</i>
+        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 1);" type="button">
+					<x-su>sent</x-su>
+					<i class="material-icons right">system_update</i>
         </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 2);"
-            type="button">Deleted
-            <i class="material-icons right">system_update</i>
+        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 2);" type="button">
+					<x-su>deleted</x-su>
+					<i class="material-icons right">system_update</i>
         </button>
         <div id="msg-list"></div>
 	<p>
 		<div class="row" id="storage-bar">
 			<div class="col s4">
-				Message storage used in this folder: 
+				<x-su>messageStorageUsed</x-su>: 
 			</div>
 			<div class="col s3" id="storage-desc">
-				0/120 messages 10%
+				0/120 <x-sl>messages</x-sl> 10%
 			</div>
 			<div class="progress col s5">
 				<div class="determinate" id="storage-progressbar" style="width: 0%"></div>
@@ -151,8 +146,7 @@
 		</div>
 		<div class="row">
 			<p>
-				You can only have 120 messages per message folder, older messages will not be shown. Remember to delete read and sent
-				messages regulary to avoid any issues.
+				<x-du>maxMessagesNote</x-du>
 			</p>
 		</div>
 	</p>
diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html
index d5a4b0c..d60bb79 100644
--- a/pages/privacypolicy.html
+++ b/pages/privacypolicy.html
@@ -1,5 +1,4 @@
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -21,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -28,43 +28,26 @@
     <link rel="apple-touch-icon" href="/img/icons/icon_512.png">
     <meta name="apple-mobile-web-app-status-bar" content="#004d32">
 </head>
-
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Privacy policy
+            <b>Beži</b><span>App</span> &raquo; <x-su>thePrivacyPolicy</x-su>
             <span class="right white-text">
                 <i class="material-icons" id="nav-home-button">home</i>
             </span>
         </div>
     </nav>
-
     <div class="container">
-
-        <h2>Privacy Policy</h2>
-        <p class="flow-text">Your privacy is important to us. It is the developers' policy to respect your privacy
-            regarding any information we may collect from you through our app, BežiApp.</p>
-        <p class="flow-text">We only ask for personal information when we truly need it to provide a service to you. We
-            collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re
-            collecting it and how it will be used.</p>
-        <p class="flow-text">We only retain collected information for as long as necessary to provide you with your
-            requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss
-            and theft, as well as unauthorized access, disclosure, copying, use or modification.</p>
-        <p class="flow-text">We don’t share any personally identifying information publicly or with third-parties,
-            except when required to by law.</p>
-        <p class="flow-text">Our app may link to external sites that are not operated by us. Please be aware that we
-            have no control over the content and practices of these sites, and cannot accept responsibility or liability
-            for their respective privacy policies.</p>
-        <p class="flow-text">You are free to refuse our request for your personal information, with the understanding
-            that we may be unable to provide you with some of your desired services.</p>
-        <p class="flow-text">Your continued use of our website will be regarded as acceptance of our practices around
-            privacy and personal information. If you have any questions about how we handle user data and personal
-            information, feel free to contact us.</p>
+        <h2><x-su>thePrivacyPolicy</x-su></h2>
+        <p class="flow-text"><x-du>privacyImportant</x-du></p>
+        <p class="flow-text"><x-du>privacyOnlyAskedWhen</x-du></p>
+        <p class="flow-text"><x-du>privacyDataCollection</x-du></p>
+        <p class="flow-text"><x-du>privacySharingData</x-du></p>
+        <p class="flow-text"><x-du>privacyExternalSites</x-du></p>
+        <p class="flow-text"><x-du>privacyRefuse</x-du></p>
+        <p class="flow-text"><x-du>privacyAcceptWithUse</x-du></p>
         <hr>
-        <p class="flow-text">This policy is effective as of 29 January 2020.</p>
-
+        <p class="flow-text"><x-su>privacyEffectiveAsOf</x-su> 29 January 2020.</p>
     </div>
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/teachers.html b/pages/teachers.html
index ee4f49c..7cbe188 100644
--- a/pages/teachers.html
+++ b/pages/teachers.html
@@ -20,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -31,7 +32,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Teachers
+            <b>Beži</b><span>App</span> &raquo; <x-su>teachers</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -50,27 +51,24 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a>
-        </li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
-        <li><a href="/pages/teachers.html" class="waves-effect"><i
-                    class="material-icons">supervisor_account</i>Teachers</a></li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a>
-        </li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
+        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
+        <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i><x-su>teachers</x-su></a></li>
+        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
     </ul>
 
@@ -85,7 +83,7 @@
         </li>
         <br>
         <li><a class="subheader">
-                <h6>TP meetings</h6>
+                <h6><x-su>tpMeetings</x-su></h6>
             </a></li>
         <li><a class="waves-effect" id="teacher-office"></a></li>
     </ul>
@@ -95,8 +93,8 @@
         <table class="highlight">
             <thead>
                 <tr>
-                    <th>Name</th>
-                    <th>Subject</th>
+                    <th><x-su>name</x-su></th>
+                    <th><x-su>schoolSubject</x-su></th>
                 </tr>
             </thead>
             <tbody id="teachers-body"></tbody>
@@ -105,4 +103,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/timetable.html b/pages/timetable.html
index 98110c1..c8559cb 100644
--- a/pages/timetable.html
+++ b/pages/timetable.html
@@ -1,5 +1,4 @@
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -29,6 +28,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -40,7 +40,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Timetable
+            <b>Beži</b><span>App</span> &raquo; <x-su>timetable</x-su>
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
@@ -59,27 +59,27 @@
                 <h4><b>Beži</b>App</h4>
             </a>
         </li>
-        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a>
+        <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a>
         </li>
-        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li>
-        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li>
+        <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i><x-su>gradings</x-su></a></li>
+        <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i><x-su>grades</x-su></a></li>
         <li><a href="/pages/teachers.html" class="waves-effect"><i
                     class="material-icons">supervisor_account</i>Teachers</a></li>
-        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a>
+        <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i><x-su>absences</x-su></a>
         </li>
-        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li>
-        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li>
+        <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i><x-su>messaging</x-su></a></li>
+        <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i><x-su>meals</x-su></a></li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/pages/about.html" class="waves-effect">
-                <i class="material-icons">info</i>About</a>
+                <i class="material-icons">info</i><x-su>about</x-su></a>
         </li>
         <li>
             <div class="divider"></div>
         </li>
         <li><a href="/logout.html" class="waves-effect">
-                <i class="material-icons">exit_to_app</i>Log out</a>
+                <i class="material-icons">exit_to_app</i><x-su>logout</x-su></a>
         </li>
     </ul>
 
@@ -109,4 +109,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/tos.html b/pages/tos.html
index ed37acb..3cec05b 100644
--- a/pages/tos.html
+++ b/pages/tos.html
@@ -1,5 +1,4 @@
-<html lang="en">
-
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -21,6 +20,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- iOS support -->
@@ -32,7 +32,7 @@
 <body>
     <nav class="z-depth-0" id="navigation-main">
         <div class="nav-wrapper container">
-            <b>Beži</b><span>App</span> &raquo; Terms and Conditions
+            <b>Beži</b><span>App</span> &raquo; <x-su>theTos</x-su>
             <span class="right white-text">
                 <i class="material-icons" id="nav-home-button">home</i>
             </span>
@@ -40,83 +40,28 @@
     </nav>
 
     <div class="container">
-        <h2 class="code-line" data-line-start=0 data-line-end=1><a id="Terms_and_conditions_0"></a>Terms and conditions
-        </h2>
-        <h3 class="code-line" data-line-start=2 data-line-end=3><a id="Terms_of_use_2"></a>Terms of use</h3>
-        <p class="has-line-data flow-text" data-line-start="3" data-line-end="4">As a condition of use, you promise not
-            to use the BežiApp
-            (App or application) and its related infrastructure (API, hosting service) for any purpose that is unlawful
-            or
-            prohibited by these Terms, or any other purpose not reasonably intended by the authors of the App. By way of
-            example, and not as a limitation, you agree not to use the App:</p>
+        <h2 class="code-line" data-line-start=0 data-line-end=1><a id="Terms_and_conditions_0"></a><x-su>theToS</x-su></h2>
+        <h3 class="code-line" data-line-start=2 data-line-end=3><a id="Terms_of_use_2"></a><x-su>termsOfUse</x-su></h3>
+        <p class="has-line-data flow-text" data-line-start="3" data-line-end="4"><x-su>termsOfUseDescription</x-su>:</p>
         <ol>
-            <li class="flow-text has-line-data" data-line-start="4" data-line-end="5">To abuse, harass, threaten,
-                impersonate or
-                intimidate any person;</li>
-            <li class="flow-text has-line-data" data-line-start="5" data-line-end="6">To post or transmit, or cause to
-                be posted or
-                transmitted, any Content that is libelous, defamatory, obscene, pornographic, abusive, offensive,
-                profane or
-                that infringes any copyright or other right of any person;</li>
-            <li class="flow-text has-line-data" data-line-start="6" data-line-end="7">To communicate with the App
-                developers or other
-                users in abusive or offensive manner;</li>
-            <li class="flow-text has-line-data" data-line-start="7" data-line-end="8">For any purpose that is not
-                permitted under the laws
-                of the jurisdiction where you use the App.</li>
-            <li class="flow-text has-line-data" data-line-start="8" data-line-end="9">To post or transmit, or cause to
-                be posted or
-                transmitted, any Communication designed or intended to obtain password, account or private information
-                of any
-                App user;</li>
-            <li class="flow-text has-line-data" data-line-start="9" data-line-end="11">To create or transmit unwanted
-                “spam” to any person
-                or any URL;</li>
+            <li class="flow-text has-line-data" data-line-start="4" data-line-end="5"><x-su>termsOfUseHarass</x-su>;</li>
+            <li class="flow-text has-line-data" data-line-start="5" data-line-end="6"><x-su>termsOfUsePost</x-su>;</li>
+            <li class="flow-text has-line-data" data-line-start="6" data-line-end="7"><x-su>termsOfUseCommunicate</x-su>;</li>
+            <li class="flow-text has-line-data" data-line-start="7" data-line-end="8"><x-su>termsOfUsePurpose</x-su>;</li>
+            <li class="flow-text has-line-data" data-line-start="8" data-line-end="9"><x-su>termsOfUseExploit</x-su>;</li>
+            <li class="flow-text has-line-data" data-line-start="9" data-line-end="11"><x-du>termsOfUseSpam</x-du></li>
         </ol>
-        <p class="flow-text">You may also not reverse engineer, modify or redistribute the app without written consent
-            from the developers.</p>
-
-        <h3 class="code-line" data-line-start=11 data-line-end=12><a id="Termination_of_services_11"></a>Termination of
-            services
-        </h3>
-        <p class="flow-text has-line-data" data-line-start="12" data-line-end="13">The developers of the App may
-            terminate your access to
-            the App without any prior warning or notice for any of the following reasons:</p>
+        <p class="flow-text"><x-du>termsOfUseModify<x-du></p>
+        <h3 class="code-line" data-line-start=11 data-line-end=12><a id="Termination_of_services_11"></a><x-su>terminationOfServices</x-su></h3>
+        <p class="flow-text has-line-data" data-line-start="12" data-line-end="13"><x-su>terminationOfServicesDescriptions</x-su>:</p>
         <ul>
-            <li class="flow-text has-line-data" data-line-start="13" data-line-end="14">Breaching the Terms of Service
-            </li>
-            <li class="flow-text has-line-data" data-line-start="14" data-line-end="16">Receiving a formal request from
-                authorities of
-                Gimnazija Bežigrad administration requesting termination of your access to the App.</li>
+            <li class="flow-text has-line-data" data-line-start="13" data-line-end="14"><x-su>terminationOfServicesBreaching</x-su>;</li>
+            <li class="flow-text has-line-data" data-line-start="14" data-line-end="16"><x-du>terminationOfServicesRequest</x-du></li>
         </ul>
-        <h3 class="code-line" data-line-start=16 data-line-end=17><a id="Limitation_of_Liability_16"></a>Limitation of
-            Liability
-        </h3>
-        <p class="flow-text has-line-data" data-line-start="17" data-line-end="18">The developers of the App provide no
-            warranty; You
-            expressly acknowledge and agree that the use of the licensed application is at your sole risk. To the
-            maximum extent
-            permited by applicable law, the licensed application and any services performed of provided by the licensed
-            application are provided “as is” and “as available”, with all faults and without warranty of any kind, and
-            licensor
-            hereby disclaims all warranties and conditions with respect to the licensed application and any services,
-            either
-            express, implied or statutory, including, but not limited to, the implied warranties and/or conditions of
-            merchantability, of satisfactory quality, of fitness for a particular purpose, of accuracy, of quiet
-            enjoyment, and
-            of noninfringement of third-party rights. No oral or written information or advice given by licensor or its
-            authorized representative shall create a warranty. Should the licensed application or services prove
-            defective, you
-            assume the entire cost of all necessary servicing, repair or correction. Some jurisdictions do not allow the
-            exclusion of the implied warranties or limitations on applicable statutory rights of a customer, so the
-            above
-            exclusion may not apply to you.</p>
-
+        <h3 class="code-line" data-line-start=16 data-line-end=17><a id="Limitation_of_Liability_16"></a><x-su>limitationOfLiability</x-su></h3>
+        <p class="flow-text has-line-data" data-line-start="17" data-line-end="18"><x-du>limitationOfLiabilityContent</x-du></p>
         <hr>
-        <p class="flow-text">The Terms of Service are effective as of 29 January, 2020.</p>
-
+        <p class="flow-text"><x-su>tosAreEffectiveAsOf</x-su> 29 January, 2020.</p>
     </div>
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/sw.js b/sw.js
index 46015a3..030dc99 100644
--- a/sw.js
+++ b/sw.js
@@ -46,6 +46,7 @@ const assets = [
     "/js/login.js",
     "/js/app.js",
     "/js/meals.js",
+		"/js/lang/bundle.js",
 
     "/js/lib/materialize.min.js",
     "/js/lib/jquery.min.js",