From 1020627ebe6a4330a913f751be794d016ebe977e Mon Sep 17 00:00:00 2001 From: kalm Date: Mon, 23 Dec 2024 06:27:39 -0800 Subject: [PATCH] explorer: initial UI re-themed to match Darkfi Book MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit updates the Explorer application’s UI, providing a preliminary re-theming inspired by the Darkfi Book site. The updated design offers a familiar and visually appealing interface, along with improvements to responsiveness and usability on larger displays. These updates include changes to styling, layout, and modifications to key pages, such as the home page, block page, and transaction page. This implementation represents the initial stage of improving the UI, making it more appealing for development and demos. It is not final, as further improvements will be made iteratively. --- .../blockchain-explorer/site/static/style.css | 984 ++++++++++-------- .../site/templates/404.html | 2 +- .../site/templates/500.html | 4 +- .../site/templates/base.html | 73 +- .../site/templates/block.html | 55 +- .../site/templates/index.html | 164 +-- .../site/templates/transaction.html | 50 +- 7 files changed, 753 insertions(+), 579 deletions(-) diff --git a/script/research/blockchain-explorer/site/static/style.css b/script/research/blockchain-explorer/site/static/style.css index 9ae986e1542c..5a22c7b210e8 100644 --- a/script/research/blockchain-explorer/site/static/style.css +++ b/script/research/blockchain-explorer/site/static/style.css @@ -1,81 +1,82 @@ @font-face { font-family: 'Inter'; - font-style: normal; + font-style: normal; font-weight: 400; font-display: swap; src: url("font-files/Inter-Regular.woff2?v=3.19") format("woff2"), - url("font-files/Inter-Regular.woff?v=3.19") format("woff"); + url("font-files/Inter-Regular.woff?v=3.19") format("woff"); } + @font-face { font-family: 'Inter'; - font-style: italic; + font-style: italic; font-weight: 400; font-display: swap; src: url("font-files/Inter-Italic.woff2?v=3.19") format("woff2"), - url("font-files/Inter-Italic.woff?v=3.19") format("woff"); + url("font-files/Inter-Italic.woff?v=3.19") format("woff"); } @font-face { font-family: 'Inter'; - font-style: normal; + font-style: normal; font-weight: 700; font-display: swap; src: url("font-files/Inter-Bold.woff2?v=3.19") format("woff2"), - url("font-files/Inter-Bold.woff?v=3.19") format("woff"); + url("font-files/Inter-Bold.woff?v=3.19") format("woff"); } @font-face { font-family: 'Inter'; - font-style: italic; + font-style: italic; font-weight: 700; font-display: swap; src: url("font-files/Inter-BoldItalic.woff2?v=3.19") format("woff2"), - url("font-files/Inter-BoldItalic.woff?v=3.19") format("woff"); + url("font-files/Inter-BoldItalic.woff?v=3.19") format("woff"); } @font-face { font-family: 'InterDisplay'; - font-style: normal; + font-style: normal; font-weight: 900; font-display: swap; src: url("font-files/InterDisplay-Black.woff2?v=3.19") format("woff2"), - url("font-files/InterDisplay-Black.woff?v=3.19") format("woff"); + url("font-files/InterDisplay-Black.woff?v=3.19") format("woff"); } @font-face { font-family: 'InterDisplay'; - font-style: italic; + font-style: italic; font-weight: 900; font-display: swap; src: url("font-files/InterDisplay-BlackItalic.woff2?v=3.19") format("woff2"), - url("font-files/InterDisplay-BlackItalic.woff?v=3.19") format("woff"); + url("font-files/InterDisplay-BlackItalic.woff?v=3.19") format("woff"); } @font-face { font-family: 'InterDisplay'; - font-style: normal; + font-style: normal; font-weight: 200; font-display: swap; src: url("font-files/InterDisplay-ExtraLight.woff2?v=3.19") format("woff2"), - url("font-files/InterDisplay-ExtraLight.woff?v=3.19") format("woff"); + url("font-files/InterDisplay-ExtraLight.woff?v=3.19") format("woff"); } @font-face { font-family: 'Chomsky'; - font-style: normal; + font-style: normal; font-weight: 700; font-display: swap; - src: url("font-files/Chomsky.woff2?v=3.19") format("woff2"), - url("font-files/Chomsky.woff?v=3.19") format("woff"); + src: url("font-files/Chomsky.woff2?v=3.19") format("woff2"), + url("font-files/Chomsky.woff?v=3.19") format("woff"); } @font-face { font-family: 'IBMPlexMono'; - font-style: normal; + font-style: normal; font-weight: 400; font-display: swap; src: url("font-files/IBMPlexMono-Light.woff2") format("woff2"), - url("font-files/IBMPlexMono-Light.woff?v=3.19") format("woff"); + url("font-files/IBMPlexMono-Light.woff?v=3.19") format("woff"); } @font-face { @@ -84,7 +85,7 @@ font-weight: 400; font-display: swap; src: url("font-files/weissrundgotisch.regular.woff2") format("woff2"), - url("font-files/weissrundgotisch.regular.woff?v=3.19") format("woff"); + url("font-files/weissrundgotisch.regular.woff?v=3.19") format("woff"); } @font-face { @@ -93,7 +94,7 @@ font-weight: 400; font-display: swap; src: url("font-files/IBMPlexSansArabic-Regular.woff2") format("woff2"), - url("font-files/IBMPlexSansArabic-Regular.woff?v=3.19") format("woff"); + url("font-files/IBMPlexSansArabic-Regular.woff?v=3.19") format("woff"); } @font-face { @@ -102,593 +103,621 @@ font-weight: 700; font-display: swap; src: url("font-files/ReemKufi-Bold.woff2") format("woff2"), - url("font-files/ReemKufi-Bold.woff?v=3.19") format("woff"); + url("font-files/ReemKufi-Bold.woff?v=3.19") format("woff"); } -/* */ +/* -------------------------------------------------------------------------- */ +/* Colors */ +/* -------------------------------------------------------------------------- */ -body{ - font-family: 'Inter', sans-serif; - font-style:normal; - font-weight:700; - background:#090909; - text-align:inherit; +:root { + --color-background-page: #181a1b; + --color-background-table-header: #181818; + --color-input-primary: #AFA99E; + --color-border-primary: #83796B; } -.description{ - margin-top:30px; +/* -------------------------------------------------------------------------- */ +/* To Categorize */ +/* -------------------------------------------------------------------------- */ + +html { + font-family: "Inter", sans-serif; + font-size: 16px; + text-size-adjust: none; + -webkit-text-size-adjust: none; } -p{ - font-family: 'IBMPlexMono', monospace; - font-style:normal; - font-weight:400; +body { + margin: 0; + overflow-x: hidden; + padding-bottom: 80px; + background-color: #000; } -h1{ - font-family: 'InterDisplay', sans-serif; - font-style:normal; - font-weight:900; +p { + font-family: 'IBMPlexMono', monospace; + font-style: normal; + font-weight: 400; } -h3 a{ - color:#00ffff; - text-decoration:none; +h1 { + font-family: 'InterDisplay', sans-serif; + font-style: normal; + font-weight: 900; } -h3 a:hover{ - color:#4c9fb5; +h3 a { + color: #00ffff; + text-decoration: none; } -.main-text{ - padding-bottom:70px; - background-color:#001111; - background-image:url('img/sunset.png'); - background-position:bottom; - background-repeat:no-repeat; +h3 a:hover { + color: #4c9fb5; } -.border-st{ - border-radius:0; +.description { + margin-top: 30px; } -.border-l1{ - font-size:56px; - text-align:center; - text-shadow: 0px 0px 5px #0ff; - line-height:1.3em; - padding-left:100px; - padding-right:100px; +.main-text { + padding-bottom: 70px; + background-color: #001111; + background-position: bottom; + background-repeat: no-repeat; } -.border-l{ - font-size:36px; - text-align:center; - font-weight:100; - letter-spacing:1px; - color:#005b60; - /* text-shadow: 0px 0px 2px #0ff; */ - line-height:1.3em; - padding-top:70px; - padding-left:180px; - padding-right:180px; +.border-st { + border-radius: 0; } -.border-f{ -border-left-width:1px; -border-left-style:solid; -border-left-color:#0ff; -text-shadow: 0px 0px 5px #0ff; -line-height:1.1em; -padding-left:48px; +.border-l1 { + font-size: 56px; + text-align: center; + text-shadow: 0px 0px 5px #0ff; + line-height: 1.3em; + padding-left: 100px; + padding-right: 100px; } -.border-l2{ - border-left-width:1px; - border-left-style:solid; - border-left-color:#0ff; - font-family: 'WeissRundgotisch', blackletter; - font-style:normal; - font-weight:400; - font-size:2em; - line-height:.85em; +.border-l { + font-size: 36px; + text-align: center; + font-weight: 100; + letter-spacing: 1px; + color: #005b60; + /* text-shadow: 0px 0px 2px #0ff; */ + line-height: 1.3em; + padding-top: 70px; + padding-left: 180px; + padding-right: 180px; +} + +.border-f { + border-left-width: 1px; + border-left-style: solid; + border-left-color: #0ff; + text-shadow: 0px 0px 5px #0ff; + line-height: 1.1em; + padding-left: 48px; +} + +.border-l2 { + border-left-width: 1px; + border-left-style: solid; + border-left-color: #0ff; + font-family: 'WeissRundgotisch', blackletter; + font-style: normal; + font-weight: 400; + font-size: 2em; + line-height: .85em; } -.border-l3{ - /* text-shadow: 0px 0px 5px #0ff; */ - line-height:1.1em; - /*filter:blur(20px);*/ - /*transition: ease-in-out 10s;*/ +.border-l3 { + /* text-shadow: 0px 0px 5px #0ff; */ + line-height: 1.1em; + /*filter:blur(20px);*/ + /*transition: ease-in-out 10s;*/ } -a:hover{ - text-decoration:none; +a:hover { + text-decoration: none; } -.mobile{ - display:none; +.mobile { + display: none; } -.news{ - padding-top:48px; - padding-bottom:48px; +.news { + padding-top: 48px; + padding-bottom: 48px; } -.info{ - font-family: 'IBMPlexMono', monospace; - font-style: normal; - font-weight: 400; - font-size:12px; - letter-spacing:0.12em; - border-left:1px solid #0ff; +.info { + font-family: 'IBMPlexMono', monospace; + font-style: normal; + font-weight: 400; + font-size: 12px; + letter-spacing: 0.12em; + border-left: 1px solid #0ff; } -.dl-bt{ - display:inline-block; - background-color:#000; - transition:ease-in-out 0.15s; - border:1px solid #00282e; - color:#fff; - font-family:'IBMPlexMono',monospace; - font-weight:400; +.dl-bt { + display: inline-block; + background-color: #000; + transition: ease-in-out 0.15s; + border: 1px solid #00282e; + color: #fff; + font-family: 'IBMPlexMono', monospace; + font-weight: 400; } -.dl-bt:hover{ - background-color:#000c0d; - border:1px solid #00282e; - color:#82b2b5; +.dl-bt:hover { + background-color: #000c0d; + border: 1px solid #00282e; + color: #82b2b5; } -.button-insights,.button-insights span{ - transition:ease .2s; - color:#80ffff; +.button-insights, .button-insights span { + transition: ease .2s; + color: #80ffff; } -.button-insights:hover{ - background:#180606; +.button-insights:hover { + background: #180606; } -.button-insights:hover span{ - color:#0ff; +.button-insights:hover span { + color: #0ff; } -.title-block{ - background-image:url('img/sunset.png'); - background-position:bottom; - background-repeat:no-repeat; +.title-block { + background-position: bottom; + background-repeat: no-repeat; } -footer{ - background-color:#090909; - background-image:url('img/sunset2.png'); - background-position:bottom; - background-repeat:no-repeat; - height:10vw; - bottom: 0; - width: 100%; +footer { + background-position: bottom; + background-repeat: no-repeat; + height: 10vw; + bottom: 0; + width: 100%; } -.navbar-toggler{ - border-radius:0px; - border-color:#6c757d; - opacity:1; +.navbar-toggler { + border-radius: 0px; + border-color: #6c757d; + opacity: 1; } -.navbar{ - padding-left:10px; - padding-right:10px; - padding-top:0; - padding-bottom:0; - background:#000; +.navbar { + padding: 20px; + padding-top: 6px; + padding-bottom: 6px; + background: #000; + position: sticky; + top: 0; + z-index: 999; + margin: 0 auto; + width: 100%; + background-color: #000; } -.nav-item a{ - margin-left:10px; - font-family:'IBMPlexMono', monospace; - font-weight:400; - font-size:.8em; - color:#fff; +.nav-item a { + margin-left: 10px; + font-family: 'IBMPlexMono', monospace; + font-weight: 400; + font-size: .8em; + color: #fff; } -.nav-link{ - font-size:.6em; - color:#fff; +.nav-link { + font-size: .6em; + color: #fff; } -.nav-item a:hover{ - color:red; +.nav-item a:hover { + color: red; } -.a{ - background-color:rgba(0, 0, 0, 0); - transition: ease-in-out 0.2s; +.a { + background-color: rgba(0, 0, 0, 0); + transition: ease-in-out 0.2s; } -.b{ - background-color:#000; - border-bottom:1px solid #6c757d; - padding-top:0px; - padding-bottom:0px; +.b { + background-color: #000; + border-bottom: 1px solid #6c757d; + padding-top: 0px; + padding-bottom: 0px; } -.b .nav-link{ - border:0; +.b .nav-link { + border: 0; } -.b .navbar-brand img{ - max-height:30px; - padding:0; +.b .navbar-brand img { + max-height: 30px; + padding: 0; } -.b .border-st{ - padding-bottom:0; - padding-top:0; +.b .border-st { + padding-bottom: 0; + padding-top: 0; } -.quote{ - border-left:1px solid #0ff; - background-color:#001615; - padding-top:15px; - padding-bottom:15px; - padding-right:15px; +.quote { + border-left: 1px solid #0ff; + background-color: #001615; + padding-top: 15px; + padding-bottom: 15px; + padding-right: 15px; } -.quote-src{ +.quote-src { font-family: 'IBMPlexMono', monospace; - font-size:.8em; - color:#fff; - display:inline-block; - border-left:1px solid #0ff; - padding-top:10px; + font-size: .8em; + color: #fff; + display: inline-block; + border-left: 1px solid #0ff; + padding-top: 10px; } -.btn:hover{ - color:#000; - background-color:#000; +.btn:hover { + color: #000; + background-color: #000; } a:hover .btn { - color:#000; + color: #000; } -.icon-sm{ - vertical-align:middle; - width:30px; - } +.icon-sm { + vertical-align: middle; + width: 30px; +} /* Manifesto */ -.p-text{ - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - padding:48px; +.p-text { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + padding: 48px; } -h4{ - font-size:2em; - padding-left:0.5em; - border-left-width:1px; - border-left-style:solid; - border-left-color:#0ff; +h4 { + font-size: 2em; + padding-left: 0.5em; + border-left-width: 1px; + border-left-style: solid; + border-left-color: #0ff; - font-family: 'InterDisplay', sans-serif; - font-style:normal; - font-weight:800; + font-family: 'InterDisplay', sans-serif; + font-style: normal; + font-weight: 800; } -.p-text a{ - color:#0ff; - border-bottom:1px solid #0ff; - padding-bottom:2px; - transition:ease-in-out 0.3s; +.p-text a { + color: #0ff; + border-bottom: 1px solid #0ff; + padding-bottom: 2px; + transition: ease-in-out 0.3s; } -.p-text a:hover{ - color:#00ffa3; - border-bottom:1px solid #00ffa3; +.p-text a:hover { + color: #00ffa3; + border-bottom: 1px solid #00ffa3; } -.l-ph{ - background:url("img/manifesto.jpg") fixed; - background-position:right; +.l-ph { + background: url("img/manifesto.jpg") fixed; + background-position: right; } -.l-ph-ar{ - background:url("img/manifesto.jpg") fixed; - background-position:left; +.l-ph-ar { + background: url("img/manifesto.jpg") fixed; + background-position: left; } -#manifesto{ - max-width:700px; +#manifesto { + max-width: 700px; } -.quote-code{ +.quote-code { font-family: 'IBMPlexMono', monospace; - font-style: normal; + font-style: normal; font-weight: 400; - display:block; - padding:10px; + display: block; + padding: 10px; } -code{ - color:#fff; - background:#001615; - padding:2px; - font-size:1.1em; - color:#D8E8E2; +code { + color: #fff; + background: #001615; + padding: 2px; + font-size: 1.1em; + color: #D8E8E2; } -#language{ +#language { font-family: 'IBMPlexMono', monospace; - font-style: normal; + font-style: normal; font-weight: 400; - color:#a0a0a0; - margin-bottom:30px; + color: #a0a0a0; + margin-bottom: 30px; } -#language a{ - color:#a0a0a0; - border-bottom:1px solid #a0a0a0; +#language a { + color: #a0a0a0; + border-bottom: 1px solid #a0a0a0; } -#language a:hover{ - color:#fff; - border-bottom:1px solid #fff; +#language a:hover { + color: #fff; + border-bottom: 1px solid #fff; } /* Manifesto Arabic */ -.p-text-ar{ +.p-text-ar { font-family: 'IBMPlexSansArabic'; font-style: normal; font-weight: 400; - font-size:1.1em; - padding:48px; + font-size: 1.1em; + padding: 48px; } -.quote-ar{ - border-right:1px solid #0ff; - background-color:#001615; - padding-top:15px; - padding-bottom:15px; - padding-right:15px; +.quote-ar { + border-right: 1px solid #0ff; + background-color: #001615; + padding-top: 15px; + padding-bottom: 15px; + padding-right: 15px; } -.quote-src-ar{ +.quote-src-ar { font-family: 'IBMPlexMono', monospace; - font-size:1em; - color:#fff; - display:inline-block; - border-right:1px solid #0ff; - padding-top:10px; -} - -.h4-ar{ - font-size:2em; - padding-right:0.5em; - border-right-width:1px; - border-right-style:solid; - border-right-color:#0ff; - border-left-width:0; - border-left-style:none; - font-family: 'InterDisplay', sans-serif; - font-style:normal; - font-weight:black; + font-size: 1em; + color: #fff; + display: inline-block; + border-right: 1px solid #0ff; + padding-top: 10px; +} + +.h4-ar { + font-size: 2em; + padding-right: 0.5em; + border-right-width: 1px; + border-right-style: solid; + border-right-color: #0ff; + border-left-width: 0; + border-left-style: none; + font-family: 'InterDisplay', sans-serif; + font-style: normal; + font-weight: black; } /* Overview */ -.lead-text{ - padding:48px; +.lead-text { + padding: 48px; } -.source-list{ +.source-list { border-left: 1px solid #00ffff; } /* Community */ -.comm{ - padding-left:48px; +.comm { + padding-left: 48px; } -h5{ - font-size:2em; - padding-left:0.5em; - border-left-width:1px; - border-left-style:solid; - border-left-color:#0ff; +h5 { + font-size: 2em; + padding-left: 0.5em; + border-left-width: 1px; + border-left-style: solid; + border-left-color: #0ff; - font-family: 'InterDisplay', sans-serif; - font-style:normal; - font-weight:800; + font-family: 'InterDisplay', sans-serif; + font-style: normal; + font-weight: 800; } -h5 a{ - color:#fff; - border-bottom:1px solid #0ff; - transition:ease-in-out 0.3s; +h5 a { + color: #fff; + border-bottom: 1px solid #0ff; + transition: ease-in-out 0.3s; } -h5 a:hover{ - color:#f00; - border-bottom:1px solid #f00; +h5 a:hover { + color: #f00; + border-bottom: 1px solid #f00; } /* Media */ -.media-text{ - font-family:Weissrundgotisch; - color:#005458; +.media-text { + font-family: Weissrundgotisch; + color: #005458; text-shadow: 0 0 5px #002e4a; -webkit-text-stroke: .5px #001f1f; } /* Download */ -.dl-info{ - font-family: 'IBMPlexMono', monospace; - font-style: normal; - font-weight: 400; - font-size:15px; - letter-spacing:0.12em; - border-left:1px solid #0ff; +.dl-info { + font-family: 'IBMPlexMono', monospace; + font-style: normal; + font-weight: 400; + font-size: 15px; + letter-spacing: 0.12em; + border-left: 1px solid #0ff; } -.navbarb{ - display:none; +.navbarb { + display: none; } -/* Responsive */ - -@media (max-width: 400px) { - .comm{ - padding-left:30px; - } +.mail { + display: inline-block; } -@media (max-width: 590px) { - .navbar-brand img - { - max-height:40px; - } - - .about - { - font-size:4.5vw; - } - - footer{ - height:60vw; - } - - .icon-sm{ - max-width:20px; - vertical-align:middle; - } +/* Responsive */ - .p-text{ - font-size:14px; - padding:24px; - } +@media (min-width: 1281px) { + .page-container { + max-width: 1280px; + min-height: 100vh; + } } -.mail{ - display:inline-block; +@media (max-width: 1280px) and (min-width: 768px) { + .page-container { + max-width: 90%; + min-height: 100vh; + } } @media (max-width: 991px) { - .border-l1{ - padding-left:60px; - padding-right:60px; + .border-l1 { + padding-left: 60px; + padding-right: 60px; } - .news{ - padding-top:0px; - padding-bottom:48px; -} + .news { + padding-top: 0px; + padding-bottom: 48px; + } -.border-l{ - padding-left:100px; - padding-right:100px; -} + .border-l { + padding-left: 100px; + padding-right: 100px; + } } @media (max-width: 767px) { - .border-st{ - background-color:#000; -} + .page-container { + max-width: 95%; + min-height: auto; + } -.border-l{ - padding-left:70px; - padding-right:70px; -} + /* Lower viewport-specific adjustments */ + .border-st { + background-color: #000; + } -.navbarb{ - display:block; - margin:0; - padding:0; -} + .border-l { + padding-left: 70px; + padding-right: 70px; + } - .img-dl{ - display:none; - } + .navbarb { + display: block; + margin: 0; + padding: 0; + } - .dl-info-v{ - display:none; - } + .img-dl { + display: none; + } - .navbar-nav{ - margin:auto; -} + .dl-info-v { + display: none; + } + .navbar-nav { + margin: auto; + } } @media (max-width: 730px) { - - .lead-text{ - padding:24px; + .lead-text { + padding: 24px; } - .display-1 - { - font-size:10vw; - } + .display-1 { + font-size: 10vw; + } - .space{ - display:none; + .space, + .desktop { + display: none; } - .desktop{ - display:none; + .mobile { + display: block; } - .mobile{ - display:block; + .border-l { + padding-left: 20px; + padding-right: 20px; + font-size: 7vw; } - .border-l - { - padding-left:20px; - padding-right:20px; - font-size:7vw; - } + .border-f, + .border-l3 { + border-left-width: 1px; + } - .border-f,.border-l3{ - border-left-width:1px; + .media-text { + font-size: 1.7em; + } } -.media-text{ - font-size:1.7em; -} +@media (max-width: 590px) { + .navbar-brand img { + max-height: 40px; + } + + .about { + font-size: 4.5vw; + } + + footer { + height: 60vw; + } + + .icon-sm { + max-width: 20px; + vertical-align: middle; + } + + .p-text { + font-size: 14px; + padding: 24px; + } } +@media (max-width: 400px) { + .comm { + padding-left: 30px; + } +} @media (max-width: 350px) { - .navbar-brand img - { - max-height:30px; - } - - .border-l1{ - padding-left:20px; - padding-right:20px; + .navbar-brand img { + max-height: 30px; } - .border-l -{ - padding-left:10px; - padding-right:10px; -} + .border-l1 { + padding-left: 20px; + padding-right: 20px; + } + + .border-l { + padding-left: 10px; + padding-right: 10px; + } } /* ___________________ */ - .container2 { max-width: 1050px; width: 90%; @@ -765,47 +794,47 @@ h5 a:hover{ .nav-container2 .hamburger-lines .line1 { transform-origin: 0% 0%; -/* transition: transform 0.4s ease-in-out;*/ + /* transition: transform 0.4s ease-in-out;*/ } .nav-container2 .hamburger-lines .line2 { -/* transition: transform 0.2s ease-in-out;*/ + /* transition: transform 0.2s ease-in-out;*/ } .nav-container2 .hamburger-lines .line3 { transform-origin: 0% 100%; -/* transition: transform 0.4s ease-in-out;*/ + /* transition: transform 0.4s ease-in-out;*/ } .menu-items { - background:#000; - margin-top:-10px; + background: #000; + margin-top: -10px; /*height: 100vh;*/ width: 150px; transform: translate(150%); display: flex; flex-direction: column; - margin-left:0; - margin-right:0; - padding-top:50px; + margin-left: 0; + margin-right: 0; + padding-top: 50px; transition: transform 0.5s ease-in-out; - border-top:1px solid #fff; - border-left:1px solid #fff; - border-right:1px solid #fff; + border-top: 1px solid #fff; + border-left: 1px solid #fff; + border-right: 1px solid #fff; } .navbar2 .menu-items li { - display:inline-block; - width:100%; - padding:5px; - margin-left:auto; - margin-right:auto; - border-bottom:1px solid #fff; + display: inline-block; + width: 100%; + padding: 5px; + margin-left: auto; + margin-right: auto; + border-bottom: 1px solid #fff; } -.navbar2 .menu-items li a{ - color:#fff; - font-size:1rem; +.navbar2 .menu-items li a { + color: #fff; + font-size: 1rem; } .nav-container2 input[type="checkbox"]:checked ~ .menu-items { @@ -824,7 +853,7 @@ h5 a:hover{ transform: rotate(-45deg); } -.nav-container2 input[type="checkbox"]:checked ~ .logo{ +.nav-container2 input[type="checkbox"]:checked ~ .logo { display: none; } @@ -842,3 +871,106 @@ h5 a:hover{ left: 50%; transform: translate(-50%, -25%); } + +/* -------------------------------------------------------------------------- */ +/* Page Layout */ +/* -------------------------------------------------------------------------- */ + +.page-container { + display: flex; + flex-direction: column; + margin-left: auto; + margin-right: auto; + position: relative; + background-color: var(--color-background-page); +} + +/* -------------------------------------------------------------------------- */ +/* Page Content Styles */ +/* -------------------------------------------------------------------------- */ + +.content-container { + padding: 24px; +} + +.content-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.content-section { + width: 100%; + padding-top: 20px; + padding-bottom: 20px; +} + +.content-section-header { + font-family: 'InterDisplay', sans-serif; + font-weight: 900; + letter-spacing: 0.035em; + border: none; + display: block; + margin-bottom: 16px; + font-size: 24px; +} + +.content-divider { + border: thin solid var(--color-border-primary); +} + +/* -------------------------------------------------------------------------- */ +/* Search */ +/* -------------------------------------------------------------------------- */ + +.search-container { + display: flex; + align-items: center; + justify-content: start; + gap: 20px; + min-width: max-content; +} + +.search-input { + color: var(--color-input-primary); + width: 64ch; + padding-left: 5px; + height: 30px; +} + +/* -------------------------------------------------------------------------- */ +/* Table Styles */ +/* -------------------------------------------------------------------------- */ + +.table { + width: 100%; + margin: 0 auto; + border-collapse: collapse; + border-spacing: 0; + border: 1px solid var(--color-border-primary); + overflow: hidden; +} + +.table td { + padding: 3px 20px; + border-top: 1px var(--color-border-primary) solid; + border-bottom: 1px var(--color-border-primary) solid; +} + +.table thead { + background: var(--color-background-table-header); +} + +.table thead td { + font-weight: 700; +} + +.table thead th { + padding: 3px 20px; + border-top: 1px var(--color-border-primary) solid; + border-bottom: 1px var(--color-border-primary) solid; +} + +.table thead tr { + border: 1px var(--color-border-primary) solid; +} diff --git a/script/research/blockchain-explorer/site/templates/404.html b/script/research/blockchain-explorer/site/templates/404.html index 33c0c4fa5413..40f9e7013c4f 100644 --- a/script/research/blockchain-explorer/site/templates/404.html +++ b/script/research/blockchain-explorer/site/templates/404.html @@ -23,7 +23,7 @@ {% block content %}
- +

Is this what you are looking for? diff --git a/script/research/blockchain-explorer/site/templates/500.html b/script/research/blockchain-explorer/site/templates/500.html index 8b420cf768a1..dc17c0b81a9a 100644 --- a/script/research/blockchain-explorer/site/templates/500.html +++ b/script/research/blockchain-explorer/site/templates/500.html @@ -23,9 +23,9 @@ {% block content %}
- +
-

+

Reality fractured beyond repair!

diff --git a/script/research/blockchain-explorer/site/templates/base.html b/script/research/blockchain-explorer/site/templates/base.html index 03f43179fcdd..d136abebae64 100644 --- a/script/research/blockchain-explorer/site/templates/base.html +++ b/script/research/blockchain-explorer/site/templates/base.html @@ -23,43 +23,48 @@ DarkFi – {% block title %}{% endblock %} - + - + - - - {% block content %}{% endblock %} +
+ {% block content %}{% endblock %} +
+
diff --git a/script/research/blockchain-explorer/site/templates/block.html b/script/research/blockchain-explorer/site/templates/block.html index fa008e2ba3f2..409826f9c568 100644 --- a/script/research/blockchain-explorer/site/templates/block.html +++ b/script/research/blockchain-explorer/site/templates/block.html @@ -22,34 +22,37 @@ {% block content %} -
-

Block {{ block[0] }}

-
- -
-
-
    -
  • Version: {{ block[1] }}
    • -
  • Previous: {{ block[2] }}
    • -
  • Height: {{ block[3] }}
    • -
  • Timestamp: {{ block[4] }}
    • -
  • Nonce: {{ block[5] }}
    • -
  • Root: {{ block[6] }}
    • -
  • Signature: {{ block[7] }}
    • -
-
+
+ + +
+

Block Details

+
{{ block[0] }}
-
-
-

Transactions

- -
+ +
    +
  • Version: {{ block[1] }}
    • +
  • Previous: {{ block[2] }}
    • +
  • Height: {{ block[3] }}
    • +
  • Timestamp: {{ block[4] }}
    • +
  • Nonce: {{ block[5] }}
    • +
  • Root: {{ block[6] }}
    • +
  • Signature: {{ block[7] }}
    • +
+ + +
+ + +
+

Block Transactions

+
- +
{% endblock %} diff --git a/script/research/blockchain-explorer/site/templates/index.html b/script/research/blockchain-explorer/site/templates/index.html index 51ad67253dd6..7c19cc769190 100644 --- a/script/research/blockchain-explorer/site/templates/index.html +++ b/script/research/blockchain-explorer/site/templates/index.html @@ -21,88 +21,102 @@ {% block title %}Explorer{% endblock %} {% block content %} - -
-

Explore

-
-
- -
-
-
- -
-
-

Latest Blocks

- - - - - - - {% for block in blocks %} - - - - - - {% endfor %} -
HeightHashTimestamp
{{ block[3] }}{{ block[0] }}{{ block[4] }}
-
-
- -
-
-

Basic Statistics

-
    -
  • Height: {{ basic_stats[0] }}
    • -
  • Epoch: {{ basic_stats[1] }}
    • -
  • Last block: {{ basic_stats[2] }}
    • -
  • Total blocks: {{ basic_stats[3] }}
    • -
  • Total transactions: {{ basic_stats[4] }}
    • -
-
+
+ + +
+

Explore

+
+ +
-
-
-

Total Network Gas Consumption Statistics

- - Total Gas -
    -
  • Average: {{ metric_stats[0] }}
    • -
  • Minimum: {{ metric_stats[1] }}
    • -
  • Maximum: {{ metric_stats[2] }}
    • -
- - WASM Gas + +
+

Network Summary

    -
  • Average: {{ metric_stats[3] }}
    • -
  • Minimum: {{ metric_stats[4] }}
    • -
  • Maximum: {{ metric_stats[5] }}
    • +
  • Height: {{ basic_stats[0] }}
    • +
  • Epoch: {{ basic_stats[1] }}
    • +
  • Last block: {{ basic_stats[2] }}
    • +
  • Total blocks: {{ basic_stats[3] }}
    • +
  • Total transactions: {{ basic_stats[4] }}
+
- ZK Circuits Gas -
    -
  • Average: {{ metric_stats[6] }}
    • -
  • Minimum: {{ metric_stats[7] }}
    • -
  • Maximum: {{ metric_stats[8] }}
    • -
+ +
+

Latest Blocks

+ + + + + + + + + + {% for block in blocks %} + + + + + + {% endfor %} + +
HeightHashTimestamp
{{ block[3] }}{{ block[0] }}{{ block[4] }}
+
- Signatures Gas -
    -
  • Average: {{ metric_stats[9] }}
    • -
  • Minimum: {{ metric_stats[10] }}
    • -
  • Maximum: {{ metric_stats[11] }}
    • -
+ +
+

Total Network Gas Consumption

+ {% if metric_stats %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AverageMinimumMaximum
Total{{ metric_stats[0] }}{{ metric_stats[1] }}{{ metric_stats[2] }}
WASM{{ metric_stats[3] }}{{ metric_stats[4] }}{{ metric_stats[5] }}
ZK Circuits{{ metric_stats[6] }}{{ metric_stats[7] }}{{ metric_stats[8] }}
Signatures{{ metric_stats[9] }}{{ metric_stats[10] }}{{ metric_stats[11] }}
Deployments{{ metric_stats[12] }}{{ metric_stats[13] }}{{ metric_stats[14] }}
+ {% else %} + Gas consumption details are not available. + {% endif %} +
- Deployments Gas -
    -
  • Average: {{ metric_stats[12] }}
    • -
  • Minimum: {{ metric_stats[13] }}
    • -
  • Maximum: {{ metric_stats[14] }}
    • -
- {% endblock %} diff --git a/script/research/blockchain-explorer/site/templates/transaction.html b/script/research/blockchain-explorer/site/templates/transaction.html index c0213846844d..f929a3e0c590 100644 --- a/script/research/blockchain-explorer/site/templates/transaction.html +++ b/script/research/blockchain-explorer/site/templates/transaction.html @@ -21,29 +21,35 @@ {% block title %}Transaction {{ transaction[0] }}{% endblock %} {% block content %} +
-
-

Transaction {{ transaction[0] }}

-
- -
-
-

Summary

- -

Gas Consumption

-
    -
  • Total: {{ transaction[4] }}
    • -
  • WASM: {{ transaction[5] }}
    • -
  • ZK Circuits: {{ transaction[6] }}
    • -
  • Signatures: {{ transaction[7] }}
    • -
  • Deployments: {{ transaction[8] }}
    • -
-
+ +
+

Transaction Details

+
{{ transaction[0] }}
- + + + + + +
+ + +
+

Gas Consumption

+
    +
  • Total: {{ transaction[4] }}
    • +
  • WASM: {{ transaction[5] }}
    • +
  • ZK Circuits: {{ transaction[6] }}
    • +
  • Signatures: {{ transaction[7] }}
    • +
  • Deployments: {{ transaction[8] }}
    • +
+
+
{% endblock %}