модальные окна и вывод информации в них

Question

по задумке должна быть однострочная страница с модальными окнами и разделами включая раздел профиля, я профили уже создал и всё настроил, но пока настраивал модальные окна запутался правильным выводом таблицы и самого профиля в соответствующем окне. Достаточно я пытался настроить для пока что для фронта.

function showWindow(windowNumber) {
            const windows = document.querySelectorAll('.window');
            windows.forEach(window => window.style.display = 'none');
            document.getElementById('window' + windowNumber).style.display = 'block';
        }

        function scanQRCode() {
            showWindow(3);
            // Здесь будет код для сканирования QR-кода.
        }

        function showProfileWindow() {
            showWindow('ProfileWindow');
            // Здесь будет код для загрузки профиля.
        }





    const profiles = {
        "12": {
            name: "Ив",
            age: 29,
            gender: "М",
            city: "М",
            profession: "т",
            company: "ООО \"Пр\"",
            education: "М",
            interests: "Пу",
            skills: "P",
            contacts: "i",
            avatar: ""
        },
        "8": {
            name: "а",
            age: 34,
            gender: "й",
            city: "рг",
            profession:""
            company: "с",
            education: "а",
            interests: "а",
            skills: "ma",
            contacts: "m",
            avatar: "я"
        },
        "1": {
            name: "ч",
            age: 40,
            gender: "й",
            city: "ск",
            profession: "к",
            company: "юс",
            education: "и",
            interests: "е",
            skills: "R, l",
            contacts: "m",
            avatar: "ей"
        }
    };

    function showWindow(windowNumber) {
        const windows = document.querySelectorAll('.window');
        windows.forEach(window => window.style.display = 'none');
        document.getElementById('window' + windowNumber).style.display = 'block';
    }

    function authenticate() {
        const iinInput = document.getElementById('iin-input').value;
        if (profiles[iinInput]) {
            const profile = profiles[iinInput];
            document.getElementById('name').innerText = profile.name;
            document.getElementById('age').innerText = profile.age;
            document.getElementById('gender').innerText = profile.gender;
            document.getElementById('city').innerText = profile.city;
            document.getElementById('profession').innerText = profile.profession;
            document.getElementById('company').innerText = profile.company;
            document.getElementById('education').innerText = profile.education;
            document.getElementById('interests').innerText = profile.interests;
            document.getElementById('skills').innerText = profile.skills;
            document.getElementById('contacts').innerText = profile.contacts;
            document.getElementById('avatar').src = profile.avatar;

            document.querySelector('.login-container').style.display = 'none';
            document.querySelector('.content').style.display = 'block';
        } else {
            alert('Неверный ИИН. Попробуйте снова.');
        }
    }

    function scanQRCode() {
        showWindow(3);
        // Здесь будет код для сканирования QR-кода.
    }

    function showProfileWindow() {
        showWindow(4);
    }


    // gsap.from('.message1', { opacity: 0, delay: 1, y: 30 });
    // gsap.from('.message2', { opacity: 0, delay: 2, y: 30 });
    // gsap.from('.banner__message button', { opacity: 0, delay: 3, y: 30 });
    let btnAnimation = () => {
      const tlMessageBtn = gsap.timeline({ defaults: { duration: .1 }, repeat: -1, repeatDelay: 3 });
      tlMessageBtn.to('.banner__message button', { rotate: 5 })
        .to('.banner__message button', { rotate: -5 })
        .to('.banner__message button', { rotate: 5 })
        .to('.banner__message button', { rotate: 0 });
      return tlMessageBtn;
    }

    let stepAnimation = () => {
      let tlStep = gsap.timeline({ defaults: { duration: 1 }, repeat: -1, repeatDelay: 1 });
      const steps = document.querySelectorAll('.step');
 
      let i = 0;
      steps.forEach(step => {
        let stepTimeLine = gsap.timeline({ defaults: { duration: 1 }, repeat: -1, repeatDelay: 4 });
        stepTimeLine.to(step, { y: -30 })
          .to(step, { y: 0, ease: "bounce.out" });
        tlStep.add(stepTimeLine, i > 0 ? '-=1.5': '0');
        i++;
      });
      

      return tlStep;
    }
    const tl = gsap.timeline({ defaults: { duration: .5 } });
    tl.from('.message1', { opacity: 0, y: 30 })
      .from('.message2', { opacity: 0, y: 30 })
      .from('.banner__message button', { opacity: 0, y: 30 })
      .add(btnAnimation);

    var sa = stepAnimation();
    const firstStep = document.querySelector('.steps');
    firstStep.addEventListener('mouseover', () => {
      sa.pause();
    });
    firstStep.addEventListener('mouseleave', () => {
      sa.resume();
    })

  /* Стили для кнопок */
  .icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .icon-button img {
    width: 50px; /* Размер иконки */
    height: 50px;
  }
