diff options
Diffstat (limited to 'src/js/ui')
23 files changed, 1461 insertions, 0 deletions
diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js new file mode 100644 index 0000000..6bd56b1 --- /dev/null +++ b/src/js/ui/footer.js @@ -0,0 +1,54 @@ +// Arching Kaos Footer +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../arching-kaos-generator.js"; + +export function footerSpawn() +{ + var footer = { + element:"div", + id:"footer", + innerHTML:[ + { + element:"div", + innerHTML:[ + {element:"p", innerText:"Arching Kaos 2019-2025"}, + {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>" + } + ] + } + ] + }; + + makeElement(footer, document.querySelector('.footer')); +} +// @license-end diff --git a/src/js/ui/header.js b/src/js/ui/header.js new file mode 100644 index 0000000..03b2332 --- /dev/null +++ b/src/js/ui/header.js @@ -0,0 +1,27 @@ +// Arching Kaos Header +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../arching-kaos-generator.js"; + +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')); +} +// @license-end diff --git a/src/js/ui/main.js b/src/js/ui/main.js new file mode 100644 index 0000000..f38bb16 --- /dev/null +++ b/src/js/ui/main.js @@ -0,0 +1,48 @@ +// Arching Kaos Main +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { aboutSection } from "./sections/aboutSection.js"; +import { akNodeInfoSection } from "./sections/akNodeInfoSection.js"; +import { chatSection } from "./sections/chatSection.js"; +import { commentsSection } from "./sections/commentsSection.js"; +import { filesSection } from "./sections/filesSection.js"; +import { mixtapesSection } from "./sections/mixtapesSection.js"; +import { newsSection } from "./sections/newsSection.js"; +import { myPageSection } from "./sections/myPageSection.js"; +import { notFoundSection } from "./sections/notFoundSection.js"; +import { radioSection } from "./sections/radioSection.js"; +import { settingsSection } from "./sections/settingsSection.js"; +import { statsSection } from "./sections/statsSection.js"; +import { stellarBalancesSection } from "./sections/stellarBalancesSection.js"; +import { stellarDataConfigSection } from "./sections/stellarDataConfigSection.js"; +import { stellarSection } from "./sections/stellarSection.js"; +import { welcomeSection } from "./sections/welcomeSection.js"; +import { zchainDataSection } from "./sections/zchainDataSection.js"; +import { markdownSection } from "./sections/markdownSection.js"; + +export function mainSpawn() +{ + aboutSection(); + akNodeInfoSection(); + chatSection(); + commentsSection(); + markdownSection() + filesSection(); + mixtapesSection(); + newsSection(); + myPageSection(); + notFoundSection(); + radioSection(); + settingsSection(); + statsSection(); + stellarBalancesSection(); + stellarDataConfigSection(); + stellarSection(); + welcomeSection(); + zchainDataSection(); +} +// @license-end diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js new file mode 100644 index 0000000..715d95c --- /dev/null +++ b/src/js/ui/mainLayout.js @@ -0,0 +1,20 @@ +// Arching Kaos Main Layout +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { headerSpawn } from "./header.js"; +import { menuSpawn } from "./menu.js"; +import { mainSpawn } from "./main.js"; +import { footerSpawn } from "./footer.js"; + +export function mainLayoutSpawn() +{ + headerSpawn(); + menuSpawn(); + mainSpawn(); + footerSpawn(); +} +// @license-end diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js new file mode 100644 index 0000000..91be65f --- /dev/null +++ b/src/js/ui/menu.js @@ -0,0 +1,210 @@ +// Arching Kaos Menu +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../arching-kaos-generator.js"; +import { locationHashSetter } from "../arching-kaos-spa-router.js"; +import { mainContainer } from "../app.js"; +import { debugLog } from "../utils.js"; + +export function doubleFloorMenu() +{ + return document.querySelector('#double-floor'); +} +export function upperFloor() +{ + return document.querySelector('.upper-floor'); +} + +export function lowerFloor() +{ + return document.querySelector('.lower-floor'); +} + +export function modulesSubmenu() +{ + return document.querySelector('#modules-submenu'); +} + +export function exploreSubmenu() +{ + return document.querySelector('#explore-submenu'); +} + +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:"#/markdown-section"})', innerText:"Markdown"}, + { 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()); + + upperFloor().style.display = 'flex'; + lowerFloor().style.display = 'none'; + modulesSubmenu().style.display = 'none'; + exploreSubmenu().style.display = 'none'; + stellarSubmenu().style.display = 'none'; +} + +/* + * Menu bar management + * + * We change the visible floor according to menu selection. + * + */ + +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'; +} + +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'; +} + +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 + */ +export function menuids() +{ + return [ + '#welcome-section', + '#about-section', + '#zchain-data-section', + '#news-section', + '#comments-section', + '#stats-section', + '#markdown-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]); + if ( sec !== null ) + { + sec.hidden = true; + } + else + { + debugLog(`menuinit: ${menuids()[i]} was not found`); + } + } +} + +/* + * Function called on clicks on the menu bar + * Unhides the pane connected to the clicked menu entry + */ +export function menusel(m){ + menuinit(); + // document.querySelector(m.id.replace('/','')).hidden=false; + locationHashSetter(m.id); + + mainContainer().style.display = 'block'; + if ( window.isMobile ) { + doubleFloorMenu().style.display = 'none'; + } +} + +export function toggleMenu(){ + mainContainer().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..6a01c44 --- /dev/null +++ b/src/js/ui/sections/aboutSection.js @@ -0,0 +1,54 @@ +// Arching Kaos About Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +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 content = { + element: "div", + className: "content", + innerHTML: [ + { 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."} + ] + }; + + var aboutSection = { + element: "div", + hidden: true, + id:"about-section", + innerHTML: [ + whereAmI, + content + ] + }; + + makeElement(aboutSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/akNodeInfoSection.js b/src/js/ui/sections/akNodeInfoSection.js new file mode 100644 index 0000000..63f2a0a --- /dev/null +++ b/src/js/ui/sections/akNodeInfoSection.js @@ -0,0 +1,40 @@ +// Arching Kaos Node Info Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// +// +import { makeElement } from "../../arching-kaos-generator.js"; + +export function akNodeInfoSection() +{ + 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:"Node Info" } + ] + }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"node-info-not-found", innerText:"No data found (yet?)!"} + ] + }; + var akNodeInfoSection = { + element: "div", + id: "arching-kaos-node-info", + innerHTML: [ + whereAmI, + content + ] + }; + makeElement(akNodeInfoSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/chatSection.js b/src/js/ui/sections/chatSection.js new file mode 100644 index 0000000..b6d2ce3 --- /dev/null +++ b/src/js/ui/sections/chatSection.js @@ -0,0 +1,34 @@ +// Arching Kaos Chat Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../../arching-kaos-generator.js"; + +export function chatSection() +{ + 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')); +} +// @license-end diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js new file mode 100644 index 0000000..a0ee7ad --- /dev/null +++ b/src/js/ui/sections/commentsSection.js @@ -0,0 +1,38 @@ +// Arching Kaos Comments Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../../arching-kaos-generator.js"; + +export function commentsSection() +{ + 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:"Comments"} + ] + }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"} + ] + }; + var commentsSection = { + element: 'div', + id: 'comments-section', + innerHTML: [ + whereAmI, + content + ] + }; + makeElement(commentsSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js new file mode 100644 index 0000000..a8147dc --- /dev/null +++ b/src/js/ui/sections/filesSection.js @@ -0,0 +1,41 @@ +// Arching Kaos Files Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +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 content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"} + ] + }; + var filesSection = { + element: 'div', + id: "files-section", + innerHTML: [ + whereAmI, + content + ] + }; + + makeElement(filesSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/markdownSection.js b/src/js/ui/sections/markdownSection.js new file mode 100644 index 0000000..9a51a32 --- /dev/null +++ b/src/js/ui/sections/markdownSection.js @@ -0,0 +1,40 @@ +// Arching Kaos Markdown Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../../arching-kaos-generator.js"; + +export function markdownSection() +{ + 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:"Markdown"} + ] + }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"markdown-sec-not-found", innerText: "No data found (yet?)!"} + ] + }; + var markdownSection = { + element: 'div', + id: 'markdown-section', + innerHTML: [ + whereAmI, + content + ] + }; + makeElement(markdownSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js new file mode 100644 index 0000000..4848f78 --- /dev/null +++ b/src/js/ui/sections/mixtapesSection.js @@ -0,0 +1,38 @@ +// Arching Kaos Mixtapes Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +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 content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"} + ] + }; + var mixtapesSection = { + element: "div", + id: "mixtapes-section", + innerHTML: [ + whereAmI, + content + ] + }; + makeElement(mixtapesSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/myPageSection.js b/src/js/ui/sections/myPageSection.js new file mode 100644 index 0000000..5dbd2ab --- /dev/null +++ b/src/js/ui/sections/myPageSection.js @@ -0,0 +1,54 @@ +// Arching Kaos My Page Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../../arching-kaos-generator.js"; + +export function myPageSection() +{ + 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: "My Page" } + ] + }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "h2", innerText: "My page" }, + { element: "button", id: "stellar-freigher-connect-address-button", onclick:"connect()", innerText:"Connect with Freighter wallet" }, + { element: "div", id:"my-news", innerHTML:[ + { element: "h3", innerText:"My news"}, + { element: "em", id:"my-news-sec-not-found", innerText:"No data found (yet?)!" } + ]}, + { element: "div", id:"my-mixtapes", innerHTML:[ + { element: "h3", innerText:"My mixtapes"}, + { element: "em", id:"my-mixtapes-sec-not-found", innerText:"No data found (yet?)!" } + ]}, + { element: "div", id:"my-zchain", innerHTML:[ + { element: "h3", innerText:"My zchain"}, + { element: "em", id:"my-zchain-sec-not-found", innerText:"No data found (yet?)!" } + ]} + ] + }; + var myPageSection = { + element: "div", + id: "mypage-section", + innerHTML: [ + whereAmI, + content + ] + }; + + makeElement(myPageSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js new file mode 100644 index 0000000..983a031 --- /dev/null +++ b/src/js/ui/sections/newsSection.js @@ -0,0 +1,40 @@ +// Arching Kaos News Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +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 content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"} + ] + }; + var newsSection = { + element: 'div', + id: 'news-section', + innerHTML: [ + whereAmI, + content + ] + }; + makeElement(newsSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/notFoundSection.js b/src/js/ui/sections/notFoundSection.js new file mode 100644 index 0000000..46fc421 --- /dev/null +++ b/src/js/ui/sections/notFoundSection.js @@ -0,0 +1,47 @@ +// Arching Kaos Not Found Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../../arching-kaos-generator.js"; + +export function notFoundSection() +{ + 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:"Not found"} + ] + }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { + element: 'p', + innerText: 'Soft 404' + }, + { + element: 'p', + innerText: 'Please select an entry from the menu' + } + ] + }; + var notFoundSection = { + element: 'div', + id: 'not-found-section', + hidden: true, + innerHTML: [ + whereAmI, + content + ] + }; + + makeElement(notFoundSection, document.querySelector('.main')); +} +// @license-end diff --git a/src/js/ui/sections/radioSection.js b/src/js/ui/sections/radioSection.js new file mode 100644 index 0000000..0cc131f --- /dev/null +++ b/src/js/ui/sections/radioSection.js @@ -0,0 +1,203 @@ +// Arching Kaos Radio Section +// +// Kaotisk Hund - 2024 +// +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 +// + +import { makeElement } from "../../arching-kaos-generator.js"; +import { start_radio, sync_radio } from "../../radio-emulator.js"; + +window.start_radio = start_radio; +window.sync_radio = sync_radio; + +export function radioSection() +{ + 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:"Radio"} + ] + }; + var radioContent = { + element:"div", + id: "radio-main", + innerHTML:[ + {element:"div",className:"start-top",innerHTML:[ + {element:"div",className:"div-groups",style:"flex-grow:1;",innerHTML:[ + {element:"div",className:"now-playing-details",innerHTML:[ + {element:"div",className:"div-groups-row",innerHTML:[ + {element:"img", className:"gen |