Добавил стили для лучшего отображения кнопок на экранах телефонов

2025-06-24 15:46:37 +03:00
parent 4ab951ec89
commit 658def1605
2 changed files with 35 additions and 5 deletions
@@ -30,6 +30,7 @@
 </head>

 <!-- Разработчик: Илья) -->
+
 <body>
    <div class="logo">
        <h1 id="h1">Генератор QR-кодов</h1>
@@ -42,14 +43,18 @@
        <textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea>
        <input title="Изменить тему" id="isLightTheme" type="checkbox">
    </div>
-    <br>
-    <button id="generate-btn">Сгенерировать QR-код</button>
-    <button id="download-qr-btn">Скачать QR-код</button>
-    <button id="del-qr-btn">Очистить поля</button>
+
+    <div class="btns">
+        <button class="btn" id="generate-btn" title="Создать QR-код">Создать</button>
+        <button class="btn" id="download-qr-btn" title="Скачать QR-код">Скачать</button>
+        <button class="btn3" id="del-qr-btn">Очистить поля</button>
+    </div>
+
    <div class="zoom-buttons">
        <button id="zoom-in-btn">Увеличить</button>
        <button id="zoom-out-btn">Уменьшить</button>
    </div>
+
    <p id="error"></p>
    <div id="qr-code"></div>

@@ -47,6 +47,31 @@ button {
    font-size: 16px;
 }

+.btns {
+    margin: auto;
+    width: 60%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+}
+
+@media (max-width:500px) {
+    .btns {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto 1fr;
+        gap: 8px;
+    }
+
+    .btn3 {
+        grid-column: 1 / -1; /* Занимает обе колонки */
+    }
+}
+
+.btns button {
+    margin: 0;
+}
+
 textarea {
    color: orangered;
    border: 1px solid #000;