diff --git a/docs/images/xpr-grid.png b/docs/images/xpr-grid.png old mode 100644 new mode 100755 index 108bfa7e..b4127fb0 Binary files a/docs/images/xpr-grid.png and b/docs/images/xpr-grid.png differ diff --git a/docs/index.html b/docs/index.html index 75c723ec..c7279e5e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -84,49 +84,73 @@ U+2212, U+2215, U+FEFF, U+FFFD; } - + + + -
-
- - -
-
- Antelope Tools Logo -
-
-

Unlock Real-Time Visibility into Antelope Blockchains

-
-
-
-

- Get instant insights into blockchain networks with our intuitive dashboards. -

-
-
-
-

- A community-driven tool for unparalleled transparency and reliability. -

+
+ +
+
+
+
+ + +
+
+ Antelope Tools Logo +
+
+

Unlock Real-Time Visibility into Antelope Blockchains

+
+
+
+

+ Get instant insights into blockchain networks with our intuitive dashboards. +

+
+
+
+

+ A community-driven tool for unparalleled transparency and reliability. +

+
+ +
View Monitored Networks
+
- -
View Monitored Networks
-
-
-
-
-
-
-
- +
+
+
+
+
+ +
-
- -
-
-
-
-
-

- Testnets -

+
+
+
+
+

+ Testnets +

+
-
-
-
-
-
-
-
+
+
+
@@ -215,9 +235,7 @@

-
-
-
+
@@ -232,9 +250,7 @@

-
-
-
+
@@ -245,7 +261,7 @@

Transparency is our mantra, and we practice what we preach. Antelope Tools Dashboard offers a visually engaging and clear representation of vital blockchain metrics. Our data is sourced directly from public blockchain tables - and enriched with information from Block Producers' bp.json files. + and enriched with information from Block Producer's bp.json files. Want to dig deeper? Feel free to explore our GitHub repository or join the conversation in our Telegram group. @@ -254,32 +270,32 @@

-
+
-

+

Ready to contribute to a more transparent blockchain ecosystem? Reach out to us! -

+

- telegram + Edenia Telegram - github + Edenia Github - linkedin + Edenia Linkedin

A Community Public Good built by

- +
@@ -296,5 +312,15 @@

A Community Public Good built by

