diff options
| -rw-r--r-- | src/js/ui/sections/aboutSection.js | 45 | ||||
| -rw-r--r-- | src/js/ui/sections/commentsSection.js | 1 | ||||
| -rw-r--r-- | src/js/ui/sections/filesSection.js | 25 | ||||
| -rw-r--r-- | src/js/ui/sections/mixtapesSection.js | 24 | ||||
| -rw-r--r-- | src/js/ui/sections/newsSection.js | 20 | ||||
| -rw-r--r-- | src/js/ui/sections/statsSection.js | 44 | ||||
| -rw-r--r-- | src/js/ui/sections/stellarDataConfigSection.js | 26 | ||||
| -rw-r--r-- | src/js/ui/sections/welcomeSection.js | 78 | ||||
| -rw-r--r-- | src/js/ui/sections/zchainDataSection.js | 26 |
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>></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>></span> - <h2>Modules</h2> - <span>></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>></span> - <h2>Modules</h2> - <span>></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>></span> - <h2>Modules</h2> - <span>></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>></span> - <h2>Explore</h2> - <span>></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>></span> - <h2>Stellar</h2> - <span>></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>></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>></span> - <h2>Explore</h2> - <span>></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 |