diff --git a/index.html b/index.html
index ea1ed6d..4d7521c 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,10 @@
Генератор QR-кодов
-
+
+
+
+
diff --git a/script.js b/script.js
index 4fe7bb1..e927ee1 100644
--- a/script.js
+++ b/script.js
@@ -7,6 +7,8 @@ const textError = document.getElementById('error');
const zoomInBtn = document.getElementById('zoom-in-btn');
const zoomOutBtn = document.getElementById('zoom-out-btn');
let scale = 1; // Начальный масштаб
+const checkbox = document.getElementById('isLightTheme');
+const html = document.getElementsByTagName('html')[0];
// Установление значения поля ввода из local storage
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') {
textError.innerText = message;
diff --git a/style.css b/style.css
index 2424bc6..1f9c825 100644
--- a/style.css
+++ b/style.css
@@ -3,11 +3,13 @@
color: white;
}
+html {
+ background-color: #1e1e1e;
+}
+
body {
font-family: Arial, sans-serif;
- margin: 20px;
- padding: 0;
- background-color: #1e1e1e;
+ margin: 0;
text-align: center;
}
@@ -15,17 +17,23 @@ h1 {
color: orangered;
}
+.inputs {
+ display: flex;
+ justify-content: center;
+}
+
textarea,
button {
padding: 10px;
margin: 10px;
- border: 1px solid #333;
+ border: none;
border-radius: 5px;
font-size: 16px;
}
textarea {
color: orangered;
+ border: 1px solid #000;
}
textarea::selection {
@@ -54,4 +62,8 @@ button:active {
#qr-code img {
max-width: 100%;
height: auto;
+}
+
+canvas {
+ border: 1px solid #000;
}
\ No newline at end of file