gtag('js', new Date()) gtag('config', 'G-E6Y0EC9FT8') + \ No newline at end of file diff --git a/docs/styles.css b/docs/styles.css index 5a497fa0..7890597f 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -1,19 +1,57 @@ :root { - --colors-white: #ffffff; --colors-primary: #1ccbff; - --colors-3-text-primary: rgba(0, 0, 0, 0.87); - --colors-2-secondary: #1e88e5; + --colors-primary-dark: #138eb2; + + --colors-secondary: #d6f5ff; + --colors-secondary-light: rgb(88, 116, 124); + --colors-secondary-dark: rgba(28, 203, 255, 0.2); + + --shadows-button: 5.8px -34.8px 40.6px 0 rgba(53, 64, 82, 0.05); + --shadows-grid-item: 0 1px 3px 1px rgba(0, 0, 0, 0.15), + 0 1px 2px 0 rgba(0, 0, 0, 0.3); + --shadows-grid-item-md: 0 0.9px 2.7px 0.9px rgba(0, 0, 0, 0.15), + 0 0.9px 1.8px 0 rgba(0, 0, 0, 0.3); + --shadows-grid-item-lg: 0 1.2px 3.7px 1.2px rgba(0, 0, 0, 0.15), + 0 1.2px 2.5px 0 rgba(0, 0, 0, 0.3); + + --bg-main: #051b34; + --bg-secondary: #041426; + --bg-contrast-transparent-color: rgba(255, 255, 255, 0.2); + + --text-color: white; + --contrast-text-color: black; + + --filter-img: invert(100%) hue-rotate(180deg) saturate(10); +} + +.light-mode { + --colors-primary: #1565c0; + --colors-primary-dark: #0e4686; + + --colors-secondary-light: rgba(186, 239, 255, 0.6); + + --bg-main: white; + --bg-secondary: #f7f9fc; + --bg-contrast-transparent-color: rgba(0, 0, 0, 0.04); + + --text-color: black; + --contrast-text-color: white; + + --filter-img: none; } * { box-sizing: border-box; - font-family: 'Nunito'; } a { text-decoration: none; } +a, a:visited { + color: var(--colors-primary); +} + summary { font-size: 40px; } @@ -21,18 +59,22 @@ summary { html, body { overflow-x: hidden; + background-color: var(--bg-main); + color: var(--text-color); } body { margin: 0; font-family: 'Nunito'; + font-stretch: normal; + font-style: normal; } details summary:hover { - background-color: #f1f1f1; + background-color: var(--bg-secondary); } details[open] summary { - background-color: rgba(28, 203, 255, 0.2); + background-color: var(--colors-secondary-dark); } details[open] summary ~ * { animation: open 0.3s ease-in-out; @@ -55,7 +97,7 @@ summary { details summary { width: 100%; padding: 0.5rem 0; - background-color: #f9f9fc; + background-color: var(--bg-secondary); position: relative; cursor: pointer; margin-right: 10px; @@ -67,6 +109,10 @@ details summary { padding-left: 104px; } +.info-icon img { + filter: var(--filter-img); +} + .info-icon span { padding-left: 10px; } @@ -76,6 +122,7 @@ details summary:after { position: absolute; right: 92px; transform: rotate(180deg); + filter: var(--filter-img); } details[open] summary::after { transform: rotate(0); @@ -83,8 +130,6 @@ details[open] summary::after { p { margin: 0 0 0.4px 8.5px; - font-family: 'Nunito'; - color: #000; } #bg-image-mobile { @@ -95,45 +140,8 @@ p { margin-bottom: 24px; } -.box-paragraph a { - text-decoration: none; - color: black; -} - -.box-paragraph a:hover { - text-decoration: underline; -} - -.box-paragraph h4 { - font-family: 'Nunito'; - font-weight: 600; - font-size: 20px; - line-height: 24px; - color: #000000; - margin: 0; -} - -.box-paragraph p { - font-style: normal; - font-weight: normal; - text-align: left; - font-stretch: normal; -} - -.box-network h4 { - font-family: 'Nunito'; - font-style: normal; - font-weight: bold; - font-size: 18px; - line-height: 38px; - letter-spacing: -0.219429px; - color: #000000; - margin: 0; -} - .header { overflow: hidden; - background-color: #ffffff; margin-left: 40px; display: flex; flex-direction: column; @@ -150,7 +158,6 @@ p { } .content { - background-color: #ffffff; padding-top: 36px; padding-bottom: 40px; } @@ -159,7 +166,7 @@ p { display: flex; align-items: center; flex-direction: column; - background-color: #f9f9fc; + background-color: var(--bg-secondary); padding-top: 32px; padding-bottom: 20px; width: 100%; @@ -176,20 +183,8 @@ p { margin-bottom: 16px; } -.box-column div { - width: 49%; - display: flex; - justify-content: center; -} - -.box-column ul a { - text-decoration: none; - white-space: nowrap; - font-size: 14px; - line-height: 20px; - text-align: center; - letter-spacing: 0.1px; - color: #000000; +.box-social-media a:hover, .edeniaLogo:hover{ + transform: scale(1.1); } .image-box-desktop { @@ -201,18 +196,6 @@ p { flex-direction: column; } -#contact-us { - font-weight: 600; - font-size: 17px; - line-height: 20px; - text-align: center; - letter-spacing: 0.0595px; - color: #000000; - margin: 0; - padding: 12px; - margin-bottom: 36px; -} - .logo-text { display: flex; padding: 10px; @@ -221,59 +204,46 @@ p { #copyright { height: 22px; - font-family: Nunito; - font-weight: normal; - font-stretch: normal; - font-style: normal; text-align: center; - color: #000; } .project-by { - font-family: Nunito; font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 1.75; text-align: center; - color: var(--colors-3-text-primary); } -.box-paragraph-text > p { - font-stretch: normal; - font-style: normal; - text-align: left; -} - -.myButton { +.customButton { display: flex; flex-direction: row; justify-content: center; align-items: center; - box-shadow: 5.8px -34.8px 40.6px 0 rgba(53, 64, 82, 0.05); - background-color: #d6f5ff; + box-shadow: var(--shadows-button); + color: var(--contrast-text-color); + background-color: var(--colors-primary); + border-radius: 70px; } -.myButton:hover { +.customButton:hover { text-decoration: none; + color: var(--contrast-text-color); + background-color: var(--colors-primary-dark); + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.myButton:active { - position: relative; - top: 1px; +.customButton:visited { + color: var(--contrast-text-color); } -.contact-us p { +.contact-us h3 { font-weight: 600; - font-stretch: normal; - font-style: normal; text-align: center; line-height: 1.38; letter-spacing: 0.14px; } .grid-item:hover { - border: 2px solid var(--colors-primary); + outline: 2px solid var(--colors-primary); box-sizing: border-box; } @@ -289,16 +259,14 @@ p { display: flex; flex-direction: column; justify-content: center; + background-color: var(--bg-main); } .name-networks { - font-family: Nunito; font-weight: 600; - font-stretch: normal; - font-style: normal; letter-spacing: normal; text-align: center; - color: #000; + color: var(--text-color); } .text-container { @@ -308,10 +276,59 @@ p { .visit-text { font-weight: bold; - font-stretch: normal; - font-style: normal; text-align: center; - color: #000; + color: var(--contrast-text-color); +} + +.theme-filter-image{ + filter: var(--filter-img); +} + +#back-to-top { + margin-top: 16px; +} + +#toggle-color { + display: flex; + justify-content: end; + align-items: center; + height: 48px; + padding: 32px; +} + +#toggle-color-btn { + height: 32px; + width: 32px; + border: none; + padding: 0; + color: var(--text-color); + background-color: var(--bg-main); + box-shadow: var(--shadows-grid-item); + border-radius: 4px; + cursor: pointer; +} + +#toggle-color-btn:hover { + background-color: var(--bg-contrast-transparent-color); +} + +#toggle-color-btn svg { + display: block; + height: 24px; + width: 24px; + margin: 0px 4px; +} + +.no-display { + display: none; +} + +#networks { + display: flex; + flex-direction: column; + align-items: center; + padding: 16px 0px; + background-color: var(--bg-secondary); } @media screen and (max-width: 767px) { @@ -332,7 +349,6 @@ p { letter-spacing: 0.31px; } .content { - background-color: #ffffff; padding-top: 0px; padding-bottom: 10px; } @@ -340,7 +356,6 @@ p { .box-network { flex-grow: 0; padding: 16px 0; - background-color: #f9f9fc; } #middle-logo { @@ -375,7 +390,7 @@ p { transform: rotate(0) scale(0.5); } - .box-paragraph-text > p { + .box-paragraph-text > h1 { height: 58px; font-size: 18px; font-weight: 600; @@ -387,15 +402,13 @@ p { } .flex p { - font-family: Nunito; font-size: 12px; - font-weight: normal; width: 148px; height: 81px; margin: 16px 8px 16px 0px; padding: 8px 4px; border-radius: 4px; - background-color: rgba(186, 239, 255, 0.6); + background-color: var(--colors-secondary-light); text-align: center; } .flex { @@ -415,8 +428,8 @@ p { height: 58px; font-size: 24px; line-height: 1.2; - letter-spacing: normal; margin: auto auto 16px; + color: var(--text-color); } .text-container { @@ -432,16 +445,15 @@ p { background-color: var(--colors-primary); } - .flex-text p { + .flex-text h2 { width: 250px; height: 18px; flex-grow: 0; margin: 0 2px 2px; - font-family: Nunito; font-size: 24px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 1.2; letter-spacing: normal; text-align: center; @@ -475,9 +487,7 @@ p { margin: 0 8px 0 0; padding: 8px 29.4px 11.8px 30.4px; border-radius: 4px; - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), - 0 1px 2px 0 rgba(0, 0, 0, 0.3); - background-color: white; + box-shadow: var(--shadows-grid-item) } .name-networks { @@ -490,15 +500,12 @@ p { .box-paragraph summary { flex-grow: 0; - font-family: Nunito; font-size: 20px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 1.61; letter-spacing: -0.54px; - text-align: left; - color: #000; padding: 10px; } @@ -517,7 +524,7 @@ p { padding-top: 20px; } - .contact-us p { + .contact-us h3 { width: 306px; height: 71px; margin: 0px 0px 8px; @@ -557,8 +564,8 @@ p { width: 20px; } - .myButton { - background-color: white; + .customButton { + background-color: var(--bg-main); box-shadow: none; display: block; } @@ -580,7 +587,7 @@ p { background-position: top right; background-repeat: no-repeat; align-items: flex-start; - margin: 36px 0px 0px; + margin: 0px; margin-left: calc(100% / 2 - 348px); } @@ -600,7 +607,7 @@ p { transform: rotate(0) scale(0.6); } - .box-paragraph-text > p { + .box-paragraph-text > h1 { width: 270px; height: 68px; font-size: 22px; @@ -610,18 +617,16 @@ p { margin: 22px 0px 40px; } - .flex-text p { + .flex-text h2 { width: 450px; height: 18px; margin: 4px 0 4px 4px; - font-family: Nunito; font-size: 28px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 1.2; letter-spacing: -0.23px; - text-align: left; } .flex { @@ -632,14 +637,11 @@ p { width: 260px; height: 16px; flex-grow: 0; - font-family: Nunito; font-size: 12px; - font-weight: normal; - font-stretch: normal; - font-style: normal; + + line-height: 1.33; letter-spacing: 0.3px; - text-align: left; } .grid { @@ -663,9 +665,7 @@ p { flex-grow: 0; padding: 12px; border-radius: 3.7px; - box-shadow: 0 0.9px 2.7px 0.9px rgba(0, 0, 0, 0.15), - 0 0.9px 1.8px 0 rgba(0, 0, 0, 0.3); - background-color: var(--colors-white); + box-shadow: var(--shadows-grid-item-md) } .Line-4 { @@ -689,15 +689,12 @@ p { } .box-paragraph summary { - font-family: Nunito; font-size: 20px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 1.61; letter-spacing: -0.54px; - text-align: left; - color: #000; padding-left: calc(100% / 2 - 399px); } @@ -714,22 +711,16 @@ p { letter-spacing: 0.18px; } - .myButton { + .customButton { width: 245px; height: 40px; gap: 29px; padding: 19px 0; - border-radius: 58px; - border: solid 2px var(--colors-primary); margin: 22px 0 64px; } .visit-text { - width: 245px; - flex-grow: 0; font-size: 14px; - line-height: 3.16; - letter-spacing: 0.23px; } .name-networks { @@ -740,11 +731,6 @@ p { line-height: 1.09; } - #networks { - display: flex; - flex-direction: column; - margin-left: calc(100% / 2 - 348px); - } .image-box-desktop { width: 546px; height: 240px; @@ -791,7 +777,7 @@ p { height: 25.6px; } - .contact-us p { + .contact-us h3 { width: 550px; height: 64px; margin: 0 0 16px; @@ -833,7 +819,7 @@ p { background-position: top right; background-repeat: no-repeat; align-items: flex-start; - margin-top: 70px; + margin-top: 0px; margin-left: calc(100% / 2 - 570px); } @@ -849,7 +835,7 @@ p { top: 0px; } - .box-paragraph-text > p { + .box-paragraph-text > h1 { width: 400px; height: 114.2px; font-size: 32px; @@ -859,19 +845,17 @@ p { margin-bottom: 40px; } - .flex-text p { + .flex-text h2 { width: 450px; height: 28px; flex-grow: 0; margin: 6px 0 6px 8.9px; - font-family: Nunito; font-size: 32px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 0.85; letter-spacing: -0.16px; - text-align: left; } .flex { @@ -882,14 +866,12 @@ p { width: 350.5px; height: 32px; flex-grow: 0; - font-family: Nunito; font-size: 16px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 1.49; letter-spacing: 0.87px; - text-align: left; } .grid { @@ -909,9 +891,7 @@ p { flex-grow: 0; padding: 12px; border-radius: 3.7px; - box-shadow: 0 0.9px 2.7px 0.9px rgba(0, 0, 0, 0.15), - 0 0.9px 1.8px 0 rgba(0, 0, 0, 0.3); - background-color: var(--colors-white); + box-shadow: var(--shadows-grid-item-md) } .Line-4 { @@ -934,15 +914,12 @@ p { } .box-paragraph summary { - font-family: Nunito; font-size: 20px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 1.61; letter-spacing: -0.54px; - text-align: left; - color: #000; padding-left: calc(100% / 2 - 620px); } @@ -958,23 +935,16 @@ p { line-height: 1.72; letter-spacing: 0.18px; } - .myButton { + .customButton { width: 340px; height: 60px; gap: 29px; padding: 19px 0; - border-radius: 75px; - border: solid 5.8px var(--colors-primary); margin-top: 20px; margin-bottom: 80px; } .visit-text { - width: 381.9px; - height: 70px; - flex-grow: 0; font-size: 22px; - line-height: 3.16; - letter-spacing: 0.23px; } .name-networks { @@ -985,11 +955,6 @@ p { line-height: 1.09; } - #networks { - display: flex; - flex-direction: column; - margin-left: calc(100% / 2 - 570px); - } .image-box-desktop { width: 546px; height: 240px; @@ -1035,7 +1000,7 @@ p { width: 250px; } - .contact-us p { + .contact-us h3 { width: 860px; height: 108px; margin: 0 0 16px; @@ -1073,7 +1038,7 @@ p { align-items: flex-start; width: 1740px; margin-left: calc(100% / 2 - 870px); - margin-top: 104px; + margin-top: 54px; } .box-network { @@ -1086,11 +1051,7 @@ p { margin-bottom: 30px; } - #networks { - margin-left: calc(100% / 2 - 870px); - } - - .box-paragraph-text > p { + .box-paragraph-text > h1 { width: 550px; height: 96px; margin-bottom: 60px; @@ -1105,14 +1066,12 @@ p { height: 71.3px; flex-grow: 0; margin: 0 0 0 6.5px; - font-family: Nunito; font-size: 24px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 1; letter-spacing: 0.73px; - text-align: left; } .Line-4 { @@ -1135,19 +1094,17 @@ p { border-radius: 5px; } - .flex-text p { + .flex-text h2 { width: 450px; height: 28px; flex-grow: 0; margin: 6px 0 6px 8.9px; - font-family: Nunito; font-size: 45px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 0.76; letter-spacing: -0.16px; - text-align: left; } .image-box { @@ -1172,21 +1129,16 @@ p { margin-bottom: 80px; } - .myButton { + .customButton { width: 506px; height: 91px; gap: 24.4px; padding: 16px 0; - border-radius: 63px; - border: solid 4.9px var(--colors-primary); margin-bottom: 100px; } .visit-text { - flex-grow: 0; font-size: 32px; - line-height: 2.09; - letter-spacing: 0.19px; } .flex { @@ -1220,9 +1172,7 @@ p { flex-grow: 0; padding: 19.8px 19.8px 18.6px; border-radius: 5px; - box-shadow: 0 1.2px 3.7px 1.2px rgba(0, 0, 0, 0.15), - 0 1.2px 2.5px 0 rgba(0, 0, 0, 0.3); - background-color: var(--colors-white); + box-shadow: var(--shadows-grid-item-lg); } .name-networks { @@ -1242,15 +1192,12 @@ p { .box-paragraph summary { width: 100%; - font-family: Nunito; font-size: 45px; font-weight: 600; - font-stretch: normal; - font-style: normal; + + line-height: 2.15; letter-spacing: -0.54px; - text-align: left; - color: #000; padding-left: calc(100% / 2 - 900px); } @@ -1294,7 +1241,7 @@ p { width: 250px; } - .contact-us p { + .contact-us h3 { width: 1606px; margin: 0 0 16px; font-size: 36px;