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

feat: separate on two pages

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-06-23 19:33:56 +05:00
parent 109917afde
commit 80112bc239
3 changed files with 77 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6
View File
@@ -8,8 +8,14 @@
</head> </head>
<body> <body>
<header> <header>
<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> </header>
<main> <main>
script.js
+12
View File
@@ -342,7 +342,19 @@
// ===== Resize ===== // ===== Resize =====
window.addEventListener('resize', updateLivePreview); window.addEventListener('resize', updateLivePreview);
// ===== Mode toggle =====
function setMode(mode) {
document.body.className = mode === 'preview' ? 'mode-preview' : 'mode-edit';
$('btnEdit').classList.toggle('active', mode === 'edit');
$('btnPreview').classList.toggle('active', mode === 'preview');
requestAnimationFrame(updateLivePreview);
}
$('btnEdit').addEventListener('click', () => setMode('edit'));
$('btnPreview').addEventListener('click', () => setMode('preview'));
// ===== Init ===== // ===== Init =====
setMode('edit');
buildCornerInputs(); buildCornerInputs();
updateAll(); updateAll();
})(); })();
style.css
+57
View File
@@ -29,6 +29,10 @@ body {
header { header {
padding: 16px 24px; padding: 16px 24px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
} }
header h1 { header h1 {
font-size: 18px; font-size: 18px;
@@ -41,6 +45,37 @@ header p {
margin-top: 4px; margin-top: 4px;
} }
.header-left {
min-width: 0;
}
.mode-toggle {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.mode-btn {
padding: 6px 18px;
border: none;
background: var(--panel);
color: #8b949e;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.mode-btn:hover {
color: var(--text);
}
.mode-btn.active {
background: var(--accent);
color: #fff;
}
main { main {
display: grid; display: grid;
grid-template-columns: 1fr 340px; grid-template-columns: 1fr 340px;
@@ -281,6 +316,28 @@ main {
font-style: italic; font-style: italic;
} }
body.mode-edit .left-col .panel:first-child,
body.mode-edit .right-col {
display: flex;
}
body.mode-edit .left-col .panel:last-child {
display: none;
}
body.mode-preview .left-col .panel:first-child,
body.mode-preview .right-col {
display: none;
}
body.mode-preview main {
display: flex;
justify-content: center;
align-items: flex-start;
}
body.mode-preview .left-col {
max-width: 900px;
width: 100%;
}
@media (max-width: 900px) { @media (max-width: 900px) {
main { main {
grid-template-columns: 1fr; grid-template-columns: 1fr;