Ku6epXBOCTuK/css-matrix-calc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update layout

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-06-23 19:44:20 +05:00
parent 80112bc239
commit c17dd84dc6
3 changed files with 74 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9 -10
View File
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Matrix3D Perspective Calculator</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
@@ -12,6 +12,7 @@
<h1>CSS Matrix3D Perspective Calculator</h1>
<p>Задайте 4 точки на поле и размер виджета — получите CSS matrix3d() для перспективного отображения</p>
</div>
<span class="mode-hint" id="modeHint">Перетаскивайте углы на поле</span>
<div class="mode-toggle">
<button class="mode-btn active" id="btnEdit">Edit</button>
<button class="mode-btn" id="btnPreview">Preview</button>
@@ -21,11 +22,9 @@
<main>
<div class="left-col">
<div class="panel">
<h2>Preview — перетаскивайте углы</h2>
<svg id="svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet"></svg>
</div>
<div class="panel">
<h2>Live Preview</h2>
<div id="fieldContainer">
<div id="field">
<div id="widget">
@@ -40,16 +39,16 @@
<div class="panel">
<h2>Основное поле</h2>
<div class="field-row">
<label><span>W</span><input id="inpFieldW" type="number" value="1920" min="1"></label>
<label><span>H</span><input id="inpFieldH" type="number" value="1080" min="1"></label>
<label><span>W</span><input id="inpFieldW" type="number" value="1920" min="1" /></label>
<label><span>H</span><input id="inpFieldH" type="number" value="1080" min="1" /></label>
</div>
</div>
<div class="panel">
<h2>Виджет</h2>
<div class="field-row">
<label><span>W</span><input id="inpWidgetW" type="number" value="400" min="1"></label>
<label><span>H</span><input id="inpWidgetH" type="number" value="300" min="1"></label>
<label><span>W</span><input id="inpWidgetW" type="number" value="400" min="1" /></label>
<label><span>H</span><input id="inpWidgetH" type="number" value="300" min="1" /></label>
</div>
</div>
script.js
+3
View File
@@ -347,6 +347,9 @@
document.body.className = mode === 'preview' ? 'mode-preview' : 'mode-edit';
$('btnEdit').classList.toggle('active', mode === 'edit');
$('btnPreview').classList.toggle('active', mode === 'preview');
$('modeHint').textContent = mode === 'edit'
? 'Перетаскивайте углы на поле'
: 'Результат matrix3d() трансформации';
requestAnimationFrame(updateLivePreview);
}
style.css
+8
View File
@@ -76,6 +76,14 @@ header p {
color: #fff;
}
.mode-hint {
font-size: 14px;
color: var(--accent);
font-weight: 500;
margin-right: 8px;
white-space: nowrap;
}
main {
display: grid;
grid-template-columns: 1fr 340px;