<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style/home/home-page.css">
  <link rel="stylesheet" href="./style/root.css">
  <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
    rel="stylesheet">
      <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

  <title>Home</title>
</head>
<body id="body">
  <div id="home">
    <div class="message-fixed">
      <span class="welcome-message">Привіт, <span id="name-onl"></span>👋</span>
    </div>
    <div class="content">
      <div class="header-top">
        <span id="mss1">Нові повідомлення</span>
      </div>
      <div class="header-top-top">
        <div class="new-notify">
          <div class="message" id="message-1">
            <span>Зверніть увагу</span>
            <span>До вашої Дії підключено новий <br> пристрій</span>
          </div>
          <div class="message" id="message-2">
            <span>Зверніть увагу</span>
            <span>До вашої Дії підключено новий <br> пристрій</span>
          </div>
          <div class="message" id="message-3">
            <span><i class='bx bx-bell'></i> Всі повідомлення</span>
          </div>
        </div>
        <div class="count-message">
          <span class="dot active" data-index="0"></span>
          <span class="dot" data-index="1"></span>
          <span class="dot" data-index="2"></span>
        </div>
      </div>
      <div class="header-bottom">
        <div class="nezlamnist">
          <span>Незламність</span>
          <span id="mapa-nez-box">Мапа Пунктів Незламнності та Укриттів</span>
          <div>
            <img src="./image/photo_2024-12-26_15-32-20.jpg" alt="Незламність">
            <i class='bx bxs-chevron-right-circle' id="right-right"></i>
          </div>
        </div>
      </div>
      <div class="header-bottom-bottom">
        <div class="qr-code">
          <div id="qr-code-img">
            <img src="./image/qr-code.jpg" alt="qr code">
          </div>
          <span>Сканувати <br> QR-код</span>
        </div>
        <div class="viyskovi-obligacii">
          <div id="viyskovi-obligacii-img">
            <img src="./image/viyskovi-obligacii.jpg" alt="Військові облігації">
          </div>
          <span>Військові <br> облігації</span>
        </div>
        <div class="chatbot-e-vorog">
          <div id="chatbot-e-vorog">
            <img src="./image/chatbot-e-vorog.jpf.jpg" alt="Чатбот єВорог">
          </div>
          <span> Чатбот <br> єВорог </span>
        </div>
      </div>
      <div class="card-1000grn">
        <img src="./image/card-1000.jpg" alt="1000грн єПідтримка">
      </div>
    
      <div class="news">
        <div class="news-top">
          <span>Що нового?</span>
        </div>
        <div class="news-top-top">
          <div class="news-notify">
            <div class="news" id="news-1">
              <img src="./image/news1.jpg" alt="">
            </div>
            <div class="news" id="news-2">
              <img src="./image/news2.jpg" alt="">
            </div>
            <div class="news" id="news-3">
              <img src="./image/together-news.jpg" alt="">
            </div>
          </div>
          <div class="count-news">
            <span class="new active" data-index="0"></span>
            <span class="new" data-index="1"></span>
            <span class="new" data-index="2"></span>
          </div>
        </div>
      </div>
    
      <div class="popularni-poslugy">
        <span>Популярні послуги</span>
    
        <div class="box-popularnyh-poslug">
          <div>
            <span>Реєстрація пошкодженого майна</span>
            <i class='bx bxs-chevron-right-circle'></i>
          </div>
          <hr>
          <div>
            <span>Заміна водійського посвідчення</span>
            <i class='bx bxs-chevron-right-circle'></i>
          </div>
          <hr>
          <div>
            <span>Податки ФОП</span>
            <i class='bx bxs-chevron-right-circle'></i>
          </div>
        </div>
      </div>
    
    </div>
  </div>

  <div id="document">
    <div id="list-document">

      <div class="document document-1 active">
        <div class="content-doc">
          <span id="nazva-doc">єДокумент</span>
          <div class="box-doc">
            <img src="" id="imaghe-user">
            <div id="block-data-of-birht">
              <span>Дата <br> народження: <br> <span id="data-birhday-1-1"></span></span>
              <span>РНОКПП: <br> <span id="data-rnokpp-1-1"></span></span>
            </div>
          </div>
          <div class="hr-line">
            <marquee behavior="scroll" id="line-span">
              <span style="font-family: 'UaUltraLight';">Документ діє під час воєнного стану. Ой у лузі червона калина похилилася, чогось наша славна Україна
                зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного
                стану.
                Ой у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину
                підіймемо, а
                ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей,
                гей,
                розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону
                калину
                підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну
                Україну,
                гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми
                тую
                червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного стану. Ой
                у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного
                стану.
                Ой у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину
                підіймемо, а
                ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей,
                гей,
                розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону
                калину
                підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну
                Україну,
                гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми
                тую
                червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного стану. Ой
                у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного
                стану.
                Ой у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину
                підіймемо, а
                ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей,
                гей,
                розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону
                калину
                підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну
                Україну,
                гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми
                тую
                червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо!</span>
            </marquee>
          </div>
          
          <div class="data-user">
            <span id="lastname"></span>
            <span id="name-1-user"></span>
            <div>
              <span id="otchestvo"></span>
              <i class='bx bx-dots-horizontal-rounded' id="open-menu-doc-1"></i>
            </div>
          </div>
        </div>
        <div class="content-ugol-doc">
          <img src="" id="qr-code-tt-1" style="width: 100%;border-radius: 16px;">
        </div>
      </div>
      <div id="menu-doc-1">
        <div class="menu-doc-1-block-active">
          <div>
            <div id="open-info-more--doc">
              <img src="./image/menu-doc/1.jpg" alt="">
            <span>Повна інформація</span>
          </div>
          <div>
            <img src="./image/menu-doc/2.jpg" alt="">
            <span>Код для перевірки</span>
          </div>
          <div>
            <img src="./image/menu-doc/3.jpg" alt="">
            <span>Оцінити документ</span>
          </div>
          <div>
            <img src="./image/menu-doc/4.jpg" alt="">
            <span>Змінити порядок документів</span>
          </div>
          <div>
            <img src="./image/menu-doc/5.jpg" alt="">
            <span>Питання та відповіді</span>
          </div>
          </div>
          <div>
            <button id="menu-doc-1-close">Закрити</button>
          </div>
        </div>
      </div>
      <div class="more-info-document-1">
        <div id="close-doc-1-menu"><span></span></div>
        <div class="doc-dta">
          <div class="head-logo">
            <span>єДокумент</span>
          </div>
          <div class="hr-line">
            <marquee behavior="scroll" id="line-span">
              <span style="font-family: 'UaUltraLight';">Документ діє під час воєнного стану. Ой у лузі червона калина похилилася, чогось наша славна Україна
                зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного
                стану.
                Ой у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину
                підіймемо, а
                ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей,
                гей,
                розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону
                калину
                підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну
                Україну,
                гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми
                тую
                червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного стану. Ой
                у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного
                стану.
                Ой у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину
                підіймемо, а
                ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей,
                гей,
                розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону
                калину
                підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну
                Україну,
                гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми
                тую
                червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного стану. Ой
                у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! Документ діє під час воєнного
                стану.
                Ой у лузі червона калина похилилася, чогось наша славна Україна зажурилася.
                А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину
                підіймемо, а
                ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей,
                гей,
                розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону
                калину
                підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну
                Україну,
                гей, гей, розвеселимо! А ми тую червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо! А ми
                тую
                червону калину підіймемо, а ми нашу славну Україну, гей, гей, розвеселимо!</span>
            </marquee>
          </div>
          <div class="ddc-dcc-d-1">
            <div class="ddt-ddc-more">
            <div class="n-l-o">
              <div id="name-lastname">
              <span id="lastname-info-more">dfds</span>
              <span id="name-info-more">dfds</span>
            </div>
            <span id="otchestvo-info-more">dfds</span>
            </div>
            <div id="name-lastname-en">
              <span id="lastname-men-en">df</span>
            </div>
            <div class="ddta-2">
              <img src="" alt="" id="user-more-info">
              <div id="blocx-2">
                <span>Дата <br> народження:</span>
                 <span>Death of birth</span>
                 <span id="ddta-birth-mor-info-doc-1">00.00.0000</span>
              </div>
            </div>
          </div>
          <div class="ddt-ddc-more-2">
            <div class="blocxx-1" style="font-size: 15px;">
              <span>Стать:</span>
              <span id="stat-ua">M</span>
            </div>
            <div class="blocxx-1" style="font-size: 13px;">
              <span>Sex:</span>
              <span id="stat-en" style="font-size: 13px;">M</span>
            </div>
            <div class="blocxx-1" style="width: 100%;margin-top: 10px;font-size: 16px;">
              <span>РНОКПП(ІПН):</span>
              <span id="rnokpp-mor-info-doc-1">5543556</span>
              <img src="./image/settings/8.jpg" alt="" style="width: 25px;">
            </div>
            <div class="blocxx-2" style="margin-top: 10px;display: flex;flex-direction: column;">
              <span id="document-data-psp">Документ що посвідчує особу: <br> Паспорт громадянина України</span>
              <span id="numr-pssp-2">453245342</span>
            </div>
          </div>
          <div class="ddt-dcc-more-2">
            <span id="city-of-birth-0data-info" style="width: 100%;
  word-break: break-all;
  word-wrap: break-word;font-size: 16px;">fdgdhgdfhgfdhrdgfdgdhgdfhgfdhrdgfdgdhgdfhgfdhrdgfdgdhgdfhgfdhrdgfdgdhgdfhgfdhrdgfdgdhgdfhgfdhrdgfdgdhgdfhgfdhrdg</span>
          </div>
          <div class="ddt-dcc-more-2" style="width: 100%;height: 200px;">
            <img src="" alt="" id="qr-code-random-doc-1" style="width: 100%;height: 200px;object-fit: cover;object-position: center;">
          </div>
          </div>
        </div>
      </div>

      <div class="document document-2">
        <div class="content-doc">
          <div style="display: flex;flex-direction:column;padding: 14px;">
            <div>
              <span
                style="font-size: 22px;font-family: 'Ubuntu', serif;font-weight: 400;font-style: normal;display:flex; flex-direction:column;">Карта
                платника <br> податків</span>
            </div>
            <div style="margin-top: 20px;margin-bottom: 20px;">
              <span style="margin-left: 15px;font-family: 'Ubuntu', serif;font-weight: 500; font-size:16px;">РНОКПП</span>
            </div>
            <div style="display: flex;margin-top: 10px;
                      flex-direction:column;margin-bottom:20px;font-size:15px; font-family: 'Ubuntu', serif;font-weight: 500;">
              <span id="first-name--2"></span>
              <span id="name-2-user"></span>
              <span id="otchestvo-2"></span>
            </div>
            <div>
              <span id="birhday"
                style="display: flex;
                      flex-direction:column;margin-bottom:20px;font-size:16px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 15px;font-weight: 500;">Дата
                народження: <br> <span id="birhday-2"></span></span>
            </div>
          </div>
          <div style="position:absolute;bottom:15px;">
            <div class="hr-line">
              <marquee behavior="scroll" id="line-span">
                <span style="font-family: 'UaUltraLight';">Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 |
                29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною
                податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ
                оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 •
                Перевірено державною податковою службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою
                службою • Документ оновлено о 16:10 | 29.12.2024 • Перевірено державною податковою службою • Документ оновлено о 16:10 |
                29.12.2024 • Перевірено державною податковою службою</span>
              </marquee>
            </div>
            <div style="padding: 14px;display:flex;justify-content:space-between;">
              <div style="display: flex;">
                <span
                  style="font-size: 30px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-weight:400;" id="rnokpp-2"></span>
              </div>
              <i class='bx bx-dots-horizontal-rounded' style="background-color: #000;
              color: #fff;
              border-radius: 100px;
              display: flex;
              width:30px;
              height:30px;
              font-size:16px;
              justify-content: center;
              align-items: center;
              text-align: center;
              padding: 4px;" id="open-menu-doc-2"></i>
            </div>
          </div>
        </div>
        <div class="content-ugol-doc">
          <img src="" id="qr-code-tt-2" style="width: 100%;border-radius: 16px;">
        </div>
      </div>
      <div id="menu-doc-2">
        <div class="menu-doc-2-block-active">
          <div>
            
          <div>
            <img src="./image/menu-doc/3.jpg" alt="">
            <span>Оцінити документ</span>
          </div>
          <div>
            <img src="./image/menu-doc/4.jpg" alt="">
            <span>Змінити порядок документів</span>
          </div>
          <div>
            <img src="./image/menu-doc/5.jpg" alt="">
            <span>Питання та відповіді</span>
          </div>
          <hr style="border: 1px solid #eee;">
          <div style="width: 100%;display: flex;justify-content: center;">
            <img src="./image/menu-doc/7.jpg" alt="" style="width: 200px;object-fit: cover;object-position: center;">
          </div>
          </div>
          <div>
            <button id="menu-doc-2-close">Закрити</button>
          </div>
        </div>
      </div>
 
      <div class="document document-3">
        <div class="content-doc">
          <span id="nazva-doc" style="display:flex;">Паспорт громадянина <br> України</span>
          <div class="box-doc" style="margin-top: 10px;">
            <img src="" id="image-users-passport-2">
            <div id="block-data-of-birht">
              <span>Дата <br> народження: <br> <span id="birhday-3"></span></span>
              <span style="margin-top:10px;">Номер: <br> <span id="nomer-psp"></span></span>
              <div src="" id="my-pidpys" style="width: 100px;height: 60px;margin-left:0px;border-radius:0;"></div>
            </div>
          </div>
          <div class="hr-line" style="margin-top: 8px;">
            <marquee behavior="scroll" id="line-span">
              <span>Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 |
              29.12.2024 • Документ оновлено о 15:08 | 29.12.2024 • Документ оновлено о 15:08 | 29.12.2024</span>
            </marquee>
          </div>
        
          <div class="data-user">
            <span id="lastname-3"></span>
            <span id="name-3-user"></span>
            <div>
              <span id="otchestvo-3"></span>
              <i class='bx bx-dots-horizontal-rounded' id="open-menu-doc-3"></i>
            </div>
          </div>
        </div>
        <div class="content-ugol-doc">
          <img src="" id="qr-code-tt-3" style="width: 100%;border-radius: 16px;">
        </div>
      </div>
      <div id="menu-doc-3">
        <div class="menu-doc-3-block-active">
          <div>
            <div>
              <img src="./image/menu-doc/1.jpg" alt="">
            <span>Повна інформація</span>
          </div>
          <hr style="border: 1px solid #eee;">
          <div>
            <img src="./image/menu-doc/6.jpg" alt="">
            <span>Витяг про місце проживання</span>
          </div>
          <hr style="border: 1px solid #eee;">
          <div>
            <img src="./image/menu-doc/2.jpg" alt="">
            <span>Код для перевірки</span>
          </div>
          <div>
            <img src="./image/menu-doc/3.jpg" alt="">
            <span>Оцінити документ</span>
          </div>
          <div>
            <img src="./image/menu-doc/4.jpg" alt="">
            <span>Змінити порядок документів</span>
          </div>
          <div>
            <img src="./image/menu-doc/5.jpg" alt="">
            <span>Питання та відповіді</span>
          </div>
          <hr style="border: 1px solid #eee;">
          <div style="width: 100%;display: flex;justify-content: center;">
            <img src="./image/menu-doc/7.jpg" alt="" style="width: 200px;object-fit: cover;object-position: center;">
            </div>
          </div>
          <div>
            <button id="menu-doc-3-close">Закрити</button>
          </div>
        </div>
      </div>
    </div>

    <div id="count-document">
      <span id="doc-1-c" class="active"></span>
      <span id="doc-2-c"></span>
      <span id="doc-3-c"></span>
    </div>
  </div>
 
  <!-- services -->
  <div id="services">
    <div class="message-services">
      <span class="welcome-message-services">Сервіси</span>
    </div>
    <div class="content-serv">
      <div class="search">
        <i class='bx bx-search'></i>
        <input type="text" placeholder="Пошук">
      </div>
      <div class="content-center-services">
        <div class="boxes-serv">
          <img src="./image/services/Help-for-the-army.jpg" alt="">
          <span>Допомога армії</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Winter-help.jpg" alt="">
          <span>Зимова єПідтримка</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Indestructibility.jpg" alt="">
          <span>Незламність</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Military bonds.jpg" alt="">
          <span>Військові облігації</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Join the drone army.jpg" alt="">
          <span>Вступити в Армію <br> дронів</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/National cashback.jpg" alt="">
          <span>Національний <br> кешбек</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Ebook.jpg" alt="">
          <span>єКнига</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Driver.jpg" alt="">
          <span>Водієві</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Poll.jpg" alt="">
          <span>Опитування</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Marriage online.jpg" alt="">
          <span>Шлюб онлайн</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Helped for IDPs.jpg" alt="">
          <span>Послуги для ВПО</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Taxes.jpg" alt="">
          <span>Податки</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Unemployment assistance.jpg" alt="">
          <span>Допомога по <br> безробіттю</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Court.jpg" alt="">
          <span>Судові послуги</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Notes and exceptions.jpg" alt="">
          <span>Довідки та витяги</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Gaming services.jpg" alt="">
          <span>Розваги</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Covid certificates.jpg" alt="">
          <span>COVID-сертифікати</span>
        </div>
        <div class="boxes-serv">
          <img src="./image/services/Return of deposits.jpg" alt="">
          <span>Повернення <br> вкладів</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- settings page -->
  <div id="profile">
    <div class="message-settings">
      <span class="welcome-message-settings">Меню</span>
      <span>Версія Дії: 4.15.0.1752</span>
    </div>
    <div class="settings-center">
      <div class="boxes-profile">
        <div>
          <img src="./image/settings/1.jpg" alt="">
          <span>Повідомлення</span>
        </div>
      </div>
      <div class="boxes-profile-2">
        <div style="border-radius:0;">
          <img src="./image/settings/2.jpg" alt="">
          <span>Дія.Підпис</span>
        </div>
        <hr style="border: 1px solid rgba(213, 231, 243);">
        <div style="border-radius:0;align-items: center;">
          <img src="/image/settings/3.jpg" alt="">
          <span>Історія підписань</span>
        </div>
      </div>
      <div class="boxes-profile-2">
        <div id="open-profile">
          <img src="./image/settings/4.jpg" alt="">
          <span>Налаштування</span>
        </div>
        <hr style="border: 1px solid rgba(213, 231, 243);">
        <div>
          <img src="./image/settings/5.jpg" alt="">
          <span>Оновити застосунок</span>
        </div>
        <hr style="border: 1px solid rgba(213, 231, 243);">
        <div>
          <img src="./image/settings/6.jpg" alt="">
          <span>Підключені пристрої</span>
        </div>
      </div>
      <div class="boxes-profile-2">
        <div>
          <img src="./image/settings/7.jpg" alt="">
          <span>Служба підтримки</span>
        </div>
        <hr style="border: 1px solid rgba(213, 231, 243);">
        <div>
          <img src="./image/settings/8.jpg" alt="">
          <span>Копіювати номер пристрою</span>
        </div>
        <hr style="border: 1px solid rgba(213, 231, 243);">
        <div>
          <img src="./image/settings/9.jpg" alt="">
          <span>Питання та відповіді</span>
        </div>
      </div>
    </div>
    <div class="button-settings">
      <button id="exit-user">Вийти</button>
    </div>
    <span id="text-fixed-settings-bottom">Повідомлення про обробку, персональних данних</span>

    <!-- profile page -->
    <div class="profile">
  <button id="ext-pr-st">Вийти з профіля</button>
  <div>
    <span style="margin-top: 20px;margin-bottom: 20px;">Вибачаюсь за дизайн скоро покращемо)</span>
    <span id="id-profile" style="margin-top: 20px;margin-bottom: 20px;"></span>
    <span><a id="gfdhdfgjhdf" style="margin-top: 5px;cursor: pointer;text-decoration: underline;" onclick="openAddIm()">Додати фото профіля</a></span>
    <input type="text" placeholder="Введіть ім'я" id="pr-name" style="margin-top: 10px;">
    <input type="text" placeholder="Введіть прізвище" id="pr-prizvysche">
    <input type="text" placeholder="По батькові" id="pr-po-batkovi">
    <select id="select-man-vomen">
      <option>Виберіть</option>
      <option id="men">Чоловік</option>
      <option id="vomen">Жінка</option>
    </select>
    <input type="text" name="" placeholder="введіть дату приклад: 01.01.2001" id="pr-date">
    <div>
        <button onclick="saveProfileData()">Зберегти дані</button>
        <button onclick="loadProfileData()">Завантажити дані</button>
    </div>
    <div style="margin-bottom: 150px;">
      <span>добавить підпис</span>
      <section class="signature-component">
        <canvas id="signature-pad" width="200" height="100"></canvas>
        <div>
          <button id="savee">Save</button>
          <button id="clear">Clear</button>
        </div>
      </section>
    </div>
  </div>
