Переписал на vue3

2026-06-20 12:42:44 +03:00
parent f593d8223b
commit a90db0d7dc
17 changed files with 1994 additions and 255 deletions
@@ -0,0 +1,201 @@
+::selection {
+    background-color: orangered;
+    color: white;
+}
+
+html {
+    cursor: url(/img/Orange_cursor.png), default !important;
+}
+
+html.dark {
+    background-color: #1e1e1e;
+}
+
+html.light {
+    background-color: #fff;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    text-align: center;
+}
+
+#app {
+    width: 100%;
+}
+
+.logo {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+}
+
+h1 {
+    margin: 0;
+    color: orangered;
+}
+
+img {
+    cursor: url(/img/Orange_pointer.png), pointer !important;
+}
+
+a {
+    cursor: url(/img/Orange_cursor.png), pointer !important;
+}
+
+.inputs {
+    display: flex;
+    justify-content: center;
+}
+
+textarea,
+button {
+    padding: 10px;
+    margin: 10px;
+    border: none;
+    border-radius: 5px;
+    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%;
+    display: grid;
+    gap: 10px;
+}
+
+.btns1 {
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+.btns2 {
+    grid-template-columns: 1fr 1fr;
+}
+
+.btns2 button {
+    font-size: 1.5em;
+}
+
+@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;
+}
+
+textarea::selection {
+    background-color: orangered;
+    color: white;
+}
+
+input[type='checkbox'] {
+    accent-color: orangered;
+    cursor: url(/img/Orange_pointer.png), pointer !important;
+    margin: auto 0;
+}
+
+button {
+    background-color: orangered;
+    cursor: pointer;
+    cursor: url(/img/Orange_pointer.png), pointer !important;
+}
+
+html.dark button {
+    color: #fff;
+}
+
+html.light button {
+    color: #1e1e1e;
+}
+
+button::selection {
+    background-color: rgb(172, 46, 0);
+}
+
+button:active {
+    background-color: rgb(135, 36, 0);
+}
+
+#qr-code {
+    margin-top: 20px;
+}
+
+#qr-code img {
+    max-width: 100%;
+    height: auto;
+}
+
+canvas {
+    border: 1px solid #000;
+}