aboutsummaryrefslogtreecommitdiff
path: root/src/js/ui
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/ui')
-rw-r--r--src/js/ui/sections/aboutSection.js45
-rw-r--r--src/js/ui/sections/commentsSection.js1
-rw-r--r--src/js/ui/sections/filesSection.js25
-rw-r--r--src/js/ui/sections/mixtapesSection.js24
-rw-r--r--src/js/ui/sections/newsSection.js20
-rw-r--r--src/js/ui/sections/statsSection.js44
-rw-r--r--src/js/ui/sections/stellarDataConfigSection.js26
-rw-r--r--src/js/ui/sections/welcomeSection.js78
-rw-r--r--src/js/ui/sections/zchainDataSection.js26
9 files changed, 177 insertions, 112 deletions
diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js
index 3ab4d1e..902783d 100644
--- a/src/js/ui/sections/aboutSection.js
+++ b/src/js/ui/sections/aboutSection.js
@@ -9,30 +9,35 @@ import { makeElement } from "../../arching-kaos-generator.js";
export function aboutSection()
{
+ var whereAmI = {
+ element: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"About"}
+ ]
+ };
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>
- `
+ innerHTML: [
+ whereAmI,
+ { element: "p", innerText:"Arching Kaos is a project about radio, music, communications and decentralization."},
+ { element: "p", innerText:'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).'},
+ { element: "p", innerText:'You can see the zchains appearing in "zchain" and logs of the process on "Logs"'},
+ { element: "p", innerText:"Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible."},
+ { element: "p", innerText:"Furthermore, if you are using Freighter extension you can additionally see:"},
+ { element: "ol", innerHTML: [
+ { element:"li", innerText:"Your balances on your wallet"},
+ { element:"li", innerText:"Your configuration IPNS address (if any)"},
+ { element:"li", innerText:"Your Arching Kaos configuration (if any)"},
+ { element:"li", innerText:"Your zchain (...)"},
+ { element:"li", innerText:"Your posted newsfeed (...)"}
+ ]},
+ { element:"p", innerText:"Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin."}
+ ]
};
makeElement(aboutSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js
index 00ec8fe..ba190ac 100644
--- a/src/js/ui/sections/commentsSection.js
+++ b/src/js/ui/sections/commentsSection.js
@@ -26,7 +26,6 @@ export function commentsSection()
{ element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"}
]
};
-
makeElement(commentsSection, document.querySelector('.main'));
}
// @license-end
diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js
index 7a65187..994c37e 100644
--- a/src/js/ui/sections/filesSection.js
+++ b/src/js/ui/sections/filesSection.js
@@ -9,19 +9,24 @@ import { makeElement } from "../../arching-kaos-generator.js";
export function filesSection()
{
+ var whereAmI = {
+ element: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Modules"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Files"}
+ ]
+ };
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>
- `
+ innerHTML: [
+ whereAmI,
+ { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"}
+ ]
};
makeElement(filesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js
index 6710c11..a450914 100644
--- a/src/js/ui/sections/mixtapesSection.js
+++ b/src/js/ui/sections/mixtapesSection.js
@@ -9,21 +9,23 @@ import { makeElement } from "../../arching-kaos-generator.js";
export function mixtapesSection()
{
+ var whereAmI = {
+ element: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Mixtapes"}
+ ]
+ };
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>
- `
+ innerHTML: [
+ whereAmI,
+ { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"}
+ ]
};
-
makeElement(mixtapesSection, document.querySelector('.main'));
}
// @license-end
diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js
index 51cb0de..6875dd6 100644
--- a/src/js/ui/sections/newsSection.js
+++ b/src/js/ui/sections/newsSection.js
@@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js";
export function newsSection()
{
+ var whereAmI = {
+ element: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Modules"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"News"}
+ ]
+ };
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>
- ` },
+ whereAmI,
{ element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"}
]
};
-
makeElement(newsSection, document.querySelector('.main'));
}
// @license-end
diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js
index 8d99448..115cd68 100644
--- a/src/js/ui/sections/statsSection.js
+++ b/src/js/ui/sections/statsSection.js
@@ -9,32 +9,36 @@ import { makeElement } from "../../arching-kaos-generator.js";
export function statsSection()
{
+ var whereAmI = {
+ element: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Explore"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Stats"}
+ ]
+ };
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>
- `}
+ whereAmI,
+ { element: "div", className: "available-networks", innerHTML: [
+ { element: "h3", innerText: "Networks" },
+ { element: "details", className: "stellar-network", innerHTML:[
+ { element:"summary", innerText:"Stellar"}
+ ]},
+ { element: "details", className: "aknet-network", innerHTML:[
+ { element:"summary", innerText:"Arching Kaos Experimental Instance"}
+ ]},
+ { element: "details", className: "aknet-sblocks", innerHTML:[
+ { element:"summary", innerText:"Arching Kaos SBlocks"}
+ ]}
+ ]}
]
};
-
makeElement(statsSection, document.querySelector('.main'));
}
// @license-end
diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js
index 8deff87..268051f 100644
--- a/src/js/ui/sections/stellarDataConfigSection.js
+++ b/src/js/ui/sections/stellarDataConfigSection.js
@@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js";
export function stellarDataConfigSection()
{
+ var whereAmI = {
+ element: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Stellar"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Data"}
+ ]
+ };
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>
- `
+ innerHTML: [
+ whereAmI,
+ { element: "em", id:"stellar-data-config-not-found", innerText:"No data found (yet?)!" }
+ ]
};
-
makeElement(stellarDataConfigSection, document.querySelector('.main'));
}
// @license-end
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
index c382050..0a97616 100644
--- a/src/js/ui/sections/welcomeSection.js
+++ b/src/js/ui/sections/welcomeSection.js
@@ -8,14 +8,13 @@
import { makeElement } from "../../arching-kaos-generator.js";
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: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Home"}
+ ]
};
var greeting = {
@@ -26,13 +25,43 @@ var greeting = {
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>
- `
+ innerHTML: [
+ {
+ element:"button",
+ className:"menu-clickable",
+ id:"#/mixtapes-section",
+ onclick:"menusel(this)",
+ style:"background-image: url(img/mixtapes-logo.png); background-repeat: round;"
+ },
+ {
+ element:"button",
+ className:"menu-clickable",
+ id:"#/news-section",
+ onclick:"menusel(this)",
+ style:"background-image: url(img/news-logo.png); background-repeat: round;"
+ },
+ {
+ element:"button",
+ className:"menu-clickable",
+ id:"#/chat-section",
+ onclick:"menusel(this)",
+ style:"background-image: url(img/chat-logo.png); background-repeat: round;"
+ },
+ {
+ element:"button",
+ className:"menu-clickable",
+ id:"#/radio-section",
+ onclick:"menusel(this)",
+ style:"background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"
+ },
+ {
+ element:"button",
+ className:"menu-clickable",
+ id:"#/stats-section",
+ onclick:"menusel(this)",
+ innerText:"Stats"
+ }
+ ]
};
var renderTitle = {
@@ -43,10 +72,20 @@ var renderTitle = {
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>
- `
+ innerHTML: [
+ {
+ element: "input",
+ id:"search-field",
+ type:"text",
+ name:"search",
+ placeholder:"Enter a zblock hash"
+ },
+ {
+ element:"button",
+ onclick:"seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])",
+ innerText:"Render"
+ }
+ ]
};
export function welcomeSection()
@@ -118,7 +157,6 @@ export function welcomeSection()
}
]
},
-
{
element: "details",
id: "logs-area",
diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js
index 95f8518..7bedffa 100644
--- a/src/js/ui/sections/zchainDataSection.js
+++ b/src/js/ui/sections/zchainDataSection.js
@@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js";
export function zchainDataSection()
{
+ var whereAmI = {
+ element: "div",
+ className: "where-am-i",
+ innerHTML: [
+ { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"Explore"},
+ { element: "span", innerText:">"},
+ { element: "h2", innerText:"zchains"}
+ ]
+ };
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>
- `
+ innerHTML: [
+ whereAmI,
+ { element: "em", id:"zchain-data-sec-not-found", innerText:"No data found (yet?)!" }
+ ]
};
-
makeElement(zchainDataSection, document.querySelector('.main'));
}
// @license-end
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-26 20:14:32 +0000