</div>
  </div>


  <!-- bottom menu -->
  <div class="menu-mobile">
    <ul>
      <li id="menu1">
        <img src="./image/menu/icons1.jpg" id="icon-menu-1">
        <img src="./image/menu/icons1-hover.jpg" id="icon-menu-1-hover">
        <a>Стрічка</a>
      </li>
      <li id="menu2">
        <img src="./image/menu/icons2.jpg" id="icon-menu-2">
        <img src="./image/menu/icons2-hover.jpg" id="icon-menu-2-hover">
        <a>Документи</a>
      </li>
      <li id="menu3">
        <img src="./image/menu/icons3.jpg" id="icon-menu-3">
        <img src="./image/menu/icons3-hover.jpg" id="icon-menu-3-hover">
        <a>Сервіси</a>
      </li>
      <li id="menu4">
        <img src="./image/menu/icons4.jpg" alt="" id="icon-menu-4">
        <img src="./image/menu/icons4-hover.jpg" alt="" id="icon-menu-4-hover">
        <a>Меню</a>
      </li>
    </ul>
  </div>
  
  <script src="./script/config.js"></script>
  <script src="./script/home-page.js"></script>
  <script src="./script/menu.js"></script>
  <script src="./script/document.js"></script>
  <script src="./script/exit.js"></script>
  <script src="./script/profile.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>



  <script>
    const hrLine = document.querySelector('.hr-line span');
      const speed = 1; // Скорость прокрутки в секундах

      // Пример для изменения текста или скорости
      function updateText(newText) {
        hrLine.textContent = newText;
      }

      // Пример для изменения скорости
      function changeSpeed(newSpeed) {
        hrLine.style.animationDuration = `${newSpeed}s`;
      }
  </script>
  <script>
  // Пример кода для вашего веб-приложения
window.onpopstate = function(event) {
    // Предотвращение перехода назад
    history.pushState(null, document.title, location.href);
};

// Сохранение текущего состояния при загрузке страницы
history.pushState(null, document.title, location.href);

</script>
</body>
</html>