Главная Обзор Помощь
Вход
darkrenaissance
/
darkfi
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

explorer: initial UI re-themed to match Darkfi Book

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.
kalm 1 год назад
Родитель
95244396e4
Сommit
1020627ebe
7 измененных файлов с 629 добавлено и 558 удалено
Единый вид Показать статистику Diff
  1. 434 405
      script/research/blockchain-explorer/site/static/style.css
  2. 1 1
      script/research/blockchain-explorer/site/templates/404.html
  3. 2 2
      script/research/blockchain-explorer/site/templates/500.html
  4. 46 27
      script/research/blockchain-explorer/site/templates/base.html
  5. 29 26
      script/research/blockchain-explorer/site/templates/block.html
  6. 89 75
      script/research/blockchain-explorer/site/templates/index.html
  7. 28 22
      script/research/blockchain-explorer/site/templates/transaction.html

Разница между файлами не показана из-за своего большого размера
+ 434 - 405
script/research/blockchain-explorer/site/static/style.css


+ 1 - 1
script/research/blockchain-explorer/site/templates/404.html
Просмотреть файл 

@@ -23,7 +23,7 @@
 
 {% block content %}
 
 {% block content %}
 
 
 
     <div class="background-container">
 
     <div class="background-container">
 
-        <img src="../static/img/darkfi25.jpg" style="width:100%;">
 
+        <img src="{{ url_for('static', filename='img/darkfi25.jpg') }}" style="width:100%;">
 
         <div class="top-centered">
 
         <div class="top-centered">
 
             <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">
 
             <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">
 
                 Is this what you are looking for?
 
                 Is this what you are looking for?

+ 2 - 2
script/research/blockchain-explorer/site/templates/500.html
Просмотреть файл 

@@ -23,9 +23,9 @@
 
 {% block content %}
 
 {% block content %}
 
 
 
     <div class="background-container">
 
     <div class="background-container">
 
-        <img src="../static/img/darkfi05.jpg" style="width:100%;">
 
+        <img src="{{ url_for('static', filename='img/darkfi05.jpg') }}" style="width:100%">
 
         <div class="top-centered">
 
         <div class="top-centered">
 
-            <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">
 
+            <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em">
 
                 Reality fractured beyond repair!
 
                 Reality fractured beyond repair!
 
             </h1>
 
             </h1>
 
         </div>
 
         </div>

+ 46 - 27
script/research/blockchain-explorer/site/templates/base.html
Просмотреть файл 

@@ -23,43 +23,48 @@
 
 <head>
 
 <head>
 
     <title>DarkFi &ndash; {% block title %}{% endblock %}</title>
 
     <title>DarkFi &ndash; {% block title %}{% endblock %}</title>
 
 
 
-    <link rel="icon" type="image/png" href="{{ url_for('static', filename= 'img/icon.png') }}" />
 
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename= 'img/icon.png') }}"/>
 
 
 
     <!-- Latest compiled and minified CSS -->
 
     <!-- Latest compiled and minified CSS -->
 
     <link rel="stylesheet" href="{{ url_for('static', filename= 'bootstrap.min.css') }}">
 
     <link rel="stylesheet" href="{{ url_for('static', filename= 'bootstrap.min.css') }}">
 
 
 
-    <link rel="stylesheet" href="{{ url_for('static', filename= 'style.css') }}" />
 
+    <link rel="stylesheet" href="{{ url_for('static', filename= 'style.css') }}"/>
 
 
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 </head>
 
 </head>
 
 
 
-<body style="background-color:#090909">
 
-    <nav class="navbar navbar-expand-md fixed-top navbar-dark tedt border-bottom border-secondary">
 
+<body>
 
+
 
+<div class="page-container">
 
+    <nav class="navbar navbar-expand-md navbar-dark tedt border-bottom border-secondary">
 
         <a class="navbar-brand" href="https://dark.fi/">
 
         <a class="navbar-brand" href="https://dark.fi/">
 
-            <img src="{{ url_for('static', filename= 'img/darkfi.svg') }}" style="height:35px;"/>
 
+            <img src="{{ url_for('static', filename= 'img/darkfi.svg') }}" style="height:40px;"/>
 
         </a>
 
         </a>
 
 
 
-        <div class="collapse navbar-collapse nav justify-content-end" id="collapsibleNavbar" style="height:35px;">
 