#window1 {
  display: flex;
    justify-content: center;
    align-items: center;
}
#window1 img {
  max-width: 100%;
    max-height: 100%;
}
  /* CSS для округления аватарки */
  #window4 img {
    border-radius: 50%; /* 50% скругления превращает изображение в круг */
    width: 150px; /* Вы можете настроить размер аватарки по вашему усмотрению */
    height: 150px;
  }

  body {
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: #FDF8E9;
  }

  #content {
    flex: 1;
    /* Добавим минимальную высоту, чтобы контент занимал хотя бы весь видимый экран */
    min-height: calc(100vh - 50px); /* 50px - высота футера */
  }

  #footer {
    background-color: white;
    color: white;
    text-align: center;
    padding: 20px;
    /* Фиксируем футер внизу экрана */
    margin-top: auto;
    display: flex;
    justify-content: space-evenly;

  }


  #tableContainer {
      max-width: 95%;
      height: 600px;
      overflow: auto;
  }

  table {
      border-collapse: collapse;
      width: 100%;
  }

  table, th, td {
      border: 1px solid black;
      padding: 8px;
  }
</style>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    .profile-table, .content {
        display: none;
        width: 50%;
        margin: 20px auto;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    .login-container {
        text-align: center;
        margin-top: 50px;
    }
    .login-container input {
        padding: 10px;
        margin: 10px;
        font-size: 16px;
    }
    .avatar {
        display: block;
        margin: 20px auto;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
    }

<!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.css">
<link rel="stylesheet" href="modal.css">
<title>Дулати</title>

<script src="qr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.4/mammoth.browser.min.js"></script>
</head>
<body>

<!-- Контейнеры для окон -->
<div id="window1" class="window">
  <!-- Содержимое окна 1 -->
  
  <img src="https://i.imgur.com/6Luuxdw.png" alt="">
</div>

<div id="window2" class="window">
  <div class="content">
    <header>
      <div id="logo">
        <a href='/'>
          <img src="https://i.imgur.com/6Luuxdw.png" alt="">
        </a>
      </div>
      <nav>
      
     
  <script src="gsap-public/minified/gsap.min.js"></script>


   
</div>

<div id="window3" class="window">
    <div id="qr-reader"></div>
</div>

<div id="window4" class="window">
    <div class="login-container">
        <h1>Авторизация</h1>
        <label for="iin-input">Введите ИИН:</label>
        <input type="text" id="iin-input" placeholder="ИИН">
        <button onclick="authenticate()">Войти</button>
    </div>
    <div class="content">
        <h2 style="text-align: center;">Профиль пользователя</h2>
        <img id="avatar" class="avatar" src="" alt="Аватар">
        <table class="profile-table">
            <tr>
                <th>Атрибут</th>
                <th>Значение</th>
            </tr>
            <tr>
                <td>Имя</td>
                <td id="name"></td>
            </tr>
            <tr>
                <td>Возраст</td>
                <td id="age"></td>
            </tr>
            <tr>
                <td>Пол</td>
                <td id="gender"></td>
            </tr>
            <tr>
                <td>Город</td>
                <td id="city"></td>
            </tr>
            <tr>
                <td>Профессия</td>
                <td id="profession"></td>
            </tr>
            <tr>
                <td>Компания</td>
                <td id="company"></td>
            </tr>
            <tr>
                <td>Образование</td>
                <td id="education"></td>
            </tr>
            <tr>
                <td>Интересы</td>
                <td id="interests"></td>
            </tr>
            <tr>
                <td>Навыки</td>
                <td id="skills"></td>
            </tr>
            <tr>
                <td>Контакты</td>
                <td id="contacts"></td>
            </tr>
        </table>
    </div>
</div>

   
<div id="footer">
  <button class="icon-button" onclick="showWindow(1)">
    <img src="img/ig_Glav.png" alt="Окно 1">
  </button>
  <button class="icon-button" onclick="showWindow(2)">
    <img src="img/uchoba.png" alt="Окно 2">
  </button>
  <button class="icon-button" onclick="scanQRCode()">
    <img src="img/qr.png" alt="Окно 3">
  </button>
  <button class="icon-button" onclick="showProfileWindow()">
    <img src="img/prof_ic.png" alt="Профиль">
  </button>
</div>


</html>

БЛОГ НА HUSL

модальные окна и вывод информации в них

Ответы (0 шт):