From 819fb9ca5082175f4afc595766e75dd2f045395b Mon Sep 17 00:00:00 2001
From: kaotisk <kaotisk@arching-kaos.org>
Date: Wed, 13 Nov 2024 20:25:55 +0200
Subject: Style update, refactoring with generator usage, bugfixes

---
 src/css/akn.css                        |  47 ++++++++---------
 src/fonts/Doto.woff2                   | Bin 0 -> 8664 bytes
 src/img/chat-logo.png                  | Bin 0 -> 5884 bytes
 src/img/mixtapes-logo.png              | Bin 0 -> 3210 bytes
 src/img/news-logo.png                  | Bin 0 -> 2764 bytes
 src/img/radio-logo.png                 | Bin 0 -> 39213 bytes
 src/img/stellar.svg                    |   8 +++
 src/index.html                         |  24 +--------
 src/js/app.js                          |  33 +++++++++++-
 src/js/arching-kaos-stellar-network.js |  90 ++++++++++++---------------------
 src/js/arching-kaos-tools.js           |   8 +--
 src/js/arching-kaos-web-ui-settings.js |  58 ++++++++-------------
 src/js/ui/footer.js                    |  41 +++++++++++++++
 src/js/ui/mainLayout.js                |  14 +++++
 src/js/url-generators.js               |  18 +++----
 15 files changed, 183 insertions(+), 158 deletions(-)
 create mode 100644 src/fonts/Doto.woff2
 create mode 100644 src/img/chat-logo.png
 create mode 100644 src/img/mixtapes-logo.png
 create mode 100644 src/img/news-logo.png
 create mode 100644 src/img/radio-logo.png
 create mode 100644 src/img/stellar.svg
 create mode 100644 src/js/ui/footer.js
 create mode 100644 src/js/ui/mainLayout.js

(limited to 'src')

