diff --git a/server/anchor.py b/server/anchor.py index 375954e..0da3e4f 100644 --- a/server/anchor.py +++ b/server/anchor.py @@ -882,12 +882,15 @@ async def get_txn_search( if txn_type: sql += " AND txn.txntype = ?" params = (*params, txn_type) + # add order by clause + sql += " ORDER BY txn.seqno DESC" select_sql = (sql + " LIMIT ? OFFSET ?").format(select_fields) async with await self.query(select_sql, (*params, limit, offset)) as cursor: while True: rows = await cursor.fetchmany() for row in rows: - result.append(row) + # change append to insert + result.insert(0, row) if not rows: break if count: diff --git a/server/server.py b/server/server.py index 458c6af..1bbc3a1 100644 --- a/server/server.py +++ b/server/server.py @@ -59,6 +59,17 @@ async def index(request): "INFO_SITE_URL": INFO_SITE_URL, } +@ROUTES.get("/newdid") +@aiohttp_jinja2.template("newdid.html") +async def index(request): + return { + "REGISTER_NEW_DIDS": TRUST_ANCHOR._register_dids, + "LEDGER_INSTANCE_NAME": LEDGER_INSTANCE_NAME, + "WEB_ANALYTICS_SCRIPT": WEB_ANALYTICS_SCRIPT, + "INFO_SITE_TEXT": INFO_SITE_TEXT, + "INFO_SITE_URL": INFO_SITE_URL, + } + @ROUTES.get("/browse/{ledger_ident:.*}") @aiohttp_jinja2.template("ledger.html") @@ -131,10 +142,18 @@ async def ledger_json(request): if not TRUST_ANCHOR.ready: return not_ready() + count = await TRUST_ANCHOR.get_max_seqno(request.match_info["ledger_name"]) page = int(request.query.get("page", 1)) page_size = int(request.query.get("page_size", 100)) - start = (page - 1) * page_size + 1 - end = start + page_size - 1 + start = count - (page - 1) * page_size + if page_size > start: + end = 1 + else: + end = start - page_size + 1 + # original ends + # start = (page - 1) * page_size + 1 + # end = start + page_size - 1 + o_start = (page - 1) * page_size + 1 query = request.query.get("query") if query is not None and not query.strip(): query = None @@ -144,11 +163,12 @@ async def ledger_json(request): if txn_type is not None or query is not None: rows, count = await TRUST_ANCHOR.get_txn_search( - request.match_info["ledger_name"], query, txn_type, page_size, start - 1 + request.match_info["ledger_name"], query, txn_type, page_size, o_start - 1 ) else: rows = await TRUST_ANCHOR.get_txn_range( - request.match_info["ledger_name"], start, end + # ends swapped + request.match_info["ledger_name"], end, start ) count = await TRUST_ANCHOR.get_max_seqno(request.match_info["ledger_name"]) last_modified = None @@ -158,7 +178,8 @@ async def ledger_json(request): last_modified = max(last_modified, row[1]) if last_modified else row[1] except TypeError: last_modified = row[1] - results.append(json.loads(row[3])) + # change append to insert + results.insert(0, json.loads(row[3])) if not results and page > 1: data = {"detail": "Invalid page."} response = json_response(data, status=404) diff --git a/server/static/footer.html b/server/static/footer.html new file mode 100644 index 0000000..04deb77 --- /dev/null +++ b/server/static/footer.html @@ -0,0 +1,23 @@ + \ No newline at end of file diff --git a/server/static/header.html b/server/static/header.html index c9feb48..9153e69 100644 --- a/server/static/header.html +++ b/server/static/header.html @@ -1,23 +1,18 @@ - - -
-
- -
-

- {{ LEDGER_INSTANCE_NAME }} Blockchain Ledger -

-
-
+
+
diff --git a/server/static/include/css/index.css b/server/static/include/css/index.css deleted file mode 100644 index 3927608..0000000 --- a/server/static/include/css/index.css +++ /dev/null @@ -1,496 +0,0 @@ -body, input, select { - color: #222; - font-family: 'Open Sans', sans-serif; - font-size: 16px; - line-height: 1.45; - margin: 0; -} - - -header { - background-color: #1c6da6; - border-bottom: 2px solid #fcba19; - color: #fcba19; - padding: 10px 2rem 10px 2.2rem; -} -header h1 { - color: #e9f5ff; - display: inline-block; - margin: 0; - padding: 0; - vertical-align: -0.15em; -} -header a { - color: #e9f5ff; -} -header a.info-site { - color: #fcba19; -} -header h1 a:hover { - color: #9bf; -} -header p.lead { - display: inline-block; - margin-left: 3rem; -} - -main { - padding: 1rem 1rem; -} - -.row-outer { - display: flex; - flex-flow: row nowrap; - width: 100%; -} -.row-outer.anonymous { - display: block; -} - -.col-main { - flex: 1 1 auto; - padding: 1rem; -} -.anonymous .col-main { - padding-bottom: 0; -} -.col-tools { - flex: 1 0 25rem; - padding: 1rem; - width: 25rem; -} -.anonymous .col-tools { - width: auto; -} - -a, input[type=submit], button { - color: #1a5a96; - text-decoration: none -} -button { - font-size: inherit; -} - -a:hover, -a:focus, -button:hover, button:focus, -input[type=submit]:hover, -input[type=submit]:focus { - color: #0f3355; - text-decoration: underline; -} -a.tool, input[type=submit].tool { - font-size: 110%; -} - -.back-link { - display: inline-block; - margin-bottom: 0.5em; -} - -.form-group { - margin-bottom: 0.5rem; -} - -.tool-button, .tool-input { - background-color: #f0f3ff; - border: 1px solid #58a; - border-radius: 3px; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); - box-sizing: border-box; - display: inline-block; - line-height: 1.4; - margin: 0.2rem 0; -} -.tool-button { - padding: 0.3rem 0.6rem; -} -.tool-input { - padding: 0.1rem 0 0.2rem 0.4rem; -} -select.tool-input { - padding-right: 0.4rem; -} -.wallet-seed { - max-width: 25em; - width: 100%; -} -.tool-label { - color: #666; - display: block; - font-size: 90%; -} -.tool-label.inline { - display: inline; -} - -.tool-button:hover, .tool-button:focus { - background-color: #036; - color: #e9f5ff; - text-decoration: none; -} - -a.tool .left, .tool-button .left { - font-size: 90%; - margin-right: 0.4rem; -} - -form input[type=text] { - min-width: 250px; - background-color: white; -} - -small, .small { - font-size: 85%; -} - -.tag { - background-color: #fefdf8; - border: 1px solid #f9b714; - border-radius: 0.3em; - display: inline-block; - padding: 0.25em; -} - -h2 { - font-weight: 500; -} -h2 .fa { - font-size: 85%; - opacity: 0.9; - vertical-align: 2px; -} - -.panel { - margin-bottom: 1.5rem; - overflow: hidden; -} -.panel-heading, .panel-body { - overflow: hidden; - padding: 0.25rem 0.7rem; -} -.panel-body p { - margin: 0.5rem 0; -} -.panel-default { - background: #f0f3ff; - box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.02); -} -.panel-default .panel-heading { - background: #1c6da6; - border-bottom: 1px solid #eee; - color: #fafaec; -} -.panel-default > .panel-body { - border: 1px solid #e0e6ee; - border-radius: 0.5rem; - padding-top: 10px; -} -.panel-default > .panel-heading { - border-radius: 0.5rem 0.5rem 0 0; -} -.panel-default > .panel-heading + .panel-body { - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.panel-info { - background: #f0f3ff; - border: 1px solid #89a; - border-radius: 0.5rem; - box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.02); -} - -.panel-side { - background-color: #f7f6f6; - border: 2px solid #f0ecec; - border-radius: 0.5rem; - box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.02); -} -.panel-side .panel-heading { - color: #585555; -} -.panel-side .panel-heading::after { - background: #fdfdfd; - border-bottom: 1px solid #ebe6e6; - border-radius: 3px; - content: ' '; - display: block; - height: 3px; -} - -.panel-heading h2 { - padding: 0; - margin: 0; -} - -.top-label { - color: #555; - font-size: 95%; - font-weight: 600; - line-height: 1.6; -} -.tool-tag { - -background: rgba(254, 253, 237, 1.0); - border-radius: 2px; - -border: 1px solid rgba(215, 220, 255, 0.9); - color: #555; - display: inline-block; - font-size: 0.75rem; - font-weight: 600; - margin-left: 1rem; - padding: 1.5px 4px; - vertical-align: 0.1rem; -} - -.error { - color: #b55; -} -.warning { - color: #a83; -} - -.panel-node { - background: #fff; - border: 1px solid #ddd; - -box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08); -} -.node-status { - display: flex; - padding: 0.8rem; - position: relative; -} -.node-status:not(.template) + .node-status { - border-top: 1px solid #ddd; -} -.node-status-left { - flex: 0 1 25%; - margin: 0 10px 0 0; - overflow: hidden; - position: relative; - min-width: 90px; -} -.node-name { - font-size: 15px; - position: absolute; - text-align: center; - top: 34px; - width: 100%; - z-index: 2; -} -.nodeval-name { - color: #6A7593; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.node-indicator { - height: 90px; - margin: 0 auto; - width: 90px; -} -.node-status-right { - flex: 1 1 auto; - overflow: hidden; - word-wrap: break-word; -} - -.props { - font-size: 80%; - margin: 0; -} -.props dt { - display: none; -} -.props dd { - margin: 0; -} -.props label { - color: #888; -} - -.ledger-txns { - word-break: break-word; -} -.ledger-loading { - float: right; -} -.ledger-nav { - display: flex; - flex-flow: row wrap; -} -.nav-label { - display: inline-block; - opacity: 0.7; - font-weight: 600; - font-size: 90%; - min-width: 6em; -} -.count { - padding-left: 2em; -} -.nav-left { - flex: 1 0 auto; -} -.nav-right { - flex: 0 0 40%; - white-space: nowrap; -} -.clear-filter { - cursor: pointer; - margin-left: 6em; -} -.pagination { - border-radius: 4px; - display: inline-flex; - justify-content: flex-end; - list-style-type: none; - margin: 0.5em 0; - overflow: hidden; - padding: 0; - text-align: center; -} -.pagination .page-item:first-child { - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; -} -.pagination .page-item:last-child { - border-bottom-right-radius: 4px; - border-top-right-radius: 4px; -} -.pagination .page-item { - border: 1px solid #9bf; - display: block; - z-index: 1; -} -.pagination .page-link { - display: block; - min-width: 1.5em; - padding: 0.25em 0.8em; -} -.pagination .page-text { - cursor: default; - display: block; - padding: 0.25em 0.4em; -} -.pagination .page-item+.page-item { - margin-left: -1px; -} -.pagination .page-item.active { - background-color: #d1e1ff; - font-weight: bold; -} -.pagination .page-item.active .page-link { - color: #000; -} -.pagination .page-item.disabled { - border-color: #aaa; - color: #888; - z-index: 0; -} - -.ledger-data { - background-color: #fff; - border: 1px solid #9bd; - border-spacing: 0; - margin-top: 1em; - width: 100%; -} -.ledger-row:not(:last-child) td { - border-bottom: 1px solid #9bd; -} -.ledger-row td { - padding: 0.8em 0.5em; - vertical-align: top; -} -.ledger-row:nth-child(even) { - background: #e9f0fe; -} -.ledger-index { - width: 10%; -} -.ledger-index .number { - border: 1px transparent; - border-radius: 4px; - box-sizing: border-box; - display: block; - font-size: 90%; - padding: 0 0.5em; - text-align: right; - width: 100%; -} -.raw-data { - font-family: monospace; - font-size: 70%; - white-space: pre-wrap; - word-break: break-word; -} -.ledger-entry label { - opacity: 0.7; - font-weight: 600; - font-size: 90%; -} -.ledger-entry .line { - padding-left: 2em; - text-indent: -1em; -} -.ledger-entry .block { - padding-left: 2em; -} -.ledger-entry .block label { - display: block; - text-indent: -1em; -} -.ledger-entry .misc { - font-size: 90%; -} -.ledger-entry dl { - margin-bottom: 0; - margin-top: 0; - padding-top: 0; -} -.ledger-entry ul { - margin-top: 0; - padding-top: 0; - text-indent: 0; -} -.ledger-entry-title { - background: #9bd; - border-radius: 4px; - color: #f0f3ff; - font-size: 75%; - font-weight: bold; - margin-bottom: 0.25em; - padding: 1px 4px 2px; -} -.ledger-entry-title.active { - cursor: pointer; -} -.ledger-entry-title:not(:first-child) { - margin-top: 0.5em; -} -.ident { - font-family: monospace; - font-size: 80%; - font-variant-numeric: lining-nums tabular-nums; -} - -@media screen and (max-width: 900px) { - .row-outer { - display: block; - } - .col-tools { - padding-top: 0; - width: auto; - } -} - -.register-result, .register-error { - padding-top: 20px; - word-wrap: break-word; -} -.register-result code { - font-size: 85%; -} diff --git a/server/static/include/css/reset.css b/server/static/include/css/reset.css new file mode 100644 index 0000000..062def5 --- /dev/null +++ b/server/static/include/css/reset.css @@ -0,0 +1,94 @@ +html, +body, +div, +span, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +code, +img, +small, +strike, +strong, +sub, +sup, +dl, +dt, +dd, +ol, +ul, +li, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +section { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} diff --git a/server/static/include/css/styles.css b/server/static/include/css/styles.css new file mode 100644 index 0000000..a901216 --- /dev/null +++ b/server/static/include/css/styles.css @@ -0,0 +1,799 @@ +@charset "UTF-8"; +@import "/include/css/reset.css"; +@keyframes blink-animation { + to { + visibility: hidden; + } +} +@-webkit-keyframes blink-animation { + to { + visibility: hidden; + } +} +@keyframes blink-animation-2 { + to { + opacity: 50%; + } +} +@-webkit-keyframes blink-animation-2 { + to { + opacity: 50%; + } +} +@keyframes lds-grid { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.blink { + -webkit-animation: blink-animation 0.5s steps(5, start) infinite; + animation: blink-animation 0.5s steps(5, start) infinite; + filter: drop-shadow(0px 1px 1px #6eff3a); +} + +.orange { + filter: drop-shadow(0px 1px 1px rgba(255, 236, 85, 0.6117647059)); +} + +.node-status:nth-child(odd) .blink { + -webkit-animation: blink-animation-2 0.3s steps(5, start) infinite; + animation: blink-animation-2 0.3s steps(5, start) infinite; +} + +.nodes-panel .node-status:nth-child(1) .blink { + animation-delay: 300ms; +} +.nodes-panel .node-status:nth-child(2) .blink { + animation-delay: 600ms; +} +.nodes-panel .node-status:nth-child(3) .blink { + animation-delay: 900ms; +} +.nodes-panel .node-status:nth-child(4) .blink { + animation-delay: 1200ms; +} +.nodes-panel .node-status:nth-child(5) .blink { + animation-delay: 1500ms; +} +.nodes-panel .node-status:nth-child(6) .blink { + animation-delay: 1800ms; +} +.nodes-panel .node-status:nth-child(7) .blink { + animation-delay: 2100ms; +} +.nodes-panel .node-status:nth-child(8) .blink { + animation-delay: 2400ms; +} +.nodes-panel .node-status:nth-child(9) .blink { + animation-delay: 2700ms; +} +.nodes-panel .node-status:nth-child(10) .blink { + animation-delay: 3000ms; +} + +body { + font-family: "Open Sans", sans-serif; + font-optical-sizing: auto; + font-weight: 300; + font-style: normal; + font-variation-settings: "wdth" 100; + font-size: 16px; + line-height: 1.45; + margin: 0; +} +body:has(.raw_data) { + overflow: hidden; +} + +header { + background-color: #1c6da6; + display: flex; + justify-content: center; +} +header .container { + max-width: 1140px; + flex: 1; + display: flex; + flex-wrap: wrap; +} +header .logo { + margin-right: auto; + color: #fff; + padding: 20px 50px; + margin-left: 20px; +} +header .logo span { + display: inline-block; +} +header .logo .logo-img img { + width: 70px; +} +header .logo .logo-text { + color: #fff; + bottom: 0.2rem; + left: 0.4rem; + position: relative; + font-size: 1.8rem; + font-weight: 600; + line-height: 1; +} +header nav { + align-self: end; + margin-right: 20px; +} +header ul { + display: flex; + flex-wrap: wrap; + text-align: center; +} +header li { + flex: 1 1 0; + list-style-type: none; + display: inline-block; + box-sizing: border-box; + vertical-align: bottom; +} +header li a { + display: flex; + flex: 1 1 0; + flex-wrap: nowrap; + text-decoration: none; + font-weight: 600; + color: #fff; + transition: all 0.3s ease 0s; + padding: 1em 1.75em; +} +header li a:hover { + background-color: #15396c; +} + +a { + text-decoration: none; +} + +input[type=submit] { + text-decoration: none; +} + +button { + text-decoration: none; + font-size: inherit; +} + +.error { + color: #b55; +} + +.warning { + color: #a83; +} + +.wrapper_outer { + padding: 3rem 2rem; + max-width: 1140px; + margin: 0 auto; +} + +.nodes-panel { + display: flex; + justify-content: center; + flex-flow: row; + flex-wrap: wrap; + gap: 2rem; +} +.nodes-panel .node-status { + display: flex; + flex-direction: row; + padding: 0.8rem; + box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.242); + border: 1px solid rgb(230, 230, 230); + background-color: rgb(250, 250, 250); + border-radius: 6px; + justify-content: center; + align-items: center; + width: 500px; + min-height: 250px; +} +.nodes-panel .node-status.dead { + border: 1px solid #b55; + box-shadow: 0 0 3px #b55; + background-color: rgb(255, 250, 250); +} +.nodes-panel .node-status-left { + padding: 0 2rem; + flex: 0; +} +.nodes-panel .node-status-left .node-indicator { + width: 90px; +} +.nodes-panel .node-status-right { + word-wrap: break-word; + padding: 0 0.8rem; + margin-right: 0.4rem; + flex: 1; +} +.nodes-panel .node-status-right .props { + font-size: 80%; + font-weight: 500; + margin: 0; +} +.nodes-panel .node-status-right .props dt { + display: none; +} +.nodes-panel .node-status-right .props dd { + padding: 0.6rem 0.4rem; +} +.nodes-panel .node-status-right .props dd:not(:last-child) { + border-bottom: 1px dashed rgb(182, 182, 182); +} +.nodes-panel .node-status-right .props dd .nodeval-did { + font-family: monospace; + font-weight: 300; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 90%; + word-wrap: normal; + vertical-align: bottom; +} +.nodes-panel .node-status-right .props .label { + color: #919191; +} + +.not_ready { + padding: 0 2rem; + display: flex; + align-items: center; +} + +.pagination { + border-radius: 4px; + display: inline-flex; + justify-content: flex-end; + list-style-type: none; + margin: 0.5em 0; + overflow: hidden; + padding: 0; + text-align: center; +} +.pagination .page-item { + border: 1px solid #919191; + display: block; + z-index: 1; +} +.pagination .page-item:first-child { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} +.pagination .page-item:last-child { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} +.pagination .page-item + .page-item { + margin-left: -1px; +} +.pagination .page-link { + display: block; + min-width: 1.5em; + padding: 0.25em 0.8em; + color: inherit; +} +.pagination .page-text { + cursor: default; + display: block; + padding: 0.25em 0.4em; +} +.pagination .page-item.active { + background-color: rgb(196, 196, 196); + box-shadow: inset 0 0px 5px 1px rgba(0, 0, 0, 0.12); +} +.pagination .page-item.active .page-link { + color: #333; +} +.pagination .page-item.disabled { + border-color: #aaa; + color: #919191; + z-index: 0; +} + +.register-result { + padding-top: 20px; + word-wrap: break-word; +} +.register-result code { + font-size: 85%; +} + +.register-error { + padding-top: 20px; + word-wrap: break-word; +} + +.ledger_loading { + font-weight: 600; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.lds-grid { + box-sizing: border-box; + display: inline-block; + position: relative; + width: 80px; + height: 80px; + scale: 0.5; +} +.lds-grid div { + box-sizing: border-box; + position: absolute; + width: 16px; + height: 16px; + border-radius: 50%; + background: currentColor; + animation: lds-grid 1.2s linear infinite; +} +.lds-grid div:nth-child(1) { + top: 8px; + left: 8px; + animation-delay: 0s; +} +.lds-grid div:nth-child(2) { + top: 8px; + left: 32px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(3) { + top: 8px; + left: 56px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(4) { + top: 32px; + left: 8px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(5) { + top: 32px; + left: 32px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(6) { + top: 32px; + left: 56px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(7) { + top: 56px; + left: 8px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(8) { + top: 56px; + left: 32px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(9) { + top: 56px; + left: 56px; + animation-delay: -1.6s; +} + +.lds-ring { + box-sizing: border-box; + display: block; + position: relative; + width: 80px; + height: 80px; + margin: 0 auto; + scale: 0.5; +} +.lds-ring div { + box-sizing: border-box; + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 8px solid currentColor; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: currentColor transparent transparent transparent; +} +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} + +.button { + margin-top: 2rem; + margin-bottom: 2rem; + overflow: visible; + display: block; +} + +.button-link { + padding: 1rem 2rem; + color: #fff; + background-color: #1c6da6; + text-transform: uppercase; + display: inline-block; + text-wrap: nowrap; +} +.button-link:hover { + background-color: #15396c; +} + +.detail-hero { + margin-top: 2rem; + display: flex; + justify-content: center; + flex-wrap: wrap; +} +.detail-hero > div { + margin: 0rem 2rem; + flex: 0 0 25%; +} +.detail-hero .detail-hero-left { + display: flex; + justify-content: center; + align-items: start; + flex-direction: column; + padding: 0 2rem; +} +.detail-hero .detail-hero-right { + display: flex; + justify-content: center; + align-items: center; + padding: 0 2rem; +} +.detail-hero .detail-hero-right img { + flex: 1; + max-width: 500px; +} + +.ledger_wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 2rem; +} +.ledger_wrapper .ledger_main { + margin-top: 2rem; +} +@media screen and (max-width: 1400px) { + .ledger_wrapper .ledger_main { + margin-right: 2rem; + margin-left: 2rem; + overflow: hidden; + } +} +.ledger_wrapper .ledger_main .ledger-heading { + font-weight: 600; + font-size: 1.6rem; + margin-right: 2rem; +} +.ledger_wrapper .ledger_main .ledger-heading .ledger_name { + font-size: 1rem; + margin-left: 1rem; + color: #1c6da6; +} +.ledger_wrapper .ledger_main .ledger_nav_top { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: start; + margin-right: 2rem; + padding: 1rem 0.2rem; + gap: 1rem; +} +.ledger_wrapper .ledger_main .ledger_nav_top a { + font-weight: 500; +} +.ledger_wrapper .ledger_main .ledger_nav_top input, +.ledger_wrapper .ledger_main .ledger_nav_top select { + border: 1px solid #919191; + border-radius: 0.2rem; + padding: 0.8rem 1.2rem; + width: 200px; + font-weight: 600; +} +.ledger_wrapper .ledger_main .ledger_nav_top select { + background: url("data:image/svg+xml,") no-repeat; + background-position: calc(100% - 0.75rem) center; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + padding-right: 2rem; +} +.ledger_wrapper .ledger_main .ledger_nav_top .clear_filter { + border: 1px solid #919191; + border-radius: 0.2rem; + padding: 0 1.2rem; + display: flex; + align-items: center; + background-color: #b55; + color: #fff; + font-weight: 600; + font-size: 90%; + cursor: pointer; +} +.ledger_wrapper .ledger_main .ledger_nav_bottom { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-between; + padding: 0.4rem 1.4rem; + align-items: center; + font-weight: 500; +} +.ledger_wrapper .ledger_main .ledger_nav_bottom .ledger_count { + margin-right: 2rem; +} +.ledger_wrapper .ledger_main .txn_table_main { + display: table; + border-left: 1px solid #919191; + background-clip: border-box; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + overflow: hidden; + font-size: 90%; + box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.12); +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_header { + display: table-header-group; + background-color: #1c6da6; + color: #fff; +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_header .txn_table_heading { + display: table-cell; + font-weight: 600; + padding: 0.4rem 1.2rem; + text-wrap: nowrap; +} +@media screen and (max-width: 650px) { + .ledger_wrapper .ledger_main .txn_table_main .txn_table_header .txn_table_heading:last-child { + display: none; + } +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_entries { + display: table-row; + font-weight: 500; + transition: background-color 0.5s; + cursor: pointer; + position: relative; +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_entries:last-child::after { + border-bottom-left-radius: 6px; +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_entries::after { + content: ""; + border-bottom: 1px solid #919191; + position: absolute; + display: block; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-sizing: border-box; +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_entries.active { + background-color: rgb(235, 235, 235); + box-shadow: inset 0 0px 3px 1px rgba(0, 0, 0, 0.09); +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_entries:hover { + background-color: rgb(225, 225, 225); +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_entries .txn_table_entry { + display: table-cell; + padding: 1.2rem; + text-wrap: nowrap; + vertical-align: middle; +} +.ledger_wrapper .ledger_main .txn_table_main .txn_table_entries .txn_table_entry:last-child { + max-width: 500px; + text-overflow: ellipsis; + overflow: hidden; +} +@media screen and (max-width: 650px) { + .ledger_wrapper .ledger_main .txn_table_main .txn_table_entries .txn_table_entry:last-child { + display: none; + } +} +.ledger_wrapper .txn_table_right { + margin-top: 2rem; + margin-bottom: 2rem; + padding: 2rem; + border: 1px solid #89a; + border-radius: 6px; + box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.12); + background-color: white; + text-wrap: wrap; + word-break: break-all; + width: 550px; +} +.ledger_wrapper .txn_table_right .detail_heading { + font-size: 1.2rem; + font-weight: 600; +} +.ledger_wrapper .txn_table_right .detail_close { + float: right; + position: relative; + top: -40px; + right: 10px; + font-size: 200%; + cursor: pointer; +} +.ledger_wrapper .txn_table_right .detail_close:after { + display: inline-block; + content: "×"; +} +.ledger_wrapper .txn_table_right .detail_txn_no { + margin-top: 1rem; +} +.ledger_wrapper .txn_table_right .detail_txn_no span { + background-color: #1c6da6; + display: inline-block; + width: auto; + padding: 0.2rem 0.5rem; + color: #fff; + border-radius: 0.3rem; +} +.ledger_wrapper .txn_table_right .detail_txn_no span:before { + content: "# "; +} +.ledger_wrapper .txn_table_right .raw_data { + width: 100%; + height: 100%; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + top: 0; + left: 0; + z-index: 101; + background-color: rgba(0, 0, 0, 0.75); +} +.ledger_wrapper .txn_table_right .raw_data .raw_data_div { + width: 90%; + max-width: 1440px; +} +.ledger_wrapper .txn_table_right .raw_data .raw_data_div .close_pre { + display: flex; + float: right; + position: relative; + top: 10px; + right: 10px; + z-index: 102; + font-size: 200%; + cursor: pointer; + background-color: rgb(226, 26, 26); + padding: 0.3rem; + line-height: 1.1rem; + border-radius: 0.2rem; +} +.ledger_wrapper .txn_table_right .raw_data .raw_data_div .close_pre:after { + content: "×"; + color: white; +} +.ledger_wrapper .txn_table_right .raw_data .raw_data_div .close_pre:hover { + background-color: darkred; +} +.ledger_wrapper .txn_table_right .raw_data .raw_data_div .raw_text_div { + border-radius: 6px; + border: 1px solid #fff; + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 0 25px 3px rgba(0, 0, 0, 0.12); + background-color: #fff; + padding-left: 2rem; + padding-bottom: 2rem; +} +.ledger_wrapper .txn_table_right .raw_data .raw_data_div .raw_text_div pre { + max-height: 80vh; + font-size: 90%; + height: 100%; + width: 100%; + font-family: monospace; + text-wrap: wrap; + overflow-y: auto; + box-sizing: border-box; + padding-right: 50px; +} +.ledger_wrapper .txn_table_right label { + color: #919191; + font-weight: 600; + font-size: 85%; +} +.ledger_wrapper .txn_table_right span { + display: block; + font-size: 95%; +} +.ledger_wrapper .txn_table_right div { + margin: 0.4rem 0; + font-weight: 500; +} +.ledger_wrapper .txn_table_right .detail_txn_button { + margin-top: 2rem; + padding: 0.6rem 1rem; + color: #fff; + background-color: #1c6da6; + font-weight: 600; + cursor: pointer; +} +.ledger_wrapper .txn_table_right .detail_txn_button:hover { + background-color: #15396c; +} +.ledger_wrapper .txn_table_right .detail_txn_section { + border-bottom: 1px solid #919191; + text-align: right; + color: #919191; + font-weight: 600; + font-size: 85%; + margin: 1rem 0; + padding: 0.4rem; +} +.ledger_wrapper .txn_table_right .detail_txn_section.arrow-down { + cursor: pointer; +} +.ledger_wrapper .txn_table_right .detail_txn_section.arrow-down:before { + content: "↓"; +} +.ledger_wrapper .txn_table_right .detail_txn_section.arrow-up { + cursor: pointer; +} +.ledger_wrapper .txn_table_right .detail_txn_section.arrow-up:before { + content: "↑"; +} + +main { + min-height: calc(100vh - 200px); +} + +footer { + background-color: #15396c; + color: #fff; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + min-height: 100px; + padding: 2rem 0; +} +footer .footer_wrapper { + flex: 1; + max-width: 1440px; + display: flex; + justify-content: space-around; +} +footer .footer_wrapper li { + font-weight: 600; +} +footer .footer_wrapper li a { + font-weight: 300; + color: white; + text-decoration: underline; +} +footer .footer_wrapper li:first-child { + margin-bottom: 0.8rem; +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/server/static/include/css/styles.css.map b/server/static/include/css/styles.css.map new file mode 100644 index 0000000..ba9949d --- /dev/null +++ b/server/static/include/css/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAEQ;AAgBR;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IAEE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;;AAKJ;EACE;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAOE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAMR;EACE,aAjFiB;EAkFjB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE,kBA9Fc;EA+Fd;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA,OApHU;EAqHV;EACA;;AAEA;EACE;;AAIA;EACE;;AAIJ;EACE,OAnIQ;EAoIR;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,OArKQ;EAsKR;EACA;;AAEA;EACE,kBAhKW;;;AAsKnB;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE,OA5LY;;;AA+Ld;EACE,OA/Lc;;;AAkMhB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,kBA5MU;EA6MV;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE,aA9PS;EA+PT;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,OA9QK;;;AAoRb;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAWE;EACA;EACA;;AAZA;EACE;EACA;;AAGF;EACE;EACA;;AAQA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;;AAEA;EACE,OA5US;;AAiVf;EACE;EACA,OApVS;EAqVT;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA,OAzeY;EA0eZ,kBAjec;EAked;EACA;EACA;;AAEA;EACE,kBAtee;;;AA0enB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA,OAliBQ;;AAsiBZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBAnlBM;EAolBN,OAtlBM;EAulBN;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,kBA9mBQ;EA+mBR,OAxnBM;;AA0nBN;EACE;EACA;EACA;EACA;;AAGE;EADF;IAEI;;;AAMR;EACE;EAGA;EACA;EACA;EACA;;AACA;EACE;;AAGF;EACE;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAQZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;;AAEA;EACE,kBAztBQ;EA0tBR;EACA;EACA;EACA,OAtuBM;EAuuBN;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EAEA,kBA7xBI;EA8xBJ;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,aA9xBO;EA+xBP;EACA;EACA;EACA;;AAMR;EACE,OA7yBO;EA8yBP;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA,OAn0BQ;EAo0BR,kBA3zBU;EA4zBV;EACA;;AAEA;EACE,kBA/zBW;;AAm0Bf;EACE;EACA;EACA,OA50BO;EA60BP;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;;AAOV;EACE;;;AAGF;EACE,kBAp2BiB;EAq2BjB,OA/2BY;EAg3BZ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE","file":"styles.css"} \ No newline at end of file diff --git a/server/static/include/css/styles.scss b/server/static/include/css/styles.scss new file mode 100644 index 0000000..24813ee --- /dev/null +++ b/server/static/include/css/styles.scss @@ -0,0 +1,912 @@ +// sass --watch server/static/include/css/styles.scss server/static/include/css/styles.css + +@import "/include/css/reset.css"; + +$color_white: #fff; +$color_pale: #e9f5ff; +$color_error: #b55; +$color_warning: #a83; +$color_gray: #919191; +$color_darkgray: #333; +$color_black: #000; +$font-family_sans: "Open Sans", sans-serif; +$font-family_mono: monospace; +$color_primary: #1c6da6; +$color_background: #15396c; +$color_shadow: rgba(0, 0, 0, 0.242); +$color_light: rgb(250, 250, 250); + +@keyframes blink-animation { + to { + visibility: hidden; + } +} + +@-webkit-keyframes blink-animation { + to { + visibility: hidden; + } +} + +@keyframes blink-animation-2 { + to { + opacity: 50%; + } +} + +@-webkit-keyframes blink-animation-2 { + to { + opacity: 50%; + } +} + +@keyframes lds-grid { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } +} + +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +/*# sourceMappingURL=index.css.map */ +.blink { + -webkit-animation: blink-animation 0.5s steps(5, start) infinite; + animation: blink-animation 0.5s steps(5, start) infinite; + filter: drop-shadow(0px 1px 1px #6eff3a); +} + +.orange { + filter: drop-shadow(0px 1px 1px #ffec559c); +} + +.node-status:nth-child(odd) { + .blink { + -webkit-animation: blink-animation-2 0.3s steps(5, start) infinite; + animation: blink-animation-2 0.3s steps(5, start) infinite; + } +} + +.nodes-panel { + @for $i from 1 through 10 { + .node-status:nth-child(#{$i}) { + .blink { + animation-delay: #{$i * 300}ms; + } + } + } +} + +body { + font-family: $font-family_sans; + font-optical-sizing: auto; + font-weight: 300; + font-style: normal; + font-variation-settings: "wdth" 100; + font-size: 16px; + line-height: 1.45; + margin: 0; + + &:has(.raw_data) { + overflow: hidden; + } +} + +header { + background-color: $color_primary; + display: flex; + justify-content: center; + + .container { + max-width: 1140px; + flex: 1; + display: flex; + flex-wrap: wrap; + } + + .logo { + margin-right: auto; + color: $color_white; + padding: 20px 50px; + margin-left: 20px; + + span { + display: inline-block; + } + + .logo-img { + img { + width: 70px; + } + } + + .logo-text { + color: $color_white; + bottom: 0.2rem; + left: 0.4rem; + position: relative; + font-size: 1.8rem; + font-weight: 600; + line-height: 1; + } + } + + nav { + align-self: end; + margin-right: 20px; + } + + ul { + display: flex; + flex-wrap: wrap; + text-align: center; + } + + li { + flex: 1 1 0; + list-style-type: none; + display: inline-block; + box-sizing: border-box; + vertical-align: bottom; + + a { + display: flex; + flex: 1 1 0; + flex-wrap: nowrap; + text-decoration: none; + font-weight: 600; + color: $color_white; + transition: all 0.3s ease 0s; + padding: 1em 1.75em; + + &:hover { + background-color: $color_background; + } + } + } +} + +a { + text-decoration: none; +} + +input[type="submit"] { + text-decoration: none; +} + +button { + text-decoration: none; + font-size: inherit; +} + +.error { + color: $color_error; +} + +.warning { + color: $color_warning; +} + +.wrapper_outer { + padding: 3rem 2rem; + max-width: 1140px; + margin: 0 auto; +} + +.nodes-panel { + display: flex; + justify-content: center; + flex-flow: row; + flex-wrap: wrap; + gap: 2rem; + + .node-status { + display: flex; + flex-direction: row; + padding: 0.8rem; + box-shadow: 0 5px 15px -5px $color_shadow; + border: 1px solid rgb(230, 230, 230); + background-color: $color_light; + border-radius: 6px; + justify-content: center; + align-items: center; + width: 500px; + min-height: 250px; + + &.dead { + border: 1px solid $color_error; + box-shadow: 0 0 3px $color_error; + background-color: rgb(255, 250, 250); + } + } + + .node-status-left { + padding: 0 2rem; + flex: 0; + + .node-indicator { + width: 90px; + } + } + + .node-status-right { + word-wrap: break-word; + padding: 0 0.8rem; + margin-right: 0.4rem; + flex: 1; + + .props { + font-size: 80%; + font-weight: 500; + margin: 0; + + dt { + display: none; + } + + dd { + padding: 0.6rem 0.4rem; + + &:not(:last-child) { + border-bottom: 1px dashed rgb(182, 182, 182); + } + + .nodeval-did { + font-family: $font-family_mono; + font-weight: 300; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 90%; + word-wrap: normal; + vertical-align: bottom; + } + } + + .label { + color: $color_gray; + } + } + } +} + +.not_ready { + padding: 0 2rem; + display: flex; + align-items: center; +} + +.pagination { + border-radius: 4px; + display: inline-flex; + justify-content: flex-end; + list-style-type: none; + margin: 0.5em 0; + overflow: hidden; + padding: 0; + text-align: center; + + .page-item { + &:first-child { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; + } + + &:last-child { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; + } + + border: 1px solid $color_gray; + display: block; + z-index: 1; + + + { + .page-item { + margin-left: -1px; + } + } + } + + .page-link { + display: block; + min-width: 1.5em; + padding: 0.25em 0.8em; + color: inherit; + } + + .page-text { + cursor: default; + display: block; + padding: 0.25em 0.4em; + } + + .page-item { + &.active { + background-color: rgb(196, 196, 196); + box-shadow: inset 0 0px 5px 1px rgba(0, 0, 0, 0.12); + + .page-link { + color: $color_darkgray; + } + } + } + + .page-item.disabled { + border-color: #aaa; + color: $color_gray; + z-index: 0; + } +} + +.register-result { + padding-top: 20px; + word-wrap: break-word; + + code { + font-size: 85%; + } +} + +.register-error { + padding-top: 20px; + word-wrap: break-word; +} + +.ledger_loading { + font-weight: 600; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.lds-grid { + box-sizing: border-box; + display: inline-block; + position: relative; + width: 80px; + height: 80px; + scale: 0.5; + + div { + box-sizing: border-box; + position: absolute; + width: 16px; + height: 16px; + border-radius: 50%; + background: currentColor; + animation: lds-grid 1.2s linear infinite; + + &:nth-child(1) { + top: 8px; + left: 8px; + animation-delay: 0s; + } + + &:nth-child(2) { + top: 8px; + left: 32px; + animation-delay: -0.4s; + } + + &:nth-child(3) { + top: 8px; + left: 56px; + animation-delay: -0.8s; + } + + &:nth-child(4) { + top: 32px; + left: 8px; + animation-delay: -0.4s; + } + + &:nth-child(5) { + top: 32px; + left: 32px; + animation-delay: -0.8s; + } + + &:nth-child(6) { + top: 32px; + left: 56px; + animation-delay: -1.2s; + } + + &:nth-child(7) { + top: 56px; + left: 8px; + animation-delay: -0.8s; + } + + &:nth-child(8) { + top: 56px; + left: 32px; + animation-delay: -1.2s; + } + + &:nth-child(9) { + top: 56px; + left: 56px; + animation-delay: -1.6s; + } + } +} + +.lds-ring { + box-sizing: border-box; + display: block; + position: relative; + width: 80px; + height: 80px; + margin: 0 auto; + scale: 0.5; + + div { + box-sizing: border-box; + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 8px solid currentColor; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: currentColor transparent transparent transparent; + + &:nth-child(1) { + animation-delay: -0.45s; + } + + &:nth-child(2) { + animation-delay: -0.3s; + } + + &:nth-child(3) { + animation-delay: -0.15s; + } + } +} + +.button { + margin-top: 2rem; + margin-bottom: 2rem; + overflow: visible; + display: block; +} + +.button-link { + padding: 1rem 2rem; + color: $color_white; + background-color: $color_primary; + text-transform: uppercase; + display: inline-block; + text-wrap: nowrap; + + &:hover { + background-color: $color_background; + } +} + +.detail-hero { + margin-top: 2rem; + display: flex; + justify-content: center; + flex-wrap: wrap; + + > div { + margin: 0rem 2rem; + flex: 0 0 25%; + } + + .detail-hero-left { + display: flex; + justify-content: center; + align-items: start; + flex-direction: column; + padding: 0 2rem; + } + + .detail-hero-right { + display: flex; + justify-content: center; + align-items: center; + padding: 0 2rem; + + img { + flex: 1; + max-width: 500px; + } + } +} + +.ledger_wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 2rem; + + .ledger_main { + margin-top: 2rem; + + @media screen and (max-width: 1400px) { + margin-right: 2rem; + margin-left: 2rem; + overflow: hidden; + } + + .ledger-heading { + font-weight: 600; + font-size: 1.6rem; + margin-right: 2rem; + + .ledger_name { + font-size: 1rem; + margin-left: 1rem; + color: $color_primary; + } + } + + .ledger_nav_top { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: start; + margin-right: 2rem; + padding: 1rem 0.2rem; + gap: 1rem; + + a { + font-weight: 500; + } + + input, + select { + border: 1px solid $color_gray; + border-radius: 0.2rem; + padding: 0.8rem 1.2rem; + width: 200px; + font-weight: 600; + } + + select { + background: url("data:image/svg+xml,") + no-repeat; + background-position: calc(100% - 0.75rem) center; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + padding-right: 2rem; + } + + .clear_filter { + border: 1px solid $color_gray; + border-radius: 0.2rem; + padding: 0 1.2rem; + display: flex; + align-items: center; + background-color: $color_error; + color: $color_white; + font-weight: 600; + font-size: 90%; + cursor: pointer; + } + } + + .ledger_nav_bottom { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-between; + padding: 0.4rem 1.4rem; + align-items: center; + font-weight: 500; + + .ledger_count { + margin-right: 2rem; + } + } + + .txn_table_main { + display: table; + border-left: 1px solid $color_gray; + background-clip: border-box; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + overflow: hidden; + font-size: 90%; + box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.12); + + .txn_table_header { + display: table-header-group; + background-color: $color_primary; + color: $color_white; + + .txn_table_heading { + display: table-cell; + font-weight: 600; + padding: 0.4rem 1.2rem; + text-wrap: nowrap; + + &:last-child { + @media screen and (max-width: 650px) { + display: none; + } + } + } + } + + .txn_table_entries { + display: table-row; + // border: 1px solid black; + // box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.15); + font-weight: 500; + transition: background-color 0.5s; + cursor: pointer; + position: relative; + &:last-child::after { + border-bottom-left-radius: 6px; + } + + &::after { + content: ""; + // background-color: $color_shadow; + border-bottom: 1px solid $color_gray; + // border-left: 1px solid $color_gray; + position: absolute; + display: block; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + } + + &.active { + background-color: rgb(235, 235, 235); + box-shadow: inset 0 0px 3px 1px rgba(0, 0, 0, 0.09); + } + + &:hover { + background-color: rgb(225, 225, 225); + } + + .txn_table_entry { + display: table-cell; + padding: 1.2rem; + text-wrap: nowrap; + vertical-align: middle; + + &:last-child { + max-width: 500px; + text-overflow: ellipsis; + overflow: hidden; + + @media screen and (max-width: 650px) { + display: none; + } + } + } + } + } + } + + .txn_table_right { + margin-top: 2rem; + margin-bottom: 2rem; + padding: 2rem; + border: 1px solid #89a; + border-radius: 6px; + box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.12); + background-color: white; + text-wrap: wrap; + word-break: break-all; + width: 550px; + + .detail_heading { + font-size: 1.2rem; + font-weight: 600; + } + + .detail_close { + float: right; + position: relative; + top: -40px; + right: 10px; + font-size: 200%; + cursor: pointer; + + &:after { + display: inline-block; + content: "\00d7"; + } + } + + .detail_txn_no { + margin-top: 1rem; + + span { + background-color: $color_primary; + display: inline-block; + width: auto; + padding: 0.2rem 0.5rem; + color: $color_white; + border-radius: 0.3rem; + + &:before { + content: "# "; + } + } + } + + .raw_data { + width: 100%; + height: 100%; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + top: 0; + left: 0; + z-index: 101; + background-color: rgba(0, 0, 0, 0.75); + + .raw_data_div { + width: 90%; + max-width: 1440px; + + .close_pre { + display: flex; + float: right; + position: relative; + top: 10px; + right: 10px; + z-index: 102; + font-size: 200%; + cursor: pointer; + background-color: rgb(226, 26, 26); + padding: 0.3rem; + line-height: 1.1rem; + border-radius: 0.2rem; + + &:after { + content: "\00d7"; + color: white; + } + + &:hover { + background-color: darkred; + } + } + + .raw_text_div { + border-radius: 6px; + border: 1px solid $color_white; + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), + 0 0 25px 3px rgba(0, 0, 0, 0.12); + background-color: $color_white; + padding-left: 2rem; + padding-bottom: 2rem; + + pre { + max-height: 80vh; + font-size: 90%; + height: 100%; + width: 100%; + font-family: $font-family_mono; + text-wrap: wrap; + overflow-y: auto; + box-sizing: border-box; + padding-right: 50px; + } + } + } + } + + label { + color: $color_gray; + font-weight: 600; + font-size: 85%; + } + + span { + display: block; + font-size: 95%; + } + + div { + margin: 0.4rem 0; + font-weight: 500; + } + + .detail_txn_button { + margin-top: 2rem; + padding: 0.6rem 1rem; + color: $color_white; + background-color: $color_primary; + font-weight: 600; + cursor: pointer; + + &:hover { + background-color: $color_background; + } + } + + .detail_txn_section { + border-bottom: 1px solid $color_gray; + text-align: right; + color: $color_gray; + font-weight: 600; + font-size: 85%; + margin: 1rem 0; + padding: 0.4rem; + + &.arrow-down { + cursor: pointer; + + &:before { + content: "\2193"; + } + } + + &.arrow-up { + cursor: pointer; + + &:before { + content: "\2191"; + } + } + } + } +} + +main { + min-height: calc(100vh - 200px); +} + +footer { + background-color: $color_background; + color: $color_white; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + min-height: 100px; + padding: 2rem 0; + + .footer_wrapper { + flex: 1; + max-width: 1440px; + display: flex; + justify-content: space-around; + + li { + font-weight: 600; + + a { + font-weight: 300; + color: white; + text-decoration: underline; + } + + &:first-child { + margin-bottom: 0.8rem; + } + } + } +} diff --git a/server/static/include/img/domain.png b/server/static/include/img/domain.png new file mode 100644 index 0000000..fe359ed Binary files /dev/null and b/server/static/include/img/domain.png differ diff --git a/server/static/include/img/ledger.png b/server/static/include/img/ledger.png new file mode 100644 index 0000000..3e253f3 Binary files /dev/null and b/server/static/include/img/ledger.png differ diff --git a/server/static/include/js/index.js b/server/static/include/js/index.js index 2d0c110..d59292d 100644 --- a/server/static/include/js/index.js +++ b/server/static/include/js/index.js @@ -11,7 +11,8 @@ var app = new Vue({ register_new_dids: false, loading: false, status: null, - syncing: false + syncing: false, + ticker: null }, computed: { role_options: function () { @@ -22,6 +23,10 @@ var app = new Vue({ }, mounted: function () { this.fetchStatus(); + // this.timer = setInterval(this.fetchStatus, 1000); + }, + beforeDestroy() { + clearInterval(this.ticker); }, methods: { fetchStatus: function () { @@ -159,6 +164,6 @@ var app = new Vue({ self.loading = false; } ); - } + } } }); diff --git a/server/static/include/js/ledger.js b/server/static/include/js/ledger.js index 3ad1cc1..531498a 100644 --- a/server/static/include/js/ledger.js +++ b/server/static/include/js/ledger.js @@ -73,6 +73,7 @@ var app = new Vue({ reqno: 0, txn_type: '', txns: [], + detailSelected: '' }, mounted: function () { if (window.history && history.pushState) { @@ -102,6 +103,9 @@ var app = new Vue({ } }, methods: { + detailClick: function (item) { + this.detailSelected = item; + }, load: function () { this.loadPageParams(); this.loadPage(); @@ -142,6 +146,7 @@ var app = new Vue({ }, showEntry: function (ident) { this.navToPage(ident); + this.detailSelected = ''; }, showLedger: function (value) { this.ledger = value; @@ -149,6 +154,7 @@ var app = new Vue({ }, updateLedger: function () { this.navToPage(null, { page: 1, query: this.query, txn_type: this.txn_type }); + this.detailSelected = ''; }, updateQuery: function (q) { this.query = q; @@ -156,6 +162,7 @@ var app = new Vue({ }, clearFilter: function () { this.navToPage(null, { page: 1, query: '', txn_type: '' }); + this.detailSelected = ''; }, entryUrl: function (ident) { var url = '/browse/' + this.ledger; @@ -281,6 +288,9 @@ var app = new Vue({ }; this.loadTxns(data.results); } + if (this.nav.pages == null) { + this.detailClick(this.txns[0]); + }; this.error = false; this.loaded = true; this.loading = false; diff --git a/server/static/index.html b/server/static/index.html index 4fdc6db..c80937f 100644 --- a/server/static/index.html +++ b/server/static/index.html @@ -1,244 +1,206 @@ - - - - - - {{ LEDGER_INSTANCE_NAME }} Blockchain Ledger - - - - - - - + + + {% include 'meta.html' %} {% include 'analytics.html' %} + {% include 'header.html' %} {% raw %}
-
-
-
{% endraw %} - + {% include 'footer.html' %} - + \ No newline at end of file diff --git a/server/static/ledger.html b/server/static/ledger.html index b39ad25..f011a0d 100644 --- a/server/static/ledger.html +++ b/server/static/ledger.html @@ -1,307 +1,319 @@ - + - - - - {{ LEDGER_INSTANCE_NAME }} Blockchain Ledger - - - - - - - + {% include 'meta.html' %} {% include 'analytics.html' %} - {% include 'header.html' %} -
-
-
- Back to Status -
-
-
-

- Ledger Transactions - - Loading ... - -

+
+
+
+

+ Ledger Transactions({% raw %}{{ ledger }}{% endraw %}) +

+
+
+
+
+
+
+
+
Loading ledger ...
+
+
+ {% raw %} +

+ {{error}} +

+ {% endraw %} +
+ +
+
+
+ {% raw %} +

+ Transaction Details +

+
+
{{detailSelected.txnMetadata.seqNo}}
+
+ +
+ {% endraw %} +
+
+

Transaction Details

+

Select an entry to view details.

+ {% include 'footer.html' %} diff --git a/server/static/meta.html b/server/static/meta.html new file mode 100644 index 0000000..df577dc --- /dev/null +++ b/server/static/meta.html @@ -0,0 +1,12 @@ + + + + +{{ LEDGER_INSTANCE_NAME }} Blockchain Ledger + + + + + + diff --git a/server/static/newdid.html b/server/static/newdid.html new file mode 100644 index 0000000..646832e --- /dev/null +++ b/server/static/newdid.html @@ -0,0 +1,181 @@ + + + + + {% include 'meta.html' %} + + + + + {% include 'header.html' %} +
+
+ {% raw %} +
+
+

+ + Authenticate a New DID +

+
+
+

+ Easily write a new DID to the ledger for new identity owners. +

+
+
+ + +   + +
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+

Identity successfully registered:

+ + Seed: {{reg_result.seed}}
+ DID: {{reg_result.did}}
+ Verkey: {{reg_result.verkey}} +
+ +
+
+ Error: identity not registered. +
+
+
+ {% endraw %} +
+
+ + + + \ No newline at end of file