Huge update, read description

- Bug fixes
- Splitted app.js to many files
- Gathered CSS to one place instead of layers
- Redesigned page layout
- Added settings so you can personalize them later
- Redesigned menu layout
- Added radio player for AKDR to connect there

17 files changed, 1743 insertions, 1107 deletions

diff --git a/src/css/akn.css b/src/css/akn.css
index e1ead05..ec55ec6 100644
--- a/src/css/akn.css
+++ b/src/css/akn.css
@@ -1,3 +1,201 @@
+* {
+    animation: fadeIn 0.2s;
+}
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+
+@font-face {
+    /*    font-family: 'terminessttf_nerd_font_monoMd';*/
+    font-family: 'Hack Nerd Font';
+    src: url('https://ipfs.arching-kaos.com/ipfs/QmbzXvjvvoPDXkLBmyDeJt2iv55vj7ALVHVtn4VXpxsf1A/font.woff2') format('woff');
+    /*
+    src: url('https://ipfs.arching-kaos.com/ipfs/QmTiFZ9BjPGaoz5FEqsy5FJcVNRXrknsGkLPQXca6fb8Hz?filename=terminess_ttf_nerd_font_complete_mono-webfont.woff2') format('woff2'),
+    url('https://ipfs.arching-kaos.com/ipfs/QmeTV8JiVLdYw4Jt1gDngH2P6dZXkDucNKaruSMMAMkMhq?filename=terminess_ttf_nerd_font_complete_mono-webfont.woff') format('woff');*/
+    font-weight: normal;
+    font-style: larger;
+}
+body {
+    word-break: break-all;
+    padding: 1%;
+    background-color: #1a1a1a;
+    /*	font-family: monospace;
+    font-family: 'terminessttf_nerd_font_monoMd';*/
+    font-family: 'Hack Nerd Font';
+    font-size: medium;
+    color: #7ef07e;
+    display: block;
+    margin: auto;
+    padding: 5px;
+    /* 	color: #e6d5d5; */
+    position: relative;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    display: block;
+}
+
+p {
+    text-align: justify;
+    margin: 0px;
+}
+
+a {
+    color:rgb(51, 200, 234);
+    text-decoration:none;
+}
+
+a:hover{
+    color: #c5f0ff;
+}
+
+.header {
+    text-align: center;
+}
+.header h1 {
+    display: block;
+}
+@media (max-width: 540px) {
+    .header h1 {
+        display: none;
+    }
+}
+.feature-img {
+    text-align: center;
+    width: 100%;
+    /*! height: 35vh; */
+}
+
+
+.inv img {
+    width: 64px;
+    height: 64px;
+    border: 1px;
+}
+
+#menu {
+    text-align: center;
+}
+
+#menu a {display:inline-block;}
+
+.footer {
+    text-align: center;
+}
+.inv {display:block;text-align:center;}
+
+pre {overflow:auto;}
+
+.whole{
+    /*! background-color: #3a3a3a; 
+    display: grid;*/
+}
+
+#gotop-link{
+    text-align: right;
+    font-size: 0.8rem;
+}
+
+.container {
+    /*background-color: #3a3a3a;
+    max-width: 60vw;
+    margin: auto;
+    padding: 2%;
+    display: grid;
+    border-radius: 6px;
+    width: 40vw;
+    overflow: auto; */
+}
+
+h1 {
+    text-align: left;
+}
+
+p {
+    text-align: justify;
+}
+
+div {
+    margin: auto;
+    padding: 10px;
+}
+
+#contact {
+    /* 	background-color: #443644; */
+    /*! border-radius: 0; */
+    border-style: dashed;
+    border-width: 3px;
+    border-color: #276a4b;
+}
+
+label {
+    width: 100%;
+}
+
+input {
+    width: 100%;
+    border: 0px;
+    border-radius: 5px;
+}
+
+.sub-input{
+    border-radius: 0px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #7ef07e;
+    padding: 1.1%;
+    background: #1a1a1a;
+    color: #7ef07e;
+    text-align: center;
+    padding: 1% 0 1% 0;
+}
+
+textarea {
+    width: 100%;
+    border: 0px;
+    border-radius: 5px;
+    height: 100px;
+}
+.row .large-12 .small-12 {
+    width: 100%;
+    display: inline-grid;
+}
+.large-6 .small-6 {
+    width: 50%;
+    display: inline-flex;
+}
+.success {
+    background-color: green;
+    color: white;
+}
+.alert {
+    background-color: red;
+    color: black;
+}
+.button {
+    border: 0px;
+    padding: 7px;
+    color: white;
+}
+button {
+    color: rgb(51, 200, 234);
+    text-decoration: none;
+    font-family: 'Hack Nerd Font';
+    background: #1c241c;
+    border: 1px solid #17392e;
+    padding: 10px;
+    margin: 1px;
+}
+
+button:hover {
+    background: #008033;
+}
+
 pre { white-space: pre-wrap; }
 #stellar-freigher-connect-address {
     position: fixed;