diff --git a/src/css/akn.css b/src/css/akn.css
index e7ded1e..6298fbd 100644
--- a/src/css/akn.css
+++ b/src/css/akn.css
@@ -8,15 +8,15 @@
 }
 
 @font-face {
-    font-family: 'Hack Nerd Font';
-    src: url('../fonts/Hack.woff2') format('woff');
-    font-weight: normal;
+    font-family: 'Doto';
+    src: url('../fonts/Doto.woff2') format('woff');
+    font-weight: 700;
 }
 
 body {
-    word-break: break-all;
+    word-break: normal;
     padding: 1%;
-    font-family: 'Hack Nerd Font';
+    font-family: 'Doto';
     font-size: medium;
     background-color: #1a1a1a;
     color: #7ef07e;
@@ -86,17 +86,18 @@ fieldset {
 
 #menu a {display:inline-block;}
 
-.footer p { margin: 0px; }
+#footer p { margin: 0px; }
 
-.footer {
+#footer div { display: flex; gap: 5px; flex-direction: row; }
+#footer {
     text-align: center;
 }
 
 .inv {display:block;text-align:center;}
 
-pre {overflow:auto;}
-
-.whole{
+pre {
+    font-family: 'Doto';
+    overflow:auto;
 }
 
 #gotop-link{
@@ -234,7 +235,7 @@ article {
     top: 48px;
 /*    background-color: #2a2a2a;*/
     background-color: #000000;
-    bottom: 62px;
+    bottom: 32px;
     width: auto;
     right: 0vw;
     left: 0vw;
@@ -242,7 +243,7 @@ article {
     padding-right: 2vw;
     padding-top: 1vh;
     padding-bottom: 1vh;
-    max-height: 80vh;
+    max-height: 90vh;
     height: auto;
     min-height: 45vh;
     overflow-y: auto;
@@ -300,7 +301,7 @@ button {
 /*    color: rgb(51, 200, 234);*/
     color: rgb(0, 255, 231);
     text-decoration: none;
-    font-family: 'Hack Nerd Font';
+    font-family: 'Doto';
     border: 1px solid #17392e;
     padding: 10px;
     margin: 1px;
@@ -396,6 +397,7 @@ audio {
 summary {
     background-color: #080808;
     padding: 4px;
+    word-break: break-all;
 }
 
 details {
@@ -434,18 +436,11 @@ details {
 }
 #settings-section button {}
 
-footer {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    padding: 2px;
-    text-align: right;
-}
-.footer {
+#footer {
     margin: 0px;
     font-size: medium;
     position: fixed;
-    height: 62px;
+    height: 32px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -492,13 +487,13 @@ footer {
     }
 }
 
-@media (max-width: 880px) {
-    .footer {
-        font-size: smaller;
+@media (max-width: 960px) {
+    #footer {
+        font-size: 8px;
         gap: 0px;
         flex-direction: column;
     }
-    .footer span {
+    #footer span {
         display: none;
     }
 }
diff --git a/src/fonts/Doto.woff2 b/src/fonts/Doto.woff2
new file mode 100644
index 0000000..cba4776
Binary files /dev/null and b/src/fonts/Doto.woff2 differ
diff --git a/src/img/chat-logo.png b/src/img/chat-logo.png
new file mode 100644
index 0000000..e3f42f1
Binary files /dev/null and b/src/img/chat-logo.png differ
diff --git a/src/img/mixtapes-logo.png b/src/img/mixtapes-logo.png
new file mode 100644
index 0000000..4320ed4
Binary files /dev/null and b/src/img/mixtapes-logo.png differ
diff --git a/src/img/news-logo.png b/src/img/news-logo.png
new file mode 100644
index 0000000..9c6b6eb
Binary files /dev/null and b/src/img/news-logo.png differ
diff --git a/src/img/radio-logo.png b/src/img/radio-logo.png
new file mode 100644
index 0000000..6727540
Binary files /dev/null and b/src/img/radio-logo.png differ
diff --git a/src/img/stellar.svg b/src/img/stellar.svg
new file mode 100644
index 0000000..1a1c2f4
--- /dev/null
+++ b/src/img/stellar.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.36 200" height="16px" width="16px" fill="#ffffff">
+    <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+            <path d="M203,26.16l-28.46,14.5-137.43,70a82.49,82.49,0,0,1-.7-10.69A81.87,81.87,0,0,1,158.2,28.6l16.29-8.3,2.43-1.24A100,100,0,0,0,18.18,100q0,3.82.29,7.61a18.19,18.19,0,0,1-9.88,17.58L0,129.57V150l25.29-12.89,0,0,8.19-4.18,8.07-4.11v0L186.43,55l16.28-8.29,33.65-17.15V9.14Z"/>
+            <path d="M236.36,50,49.78,145,33.5,153.31,0,170.38v20.41l33.27-16.95,28.46-14.5L199.3,89.24A83.45,83.45,0,0,1,200,100,81.87,81.87,0,0,1,78.09,171.36l-1,.53-17.66,9A100,100,0,0,0,218.18,100c0-2.57-.1-5.14-.29-7.68a18.2,18.2,0,0,1,9.87-17.58l8.6-4.38Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/index.html b/src/index.html
index 3541763..913d160 100644
--- a/src/index.html
+++ b/src/index.html
@@ -222,29 +222,9 @@
                 </div>
             </div>
             <div class="footer">
-                <div>
-                    <p>
-                        Arching Kaos
-                        <a target="_blank" href="https://github.com/arching-kaos/arching-kaos-tools">Tools</a>,
-                        <a target="_blank" href="https://arching-kaos.org">Org</a>,
-                        <a target="_blank" href="https://arching-kaos.net">Net</a>
-                    </p>
-                </div>
-                <span>::</span>
-                <div>
-                    <p>
-                        <a target="_blank" href="https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose">Report an issue</a>
-                    </p>
-                </div>
-                <span>::</span>
-                <div>
-                    <p>
-                        Fra <a target="_blank" href="https://www.kaotisk-hund.com">Kaotisk Hund</a> med kjærlighet.
-                        <a href="bitcoin:BC1QYL9K5KDLSLJAED9PZCJJX0CPGZVY9LWY427SD4">Donate</a>
-                    </p>
-                </div>
             </div>
         </div>
+        <script src="./js/arching-kaos-generator.js"></script>
         <script src="./external/stellarSdk.js"></script>
         <script src="./external/purify.min.js"></script>
         <script src="./js/environment-setup.js"></script>
@@ -262,8 +242,8 @@
         <script src="./js/arching-kaos-tools.js"></script>
         <script src="./js/arching-kaos-stellar-network.js"></script>
         <script src="./js/arching-kaos-decentralized-radio.js"></script>
-        <script src="./js/arching-kaos-generator.js"></script>
         <script src="./js/utils.js"></script>
+        <script src="./js/footer.js"></script>
         <script src="./js/app.js"></script>
     </body>
     <!--
diff --git a/src/js/app.js b/src/js/app.js
index f8fca5a..06ba891 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -36,12 +36,12 @@ progressPlaceholder.value = '0';
 
 progressPlaceholder.max++;
 
-if ( activeSettings.stellar.scan )
+if ( settings.stellar.scan )
 {
     scanStellarNetworkForPeers();
 }
 
-if ( activeSettings.ak.scan )
+if ( settings.ak.scan )
 {
     ringlocalbell();
     setInterval(ringlocalbell, 10*60*1000);
@@ -50,5 +50,34 @@ if ( activeSettings.ak.scan )
 //scanStellarNetworkForPeers();
 // setInterval(scanStellarNetworkForPeers, 60000);
 
+var root = {
+    head: document.querySelector('head'),
+    body: document.querySelector('body'),
+    html: document.querySelector('html')
+};
+
+var scripts = [
+    {
+        element:"script",
+        src:"./js/ui/mainLayout.js"
+    },
+    {
+        element:"script",
+        src:"./js/page-navigation.js"
+    },
+    {
+        element:"script",
+        src:"./js/page-projects.js"
+    },
+    {
+        element:"script",
+        src:"./js/menu.js"
+    }
+];
+
+for ( var i = 0; i < scripts.length; i++ )
+{
+    makeElement(scripts[i], root.body);
+}
 // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
 // @license-end
diff --git a/src/js/arching-kaos-stellar-network.js b/src/js/arching-kaos-stellar-network.js
index b05770b..ca4d586 100644
--- a/src/js/arching-kaos-stellar-network.js
+++ b/src/js/arching-kaos-stellar-network.js
@@ -86,11 +86,11 @@ function getHolders(a=0){
 }
 
 function getStellarConfigurationVariableURL(stellarAddress){
-    return activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active]+
+    return settings.stellar.horizon.list[settings.stellar.horizon.active]+
         'accounts/'+
         stellarAddress+
         '/data/'+
-        activeSettings.stellar.variableNames.list[activeSettings.stellar.variableNames.active];
+        settings.stellar.variableNames.list[settings.stellar.variableNames.active];
 }
 
 function checkAddressForConfigurationVariable(stellarAddress) {
@@ -99,13 +99,28 @@ function checkAddressForConfigurationVariable(stellarAddress) {
     progressPlaceholder.value++;
 }
 
-var server = new StellarSdk.Server(activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active], {allowHttp:true});
+var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
 
-function steptwo(r){
-    const L = r;
-    putit(L);
+function steptwo(i){
+    var ta=document.querySelector("#stellar-balances-table");
+    for (b in i.balances) {
+        x = i.balances[b];
+        var amount = {
+            element:"tr",
+            innerHTML:[
+                { element:"td", innerText: x.balance },
+                { element:"td", innerText: ( x.asset_code && x.asset_code != "undefined" ? x.asset_code : 'XLM')}
+            ]
+        }
+        makeElement(amount, ta);
+        progressPlaceholder.max++;
+        progressPlaceholder.value++;
+        if(document.querySelector("#stellar-balances-not-found")) document.querySelector("#stellar-balances-not-found").hidden = true;
+    }
 }
+
 function letme(a){
+    console.log("HERE WE GO");
     server.accounts()
     .accountId(a)
     .call()
@@ -114,24 +129,6 @@ function letme(a){
     );
 }
 
-function putit(i){
-    var ta=document.querySelector("#stellar-balances-table");
-    for (b in i.balances) {
-        var row = document.createElement("tr");
-        x = i.balances[b];
-        var amount = document.createElement("td");
-        var assetCode = document.createElement("td");
-        amount.innerText = x.balance;
-        assetCode.innerText = ( x.asset_code && x.asset_code != "undefined" ? x.asset_code : 'XLM');
-        row.appendChild(assetCode);
-        row.appendChild(amount);
-        ta.appendChild(row);
-        progressPlaceholder.max++;
-        progressPlaceholder.value++;
-        if(document.querySelector("#stellar-balances-not-found")) document.querySelector("#stellar-balances-not-found").hidden = true;
-    }
-}
-
 async function fetchNodeInfoFromClientWallet(stellarAddress){
     archingKaosLog("Loading your profile...");
     fetch(getStellarConfigurationVariableURL(stellarAddress), {
@@ -142,56 +139,35 @@ async function fetchNodeInfoFromClientWallet(stellarAddress){
     }).then(response=>{
         if(response.ok){
             response.json().then(json=>{
-                var cnf = document.createElement("p");
-                cnf.innerText = atob(json.value);
-                document.querySelector('#stellar-data-config').appendChild(cnf);
+                var cnf = {
+                    element:"p",
+                    innerText:atob(json.value)
+                };
+                makeElement(cnf, document.querySelector('#stellar-data-config'));
                 progressPlaceholder.max++;
                 progressPlaceholder.value++;
                 getConfiguration(atob(json.value),stellarAddress);
-            })
+            });
         }
-    })
+    });
 }
 
 function putKeyToField(k){
-    let base = document.querySelector("#stellar-freigher-connect-address-button");
+    const address = k;
+    var base = document.querySelector("#stellar-freigher-connect-address-button");
+    base.innerText=address;
+    base.onclick='';
     stellar_connection_status = 1;
     checkAddressForConfigurationVariable(k);
-    base.innerText=k;
-    base.onclick='';
 }
 
-// TODO: Clarify which parts of here will be needed
-//function showStellar(){
-//    if (stellar_connection_status === 1 ){
-//        document.querySelector("#stellar-balances-link").hidden=false;
-//        document.querySelector("#stellar-data-config-link").hidden=false;
-//        document.querySelector("#arching-kaos-node-info-link").hidden=false;
-//        document.querySelector("#mypage-section-link").hidden=false;
-//    }
-//}
-// TODO: (follow up) eg below
-// Hide stellar stuff if no freighter
-//if (!window.freighterApi.isConnected()) {
-//    document.querySelector("#stellar-freigher-connect-address-button").hidden=true;
-//}
-//
-//function hideStellar(){
-//    document.querySelector("#stellar-balances-link").hidden=true;
-//    document.querySelector("#stellar-data-config-link").hidden=true;
-//    document.querySelector("#arching-kaos-node-info-link").hidden=true;
-//    document.querySelector("#mypage-section-link").hidden=true;
-//}
-//
-//hideStellar();
-
 // That's how we get the publicKey
 const retrievePublicKey = async () => {
     let publicKey = "";
     let error = "";
     try {
         publicKey = await window.freighterApi.getPublicKey()
-        .then(publicKey => {putKeyToField(publicKey);letme(publicKey)});
+        .then((publicKey) => {putKeyToField(publicKey);letme(publicKey)});
     } catch (e) {
         error = e;
     }
diff --git a/src/js/arching-kaos-tools.js b/src/js/arching-kaos-tools.js
index 0e35c7f..0f62fd5 100644
--- a/src/js/arching-kaos-tools.js
+++ b/src/js/arching-kaos-tools.js
@@ -460,7 +460,7 @@ function crawlSchain(sblockHash){
         zchainLoadingStatus[sblockHash] = {loading : "started"};
         zchainsFound++;
         zchains[sblockHash] = [];
-        var url=activeSettings.localAPI+'/v0/sblock/'+sblockHash;
+        var url=settings.localAPI+'/v0/sblock/'+sblockHash;
         archingKaosLog("Fetching "+sblockHash+" sblock...");
         archingKaosFetchJSON(url, sblockExpanding, [sblockHash]);
         archingKaosLog("Fetching "+sblockHash+" sblock... Done!");
@@ -485,21 +485,21 @@ function checkPeers(json){
 
 function checkLocalPeers(){
     archingKaosLog("🔎 Querying for peers...");
-    var url=activeSettings.localAPI+'/v0/peers';
+    var url=settings.ak.connect.list[settings.ak.connect.active]+'/v0/peers';
     archingKaosFetchJSON(url, checkPeers);
     archingKaosLog("Querying for peers... Done!");
 }
 
 function checkLocalNodeInfo(){
     archingKaosLog("Ringing local bell...");
-    var url=activeSettings.localAPI+'/v0/node_info';
+    var url=settings.ak.connect.list[settings.ak.connect.active]+'/v0/node_info';
     archingKaosFetchJSON(url, checkIfZchainAndProceed, ["localnode"]);
     archingKaosLog("Ringing local bell... Done!");
 }
 
 function checkLocalSchain(){
     archingKaosLog("Querying for schain...");
-    var url=activeSettings.localAPI+'/v0/slatest';
+    var url=settings.ak.connect.list[settings.ak.connect.active]+'/v0/slatest';
     archingKaosFetchJSON(url, initCrawlSchain);
     archingKaosLog("Querying for schain... Done!");
 }
diff --git a/src/js/arching-kaos-web-ui-settings.js b/src/js/arching-kaos-web-ui-settings.js
index 802e770..e170f4e 100644
--- a/src/js/arching-kaos-web-ui-settings.js
+++ b/src/js/arching-kaos-web-ui-settings.js
@@ -62,7 +62,7 @@ var default_settings = {
             ],
             active: 0
         },
-        scan: true
+        scan: false
     },
     ak: {
         settings : {
@@ -74,7 +74,7 @@ var default_settings = {
                 'http://[fc59:6076:6299:6776:c13d:fbb2:1226:ead0]:8610',
                 'http://api.aknet.z.kaotisk-hund.com/'
             ],
-            active: 0
+            active: 1
         },
         scan: false
     }
@@ -89,11 +89,11 @@ var default_settings = {
 // if ( window.localStorage.getItem("ak-settings") === null ) {
 //    window.localStorage.setItem("ak-settings", JSON.stringify(default_settings));
 // }
-// var activeSettings = JSON.parse(window.localStorage.getItem("ak-settings"));
+// var settings = JSON.parse(window.localStorage.getItem("ak-settings"));
 //
 // All comments above are replaced by temporary initializing without saving
 // anything in the localStorage
-var activeSettings = default_settings;
+var settings = default_settings;
 
 // Also, remove any settings stored from previous runs
 window.localStorage.removeItem("ak-settings");
@@ -104,17 +104,17 @@ window.localStorage.removeItem("ak-settings");
 if (( location.origin === "http://z.kaotisk-hund.com") ||
     ( location.origin === "http://gw.ipfs.z.kaotisk-hund.com") ||
     ( location.origin === "http://[fc59:6076:6299:6776:c13d:fbb2:1226:ead0]")) {
-    activeSettings.ipfsSelectedGatewayAddress = 1;
-    activeSettings.horizonSelectedAddress = 1;
+    settings.ipfs.gateway.active = 1;
+    settings.stellar.horizon.active = 1;
 } else if ( location.origin === "http://localhost:3000" ) {
-    activeSettings.ipfsSelectedGatewayAddress = 2;
+    settings.ipfs.gateway.active = 2;
 } else {
-    activeSettings.ipfsSelectedGatewayAddress = 0;
+    settings.ipfs.gateway.active = 0;
 }
 
 var settingsPage = document.querySelector('#settings-section');
 
-var settingsKeys = Object.keys(activeSettings);
+var settingsKeys = Object.keys(settings);
 
 function renderCheck(container, value){
     var checkbox = document.createElement('input');
@@ -161,16 +161,10 @@ function settingPlaceToDOM(key, value){
         value.map((v)=>{
             if (v.constructor.name === "Object"){
                 Object.keys(v).forEach((value)=>{
-                    var li = document.createElement("option");
-                    li.innerText = value + ': ' + v[value];
-                    li.value = value;
-                    ul.appendChild(li);
+                    makeElement({element:"option", innerText:value + ': ' + v[value], value: value}, ul);
                 });
             } else {
-                var li = document.createElement("option");
-                li.innerText = v;
-                li.value = v;
-                ul.appendChild(li);
+                makeElement({element:"option", innerText:v, value: v}, ul);
             }
         });
         container.appendChild(ul);
@@ -178,37 +172,25 @@ function settingPlaceToDOM(key, value){
         console.log("KEY: "+key);
         switch (key){
             case 'ipfs':
-                var label = document.createElement('summary');
-                label.innerText = "Gateway";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"IPFS" }, container);
                 renderList(container, value.gateway);
 
                 break;
             case 'stellar':
-                var label = document.createElement('summary');
-                label.innerText = "Stellar";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Asset" }, container);
                 renderAssets(container, value.asset);
 
-                var label = document.createElement('summary');
-                label.innerText = "Variable Names";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Variable Names" }, container);
                 renderList(container, value.variableNames);
 
-                var label = document.createElement('summary');
-                label.innerText = "Horizon";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Horizon" }, container);
                 renderList(container, value.horizon);
 
-                var label = document.createElement('summary');
-                label.innerText = "Scan";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Scan" }, container);
                 renderCheck(container, value.scan);
                 break;
             case 'ak':
-                var label = document.createElement('summary');
-                label.innerText = "Connect";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Connect" }, container);
                 renderList(container, value.connect);
                 break;
             default:
@@ -223,17 +205,17 @@ function settingPlaceToDOM(key, value){
 
 settingsKeys.forEach(
     (value) => {
-        settingPlaceToDOM(value, activeSettings[value]);
+        settingPlaceToDOM(value, settings[value]);
     }
 );
 
 /* Small dump as pre text */
 var predump = document.createElement('pre');
-predump.innerText = JSON.stringify(activeSettings, null, 2);
+predump.innerText = JSON.stringify(settings, null, 2);
 settingsPage.appendChild(predump);
 /* END of: Small dump as pre text */
 
-// console.log(activeSettings.ipfsGatewayAddress[activeSettings.ipfsSelectedGatewayAddress]);
+// console.log(settings.ipfsGatewayAddress[settings.ipfsSelectedGatewayAddress]);
 
 // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
 // @license-end
diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js
new file mode 100644
index 0000000..a639d94
--- /dev/null
+++ b/src/js/ui/footer.js
@@ -0,0 +1,41 @@
+var footer = {
+    element:"div",
+    id:"footer",
+    innerHTML:[
+        {
+            element:"div",
+            innerHTML:[
+                {element:"p", innerText:"Arching Kaos 2019-2024"},
+                {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"},
+                {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"},
+                {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"},
+            ]
+        },
+        {
+            element:"span",
+            innerText:"::"
+        },
+
+        {
+            element:"div",
+            innerHTML:[
+                {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"},
+            ]
+        },
+        {
+            element:"span",
+            innerText:"::"
+        },
+        {
+            element:"div",
+            innerHTML:[
+                {
+                    element:"p",
+                    innerHTML:"Fra <a target=\"_blank\" href=\"https://www.kaotisk-hund.com\">Kaotisk Hund</a> med kjærlighet. <a href=\"bitcoin:BC1QYL9K5KDLSLJAED9PZCJJX0CPGZVY9LWY427SD4\">Donate</a>"
+                }
+            ]
+        }
+    ]
+};
+
+makeElement(footer, document.querySelector('.footer'));
diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js
new file mode 100644
index 0000000..f7adeae
--- /dev/null
+++ b/src/js/ui/mainLayout.js
@@ -0,0 +1,14 @@
+var scripts = [
+    {
+        element:"script",
+        src:"./js/ui/header.js"
+    },
+    {
+        element:"script",
+        src:"./js/ui/footer.js"
+    }
+]
+for ( var i = 0; i < scripts.length; i++ )
+{
+    makeElement(scripts[i], root.body);
+}
diff --git a/src/js/url-generators.js b/src/js/url-generators.js
index 6158b6f..d0739dc 100644
--- a/src/js/url-generators.js
+++ b/src/js/url-generators.js
@@ -9,33 +9,33 @@
  * URL generators
  *
  * This file contains functions that generate URL
- * based on the activeSettings.
+ * based on the settings.
  *
  * Apparently, we need `arching-kaos-web-ui-settings` to be loaded first
  *
  */
 
 function getIPNSURL(ipnsKey){
-    return activeSettings.ipfs.gateway.list[activeSettings.ipfs.gateway.active]+'ipns/'+ipnsKey;
+    return settings.ipfs.gateway.list[settings.ipfs.gateway.active]+'ipns/'+ipnsKey;
 }
 
 function getIPFSURL(ipfsHash){
-    return activeSettings.ipfs.gateway.list[activeSettings.ipfs.gateway.active]+'ipfs/'+ipfsHash;
+    return settings.ipfs.gateway.list[settings.ipfs.gateway.active]+'ipfs/'+ipfsHash;
 }
 
 function getHoldersOfActiveAssetURL(){
-    return activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active]+
+    return settings.stellar.horizon.list[settings.stellar.horizon.active]+
         'accounts?asset='+
-        activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].code+
+        settings.stellar.asset.list[settings.stellar.asset.active].code+
         ':'+
-        activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].issuer+
+        settings.stellar.asset.list[settings.stellar.asset.active].issuer+
         '&limit=200';
 }
 
 function getTrustlinesURL(code=null, issuer=null){
-    var code = (code === null)? activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].code : code;
-    var issuer = (issuer === null) ? activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].issuer : issuer;
-    return activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active]+
+    var code = (code === null)? settings.stellar.asset.list[settings.stellar.asset.active].code : code;
+    var issuer = (issuer === null) ? settings.stellar.asset.list[settings.stellar.asset.active].issuer : issuer;
+    return settings.stellar.horizon.list[settings.stellar.horizon.active]+
         'assets?asset_code='+code+
         '&asset_issuer='+issuer;
 }
-- 
cgit v1.2.3