icon Аналитика icon Настройки
Подписчики Операции Продукты
Еще

#Input Fields


  
    
<label class="def-fields text">
  <span class="def-fields-title">TEXT</span>
  <input type="email" class="def-fields-input" placeholder="_@_._">
  <span class="def-fields-text-body" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. quod recusandae, repellendus soluta, ut voluptate.
  </span>
  <img class="def-fields-icon" src="assets/icons/mail.svg" alt="email-icon">
</label>
    
  

    
      
   <label class="def-fields text disabled">
      <span class="def-fields-title">TEXT</span>
      <input type="email" class="def-fields-input" placeholder="_@_._">
      <span class="def-fields-text-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.repellendus soluta, ut voluptate.
      </span>
      <img class="def-fields-icon" src="assets/icons/mail.svg" alt="email-icon">
      <img class="def-fields-text-icon-edit" src="assets/icons/edit-input.svg" alt="key-icon">
    </label>
      
    
  

  
    
<label class="def-fields text disabled">
    <span class="def-fields-title">TEXT</span>
    <input type="email" class="def-fields-input" placeholder="_@_._">
    <span class="def-fields-text-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. quas quibusdam quod recusandae, repellendus soluta, ut voluptate.
    </span>
  </label>
    
  


  
    
<label class="def-fields def-fields-text">
  <span class="def-fields-title">E-mail</span>
  <input type="email" class="def-fields-input mask-email" placeholder="_@_._">
  <img class="def-fields-icon" src="assets/icons/mail.svg" alt="email-icon">
</label>
    
  



  
    
<label class="def-fields password">
  <span class="def-fields-title">Пароль</span>
  <input type="password" class="def-fields-input mask-password" placeholder="***********">
  <img class="def-fields-icon" src="assets/icons/key.svg" alt="key-icon">
</label>

Disabled input








  
    
<label class="filed-phone">
  <span class="filed-phone-countries">
    <img src="https://www.countryflagicons.com/FLAT/64/RU.png" alt="flag" width="30" class="filed-phone-countries-flag">
    <img src="assets/icons/down.svg" alt="down" class="filed-phone-countries-downIcon">
    <span class="filed-phone-numbers"></span>
  </span>
    <input class="filed-phone-country-code" value="+7" size="2" maxlength="5" />
    <input type="text" class="filed-phone-input" value="77769668">
    <span class="filed-phone-placeholder">Телефон</span>
    <img class="def-fields-icon-edit" src="assets/icons/edit-input.svg" alt="key-icon">
  </label>
    
  

  
    
<label class="def-fields">
  <span class="def-fields-title">Числовой одноразовый код</span>
  <input type="text" class="def-fields-input mask-one-key" placeholder="000–000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  


  
    
<label class="def-fields text">
  <span class="def-fields-title">ИФО</span>
  <input type="email" class="def-fields-input" placeholder="Иванов Иван Иванович">
  <span class="def-fields-text-body" contenteditable="true"></span>
  <img class="def-fields-icon" src="assets/icons/mail.svg" alt="email-icon">
</label>
      <p class="error-form d-none error-user-name-surname"></p>
    
  


  
    
<label class="def-fields">
  <span class="def-fields-title">ИНН ИП/Физлица</span>
  <input type="text" class="def-fields-input mask-physical" placeholder="0000000000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  



  
    
<label class="def-fields">
  <span class="def-fields-title">ИНН Юрлица</span>
  <input type="text" class="def-fields-input mask-jurlitsa" placeholder="0000000000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  


  
    
<label class="def-fields">
  <span class="def-fields-title">ОГРН</span>
  <input type="text" class="def-fields-input mask-orgn" placeholder="0000000000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  


  
    
<label class="def-fields">
  <span class="def-fields-title">ОГРНИП</span>
  <input type="text" class="def-fields-input mask-orgnip" placeholder="00000000000000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  


  
    
