admin/iQR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ilia Miheev
2025-06-24 15:46:37 +03:00
parent 4ab951ec89
commit 658def1605
2 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -5
View File
@@ -30,6 +30,7 @@
</head> </head>
<!-- Разработчик: Илья) --> <!-- Разработчик: Илья) -->
<body> <body>
<div class="logo"> <div class="logo">
<h1 id="h1">Генератор QR-кодов</h1> <h1 id="h1">Генератор QR-кодов</h1>
@@ -40,16 +41,20 @@
<div class="inputs"> <div class="inputs">
<textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea> <textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea>
<input title="Изменить тему" id="isLightTheme" type="checkbox" > <input title="Изменить тему" id="isLightTheme" type="checkbox">
</div> </div>
<br>
<button id="generate-btn">Сгенерировать QR-код</button> <div class="btns">
<button id="download-qr-btn">Скачать QR-код</button> <button class="btn" id="generate-btn" title="Создать QR-код">Создать</button>
<button id="del-qr-btn">Очистить поля</button> <button class="btn" id="download-qr-btn" title="Скачать QR-код">Скачать</button>
<button class="btn3" id="del-qr-btn">Очистить поля</button>
</div>
<div class="zoom-buttons"> <div class="zoom-buttons">
<button id="zoom-in-btn">Увеличить</button> <button id="zoom-in-btn">Увеличить</button>
<button id="zoom-out-btn">Уменьшить</button> <button id="zoom-out-btn">Уменьшить</button>
</div> </div>
<p id="error"></p> <p id="error"></p>
<div id="qr-code"></div> <div id="qr-code"></div>
style.css
+25
View File
@@ -47,6 +47,31 @@ button {
font-size: 16px; 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 { textarea {
color: orangered; color: orangered;
border: 1px solid #000; border: 1px solid #000;