aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/css/akn.css423
-rw-r--r--src/css/style-layer-1.css82
-rw-r--r--src/css/style-layer-2.css89
-rw-r--r--src/icons/manifest-icon-192.maskable.pngbin0 -> 13801 bytes
-rw-r--r--src/icons/manifest-icon-512.maskable.pngbin0 -> 58900 bytes
-rw-r--r--src/index.html318
-rw-r--r--src/js/app.js793
-rw-r--r--src/js/arching-kaos-decentralized-radio.js19
-rw-r--r--src/js/arching-kaos-fetch.js33
-rw-r--r--src/js/arching-kaos-log.js9
-rw-r--r--src/js/arching-kaos-spa-router.js13
-rw-r--r--src/js/arching-kaos-stellar-network.js279
-rw-r--r--src/js/arching-kaos-tools.js541
-rw-r--r--src/js/arching-kaos-web-ui-settings.js97
-rw-r--r--src/js/environment-setup.js71
-rw-r--r--src/js/menu-magic.js48
-rw-r--r--src/manifest.json35
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
Binary files differ
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
Binary files differ
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 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="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 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>