<label class="def-fields">
  <span class="def-fields-title">Ссылка</span>
  <input type="text" class="def-fields-input input-link" placeholder="mysite.ru">
  <img class="def-fields-icon" src="assets/icons/link.svg" alt="filed-icon">
</label>
    
  


  
    
<label class="def-fields">
  <span class="def-fields-title">Серия паспорта</span>
  <input type="text" class="def-fields-input mask-serial-passport" placeholder="00 00">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  


  
    
<label class="def-fields">
  <span class="def-fields-title">Номер паспорта</span>
  <input type="text" class="def-fields-input" placeholder="000000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  


  
    
<label class="def-fields">
  <span class="def-fields-title">БИК</span>
  <input type="text" class="def-fields-input mask-bik" placeholder="000000000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  



  
    
<label class="def-fields">
  <span class="def-fields-title">Расчетный счет</span>
  <input type="text" class="def-fields-input mask-checking-account" placeholder="00000000000000000000">
  <img class="def-fields-icon" src="assets/icons/check-mark.svg" alt="filed-icon">
</label>
    
  

  
    
<label class="def-fields">
  <span class="def-fields-title">Дата</span>
  <input type="date" class="def-fields-input" placeholder="00000000000000000000">
</label>

#Buttons



Normal buttons













  
    
<button class="btn-white loading-file-btn disabled" disabled>
  <img src="assets/icons/loading.svg" alt="arrow">
  Загружаем
</button>


#Switch


  
    
<label class="def-switch">
  <input type="checkbox">
  <span></span>
</label>


#Alerts



Стандартный текст и акцент со ссылкой 

  
    
<div class="alert success">
  <p>
    Стандартный текст и акцент со <a href="#">ссылкой</a>
  </p>
  <i class="icon" data-name="close"></i>
</div>


#Labels



flag Стандартный текст и акцент со ссылкой 
  
    
<div class="note big">
    <img src="assets/icons/russian-flag.svg" alt="flag">
    Стандартный текст и акцент со <a href="#">ссылкой</a>
</div>

flag Стандартный текст и акцент со ссылкой 
  
    
<div class="note warning">
  <img src="assets/icons/warning.svg" alt="flag">
  Стандартный текст и акцент со <a href="#">ссылкой</a>
</div>


#Buttons Status



Active status











Inactive status













#Pararaph



Вы в паре шагов от запуска продаж, осталось сделать несколько настроек. Процедура состоит из двух этапов:

Вы в паре шагов от запуска продаж, осталось сделать несколько настроек. Процедура состоит из двух этапов:

Вы в паре шагов от запуска продаж, осталось сделать несколько настроек. Процедура состоит из двух этапов:

rounded Стандартный текст и акцент со ссылкой

Стандартный текст и акцент со ссылкой -3

Стандартный текст

1 Диалоги с поддержкой
2 Диалоги с поддержкой
3 Диалоги с поддержкой


#Selects



  
    
<div class="def-select">
  <select data-title="СЕРИЯ ПАСПОРТА">
    <option value="text" data-subtitle="text-subtitle1">Text</option>
    <option value="text1" data-subtitle="text-subtitle1">Text1</option>
    <option value="text2" data-subtitle="text-subtitle2">Text2</option>
    <option value="text3" data-subtitle="text-subtitle3">Text3</option>
  </select>
  <div class="def-select-content"></div>
</div>


#Full Navbar Code



  
    