+        <div class="collapse navbar-collapse nav justify-content-end" id="collapsibleNavbar" style="height:40px;">
 
             <ul class="navbar-nav">
 
             <ul class="navbar-nav">
 
                 <li class="nav-item">
 
                 <li class="nav-item">
 
                     <a class="nav-link text-light" href="/">Explorer</a>
 
                     <a class="nav-link text-light" href="/">Explorer</a>
 
                 </li>
 
                 </li>
 
 
 
                 <!--Twitter-->
 
                 <!--Twitter-->
 
-                <li class="nav-item" style="padding-left:10px;">                
+                <li class="nav-item" style="padding-left:10px;">
 
                     <div class="icon-sm">
 
                     <div class="icon-sm">
 
                         <a href="https://twitter.com/DarkFiSquad" class="">
 
                         <a href="https://twitter.com/DarkFiSquad" class="">
 
                             <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
 
                             <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
 
                                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
                                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
-                                 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
 
+                                 viewBox="0 0 100 100"
 
+                                 style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
 
                                  xml:space="preserve">
 
                                  xml:space="preserve">
 
                                 <style type="text/css">
 
                                 <style type="text/css">
 
-                                    .st0{fill:#3a3a3a;}
 
+                                    .st0 {
 
+                                        fill: #3a3a3a;
 
+                                    }
 
                                 </style>
 
                                 </style>
 
                                 <g id="layer1" transform="translate(-539.17946,-568.85777)">
 
                                 <g id="layer1" transform="translate(-539.17946,-568.85777)">
 
-                                    <path id="path3611" class="st0" 
-                                        d="M570.9,659c37.3,0,57.7-30.9,57.7-57.7c0-0.9,0-1.8-0.1-2.6c4-2.9,7.4-6.4,10.1-10.5
 
+                                    <path id="path3611" class="st0"
 
+                                          d="M570.9,659c37.3,0,57.7-30.9,57.7-57.7c0-0.9,0-1.8-0.1-2.6c4-2.9,7.4-6.4,10.1-10.5
 
                                            c-3.6,1.6-7.5,2.7-11.6,3.2c4.2-2.5,7.4-6.5,8.9-11.2c-3.9,2.3-8.3,4-12.9,4.9c-3.7-3.9
 
                                            c-3.6,1.6-7.5,2.7-11.6,3.2c4.2-2.5,7.4-6.5,8.9-11.2c-3.9,2.3-8.3,4-12.9,4.9c-3.7-3.9
 
                                            -9-6.4-14.8-6.4c-11.2,0-20.3,9.1-20.3,20.3c0,1.6,0.2,3.1,0.5,4.6c-16.8-0.8-31.8-8.9
 
                                            -9-6.4-14.8-6.4c-11.2,0-20.3,9.1-20.3,20.3c0,1.6,0.2,3.1,0.5,4.6c-16.8-0.8-31.8-8.9
 
                                            -41.8-21.2c-1.7,3-2.7,6.5-2.7,10.2c0,7,3.6,13.2,9,16.9c-3.3-0.1-6.5-1-9.2-2.5c0,0.1,0,0.2,0,
 
                                            -41.8-21.2c-1.7,3-2.7,6.5-2.7,10.2c0,7,3.6,13.2,9,16.9c-3.3-0.1-6.5-1-9.2-2.5c0,0.1,0,0.2,0,
 
@@ -80,14 +85,18 @@
 
                                  viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;"
 
                                  viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;"
 
                                  xml:space="preserve">
 
                                  xml:space="preserve">
 
                                 <style type="text/css">
 
                                 <style type="text/css">
 
-                                    .st0{fill:#3A3A3A;}
 
+                                    .st0 {
 
+                                        fill: #3A3A3A;
 
+                                    }
 
                                 </style>
 
                                 </style>
 
                                 <g id="g370484" transform="matrix(0.06551432,0,0,0.06551432,-2.232417,-1.431776)">
 
                                 <g id="g370484" transform="matrix(0.06551432,0,0,0.06551432,-2.232417,-1.431776)">
 
                                     <g>
 
                                     <g>
 
-                                        <path id="path6733-5_00000147220371580420933290000015044290908562073483_" class="st0"
 
+                                        <path id="path6733-5_00000147220371580420933290000015044290908562073483_"
 
+                                              class="st0"
 
                                               d="M797.5,506.6c-2.6,0-4.7,1.6-4.7,3.6c0,0.2,0,0.4,0.1,0.6l253.7,1037.5c104.2-35.5,
 
                                               d="M797.5,506.6c-2.6,0-4.7,1.6-4.7,3.6c0,0.2,0,0.4,0.1,0.6l253.7,1037.5c104.2-35.5,
 
                                                  265.5-150.8,346-256.8l-591-783.2C800.8,507.2,799.2,506.6,797.5,506.6z"/>
 
                                                  265.5-150.8,346-256.8l-591-783.2C800.8,507.2,799.2,506.6,797.5,506.6z"/>
 
-                                        <path id="path360787_00000175324937253379690650000018049397027717501353_" class="st0"
 
+                                        <path id="path360787_00000175324937253379690650000018049397027717501353_"
 
+                                              class="st0"
 
                                               d="M797.3,59C375.7,59,34.1,400.6,34.1,822.1c0,143.4,40.4,283.8,
 
                                               d="M797.3,59C375.7,59,34.1,400.6,34.1,822.1c0,143.4,40.4,283.8,
 
                                                 116.5,405.3l636.3-822.6c4.6-5.9,16.1-5.9,20.6,0l636.3,822.6c76.2-121.5,
 
                                                 116.5,405.3l636.3-822.6c4.6-5.9,16.1-5.9,20.6,0l636.3,822.6c76.2-121.5,
 
                                                 116.6-262,116.6-405.4C1560.5,400.6,1218.8,59,797.3,59L797.3,59z"/>
 
                                                 116.6-262,116.6-405.4C1560.5,400.6,1218.8,59,797.3,59L797.3,59z"/>
 
@@ -104,10 +113,13 @@
 
                         <a href="https://darkrenaissance.github.io/darkfi/misc/darkirc/darkirc.html" class="">
 
                         <a href="https://darkrenaissance.github.io/darkfi/misc/darkirc/darkirc.html" class="">
 
                             <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
 
                             <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
 
                                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
                                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
-                                 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
 
+                                 viewBox="0 0 100 100"
 
+                                 style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
 
                                  xml:space="preserve">
 
                                  xml:space="preserve">
 
                                 <style type="text/css">
 
                                 <style type="text/css">
 
-                                    .st0{fill:#3a3a3a;}
 
+                                    .st0 {
 
+                                        fill: #3a3a3a;
 
+                                    }
 
                                 </style>
 
                                 </style>
 
                                 <path class="st0" d="M0,0v100h100V0H0z M16.2,30c0-2,1.2-3.6,4.5-3.6c3.4,0,4.5,1.5,4.5,3.6v1.5c0,2-1.2,3.6-4.5,3.6
 
                                 <path class="st0" d="M0,0v100h100V0H0z M16.2,30c0-2,1.2-3.6,4.5-3.6c3.4,0,4.5,1.5,4.5,3.6v1.5c0,2-1.2,3.6-4.5,3.6
 
                                                     c-3.4,0-4.5-1.6-4.5-3.6V30z M32.3,64.8H8.6v-5.9H17V44.3H8.6v-5.9h15.9v20.5h7.8V64.8z M63.1,45.4h-5.6c-3.7,0-5.7,2.5-5.7,5.7v7.8
 
                                                     c-3.4,0-4.5-1.6-4.5-3.6V30z M32.3,64.8H8.6v-5.9H17V44.3H8.6v-5.9h15.9v20.5h7.8V64.8z M63.1,45.4h-5.6c-3.7,0-5.7,2.5-5.7,5.7v7.8
 
@@ -118,17 +130,20 @@
 
                         </a>
 
                         </a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
 
-                
+
 
                 <!--Telegram-->
 
                 <!--Telegram-->
 
                 <li class="nav-item" style="padding-left:10px; padding-right:10px;">
 
                 <li class="nav-item" style="padding-left:10px; padding-right:10px;">
 
                     <div class="icon-sm">
 
                     <div class="icon-sm">
 
                         <a href="https://t.me/darkfichat" class="">
 
                         <a href="https://t.me/darkfichat" class="">
 
                             <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
 
                             <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
 
                                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
                                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
-                                 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
 
+                                 viewBox="0 0 100 100"
 
+                                 style="enable-background:new 0 0 100 100; max-width:30px; min-width:15px;"
 
                                  xml:space="preserve">
 
                                  xml:space="preserve">
 
                                 <style type="text/css">
 
                                 <style type="text/css">
 
-                                    .st0{fill:#3a3a3a;}
 
+                                    .st0 {
 
+                                        fill: #3a3a3a;
 
+                                    }
 
                                 </style>
 
                                 </style>
 
                                 <path class="st0" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z M73.8,32.5c-0.1,2-1.4,9.1-2.5,16.8
 
                                 <path class="st0" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z M73.8,32.5c-0.1,2-1.4,9.1-2.5,16.8
 
                                                     L67.9,72c0,0-0.3,3.3-2.9,3.9c-2.6,0.6-6.5-2-7.2-2.6c-0.6-0.4-10.8-6.9-14.5-10.1c-1-0.9-2.2-2.6,0.1-4.6l15.2-14.5
 
                                                     L67.9,72c0,0-0.3,3.3-2.9,3.9c-2.6,0.6-6.5-2-7.2-2.6c-0.6-0.4-10.8-6.9-14.5-10.1c-1-0.9-2.2-2.6,0.1-4.6l15.2-14.5
 
@@ -144,17 +159,18 @@
 
         <div class="navbarb">
 
         <div class="navbarb">
 
             <div class="navbar2">
 
             <div class="navbar2">
 
                 <div class="container2 nav-container2">
 
                 <div class="container2 nav-container2">
 
-                        <input class="checkbox" type="checkbox" name="" id="" />
 
-                        <div class="hamburger-lines">
 
-                            <span class="line line1"></span>
 
-                            <span class="line line2"></span>
 
-                            <span class="line line3"></span>
 
-                        </div>
 
+                    <input class="checkbox" type="checkbox" name="" id=""/>
 
+                    <div class="hamburger-lines">
 
+                        <span class="line line1"></span>
 
+                        <span class="line line2"></span>
 
+                        <span class="line line3"></span>
 
+                    </div>
 
                     <div class="menu-items">
 
                     <div class="menu-items">
 
                         <li class="topnav"><a href="/">Explorer</a></li>
 
                         <li class="topnav"><a href="/">Explorer</a></li>
 
                         <li><a href="https://twitter.com/DarkFiSquad">Twitter</a></li>
 
                         <li><a href="https://twitter.com/DarkFiSquad">Twitter</a></li>
 
                         <li><a href="https://codeberg.org/darkrenaissance/darkfi">Codeberg</a></li>
 
                         <li><a href="https://codeberg.org/darkrenaissance/darkfi">Codeberg</a></li>
 
-                        <li><a href="https://darkrenaissance.github.io/darkfi/misc/darkirc/darkirc.html">Darkirc</a></li>
 
+                        <li><a href="https://darkrenaissance.github.io/darkfi/misc/darkirc/darkirc.html">Darkirc</a>
 
+                        </li>
 
                         <li><a href="https://t.me/darkfichat">Telegram</a></li>
 
                         <li><a href="https://t.me/darkfichat">Telegram</a></li>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
@@ -162,9 +178,12 @@
 
         </div>
 
         </div>
 
     </nav>
 
     </nav>
 
 
 
-    {% block content %}{% endblock %}
 
+    <div>
 
+        {% block content %}{% endblock %}
 
+    </div>
 
 
 
     <footer></footer>
 
     <footer></footer>
 
+</div>
 
 
 
 </body>
 
 </body>

+ 29 - 26
script/research/blockchain-explorer/site/templates/block.html
Просмотреть файл 

@@ -22,34 +22,37 @@
 
 
 
 {% block content %}
 
 {% block content %}
 
 
 
-    <div class="container-fluid pl-5 pb-5 pr-5 title-block" style="margin-top:90px;">
 
-	    <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Block {{ block[0] }}</h1>
 
-	</div>
 
-
 
-    <div class="row m-0 border-secondary border-top">
 
-        <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
 
-            <ul>
 
-                <li>Version: {{ block[1] }}</li>
 
-                <li>Previous: <a href="../block/{{ block[2] }}">{{ block[2] }}</a></li>
 
-                <li>Height: {{ block[3] }}</li>
 
-                <li>Timestamp: {{ block[4] }}</li>
 
-                <li>Nonce: {{ block[5] }}</li>
 
-                <li>Root: {{ block[6] }}</li>
 
-                <li>Signature: {{ block[7] }}</li>
 
-            </ul>
 
-        </div>
 
+<div class="content-container">
 
+
 
+    <!-- Block Details Header -->
 
+    <div class="content-header" style="padding-bottom: 8px">
 
+        <h2 class="content-section-header">Block Details</h2>
 
+        <div class="">{{ block[0] }}</div>
 
     </div>
 
     </div>
 
 
 
-    <div class="row m-0 border-secondary border-top">
 
-        <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
 
-            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Transactions</h2>
 
-            <ul>
 
-	            {% for transaction in transactions %}
 
-                    <li><a href="../transaction/{{ transaction[0] }}">{{ transaction[0] }}</a></li>
 
-                {% endfor %}
 
-            </ul>
 
-        </div>
 
+    <!-- Block Details -->
 
+    <ul>
 
+        <li><strong>Version:</strong> {{ block[1] }}</li>
 
+        <li><strong>Previous:</strong> <a href="../block/{{ block[2] }}">{{ block[2] }}</a></li>
 
+        <li><strong>Height:</strong> {{ block[3] }}</li>
 
+        <li><strong>Timestamp:</strong> {{ block[4] }}</li>
 
+        <li><strong>Nonce:</strong> {{ block[5] }}</li>
 
+        <li><strong>Root:</strong> {{ block[6] }}</li>
 
+        <li><strong>Signature:</strong> {{ block[7] }}</li>
 
+    </ul>
 
+
 
+    <!-- Page Content Divider -->
 
+    <hr class="content-divider"/>
 
+
 
+    <!-- Block Transactions -->
 
+    <div class="content-section" style="padding-top: 12px">
 
+        <h2 class="content-section-header">Block Transactions</h2>
 
+        <ul>
 
+            {% for transaction in transactions %}
 
+            <li><a href="../transaction/{{ transaction[0] }}">{{ transaction[0] }}</a></li>
 
+            {% endfor %}
 
+        </ul>
 
     </div>
 
     </div>
 
-    
+</div>
 
 {% endblock %}
 
 {% endblock %}

+ 89 - 75
script/research/blockchain-explorer/site/templates/index.html
Просмотреть файл 

@@ -21,88 +21,102 @@
 
 {% block title %}Explorer{% endblock %}
 
 {% block title %}Explorer{% endblock %}
 
 
 
 {% block content %}
 
 {% block content %}
 
-
 
-    <div class="container-fluid pl-5 pb-5 pr-5 title-block" style="margin-top:90px;">
 
-        <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Explore</h1>
 
-        <div class="search-container">
 
-            <form action="/search">
 
-                <input type="text" placeholder="Search for a block or transaction.." name="search_hash">
 
-            </form>
 
-      </div>
 
-    </div>
 
-
 
-    <div class="row m-0 border-secondary border-top">
 
-        <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
 
-            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Latest Blocks</h2>
 
-           <table style="width:100%;">
 
-                <tr>
 
-                    <th>Height</th>
 
-                    <th>Hash</th>
 
-                    <th>Timestamp</th>
 
-                </tr>
 
-                {% for block in blocks %}
 
-                    <tr>
 
-                        <td>{{ block[3] }}</td>
 
-                        <td><a href="block/{{ block[0] }}">{{ block[0] }}</a></td>
 
-                        <td>{{ block[4] }}</td>
 
-                    </tr>
 
-                {% endfor %}
 
-            </table>
 
-        </div>
 
-    </div>
 
-
 
-    <div class="row m-0 border-secondary border-top">
 
-        <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
 
-            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Basic Statistics</h2>
 
-            <ul>
 
-                <li>Height: {{ basic_stats[0] }}</li>
 
-                <li>Epoch: {{ basic_stats[1] }}</li>
 
-                <li>Last block: <a href="block/{{ basic_stats[2] }}">{{ basic_stats[2] }}</a></li>
 
-                <li>Total blocks: {{ basic_stats[3] }}</li>
 
-                <li>Total transactions: {{ basic_stats[4] }}</li>
 
-            </ul>
 
-        </div>
 
+<div class="content-container">
 
+
 
+    <!-- Explorer Search -->
 
+    <div class="search-container">
 
+        <h1>Explore</h1>
 
+        <form action="/search">
 
+            <input class="search-input" type="text" placeholder="Search for a block or transaction.." name="search_hash">
 
+        </form>
 
     </div>
 
     </div>
 
 
 
-<div class="row m-0 border-secondary border-top">
 
-    <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
 
-        <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Total Network Gas Consumption Statistics</h2>
 
-
 
-        <strong>Total Gas</strong>
 
-        <ul>
 
-            <li>Average: {{ metric_stats[0] }}</li>
 
-            <li>Minimum: {{ metric_stats[1] }}</li>
 
-            <li>Maximum: {{ metric_stats[2] }}</li>
 
-        </ul>
 
-
 
-        <strong>WASM Gas</strong>
 
+    <!--Network Summary -->
 
+    <div class="content-section" style="padding-bottom: 0px;">
 
+        <h2 class="content-section-header">Network Summary</h2>
 
         <ul>
 
         <ul>
 
-            <li>Average: {{ metric_stats[3] }}</li>
 
-            <li>Minimum: {{ metric_stats[4] }}</li>
 
-            <li>Maximum: {{ metric_stats[5] }}</li>
 
+            <li>Height: {{ basic_stats[0] }}</li>
 
+            <li>Epoch: {{ basic_stats[1] }}</li>
 
+            <li>Last block: <a href="block/{{ basic_stats[2] }}">{{ basic_stats[2] }}</a></li>
 
+            <li>Total blocks: {{ basic_stats[3] }}</li>
 
+            <li>Total transactions: {{ basic_stats[4] }}</li>
 
         </ul>
 
         </ul>
 
+    </div>
 
 
 
-        <strong>ZK Circuits Gas</strong>
 
-        <ul>
 
-            <li>Average: {{ metric_stats[6] }}</li>
 
-            <li>Minimum: {{ metric_stats[7] }}</li>
 
-            <li>Maximum: {{ metric_stats[8] }}</li>
 
-        </ul>
 
+    <!--Latest Blocks -->
 
+    <div class="content-section">
 
+        <h2 class="content-section-header">Latest Blocks</h2>
 
+        <table class="table">
 
+            <thead>
 
+            <tr>
 
+                <th>Height</th>
 
+                <th>Hash</th>
 
+                <th>Timestamp</th>
 
+            </tr>
 
+            </thead>
 
+            <tbody>
 
+            {% for block in blocks %}
 
+            <tr>
 
+                <td>{{ block[3] }}</td>
 
+                <td><a href="block/{{ block[0] }}">{{ block[0] }}</a></td>
 
+                <td>{{ block[4] }}</td>
 
+            </tr>
 
+            {% endfor %}
 
+            </tbody>
 
+        </table>
 
+    </div>
 
 
 
-        <strong>Signatures Gas</strong>
 
-        <ul>
 
-            <li>Average: {{ metric_stats[9] }}</li>
 
-            <li>Minimum: {{ metric_stats[10] }}</li>
 
-            <li>Maximum: {{ metric_stats[11] }}</li>
 
-        </ul>
 
+    <!--Total Network Gas Consumption -->
 
+    <div class="content-section">
 
+        <h2 class="content-section-header">Total Network Gas Consumption</h2>
 
+        {% if metric_stats %}
 
+        <table class="table">
 
+            <thead>
 
+            <tr>
 
+                <th></th>
 
+                <th>Average</th>
 
+                <th>Minimum</th>
 
+                <th>Maximum</th>
 
+            </tr>
 
+            </thead>
 
+            <tbody>
 
+            <tr>
 
+                <td>Total</td>
 
+                <td>{{ metric_stats[0] }}</td>
 
+                <td>{{ metric_stats[1] }}</td>
 
+                <td>{{ metric_stats[2] }}</td>
 
+            </tr>
 
+            <tr>
 
+                <td>WASM</td>
 
+                <td>{{ metric_stats[3] }}</td>
 
+                <td>{{ metric_stats[4] }}</td>
 
+                <td>{{ metric_stats[5] }}</td>
 
+            </tr>
 
+            <tr>
 
+                <td>ZK Circuits</td>
 
+                <td>{{ metric_stats[6] }}</td>
 
+                <td>{{ metric_stats[7] }}</td>
 
+                <td>{{ metric_stats[8] }}</td>
 
+            </tr>
 
+            <tr>
 
+                <td>Signatures</td>
 
+                <td>{{ metric_stats[9] }}</td>
 
+                <td>{{ metric_stats[10] }}</td>
 
+                <td>{{ metric_stats[11] }}</td>
 
+            </tr>
 
+            <tr>
 
+                <td>Deployments</td>
 
+                <td>{{ metric_stats[12] }}</td>
 
+                <td>{{ metric_stats[13] }}</td>
 
+                <td>{{ metric_stats[14] }}</td>
 
+            </tr>
 
+            </tbody>
 
+        </table>
 
+        {% else %}
 
+        Gas consumption details are not available.
 
+        {% endif %}
 
+    </div>
 
 
 
-        <strong>Deployments Gas</strong>
 
-        <ul>
 
-            <li>Average: {{ metric_stats[12] }}</li>
 
-            <li>Minimum: {{ metric_stats[13] }}</li>
 
-            <li>Maximum: {{ metric_stats[14] }}</li>
 
-        </ul>
 
 </div>
 
 </div>
 
-    
 {% endblock %}
 
 {% endblock %}

+ 28 - 22
script/research/blockchain-explorer/site/templates/transaction.html
Просмотреть файл 

@@ -21,29 +21,35 @@
 
 {% block title %}Transaction {{ transaction[0] }}{% endblock %}
 
 {% block title %}Transaction {{ transaction[0] }}{% endblock %}
 
 
 
 {% block content %}
 
 {% block content %}
 
+<div class="content-container">
 
 
 
-    <div class="container-fluid pl-5 pb-5 pr-5 title-block" style="margin-top:90px;">
 
-	    <h1 class="display-4 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Transaction {{ transaction[0] }}</h1>
 
-	</div>
 
-
 
-    <div class="row m-0 border-secondary border-top">
 
-        <div class="text-white mb-0 border-bottom border-secondary lead-text" style="width:100%;">
 
-            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Summary</h2>
 
-            <ul>
 
-                <li>Timestamp: {{ transaction[3] }}</li>
 
-                <li>Block: <a href="../block/{{ transaction[1] }}">{{ transaction[1] }}</a></li>
 
-                <li>Payload: {{ transaction[2] }}</li>
 
-            </ul>
 
-            <h2 class="display-8 text-white border-l3" style="font-family:'Weissrundgotisch';line-height:.9em;">Gas Consumption</h2>
 
-            <ul>
 
-                <li>Total: {{ transaction[4] }}</li>
 
-                <li>WASM: {{ transaction[5] }}</li>
 
-                <li>ZK Circuits: {{ transaction[6] }}</li>
 
-                <li>Signatures: {{ transaction[7] }}</li>
 
-                <li>Deployments: {{ transaction[8] }}</li>
 
-            </ul>
 
-        </div>
 
+    <!-- Page Content Header -->
 
+    <div class="content-header" style="padding-bottom: 8px">
 
+        <h1 class="content-section-header">Transaction Details</h1>
 
+        <div class="">{{ transaction[0] }}</div>
 
     </div>
 
     </div>
 
-    
+
 
+    <!-- Transaction Details -->
 
+    <ul>
 
+        <li><strong>Timestamp:</strong> {{ transaction[3] }}</li>
 
+        <li><strong>Block:</strong> <a href="../block/{{ transaction[1] }}">{{ transaction[1] }}</a></li>
 
+        <li><strong>Payload:</strong> {{ transaction[2] }}</li>
 
+    </ul>
 
+
 
+    <!-- Page Content Divider -->
 
+    <hr class="content-divider"/>
 
+
 
+    <!-- Transaction Gas Consumption -->
 
+    <div class="content-section" style="padding-top: 12px;">
 
+        <h2 class="content-section-header">Gas Consumption</h2>
 
+        <ul>
 
+            <li><strong>Total:</strong> {{ transaction[4] }}</li>
 
+            <li><strong>WASM:</strong> {{ transaction[5] }}</li>
 
+            <li><strong>ZK Circuits:</strong> {{ transaction[6] }}</li>
 
+            <li><strong>Signatures:</strong> {{ transaction[7] }}</li>
 
+            <li><strong>Deployments:</strong> {{ transaction[8] }}</li>
 
+        </ul>
 
+    </div>
 
+</div>
 
 {% endblock %}
 
 {% endblock %}

Некоторые файлы не были показаны из-за большого количества измененных файлов