Update index-z.html

index-z.html

@@ -61,7 +61,20 @@
         <button id="zoomIn" title="Zoom in">+</button>-->
         <button onclick="alert('Nuclide Chart\nCopyright \u00A9 2020 Gustav Lindberg\nSource code: https://github.com/GustavLindberg99/NuclideChart\n\nThe chart is licensed under the MIT license. The data is from https://www.nndc.bnl.gov/.\n\nIcons made by Smashicons and Icomoon from www.flaticon.com are licensed by CC 3.0 BY. Some of the icons have been modified.')">About this chart</button>
     </div>
-<div id="container"  data-zoomable></div>
+<div id="container"></div>
+        <script type="text/javascript">
+            function setZoom(el, scale, transformOrigin) {
+  el.style.transform = `scale(${scale})`;
+  el.style.transformOrigin = `${transformOrigin[0] * 100}% ${transformOrigin[1] * 100}%`;
+}
+
+document.querySelector('#test').addEventListener('input', function() {
+  const scale = this.value / 10;
+  setZoom(document.querySelector('#container'), scale, [0, 0]);
+});
+        </script>
+
+</div>
       <div class="zoom-tool-bar"></div>
     <script
       src="https://code.jquery.com/jquery-3.6.0.min.js"