@@ -7,7 +205,7 @@ pre { white-space: pre-wrap; }
     padding: 0.5vh 1vw;
     font-size: 0.9rem;
 }
-#stats-section div {
+.stellar-address {
     border: #1c241c 2px solid;
     color: #ff1e1e;
     padding: 2px;
@@ -26,85 +224,146 @@ article {
     border: 2px solid #672178;
     padding: 24px;
 }
-.sidebar{
+.topbar audio {
+    width: 25%;
+    padding: 2%;
+}
+.topbar {
     position: fixed;
     top: 0;
-    left: 0;
     bottom: 0;
     float: left;
-    max-width: 25vw;
-    padding-right: 1vw;
-    padding-left: 1vw;
-    padding-top: 1vh;
-    padding-bottom: 1vh;
+    min-height: 80px;
+    justify-content: space-between;
+    max-height: 80px;
+    height: 80px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
 }
 
 .main{
-    position: absolute;
-    top: 0;
-    right: 2vw;
-    left: 27vw;
-    max-width: 86vw;
+    /* position: absolute; */
+    position: fixed;
+    top: 80px;
+    background-color: #2a2a2a;
+    bottom: 62px;
     width: auto;
+    right: 0vw;
+    left: 0vw;
     padding-left: 2vw;
     padding-right: 2vw;
     padding-top: 1vh;
     padding-bottom: 1vh;
+    max-height: 80vh;
+    height: auto;
+    min-height: 45vh;
     overflow-y: auto;
-    max-height: 89vh;
-}
-@font-face {
-    font-family: 'terminessttf_nerd_font_monoMd';
-    src: url('https://ipfs.arching-kaos.com/ipfs/QmTiFZ9BjPGaoz5FEqsy5FJcVNRXrknsGkLPQXca6fb8Hz?filename=terminess_ttf_nerd_font_complete_mono-webfont.woff2') format('woff2'),
-	 url('https://ipfs.arching-kaos.com/ipfs/QmeTV8JiVLdYw4Jt1gDngH2P6dZXkDucNKaruSMMAMkMhq?filename=terminess_ttf_nerd_font_complete_mono-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
+    z-index: 1;
 }
-body {
-    position: relative;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0;
-    margin: 0;
-    display: block;
-    font-family: 'terminessttf_nerd_font_monoMd';
+
+.page-layout {
+    display: flex;
+    flex-direction: column;
 }
-.footer {
-    position: fixed;
-    height: 8vh;
-    bottom: 0;
-    background: #1c241c;
-    width: -moz-available;
-    width: -webkit-fill-available;
+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 .header img {
-    max-width: 15vw;
+    max-width: 80px;
+    width: 32px;
     width: -moz-available;
     width: -webkit-fill-available;
 }
 h1 {
-    font-size: large;
+    margin: 0px;
 }
 #menu {
     padding: 2px;
+    overflow-y: auto;
+    display: flex;
+    color:rgb(51, 200, 234);
 }
-#menu a {
+#menu button, #modules-submenu-link, .menu-clickable {
+    cursor: pointer;
     display: flex;
+    background: #1c241c;
+    border: 1px solid #17392e;
+    /* padding: 1px; */
+    padding: 10px;
+    margin: 1px;
+}
+#menu button:hover, #modules-submenu-link:hover, .menu-clickable:hover  {
+    background: #008033;
 }
-#menu a {
-      display: flex;
-      background: #1c241c;
-      border: 1px solid #17392e;
-      padding: 1px;
-      margin: 1px;
+#mobile-menu {
+    display: none;
 }
-#menu a:hover {
-      background: #008033;
+.dropdown {
+    flex-direction: row;
+}
+#explore-submenu {
+    display: none;
+}
+#modules-submenu {
+    display: none;
+}
+
+#double-floor {
+    display: flex;
+    flex-direction: column;
 }
