Изображение не помещается на весь vh, центрирование текста

Изображение не помещается на весь vh, центрирование текста ⇐ CSS

1 сообщение • Страница 1 из 1

Гость

Изображение не помещается на весь vh, центрирование текста

Цитата

Сообщение Гость » 30 сен 2023, 15:33

У меня проблема: изображение не помещается на весь виртуальный диск. Проблема находится где-то в .gameStarted (HTML),CSS

Я пытался удалить поля в gameStarted, пытался добавить vh к изображениям, min-height: ... к изображениям и т. д., похоже, ничего не помогает работает и всегда есть место вверху, а теперь и справа.

/* ЗДЕСЬ ЯВАСКРИПТ, ЕСЛИ ВАМ ВСЕ НУЖЕН */ константные элементы = [{ название: «Феррари Портофино 2021», стоимость: 250000, imageSrc: "https://cdn.vox-cdn.com/thumbor/K0DGSuo ... ds/chorus_ актив/файл/22780648 /COUNTACH_LPI800_4__2_.jpg" }, { название: «Ламборгини Галлардо», значение: 126000, imageSrc: "https://di-uploads-pod30.dealerinspire. ... ct2021.png" }, // Добавляем сюда больше элементов и их значений ]; пусть currentScore = 0; пусть элемент1, элемент2, правильныйиндекс; const item1Element = document.getElementById("item1"); const item2Element = document.getElementById("item2"); const ScoreTextElement = document.getElementById("score-text"); const вопросTextElement = document.getElementById("текст-вопроса"); const moreButton = document.getElementById("больше"); const lessButton = document.getElementById("меньше"); const valueIndex = document.getElementById("valueIndex"); const navPlay = document.getElementById("playy") const playNav = document.getElementById("playnav") функция startNewRound() { const index1 = Math.floor(Math.random() * items.length); пусть index2; делать { index2 = Math.floor(Math.random() * items.length); } Пока (индекс2 === индекс1); элемент1 = элементы[индекс1]; элемент2 = элементы[индекс2]; item1Element.src = item1.imageSrc; item2Element.src = item2.imageSrc; setTimeout(функция() { item1Element.style.opacity = 1; item2Element.style.opacity = 1; }, 100); вопросTextElement.innerHTML = `${item2.name} &nbsp ; &nbsp ; ${item1.name}`; document.getElementById("item1").textContent = item1.name + " " + formatCurrency(item1.value); document.getElementById("item2").textContent = item2.name + " " + formatCurrency(item2.value); правильныйИндекс = элемент1.значение > элемент2.значение? 0:1; moreButton.addEventListener("click", handleMoreClick); lessButton.addEventListener("клик", handleLessClick); } // ПРИ НАЖИМЕ #playy ОТКРЫТЬ ВСПЛАННОЕ ОКНО КАТЕГОРИЙ navPlay.addEventListener("клик", function() { popup.style.display = "блокировать" }); //````````````````````````````````````````````` функция handleMoreClick() { handleItemClick (0, правильныйИндекс); showValue(0, правильныйИндекс, элемент1, элемент2); удалитьClickListeners(); } функция handleLessClick() { handleItemClick (1, правильныйИндекс); showValue(1, правильныйИндекс, элемент1, элемент2); удалитьClickListeners(); } функция удаленияClickListeners() { moreButton.removeEventListener("клик", handleMoreClick); lessButton.removeEventListener("клик", handleLessClick); } функция startNewGame() { текущий балл = 0; ScoreTextElement.textContent = `Оценка: ${currentScore}`; начатьНовыйРаунд(); } функция endGame() { moreButton.disabled = правда; lessButton.disabled = правда; const playAgainButton = document.createElement("кнопка"); playAgainButton.textContent = "Играть еще раз"; playAgainButton.addEventListener("click", function() { moreButton.disabled = ложь; lessButton.disabled = ложь; valueIndex.style.display = «нет»; playAgainButton.remove(); начатьНовуюИгру(); }); вопросTextElement.textContent = "Игра окончена!"; вопросTextElement.appendChild(playAgainButton); } функция handleItemClick(clickedIndex, CorrectIndex) { if (clickedIndex === CorrectIndex) { текущийScore++; ScoreTextElement.textContent = `Оценка: ${currentScore}`; alert("Вы угадали правильно"); } еще { конец игры(); возвращаться; } setTimeout (startNewRound, 1000); } функция showValue(clickedIndex, CorrectIndex, item1, item2) { if (clickedIndex === CorrectIndex) { valueIndex.innerHTML = `${formatCurrency(item1.value)} ${formatCurrency(item2.value)}`; valueIndex.style.display = "блок"; } еще { valueIndex.style.display = «нет»; } } функция formatCurrency (значение) { return `$${value.toLocaleString()}`; } document.addEventListener("DOMContentLoaded", function() { const playButton = document.querySelector(".play"); const popup = document.getElementById("всплывающее окно"); const closePopupButton = document.getElementById("закрыть всплывающее окно"); const CategoryButtons = document.querySelectorAll(".category"); const gameStarted = document.querySelector(".gameStarted"); const mainPage = document.getElementById("главная страница"); const main = document.querySelector("main"); const body = document.querySelector("body"); playButton.addEventListener("click", function() { popup.style.display = "блокировать"; }); closePopupButton.addEventListener("click", function() { popup.style.display = "нет"; }); playNav.addEventListener("click", function() { popup.style.display = "нет"; mainPage.style.display = «нет»; gameStarted.style.display = "блокировать"; main.style.display = "нет"; gameStarted.classList.add('активный'); body.classList.add('активный'); начатьНовыйРаунд(); }); CategoryButtons.forEach(функция(кнопка) { button.addEventListener("click", function() { popup.style.display = "нет"; mainPage.style.display = «нет»; gameStarted.style.display = "блокировать"; main.style.display = "нет"; gameStarted.classList.add('активный'); body.classList.add('активный'); начатьНовыйРаунд(); }); }); }); константные элементы = [{ название: «Феррари Портофино 2021», стоимость: 250000, imageSrc: "https://cdn.vox-cdn.com/thumbor/K0DGSuo ... ds/chorus_ актив/файл/22780648 /COUNTACH_LPI800_4__2_.jpg" }, { название: «Ламборгини Галлардо», значение: 126000, imageSrc: "https://di-uploads-pod30.dealerinspire. ... ct2021.png" }, // Добавляем сюда больше элементов и их значений ]; пусть currentScore = 0; пусть элемент1, элемент2, правильныйиндекс; const item1Element = document.getElementById("item1"); const item2Element = document.getElementById("item2"); const ScoreTextElement = document.getElementById("score-text"); const вопросTextElement = document.getElementById("текст-вопроса"); const moreButton = document.getElementById("больше"); const lessButton = document.getElementById("меньше"); const valueIndex = document.getElementById("valueIndex"); const navPlay = document.getElementById("playy") const playNav = document.getElementById("playnav") функция startNewRound() { const index1 = Math.floor(Math.random() * items.length); пусть index2; делать { index2 = Math.floor(Math.random() * items.length); } Пока (индекс2 === индекс1); элемент1 = элементы[индекс1]; элемент2 = элементы[индекс2]; item1Element.src = item1.imageSrc; item2Element.src = item2.imageSrc; setTimeout(функция() { item1Element.style.opacity = 1; item2Element.style.opacity = 1; }, 100); вопросTextElement.innerHTML = `${item2.name} &nbsp ; &nbsp ; ${item1.name}`; document.getElementById("item1").textContent = item1.name + " " + formatCurrency(item1.value); document.getElementById("item2").textContent = item2.name + " " + formatCurrency(item2.value); правильныйИндекс = элемент1.значение > элемент2.значение? 0:1; moreButton.addEventListener("click", handleMoreClick); lessButton.addEventListener("клик", handleLessClick); } // ПРИ НАЖИМЕ #playy ОТКРЫТЬ ВСПЛАННОЕ ОКНО КАТЕГОРИЙ navPlay.addEventListener("клик", function() { popup.style.display = "блокировать" }); //````````````````````````````````````````````` функция handleMoreClick() { handleItemClick (0, правильныйИндекс); showValue(0, правильныйИндекс, элемент1, элемент2); удалитьClickListeners(); } функция handleLessClick() { handleItemClick (1, правильныйИндекс); showValue(1, правильныйИндекс, элемент1, элемент2); удалитьClickListeners(); } функция удаленияClickListeners() { moreButton.removeEventListener("клик", handleMoreClick); lessButton.removeEventListener("клик", handleLessClick); } функция startNewGame() { текущий балл = 0; ScoreTextElement.textContent = `Оценка: ${currentScore}`; начатьНовыйРаунд(); } функция endGame() { moreButton.disabled = правда; lessButton.disabled = правда; const playAgainButton = document.createElement("кнопка"); playAgainButton.textContent = "Играть еще раз"; playAgainButton.addEventListener("click", function() { moreButton.disabled = ложь; lessButton.disabled = ложь; valueIndex.style.display = «нет»; playAgainButton.remove(); начатьНовуюИгру(); }); вопросTextElement.textContent = "Игра окончена!"; вопросTextElement.appendChild(playAgainButton); } функция handleItemClick(clickedIndex, CorrectIndex) { if (clickedIndex === CorrectIndex) { текущийScore++; ScoreTextElement.textContent = `Оценка: ${currentScore}`; alert("Вы угадали правильно"); } еще { конец игры(); возвращаться; } setTimeout (startNewRound, 1000); } функция showValue(clickedIndex, CorrectIndex, item1, item2) { if (clickedIndex === CorrectIndex) { valueIndex.innerHTML = `${formatCurrency(item1.value)} ${formatCurrency(item2.value)}`; valueIndex.style.display = "блок"; } еще { valueIndex.style.display = «нет»; } } функция formatCurrency (значение) { return `$${value.toLocaleString()}`; } document.addEventListener("DOMContentLoaded", function() { const playButton = document.querySelector(".play"); const popup = document.getElementById("всплывающее окно"); const closePopupButton = document.getElementById("закрыть всплывающее окно"); const CategoryButtons = document.querySelectorAll(".category"); const gameStarted = document.querySelector(".gameStarted"); const mainPage = document.getElementById("главная страница"); const main = document.querySelector("main"); const body = document.querySelector("body"); playButton.addEventListener("click", function() { popup.style.display = "блокировать"; }); closePopupButton.addEventListener("click", function() { popup.style.display = "нет"; }); playNav.addEventListener("click", function() { popup.style.display = "нет"; mainPage.style.display = «нет»; gameStarted.style.display = "блокировать"; main.style.display = "нет"; gameStarted.classList.add('активный'); body.classList.add('активный'); начатьНовыйРаунд(); }); CategoryButtons.forEach(функция(кнопка) { button.addEventListener("click", function() { popup.style.display = "нет"; mainPage.style.display = «нет»; gameStarted.style.display = "блокировать"; main.style.display = "нет"; gameStarted.classList.add('активный'); body.classList.add('активный'); начатьНовыйРаунд(); }); }); }); * { маржа: 0; заполнение: 0; поведение прокрутки: плавное; размер коробки: граница-коробка; семейство шрифтов: Ink Free; } /*УСТАНОВИТЬ ПАНЕЛЬ НАВИГАЦИИ В ВЕРХНЕЙ ЧАСТИ ЭКРАНА, УДАЛИТЬ ЦВЕТ ФОНА И ТЕНЬ ПОЗЖЕ*/ .navbar { ширина: 100%; положение: фиксированное; верх: 0; слева: 0; дисплей: гибкий; оправдание-содержание: пространство между; отступ: 1рем; выровнять-элементы: по центру; } /*НАСТРОЙКА ЦВЕТА И АНИМАЦИИ ЛОГОТИПА*/ ч1 { белый цвет; размер шрифта: 2rem; поле слева: 2rem; } h1>a:hover { поле слева: 2rem; переход: замедление 0,5 с; } /*НАСТРОЙКА НАВБАР*/ ли>а { текстовое оформление: нет; белый цвет; размер шрифта: 1.4rem; поле слева: 0,6рем; поле справа: 3rem; } li>a:hover { цвет: бисквитный; непрозрачность: 0,8; переход: замедление 0,25 с; } h1>а { текстовое оформление: нет; белый цвет; } ул { тип стиля списка: нет; } /*ФОНОВОЕ ИЗОБРАЖЕНИЕ УСТАНОВЛЕНО ПО ПОДГОТОВКЕ, ИЗМЕНИТЕ ШИРИНУ И ВЫСОТУ VH, ЕСЛИ НЕОБХОДИМО, УСТАНОВИТЕ ПРОЗРАЧНОСТЬ ДО 1 ИЛИ УДАЛИТЬ*/ тело { фон: линейный градиент (слева внизу, #240303 10%, #aa5625); размер фона: обложка; ширина: 100вх; высота: 100вх; непрозрачность: 0,96; } /*ОСНОВНОЙ ТЕКСТ В СЕРЕДИНЕ ЭКРАНА*/ .wwm { позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); выравнивание текста: по центру; белый цвет; } .заголовок { размер шрифта: 5rem; } /*КНОПКЕ «ВОСПРОИЗВЕДЕНИЕ» ТРЕБУЕТСЯ ЯВАСКРИПТ*/ .играть { маржа-верх: 1рем; размер шрифта: 3rem; заполнение: 0рем 3рем; цвет фона: rgba(122, 64, 72, 0); белый цвет; граница-радиус: 2rem; граница: 0,125rem сплошной #fff; } .play:наведите { цвет фона: RGB(255, 252, 252); переход: легкость входа и выхода 0,50 с; черный цвет; } /*чатгпт*/ .неожиданно возникнуть { дисплей: нет; положение: фиксированное; ширина: 100%; высота: 100%; фон: rgba(0, 0, 0, 0,7); z-индекс: 1000; отступ-верх: 350 пикселей; } .popup-content { фон: белый; ширина: 60%; максимальная ширина: 400 пикселей; поле: 20 пикселей авто; отступ: 20 пикселей; радиус границы: 5 пикселей; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); выравнивание текста: по центру; } .категории { дисплей: гибкий; flex-wrap: обертка; оправдание-содержание: центр; поле сверху: 20 пикселей; } .категория { поле: 5 пикселей; отступ: 10 пикселей 20 пикселей; граница: нет; граница-радиус: 2rem; курсор: указатель; размер шрифта: 2rem; цвет фона: черный; белый цвет; } .category:hover { цвет фона: пшеница; черный цвет; переход: легкость 0,50 с; } .close-popup { поле сверху: 20 пикселей; цвет фона: #DC3545; размер шрифта: 1.8rem; заполнение: 0рем 1рем; цвет фона: rgba(0, 0, 0, 0); граница-радиус: 2rem; } .close-popup:hover { цвет фона: красный; переход: легкость 0,50 с; } .gameStarted { дисплей: нет; положение: относительное; /* Изменяем позицию на относительную */ маржа-верх: 0; /* Удаляем верхнее поле */ } .gameStarted.active { дисплей: нет; положение: относительное; /* Изменяем позицию на относительную */ маржа-верх: 0; /* Удаляем верхнее поле */ } .divv { гибкое направление: строка; граница: 2 пикселя, сплошная красная; } .body.active { --tw-bg-opacity: 1; цвет фона: rgb(30 41 59/var(--tw-bg-opacity)); переход: 1с легкость; } /* Оформление игрового контейнера */ .линия { позиция: абсолютная; дисплей: гибкий; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); высота: 50вх; выровнять-элементы: по центру; непрозрачность: 0,9; } .против { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; ширина: 100 пикселей; высота: 100 пикселей; радиус границы: 50%; цвет фона: белый; черный цвет; размер шрифта: 44 пикселей; /* Отрегулируйте размер шрифта по мере необходимости */ начертание шрифта: жирный; /* При желании сделайте текст жирным */ z-индекс: 101; } .imgtxt { позиция: абсолютная; белый цвет; размер шрифта: 3rem; дисплей: гибкий; оправдание-содержание: пространство вокруг; верхние: 69%; осталось: 50%; трансформировать: транслировать(-50%, -50%); ширина: 160рем; } :корень { --белый цвет; --размер шрифта: 3rem; } .собака { цвет фона: var(--color); /* Используйте переменную --main-color */ белый цвет; отступ: 10 пикселей 20 пикселей; } @import url('https://fonts.cdnfonts.com/css/rooneysans'); .вопрос-текст { белый цвет; выравнивание текста: по центру; верх: 50%; осталось: 50%; трансформировать: транслировать(0%, 350%); ширина: 98vw; семейство шрифтов: «RooneySans», без засечек; размер шрифта: 3rem; } /* Добавьте этот CSS в существующий файл Styles.css */ #item1 { ширина: 50мм; высота: 100вх; маржа: 0; заполнение: 0; минимальная высота: 800 пикселей; минимальная ширина: 950 пикселей; } #item2 { ширина: 50мм; высота: 100вх; маржа: 0; заполнение: 0; минимальная высота: 900 пикселей; минимальная ширина: 950 пикселей; } .изображения { дисплей: гибкий; } #более, #меньше { дисплей: гибкий; размер шрифта: 2rem; заполнение: 0,8рем 5,5рем; цвет: #fff989; радиус границы: 2,5 рем; граница: 0,125rem сплошной #fff; поле-дно: 1рем; цвет фона: rgba(255, 255, 255, 0); } #подробнее:наведите курсор, #less:наведите { цвет фона: rgba(255, 255, 255, 1); черный цвет; переход: легкость 0,50 с; } #меньше { размер шрифта: 2rem; заполнение: 0,8рем 5,7рем; } .кнопки { положение: относительное; отображение: встроенный блок; позиция: абсолютная; верх: 80%; осталось: 75%; трансформировать: транслировать(-50%, -50%); } .score-текст { белый цвет; отображение: встроенный блок; } #valueIndex { цвет: зеленый; дисплей: гибкий; оправдание-содержание: центр; /* Центрировать по горизонтали */ выровнять-элементы: по центру; /* Центрировать по вертикали */ верх: 50%; осталось: 50%; трансформировать: транслировать(28%, -50%); ширина: 98vw; семейство шрифтов: «RooneySans», без засечек; размер шрифта: 3rem; [*] Что стоит больше WWM Играть Режимы игры Что стоит больше Играть Выберите игровой режим Классический Закрыть ПРОТИВ

Оценка: 0
${item2.name} ${item2.value} ${item1.name} ${item1.value} ${item2.value ${item1.value Более Меньше

1696077212

Гость


У меня проблема: изображение не помещается на весь виртуальный диск. Проблема находится где-то в .gameStarted (HTML),CSS
 
Я пытался удалить поля в gameStarted, пытался добавить vh к изображениям, min-height: ... к изображениям и т. д., похоже, ничего не помогает работает и всегда есть место вверху, а теперь и справа.
 
  /* ЗДЕСЬ ЯВАСКРИПТ, ЕСЛИ ВАМ ВСЕ НУЖЕН */ константные элементы = [{     название: «Феррари Портофино 2021»,     стоимость: 250000,     imageSrc: "https://cdn.vox-cdn.com/thumbor/K0DGSuoYmpv34Jli04xH2g5nGfk=/0x0:5385x3029/1000x1000/filters:focal(2693x1515:2694x1516)/cdn.vox-cdn.com/uploads/chorus_ актив/файл/22780648 /COUNTACH_LPI800_4__2_.jpg"   },   {     название: «Ламборгини Галлардо»,     значение: 126000,     imageSrc: "https://di-uploads-pod30.dealerinspire.com/bmwofschererville/uploads/2021/10/1-BMW-Exterior-1000x1000-Oct2021.png"   },   // Добавляем сюда больше элементов и их значений ]; пусть currentScore = 0; пусть элемент1, элемент2, правильныйиндекс; const item1Element = document.getElementById("item1"); const item2Element = document.getElementById("item2"); const ScoreTextElement = document.getElementById("score-text"); const вопросTextElement = document.getElementById("текст-вопроса"); const moreButton = document.getElementById("больше"); const lessButton = document.getElementById("меньше"); const valueIndex = document.getElementById("valueIndex"); const navPlay = document.getElementById("playy") const playNav = document.getElementById("playnav") функция startNewRound() {   const index1 = Math.floor(Math.random() * items.length);   пусть index2;   делать {     index2 = Math.floor(Math.random() * items.length);   } Пока (индекс2 === индекс1);   элемент1 = элементы[индекс1];   элемент2 = элементы[индекс2];   item1Element.src = item1.imageSrc;   item2Element.src = item2.imageSrc;   setTimeout(функция() {     item1Element.style.opacity = 1;     item2Element.style.opacity = 1;   }, 100);   вопросTextElement.innerHTML = `${item2.name}                    &nbsp ;                         &nbsp ;      ${item1.name}`;   document.getElementById("item1").textContent = item1.name + " " + formatCurrency(item1.value);   document.getElementById("item2").textContent = item2.name + " " + formatCurrency(item2.value);   правильныйИндекс = элемент1.значение > элемент2.значение? 0:1;   moreButton.addEventListener("click", handleMoreClick);   lessButton.addEventListener("клик", handleLessClick); } // ПРИ НАЖИМЕ #playy ОТКРЫТЬ ВСПЛАННОЕ ОКНО КАТЕГОРИЙ navPlay.addEventListener("клик", function() {   popup.style.display = "блокировать" }); //````````````````````````````````````````````` функция handleMoreClick() {   handleItemClick (0, правильныйИндекс);   showValue(0, правильныйИндекс, элемент1, элемент2);   удалитьClickListeners(); } функция handleLessClick() {   handleItemClick (1, правильныйИндекс);   showValue(1, правильныйИндекс, элемент1, элемент2);   удалитьClickListeners(); } функция удаленияClickListeners() {   moreButton.removeEventListener("клик", handleMoreClick);   lessButton.removeEventListener("клик", handleLessClick); } функция startNewGame() {   текущий балл = 0;   ScoreTextElement.textContent = `Оценка: ${currentScore}`;   начатьНовыйРаунд(); } функция endGame() {   moreButton.disabled = правда;   lessButton.disabled = правда;   const playAgainButton = document.createElement("кнопка");   playAgainButton.textContent = "Играть еще раз";   playAgainButton.addEventListener("click", function() {     moreButton.disabled = ложь;     lessButton.disabled = ложь;     valueIndex.style.display = «нет»;     playAgainButton.remove();     начатьНовуюИгру();   });   вопросTextElement.textContent = "Игра окончена!";   вопросTextElement.appendChild(playAgainButton); } функция handleItemClick(clickedIndex, CorrectIndex) {   if (clickedIndex === CorrectIndex) {     текущийScore++;     ScoreTextElement.textContent = `Оценка: ${currentScore}`;     alert("Вы угадали правильно");   } еще {     конец игры();     возвращаться;   }   setTimeout (startNewRound, 1000); } функция showValue(clickedIndex, CorrectIndex, item1, item2) {   if (clickedIndex === CorrectIndex) {     valueIndex.innerHTML = `${formatCurrency(item1.value)}                              ${formatCurrency(item2.value)}`;     valueIndex.style.display = "блок";   } еще {     valueIndex.style.display = «нет»;   } } функция formatCurrency (значение) {   return `$${value.toLocaleString()}`; } document.addEventListener("DOMContentLoaded", function() {   const playButton = document.querySelector(".play");   const popup = document.getElementById("всплывающее окно");   const closePopupButton = document.getElementById("закрыть всплывающее окно");   const CategoryButtons = document.querySelectorAll(".category");   const gameStarted = document.querySelector(".gameStarted");   const mainPage = document.getElementById("главная страница");   const main = document.querySelector("main");   const body = document.querySelector("body");   playButton.addEventListener("click", function() {     popup.style.display = "блокировать";   });   closePopupButton.addEventListener("click", function() {     popup.style.display = "нет";   });   playNav.addEventListener("click", function() {     popup.style.display = "нет";     mainPage.style.display = «нет»;     gameStarted.style.display = "блокировать";     main.style.display = "нет";     gameStarted.classList.add('активный');     body.classList.add('активный');     начатьНовыйРаунд();   });   CategoryButtons.forEach(функция(кнопка) {     button.addEventListener("click", function() {       popup.style.display = "нет";       mainPage.style.display = «нет»;       gameStarted.style.display = "блокировать";       main.style.display = "нет";       gameStarted.classList.add('активный');       body.classList.add('активный');       начатьНовыйРаунд();     });   }); }); константные элементы = [{     название: «Феррари Портофино 2021»,     стоимость: 250000,     imageSrc: "https://cdn.vox-cdn.com/thumbor/K0DGSuoYmpv34Jli04xH2g5nGfk=/0x0:5385x3029/1000x1000/filters:focal(2693x1515:2694x1516)/cdn.vox-cdn.com/uploads/chorus_ актив/файл/22780648 /COUNTACH_LPI800_4__2_.jpg"   },   {     название: «Ламборгини Галлардо»,     значение: 126000,     imageSrc: "https://di-uploads-pod30.dealerinspire.com/bmwofschererville/uploads/2021/10/1-BMW-Exterior-1000x1000-Oct2021.png"   },   // Добавляем сюда больше элементов и их значений ]; пусть currentScore = 0; пусть элемент1, элемент2, правильныйиндекс; const item1Element = document.getElementById("item1"); const item2Element = document.getElementById("item2"); const ScoreTextElement = document.getElementById("score-text"); const вопросTextElement = document.getElementById("текст-вопроса"); const moreButton = document.getElementById("больше"); const lessButton = document.getElementById("меньше"); const valueIndex = document.getElementById("valueIndex"); const navPlay = document.getElementById("playy") const playNav = document.getElementById("playnav") функция startNewRound() {   const index1 = Math.floor(Math.random() * items.length);   пусть index2;   делать {     index2 = Math.floor(Math.random() * items.length);   } Пока (индекс2 === индекс1);   элемент1 = элементы[индекс1];   элемент2 = элементы[индекс2];   item1Element.src = item1.imageSrc;   item2Element.src = item2.imageSrc;   setTimeout(функция() {     item1Element.style.opacity = 1;     item2Element.style.opacity = 1;   }, 100);   вопросTextElement.innerHTML = `${item2.name}                    &nbsp ;                         &nbsp ;      ${item1.name}`;   document.getElementById("item1").textContent = item1.name + " " + formatCurrency(item1.value);   document.getElementById("item2").textContent = item2.name + " " + formatCurrency(item2.value);   правильныйИндекс = элемент1.значение > элемент2.значение? 0:1;   moreButton.addEventListener("click", handleMoreClick);   lessButton.addEventListener("клик", handleLessClick); } // ПРИ НАЖИМЕ #playy ОТКРЫТЬ ВСПЛАННОЕ ОКНО КАТЕГОРИЙ navPlay.addEventListener("клик", function() {   popup.style.display = "блокировать" }); //````````````````````````````````````````````` функция handleMoreClick() {   handleItemClick (0, правильныйИндекс);   showValue(0, правильныйИндекс, элемент1, элемент2);   удалитьClickListeners(); } функция handleLessClick() {   handleItemClick (1, правильныйИндекс);   showValue(1, правильныйИндекс, элемент1, элемент2);   удалитьClickListeners(); } функция удаленияClickListeners() {   moreButton.removeEventListener("клик", handleMoreClick);   lessButton.removeEventListener("клик", handleLessClick); } функция startNewGame() {   текущий балл = 0;   ScoreTextElement.textContent = `Оценка: ${currentScore}`;   начатьНовыйРаунд(); } функция endGame() {   moreButton.disabled = правда;   lessButton.disabled = правда;   const playAgainButton = document.createElement("кнопка");   playAgainButton.textContent = "Играть еще раз";   playAgainButton.addEventListener("click", function() {     moreButton.disabled = ложь;     lessButton.disabled = ложь;     valueIndex.style.display = «нет»;     playAgainButton.remove();     начатьНовуюИгру();   });   вопросTextElement.textContent = "Игра окончена!";   вопросTextElement.appendChild(playAgainButton); } функция handleItemClick(clickedIndex, CorrectIndex) {   if (clickedIndex === CorrectIndex) {     текущийScore++;     ScoreTextElement.textContent = `Оценка: ${currentScore}`;     alert("Вы угадали правильно");   } еще {     конец игры();     возвращаться;   }   setTimeout (startNewRound, 1000); } функция showValue(clickedIndex, CorrectIndex, item1, item2) {   if (clickedIndex === CorrectIndex) {     valueIndex.innerHTML = `${formatCurrency(item1.value)}                              ${formatCurrency(item2.value)}`;     valueIndex.style.display = "блок";   } еще {     valueIndex.style.display = «нет»;   } } функция formatCurrency (значение) {   return `$${value.toLocaleString()}`; } document.addEventListener("DOMContentLoaded", function() {   const playButton = document.querySelector(".play");   const popup = document.getElementById("всплывающее окно");   const closePopupButton = document.getElementById("закрыть всплывающее окно");   const CategoryButtons = document.querySelectorAll(".category");   const gameStarted = document.querySelector(".gameStarted");   const mainPage = document.getElementById("главная страница");   const main = document.querySelector("main");   const body = document.querySelector("body");   playButton.addEventListener("click", function() {     popup.style.display = "блокировать";   });   closePopupButton.addEventListener("click", function() {     popup.style.display = "нет";   });   playNav.addEventListener("click", function() {     popup.style.display = "нет";     mainPage.style.display = «нет»;     gameStarted.style.display = "блокировать";     main.style.display = "нет";     gameStarted.classList.add('активный');     body.classList.add('активный');     начатьНовыйРаунд();   });   CategoryButtons.forEach(функция(кнопка) {     button.addEventListener("click", function() {       popup.style.display = "нет";       mainPage.style.display = «нет»;       gameStarted.style.display = "блокировать";       main.style.display = "нет";       gameStarted.classList.add('активный');       body.classList.add('активный');       начатьНовыйРаунд();     });   }); }); * {   маржа: 0;   заполнение: 0;   поведение прокрутки: плавное;   размер коробки: граница-коробка;   семейство шрифтов: Ink Free; } /*УСТАНОВИТЬ ПАНЕЛЬ НАВИГАЦИИ В ВЕРХНЕЙ ЧАСТИ ЭКРАНА, УДАЛИТЬ ЦВЕТ ФОНА И ТЕНЬ ПОЗЖЕ*/ .navbar {   ширина: 100%;   положение: фиксированное;   верх: 0;   слева: 0;   дисплей: гибкий;   оправдание-содержание: пространство между;   отступ: 1рем;   выровнять-элементы: по центру; } /*НАСТРОЙКА ЦВЕТА И АНИМАЦИИ ЛОГОТИПА*/ ч1 {   белый цвет;   размер шрифта: 2rem;   поле слева: 2rem; } h1>a:hover {   поле слева: 2rem;   переход: замедление 0,5 с; } /*НАСТРОЙКА НАВБАР*/ ли>а {   текстовое оформление: нет;   белый цвет;   размер шрифта: 1.4rem;   поле слева: 0,6рем;   поле справа: 3rem; } li>a:hover {   цвет: бисквитный;   непрозрачность: 0,8;   переход: замедление 0,25 с; } h1>а {   текстовое оформление: нет;   белый цвет; } ул {   тип стиля списка: нет; } /*ФОНОВОЕ ИЗОБРАЖЕНИЕ УСТАНОВЛЕНО ПО ПОДГОТОВКЕ, ИЗМЕНИТЕ ШИРИНУ И ВЫСОТУ VH, ЕСЛИ НЕОБХОДИМО, УСТАНОВИТЕ ПРОЗРАЧНОСТЬ ДО 1 ИЛИ УДАЛИТЬ*/ тело {   фон: линейный градиент (слева внизу, #240303 10%, #aa5625);   размер фона: обложка;   ширина: 100вх;   высота: 100вх;   непрозрачность: 0,96; } /*ОСНОВНОЙ ТЕКСТ В СЕРЕДИНЕ ЭКРАНА*/ .wwm {   позиция: абсолютная;   верх: 50%;   осталось: 50%;   трансформировать: транслировать(-50%, -50%);   выравнивание текста: по центру;   белый цвет; } .заголовок {   размер шрифта: 5rem; } /*КНОПКЕ «ВОСПРОИЗВЕДЕНИЕ» ТРЕБУЕТСЯ ЯВАСКРИПТ*/ .играть {   маржа-верх: 1рем;   размер шрифта: 3rem;   заполнение: 0рем 3рем;   цвет фона: rgba(122, 64, 72, 0);   белый цвет;   граница-радиус: 2rem;   граница: 0,125rem сплошной #fff; } .play:наведите {   цвет фона: RGB(255, 252, 252);   переход: легкость входа и выхода 0,50 с;   черный цвет; } /*чатгпт*/ .неожиданно возникнуть {   дисплей: нет;   положение: фиксированное;   ширина: 100%;   высота: 100%;   фон: rgba(0, 0, 0, 0,7);   z-индекс: 1000;   отступ-верх: 350 пикселей; } .popup-content {   фон: белый;   ширина: 60%;   максимальная ширина: 400 пикселей;   поле: 20 пикселей авто;   отступ: 20 пикселей;   радиус границы: 5 пикселей;   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);   выравнивание текста: по центру; } .категории {   дисплей: гибкий;   flex-wrap: обертка;   оправдание-содержание: центр;   поле сверху: 20 пикселей; } .категория {   поле: 5 пикселей;   отступ: 10 пикселей 20 пикселей;   граница: нет;   граница-радиус: 2rem;   курсор: указатель;   размер шрифта: 2rem;   цвет фона: черный;   белый цвет; } .category:hover {   цвет фона: пшеница;   черный цвет;   переход: легкость 0,50 с; } .close-popup {   поле сверху: 20 пикселей;   цвет фона: #DC3545;   размер шрифта: 1.8rem;   заполнение: 0рем 1рем;   цвет фона: rgba(0, 0, 0, 0);   граница-радиус: 2rem; } .close-popup:hover {   цвет фона: красный;   переход: легкость 0,50 с; } .gameStarted {   дисплей: нет;   положение: относительное;   /* Изменяем позицию на относительную */   маржа-верх: 0;   /* Удаляем верхнее поле */ } .gameStarted.active {   дисплей: нет;   положение: относительное;   /* Изменяем позицию на относительную */   маржа-верх: 0;   /* Удаляем верхнее поле */ } .divv {   гибкое направление: строка;   граница: 2 пикселя, сплошная красная; } .body.active {   --tw-bg-opacity: 1;   цвет фона: rgb(30 41 59/var(--tw-bg-opacity));   переход: 1с легкость; } /* Оформление игрового контейнера */ .линия {   позиция: абсолютная;   дисплей: гибкий;   верх: 50%;   осталось: 50%;   трансформировать: транслировать(-50%, -50%);   высота: 50вх;   выровнять-элементы: по центру;   непрозрачность: 0,9; } .против {   дисплей: гибкий;   оправдание-содержание: центр;   выровнять-элементы: по центру;   ширина: 100 пикселей;   высота: 100 пикселей;   радиус границы: 50%;   цвет фона: белый;   черный цвет;   размер шрифта: 44 пикселей;   /* Отрегулируйте размер шрифта по мере необходимости */   начертание шрифта: жирный;   /* При желании сделайте текст жирным */   z-индекс: 101; } .imgtxt {   позиция: абсолютная;   белый цвет;   размер шрифта: 3rem;   дисплей: гибкий;   оправдание-содержание: пространство вокруг;   верхние: 69%;   осталось: 50%;   трансформировать: транслировать(-50%, -50%);   ширина: 160рем; } :корень {   --белый цвет;   --размер шрифта: 3rem; } .собака {   цвет фона: var(--color);   /* Используйте переменную --main-color */   белый цвет;   отступ: 10 пикселей 20 пикселей; } @import url('https://fonts.cdnfonts.com/css/rooneysans'); .вопрос-текст {   белый цвет;   выравнивание текста: по центру;   верх: 50%;   осталось: 50%;   трансформировать: транслировать(0%, 350%);   ширина: 98vw;   семейство шрифтов: «RooneySans», без засечек;   размер шрифта: 3rem; } /* Добавьте этот CSS в существующий файл Styles.css */ #item1 {   ширина: 50мм;   высота: 100вх;   маржа: 0;   заполнение: 0;   минимальная высота: 800 пикселей;   минимальная ширина: 950 пикселей; } #item2 {   ширина: 50мм;   высота: 100вх;   маржа: 0;   заполнение: 0;   минимальная высота: 900 пикселей;   минимальная ширина: 950 пикселей; } .изображения {   дисплей: гибкий; } #более, #меньше {   дисплей: гибкий;   размер шрифта: 2rem;   заполнение: 0,8рем 5,5рем;   цвет: #fff989;   радиус границы: 2,5 рем;   граница: 0,125rem сплошной #fff;   поле-дно: 1рем;   цвет фона: rgba(255, 255, 255, 0); } #подробнее:наведите курсор, #less:наведите {   цвет фона: rgba(255, 255, 255, 1);   черный цвет;   переход: легкость 0,50 с; } #меньше {   размер шрифта: 2rem;   заполнение: 0,8рем 5,7рем; } .кнопки {   положение: относительное;   отображение: встроенный блок;   позиция: абсолютная;   верх: 80%;   осталось: 75%;   трансформировать: транслировать(-50%, -50%); } .score-текст {   белый цвет;   отображение: встроенный блок; } #valueIndex {   цвет: зеленый;   дисплей: гибкий;   оправдание-содержание: центр;   /* Центрировать по горизонтали */   выровнять-элементы: по центру;   /* Центрировать по вертикали */   верх: 50%;   осталось: 50%;   трансформировать: транслировать(28%, -50%);   ширина: 98vw;   семейство шрифтов: «RooneySans», без засечек;   размер шрифта: 3rem;          [*]   Что стоит больше                             [url=#]WWM[/url]                                                [url=#gameStarted]Играть[/url]               [url=#popup]Режимы игры[/url]                                                                  Что стоит больше         Играть                                 Выберите игровой режим                    Классический                  Закрыть                              ПРОТИВ
                 
Оценка: 0
                 ${item2.name} ${item2.value}                 ${item1.name} ${item1.value}                 ${item2.value                                              ${item1.value                                  Более                                        Меньше                                 
[img]https://lh3.googleusercontent.com/pw/ADCreHcCjus21gcwf_7ZWtWnI1C8VF6il_oIJ5L0yCIuR-I5YOr_ZGzZLL14BeTxWL4TfNr1nwJqkdsQiIUjeTORj9RNKSN-05e q91gQP4fWrPSKlqOeXcXdkZtKd1F0UlLruAfupEnybDoKx7BnduYLYM32LEZPy_qJqJoABqE4lhytYWFyo-uMbZ8GlV3IjTl4fWwRNT1hKMiQoX2J0marXDA5CrtrRq9nJQE0nH2rtSCSw ZmJnCQc0PrEmeA_Rg5Ss6gDzvpwWr7dQmH0IfUCXxZiJl1HFNYGCoSr2Rm79hKdVJPlLWeaevPgwDJ7Yy9igO6IdMc77QNax3jA93bMYqkChm2wa40ev8HPs7h2Q_nteXUFq_b1r2 I7ap866gONYBdE0qeZcd0uSudyzTgIyz9VTsiDKxIItR7aljYE_BfL2QZHKYWmqSvuxLx0FM85qczVPcH1BI-T3goi5EvvUOcKeTUJt3sUdZsr_LQoMPlYEa2bvQcTGlypCMI7hcTYOLwNP sKV1RFCJu4MxlcnLEO6S8S9dB6CkSPZQhijU_gxXehMkj64EdCVcOlzIda1r5HegE7KaHEEoxAv8XbhM0qpnjeQrMs1an8jNqAR6IL3LW-tcQlsGljFCf_XNp0adrHsLSlvablMdiRokWnYl U3dton4yw5-3KXPdr8G-EVSrTLf1C8HAZvRx0eoSTHEJD-hxjRbieVyzhHeSjBJ6mZGIHbfnwuhudLyxYleEPZkqWRAUin-oh_iQcNXSs_wLko-XCoDt0gllXM27oa5tdvfJk4PiUKBO-fa25MCxF0 G4P8aKOh_WKPkIddRswVhUh3aTPNI6O9JbDJpgeA6n -pGx8vf1lS_e79wxFjcFJAoPtvxl423aB4Oe-xCZbZlVrVMJZPQAkOhFtOQOcNSZ1yq5XH9H6bz2G9q-g_I2BkCb1KwKJ5cftOR7vg=w707-h353-s-no?authuser=0[/img]
       
[img]https://lh3.googleusercontent.com/pw/ADCreHdP1_Kf_n02AGb882NS26oo4NnFmqUylj7ww8ecIoHje6Zl4z_uQ8_z8KpfF126leO4l_TImfWiy0dTE0CYApw_dekxeH6X edeRv3iMrrBfCm0Ds2BhakRUXStwNm8_YyNN4fcl3NnlLpN1jMls1ixO0-WG0hmshnuFgygug-qvuMyd8hpQW1HKwslTr-zPBn2M6t_odmoQUQAWQseNysVvrCo7me-9lnfmumG17oFie0S6Pj7m EE_q4BwiYk4fQ8iYxfiuDyGdbLlR6VmRdvkf7BlbZqA417AAdzyWohLSZoU2aY_K0EP0b-7oZF76AQYc6kQE-nd2QU9nhBT9Ij6SLNLdavFUQck4uqZzVSgUXPo81hGPpeywq_FF3ll37TlEM WnQSgSEm80xgmGP7KkWK-OIVpF_-CHrCqB-18d5LnRcut48HXjqPeJRXzxRntB0HVCFvq0nZWbI2OiMF3ILJWp09gyQWr3zLsM5CfDm3NWmVLy4LUg3BNNfJ9BdBNH0TdyFzEH6vx lQkaEtVY86K9eMJVc9tqt1T6LeBXxh55YtK0XVO7Kq7Wk0JUAh6J_OqqSMtZNBYEDPOge0FXLuGLXXlZ-hDxYQjlOA4-J6ALAEY6qlcKdQu_iG6sDToC0nBlbAumq0JYk194q8ojYxfH пс -HoYCZxFeauawiC2mY49omlR_YEslegwi79DMOttecI56CdqWK6Syd_mOsd57lM9eJJ4_r2U3BUC1YHfL8bEVIAqqQJCwkMP1wa8UYbc3gjDpmQBNNZ_dMvT2rnlYBH-S46BCeYnJH_WH PzK0NXLY5p7Qtk41o2EFoyX0843UySheVz_oRAWzQdY0-nt4DNIPOeNo7WSBqtRF9e00UevzidggdRcgZgLU4xacjkkpy6k7YhY9xsFlwUfuXvm6uuBVSAtJN3m9Gg630Jn6QgX1lb7LOn7A=w 654-h381-s-no?authuser=0[/img]