From dfb09ef893c4d0a1c1cb3cc7e052fe0dc8b64058 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Fri, 31 Oct 2025 16:03:25 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=81=D1=82=D0=BE=D0=BC=D0=BD=D1=8B=D0=B9=20=D0=BF=D0=B5?=
 =?UTF-8?q?=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0=D1=82=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8C=20=D0=B4=D0=BB=D1=8F=20=D1=82=D0=B5=D0=BC=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Теперь переключатель для темы выглядит привлекательнее, а не как квадратик с галочкой
---
 index.html |  7 ++++++-
 style.css  | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 3747770..5e53c61 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,12 @@
 
     <div class="inputs">
         <textarea id="text-input" cols="30" rows="3" placeholder="Текст для генерации"></textarea>
-        <input title="Изменить тему" id="isLightTheme" type="checkbox">
+        <div id="isLightTheme" class="themeSwitch">
+            <div class="block" title="Изменить тему">
+                <input data-index="0" id="cheap-49" type="checkbox" />
+                <label for="cheap-49"></label>
+            </div>
+        </div>
     </div>
 
     <div class="btns btns1">
diff --git a/style.css b/style.css
index 2d6246f..d29c608 100644
--- a/style.css
+++ b/style.css
@@ -5,7 +5,7 @@
 
 html {
     background-color: #1e1e1e;
-    cursor: url(img/Orange_cursor.png) , default !important
+    cursor: url(img/Orange_cursor.png), default !important
 }
 
 body {
@@ -47,6 +47,64 @@ button {
     font-size: 16px;
 }
 
+/* Начало стилей для переключателя темы */
+.themeSwitch input[type="checkbox"] {
+    display: none;
+    visibility: hidden;
+}
+
+.themeSwitch {
+    --size: 50px;
+}
+
+.themeSwitch .block {
+    position: relative;
+    clear: both;
+    float: left;
+}
+
+.themeSwitch label {
+    width: var(--size);
+    height: calc(var(--size) / 2);
+    box-sizing: border-box;
+    border: 3px solid;
+    float: left;
+    border-radius: 100px;
+    position: relative;
+    cursor: pointer;
+    transition: .3s ease;
+    color: black;
+    background: white;
+    cursor: url(img/Orange_pointer.png), pointer !important;
+    margin-top: 10px;
+}
+
+.themeSwitch input[type=checkbox]:checked+label {
+    background: orangered;
+}
+
+.themeSwitch input[type=checkbox]:checked+label:before {
+    left: calc(var(--size) / 2);
+    background: white;
+}
+
+.themeSwitch label:before {
+    transition: .3s ease;
+    content: '';
+    width: calc((var(--size) / 2) - 10px);
+    height: calc((var(--size) / 2) - 10px);
+    position: absolute;
+    background: orangered;
+    left: 5px;
+    top: 2px;
+    box-sizing: border-box;
+    border: 3px solid;
+    color: black;
+    border-radius: 100px;
+}
+
+/* Конец стилей для переключателя темы */
+
 .btns {
     margin: 7px auto;
     width: 60%;