SuhEugene / Kvakabank better design

// ==UserScript==
// @name         Kvakabank better design
// @namespace    http://suheugene.ru/
// @version      1.0
// @description  Chanes Kvakabank's design
// @author       SuhEugene
// @match        https://kvakabank.ronandev.ru/*
// @match        http://kvakabank.ronandev.ru/*
// @grant        none
// @updateURL https://openuserjs.org/meta/SuhEugene/Kvakabank_better_design.meta.js
// @downloadURL https://openuserjs.org/install/SuhEugene/Kvakabank_better_design.user.js
// @license Apache-2.0
// @copyright 2020, SuhEugene (https://openuserjs.org/users/SuhEugene)
// ==/UserScript==

(function () {
  'use strict';
  /*     console.log("hi"); */
  if (window.self != window.top) return;

  if (/:\/\/kvakabank.ronandev.ru/.test(window.location.href)) {
    let newStyle = document.createElement('style');
    newStyle.innerHTML = `
h1, h2, h3, p, a, button, th, td, input {text-shadow:none!important;box-shadow:none!important;}
#main, #add, #table {padding: 1rem;border:1px solid rgba(255, 255, 255, .1);border-radius: 10px;background-color:rgba(0,0,0,.1);box-shadow:none!important}
#main > div {box-shadow: none!important;background-color:transparent!important;}
#main > div:first-child {display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;align-items:center;}
/*#main > div:first-child > h2 {width: 100%;}*/
#main > div:not(:first-child) {border-top:1px solid rgba(255, 255, 255, .1);border-radius:0!important;margin-top:3rem;}
#main > div:first-child img {display: none;}
#main > h1 {display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:center;}
#main > h1 > button {margin:0.2rem 1rem!important;}
button {color:black!important;box-shadow:none!important;background-color:#ffbb00!important;border-radius:10px!important;font-size:20px!important;outline:none!important;transition:box-shadow 0.3s;}
button.secondary {color:black!important;box-shadow:none!important;background-color:#eee!important;border-radius:10px!important;font-size:20px!important;outline:none!important;transition:box-shadow 0.3s;}
button:hover {box-shadow: 3px 3px 0 #eee!important}
button.secondary:hover {box-shadow: 3px 3px 0 #aaa!important}
button > * {box-shadow:none!important;text-shadow:none!important;color:rgba(0,0,0,.9)!important;font-weight:normal!important;}
button > span > i {margin-right:0.4rem;}
input + button, span + button, h2 + button {margin-top:1.7rem;}
.select2 + .select2-hidden-accessible + .select2 {display:none!important;}
.operation > h2, #add h2 {color:white;display:block;margin-bottom:0.5rem;font-size:20px;margin-top:1.7rem;font-weight:normal;}
.operation input + h3 {margin-top:0.2rem;font-size:15px;font-weight:normal;}
#add {display: inline-block;padding: 25px 3rem 25px 2rem!important;margin:auto;}
#table h1, #add h1 {font-size:25px;}
#table h2 {font-size:18px;}
body > div > h1 {font-size:35px!important;text-align: center;}
#table > button:last-of-type {float:none!important;display:block!important;margin:0 auto!important;margin-top:1.5rem!important;}
.la, .las {font-weight: 900!important;}
input {background-color:transparent;border:2px solid rgba(255,255,255,0.3);outline:none!important;padding:0.3rem;color:white;transition:border 0.2s;border-radius:4px;}
input:focus {border:2px solid #ffbb00}
`;
    let fontKit = document.createElement('link');
    fontKit.rel = "stylesheet";
    fontKit.href = "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css";
    document.head.appendChild(fontKit);
    document.head.appendChild(newStyle);
    while (document.body.innerHTML.indexOf("<br>") != -1) {
      document.getElementsByTagName("br")[0].parentNode.removeChild(document.getElementsByTagName("br")[0])
    }
    if (/:\/\/kvakabank.ronandev.ru\/zakaz/.test(window.location.href)) {
      let tableNode = document.querySelector("#table")
      let btnNode = tableNode.querySelector("button");
      btnNode.innerHTML = `<span><i class="las la-plus"></i>Создать заказ</span>`;
      tableNode.appendChild(btnNode);
      let mainBackButtonNode = document.body.querySelector("button");
      mainBackButtonNode.innerHTML = `<span><i class="las la-arrow-left"></i>Назад</span>`;
      mainBackButtonNode.style.float = null;
      mainBackButtonNode.style.marginRight = null;
      mainBackButtonNode.style.marginLeft = "2rem";
      let addNode = document.querySelector("#add");
      let backButtonNode = addNode.querySelector("button");
      backButtonNode.style.float = null;
      backButtonNode.style.marginRight = "1rem";
      backButtonNode.classList.add("secondary");
      backButtonNode.innerHTML = `<span><i class="las la-times"></i>Отмена</span>`
      addNode.appendChild(backButtonNode);
      let sendButtonNode = addNode.querySelector("button");
      sendButtonNode.innerHTML = `<span><i class="las la-plus"></i>Заказать</span>`
      addNode.appendChild(sendButtonNode);
      let mainDivNode = document.body.querySelector("div");
      mainDivNode.style.display = "flex";
      mainDivNode.style.flexDirection = "column";
      mainDivNode.querySelector("h1").appendChild(mainBackButtonNode);
    }
    else {
      let replacings = {
        "<b>Перевод</b>": `<span><i class="las la-exchange-alt"></i>Перевод</span>`,
        "<b>Вызов Банкира</b>": `<span><i class="las la-concierge-bell"></i>Вызов банкира</span>`,
        "<b>Заказы в КвакаБанке</b>": `<span><i class="las la-box"></i>Заказы в КвакаБанке</span>`,
        "<b>Севершить Перевод</b>": `<span><i class="las la-paper-plane"></i>&nbsp;Отправить</span>`,
        "<b>Вызвать Банкира</b>": `<span><i class="las la-check"></i>&nbsp;Вызвать</span>`
      }
      let btns = document.getElementsByTagName("button");
      for (let i = 0; i < btns.length; i++) {
        if (replacings[btns[i].innerHTML]) {
          if (replacings[btns[i].innerHTML].indexOf("&nbsp;") != -1) btns[i].style.display = "block";
          btns[i].innerHTML = replacings[btns[i].innerHTML];
        }
      }
      let oldBtnContainer = document.querySelector("#main").getElementsByTagName("h1")[2];
      let newBtnContainer = document.querySelector("#main").getElementsByTagName("h1")[1];
      newBtnContainer.innerHTML = newBtnContainer.innerHTML.replace("Доступные Операции:  ", "")
      let btn = oldBtnContainer.querySelector("button");
      newBtnContainer.appendChild(btn);
      oldBtnContainer.parentNode.removeChild(oldBtnContainer);
    }
  }
})();