Thiết kế website giá rẻ

Question

I wrote a code in Javascript that takes data on accounts from a json file and arranges them on the site according to x, y coordinates, but the problem is that when the size of the browser window or on the phone changes, the offices remain in the same place and do not change position depending on on the size of the window. What to do?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Кабинетs</title>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://apis.google.com/js/api.js"></script>

    <script src="../../scripts/options.js"></script>

    <link rel="stylesheet" href="....style.css">
    <link rel="stylesheet" href="style.css">
    <link type="image/x-icon" href="https://oksei.ru/public/img/logo.png" rel="icon">
    <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="mainTitle">
        <a href="../../index.html"><img src="https://oksei.ru/public/img/logo.png" style="height:60px; width: auto; margin-left: 10px; padding: 10px;"></a>
        <h1 style="align-self: left; margin-left: 10px; padding: 5px;">ГАПОУ "ОКЭИ" Кабинеты</h1>
    </div>

    <div class="gridBox">
        <div class="gridComponent">
            <div id="map"></div>
            <div class="floor-menu">
                <button class="floor-btn" data-floor="1">Этаж 1</button>
                <button class="floor-btn" data-floor="2">Этаж 2</button>
                <button class="floor-btn" data-floor="3">Этаж 3</button>
                <button class="floor-btn" data-floor="4">Этаж 4</button>
                <!-- Добавьте кнопки для других этажей по аналогии -->
            </div>
            
    <div class="tooltip" id="tooltip"></div> <!-- Элемент для отображения подсказки -->
    <script src="cabscript.js"></script>
        <!--<div class="left-col">
            <div class="gridComponent">
                
            </div>
            <div class="gridComponent">
                
            </div>

        </div>
        <div class="right-col gridComponent">
        </div>-->
    </div>
</body>

CSS:

.gridBox {
    padding-top: 10px;
    display: flex;
    flex-direction: row;  
    height: 85vh;     
}

.gridComponent {
    height: 100%;
}

.gridComponent:hover {
    transform: none;
}

.left-col .gridComponent {
    height: 50%;
}

.left-col {
    display: flex;
    flex-direction: column;
    width: 33.3%;
    justify-content: space-between;
}

.right-col {
    width: 66.6%;
    padding-bottom: 0px;
}

.room {
    max-width: 60px; /* Изменяем ширину комнаты на 8% от ширины экрана при ширине экрана до 768px */
    max-height: 60px; /* Также изменяем высоту комнаты */
    border: 2px solid black;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 5px;
    color: black;
    cursor: pointer; /* Добавляем указатель при наведении */
}


@media screen and (max-width: 2000px) {
    .room {
        width: 5%; 
        height: 7%;
    }
    .stream-room {
        width: 10%;
        height: 14%;
    }
}
@media screen and (max-width: 990px) {
    .room {
        width: 6%; 
        height: 8%;
    }
    .stream-room {
        width: 12%;
        height: 16%;
    }
}

@media screen and (max-width: 768px) {
    .room {
        width: 8%; 
        height: 10%; 
    }
    .stream-room {
        width: 16%;
        height: 20%;
    }
}
.computer-room {
    border-color: blue;
}
.stream-room {
    max-width: 100px;
    max-height: 140px;
}

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    display: none; 
}

.floor-menu {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
}

/* Определяем стили для всех кнопок */
.floor-btn {
    background-color: #33333300;
    color: rgba(255, 255, 255, 0.233);
    font-size: x-large;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 6px; /* добавляем округление углов */
}

/* Определяем стили для кнопок при наведении */
.floor-btn:hover {
    background-color: #555;
}


/* Определяем дополнительные стили для активной кнопки */
.floor-btn.active {
    background-color: rgba(65, 76, 233, 0.548); /* изменяем цвет активной кнопки */
    font-size: xx-large; /* изменяем размер шрифта при активации */
    color: white; /* изменяем цвет текста */
}

JavaScript:

 let classrooms_ = void 0;

async function LoadCabinetsData()
{
    const dataShit = await fetch("./myAss.json");
    const fuck = await dataShit.json();
    return fuck["floor"];
}

async function drawCabinets(floor) {

    if(classrooms_ === undefined)
    {
        console.log("Loading Classroms");
        classrooms_ = await LoadCabinetsData();
    }

    let classrooms = classrooms_[floor-1];

    var map = document.getElementById('map');
    var tooltip = document.getElementById('tooltip');

    console.log(classrooms)

    if(classrooms !== undefined)
    {
        classrooms.forEach(function(classroom) {
            var room = document.createElement('div');
            room.className = 'room';
            room.style.left = classroom.location[0] + 'px';
            room.style.top = classroom.location[1] + 'px';
            room.style.backgroundColor = getColor(classroom.students, classroom.capacity);
            room.innerText = classroom.cabinet;
            if (classroom.type === 'Компьютерный') {
                room.classList.add('computer-room');
            }
            if (classroom.type === 'Поточный') {
                room.classList.add('stream-room');
            }
            room.addEventListener('mouseover', function() {
                tooltip.innerHTML = `Кабинет №${classroom.cabinet}<br>Тип: ${classroom.type}<br>Вместимость: ${classroom.capacity}<br>Сейчас в кабинете: ${classroom.students} студентов<br>Группы: ${classroom.groups.join(', ')}`;
                tooltip.style.left = (classroom.location[0] + 40) + 'px';
                tooltip.style.top = (classroom.location[1] - 20) + 'px';
                tooltip.style.display = 'block';
            });
            room.addEventListener('mouseout', function() {
                tooltip.style.display = 'none';
            });
            map.appendChild(room);
        });
    }
    function getColor(students, capacity) {
        var percentage = (students / capacity) * 100;
        if (percentage < 25) {
            return 'green';
        } else if (percentage < 50) {
            return 'lightgreen';
        } else if (percentage < 75) {
            return 'yellow';
        } else if (percentage < 90) {
            return 'orange';
        } else {
            return 'red';
        }
    }

}

drawCabinets(1);

document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('.floor-btn');
    buttons.forEach(function(button) {
        button.addEventListener('click', function(event) {
            var floorNumber = parseInt(this.getAttribute('data-floor'));
            //console.log(floorNumber)
            changeFloor(floorNumber);
        });
    });
    changeFloor(1);
});

function changeFloor(floorNumber) {
    var buttons = document.querySelectorAll('.floor-btn');
    buttons.forEach(function(btn) {
        btn.classList.remove('active'); // Убираем класс active у всех кнопок
    });
    var button = document.querySelector('.floor-btn[data-floor="' + floorNumber + '"]');
    button.classList.add('active'); // Добавляем класс active к нажатой кнопке

    while (map.firstChild) {
        map.removeChild(map.lastChild);
    }
    drawCabinets(floorNumber);
}

I tried with
window.addEventListener("resize", function() { console.log("Resize Event") }); dynamically arrange offices, but the event is simply ignored

Thiết kế website giá rẻ

Danh mục

The site does not adjust position elements depending on the window size