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

Added functionality for changing the theme

Browse Source
This commit is contained in:
Ilia Miheev
2025-02-18 21:04:25 +03:00
parent 2caec1fc0a
commit f7e4a8ac56
3 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -1
View File
@@ -13,7 +13,10 @@
<!-- Разработчик: Илья) --> <!-- Разработчик: Илья) -->
<body> <body>
<h1>Генератор QR-кодов</h1> <h1>Генератор QR-кодов</h1>
<textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea> <div class="inputs">
<textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea>
<input title="Изменить тему" id="isLightTheme" type="checkbox" >
</div>
<br> <br>
<button id="generate-btn">Сгенерировать QR-код</button> <button id="generate-btn">Сгенерировать QR-код</button>
<button id="download-qr-btn">Скачать QR-код</button> <button id="download-qr-btn">Скачать QR-код</button>
script.js
+21
View File
@@ -7,6 +7,8 @@ const textError = document.getElementById('error');
const zoomInBtn = document.getElementById('zoom-in-btn'); const zoomInBtn = document.getElementById('zoom-in-btn');
const zoomOutBtn = document.getElementById('zoom-out-btn'); const zoomOutBtn = document.getElementById('zoom-out-btn');
let scale = 1; // Начальный масштаб let scale = 1; // Начальный масштаб
const checkbox = document.getElementById('isLightTheme');
const html = document.getElementsByTagName('html')[0];
// Установление значения поля ввода из local storage // Установление значения поля ввода из local storage
window.onload = () => { window.onload = () => {
@@ -19,6 +21,25 @@ window.onload = () => {
} }
} }
function changeButtonsColor(color) {
const buttons = document.getElementsByTagName('button');
for (let index = 0; index < buttons.length; index++) {
const btn = buttons[index];
btn.style.color = color;
}
}
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
html.style.backgroundColor = '#fff';
changeButtonsColor('#1e1e1e')
} else {
html.style.backgroundColor = '#1e1e1e';
changeButtonsColor('#fff')
}
})
// Вывести сообщение пользователю // Вывести сообщение пользователю
function logMessage(message, color = 'red') { function logMessage(message, color = 'red') {
textError.innerText = message; textError.innerText = message;
style.css
+16 -4
View File
@@ -3,11 +3,13 @@
color: white; color: white;
} }
html {
background-color: #1e1e1e;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 20px; margin: 0;
padding: 0;
background-color: #1e1e1e;
text-align: center; text-align: center;
} }
@@ -15,17 +17,23 @@ h1 {
color: orangered; color: orangered;
} }
.inputs {
display: flex;
justify-content: center;
}
textarea, textarea,
button { button {
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
border: 1px solid #333; border: none;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
} }
textarea { textarea {
color: orangered; color: orangered;
border: 1px solid #000;
} }
textarea::selection { textarea::selection {
@@ -55,3 +63,7 @@ button:active {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
canvas {
border: 1px solid #000;
}