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
+62 -63
View File
@@ -1,74 +1,73 @@
<!DOCTYPE html> <!doctype html>
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Matrix3D Perspective Calculator</title> <title>CSS Matrix3D Perspective Calculator</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<header> <header>
<div class="header-left"> <div class="header-left">
<h1>CSS Matrix3D Perspective Calculator</h1> <h1>CSS Matrix3D Perspective Calculator</h1>
<p>Задайте 4 точки на поле и размер виджета — получите CSS matrix3d() для перспективного отображения</p> <p>Задайте 4 точки на поле и размер виджета — получите CSS matrix3d() для перспективного отображения</p>
</div>
<div class="mode-toggle">
<button class="mode-btn active" id="btnEdit">Edit</button>
<button class="mode-btn" id="btnPreview">Preview</button>
</div>
</header>
<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>
<div class="panel"> <span class="mode-hint" id="modeHint">Перетаскивайте углы на поле</span>
<h2>Live Preview</h2> <div class="mode-toggle">
<div id="fieldContainer"> <button class="mode-btn active" id="btnEdit">Edit</button>
<div id="field"> <button class="mode-btn" id="btnPreview">Preview</button>
<div id="widget"> </div>
<span>WIDGET</span> </header>
<main>
<div class="left-col">
<div class="panel">
<svg id="svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet"></svg>
</div>
<div class="panel">
<div id="fieldContainer">
<div id="field">
<div id="widget">
<span>WIDGET</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="right-col"> <div class="right-col">
<div class="panel"> <div class="panel">
<h2>Основное поле</h2> <h2>Основное поле</h2>
<div class="field-row"> <div class="field-row">
<label><span>W</span><input id="inpFieldW" type="number" value="1920" 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> <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>
</div>
</div>
<div class="panel">
<h2>Углы четырёхугольника</h2>
<div class="corner-inputs" id="cornerInputs"></div>
</div>
<div class="panel">
<h2>CSS Output</h2>
<textarea id="cssOutput" readonly></textarea>
<div class="btn-row">
<button class="btn btn-copy" id="copyBtn">Копировать CSS</button>
<button class="btn btn-reset" id="resetBtn">Сброс</button>
</div>
</div> </div>
</div> </div>
</main>
<div class="panel"> <script src="script.js"></script>
<h2>Виджет</h2> </body>
<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>
</div>
</div>
<div class="panel">
<h2>Углы четырёхугольника</h2>
<div class="corner-inputs" id="cornerInputs"></div>
</div>
<div class="panel">
<h2>CSS Output</h2>
<textarea id="cssOutput" readonly></textarea>
<div class="btn-row">
<button class="btn btn-copy" id="copyBtn">Копировать CSS</button>
<button class="btn btn-reset" id="resetBtn">Сброс</button>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html> </html>
script.js
+3
View File
@@ -347,6 +347,9 @@
document.body.className = mode === 'preview' ? 'mode-preview' : 'mode-edit'; document.body.className = mode === 'preview' ? 'mode-preview' : 'mode-edit';
$('btnEdit').classList.toggle('active', mode === 'edit'); $('btnEdit').classList.toggle('active', mode === 'edit');
$('btnPreview').classList.toggle('active', mode === 'preview'); $('btnPreview').classList.toggle('active', mode === 'preview');
$('modeHint').textContent = mode === 'edit'
? 'Перетаскивайте углы на поле'
: 'Результат matrix3d() трансформации';
requestAnimationFrame(updateLivePreview); requestAnimationFrame(updateLivePreview);
} }
style.css
+8
View File
@@ -76,6 +76,14 @@ header p {
color: #fff; color: #fff;
} }
.mode-hint {
font-size: 14px;
color: var(--accent);
font-weight: 500;
margin-right: 8px;
white-space: nowrap;
}
main { main {
display: grid; display: grid;
grid-template-columns: 1fr 340px; grid-template-columns: 1fr 340px;