18 files changed, 275 insertions, 222 deletions

diff --git a/img/flags/en.svg b/img/flags/en.svg
new file mode 100644
index 0000000..cd7d8a0
--- /dev/null
+++ b/img/flags/en.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
+<clipPath id="s">
+	<path d="M0,0 v30 h60 v-30 z"/>
+</clipPath>
+<clipPath id="t">
+	<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
+</clipPath>
+<g clip-path="url(#s)">
+	<path d="M0,0 v30 h60 v-30 z" fill="#012169"/>
+	<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
+	<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/>
+	<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
+	<path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6"/>
+</g>
+</svg>
diff --git a/img/flags/sl.svg b/img/flags/sl.svg
new file mode 100644
index 0000000..e56ea1d
--- /dev/null
+++ b/img/flags/sl.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg height="600" viewBox="0 0 12 6" width="1200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="m0 0h12v6h-12z" fill="#f00"/>
+ <path d="m0 0h12v4h-12z" fill="#005ce5"/>
+ <path d="m0 0h12v2h-12z" fill="#fff"/>
+ <g transform="matrix(.02100012 0 0 .02100012 -.106483 3.477988)">
+  <path d="m299.9707 105.20898c-1.34275.00213-2.6819.02963-4.01758.06836-25.9762.67332-50.36351 7.38146-67.72851 15.5625l.00195.02344c-1.8988.7936-3.75877 1.58919-5.52734 2.38477l5.96875 93.49023c4.13555 48.85561 35.97434 77.30103 71.34961 88.4707 35.37527-11.16967 67.21212-39.61509 71.34765-88.4707l5.93555-93.19336c-1.77218-.91732-3.63053-1.80653-5.52734-2.68164l.00195-.02344c-18.25122-8.59856-44.25699-15.58263-71.71484-15.6289-.02026-.00004-.04029-.00193-.06055-.00196-.0098.00002-.0195-.00001-.0293 0z" fill="#005ce5" fill-rule="evenodd" stroke-width="2.100012" transform="matrix(.47618776 0 0 .47618776 5.07059 -165.61753)"/>
+  <path d="m147.93437-84.711566-8.31445 16.236187-5.37524-6.98291-14.04559 18.561778c.25384 1.15219.55195 2.264368.87746 3.350324 1.56869 2.647443 4.58316 5.669782 8.44944 5.66978 3.06807 0 6.13613-2.454448 9.20419-2.45445 3.06807 0 6.13613 2.454452 9.20419 2.45445 3.06806 0 6.13612-2.454448 9.20419-2.45445 3.06806 0 6.13612 2.454452 9.20419 2.45445 3.83134 0 6.82572-2.966174 8.40649-5.596146.3374-1.115063.64046-2.263565.90201-3.448503l-14.02719-18.537233-5.37524 6.98291zm-9.20419 36.835159c-3.06806 0-6.13612 2.454452-9.20419 2.45445-2.42818 0-4.51412-.86-6.12998-2.080147.57062 1.211079 1.17422 2.388922 1.8347 3.503728 1.26575.787052 2.70426 1.319269 4.29528 1.319267 3.06807 0 6.13613-2.454452 9.20419-2.45445 3.06807 0 6.13613 2.454454 9.20419 2.45445 3.06806 0 6.13612-2.454452 9.20419-2.45445 3.06806 0 6.13612 2.454454 9.20419 2.45445 1.56857 0 2.98703-.52035 4.24006-1.288587.66018-1.111198 1.26336-2.284992 1.8347-3.491455-1.6082 1.197358-3.67487 2.037194-6.07476 2.037194-3.06807 0-6.13613-2.454448-9.20419-2.45445-3.06807 0-6.13613 2.454452-9.20419 2.45445-3.06806 0-6.13612-2.454448-9.20419-2.45445zm0 5.197298c-3.06806 0-6.13612 2.454454-9.20419 2.45445-.66657 0-1.30044-.07808-1.91447-.196356 5.30791 7.091078 12.54952 11.837649 20.31671 14.56716 7.75116-2.725014 14.98132-7.474976 20.28603-14.554888-.6005.11285-1.22106.184084-1.87151.184084-3.06807 0-6.13613-2.454446-9.20419-2.45445-3.06807 0-6.13613 2.454454-9.20419 2.45445-3.06806 0-6.13612-2.454446-9.20419-2.45445z" fill="#fff" fill-rule="evenodd"/>
+  <g id="a" fill="#ffe500" transform="translate(0 -.00067)">
+   <path id="b" d="m134.0937-109.56066h6.96082l-3.48041 6.02733" fill="#ffe500" fill-rule="evenodd"/>
+   <use fill="#ffe500" height="300" transform="matrix(1 0 0 -1 .0003 -215.1037)" width="600" xlink:href="#b"/>
+  </g>
+  <g fill="#ffe500">
+   <use height="300" transform="translate(20.7203)" width="600" xlink:href="#a"/>
+   <use height="300" transform="translate(10.3603 13.875)" width="600" xlink:href="#a"/>
+  </g>
+ </g>
+ <path d="m249.61914-221.19336c-1.38627.002-2.76778.0311-4.14648.0723 1.3787-.0368 2.75957-.0702 4.14648-.0723zm-71.74805 15.6543c-1.89939.79383-3.75825 1.58896-5.52734 2.38476l5.96875 93.49219c4.13555 48.855608 35.97239 77.299081 71.34766 88.468751 35.37527-11.16967 67.21212-39.613143 71.34765-88.468751l5.93555-93.19531c-1.77228-.91738-3.63042-1.80649-5.52734-2.68164l-5.53907 92.78125c-3.83911 47.499554-33.39281 75.154029-66.23242 86.013669-32.83961-10.85964-62.39526-38.514115-66.23437-86.013669z" fill="#f00" fill-rule="evenodd" stroke-width="2.100012" transform="matrix(.01 0 0 .01 .503574 3.264023)"/>
+</svg>
diff --git a/index.html b/index.html
index 8b10888..95d57dc 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-<html lang="en">
-
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -23,4 +23,4 @@
 <body>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/js/lang/bundle.js b/js/lang/bundle.js
