Tabit

by bairog

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
    <style></style>
  </head>

  <body>
    <div class="header">
      <div>
        <span class="company">Лидер Инвест</span>
        <br>
        <span class="user">Николай Жарков</span>
      </div>
      <div>
        <img class="imgUser" width=50>
      </div>
    </div>


    <div class="containerFlex" style="padding-top: 40px;">
      <div class="curved" style="width: 33%;">УЧАСТИЕ В ТЕСТИРОВАНИИ</div>
      <div class="curved" style="width: 33%;">УРОВЕНЬ</div>
      <div class="curved" style="width: 33%;">ТЕКУЧЕСТЬ КАДРОВ</div>
    </div>

    <div class="containerFlex" style="height: 130px;">
      <div class="containerFlex" style="width: 33%;">
        <div class="curvedSmall" style="width: 50%; margin: 0px 10px 0px 0px;">
          <div style="color: #43dea6; font-size: 32px; font-weight: 300;">934</div>
          <img class="imgGreenUsers" width=35>
          <div style="color: #43dea6;">ПРОШЛИ</div>
        </div>
        <div class="curvedSmall" style="width: 50%; margin: 0px 0px 0px 10px;">
          <div style="color: #da4166; font-size: 32px; font-weight: 300;">66</div>
          <img class="imgRedUsers" width=35>
          <div style="color: #da4166;">НЕ ПРОШЛИ</div>
        </div>
      </div>

      <div class="curvedSmall" style="width: 33%;">
        <div>
          <img class="imgOk" width=40>
          <span>ДОВЕРИЯ - <span style="color: #43dea6;">ВЫСОКИЙ</span></span>
        </div>
        <div>
          <img class="imgStressed" width=40>
          <span>КОНФЛИКТНОСТИ - <span style="color: #da4166;">ВЫСОКИЙ</span></span>
        </div>
      </div>

      <div class="curvedSmall" style="width:...

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  outline: none;	
}

body {
  width: 100%;
  height: 100%;
  background-color: #0b0e13 !important;
  font-family: 'Lato', serif !important;	
}



div{
	/*border: 1px solid blue;*/	
}

img, span {
	vertical-align: middle
}


.imgUser {
    content:url(https://i.ibb.co/XWSdtxn/Group-3.png);
}

.imgOk {
    content:url(https://i.ibb.co/hgyhPss/Check-Circle-Icon-1.png);
}

.imgNeutral {
    content:url(https://i.ibb.co/fDrqdT3/Thumbs-Up-Down-Icon-1.png);
}

.imgStressed {
    content:url(https://i.ibb.co/dbMgc9v/Assignment-Late-Icon-1.png);
}

.imgGreenUsers {
    content:url(https://i.ibb.co/PjL5GTM/Supervisor-Account-Icon-31.png);
}

.imgYellowUsers {
    content:url(https://i.ibb.co/py0n8jk/Supervisor-Account-Icon-8.png);
}

.imgRedUsers {
    content:url(https://i.ibb.co/GFRMrkJ/Supervisor-Account-Icon-34.png);
}

.imgBlueUsers {
    content:url(https://i.ibb.co/f2jLsGK/Supervisor-Account-Icon-14.png);
}

.imgOrangeUsers {
    content:url(https://i.ibb.co/FnTXypz/Supervisor-Account-Icon-9.png);
}

.imgGrayUsers {
    content:url(https://i.ibb.co/PchxHg3/Supervisor-Account-Icon-12.png);
}

.imgYellowSquare {
    content:url(https://i.ibb.co/YfFNt4p/image.png);
}

.imgBlueSquare {
    content:url(https://i.ibb.co/TH6pSTt/image.png);
}


.header {
  display: flex;
  justify-content: flex-end;
  background-color: #262e3a;
	line-height: normal;
}

.company {
  font-size: 24px;
  text-align: right;
  color: white;
}

.user {
  font-size: 18px;
	display: block;
  text-align: right;
  color: white;
}



.containerFlex {
  display: flex;
  /*border: 1px solid blue;*/
}

.borderBlue {
  border: 1px solid blue;
}

.containerFlex>div {
  /* border:1px blue solid;  */
  margin: 10px;
}

.curved {
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
 ...

JavaScript

function tableSearch() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

//This plugin registers itself globally, meaning that once imported, all charts will display labels. In case you want it enabled only for a few charts, you first need to unregister it globally:
Chart.plugins.unregister(ChartDataLabels);

//Then, you can enabled the plugin only for specific charts:
var barChartData = {
  labels: [""],
  datasets: [{
      label: "Воодушевлённые сотрудники",
      backgroundColor: "rgba(68,222,166,1)",
      barThickness: 30,
      //hoverBackgroundColor: "rgba(34,139,34,1)",
      data: [230]
    },
    {
      label: "Нейтральные сотрудники",
      backgroundColor: "#ed7506",
      barThickness: 30,
      //hoverBackgroundColor: "rgba(34,139,34,1)",
      data: [600]
    },
    {
      label: "Напряжённые сотрудники",
      barThickness: 30,
      backgroundColor: "rgba(218, 65, 102, 1)",
      //hoverBackgroundColor: "rgba(255, 0, 0, 1)",
      data: [170]
    }
  ]
};

var optionsBar = {
  maintainAspectRatio: false,
  animation: false,
  legend: false,
  events: [],
  title: {
    display: false
  },
  scales: {
    xAxes: [{
      stacked: true,
      display: false,
      ticks: {
        max: 1000
      }
    }],
    yAxes: [{
      stacked: true,
      display: false
    }]
  },
  plugins: {
    // Change options for ALL labels of THIS CHART
    datalabels: {
      color: 'black',
      align: 'start',
      anchor: 'end',
      font: {
        weight: 'bold'
      }
    }
 ...