update framwork of HTML to introduce more tab pages

css/style.css

@@ -71,3 +71,9 @@ main {
     -ms-user-select: none;
     -webkit-user-select: none;
 }
+
+footer {
+    font-size: 11px;
+    margin-top: 30px;
+    text-align: center;
+}

index.html

@@ -37,6 +37,9 @@
     </header>
 
     <main>
+
+      <div id="tab-sim">
+
         <svg id="panel" width="100%" height="100%" viewBox="0 0 1440 644" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
           <g transform="matrix(1.05752,0,0,8.87234,-41.4143,-5489.39)">
             <rect x="50" y="620" width="1340" height="70" style="fill:rgb(86,86,86);"/>
@@ -563,6 +566,22 @@
 
         </svg>
 
+      </div>
+
+      <div id="tab-debug">
+        <input id="debug-data-input" type="text" size="60">&nbsp;
+        <input id="debug-load-data" type="button" value="LOAD DATA"><br>
+        <div id="cpu-dump"></div>
+        <div id="mem-dump"></div>
+      </div>
+
+      <div id="tab-res">
+        <p>
+          <span id="source-code" class="l10n">Source code</span>:
+          <a href="https://github.com/wixette/8800-simulator">github.com/wixette/8800-simulator</a>
+        </p>
+      </div>
+
     </main>
 
     <div id="subheader-bar">
@@ -570,10 +589,9 @@
     </div>
 
     <footer>
-      <input id="debug-data-input" type="text" size="60">&nbsp;
+      <p>&copy; 2020 wixette
-      <input id="debug-load-data" type="button" value="LOAD DATA"><br>
+        <a href="/"><span id="back-home" class="l10n">Home</span></a>
-      <div id="cpu-dump"></div>
+      </p>
-      <div id="mem-dump"></div>
     </footer>
 
     <audio id="sound-beepbeep" src="media/beepbeep.mp3"></audio>

js/l10n.js

@@ -64,6 +64,16 @@ l10n.MESSAGES = {
         'en': 'Soft Switch Board',
         'zh': '辅助开关面板',
     },
+
+    'back-home': {
+        'en': 'Home',
+        'zh': '首页',
+    },
+
+    'source-code': {
+        'en': 'Source code',
+        'zh': '源代码',
+    },
 };
 
 /**
@@ -92,13 +102,14 @@ l10n.nextLocale = function() {
  */
 l10n.restoreLocale = function() {
     var val = localStorage.getItem(l10n.localStorageKey);
-    if (val) {
+    if (!val) {
+        val = '0';
+    }
     var index = parseInt(val);
     if (!isNaN(index)) {
         l10n.current = index % l10n.LOCALES.length;
         l10n.updateMessages();
     }
-    }
 };
 
 /**