feat: separate on two pages

2026-06-23 19:33:56 +05:00
parent 109917afde
commit 80112bc239
3 changed files with 77 additions and 2 deletions
@@ -8,8 +8,14 @@
 </head>
 <body>
  <header>
+    <div class="header-left">
      <h1>CSS Matrix3D Perspective Calculator</h1>
      <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>
@@ -342,7 +342,19 @@
  // ===== Resize =====
  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 =====
+  setMode('edit');
  buildCornerInputs();
  updateAll();
 })();
@@ -29,6 +29,10 @@ body {
 header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
 }
 header h1 {
  font-size: 18px;
@@ -41,6 +45,37 @@ header p {
  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 {
  display: grid;
  grid-template-columns: 1fr 340px;
@@ -281,6 +316,28 @@ main {
  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) {
  main {
    grid-template-columns: 1fr;