From c801a2824a4879c7c71c3c57021e5295ba35ec34 Mon Sep 17 00:00:00 2001
From: Michelw <michelw@xpub.nl>
Date: Fri, 5 Jul 2024 13:27:23 +0200
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E5=82=B3=E6=AA=94=E6=A1=88=E5=88=B0?=
 =?UTF-8?q?=E3=80=8Cweb=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/script.js | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 web/script.js

diff --git a/web/script.js b/web/script.js
new file mode 100644
index 0000000..4991efc
--- /dev/null
+++ b/web/script.js
@@ -0,0 +1,65 @@
+$(document).ready(function () {
+  const resizer = $('#resizer');
+  const leftSide = resizer.prev();
+  const rightSide = resizer.next();
+  let x = 0;
+  let leftWidth = 0;
+
+  const mouseDownHandler = function (e) {
+    x = e.clientX;
+    leftWidth = leftSide.width();
+
+    $(document).on('mousemove', mouseMoveHandler);
+    $(document).on('mouseup', mouseUpHandler);
+  };
+
+  const mouseMoveHandler = function (e) {
+    const dx = e.clientX - x;
+    const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parent().width();
+    leftSide.css('width', `${newLeftWidth}%`);
+  };
+
+  const mouseUpHandler = function () {
+    $(document).off('mousemove', mouseMoveHandler);
+    $(document).off('mouseup', mouseUpHandler);
+  };
+
+  resizer.on('mousedown', mouseDownHandler);
+
+  // Tab and content handling
+  const contents = $('.content-tab');
+  const tab = $('.tab');
+
+  tab.on('click', function () {
+    const id = $(this).data('content');
+    tab.removeClass('active');
+    $(this).addClass('active');
+    contents.removeClass('active');
+    $(`#${id}`).addClass('active');
+
+
+
+    if (id === 'about') {
+      $.when(
+        $.getScript('sketch.js'),
+        $.getScript('box.js')
+      ).done(function () {
+        initMatterJS();
+        createBoxes();
+      });
+    }
+  });
+
+  const subtab = $('.subtab');
+  subtab.on('click', function () {
+    const id = $(this).data('content');
+    $(this).addClass('active');
+    contents.removeClass('active');
+    $(`#${id}`).addClass('active');
+
+  });
+
+  // Initially show the about tab
+  $('.tab[data-content="about"]').click();
+});
+