diff options
Diffstat (limited to 'src')
51 files changed, 3728 insertions, 978 deletions
diff --git a/src/css/akn.css b/src/css/akn.css index e7ded1e..1ffb099 100644 --- a/src/css/akn.css +++ b/src/css/akn.css @@ -8,15 +8,15 @@ } @font-face { - font-family: 'Hack Nerd Font'; - src: url('../fonts/Hack.woff2') format('woff'); - font-weight: normal; + font-family: 'Doto'; + src: url('../fonts/Doto.woff2') format('woff'); + font-weight: 700; } body { - word-break: break-all; + word-break: normal; padding: 1%; - font-family: 'Hack Nerd Font'; + font-family: 'Doto'; font-size: medium; background-color: #1a1a1a; color: #7ef07e; @@ -41,7 +41,6 @@ div { p { word-break: break-word; text-align: left; - /* margin: 0px; */ } a { @@ -53,6 +52,10 @@ a:hover{ color: #c5f0ff; } +#header { + cursor: pointer; +} + .header { text-align: center; } @@ -86,17 +89,18 @@ fieldset { #menu a {display:inline-block;} -.footer p { margin: 0px; } +#footer p { margin: 0px; } -.footer { +#footer div { display: flex; gap: 5px; flex-direction: row; } +#footer { text-align: center; } .inv {display:block;text-align:center;} -pre {overflow:auto;} - -.whole{ +pre { + font-family: 'Doto'; + overflow:auto; } #gotop-link{ @@ -200,6 +204,7 @@ select { } article { + font-family: monospace; border: none; border-radius: 40px; border-left: 2px dashed #672178; @@ -232,9 +237,8 @@ article { .main{ position: fixed; top: 48px; -/* background-color: #2a2a2a;*/ background-color: #000000; - bottom: 62px; + bottom: 32px; width: auto; right: 0vw; left: 0vw; @@ -242,7 +246,7 @@ article { padding-right: 2vw; padding-top: 1vh; padding-bottom: 1vh; - max-height: 80vh; + max-height: 90vh; height: auto; min-height: 45vh; overflow-y: auto; @@ -284,7 +288,6 @@ h1 { padding: 2px; overflow-y: auto; display: flex; - align-items: end; background: #cacaca; width: 100%; color:rgb(51, 200, 234); @@ -297,10 +300,9 @@ h1 { } button { -/* color: rgb(51, 200, 234);*/ color: rgb(0, 255, 231); text-decoration: none; - font-family: 'Hack Nerd Font'; + font-family: 'Doto'; border: 1px solid #17392e; padding: 10px; margin: 1px; @@ -341,7 +343,7 @@ button:hover { #double-floor { display: flex; - flex-direction: column; + flex-direction: row; } .upper-floor { @@ -396,6 +398,7 @@ audio { summary { background-color: #080808; padding: 4px; + word-break: break-all; } details { @@ -412,14 +415,10 @@ details { border: 2px solid #672178; padding: 24px; } + #settings-section { gap: 5px; flex-direction: column; -/* - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; -*/ } #settings-section div { @@ -434,18 +433,11 @@ details { } #settings-section button {} -footer { - position: absolute; - right: 0; - bottom: 0; - padding: 2px; - text-align: right; -} -.footer { +#footer { margin: 0px; font-size: medium; position: fixed; - height: 62px; + height: 32px; display: flex; justify-content: center; align-items: center; @@ -456,6 +448,7 @@ footer { width: -moz-available; width: -webkit-fill-available; } + @media (max-width: 850px) { #double-floor { flex-direction: column; @@ -492,13 +485,13 @@ footer { } } -@media (max-width: 880px) { - .footer { - font-size: smaller; +@media (max-width: 960px) { + #footer { + font-size: 8px; gap: 0px; flex-direction: column; } - .footer span { + #footer span { display: none; } } @@ -517,10 +510,7 @@ footer { margin: 0px; padding: 1vh 4vw; display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-content: flex-start; + flex-direction: column; } #home-grid { @@ -538,3 +528,209 @@ footer { 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; +} + +#results-header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + align-content: center; + flex-wrap: wrap; +} + +/* Radio CSS */ +* { + padding: 0px; + margin: 0; +} + +#radio-main div { + display: flex; + flex-direction: column; + gap: 0px; +} + +#radio-main { + order: 2; + gap: 10px; +} + +#radio-main .div-groups-row { + display: flex; + flex-direction: row; + align-items: center; +} + +#radio-main progress { + width: auto; +} + +#radio-main a { + color: orange; +} + +#radio-main a:hover { + color: yellow; +} + +#radio-main button { + background:black; + color:red; + font-family: 'Doto'; + border: dotted 2px; + width: 100%; +} + +#radio-main .no-break { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + word-break: none; +} + +#radio-main button { + background:black; + color:red; + font-size: 24px; + border: dotted 2px; +} + +#radio-main button:hover { + background:#ffff96; + color:red; + border: dotted 2px aliceblue; +} + +#radio-main pre { + border: 1px dotted; + overflow-x: auto; + padding: 0.5vh 1vw; +} + +#radio-main details { + border: 1px dotted; + padding: 1vh 2vw; + width: 88vh; +} + +#radio-main summary { + border-bottom: 1px dotted; + padding: 0.5vh 1vw; +} + +#radio-main summary:hover { + background-color: lightgreen; + color: black; +} + +#radio-main .start-top { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: flex-start; + gap: 10px; +} + +#radio-main .previously-played { + flex-direction: column-reverse; + overflow-y: auto; + height: 40vh; + gap: 5px; +} + +#radio-main .div-row { + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + +#radio-main .previously-played img { + width: 48px; +} + +#radio-main .previously-played div { + gap: 5px; +} + + +#radio-main .previously-played div:hover { + background-color: lightgreen; + color: black; +} + +#radio-main .div-inline-reverse { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; +} + +#radio-main .div-inline { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; +} + +#radio-main table { + width: 100%; +} + +#radio-main th, #radio-main td { + background-color: black; + padding: 2px; +} + +#radio-main tr { + background-color: black; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + border: 1px dotted; + align-items: center; +} + +#radio-main audio { + width: auto; +} + +#radio-main .generated { + width: 128px; + height: 128px; + max-width: 128px; + max-height: 128px; +} + +#radio-main .more-details { + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; +} diff --git a/src/fonts/Doto.woff2 b/src/fonts/Doto.woff2 Binary files differnew file mode 100644 index 0000000..cba4776 --- /dev/null +++ b/src/fonts/Doto.woff2 diff --git a/src/img/chat-logo.png b/src/img/chat-logo.png Binary files differnew file mode 100644 index 0000000..e3f42f1 --- /dev/null +++ b/src/img/chat-logo.png diff --git a/src/img/mixtapes-logo.png b/src/img/mixtapes-logo.png Binary files differnew file mode 100644 index 0000000..4320ed4 --- /dev/null +++ b/src/img/mixtapes-logo.png diff --git a/src/img/news-logo.png b/src/img/news-logo.png Binary files differnew file mode 100644 index 0000000..9c6b6eb --- /dev/null +++ b/src/img/news-logo.png diff --git a/src/img/radio-logo.png b/src/img/radio-logo.png Binary files differnew file mode 100644 index 0000000..6727540 --- /dev/null +++ b/src/img/radio-logo.png diff --git a/src/img/stellar.svg b/src/img/stellar.svg new file mode 100644 index 0000000..1a1c2f4 --- /dev/null +++ b/src/img/stellar.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.36 200" height="16px" width="16px" fill="#ffffff"> + <g id="Layer_2" data-name="Layer 2"> + <g id="Layer_1-2" data-name="Layer 1"> + <path d="M203,26.16l-28.46,14.5-137.43,70a82.49,82.49,0,0,1-.7-10.69A81.87,81.87,0,0,1,158.2,28.6l16.29-8.3,2.43-1.24A100,100,0,0,0,18.18,100q0,3.82.29,7.61a18.19,18.19,0,0,1-9.88,17.58L0,129.57V150l25.29-12.89,0,0,8.19-4.18,8.07-4.11v0L186.43,55l16.28-8.29,33.65-17.15V9.14Z"/> + <path d="M236.36,50,49.78,145,33.5,153.31,0,170.38v20.41l33.27-16.95,28.46-14.5L199.3,89.24A83.45,83.45,0,0,1,200,100,81.87,81.87,0,0,1,78.09,171.36l-1,.53-17.66,9A100,100,0,0,0,218.18,100c0-2.57-.1-5.14-.29-7.68a18.2,18.2,0,0,1,9.87-17.58l8.6-4.38Z"/> + </g> + </g> +</svg> diff --git a/src/index.html b/src/index.html index 3541763..b56f19e 100644 --- a/src/index.html +++ b/src/index.html @@ -20,251 +20,18 @@ </head> <body> <div class="page-layout"> - <div class="topbar"> - <div class="header"> - <a href="#/welcome-section" id="#/welcome-section" onclick="menusel(this)"><img src="./img/header-logo.png"></a> - <h1 style="text-align: center;">Arching Kaos</h1> - </div> - <button class="menu-clickable" id="mobile-menu" onclick="toggleMenu(this)">Show menu</button> - <nav id="double-floor" class=""> - <div id="menu" class="upper-floor"> - <button class="menu-clickable" id="#/welcome-section" onclick="menusel(this)">đĄ Home</button> - <button class="has-dropdown menu-clickable" id="modules-submenu-link" onclick="modulesSubToggle(this)">đ Modules</button> - <button class="has-dropdown menu-clickable" id="explore-submenu-link" onclick="exploreSubToggle(this)">đĨŊ Explore</button> - <button class="menu-clickable" id="#/chat-section" onclick="menusel(this)">âī¸ Chat</button> - <button class="menu-clickable" id="#/radio-section" onclick="menusel(this)">Radio</button> - <button class="menu-clickable" id="#/settings-section" onclick="menusel(this)">đ§ Settings</button> - <button class="has-dropdown menu-clickable" id="#/stellar-section" onclick="stellarSubToggle(this)"> - <img style="width: 13px; height: 13px;" src="./img/stellar.svg"/> - Stellar</button> - <button class="menu-clickable" id="#/about-section" onclick="menusel(this)">About</button> - </div> - <div id="menu" class="lower-floor"> - <div class="dropdown" id="modules-submenu"> - <button class="menu-clickable" onclick="modulesSubToggle(this)">..</button> - <button class="menu-clickable" id="#/mixtapes-section" onclick="menusel(this)">Mixtapes</button> - <button class="menu-clickable" id="#/news-section" onclick="menusel(this)">News</button> - <button class="menu-clickable" id="#/comments-section" onclick="menusel(this)">Comments</button> - <button class="menu-clickable" id="#/files-section" onclick="menusel(this)">Files</button> - </div> - <div class="dropdown" id="explore-submenu"> - <button class="menu-clickable" onclick="exploreSubToggle(this)">..</button> - <button class="menu-clickable" id="#/zchain-data-section" onclick="menusel(this)">zchain</button> - <button class="menu-clickable" id="#/stats-section" onclick="menusel(this)">Stats</button> - </div> - <div class="dropdown" id="stellar-submenu"> - <button class="menu-clickable" onclick="stellarSubToggle(this)">..</button> - <button class="menu-clickable" id="#/mypage-section" onclick="menusel(this)">My page</button> - <button class="menu-clickable" id="#/stellar-balances" onclick="menusel(this)">Balances</button> - <button class="menu-clickable" id="#/stellar-data-config" onclick="menusel(this)">Data</button> - <button class="menu-clickable" id="#/arching-kaos-node-info" onclick="menusel(this)">Node Info</button> - </div> - </div> - </nav> - <!-- <audio id="radio-player" controls autoplay hidden></audio> --> - <div hidden> - <span>Radio</span> - <button id="radio-button-controller" class="menu-clickable" onclick="radioToggle();">Loading...</button> - </div> + <div id="topbar" class="topbar"> + <div id="logo-title-placeholder"></div> + <div id="menu-placeholder"></div> </div> <div class="main"> - <div id="welcome-section"> - <h2>đĄ Home</h2> - <p>Welcome to Arching Kaos project.</p> - <div id="home-grid"> - <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> - </div> - <h3>Render explicit zblock</h3> - <div style=" - padding: 1vh 1vw; - display: flex; - flex-direction: row; - align-items: center; - gap: 10px;" - > - <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> - </div> - <div class="results-area"> - <h3>Results</h3> - </div> - <h3>Manual scan</h3> - <div style=" - display: flex; - flex-direction: row; - justify-content: start; - align-items: center; - flex-wrap: wrap; - gap: 5px;" - > - <button onclick="scanStellarNetworkForPeers()">Check Stellar Network</button> - <button onclick="checkLocalNodeInfo()">Check local Node</button> - <button onclick="checkLocalPeers()">Check local Peers</button> - <button onclick="checkLocalSchain()">Check Local Schain</button> - </div> - <div class="dialog"> - <h3>Progress</h3> - <progress id="total-progress"></progress> - <progress id="http-progress"></progress> - <pre id="current-log-message"></pre> - </div> - <div> - <details id="logs-area"> - <summary>Logs (click to expand)</summary> - <div id="logs-area-element"> - </div> - </details> - </div> - </div> - <div id="about-section"> - <h2>âšī¸ About</h2> - <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> - </div> - <div id="stellar-balances"> - <h2>Balances</h2> - <em id="stellar-balances-not-found">No data found (yet?)!</em> - <table id="stellar-balances-table"></table> - </div> - <div id="stellar-data-config"> - <h2>Data</h2> - <em id="stellar-data-config-not-found">No data found (yet?)!</em> - </div> - <div id="arching-kaos-node-info"> - <h2>Node Info</h2> - <em id="node-info-not-found">No data found (yet?)!</em> - </div> - <div id="stellar-section"> - <h2>Stellar dashboard</h2> - <button class="sub-input" id="stellar-freigher-connect-address-button" onclick="connect()" >Connect with Stellar address</button> - </div> - <div id="mypage-section"> - <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> - </div> - <div id="zchain-data-section"> - <h2>zchains</h2> - <em id="zchain-data-sec-not-found">No data found (yet?)!</em> - </div> - <div id="news-section"> - <h2>News</h2> - <em id="news-sec-not-found">No data found (yet?)!</em> - </div> - <div id="comments-section"> - <h2>Comments</h2> - <em id="comments-sec-not-found">No data found (yet?)!</em> - </div> - <div id="mixtapes-section"> - <h2>Mixtapes</h2> - <em id="mixtapes-sec-not-found">No data found (yet?)!</em> - </div> - <div id="files-section"> - <h2>Files</h2> - <em id="files-sec-not-found">No data found (yet?)!</em> - </div> - <div id="settings-section"> - <h2>đ§ Settings</h2> - </div> - <div id="chat-section" style="height: 100%;"> - <button style="position: fixed;" onclick="refreshChat()">Refresh</button> - <iframe id="chat-iframe" src="https://irc.arching-kaos.net" style="width: 100%; height: 100%;"></iframe> - </div> - <div id="radio-section" style="height: 100%;"> - <button style="position: fixed;" onclick="refreshRadio()">Refresh</button> - <iframe id="radio-iframe" src="https://radio.arching-kaos.com" style="width: 100%; height: 100%;"></iframe> - </div> - <div id="stats-section"> |
