aboutsummaryrefslogtreecommitdiff
path: root/src/js/ui
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/ui')
-rw-r--r--src/js/ui/footer.js81
-rw-r--r--src/js/ui/header.js29
-rw-r--r--src/js/ui/main.js121
-rw-r--r--src/js/ui/mainLayout.js33
-rw-r--r--src/js/ui/menu.js260
-rw-r--r--src/js/ui/sections/radioSection.js3
-rw-r--r--src/js/ui/sections/settingsSection.js53
-rw-r--r--src/js/ui/sections/welcomeSection.js70
8 files changed, 378 insertions, 272 deletions
diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js
index a611b59..fbde422 100644
--- a/src/js/ui/footer.js
+++ b/src/js/ui/footer.js
@@ -1,43 +1,46 @@
import { makeElement } from "../arching-kaos-generator.js";
-var footer = {
- element:"div",
- id:"footer",
- innerHTML:[
- {
- element:"div",
- innerHTML:[
- {element:"p", innerText:"Arching Kaos 2019-2024"},
- {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"},
- {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"},
- {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"},
- ]
- },
- {
- element:"span",
- innerText:"::"
- },
+export function footerSpawn()
+{
+ var footer = {
+ element:"div",
+ id:"footer",
+ innerHTML:[
+ {
+ element:"div",
+ innerHTML:[
+ {element:"p", innerText:"Arching Kaos 2019-2024"},
+ {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"},
+ {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"},
+ {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"},
+ ]
+ },
+ {
+ element:"span",
+ innerText:"::"
+ },
- {
- element:"div",
- innerHTML:[
- {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"},
- ]
- },
- {
- element:"span",
- innerText:"::"
- },
- {
- element:"div",
- innerHTML:[
- {
- element:"p",
- innerHTML:"Fra <a target=\"_blank\" href=\"https://www.kaotisk-hund.com\">Kaotisk Hund</a> med kjærlighet. <a href=\"bitcoin:BC1QYL9K5KDLSLJAED9PZCJJX0CPGZVY9LWY427SD4\">Donate</a>"
- }
- ]
- }
- ]
-};
+ {
+ element:"div",
+ innerHTML:[
+ {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"},
+ ]
+ },
+ {
+ element:"span",
+ innerText:"::"
+ },
+ {
+ element:"div",
+ innerHTML:[
+ {
+ element:"p",
+ innerHTML:"Fra <a target=\"_blank\" href=\"https://www.kaotisk-hund.com\">Kaotisk Hund</a> med kjærlighet. <a href=\"bitcoin:BC1QYL9K5KDLSLJAED9PZCJJX0CPGZVY9LWY427SD4\">Donate</a>"
+ }
+ ]
+ }
+ ]
+ };
-makeElement(footer, document.querySelector('.footer'));
+ makeElement(footer, document.querySelector('.footer'));
+}
diff --git a/src/js/ui/header.js b/src/js/ui/header.js
index 18d8c2e..27c16ac 100644
--- a/src/js/ui/header.js
+++ b/src/js/ui/header.js
@@ -1,16 +1,19 @@
import { makeElement } from "../arching-kaos-generator.js";
-var header = {
- element: "div",
- id: 'header',
- className: 'header',
- innerHTML: [
- { element: "a", id:"logo-button", innerHTML:[
- {element: "img", src:"./img/header-logo.png" }
- ]},
- { element: "h1", style:"text-align: center;", innerText: "Arching Kaos"}
- ],
- onclick: 'menusel({id:"#/welcome-section"});'
-}
+export function headerSpawn()
+{
+ var header = {
+ element: "div",
+ id: 'header',
+ className: 'header',
+ innerHTML: [
+ { element: "a", id:"logo-button", innerHTML:[
+ {element: "img", src:"./img/header-logo.png" }
+ ]},
+ { element: "h1", style:"text-align: center;", innerText: "Arching Kaos"}
+ ],
+ onclick: 'menusel({id:"#/welcome-section"});'
+ }
-makeElement(header, document.querySelector('#logo-title-placeholder'));
+ makeElement(header, document.querySelector('#logo-title-placeholder'));
+}
diff --git a/src/js/ui/main.js b/src/js/ui/main.js
index f57be59..623166f 100644
--- a/src/js/ui/main.js
+++ b/src/js/ui/main.js
@@ -1,34 +1,97 @@
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"
- },
+export function mainSpawn()
+{
+ var scripts = [
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/aboutSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/akNodeInfoSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/chatSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/commentsSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/filesSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/mixtapesSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/myPageSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/newsSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/notFoundSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/radioSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/settingsSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/statsSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/stellarBalancesSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/stellarDataConfigSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/stellarSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/welcomeSection.js"
+ },
+ {
+ element:"script",
+ type:"module",
+ src:"./js/ui/sections/zchainDataSection.js"
+ }
+ ];
+
+ for ( var i = 0; i < scripts.length; i++ )
{
- element:"script",
- type:"module",
- src:"./js/ui/sections/radioSection.js"
+ makeElement(scripts[i], document.querySelector('body'));
}
-];
-
-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 6201e2b..5c0e0bf 100644
--- a/src/js/ui/mainLayout.js
+++ b/src/js/ui/mainLayout.js
@@ -1,28 +1,13 @@
import { makeElement } from "../arching-kaos-generator.js";
+import { headerSpawn } from "./header.js";
+import { menuSpawn } from "./menu.js";
+import { mainSpawn } from "./main.js";
+import { footerSpawn } from "./footer.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++ )
+export function mainLayoutSpawn()
{
- makeElement(scripts[i], document.querySelector('body'));
+ headerSpawn();
+ menuSpawn();
+ mainSpawn();
+ footerSpawn();
}
diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js
index 5344966..1c4a8e3 100644
--- a/src/js/ui/menu.js
+++ b/src/js/ui/menu.js
@@ -6,77 +6,118 @@
*
*/
import { makeElement } from "../arching-kaos-generator.js";
+import { locationHashSetter } from "../arching-kaos-spa-router.js";
+import { mainContainer } from "../app.js";
-var menuButton = {
- element: "button",
- id:"mobile-menu",
- innerText:"Show menu"
-};
+export function doubleFloorMenu()
+{
+ return document.querySelector('#double-floor');
+}
+export function upperFloor()
+{
+ return document.querySelector('.upper-floor');
+}
-makeElement(menuButton, document.querySelector('#menu-placeholder'));
-
-document.querySelector('#mobile-menu').addEventListener("click", toggleMenu);
-
-var menuLayout = {
- element: 'nav', id:"double-floor", innerHTML:[
- { element: "div", id:"menu", className:"upper-floor", innerHTML: [
- { element: "button", onclick:'menusel({id:"#/welcome-section"})', innerText:"Home"},
- { element: "button", onclick:'modulesSubToggle()', innerText:"Modules"},
- { element: "button", onclick:'exploreSubToggle()', innerText:"Explore"},
- { element: "button", onclick:'menusel({id:"#/chat-section"})', innerText:"Chat"},
- { element: "button", onclick:'menusel({id:"#/radio-section"})', innerText:"Radio"},
- { element: "button", onclick:'menusel({id:"#/settings-section"})', innerText:"Settings"},
- { element: "button", onclick:'stellarSubToggle()', innerText:"Stellar"},
- { element: "button", onclick:'menusel({id:"#/about-section"})', innerText:"About"}
- ]
- },
- { element: "div", id:"menu", className:"lower-floor"}
- ]
-};
+export function lowerFloor()
+{
+ return document.querySelector('.lower-floor');
+}
-makeElement(menuLayout, document.querySelector('#menu-placeholder'));
-
-var modulesSubmenuTemplate = {
- element: 'div',
- className:"dropdown",
- id:"modules-submenu",
- innerHTML: [
- { element:'button', onclick:"modulesSubToggle()", innerText:".."},
- { element:'button', onclick:'menusel({id:"#/mixtapes-section"})', innerText:"Mixtapes"},
- { element:'button', onclick:'menusel({id:"#/news-section"})', innerText:"News"},
- { element:'button', onclick:'menusel({id:"#/comments-section"})', innerText:"Comments"},
- { element:'button', onclick:'menusel({id:"#/files-section"})', innerText:"Files"}
- ]
-};
+export function modulesSubmenu()
+{
+ return document.querySelector('#modules-submenu');
+}
-makeElement(modulesSubmenuTemplate, document.querySelector('.lower-floor'));
+export function exploreSubmenu()
+{
+ return document.querySelector('#explore-submenu');
+}
-var exploreSubmenuTemplate = {
- element: 'div',
- className:"dropdown",
- id:"explore-submenu",
- innerHTML: [
- { element:'button', onclick:"exploreSubToggle()", innerText:".."},
- { element:'button', onclick:'menusel({id:"#/zchain-data-section"})', innerText:"zchain"},
- { element:'button', onclick:'menusel({id:"#/stats-section"})', innerText:"Stats"}
- ]
-};
-makeElement(exploreSubmenuTemplate, document.querySelector('.lower-floor'));
-
-var stellarSubmenuTemplate = {
- element: 'div',
- className:"dropdown",
- id:"stellar-submenu",
- innerHTML: [
- { element:'button', onclick:"stellarSubToggle()", innerText:".."},
- { element:'button', onclick:'menusel({id:"#/mypage-section"})', innerText:"My page"},
- { element:'button', onclick:'menusel({id:"#/stellar-balances"})', innerText:"Balances"},
- { element:'button', onclick:'menusel({id:"#/stellar-data-config"})', innerText:"Data"},
- { element:'button', onclick:'menusel({id:"#/arching-kaos-node-info"})', innerText:"Node Info"}
- ]
-};
+export function stellarSubmenu()
+{
+ return document.querySelector('#stellar-submenu');
+}
+
+
+export function menuSpawn()
+{
+ var menuButton = {
+ element: "button",
+ id:"mobile-menu",
+ innerText:"Show menu"
+ };
+
+ makeElement(menuButton, document.querySelector('#menu-placeholder'));
+
+ document.querySelector('#mobile-menu').addEventListener("click", toggleMenu);
+
+ var menuLayout = {
+ element: 'nav', id:"double-floor", innerHTML:[
+ { element: "div", id:"menu", className:"upper-floor", innerHTML: [
+ { element: "button", onclick:'menusel({id:"#/welcome-section"})', innerText:"Home"},
+ { element: "button", onclick:'modulesSubToggle()', innerText:"Modules"},
+ { element: "button", onclick:'exploreSubToggle()', innerText:"Explore"},
+ { element: "button", onclick:'menusel({id:"#/chat-section"})', innerText:"Chat"},
+ { element: "button", onclick:'menusel({id:"#/radio-section"})', innerText:"Radio"},
+ { element: "button", onclick:'menusel({id:"#/settings-section"})', innerText:"Settings"},
+ { element: "button", onclick:'stellarSubToggle()', innerText:"Stellar"},
+ { element: "button", onclick:'menusel({id:"#/about-section"})', innerText:"About"}
+ ]
+ },
+ { element: "div", id:"menu", className:"lower-floor"}
+ ]
+ };
+
+ makeElement(menuLayout, document.querySelector('#menu-placeholder'));
+
+ var modulesSubmenuTemplate = {
+ element: 'div',
+ className:"dropdown",
+ id:"modules-submenu",
+ innerHTML: [
+ { element:'button', onclick:"modulesSubToggle()", innerText:".."},
+ { element:'button', onclick:'menusel({id:"#/mixtapes-section"})', innerText:"Mixtapes"},
+ { element:'button', onclick:'menusel({id:"#/news-section"})', innerText:"News"},
+ { element:'button', onclick:'menusel({id:"#/comments-section"})', innerText:"Comments"},
+ { element:'button', onclick:'menusel({id:"#/files-section"})', innerText:"Files"}
+ ]
+ };
+
+ makeElement(modulesSubmenuTemplate, lowerFloor());
+
+ var exploreSubmenuTemplate = {
+ element: 'div',
+ className:"dropdown",
+ id:"explore-submenu",
+ innerHTML: [
+ { element:'button', onclick:"exploreSubToggle()", innerText:".."},
+ { element:'button', onclick:'menusel({id:"#/zchain-data-section"})', innerText:"zchain"},
+ { element:'button', onclick:'menusel({id:"#/stats-section"})', innerText:"Stats"}
+ ]
+ };
+ makeElement(exploreSubmenuTemplate, lowerFloor());
+
+ var stellarSubmenuTemplate = {
+ element: 'div',
+ className:"dropdown",
+ id:"stellar-submenu",
+ innerHTML: [
+ { element:'button', onclick:"stellarSubToggle()", innerText:".."},
+ { element:'button', onclick:'menusel({id:"#/mypage-section"})', innerText:"My page"},
+ { element:'button', onclick:'menusel({id:"#/stellar-balances"})', innerText:"Balances"},
+ { element:'button', onclick:'menusel({id:"#/stellar-data-config"})', innerText:"Data"},
+ { element:'button', onclick:'menusel({id:"#/arching-kaos-node-info"})', innerText:"Node Info"}
+ ]
+ };
+
+ makeElement(stellarSubmenuTemplate, lowerFloor());
-makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor'));
+ upperFloor().style.display = 'flex';
+ lowerFloor().style.display = 'none';
+ modulesSubmenu().style.display = 'none';
+ exploreSubmenu().style.display = 'none';
+ stellarSubmenu().style.display = 'none';
+}
/*
* Menu bar management
@@ -84,70 +125,61 @@ makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor'));
* We change the visible floor according to menu selection.
*
*/
-var upperFloor = document.querySelector('.upper-floor');
-var lowerFloor = document.querySelector('.lower-floor');
-var doubleFloorMenu = document.querySelector('#double-floor');
-
-upperFloor.style.display = 'flex';
-lowerFloor.style.display = 'none';
-var modulesSubmenu = document.querySelector('#modules-submenu');
-modulesSubmenu.style.display = 'none';
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';
+ 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';
}
-var exploreSubmenu = document.querySelector('#explore-submenu');
-exploreSubmenu.style.display = 'none';
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';
+ 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';
}
-var stellarSubmenu = document.querySelector('#stellar-submenu');
-stellarSubmenu.style.display = 'none';
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';
+ 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'
-];
+export function menuids()
+{
+ return [
+ '#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
export function menuinit(){
- for ( var i = 0; i < menuids.length; i++ ){
- var sec = document.querySelector(menuids[i]);
+ 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`);
+ console.log(`menuinit: ${menuids()[i]} was not found`);
}
}
}
@@ -160,16 +192,16 @@ export function menusel(m){
menuinit();
// document.querySelector(m.id.replace('/','')).hidden=false;
locationHashSetter(m.id);
-
- mainContainer.style.display = 'block';
- if ( isMobile ) {
- doubleFloorMenu.style.display = 'none';
+
+ mainContainer().style.display = 'block';
+ if ( window.isMobile ) {
+ doubleFloorMenu().style.display = 'none';
}
}
export function toggleMenu(){
- mainContainer.style.display = 'none';
- doubleFloorMenu.style.display = 'flex';
+ mainContainer().style.display = 'none';
+ doubleFloorMenu().style.display = 'flex';
}
// @license-end
diff --git a/src/js/ui/sections/radioSection.js b/src/js/ui/sections/radioSection.js
index 5aaacc3..9c98ac0 100644
--- a/src/js/ui/sections/radioSection.js
+++ b/src/js/ui/sections/radioSection.js
@@ -1,7 +1,8 @@
import { makeElement } from "../../arching-kaos-generator.js";
var radioSection = {
- element: 'radio-section',
+ element: "div",
+ id: 'radio-section',
hidden: true,
style: 'height: 100%;',
innerHTML: [
diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js
index febd094..6f26393 100644
--- a/src/js/ui/sections/settingsSection.js
+++ b/src/js/ui/sections/settingsSection.js
@@ -1,21 +1,30 @@
import { makeElement } from "../../arching-kaos-generator.js";
-import { settings } from "../../arching-kaos-web-ui-settings.js";
+import { getSettings, settings } from "../../arching-kaos-web-ui-settings.js";
+
+// var settings = getSettings();
+console.log(settings);
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>
- `
-}
+ innerHTML: [
+ {element: "div",
+ className:"where-am-i",
+ innerHTML:[
+ {element: "img", src:"./img/logo.png", onclick: "menusel({id:'#/welcome-section'})"},
+ {element: "span", innerText:">"},
+ {element: "h2", innerText:"🔧 Settings"}
+ ]
+ }
+ ]
+};
makeElement(settingsSection, document.querySelector('.main'));
-var settingsPage = document.querySelector('#settings-section');
+export function settingsPage()
+{
+ return document.querySelector('#settings-section');
+}
// var scripts = [
// {
@@ -24,21 +33,21 @@ var settingsPage = document.querySelector('#settings-section');
// 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();
-}
+// var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
-if ( settings.ak.scan )
-{
- ringlocalbell();
- setInterval(ringlocalbell, 10*60*1000);
-}
+// if ( getSettings().stellar.scan )
+// {
+// scanStellarNetworkForPeers();
+// }
+//
+// if ( getSettings().ak.scan )
+// {
+// ringlocalbell();
+// setInterval(ringlocalbell, 10*60*1000);
+// }
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
index 7b4d6be..5636233 100644
--- a/src/js/ui/sections/welcomeSection.js
+++ b/src/js/ui/sections/welcomeSection.js
@@ -1,46 +1,56 @@
import { makeElement } from "../../arching-kaos-generator.js";
-var welcomeSection = {
- element: "div",
- id: "welcome-section",
- innerHTML: [
- {
- element : "div",
- className:"where-am-i",
- innerHTML: `
+var whereAmI = {
+ 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: `
+};
+
+var greeting = {
+ element: "p",
+ innerText: "Welcome to Arching Kaos project."
+};
+
+var homeGrid = {
+ 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>
- `
- },
+};
+
+var renderTitle = {
+ element : "h3",
+ innerText: "Render explicit zblock"
+};
+
+var renderForm = {
+ 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>
+ `
+};
+
+var welcomeSection = {
+ element: "div",
+ id: "welcome-section",
+ innerHTML: [
+ whereAmI,
+ greeting,
+ homeGrid,
+ renderTitle,
+ renderForm,
{
element: "div",
className: "results-area",
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-26 04:09:08 +0000