<nav class="navbar">
  <div class="navbar-content">
    <a href="index.html">
      <img src="assets/images/logo-site.svg" alt="logo site">
    </a>

    <div class="navbar-items">
      <a href="#" class="navbar-item">
        <i class="icon" data-name="users"></i>
        Подписчики
      </a>
      <a href="#" class="navbar-item">
        <i class="icon" data-name="money-cash"></i>
        Операции
      </a>
      <a href="#" class="navbar-item">
        <i class="icon" data-name="shipping-box"></i>
        Продукты
      </a>
      <div class="profile-dropdowns menu">
        <div class="profile-dropdowns-icon">
          <i class="icon" data-name="more-menu"></i>
          Еще
        </div>
        <div class="profile-dropdowns-toggle">
          <a href="#" class="profile-dropdowns-toggle-item">
            <img src="assets/icons/analytic.svg" alt="energi" class="profile-dropdowns-toggle-icon">
            Аналитика
          </a>
          <a href="#" class="profile-dropdowns-toggle-item">
            <img src="assets/icons/settigns.svg" alt="book" class="profile-dropdowns-toggle-icon">
            Настройки
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-usr-info">
      <a href="#">
        <div class="rocket-icon active">
          <img src="assets/icons/rocket.svg" alt="rocket" class="rocket-icon-green">
          <img src="assets/icons/rocket-black.svg" alt="rocket" class="rocket-icon-black">
        </div>
      </a>

      <div class="profile-dropdowns">
        <div class="profile-dropdowns-icon">
          <i class="icon" data-name="help"></i>
        </div>
        <div class="profile-dropdowns-toggle">
          <div class="profile-dropdowns-toggle-title">Справочная информация</div>
          <a href="#" class="profile-dropdowns-toggle-item">
            <img src="assets/icons/energi.svg" alt="energi" class="profile-dropdowns-toggle-icon">
            Мастер быстрой настройки
          </a>
          <a href="#" class="profile-dropdowns-toggle-item">
            <img src="assets/icons/book.svg" alt="book" class="profile-dropdowns-toggle-icon">
            База знаний Ainox
          </a>
          <div class="profile-dropdowns-toggle-title">Справочная информация</div>
          <a href="#" class="profile-dropdowns-toggle-item">
            <img src="assets/icons/send-message.svg" alt="book" class="profile-dropdowns-toggle-icon">
            Поддержка в Telegram
          </a>
          <a href="#" class="profile-dropdowns-toggle-item">
            <img src="assets/icons/help.svg" alt="help" class="profile-dropdowns-toggle-icon">
            Диалоги с поддержкой
          </a>
          <button class="btn-black">
            <img src="assets/icons/quation.svg" alt="quation" class="profile-dropdowns-toggle-icon">
            Создать обращение
          </button>
        </div>
      </div>

      <div class="profile-dropdowns">
        <div class="profile-dropdowns-icon">
          <i class="icon" data-name="user-profile"></i>
        </div>
        <div class="profile-dropdowns-toggle">
          <div class="profile-dropdowns-toggle-item">
            <img src="assets/icons/dark-mode.svg" alt="icon" class="profile-dropdowns-toggle-icon">
            Ночной режим
          </div>
          <div class="profile-dropdowns-toggle-item">
            <img src="assets/icons/dark-mode.svg" alt="icon" class="profile-dropdowns-toggle-icon">
            Выйти
          </div>
          <div class="profile-dropdowns-toggle-item">
            <img src="assets/icons/remove-account.svg" alt="book" class="profile-dropdowns-toggle-icon">
            Удалить аккаунт
          </div>
        </div>
      </div>

    </div>
  </div>
</nav>


<div class="mobile-menu-item-toggle" id="more">
  <a href="#" class="mobile-menu-item-toggle-item">
    <img src="assets/icons/analytic.svg" alt="icon">
    Аналитика
  </a>
  <a href="#" class="mobile-menu-item-toggle-item">
    <img src="assets/icons/settigns.svg" alt="icon">
    Настройки
  </a>
</div>

<div class="mobile-menu">
  <a href="#" class="mobile-menu-item">
    <i class="icon" data-name="users"></i>
    Подписчики
  </a>
  <a href="#" class="mobile-menu-item active">
    <i class="icon" data-name="money-cash"></i>
    Операции
  </a>
  <a href="#" class="mobile-menu-item">
    <i class="icon" data-name="shipping-box"></i>
    Продукты
  </a>
  <div class="mobile-menu-item" data-toggle="more">
    <i class="icon" data-name="more-menu"></i>
    Еще
  </div>
</div>