+
+.upper-floor {
+    display: flex;
+    flex-direction: row;
+}
+
+.lower-floor {
+    display: none;
+    flex-direction: row;
+}
+
+@media (max-width: 770px) {
+    #double-floor {
+        flex-direction: column;
+    }
+
+    .upper-floor {
+        flex-direction: column;
+    }
+
+    .lower-floor {
+        flex-direction: column;
+    }
+    .dropdown {
+        flex-direction: column;
+    }
+    #double-floor {
+        position: fixed;
+        /*display: none;*/
+        top: 0px;
+        z-index: 0;
+        align-items: center;
+        background-color: #1a1a1a8a;
+        height: 100%;
+        /* overflow-y: auto; */
+        width: 100%;
+        /* max-width: -webkit-fill-available; */
+       /* max-height: 203px; */
+    }
+    #mobile-menu {
+        display: flex;
+    }
+}
+
 div {
     padding: 0;
+    margin: 0;
 }
 .hsm {
     z-index: 999;
@@ -122,3 +381,69 @@ audio {
     width: -moz-available;
 }
 
+summary {
+    background-color: #3a3a3a;
+    padding: 24px;
+}
+details {
+    border: 2px solid #3a3a3a;
+    background-color: #2a2a2a;
+    padding: 24px;
+}
+#zd-* {
+    border: 2px solid #672178;
+    padding: 24px;
+}
+#settings-section {
+    gap: 5px;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+#settings-section div {
+    flex-direction: row;
+}
+
+#settings-section p {}
+#settings-section label {
+    font-style: bold;
+}
+#settings-section button {}
+
+
+/* FOOTER */
+footer {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 2px;
+    text-align: right;
+}
+.footer {
+    margin: 0px;
+    font-size: medium;
+    position: fixed;
+    height: 62px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    /* min-height: 14vh; */
+    flex-direction: row;
+    bottom: 0;
+    background: #1c241c;
+    width: -moz-available;
+    width: -webkit-fill-available;
+}
+@media (max-width: 880px) {
+    .footer {
+        font-size: smaller;
+        gap: 0px;
+        flex-direction: column;
+    }
+    .footer span {
+        display: none;
+    }
+}
diff --git a/src/css/style-layer-1.css b/src/css/style-layer-1.css
index 5bc34d2..e69de29 100644
--- a/src/css/style-layer-1.css
+++ b/src/css/style-layer-1.css
@@ -1,82 +0,0 @@
-body {
-	padding: 1%;
-	background-color: #1a1a1a;
-	font-family: monospace;
-	font-size: 1rem;
-	color: #7ef07e;
-}
-
-p {
-	text-align: justify;
-}
-
-a {
-	color:rgb(51, 200, 234);
-	text-decoration:none;
-}
-
-a:hover{
-	color: #c5f0ff;
-}
-
-.header {
-	text-align: center;
-	margin: auto;
-	padding: 5px;
-}
-
-.header img{
-    max-width: 150px;
-    width: 150px;
-}
-
-.header p {
-	text-align: center;
-}
-
-.feature-img {
-	text-align: center;
-	width: 100%;
-	/*! height: 35vh; */
-}
-
-
-.inv img {
-	width: 64px;
-	height: 64px;
-	border: 1px;
-}
-
-#menu {
-	text-align: center;
-}
-
-#menu a {display:inline-block;}
-
-.footer {
-	text-align: center;
-}
-.inv {display:block;text-align:center;}
-
-pre {overflow:auto;}
-
-.whole{
-    /*! background-color: #3a3a3a; 
-    display: grid;*/
-}
-
-#gotop-link{
-	text-align: right;
-	font-size: 0.8rem;
-}
-
-.container {
-    /*background-color: #3a3a3a;
-    max-width: 60vw;
-    margin: auto;
-    padding: 2%;
-    display: grid;
-    border-radius: 6px;
-    width: 40vw;
-    overflow: auto; */
-}
diff --git a/src/css/style-layer-2.css b/src/css/style-layer-2.css
index 67ef101..e69de29 100644
--- a/src/css/style-layer-2.css
+++ b/src/css/style-layer-2.css
@@ -1,89 +0,0 @@
-body {
-	display: block;
-	margin: auto;
-	padding: 5px;
-/* 	color: #e6d5d5; */
-	position: absolute;
-	top: 5vh;
-	bottom: 5vh;
-	left: 10vw;
-	right: 10vw;
-}
-
-h1 {
-	text-align: left;
-}
-
-p {
-	text-align: justify;
-}
-
-div {
-	margin: auto;
-	padding: 10px;
-}
-
-#contact {
-/* 	background-color: #443644; */
-	/*! border-radius: 0; */
-	border-style: dashed;
-	border-width: 3px;
-	border-color: #276a4b;
-}
-
-label {
-	width: 100%;
-}
-
-input {
-	width: 100%;
-	border: 0px;
-	border-radius: 5px;
-}
-
-.sub-input{
-	border-radius: 0px;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #7ef07e;
-	padding: 1.1%;
-	background: #1a1a1a;
-	color: #7ef07e;
-	text-align: center;
-	padding: 1% 0 1% 0;
-}
-
-textarea {
-	width: 100%;
-	border: 0px;
-	border-radius: 5px;
-	height: 100px;
-}
-.row .large-12 .small-12 {
-	width: 100%;
-	display: inline-grid;
-}
-.large-6 .small-6 {
-	width: 50%;
-	display: inline-flex;
-}
-.success {
-	background-color: green;
-	color: white;
-}
-.alert {
-	background-color: red;
-	color: black;
-}
-.button {
-	border: 0px;
-	padding: 7px;
-	color: white;
-}
-footer {
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	padding: 2px;
-	text-align: right;
-}
diff --git a/src/icons/manifest-icon-192.maskable.png b/src/icons/manifest-icon-192.maskable.png
new file mode 100644
index 0000000..cadf828
--- /dev/null
+++ b/src/icons/manifest-icon-192.maskable.png
diff --git a/src/icons/manifest-icon-512.maskable.png b/src/icons/manifest-icon-512.maskable.png
new file mode 100644
index 0000000..cfe0cdb
--- /dev/null
+++ b/src/icons/manifest-icon-512.maskable.png
diff --git a/src/index.html b/src/index.html
index 690a13f..33926d0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <title>Arching Kaos</title>
-        <link rel="stylesheet" type="text/css" href="./css/style-layer-1.css">
-        <link rel="stylesheet" type="text/css" href="./css/style-layer-2.css">
         <link rel="stylesheet" type="text/css" href="./css/akn.css">
         <style type="text/css">
         </style>