index 1cd8f95..84698bc 100644
--- a/js/lang/bundle.js
+++ b/js/lang/bundle.js
@@ -147,6 +147,7 @@ var langstrings = {
 		meals: "meals",
 		about: "about",
 		logout: "logout",
+		settings: "settings",
 		// timetable
 		noPeriods: "no periods in selected week",
 		// gradings
@@ -257,7 +258,9 @@ var langstrings = {
 		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"
+		privacyEffectiveAsOf: "this policy is effective as of",
+		// settings
+		language: "language"
 	},
 	sl: {
 		miscTranslationLanguage: "slovenščina",
@@ -305,6 +308,7 @@ var langstrings = {
 		meals: "obroki",
 		about: "o",
 		logout: "odjava",
+		settings: "nastavitve",
 		// gradings
 		requestFailed: "zahteva spodletela",
 		noInternetConnection: "ni povezave s spletom",
@@ -413,6 +417,7 @@ var langstrings = {
 		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"
+		privacyEffectiveAsOf: "this policy is effective as of",
+		language: "jezik"
 	},
 }
diff --git a/login.html b/login.html
index 840856d..2d7b133 100644
--- a/login.html
+++ b/login.html
@@ -1,5 +1,5 @@
-<html lang="en">
-
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
diff --git a/logout.html b/logout.html
index e94f331..c3f9b41 100644
--- a/logout.html
+++ b/logout.html
@@ -1,5 +1,5 @@
-<html lang="en">
-
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -23,4 +23,4 @@
 <body>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/about.html b/pages/about.html
index 73826a0..e709de0 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
@@ -43,30 +44,18 @@
     </nav>
 
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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><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><x-su>logout</x-su></a>
-        </li>
+			<li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
 
     <div class="container">
diff --git a/pages/absences.html b/pages/absences.html
index 477ce88..e893cbc 100644
--- a/pages/absences.html
+++ b/pages/absences.html
@@ -1,5 +1,5 @@
-<html lang="en">
-
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -46,33 +46,19 @@
     </nav>
 
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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><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><x-su>logout</x-su></a>
-        </li>
+      <li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
-
     <br>
     <div class="container">
         <div class="row">
diff --git a/pages/changelog.html b/pages/changelog.html
index e77e0ed..ee1c3d7 100644
--- a/pages/changelog.html
+++ b/pages/changelog.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
diff --git a/pages/grades.html b/pages/grades.html
index 6541f5b..03215fd 100644
--- a/pages/grades.html
+++ b/pages/grades.html
@@ -1,5 +1,5 @@
-<html lang="en">
-
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -46,32 +46,19 @@
     </nav>
 
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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><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><x-su>logout</x-su></a>
-        </li>
+      <li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
-
     <ul id="grade-info" class="sidenav side-modal">
         <br>
         <li><a class="header">
diff --git a/pages/gradings.html b/pages/gradings.html
index 56d244e..601e8b8 100644
--- a/pages/gradings.html
+++ b/pages/gradings.html
@@ -1,5 +1,5 @@
-<html lang="en">
-
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -53,32 +53,19 @@
     </nav>
 
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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><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><x-su>logout</x-su></a>
-        </li>
+      <li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
-
     <ul id="grading-info" class="sidenav side-modal">
         <br>
         <li><a class="header">
diff --git a/pages/meals.html b/pages/meals.html
index 28070e9..0aae59e 100644
--- a/pages/meals.html
+++ b/pages/meals.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
@@ -46,32 +47,19 @@
     </nav>
 
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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><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><x-su>logout</x-su></a>
-        </li>
+      <li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
-
     <br>
     <div class="container login" hidden="hidden" id="meals-login">
 	<h4><x-su>loginToLopolis</x-su></h4>
diff --git a/pages/messaging.html b/pages/messaging.html
index 4a97fb6..2740540 100644
--- a/pages/messaging.html
+++ b/pages/messaging.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
@@ -42,34 +43,20 @@
             <div class="indeterminate"></div>
         </div>
     </nav>
-
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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><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><x-su>logout</x-su></a>
-        </li>
+      <li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
-
     <div class="container">
         <h4>Send a message</h4>
         <div class="row">
diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html
index d60bb79..26bf17a 100644
--- a/pages/privacypolicy.html
+++ b/pages/privacypolicy.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
diff --git a/pages/settings.html b/pages/settings.html
new file mode 100644
index 0000000..796ea0d
--- /dev/null
+++ b/pages/settings.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="google" content="notranslate">
+    <title>Settings &laquo; BežiApp</title>
+
+    <!-- Materialize -->
+    <link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
+    <link href="/css/materialicons.css" rel="stylesheet">
+    <link href="/css/fontawesome.min.css" rel="stylesheet">
+    <script type="text/javascript" src="/js/lib/materialize.min.js"></script>
+
+    <script src="/js/lib/jquery.min.js"></script>
+    <script type="text/javascript" src="/js/lib/localforage.min.js"></script>
+
+    <link type="text/css" href="/css/styles.css" rel="stylesheet">
+    <script type="text/javascript" src="/js/settings.js"></script>
+
+    <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 -->
+    <link rel="apple-touch-icon" href="/img/icons/icon_96.png">
+    <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; <x-su>settings</x-su>
+            <span class="right white-text">
+                <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
+            </span>
+        </div>
+        <div id="loading-bar" class="progress hidden">
+            <div class="indeterminate"></div>
+        </div>
+    </nav>
+
+    <ul id="side-menu" class="sidenav side-menu">
+			<li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
+    </ul>
+
+    <div class="container">
+        <div class="row">
+            <div class="col s12">
+                <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
+                </h3>
+                <h5 class="subheader"><x-su>settings</x-su></h5>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col s12">
+                <ul class="collection with-header">
+                    <li class="collection-header">
+                        <h5><x-su>language</x-su></h5>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Slovenščina</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Srpskohrvatski</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Македонски</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">English</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Français</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Deutsch</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Español</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Русский</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">汉语</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">日本語</span>
+                    </li>
+                    <li class="collection-item waves-effect">
+                        <span class="title about-text">Lingua latīna</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/pages/teachers.html b/pages/teachers.html
index 7cbe188..25f1e1e 100644
--- a/pages/teachers.html
+++ b/pages/teachers.html
@@ -1,5 +1,5 @@
-<html lang="en">
-
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -46,32 +46,19 @@
     </nav>
 
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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><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><x-su>logout</x-su></a>
-        </li>
+      <li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
-
     <ul id="teacher-info" class="sidenav side-modal">
         <br>
         <li><a class="subheader">
diff --git a/pages/timetable.html b/pages/timetable.html
index c8559cb..f9a3688 100644
--- a/pages/timetable.html
+++ b/pages/timetable.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
@@ -54,35 +55,19 @@
     </nav>
 
     <ul id="side-menu" class="sidenav side-menu">
-        <li>
-            <a class="subheader">
-                <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><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>Teachers</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><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><x-su>logout</x-su></a>
-        </li>
+      <li><a class="subheader"><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><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><x-su>about</x-su></a></li>
+      <li><a href="/logout.html" class="waves-effect"><i class="material-icons">exit_to_app</i><x-su>logout</x-su></a></li>
+      <li><a href="/pages/settings.html" class="waves-effect"><i class="material-icons">settings</i><x-su>settings</x-su></a></li>
     </ul>
-
     <ul id="lesson-info" class="sidenav side-modal">
         <br>
         <li><a class="header">
diff --git a/pages/tos.html b/pages/tos.html
index 3cec05b..9c31b76 100644
--- a/pages/tos.html
+++ b/pages/tos.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">