aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkaotisk <kaotisk@arching-kaos.org>2024-11-29 16:18:35 +0200
committerkaotisk <kaotisk@arching-kaos.org>2024-11-29 16:18:35 +0200
commit084e3ce6efc49c2d43ce9b44d96e430f8057848e (patch)
treed0369baa64a57b8fcc224135918b421028e2d36e
parent1dab98b6617b4dc6c36c57794895725bb8ef3d47 (diff)
downloadarching-kaos-web-ui-084e3ce6efc49c2d43ce9b44d96e430f8057848e.tar.gz
arching-kaos-web-ui-084e3ce6efc49c2d43ce9b44d96e430f8057848e.tar.bz2
arching-kaos-web-ui-084e3ce6efc49c2d43ce9b44d96e430f8057848e.zip
Visual improvements
-rw-r--r--src/css/akn.css27
-rw-r--r--src/js/ui/footer.js2
-rw-r--r--src/js/ui/header.js11
-rw-r--r--src/js/ui/main.js34
-rw-r--r--src/js/ui/mainLayout.js8
-rw-r--r--src/js/ui/menu.js53
-rw-r--r--src/js/ui/sections/aboutSection.js29
-rw-r--r--src/js/ui/sections/akNodeInfoSection.js12
-rw-r--r--src/js/ui/sections/chatSection.js23
-rw-r--r--src/js/ui/sections/commentsSection.js12
-rw-r--r--src/js/ui/sections/filesSection.js18
-rw-r--r--src/js/ui/sections/mixtapesSection.js18
-rw-r--r--src/js/ui/sections/myPageSection.js24
-rw-r--r--src/js/ui/sections/newsSection.js18
-rw-r--r--src/js/ui/sections/notFoundSection.js23
-rw-r--r--src/js/ui/sections/radioSection.js23
-rw-r--r--src/js/ui/sections/settingsSection.js44
-rw-r--r--src/js/ui/sections/statsSection.js29
-rw-r--r--src/js/ui/sections/stellarBalancesSection.js19
-rw-r--r--src/js/ui/sections/stellarDataConfigSection.js18
-rw-r--r--src/js/ui/sections/stellarSection.js20
-rw-r--r--src/js/ui/sections/welcomeSection.js120
-rw-r--r--src/js/ui/sections/zchainDataSection.js18
23 files changed, 582 insertions, 21 deletions
diff --git a/src/css/akn.css b/src/css/akn.css
index 51fec87..04b4917 100644
--- a/src/css/akn.css
+++ b/src/css/akn.css
@@ -52,6 +52,10 @@ a:hover{
color: #c5f0ff;
}
+#header {
+ cursor: pointer;
+}
+
.header {
text-align: center;
}
@@ -526,3 +530,26 @@ details {
align-items: center;
justify-content: center;
}
+
+.manual-scan {
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 5px;
+}
+
+.where-am-i {
+ height: 32px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+}
+
+.where-am-i img {
+ height: 32px;
+ display: flex;
+ flex-direction: row;
+}
diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js
index a639d94..a611b59 100644
--- a/src/js/ui/footer.js
+++ b/src/js/ui/footer.js
@@ -1,3 +1,5 @@
+import { makeElement } from "../arching-kaos-generator.js";
+
var footer = {
element:"div",
id:"footer",
diff --git a/src/js/ui/header.js b/src/js/ui/header.js
index 51d48f6..18d8c2e 100644
--- a/src/js/ui/header.js
+++ b/src/js/ui/header.js
@@ -1,3 +1,5 @@
+import { makeElement } from "../arching-kaos-generator.js";
+
var header = {
element: "div",
id: 'header',
@@ -7,13 +9,8 @@ var header = {
{element: "img", src:"./img/header-logo.png" }
]},
{ element: "h1", style:"text-align: center;", innerText: "Arching Kaos"}
- ]
+ ],
+ onclick: 'menusel({id:"#/welcome-section"});'
}
-function goHomeAction()
-{
- menusel({id:"#/welcome-section"});
-}
makeElement(header, document.querySelector('#logo-title-placeholder'));
-
-document.querySelector('#logo-button').addEventListener("click", goHomeAction);
diff --git a/src/js/ui/main.js b/src/js/ui/main.js
index e69de29..f57be59 100644
--- a/src/js/ui/main.js
+++ b/src/js/ui/main.js
@@ -0,0 +1,34 @@
+import { makeElement } from "../arching-kaos-generator.js";
+
+var scripts = [
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/welcomeSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/chatSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/notFoundSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/settingsSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/radioSection.js"
+ }
+];
+
+for ( var i = 0; i < scripts.length; i++ )
+{
+ makeElement(scripts[i], document.querySelector('body'));
+}
diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js
index 2c76177..6201e2b 100644
--- a/src/js/ui/mainLayout.js
+++ b/src/js/ui/mainLayout.js
@@ -1,22 +1,28 @@
+import { makeElement } from "../arching-kaos-generator.js";
+
var scripts = [
{
element:"script",
+ type: "module",
src:"./js/ui/header.js"
},
{
element:"script",
+ type: "module",
src:"./js/ui/menu.js"
},
{
element:"script",
+ type: "module",
src:"./js/ui/main.js"
},
{
element:"script",
+ type: "module",
src:"./js/ui/footer.js"
}
]
for ( var i = 0; i < scripts.length; i++ )
{
- makeElement(scripts[i], root.body);
+ makeElement(scripts[i], document.querySelector('body'));
}
diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js
index b9cafaa..5344966 100644
--- a/src/js/ui/menu.js
+++ b/src/js/ui/menu.js
@@ -5,6 +5,7 @@
* @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
*
*/
+import { makeElement } from "../arching-kaos-generator.js";
var menuButton = {
element: "button",
@@ -77,7 +78,6 @@ var stellarSubmenuTemplate = {
makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor'));
-
/*
* Menu bar management
*
@@ -93,7 +93,7 @@ lowerFloor.style.display = 'none';
var modulesSubmenu = document.querySelector('#modules-submenu');
modulesSubmenu.style.display = 'none';
-function modulesSubToggle(){
+export function modulesSubToggle(){
modulesSubmenu.style.display = modulesSubmenu.style.display === 'none' ? 'flex' : 'none';
upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
@@ -101,7 +101,7 @@ function modulesSubToggle(){
var exploreSubmenu = document.querySelector('#explore-submenu');
exploreSubmenu.style.display = 'none';
-function exploreSubToggle(){
+export function exploreSubToggle(){
exploreSubmenu.style.display = exploreSubmenu.style.display === 'none' ? 'flex' : 'none';
upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
@@ -109,22 +109,54 @@ function exploreSubToggle(){
var stellarSubmenu = document.querySelector('#stellar-submenu');
stellarSubmenu.style.display = 'none';
-function stellarSubToggle(){
+export function stellarSubToggle(){
stellarSubmenu.style.display = stellarSubmenu.style.display === 'none' ? 'flex' : 'none';
upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none';
lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none';
}
+/*
+ * Array of all the menu-panes IDs
+ */
+var menuids = [
+ '#welcome-section',
+ '#about-section',
+ '#zchain-data-section',
+ '#news-section',
+ '#comments-section',
+ '#stats-section',
+ '#mixtapes-section',
+ '#chat-section',
+ '#radio-section',
+ '#mypage-section',
+ '#stellar-balances',
+ '#stellar-data-config',
+ '#arching-kaos-node-info',
+ '#files-section',
+ '#settings-section',
+ '#stellar-section',
+ '#not-found-section'
+];
// Function to hide all the panes
-function menuinit(){
- menuids.forEach(m=>document.querySelector(m).hidden=true);
+export function menuinit(){
+ for ( var i = 0; i < menuids.length; i++ ){
+ var sec = document.querySelector(menuids[i]);
+ if ( sec !== null )
+ {
+ sec.hidden = true;
+ }
+ else
+ {
+ console.log(`menuinit: ${menuids[i]} was not found`);
+ }
+ }
}
/*
* Function called on clicks on the menu bar
* Unhides the pane connected to the clicked menu entry
*/
-function menusel(m){
+export function menusel(m){
menuinit();
// document.querySelector(m.id.replace('/','')).hidden=false;
locationHashSetter(m.id);
@@ -135,14 +167,9 @@ function menusel(m){
}
}
-function toggleMenu(){
+export function toggleMenu(){
mainContainer.style.display = 'none';
doubleFloorMenu.style.display = 'flex';
}
-// And call
-menuinit();
-locationHashOnChange();
-
-isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex';
// @license-end
diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js
new file mode 100644
index 0000000..933b6aa
--- /dev/null
+++ b/src/js/ui/sections/aboutSection.js
@@ -0,0 +1,29 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var aboutSection = {
+ element: "div",
+ hidden: true,
+ id:"about-section",
+ innerHTML: `
+ <div class="where-am-i">
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>About</h2>
+ </div>
+ <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>
+ `
+};
+
+makeElement(aboutSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/akNodeInfoSection.js b/src/js/ui/sections/akNodeInfoSection.js
new file mode 100644
index 0000000..42223bd
--- /dev/null
+++ b/src/js/ui/sections/akNodeInfoSection.js
@@ -0,0 +1,12 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var akNodeInfoSection = {
+ element: "div",
+ id: "arching-kaos-node-info",
+ innerHTML: `
+ <h2>Node Info</h2>
+ <em id="node-info-not-found">No data found (yet?)!</em>
+ `
+};
+
+makeElement(akNodeInfoSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/chatSection.js b/src/js/ui/sections/chatSection.js
new file mode 100644
index 0000000..e9edd29
--- /dev/null
+++ b/src/js/ui/sections/chatSection.js
@@ -0,0 +1,23 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var chatSection = {
+ element: 'div',
+ id:"chat-section",
+ style:"height: 100%;",
+ innerHTML: [
+ {
+ element: 'button',
+ style:"position: fixed;",
+ onclick:"refreshChat()",
+ innerText:"Refresh"
+ },
+ {
+ element: 'iframe',
+ id: "chat-iframe",
+ src: "https://irc.arching-kaos.net",
+ style: "width: 100%; height: 100%;"
+ }
+ ]
+};
+
+makeElement(chatSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js
new file mode 100644
index 0000000..7209079
--- /dev/null
+++ b/src/js/ui/sections/commentsSection.js
@@ -0,0 +1,12 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var commentsSection = {
+ element: 'div',
+ id: 'comments-section',
+ innerHTML: [
+ { element: "h2", innerText: "Comments" },
+ { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"}
+ ]
+};
+
+makeElement(commentsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js
new file mode 100644
index 0000000..726fa5a
--- /dev/null
+++ b/src/js/ui/sections/filesSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var filesSection = {
+ element: 'div',
+ id: "files-section",
+ innerHTML: `
+ <div class="where-am-i">
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Modules</h2>
+ <span>&gt;</span>
+ <h2>Files</h2>
+ </div>
+ <em id="files-sec-not-found">No data found (yet?)!</em>
+ `
+};
+
+makeElement(filesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js
new file mode 100644
index 0000000..64280e4
--- /dev/null
+++ b/src/js/ui/sections/mixtapesSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var mixtapesSection = {
+ element: "div",
+ id: "mixtapes-section",
+ innerHTML: `
+ <div class="where-am-i">
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Modules</h2>
+ <span>&gt;</span>
+ <h2>Mixtapes</h2>
+ </div>
+ <em id="mixtapes-sec-not-found">No data found (yet?)!</em>
+ `
+};
+
+makeElement(mixtapesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/myPageSection.js b/src/js/ui/sections/myPageSection.js
new file mode 100644
index 0000000..0c79f06
--- /dev/null
+++ b/src/js/ui/sections/myPageSection.js
@@ -0,0 +1,24 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var myPageSection = {
+ element: "div",
+ id: "mypage-section",
+ innerHTML: `
+ <h2>My page</h2>
+ <button id="stellar-freigher-connect-address-button" onclick="connect()">Connect with Freighter wallet</button>
+ <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>
+ `
+};
+
+makeElement(myPageSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js
new file mode 100644
index 0000000..3b89cef
--- /dev/null
+++ b/src/js/ui/sections/newsSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var newsSection = {
+ element: 'div',
+ id: 'news-section',
+ innerHTML: [
+ { element: "div", className: "where-am-i", innerHTML: `
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Modules</h2>
+ <span>&gt;</span>
+ <h2>News</h2>
+ ` },
+ { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"}
+ ]
+};
+
+makeElement(newsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/notFoundSection.js b/src/js/ui/sections/notFoundSection.js
new file mode 100644
index 0000000..0731101
--- /dev/null
+++ b/src/js/ui/sections/notFoundSection.js
@@ -0,0 +1,23 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var notFoundSection = {
+ element: 'div',
+ id: 'not-found-section',
+ hidden: true,
+ innerHTML: [
+ {
+ element: 'h2',
+ innerText: 'Not found'
+ },
+ {
+ element: 'p',
+ innerText: 'Soft 404'
+ },
+ {
+ element: 'p',
+ innerText: 'Please select an entry from the menu'
+ }
+ ]
+};
+
+makeElement(notFoundSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/radioSection.js b/src/js/ui/sections/radioSection.js
new file mode 100644
index 0000000..5aaacc3
--- /dev/null
+++ b/src/js/ui/sections/radioSection.js
@@ -0,0 +1,23 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var radioSection = {
+ element: 'radio-section',
+ hidden: true,
+ style: 'height: 100%;',
+ innerHTML: [
+ {
+ element: 'button',
+ style:"position: fixed;",
+ onclick:"refreshRadio()",
+ innerText:'Refresh'
+ },
+ {
+ element: 'iframe',
+ id:"radio-iframe",
+ src:"https://radio.arching-kaos.com",
+ style:"width: 100%; height: 100%;"
+ }
+ ]
+};
+
+makeElement(radioSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js
new file mode 100644
index 0000000..febd094
--- /dev/null
+++ b/src/js/ui/sections/settingsSection.js
@@ -0,0 +1,44 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+import { settings } from "../../arching-kaos-web-ui-settings.js";
+
+var settingsSection = {
+ element: 'div',
+ id: "settings-section",
+ innerHTML: `
+ <div class="where-am-i">
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>🔧 Settings</h2>
+ </div>
+ `
+}
+
+makeElement(settingsSection, document.querySelector('.main'));
+
+var settingsPage = document.querySelector('#settings-section');
+
+// var scripts = [
+// {
+// element:"script",
+// type: "module",
+// src:"./js/arching-kaos-web-ui-settings.js"
+// }
+// ];
+//
+// for ( var i = 0; i < scripts.length; i++ )
+// {
+// makeElement(scripts[i], document.querySelector('body'));
+// }
+
+var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
+
+if ( settings.stellar.scan )
+{
+ scanStellarNetworkForPeers();
+}
+
+if ( settings.ak.scan )
+{
+ ringlocalbell();
+ setInterval(ringlocalbell, 10*60*1000);
+}
diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js
new file mode 100644
index 0000000..1f2ede2
--- /dev/null
+++ b/src/js/ui/sections/statsSection.js
@@ -0,0 +1,29 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var statsSection = {
+ element: 'div',
+ id: "stats-section",
+ innerHTML: [
+ { element: "div", className: "where-am-i", innerHTML: `
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Explore</h2>
+ <span>&gt;</span>
+ <h2>Stats</h2>
+ `},
+ { element: "div", className: "available-networks", innerHTML: `
+ <h3>Networks</h3>
+ <details class="stellar-network">
+ <summary>Stellar</summary>
+ </details>
+ <details class="aknet-network">
+ <summary>Arching Kaos Experimental Instance</summary>
+ </details>
+ <details class="aknet-sblocks">
+ <summary>Arching Kaos SBlocks</summary>
+ </details>
+ `}
+ ]
+};
+
+makeElement(statsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarBalancesSection.js b/src/js/ui/sections/stellarBalancesSection.js
new file mode 100644
index 0000000..906a064
--- /dev/null
+++ b/src/js/ui/sections/stellarBalancesSection.js
@@ -0,0 +1,19 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var stellarBalancesSection = {
+ element: "div",
+ id: "stellar-balances",
+ innerHTML: `
+ <div class="where-am-i">
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Stellar</h2>
+ <span>&gt;</span>
+ <h2>Balances</h2>
+ </div>
+ <em id="stellar-balances-not-found">No data found (yet?)!</em>
+ <table id="stellar-balances-table"></table>
+ `
+};
+
+makeElement(stellarBalancesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js
new file mode 100644
index 0000000..f0690b3
--- /dev/null
+++ b/src/js/ui/sections/stellarDataConfigSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var stellarDataConfigSection = {
+ element: "div",
+ id: "stellar-data-config",
+ innerHTML: `
+ <div class="where-am-i">
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Stellar</h2>
+ <span>&gt;</span>
+ <h2>Data</h2>
+ </div>
+ <em id="stellar-data-config-not-found">No data found (yet?)!</em>
+ `
+};
+
+makeElement(stellarDataConfigSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarSection.js b/src/js/ui/sections/stellarSection.js
new file mode 100644
index 0000000..0a5341d
--- /dev/null
+++ b/src/js/ui/sections/stellarSection.js
@@ -0,0 +1,20 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var stellarSection = {
+ id: "stellar-section",
+ innerHTML: [
+ {
+ element: "h2",
+ innerText: "Stellar dashboard"
+ },
+ {
+ element: "button",
+ className: "sub-input",
+ id:"stellar-freigher-connect-address-button",
+ onclick:"connect()",
+ innerText:"Connect with Stellar address"
+ }
+ ]
+};
+
+makeElement(stellarSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
new file mode 100644
index 0000000..7b4d6be
--- /dev/null
+++ b/src/js/ui/sections/welcomeSection.js
@@ -0,0 +1,120 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var welcomeSection = {
+ element: "div",
+ id: "welcome-section",
+ innerHTML: [
+ {
+ element : "div",
+ className:"where-am-i",
+ innerHTML: `
+
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Home</h2>
+ `
+ },
+ {
+ element: "p",
+ innerText: "Welcome to Arching Kaos project."
+ },
+ {
+ element: "div",
+ id: "home-grid",
+ innerHTML: `
+ <button class="menu-clickable" id="#/mixtapes-section" onclick="menusel(this)" style="background-image: url(img/mixtapes-logo.png); background-repeat: round;"></button>
+ <button class="menu-clickable" id="#/news-section" onclick="menusel(this)" style="background-image: url(img/news-logo.png); background-repeat: round;"></button>
+ <button class="menu-clickable" id="#/chat-section" onclick="menusel(this)" style="background-image: url(img/chat-logo.png); background-repeat: round;"></button>
+ <button class="menu-clickable" id="#/radio-section" onclick="menusel(this)" style="background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"></button>
+ <button class="menu-clickable" id="#/stats-section" onclick="menusel(this)">Stats</button>
+ `
+ },
+ {
+ element : "h3",
+ innerText: "Render explicit zblock"
+ },
+ {
+ element: "div",
+ style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
+ innerHTML: `
+ <input id="search-field" type="text" name="search" placeholder="Enter a zblock hash"/>
+ <button onclick="seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])">Render</button>
+ `
+ },
+ {
+ element: "div",
+ className: "results-area",
+ innerHTML: [
+ {
+ elements: "h3",
+ innerText: "Results"
+ }
+ ]
+ },
+ {
+ element: "h3",
+ innerText: "Manual scan"
+ },
+ {
+ element: "div",
+ id: "manual-scan-section",
+ innerHTML: [
+ {
+ element: "div",
+ className: "manual-scan",
+ innerHTML: [
+ { element:"button", onclick:"scanStellarNetworkForPeers()", innerText:"Check Stellar Network"},
+ { element:"button", onclick:"checkLocalNodeInfo()", innerText:"Check local Node"},
+ { element:"button", onclick:"checkLocalPeers()", innerText:"Check local Peers"},
+ { element:"button", onclick:"checkLocalSchain()", innerText:"Check Local Schain"}
+ ]
+ }
+ ]
+ },
+ {
+ element: "div",
+ className: "preview"
+ },
+ {
+ element: "div",
+ className: "dialog",
+ innerHTML: [
+ {
+ element: "h3",
+ innerText: "Progress"
+ },
+ {
+ element: "progress",
+ id: "total-progress",
+ value: 0
+ },
+ {
+ element: "progress",
+ id: "http-progress",
+ value: 0
+ },
+ {
+ element: "pre",
+ id: "current-log-message"
+ }
+ ]
+ },
+
+ {
+ element: "details",
+ id: "logs-area",
+ innerHTML: [
+ {
+ element: "summary",
+ innerText: "Logs (click to expand)"
+ },
+ {
+ element: "div",
+ id: "logs-area-element"
+ }
+ ]
+ }
+ ]
+};
+
+makeElement(welcomeSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js
new file mode 100644
index 0000000..ba4bfde
--- /dev/null
+++ b/src/js/ui/sections/zchainDataSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var zchainDataSection = {
+ element: "div",
+ id:"zchain-data-section",
+ innerHTML: `
+ <div class="where-am-i">
+ <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+ <span>&gt;</span>
+ <h2>Explore</h2>
+ <span>&gt;</span>
+ <h2>zchains</h2>
+ </div>
+ <em id="zchain-data-sec-not-found">No data found (yet?)!</em>
+ `
+};
+
+makeElement(zchainDataSection, document.querySelector('.main'));