@@ -15,138 +13,224 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-freighter-api/1.1.2/index.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+        <meta name="theme-color" content="#7ef07e" />
+        <link rel="manifest" href="manifest.json">
     </head>
     <body>
-        <p class="hsm" onclick="hsm()">Hide menu</p>
-        <div class="sidebar">
-            <div class="header">
-                <img src="./img/header-logo.png">
-                <h1 style="text-align: center;">Arching Kaos</h1>
+        <div class="page-layout">
+            <div class="topbar">
+                <div class="header">
+                    <img src="./img/header-logo.png">
+                    <h1 style="text-align: center;">Arching Kaos</h1>
+                </div>
+                <button class="menu-clickable" id="mobile-menu" onclick="toggleMenu(this)">Show menu</button>
+                <nav id="double-floor" class="linkin">
+                    <div id="menu" class="linkin upper-floor">
+                        <button class="menu-clickable" id="#/welcome-section" onclick="menusel(this)">Home</button>
+                        <button class="has-dropdown menu-clickable" id="modules-submenu-link" onclick="modulesSubToggle(this)">Modules</button>
+                        <button class="has-dropdown menu-clickable" id="explore-submenu-link" onclick="exploreSubToggle(this)">Explore</button>
+                        <button class="menu-clickable" id="#/chat-section" onclick="menusel(this)">Chat</button>
+                        <button class="menu-clickable" id="#/settings-section" onclick="menusel(this)">Settings</button>
+                        <button class="menu-clickable" id="#/stellar-section" onclick="menusel(this)">Stellar</button>
+                        <button class="menu-clickable" id="#/about-section" onclick="menusel(this)">About</button>
+                    </div>
+                    <div id="menu" class="linkin lower-floor">
+                        <div class="dropdown" id="modules-submenu">
+                            <button class="menu-clickable" onclick="modulesSubToggle(this)">..</button>
+                            <button class="menu-clickable" id="#/mixtapes-section" onclick="menusel(this)">Mixtapes</button>
+                            <button class="menu-clickable" id="#/news-section" onclick="menusel(this)">News</button>
+                            <button class="menu-clickable" id="#/files-section" onclick="menusel(this)">Files</button>
+                        </div>
+                        <div class="dropdown" id="explore-submenu">
+                            <button class="menu-clickable" onclick="exploreSubToggle(this)">..</button>
+                            <button class="menu-clickable" id="#/zchain-data-section" onclick="menusel(this)">zchain</button>
+                            <button class="menu-clickable" id="#/stats-section" onclick="menusel(this)">Stats</button>
+                        </div>
+                        <div class="dropdown" id="stellar-submenu">
+                            <span id="mypage-section-link">
+                                <button href="#mypage-section" onclick="menusel(this)">My page</button>
+                            </span>
+                            <span id="stellar-balances-link">
+                                <button href="#stellar-balances" onclick="menusel(this)">Balances</button>
+                            </span>
+                            <span id="stellar-data-config-link">
+                                <button href="#stellar-data-config" onclick="menusel(this)">Data</button>
+                            </span>
+                            <span id="arching-kaos-id-link">
+                                <button href="#arching-kaos-id" onclick="menusel(this)">AKID</button>
+                            </span>
+                        </div>
+                    </div>
+                </nav>
+                <audio id="radio-player" controls autoplay hidden></audio>
+                <div>
+                    <span>Radio</span>
+                    <button id="radio-button-controller" class="menu-clickable" onclick="radioToggle();">Loading...</button>
+                </div>
             </div>
