diff options
author | kaotisk <kaotisk@arching-kaos.org> | 2023-09-01 06:18:20 +0300 |
---|---|---|
committer | kaotisk <kaotisk@arching-kaos.org> | 2023-09-01 06:18:20 +0300 |
commit | 7eb510a56a0015ccd887b694bdb497309dc42f87 (patch) | |
tree | 94ad8d24f308c05ca782a8c6bca53e85a0929086 /src | |
parent | c03eac7b80432c79c01a744734d0a4d4e989f46f (diff) | |
download | arching-kaos-web-ui-7eb510a56a0015ccd887b694bdb497309dc42f87.tar.gz arching-kaos-web-ui-7eb510a56a0015ccd887b694bdb497309dc42f87.tar.bz2 arching-kaos-web-ui-7eb510a56a0015ccd887b694bdb497309dc42f87.zip |
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
Diffstat (limited to 'src')
-rw-r--r-- | src/css/akn.css | 423 | ||||
-rw-r--r-- | src/css/style-layer-1.css | 82 | ||||
-rw-r--r-- | src/css/style-layer-2.css | 89 | ||||
-rw-r--r-- | src/icons/manifest-icon-192.maskable.png | bin | 0 -> 13801 bytes | |||
-rw-r--r-- | src/icons/manifest-icon-512.maskable.png | bin | 0 -> 58900 bytes | |||
-rw-r--r-- | src/index.html | 318 | ||||
-rw-r--r-- | src/js/app.js | 793 | ||||
-rw-r--r-- | src/js/arching-kaos-decentralized-radio.js | 19 | ||||
-rw-r--r-- | src/js/arching-kaos-fetch.js | 33 | ||||
-rw-r--r-- | src/js/arching-kaos-log.js | 9 | ||||
-rw-r--r-- | src/js/arching-kaos-spa-router.js | 13 | ||||
-rw-r--r-- | src/js/arching-kaos-stellar-network.js | 279 | ||||
-rw-r--r-- | src/js/arching-kaos-tools.js | 541 | ||||
-rw-r--r-- | src/js/arching-kaos-web-ui-settings.js | 97 | ||||
-rw-r--r-- | src/js/environment-setup.js | 71 | ||||
-rw-r--r-- | src/js/menu-magic.js | 48 | ||||
-rw-r--r-- | src/manifest.json | 35 |
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 Binary files differnew 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 Binary files differnew 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-found">No data found (yet?)!</em> - <table i |