diff options
93 files changed, 54444 insertions, 1108 deletions
@@ -1,6 +1,9 @@ Web UI for arching-kaos ----------------------- +Disclaimer: any use of AI tools upon this code base is STRICTLY prohibited. This +affects ALL commits and branches. + This repository hosts the html, css and js files for presenting "arching-kaos" to visitors. @@ -10,7 +13,6 @@ For demo, you can visit https://arching-kaos.net . ### All demo links (may vary on running versions) - [Net](https://arching-kaos.net), - [Com](https://arching-kaos.com), -- [Xyz](https://arching-kaos.xyz), - [News](https://news.arching-kaos.net) - [Dev](https://dev.arching-kaos.net) diff --git a/src/css/akn.css b/src/css/akn.css index e7ded1e..df3e43d 100644 --- a/src/css/akn.css +++ b/src/css/akn.css @@ -2,24 +2,32 @@ animation: fadeIn 0.5s; } +:root { + --back: #000501; + --extr: #73ab84; + --text: #99d19c; + --link: #79c7c5; + --hili: #ade1e5; +} + @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @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; + background-color: var(--back); + color: var(--text); display: block; margin: auto; padding: 5px; @@ -41,16 +49,22 @@ div { p { word-break: break-word; text-align: left; - /* margin: 0px; */ } a { - color:rgb(51, 200, 234); + color: var(--link); text-decoration:none; } a:hover{ - color: #c5f0ff; + color: var(--hili); +} + +ul, ol { + list-style-position: inside; +} +#header { + cursor: pointer; } .header { @@ -86,17 +100,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{ @@ -114,7 +129,7 @@ h1 { #contact { border-style: dashed; border-width: 3px; - border-color: #276a4b; + border-color: var(--link); } label { @@ -126,7 +141,7 @@ input { border: 0px; border-radius: 0px; padding: 1vh 1vw; - color: yellow; + color: var(--text); background: black; border: lightyellow 1px dashed; } @@ -135,10 +150,10 @@ input { border-radius: 0px; border-width: 1px; border-style: solid; - border-color: #7ef07e; + border-color: var(--hili); padding: 1.1%; - background: #1a1a1a; - color: #7ef07e; + background: var(--back); + color: var(--link); text-align: center; padding: 1% 0 1% 0; } @@ -161,8 +176,8 @@ textarea { } .success { - background-color: green; - color: white; + background-color: var(--link); + color: var(--back); } .alert { @@ -197,9 +212,11 @@ select { border: 1px solid; background-color: #1a1a1a; color: #7ef07e; + width: 100%; } article { + font-family: monospace; border: none; border-radius: 40px; border-left: 2px dashed #672178; @@ -232,9 +249,8 @@ article { .main{ position: fixed; top: 48px; -/* background-color: #2a2a2a;*/ - background-color: #000000; - bottom: 62px; + background-color: var(--back); + bottom: 32px; width: auto; right: 0vw; left: 0vw; @@ -242,7 +258,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,30 +300,27 @@ h1 { padding: 2px; overflow-y: auto; display: flex; - align-items: end; - background: #cacaca; + /* background: #cacaca; */ width: 100%; - color:rgb(51, 200, 234); + color: var(--text); } .button { border: 0px; padding: 7px; - color: white; + color: var(--text); } button { -/* color: rgb(51, 200, 234);*/ - color: rgb(0, 255, 231); + color: var(--text); text-decoration: none; - font-family: 'Hack Nerd Font'; - border: 1px solid #17392e; + font-family: 'Doto'; padding: 10px; margin: 1px; cursor: pointer; display: flex; - background: #000000; - border: 1px solid #17392e; + background: var(--back); + border: 1px solid var(--link); padding: 1vh 1vw; margin: 1px; width: auto; @@ -319,8 +332,9 @@ button { } button:hover { - background: #535353; - border-color: #eef7ff; + background: var(--text); + color: var(--back); + border-color: var(--extr); } #mobile-menu { @@ -341,7 +355,7 @@ button:hover { #double-floor { display: flex; - flex-direction: column; + flex-direction: row; } .upper-floor { @@ -361,7 +375,7 @@ button:hover { article hr { border: none; border-top-width: 1px; - border-top-color: #672178; + border-top-color: var(--hili); border-top-style: dotted; margin-left: 0vw; margin-right: 0vw; @@ -370,7 +384,7 @@ article hr { hr { border: none; border-top-width: 1px; - border-top-color: #7ef07e; + border-top-color: var(--hili); border-top-style: dashed; margin-left: 10vw; margin-right: 10vw; @@ -394,14 +408,15 @@ audio { } summary { - background-color: #080808; + background-color: var(--back); padding: 4px; + word-break: break-all; } details { - border: 2px solid #3a3a3a; - background-color: #000000; - padding: 0px; + border: 2px solid var(--hili); + background-color: var(--back); + padding: 5px; } #logs-area-element { @@ -409,17 +424,13 @@ details { } .zchain-details { - border: 2px solid #672178; + border: 2px solid var(--hili); 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 +445,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 +460,7 @@ footer { width: -moz-available; width: -webkit-fill-available; } + @media (max-width: 850px) { #double-floor { flex-direction: column; @@ -476,7 +481,7 @@ footer { top: 0px; z-index: 0; align-items: center; - background-color: #1a1a1a8a; + background-color: var(--back); height: 100%; width: 100%; } @@ -492,13 +497,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 +522,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 +540,198 @@ 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; +} + |