-            <div class="options-menu" style="display:none;">
-                    <select>
+            <div id="stellar-freigher-connect-address" onmouseenter="showStellar()" onmouseleave="hideStellar()"> 
+                <div id="stellar-related-dropdown" class="linkin">
+                    <div id="menu">
+                    </div>
+                </div>
+            </div>
+            <div class="main">
+                <div id="welcome-section">
+                    <h2>Welcome!!!</h2>
+                    <p>This is the application page of Arching Kaos project.</p>
+                    <p>Please wait for your web browser to find the content!</p>
+                    <button onclick="scanStellarNetworkForPeers()">Scan Stellar Network</button>
+                    <button onclick="ringlocalbell()">Ask local API</button>
+                    <div style="padding: 10%;" class="dialog">
+                        <p>Loading ...</p>
+                        <progress id="total-progress"></progress>
+                        <pre id="current-log-message"></pre>
+                        <details id="logs-area-element">
+                            <summary>Logs</summary>
+                        </details>
+                    </div>
+                </div>
+                <div id="about-section">
+                    <h2>About</h2>
+                    <p>Arching Kaos is a project about radio, music, communications and decentralization.</p>
+                    <p>On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).</p>
+                    <p>You can see the zchains appearing in "zchain" and logs of the process on "Logs"</p>
+                    <p>Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.</p>
+                    <p>Furthermore, if you are using Freighter extension you can additionally see:</p>
+                    <ol>
+                        <li>Your balances on your wallet</li>
+                        <li>Your configuration IPNS address (if any)</li>
+                        <li>Your Arching Kaos configuration (if any)</li>
+                        <li>Your zchain (...)</li>
+                        <li>Your posted newsfeed (...)</li>
+                    </ol>
+                    <p>Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.</p>
+                </div>
+                <div id="stellar-balances">
+                    <h2>Balances</h2>
+                    <em id="stellar-balances-not-found">No data found (yet?)!</em>
+                    <table id="stellar-balances-table"></table>
+                </div>
+                <div id="stellar-data-config">
+                    <h2>Data</h2>
+                    <em id="stellar-data-config-not-found">No data found (yet?)!</em>
+                </div>
+                <div id="arching-kaos-id">
+                    <h2>AKID</h2>
+                    <em id="akid-not-found">No data found (yet?)!</em>
+                </div>
+                <div id="stellar-section">
+                    <h2>Stellar dashboard</h2>
+                    <button class="sub-input" id="stellar-freigher-connect-address-button" onclick="connect()" >Connect with Stellar address</button>
+                </div>
+                <div id="mypage-section">
+                    <h2>My page</h2>
+                    <div id="my-news">
+                        <h3>My news</h3>
+                        <em id="my-news-sec-not-found">No data found (yet?)!</em>
+                    </div>
+                    <div id="my-mixtapes">
+                        <h3>My mixtapes</h3>
+                        <em id="my-mixtapes-sec-not-found">No data found (yet?)!</em>
+                    </div>
+                    <div id="my-zchain">
+                        <h3>My zchain</h3>
+                        <em id="my-zchain-sec-not-found">No data found (yet?)!</em>
+                    </div>
+                </div>
+                <div id="zchain-data-section">
+                    <h2>zchains</h2>
+                    <em id="zchain-data-sec-not-found">No data found (yet?)!</em>
+                </div>
+                <div id="news-section">
+                    <h2>News</h2>
+                    <em id="news-sec-not-found">No data found (yet?)!</em>
+                </div>
+                <div id="mixtapes-section">
+                    <h2>Mixtapes</h2>
+                    <em id="mixtapes-sec-not-found">No data found (yet?)!</em>
+                </div>
+                <div id="files-section">
+                    <h2>Files</h2>
+                    <em id="files-sec-not-found">No data found (yet?)!</em>
+                </div>
+                <div id="settings-section">
+                    <h2>Settings</h2>
+                    <div class="options-menu">
+                        <select>
                             <option value="ARCHINGKAOS">ARCHINGKAOS</option>
                             <option value="KAOTISKHUND" disabled>KAOTISKHUND</option>
