Add basic icons

images/close.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <style>path { fill: white; }</style>
+  <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 15.538l-3.592-3.548 3.546-3.587-1.416-1.403-3.545 3.589-3.588-3.543-1.405 1.405 3.593 3.552-3.547 3.592 1.405 1.405 3.555-3.596 3.591 3.55 1.403-1.416z"/>
+</svg>

images/key.svg

@@ -0,0 +1,5 @@
+<svg 
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <style>path { fill: white; }</style>
+  <path d="M23.347 8.945c.918-1.085.862-2.679-.127-3.668l-4.499-4.497c-.989-.989-2.585-1.045-3.671-.126l-6.07 4.8c-1.222 1.034-1.315 2.882-.2 3.996l5.771 5.769c1.116 1.116 2.965 1.023 4-.201l4.796-6.073zm-6.058-6.734l4.499 4.498c.243.242.247.651.012.93l-.891 1.055-5.604-5.603 1.055-.892c.277-.236.686-.23.929.012zm-4.916 13.658l-8.13 8.131h-2.828l-.707-.707 7.292-7.293-.707-.707-7.292 7.293-.001-2.828 8.13-8.13 4.243 4.241z"/>
+</svg>

images/lock.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <style>path { fill: white; }</style>
+  <path d="M18 10v-4c0-3.313-2.687-6-6-6s-6 2.687-6 6v4h-3v14h18v-14h-3zm-10 0v-4c0-2.206 1.794-4 4-4s4 1.794 4 4v4h-8z"/>
+</svg>

images/poweroff.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <style>path { fill: white; }</style>
+  <path d="M14 12h-4v-12h4v12zm4.213-10.246l-1.213 1.599c2.984 1.732 5 4.955 5 8.647 0 5.514-4.486 10-10 10s-10-4.486-10-10c0-3.692 2.016-6.915 5-8.647l-1.213-1.599c-3.465 2.103-5.787 5.897-5.787 10.246 0 6.627 5.373 12 12 12s12-5.373 12-12c0-4.349-2.322-8.143-5.787-10.246z"/>
+</svg>

images/user.svg

@@ -0,0 +1,5 @@
+<svg 
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <style>path { fill: white; }</style>
+  <path d="M20.822 18.096c-3.439-.794-6.64-1.49-5.09-4.418 4.72-8.912 1.251-13.678-3.732-13.678-5.082 0-8.464 4.949-3.732 13.678 1.597 2.945-1.725 3.641-5.09 4.418-3.073.71-3.188 2.236-3.178 4.904l.004 1h23.99l.004-.969c.012-2.688-.092-4.222-3.176-4.935z"/>
+</svg>

index.php

@@ -22,18 +22,18 @@ require_once("helpers/position.php");
 require_once("helpers/track.php");
 
 if ($user->isValid) {
-  $itemPass = '<a href="javascript:void(0)" onclick="changePass()">' . $lang["changepass"] . '</a>';
+  $itemPass = '<a href="javascript:void(0)" onclick="changePass()"><img class="icon" src="images/lock.svg" \> ' . $lang["changepass"] . '</a>';
-  $itemLogout = '<a href="logout.php">' . $lang["logout"] . '</a>';
+  $itemLogout = '<a href="logout.php"><img class="icon" src="images/poweroff.svg" \> ' . $lang["logout"] . '</a>';
   $userHeader = '
   <div id="user_menu">
-  <a href="javascript:void(0);" onclick="userMenu()">' . $user->login . '</a>
+  <a href="javascript:void(0);" onclick="userMenu()"><img class="icon" src="images/user.svg" \> ' . $user->login . '</a>
   <div id="user_dropdown" class="dropdown">
   ' . $itemPass . '
   ' . $itemLogout . '
   </div>
   </div>';
 } else {
-  $userHeader = '<a href="index.php?force_login=1">' . $lang["login"] . '</a>';
+  $userHeader = '<a href="index.php?force_login=1"><img class="icon" src="images/key.svg" \> ' . $lang["login"] . '</a>';
 }
 $lastUserId = NULL;
 $userForm = '';

main.css

@@ -203,7 +203,7 @@ select {
 }
 
 #modal-header {
-  top: 15px;
+  top: 20px;
   position: relative;
   text-align: right;
   margin: 0 auto;
@@ -211,6 +211,11 @@ select {
   min-width: 300px;
 }
 
+#modal-header button {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+}
+
 #modal-body {
   font-size: 0.9em;
   font-family: Verdana, sans-serif;
@@ -261,4 +266,6 @@ button {
   padding-top: .5em;
 }
 
-.show { display: block; }
+.show { display: block; }
+
+.icon { height: 1.4em; }

main.js

@@ -406,7 +406,7 @@ function setUnits(unit) {
 function showModal(contentHTML) {
   var div = document.createElement('div');
   div.setAttribute('id', 'modal');
-  div.innerHTML = '<div id="modal-header"><button type="button" onclick="removeModal()">&times;</button></div><div id="modal-body"></div>';
+  div.innerHTML = '<div id="modal-header"><button type="button" onclick="removeModal()"><img src="images/close.svg" \></button></div><div id="modal-body"></div>';
   document.body.appendChild(div);
   var modalBody = document.getElementById('modal-body');
   modalBody.innerHTML = contentHTML;