+
+ 
+
+
-
+
+
+
-
-
diff --git a/src/assets/style.css b/src/assets/style.css
index a716578..be476be 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -5,35 +5,131 @@
html {
cursor: url(/img/Orange_cursor.png), default !important;
+ transition: background-color 0.35s ease, color 0.35s ease;
}
html.dark {
- background-color: #1e1e1e;
+ --bg: #1a1a1e;
+ --bg-accent: rgba(255, 69, 0, 0.06);
+ --surface: rgba(38, 38, 42, 0.72);
+ --surface-hover: rgba(52, 52, 58, 0.88);
+ --surface-solid: rgba(30, 30, 34, 0.85);
+ --surface-border: rgba(255, 255, 255, 0.1);
+ --text: #f2f2f2;
+ --text-muted: #9a9a9a;
+ --placeholder: rgba(255, 255, 255, 0.35);
+ --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+ --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
+ --accent: orangered;
+ --accent-glow: rgba(255, 69, 0, 0.35);
+ --canvas-bg: #fff;
+ --canvas-border: rgba(255, 255, 255, 0.15);
+
+ background-color: var(--bg);
+ background-image:
+ radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-accent), transparent),
+ radial-gradient(ellipse 60% 40% at 100% 100%, rgba(255, 69, 0, 0.04), transparent);
}
html.light {
- background-color: #fff;
+ --bg: #f4f4f6;
+ --bg-accent: rgba(255, 69, 0, 0.08);
+ --surface: rgba(255, 255, 255, 0.78);
+ --surface-hover: rgba(255, 255, 255, 0.95);
+ --surface-solid: rgba(255, 255, 255, 0.92);
+ --surface-border: rgba(0, 0, 0, 0.08);
+ --text: #1e1e1e;
+ --text-muted: #666;
+ --placeholder: rgba(0, 0, 0, 0.35);
+ --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
+ --accent: orangered;
+ --accent-glow: rgba(255, 69, 0, 0.25);
+ --canvas-bg: #fff;
+ --canvas-border: rgba(0, 0, 0, 0.1);
+
+ background-color: var(--bg);
+ background-image:
+ radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-accent), transparent),
+ radial-gradient(ellipse 60% 40% at 0% 100%, rgba(255, 69, 0, 0.05), transparent);
}
body {
font-family: Arial, sans-serif;
- margin: 20px;
+ margin: 0;
+ padding: 24px 20px 88px;
text-align: center;
+ color: var(--text);
+ transition: color 0.35s ease;
+ min-height: 100vh;
+ box-sizing: border-box;
}
#app {
width: 100%;
}
+.app-shell {
+ max-width: 560px;
+ margin: 0 auto;
+}
+
+.app-card {
+ width: 100%;
+ padding: 28px 24px 32px;
+ border-radius: 20px;
+ background: var(--surface);
+ border: 1px solid var(--surface-border);
+ box-shadow: var(--shadow);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ transition:
+ background-color 0.35s ease,
+ border-color 0.35s ease,
+ box-shadow 0.35s ease;
+}
+
.logo {
display: flex;
justify-content: center;
+ align-items: center;
gap: 15px;
+ margin-bottom: 8px;
}
h1 {
margin: 0;
- color: orangered;
+ color: var(--accent);
+ font-size: 1.6rem;
+ letter-spacing: -0.02em;
+ transition: color 0.35s ease;
+}
+
+.github-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ height: 44px;
+ border-radius: 12px;
+ background: var(--surface-solid);
+ border: 1px solid var(--surface-border);
+ transition:
+ background-color 0.25s ease,
+ border-color 0.25s ease,
+ transform 0.2s ease,
+ box-shadow 0.25s ease;
+}
+
+.github-link:hover {
+ background: var(--surface-hover);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-sm);
+}
+
+.github-link img {
+ width: 28px;
+ height: 28px;
}
img {
@@ -42,20 +138,53 @@ img {
a {
cursor: url(/img/Orange_cursor.png), pointer !important;
+ text-decoration: none;
}
.inputs {
display: flex;
justify-content: center;
+ align-items: flex-start;
+ gap: 12px;
+ margin-top: 16px;
}
-textarea,
-button {
- padding: 10px;
- margin: 10px;
- border: none;
- border-radius: 5px;
+textarea {
+ flex: 1;
+ max-width: 360px;
+ min-height: 80px;
+ padding: 14px 16px;
+ margin: 0;
+ border: 1px solid var(--surface-border);
+ border-radius: 14px;
font-size: 16px;
+ font-family: inherit;
+ resize: vertical;
+ color: var(--accent);
+ background: var(--surface-solid);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ box-shadow: var(--shadow-sm);
+ transition:
+ background-color 0.35s ease,
+ border-color 0.25s ease,
+ box-shadow 0.25s ease,
+ color 0.35s ease;
+}
+
+textarea::placeholder {
+ color: var(--placeholder);
+}
+
+textarea:focus {
+ outline: none;
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm);
+}
+
+textarea::selection {
+ background-color: orangered;
+ color: white;
}
.themeSwitch input[type="checkbox"] {
@@ -65,57 +194,67 @@ button {
.themeSwitch {
--size: 50px;
+ flex-shrink: 0;
}
.themeSwitch .block {
position: relative;
- clear: both;
- float: left;
}
.themeSwitch label {
+ display: block;
width: var(--size);
height: calc(var(--size) / 2);
box-sizing: border-box;
- border: 3px solid;
- float: left;
+ border: 2px solid var(--surface-border);
border-radius: 100px;
position: relative;
cursor: pointer;
- transition: .3s ease;
- color: black;
- background: white;
+ transition:
+ background-color 0.35s ease,
+ border-color 0.35s ease,
+ box-shadow 0.25s ease;
+ background: var(--surface-solid);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
cursor: url(/img/Orange_pointer.png), pointer !important;
- margin-top: 10px;
+ margin-top: 14px;
+ box-shadow: var(--shadow-sm);
+}
+
+.themeSwitch label:hover {
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px var(--accent-glow);
}
.themeSwitch input[type=checkbox]:checked+label {
- background: orangered;
+ background: var(--accent);
+ border-color: var(--accent);
}
.themeSwitch input[type=checkbox]:checked+label:before {
left: calc(var(--size) / 2);
- background: white;
+ background: #fff;
}
.themeSwitch label:before {
- transition: .3s ease;
+ transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease;
content: '';
width: calc((var(--size) / 2) - 10px);
height: calc((var(--size) / 2) - 10px);
position: absolute;
- background: orangered;
+ background: var(--accent);
left: 5px;
- top: 2px;
+ top: 3px;
box-sizing: border-box;
- border: 3px solid;
- color: black;
border-radius: 100px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.btns {
- margin: 7px auto;
- width: 60%;
+ margin: 16px auto 0;
+ width: 100%;
+ max-width: 400px;
display: grid;
gap: 10px;
}
@@ -126,18 +265,42 @@ button {
.btns2 {
grid-template-columns: 1fr 1fr;
+ max-width: 200px;
}
.btns2 button {
- font-size: 1.5em;
+ font-size: 1.4em;
+ font-weight: 600;
}
-@media (max-width:500px) {
+@media (max-width: 500px) {
+ .app-card {
+ padding: 20px 16px 24px;
+ border-radius: 16px;
+ }
+
+ .inputs {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ textarea {
+ max-width: 100%;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .themeSwitch label {
+ margin-top: 0;
+ }
+
.btns {
- display: grid;
+ max-width: 100%;
+ }
+
+ .btns1 {
grid-template-columns: 1fr 1fr;
- grid-template-rows: auto 1fr;
- gap: 8px;
+ grid-template-rows: auto auto;
}
.btn3 {
@@ -145,50 +308,349 @@ button {
}
}
-.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;
+ padding: 11px 16px;
+ margin: 0;
+ border: none;
+ border-radius: 12px;
+ font-size: 15px;
+ font-family: inherit;
+ font-weight: 600;
cursor: pointer;
cursor: url(/img/Orange_pointer.png), pointer !important;
+ transition:
+ background-color 0.25s ease,
+ color 0.35s ease,
+ border-color 0.25s ease,
+ transform 0.15s ease,
+ box-shadow 0.25s ease;
}
-html.dark button {
+.btn {
+ background-color: var(--accent);
color: #fff;
+ box-shadow: 0 4px 14px var(--accent-glow);
}
-html.light button {
- color: #1e1e1e;
+.btn:hover {
+ background-color: #ff5722;
+ transform: translateY(-1px);
+ box-shadow: 0 6px 20px var(--accent-glow);
+}
+
+.btn:active {
+ transform: translateY(0);
+ background-color: rgb(200, 55, 0);
+}
+
+.btn3,
+.btns2 button {
+ background: var(--surface-solid);
+ color: var(--text);
+ border: 1px solid var(--surface-border);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ box-shadow: var(--shadow-sm);
+}
+
+.btn3:hover,
+.btns2 button:hover {
+ background: var(--surface-hover);
+ border-color: var(--accent);
+ transform: translateY(-1px);
+ box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm);
+}
+
+.btn3:active,
+.btns2 button:active {
+ transform: translateY(0);
+ background: var(--surface);
}
button::selection {
background-color: rgb(172, 46, 0);
}
-button:active {
- background-color: rgb(135, 36, 0);
+.status-slot {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.status-slot--visible {
+ margin-top: 16px;
+ min-height: 36px;
+}
+
+.status {
+ display: inline-block;
+ margin: 0;
+ padding: 8px 18px;
+ border-radius: 999px;
+ font-size: 14px;
+ line-height: 1.3;
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ transition:
+ background-color 0.35s ease,
+ color 0.35s ease,
+ border-color 0.35s ease,
+ box-shadow 0.35s ease;
+}
+
+.status-enter-active {
+ transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+.status-leave-active {
+ transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.status-enter-from {
+ opacity: 0;
+ transform: translateY(10px) scale(0.94);
+}
+
+.status-leave-to {
+ opacity: 0;
+ transform: translateY(-6px) scale(0.97);
+}
+
+.status--error {
+ color: #ff6b6b;
+ background: rgba(255, 80, 80, 0.12);
+ border: 1px solid rgba(255, 80, 80, 0.25);
+}
+
+.status--success {
+ color: #4cd97b;
+ background: rgba(60, 200, 100, 0.12);
+ border: 1px solid rgba(60, 200, 100, 0.25);
+}
+
+html.light .status--error {
+ color: #d63030;
+ background: rgba(214, 48, 48, 0.1);
+ border-color: rgba(214, 48, 48, 0.2);
+}
+
+html.light .status--success {
+ color: #27ae60;
+ background: rgba(39, 174, 96, 0.1);
+ border-color: rgba(39, 174, 96, 0.2);
+}
+
+.qr-modal {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+}
+
+.qr-modal__backdrop {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.55);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+}
+
+html.light .qr-modal__backdrop {
+ background: rgba(0, 0, 0, 0.3);
+}
+
+.qr-modal__dialog {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ padding: 20px;
+ border-radius: 24px;
+ background: var(--surface);
+ border: 1px solid var(--surface-border);
+ box-shadow: var(--shadow);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ max-width: calc(100vw - 48px);
+ max-height: calc(100vh - 48px);
+ overflow: visible;
+}
+
+.qr-modal__close {
+ position: absolute;
+ top: -14px;
+ right: -14px;
+ z-index: 20;
+ width: 36px;
+ height: 36px;
+ padding: 0;
+ border: 1px solid var(--surface-border);
+ border-radius: 50%;
+ background: var(--surface-solid);
+ color: var(--text);
+ font-size: 22px;
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ box-shadow: var(--shadow-sm);
+}
+
+.qr-modal__close:hover {
+ border-color: var(--accent);
+ color: var(--accent);
+ transform: scale(1.05);
+}
+
+.qr-modal__viewport {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ overflow: auto;
+ max-height: calc(100vh - 180px);
+ width: 100%;
+}
+
+.qr-modal__toolbar {
+ position: fixed;
+ right: 20px;
+ top: 50%;
+ z-index: 1002;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ padding: 6px;
+ border-radius: 12px;
+ background: var(--surface-solid);
+ border: 1px solid var(--surface-border);
+ box-shadow: var(--shadow-sm);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ transform: translateY(-50%);
+}
+
+.qr-modal__toolbar button {
+ width: 36px;
+ height: 36px;
+ margin: 0;
+ padding: 0;
+ font-size: 1.25em;
+ font-weight: 600;
+ line-height: 1;
+ background: transparent;
+ color: var(--text);
+ border: 1px solid transparent;
+ border-radius: 8px;
+ box-shadow: none;
+}
+
+.qr-modal__toolbar button:hover {
+ background: var(--surface-hover);
+ border-color: var(--surface-border);
+ transform: none;
+ box-shadow: none;
+}
+
+.qr-modal__toolbar button:active {
+ background: var(--surface);
+ transform: scale(0.96);
+}
+
+.qr-modal__tool-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.qr-modal__tool-btn:hover {
+ color: var(--accent);
+ border-color: var(--accent) !important;
+}
+
+.qr-modal__status-slot {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ min-height: 0;
+}
+
+.qr-modal__status-slot--visible {
+ min-height: 36px;
+}
+
+.qr-modal-enter-active,
+.qr-modal-leave-active {
+ transition: opacity 0.35s ease;
+}
+
+.qr-modal-enter-active .qr-modal__backdrop,
+.qr-modal-leave-active .qr-modal__backdrop {
+ transition: opacity 0.35s ease;
+}
+
+.qr-modal-enter-active .qr-modal__dialog,
+.qr-modal-leave-active .qr-modal__dialog {
+ transition:
+ opacity 0.4s ease,
+ transform 0.4s cubic-bezier(0.34, 1.35, 0.64, 1);
+}
+
+.qr-modal-enter-active .qr-modal__toolbar,
+.qr-modal-leave-active .qr-modal__toolbar {
+ transition:
+ opacity 0.35s ease,
+ transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
+}
+
+.qr-modal-enter-from,
+.qr-modal-leave-to {
+ opacity: 1;
+}
+
+.qr-modal-enter-from .qr-modal__backdrop,
+.qr-modal-leave-to .qr-modal__backdrop {
+ opacity: 0;
+}
+
+.qr-modal-enter-from .qr-modal__dialog,
+.qr-modal-leave-to .qr-modal__dialog {
+ opacity: 0;
+ transform: scale(0.86) translateY(24px);
+}
+
+.qr-modal-enter-from .qr-modal__toolbar,
+.qr-modal-leave-to .qr-modal__toolbar {
+ opacity: 0;
+ transform: translateY(-50%) translateX(16px);
}
#qr-code {
- margin-top: 20px;
+ display: inline-flex;
+ padding: 16px;
+ border-radius: 16px;
+ background: var(--surface-solid);
+ border: 1px solid var(--surface-border);
+ box-shadow: var(--shadow-sm);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ transition:
+ background-color 0.35s ease,
+ border-color 0.35s ease,
+ box-shadow 0.35s ease;
+}
+
+#qr-code:empty {
+ display: none;
}
#qr-code img {
@@ -197,5 +659,93 @@ button:active {
}
canvas {
- border: 1px solid #000;
+ display: block;
+ border-radius: 8px;
+ background: var(--canvas-bg);
+ border: 1px solid var(--canvas-border);
+ image-rendering: pixelated;
+ transition: border-color 0.35s ease;
+}
+
+.site-banner {
+ position: fixed;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 10px 22px;
+ border-radius: 999px;
+ text-decoration: none;
+ font-size: 15px;
+ line-height: 1.2;
+ white-space: nowrap;
+ z-index: 10;
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ transition:
+ background-color 0.35s ease,
+ color 0.35s ease,
+ border-color 0.35s ease,
+ box-shadow 0.35s ease;
+}
+
+html.dark .site-banner {
+ background-color: rgba(30, 30, 30, 0.72);
+ color: #f5f5f5;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+}
+
+html.light .site-banner {
+ background-color: rgba(255, 255, 255, 0.78);
+ color: #1e1e1e;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+html.dark .site-banner:hover {
+ background-color: rgba(45, 45, 45, 0.88);
+ color: #fff;
+}
+
+html.light .site-banner:hover {
+ background-color: rgba(255, 255, 255, 0.95);
+}
+
+.site-banner__brand {
+ font-weight: 700;
+ color: orangered;
+}
+
+.site-banner__slogan {
+ font-weight: 400;
+}
+
+@media (max-width: 500px) {
+ .qr-modal {
+ padding: 16px;
+ }
+
+ .qr-modal__dialog {
+ padding: 16px;
+ border-radius: 20px;
+ }
+
+ .qr-modal__close {
+ top: -10px;
+ right: -10px;
+ }
+
+ .qr-modal__toolbar {
+ right: 12px;
+ }
+
+ .site-banner {
+ max-width: calc(100% - 32px);
+ white-space: normal;
+ text-align: center;
+ font-size: 14px;
+ }
}
diff --git a/src/composables/useQrCode.js b/src/composables/useQrCode.js
index 9a3ce23..90e3e34 100644
--- a/src/composables/useQrCode.js
+++ b/src/composables/useQrCode.js
@@ -1,6 +1,11 @@
import { ref, nextTick } from 'vue'
import QRCode from 'qrcode'
+const BASE_QR_SIZE = 256
+const MAX_WIDTH_RATIO = 0.8
+const MIN_SCALE = 0.5
+const SCALE_STEP = 0.1
+
export function useQrCode() {
const textInput = ref('')
const error = ref('')
@@ -8,17 +13,41 @@ export function useQrCode() {
const scale = ref(1)
const hasQr = ref(false)
const qrCanvasRef = ref(null)
+ const qrFrameRef = ref(null)
function logMessage(message, color = 'red') {
error.value = message
errorColor.value = color
}
- function applyScale() {
+ function getFrameWidth() {
+ return qrFrameRef.value?.getBoundingClientRect().width ?? 0
+ }
+
+ function getMaxWidth() {
+ return window.innerWidth * MAX_WIDTH_RATIO
+ }
+
+ function persistScale() {
+ localStorage.setItem('scale', String(scale.value))
+ }
+
+ async function renderQrCanvas() {
const canvas = qrCanvasRef.value
- if (!canvas) return
- canvas.style.transform = `scale(${scale.value})`
- canvas.style.transformOrigin = 'top'
+ const userText = textInput.value.trim()
+ if (!canvas || !userText) return
+
+ const width = Math.round(BASE_QR_SIZE * scale.value)
+ await QRCode.toCanvas(canvas, userText, { width })
+ }
+
+ async function clampScaleIfNeeded() {
+ await nextTick()
+ if (getFrameWidth() > getMaxWidth()) {
+ scale.value = 1
+ persistScale()
+ await renderQrCanvas()
+ }
}
async function generateQR() {
@@ -34,15 +63,9 @@ export function useQrCode() {
await nextTick()
try {
- await QRCode.toCanvas(qrCanvasRef.value, userText)
+ await renderQrCanvas()
logMessage('')
- applyScale()
-
- const canvasWidth = qrCanvasRef.value.getBoundingClientRect().width
- if (canvasWidth > window.innerWidth * 0.8) {
- scale.value = 1
- applyScale()
- }
+ await clampScaleIfNeeded()
} catch (err) {
console.error(err)
logMessage('Ошибка при генерации QR-кода.')
@@ -79,44 +102,47 @@ export function useQrCode() {
localStorage.removeItem('scale')
}
- function zoomIn() {
- const canvas = qrCanvasRef.value
- if (!canvas) {
- logMessage('До генерации QR кода маштаб менять нельзя')
- return
- }
-
- localStorage.setItem('scale', scale.value)
- const canvasWidth = canvas.getBoundingClientRect().width
-
- if (canvasWidth + 0.1 < window.innerWidth * 0.8) {
- scale.value += 0.1
- applyScale()
- } else {
- logMessage('Достигнут максимальный размер QR кода')
- }
+ function closeQrModal() {
+ hasQr.value = false
}
- function zoomOut() {
- const canvas = qrCanvasRef.value
- if (!canvas) {
+ async function zoomIn() {
+ if (!qrFrameRef.value || !textInput.value.trim()) {
logMessage('До генерации QR кода маштаб менять нельзя')
return
}
- localStorage.setItem('scale', scale.value)
- const canvasWidth = canvas.getBoundingClientRect().width
+ const previousScale = scale.value
+ scale.value += SCALE_STEP
+ await renderQrCanvas()
+ await nextTick()
- if (canvasWidth > window.innerWidth * 0.8) {
- scale.value = 1
+ if (getFrameWidth() > getMaxWidth()) {
+ scale.value = previousScale
+ await renderQrCanvas()
+ logMessage('Достигнут максимальный размер QR кода')
+ return
}
- if (scale.value > 0.5) {
- scale.value -= 0.1
- applyScale()
- } else {
+ persistScale()
+ logMessage('')
+ }
+
+ async function zoomOut() {
+ if (!qrFrameRef.value || !textInput.value.trim()) {
+ logMessage('До генерации QR кода маштаб менять нельзя')
+ return
+ }
+
+ if (scale.value <= MIN_SCALE) {
logMessage('Достигнут минимальный размер QR кода')
+ return
}
+
+ scale.value -= SCALE_STEP
+ await renderQrCanvas()
+ persistScale()
+ logMessage('')
}
async function restoreFromStorage() {
@@ -136,12 +162,13 @@ export function useQrCode() {
textInput,
error,
errorColor,
- scale,
hasQr,
qrCanvasRef,
+ qrFrameRef,
generateQR,
downloadQR,
clearQR,
+ closeQrModal,
zoomIn,
zoomOut,
restoreFromStorage,
Генератор QR-кодов
+ +
+
+
-
-
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ error }}
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
-
+ {{ error }}
+ -
-
-
+
+
+
+
+
+
+
+
+
+
+ {{ error }}
+