-                    </select>
-                    <select>
+                        </select>
+                        <select>
                             <option value="archingkaos">ipfs.arching-kaos.com</option>
                             <option value="ipfsio" disabled>ipfs.io</option>
                             <option value="localhost" disabled>localhost</option>
-                    </select>
-            </div>
-            <hr>
-            <div id="menu" class="linkin">
-                <a href="#welcome-section" onclick="menusel(this)">Home</a>
-                <a href="#mixtapes-section" onclick="menusel(this)">Mixtapes</a>
-                <a href="#news-section" onclick="menusel(this)">News</a>
-                <a href="#files-section" onclick="menusel(this)">Files</a>
-                <a href="#zchain-data-section" onclick="menusel(this)">zchain</a>
-                <a href="#stats-section" onclick="menusel(this)">Stats</a>
-                <a href="#chat-section" onclick="menusel(this)">Chat</a>
-                <a href="#about-section" onclick="menusel(this)">About</a>
-                <a href="#loading-status" onclick="menusel(this)">Logs</a>
-            </div>
-        </div>
-        <div id="stellar-freigher-connect-address" onmouseenter="showStellar()" onmouseleave="hideStellar()"> 
-            <button class="sub-input" id="stellar-freigher-connect-address-button" onclick="connect()" >Connect with Stellar address</button>
-            <div id="stellar-related-dropdown" class="linkin">
-                <div id="menu">
-                    <span id="mypage-section-link"><a href="#mypage-section" onclick="menusel(this)">My page</a>  </span>
-                    <span id="stellar-balances-link"><a href="#stellar-balances" onclick="menusel(this)">Balances</a>  </span>
-                    <span id="stellar-data-config-link"><a href="#stellar-data-config" onclick="menusel(this)">Data</a>  </span>
-                    <span id="arching-kaos-id-link"><a href="#arching-kaos-id" onclick="menusel(this)">AKID</a>  </span>
+                        </select>
+                    </div>
+                </div>
+                <div id="chat-section">
+                    <h2>Chat</h2>
+                    <iframe src="https://irc.arching-kaos.net" style="width: -webkit-fill-available; width: -moz-available; height: 64vh;"></iframe>
+                </div>
+                <div id="stats-section">
+                    <h2>Stats</h2>
+                    <div class="available-networks">
+                        <h3>Networks</h3>
+                        <details class="stellar-network">
+                            <summary>Stellar</summary>
+                        </details>
+                        <details class="aknet-network">
+                            <summary>Arching Kaos Experimental Instance</summary>
+                        </details>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="main">
-            <div id="welcome-section">
-                <h2>Welcome!!!</h2>
-                <p>This is the application page of Arching Kaos project.</p>
-                <p>Please wait for your web browser to find the content!</p>
-                <p>Loading ...</p>
-                <progress id="total-progress"></progress>
-                <pre id="logtext"></pre>
-                <em>* When you see "Reached genesis link..." it means that a zchain was properly loaded in the page.</em>
-            </div>
-            <div id="about-section">
-                <h2>About</h2>
-                <p>Arching Kaos is a project about radio, music, communications and decentralization.</p>
-                <p>On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).</p>
-                <p>You can see the zchains appearing in "zchain" and logs of the process on "Logs"</p>
-                <p>Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.</p>
-                <p>Furthermore, if you are using Freighter extension you can additionally see:</p>
-                <ol>
-                    <li>Your balances on your wallet</li>
-                    <li>Your configuration IPNS address (if any)</li>
-                    <li>Your Arching Kaos configuration (if any)</li>
-                    <li>Your zchain (...)</li>
-                    <li>Your posted newsfeed (...)</li>
-                </ol>
-                <p>Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.</p>
-            </div>
-            <div id="stellar-balances">
-                <h2>Balances</h2>
-                <em id="stellar-balances-not-f