{"id":436722,"date":"2024-10-29T03:04:21","date_gmt":"2024-10-29T03:04:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=436722"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=436722","title":{"rendered":"<span>\u041f\u0430\u0440\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Handlebars \u0434\u043b\u044f Apache Superset \u2014 2<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/888\/57f\/4c2\/88857f4c298dd8d6ca11bfe2d6ede56b.png\" alt=\"\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b Handlebars \u0434\u043b\u044f Apache Superset\" title=\"\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b Handlebars \u0434\u043b\u044f Apache Superset\" width=\"780\" height=\"437\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/888\/57f\/4c2\/88857f4c298dd8d6ca11bfe2d6ede56b.png\"\/><\/p>\n<div><figcaption>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b Handlebars \u0434\u043b\u044f Apache Superset<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438\u0447\u0438\u043d\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Handlebars \u0434\u043b\u044f Superset \u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 <a href=\"https:\/\/habr.com\/ru\/articles\/851756\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b.<\/p>\n<blockquote>\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0430\u044e \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 Html + CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c (\u0442.\u043a. \u0435\u0441\u0442\u044c \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a \u043b\u044e\u0431\u044b\u043c \u043b\u0438\u0448\u043d\u0438\u043c \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c), \u0430 \u0437\u0430\u0442\u0435\u043c CSS \u0441 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/blockquote>\n<h2>\u0422\u0440\u0435\u0442\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d<\/h2>\n<p>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f0f\/ffa\/a25\/f0fffaa2564e32ac7cbb1c84bdd3e60c.jpg\" alt=\"\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438\" title=\"\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438\" width=\"1602\" height=\"180\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f0f\/ffa\/a25\/f0fffaa2564e32ac7cbb1c84bdd3e60c.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u043a\u043e\u043d\u043e\u043a 80*80. \u041f\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0435\u0442\u043a\u0435 \u0432 12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u044d\u0442\u043e\u0442 \u0433\u0440\u0430\u0444\u0438\u043a \u0437\u0430\u0439\u043c\u0435\u0442 3 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438, \u0430 \u0442\u0435\u043a\u0441\u0442 \u0438 \u0446\u0438\u0444\u0440\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f,  \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f\u043c.<\/p>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 HTML + jinja \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0439 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u043a\u043d\u0435 Handlebars Template:<\/strong>  <\/p>\n<pre><code class=\"xml\">&lt;div class=\"card-container\"&gt;     {{#each data}}     &lt;div class=\"card-row\"&gt;         &lt;div class=\"card-column center\"&gt;             &lt;div class=\"text\"&gt;\u0415\u043c\u043a\u043e\u0441\u0442\u044c&lt;\/div&gt;             &lt;div class=\"text\"&gt;\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/6p0SwTB0\/icons8-100.png\"                   alt=\"\u0428\u043a\u043e\u043b\u0430\" class=\"icon\"&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;div class=\"metric\"&gt;{{metric1}}&lt;\/div&gt;             &lt;div class=\"label\"&gt;\u041c\u0435\u0441\u0442 \u0432 \u0414\u041e\u041e&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/XJSZx1dp\/icons8-80.png\"                   alt=\"\u0414\u0435\u0442\u0441\u043a\u0438\u0439 \u0441\u0430\u0434\" class=\"icon\"&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;div class=\"metric\"&gt;{{metric2}}&lt;\/div&gt;             &lt;div class=\"label\"&gt;\u041c\u0435\u0441\u0442 \u0432 \u0421\u041e\u0428&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     {{\/each}} &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 CSS \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043a\u043d\u0430:<\/strong>  <\/p>\n<pre><code class=\"css\">.card-container {     display: flex;     flex-direction: column;     border-radius: 12px;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     transition: transform 0.3s ease, box-shadow 0.3s ease;     cursor: pointer;     justify-content: center; } .card-row {     display: flex;         justify-content: center;     align-items: center;     padding: 0.6em;     border: 1px solid #ddd;     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card-column {     text-align: center;     padding: 0% 1%;     transition: transform 0.3s ease; } .card-column.center {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; } .card-container:hover .card-column {     transform: scale(1.05); } .text {     font-size: 1.3em;     font-weight: bold; } .metric {   font-size: 2em;     font-weight: bolder;   color: #c90808;   margin-bottom: 2%;   position: relative;   display: inline-block; } .label {     font-size: 1em;      color: #777777;     transition: color 0.3s ease; } .card-container:hover .label {     color: #555555; } .icon {     transition: opacity 0.3s ease;     min-width: 50px;     min-height: 50px;     margin: 1% 0%;     opacity: 1; } .card-container:hover .icon {     opacity: 0.2; }<\/code><\/pre>\n<p><em>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 css \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e web-\u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442<\/em><\/p>\n<pre><code class=\"css\">\/*\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a*\/ .card-container {     \/*flexbox \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a) \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430*\/     display: flex;     \/*\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     flex-direction: column;     \/*\u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     border-radius: 12px;     \/*\u0442\u0435\u043d\u044c*\/     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     \/*\u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u0442\u0435\u043d\u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438*\/     \/*\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438)*\/     transition: transform 0.3s ease, box-shadow 0.3s ease;     \/*\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     cursor: pointer;     \/*\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     justify-content: center; }  \/*\u0421\u0442\u0440\u043e\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/ .card-row {     display: flex;         justify-content: center;     \/*\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     align-items: center;     \/*\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043f\u043e\u043b\u044f*\/     padding: 0.6em;     \/*\u0433\u0440\u0430\u043d\u0438\u0446\u0430*\/      border: 1px solid #ddd;     \/*\u0442\u0435\u043d\u044c*\/     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }  \/*\u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a*\/ .card-column {     \/*\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430*\/     text-align: center;     \/*\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b*\/     padding: 0% 1%;     \/*\u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438*\/     \/*(\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0430\u0441\u0448\u0442\u0430\u0431) \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 0.3 \u0441\u0435\u043a\u0443\u043d\u0434*\/     transition: transform 0.3s ease; }  \/*\u041a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f*\/ \/*\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u0430\u043a \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e, \u0442\u0430\u043a \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e*\/ .card-column.center {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; }  \/*\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438*\/ .card-container:hover .card-column {     \/*\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 5% \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 0,3 \u0441\u0435\u043a\u0443\u043d\u0434*\/     transform: scale(1.05);   }  \/*\u0422\u0435\u043a\u0441\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430*\/ .text {     \/*\u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430, \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e*\/     font-size: 1.3em;     \/*\u0436\u0438\u0440\u043d\u043e\u0435 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435*\/     font-weight: bold; }  \/*\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438*\/ .metric {   font-size: 2em;     font-weight: bolder;   \/*\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442*\/   color: #c90808;   \/*\u043d\u0438\u0436\u043d\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f*\/   margin-bottom: 2%;   \/*\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435*\/   position: relative;   \/*\u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u043e\u0447\u043d\u043e-\u0431\u043b\u043e\u0447\u043d\u044b\u043c*\/   display: inline-block; }  \/*\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a*\/ .label {     font-size: 1em;     \/*\u0441\u0435\u0440\u044b\u0439 \u0446\u0432\u0435\u0442*\/     color: #777777;     \/*\u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 0,3 \u0441\u0435\u043a\u0443\u043d\u0434*\/     transition: color 0.3s ease; }  \/*\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438*\/ .card-container:hover .label {     color: #555555; \/*\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0442\u0435\u043c\u043d\u043e-\u0441\u0435\u0440\u044b\u0439*\/   }  \/*\u0418\u043a\u043e\u043d\u043a\u0438*\/ .icon {     \/*\u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f*\/     transition: opacity 0.3s ease;     \/*\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430*\/     min-width: 50px;     \/*\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430*\/     min-height: 50px;     \/*\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b*\/     margin: 1% 0%;     \/*\u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c *\/     opacity: 1; }  \/*\u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443*\/ .card-container:hover .icon {     \/*\u0438\u043a\u043e\u043d\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043a \u0446\u0438\u0444\u0440\u0430\u043c*\/     opacity: 0.2; }<\/code><\/pre>\n<h2>\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d<\/h2>\n<div class=\"floating-image\">\n<figure class=\"float\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/fe1\/332\/e8b\/fe1332e8b269710196b2576e749c0944.jpg\" alt=\"\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430\u043c\u0438\" title=\"\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430\u043c\u0438\" width=\"213\" height=\"729\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe1\/332\/e8b\/fe1332e8b269710196b2576e749c0944.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c (<strong>metric1<\/strong>) + \u043f\u043b\u0430\u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c (<strong>plan1<\/strong>) \u0441 \u043f\u043e\u043b\u043e\u0441\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0441 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u043c (<strong>percentage1<\/strong>) \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435: <em>percentage = (metric \/ plan) * 100. <\/em><\/p>\n<p>\u0421\u0430\u0439\u0442\u043e\u0432 \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0444\u043e\u0442\u043e, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b, gif.<\/p>\n<p>\u042f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u0438\u043c \u0441\u0430\u0439\u0442\u043e\u043c \u0441 <a href=\"https:\/\/icons8.ru\/icons\/\" rel=\"noopener noreferrer nofollow\">\u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438<\/a> \u0438 <a href=\"https:\/\/postimages.org\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c<\/a>  \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.<\/p>\n<\/div>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 HTML + jinja \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0439 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u043a\u043d\u0435 Handlebars Template:<\/strong>  <\/p>\n<pre><code class=\"xml\">&lt;div class=\"card-container\"&gt;     {{#each data}}     &lt;div class=\"card\"&gt;         &lt;div class=\"text\"&gt;\u0414\u0418\u041d\u0410\u041c\u0418\u041a\u0410 \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0418&lt;\/div&gt;         &lt;div class=\"indicator\"&gt;             &lt;div class=\"label1\"&gt;\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441&lt;\/div&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/Kzf4y6d9\/icons8-80.png\"                   alt=\"\u0418\u043a\u043e\u043d\u043a\u0430 1\" class=\"icon\"&gt;             &lt;div class=\"metric\"&gt;{{metric1}} \/ {{plan1}}&lt;\/div&gt;             &lt;div class=\"progress-bar\"&gt;                 &lt;div class=\"progress1\" style=\"width: {{percentage1}}%;\"&gt;&lt;\/div&gt;             &lt;\/div&gt;             &lt;div class=\"percentage1\"&gt;{{percentage1}}%&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"indicator\"&gt;             &lt;div class=\"label2\"&gt;\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441&lt;\/div&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/rmfyHSr3\/icons8-combo-chart-80-1.png\"                   alt=\"\u0418\u043a\u043e\u043d\u043a\u0430 2\" class=\"icon\"&gt;             &lt;div class=\"metric\"&gt;{{metric2}} \/ {{plan2}}&lt;\/div&gt;             &lt;div class=\"progress-bar\"&gt;                 &lt;div class=\"progress2\" style=\"width: {{percentage2}}%;\"&gt;&lt;\/div&gt;             &lt;\/div&gt;             &lt;div class=\"percentage2\"&gt;{{percentage2}}%&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"indicator\"&gt;             &lt;div class=\"label3\"&gt;\u0422\u0440\u0435\u0442\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441&lt;\/div&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/PrPJBFK4\/icons8-combo-chart-80.png\"                   alt=\"\u0418\u043a\u043e\u043d\u043a\u0430 3\" class=\"icon\"&gt;             &lt;div class=\"metric\"&gt;{{metric3}} \/ {{plan3}}&lt;\/div&gt;             &lt;div class=\"progress-bar\"&gt;                 &lt;div class=\"progress3\" style=\"width: {{percentage3}}%;\"&gt;&lt;\/div&gt;             &lt;\/div&gt;             &lt;div class=\"percentage3\"&gt;{{percentage3}}%&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     {{\/each}} &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 CSS \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043a\u043d\u0430:<\/strong>  <\/p>\n<pre><code class=\"css\">.card-container {     display: flex;     flex-wrap: wrap;     justify-content: center;     width: 100%;     height: 100%;     padding: 1%;     box-sizing: border-box; } .card {     background-color: #fff;     padding: 5%;     margin-bottom: 1% 1% 7% 1%;     box-sizing: border-box;     flex: 1 0.7 calc(33.333% - 7%);     min-width: 160px;     display: flex;     flex-direction: column;     align-items: center; } .text {     color: #2b669e;     text-align: center;     font-size: 0.9em;     font-weight: bolder;     margin-bottom: 0.7em; } .indicator {     align-items: center;     margin-bottom: 1em;       display: flex;     flex-direction: column;       border: solid 1px lightgray;     border-radius: 12px;     padding: 1em 0.8em 0.4em 0.8em;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); } .icon {     width: 5em;     height: 5em;     min-width: 60px;     min-height: 60px;     border-radius: 12px;     margin-bottom: 5%; } .metric {     font-size: 1.3em;     margin-top: 1%;     font-weight: bolder; } .label1 {     font-size: 1em;     color: #3ba272;     font-weight: bolder;     margin-bottom: 0.7em; } .label2 {     font-size: 1em;     color: #d9754a;     font-weight: bolder;     margin-bottom: 0.7em; } .label3 {     font-size: 1em;     color: #60a7bd;     font-weight: bolder;     margin-bottom: 0.7em; } .progress-bar {     width: 80%;     background-color: #e0e0de;     border-radius: 10px;     overflow: hidden;     height: 1.5em;     margin: 5% 0; } .progress1 {     background-color: #3ba272;     height: 100%; } .percentage1 {     font-size: 1.1em;     font-weight: bold;     color: #3ba272;     margin-bottom: 0.3em; } .progress2 {     background-color: #d9754a;     height: 100%; } .percentage2 {     font-size: 1.1em;     font-weight: bold;     color: #d9754a;     margin-bottom: 0.3em; } .progress3 {     background-color: #60a7bd;     height: 100%; } .percentage3 {     font-size: 1.1em;     font-weight: bold;     color: #0690ba;     margin-bottom: 0.3em; }<\/code><\/pre>\n<p><em>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 css \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e web-\u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442<\/em><\/p>\n<pre><code class=\"css\">\/* \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a *\/ .card-container {     \/*flexbox \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430*\/     display: flex;     \/*\u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443,*\/     \/*\u0435\u0441\u043b\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     flex-wrap: wrap;     \/*\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     justify-content: center;     \/*\u0432\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430*\/     width: 100%;     \/*\u0432\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430*\/     height: 100%;     \/*\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0441\u043e \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u0440\u043e\u043d, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e*\/     \/*\u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438*\/     padding: 1%;     \/*\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u043e\u0432 \u0438 \u0431\u043e\u0440\u0434\u0435\u0440\u043e\u0432 \u0432 \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438*\/     \/*\u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432*\/     box-sizing: border-box; }  \/* \u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 *\/ .card {     \/*\u0431\u0435\u043b\u044b\u0439 \u0444\u043e\u043d \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     background-color: #fff;     \/*\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b*\/     padding: 5%;     \/*\u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b*\/     margin-bottom: 1% 1% 7% 1%;     box-sizing: border-box;     \/*\u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c: \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e + \u0441\u0436\u0430\u0442\u0438\u0435,*\/     \/*\u043d\u043e \u0434\u043e 0.7 + \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438: \u0442\u0440\u0435\u0442\u044c \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043c\u0438\u043d\u0443\u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u044b*\/     flex: 1 0.7 calc(33.333% - 7%);     \/*\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430*\/     min-width: 160px;     display: flex;     \/*\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     flex-direction: column;     \/*\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     align-items: center; }  \/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 *\/ .text {     \/*\u0442\u0435\u043c\u043d\u043e-\u0441\u0438\u043d\u0438\u0439 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 *\/     color: #2b669e;     \/*\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430*\/     text-align: center;     \/*\u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e*\/     font-size: 0.9em;     \/*\u0436\u0438\u0440\u043d\u043e\u0435 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435*\/     font-weight: bolder;     \/*\u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043d\u0438\u0437\u0443 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043e\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432*\/     margin-bottom: 0.7em; }  \/*\u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438*\/ .indicator {     \/*\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     align-items: center;     margin-bottom: 1em;       display: flex;     flex-direction: column;     \/*\u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 1 \u043f\u0438\u043a\u0441\u0435\u043b\u044c*\/     border: solid 1px lightgray;     \/*\u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 \u043e\u0431\u0432\u043e\u0434\u043a\u0438*\/     border-radius: 12px;     padding: 1em 0.8em 0.4em 0.8em;     \/*\u0442\u0435\u043d\u044c*\/     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); }  \/*\u0418\u043a\u043e\u043d\u043a\u0438*\/ .icon {     \/*\u0448\u0438\u0440\u0438\u043d\u0430 \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u043a \u0448\u0440\u0438\u0444\u0442\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f*\/     width: 5em;     \/*\u0432\u044b\u0441\u043e\u0442\u0430 \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u043a \u0448\u0440\u0438\u0444\u0442\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f*\/     height: 5em;     \/*\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430*\/     min-width: 60px;     \/*\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430*\/     min-height: 60px;     \/*\u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 \u0438\u043a\u043e\u043d\u043a\u0438 \u2013 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430*\/     border-radius: 12px;     margin-bottom: 5%; }  \/*\u041c\u0435\u0442\u0440\u0438\u043a\u0438*\/ .metric {     \/*\u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u043c\u0435\u0442\u043a\u0438 \u2013 \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439*\/     font-size: 1.3em;     \/*\u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u0432\u0435\u0440\u0445\u0443*\/     margin-top: 1%;     font-weight: bolder; }  \/*\u041c\u0435\u0442\u043a\u0430 \u043a \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435*\/ .label1 {     font-size: 1em;     color: #3ba272;     font-weight: bolder;     margin-bottom: 0.7em; }  \/*\u041c\u0435\u0442\u043a\u0430 \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435*\/ .label2 {     font-size: 1em;     color: #d9754a;     font-weight: bolder;     margin-bottom: 0.7em; }  \/*\u041c\u0435\u0442\u043a\u0430 \u043a \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435*\/ .label3 {     font-size: 1em;     color: #60a7bd;     font-weight: bolder;     margin-bottom: 0.7em; }  \/*\u041f\u043e\u043b\u043e\u0441\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u043e\u0432 \u0441 \u0441\u0435\u0440\u043e\u0439 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439*\/ .progress-bar {     \/*\u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u0430\u0440\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     width: 80%;     \/*\u0441\u0435\u0440\u044b\u0439 \u0446\u0432\u0435\u0442 \u0446\u0432\u0435\u0442\u0430 \u0431\u0430\u0440\u0430 \u0431\u0435\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439*\/     background-color: #e0e0de;     \/*\u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0431\u0430\u0440\u0430*\/     border-radius: 10px;     \/*\u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0432\u044b\u0445\u043e\u0434\u044f\u0449\u0443\u044e*\/     \/*\u0437\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430)*\/     overflow: hidden;     \/*\u0432\u044b\u0441\u043e\u0442\u0430 \u043f\u043e\u043b\u043e\u0441\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430*\/     height: 1.5em;     \/*\u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u0441\u043d\u0438\u0437\u0443*\/     margin: 5% 0; }  \/*\u041e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 1-\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430*\/ .progress1 {     background-color: #3ba272;     height: 100%; }  \/*\u0426\u0438\u0444\u0440\u0430 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435*\/ .percentage1 {     font-size: 1.1em;     font-weight: bold;     color: #3ba272;     margin-bottom: 0.3em; }  \/*\u041e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 2-\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430*\/ .progress2 {     background-color: #d9754a;     height: 100%; }  \/*\u0426\u0438\u0444\u0440\u0430 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430 \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435*\/ .percentage2 {     font-size: 1.1em;     font-weight: bold;     color: #d9754a;     margin-bottom: 0.3em; }  \/*\u041e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 3-\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430*\/ .progress3 {     background-color: #60a7bd;     height: 100%; }    \/*\u0426\u0438\u0444\u0440\u0430 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430 \u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435*\/ .percentage3 {     font-size: 1.1em;     font-weight: bold;     color: #0690ba;     margin-bottom: 0.3em; }<\/code><\/pre>\n<p>\u041f\u0430\u0440\u0443 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e\u0432\u0442\u043e\u0440\u044e:<\/p>\n<ul>\n<li>\n<p>\u043d\u0443\u0436\u043d\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u0432 \u043e\u043a\u043d\u0430\u0445, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0432 \u0441\u0442\u0440\u043e\u043a\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p>\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 css \u043b\u0443\u0447\u0448\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e, \u0442.\u043a. \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0432\u0441\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043d\u0430 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0435 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432 \u043a\u043e\u0434\u0435, \u0430 \u044d\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u0430\u043c.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/853476\/\"> https:\/\/habr.com\/ru\/articles\/853476\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\">\n<div><figcaption>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b Handlebars \u0434\u043b\u044f Apache Superset<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438\u0447\u0438\u043d\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Handlebars \u0434\u043b\u044f Superset \u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 <a href=\"https:\/\/habr.com\/ru\/articles\/851756\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b.<\/p>\n<blockquote>\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0430\u044e \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 Html + CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c (\u0442.\u043a. \u0435\u0441\u0442\u044c \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a \u043b\u044e\u0431\u044b\u043c \u043b\u0438\u0448\u043d\u0438\u043c \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c), \u0430 \u0437\u0430\u0442\u0435\u043c CSS \u0441 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/blockquote>\n<h2>\u0422\u0440\u0435\u0442\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d<\/h2>\n<p>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u044f  \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u043a\u043e\u043d\u043e\u043a 80*80. \u041f\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0435\u0442\u043a\u0435 \u0432 12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u044d\u0442\u043e\u0442 \u0433\u0440\u0430\u0444\u0438\u043a \u0437\u0430\u0439\u043c\u0435\u0442 3 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438, \u0430 \u0442\u0435\u043a\u0441\u0442 \u0438 \u0446\u0438\u0444\u0440\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f,  \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f\u043c.<\/p>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 HTML + jinja \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0439 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u043a\u043d\u0435 Handlebars Template:<\/strong>  <\/p>\n<pre><code class=\"xml\">&lt;div class=\"card-container\"&gt;     {{#each data}}     &lt;div class=\"card-row\"&gt;         &lt;div class=\"card-column center\"&gt;             &lt;div class=\"text\"&gt;\u0415\u043c\u043a\u043e\u0441\u0442\u044c&lt;\/div&gt;             &lt;div class=\"text\"&gt;\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/6p0SwTB0\/icons8-100.png\"                   alt=\"\u0428\u043a\u043e\u043b\u0430\" class=\"icon\"&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;div class=\"metric\"&gt;{{metric1}}&lt;\/div&gt;             &lt;div class=\"label\"&gt;\u041c\u0435\u0441\u0442 \u0432 \u0414\u041e\u041e&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/XJSZx1dp\/icons8-80.png\"                   alt=\"\u0414\u0435\u0442\u0441\u043a\u0438\u0439 \u0441\u0430\u0434\" class=\"icon\"&gt;         &lt;\/div&gt;         &lt;div class=\"card-column center\"&gt;             &lt;div class=\"metric\"&gt;{{metric2}}&lt;\/div&gt;             &lt;div class=\"label\"&gt;\u041c\u0435\u0441\u0442 \u0432 \u0421\u041e\u0428&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     {{\/each}} &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 CSS \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043a\u043d\u0430:<\/strong>  <\/p>\n<pre><code class=\"css\">.card-container {     display: flex;     flex-direction: column;     border-radius: 12px;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     transition: transform 0.3s ease, box-shadow 0.3s ease;     cursor: pointer;     justify-content: center; } .card-row {     display: flex;         justify-content: center;     align-items: center;     padding: 0.6em;     border: 1px solid #ddd;     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card-column {     text-align: center;     padding: 0% 1%;     transition: transform 0.3s ease; } .card-column.center {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; } .card-container:hover .card-column {     transform: scale(1.05); } .text {     font-size: 1.3em;     font-weight: bold; } .metric {   font-size: 2em;     font-weight: bolder;   color: #c90808;   margin-bottom: 2%;   position: relative;   display: inline-block; } .label {     font-size: 1em;      color: #777777;     transition: color 0.3s ease; } .card-container:hover .label {     color: #555555; } .icon {     transition: opacity 0.3s ease;     min-width: 50px;     min-height: 50px;     margin: 1% 0%;     opacity: 1; } .card-container:hover .icon {     opacity: 0.2; }<\/code><\/pre>\n<p><em>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 css \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e web-\u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442<\/em><\/p>\n<pre><code class=\"css\">\/*\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a*\/ .card-container {     \/*flexbox \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a) \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430*\/     display: flex;     \/*\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     flex-direction: column;     \/*\u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     border-radius: 12px;     \/*\u0442\u0435\u043d\u044c*\/     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     \/*\u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u0442\u0435\u043d\u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438*\/     \/*\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438)*\/     transition: transform 0.3s ease, box-shadow 0.3s ease;     \/*\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/     cursor: pointer;     \/*\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     justify-content: center; }  \/*\u0421\u0442\u0440\u043e\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438*\/ .card-row {     display: flex;         justify-content: center;     \/*\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438*\/     align-items: center;     \/*\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043f\u043e\u043b\u044f*\/     padding: 0.6em;     \/*\u0433\u0440\u0430\u043d\u0438\u0446\u0430*\/      border: 1px solid #ddd;     \/*\u0442\u0435\u043d\u044c*\/     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }  \/*\u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a*\/ .card-column {     \/*\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430*\/     text-align: center;     \/*\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b*\/     padding: 0% 1%;     \/*\u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438*\/     \/*(\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0430\u0441\u0448\u0442\u0430\u0431) \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 0.3 \u0441\u0435\u043a\u0443\u043d\u0434*\/     transition: transform 0.3s ease; }  \/*\u041a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f*\/ \/*\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u0430\u043a \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e, \u0442\u0430\u043a \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e*\/ .card-column.center {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; }  \/*\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438*\/ .card-container:hover .card-column {     \/*\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 5% \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 0,3 \u0441\u0435\u043a\u0443\u043d\u0434*\/     transform: scale(1.05);   }  \/*\u0422\u0435\u043a\u0441\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430*\/ .text {     \/*\u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430, \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e*\/     font-size: 1.3em;     \/*\u0436\u0438\u0440\u043d\u043e\u0435 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435*\/     font-weight: bold; }  \/*\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438*\/ .metric {   font-size: 2em;     font-weight: bolder;   \/*\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442*\/   color: #c90808;   \/*\u043d\u0438\u0436\u043d\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f*\/   margin-bottom: 2%;   \/*\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435*\/   position: relative;   \/*\u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u043e\u0447\u043d\u043e-\u0431\u043b\u043e\u0447\u043d\u044b\u043c*\/   display: inline-block; }  \/*\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a*\/ .label {     font-size: 1em;     \/*\u0441\u0435\u0440\u044b\u0439 \u0446\u0432\u0435\u0442*\/     color: #777777;     \/*\u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 0,3 \u0441\u0435\u043a\u0443\u043d\u0434*\/     transition: color 0.3s ease; }  \/*\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438*\/ .card-container:hover .label {     color: #555555; \/*\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0442\u0435\u043c\u043d\u043e-\u0441\u0435\u0440\u044b\u0439*\/   }  \/*\u0418\u043a\u043e\u043d\u043a\u0438*\/ .icon {     \/*\u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f*\/     transition: opacity 0.3s ease;     \/*\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430*\/     min-width: 50px;     \/*\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430*\/     min-height: 50px;     \/*\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b*\/     margin: 1% 0%;     \/*\u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c *\/     opacity: 1; }  \/*\u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443*\/ .card-container:hover .icon {     \/*\u0438\u043a\u043e\u043d\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043a \u0446\u0438\u0444\u0440\u0430\u043c*\/     opacity: 0.2; }<\/code><\/pre>\n<h2>\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d<\/h2>\n<div class=\"floating-image\">\n<figure class=\"float\">\n<div><figcaption>\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c (<strong>metric1<\/strong>) + \u043f\u043b\u0430\u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c (<strong>plan1<\/strong>) \u0441 \u043f\u043e\u043b\u043e\u0441\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0441 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u043c (<strong>percentage1<\/strong>) \u043f\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435: <em>percentage = (metric \/ plan) * 100. <\/em><\/p>\n<p>\u0421\u0430\u0439\u0442\u043e\u0432 \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0444\u043e\u0442\u043e, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b, gif.<\/p>\n<p>\u042f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u0438\u043c \u0441\u0430\u0439\u0442\u043e\u043c \u0441 <a href=\"https:\/\/icons8.ru\/icons\/\" rel=\"noopener noreferrer nofollow\">\u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438<\/a> \u0438 <a href=\"https:\/\/postimages.org\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c<\/a>  \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.<\/p>\n<\/div>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 HTML + jinja \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0439 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u043a\u043d\u0435 Handlebars Template:<\/strong>  <\/p>\n<pre><code class=\"xml\">&lt;div class=\"card-container\"&gt;     {{#each data}}     &lt;div class=\"card\"&gt;         &lt;div class=\"text\"&gt;\u0414\u0418\u041d\u0410\u041c\u0418\u041a\u0410 \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0418&lt;\/div&gt;         &lt;div class=\"indicator\"&gt;             &lt;div class=\"label1\"&gt;\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441&lt;\/div&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/Kzf4y6d9\/icons8-80.png\"                   alt=\"\u0418\u043a\u043e\u043d\u043a\u0430 1\" class=\"icon\"&gt;             &lt;div class=\"metric\"&gt;{{metric1}} \/ {{plan1}}&lt;\/div&gt;             &lt;div class=\"progress-bar\"&gt;                 &lt;div class=\"progress1\" style=\"width: {{percentage1}}%;\"&gt;&lt;\/div&gt;             &lt;\/div&gt;             &lt;div class=\"percentage1\"&gt;{{percentage1}}%&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"indicator\"&gt;             &lt;div class=\"label2\"&gt;\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441&lt;\/div&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/rmfyHSr3\/icons8-combo-chart-80-1.png\"                   alt=\"\u0418\u043a\u043e\u043d\u043a\u0430 2\" class=\"icon\"&gt;             &lt;div class=\"metric\"&gt;{{metric2}} \/ {{plan2}}&lt;\/div&gt;             &lt;div class=\"progress-bar\"&gt;                 &lt;div class=\"progress2\" style=\"width: {{percentage2}}%;\"&gt;&lt;\/div&gt;             &lt;\/div&gt;             &lt;div class=\"percentage2\"&gt;{{percentage2}}%&lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"indicator\"&gt;             &lt;div class=\"label3\"&gt;\u0422\u0440\u0435\u0442\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441&lt;\/div&gt;             &lt;img src=\"https:\/\/i.postimg.cc\/PrPJBFK4\/icons8-combo-chart-80.png\"                   alt=\"\u0418\u043a\u043e\u043d\u043a\u0430 3\" class=\"icon\"&gt;             &lt;div class=\"metric\"&gt;{{metric3}} \/ {{plan3}}&lt;\/div&gt;             &lt;div class=\"progress-bar\"&gt;                 &lt;div class=\"progress3\" style=\"width: {{percentage3}}%;\"&gt;&lt;\/div&gt;             &lt;\/div&gt;             &lt;div class=\"percentage3\"&gt;{{percentage3}}%&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     {{\/each}} &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 CSS \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043a\u043d\u0430:<\/strong>  <\/p>\n<pre><code class=\"css\">.card-container {     display: flex;     flex-wrap: wrap;     justify-content: center;     width: 100%;     height: 100%;     padding: 1%;     box-sizing: border-box; } .card {     background-color: #fff;     padding: 5%;     margin-bottom: 1% 1% 7% 1%;     box-sizing: border-box;     flex: 1 0.7 calc(33.333% - 7%);     min-width: 160px;     display: flex;     flex-direction: column;     align-items: center; } .text {     color: #2b669e;     text-align: center;     font-size: 0.9em;     font-weight: bolder;     margin-bottom: 0.7em; } .indicator {     align-items: center;     margin-bottom: 1em;       display: flex;     flex-direction: column;       border: solid 1px lightgray;     border-radius: 12px;     padding: 1em 0.8em 0.4em 0.8em;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); } .icon {     width: 5em;     height: 5em;     min-width: 60px;     min-height: 60px;     border-radius: 12px;     margin-bottom: 5%; } .metric {     font-size: 1.3em;     margin-top: 1%;     font-weight: bolder; } .label1 {     font-size: 1em;     color: #3ba272;     font-weight: bolder;     margin-bottom: 0.7em; } .label2 {     font-size: 1em;     color: #d9754a;     font-weight: bolder;     margin-bottom: 0.7em; } .label3 {     font-size: 1em;     color: #60a7bd;     font-weight: bolder;     margin-bottom: 0.7em; } .progress-bar {     width: 80%;     background-color: #e0e0de;     border-radius: 10px;     overflow: hidden;     height: 1.5em;     margin: 5% 0; } .progress1 {     background-color: #3ba272;     height: 100%; } .percentage1 {     font-size: 1.1em;     font-weight: bold;     color: #3ba272;     margin-bottom: 0.3em; } .progress2 {     background-color: #d9754a;     height: 100%; } .percentage2 {     font-size: 1.1em;     font-weight: bold;     color: #d9754a;     margin-bottom: 0.3em; } .progress3 {     background-color: #60a7bd;     height: 100%; }<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-436722","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/436722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=436722"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/436722\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=436722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=436722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=436722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}