s

2024-09-09 07:19:25 +02:00
parent a961c63f16
commit d84487b79d
38 changed files with 776 additions and 0 deletions
--- a/collections/projectinca/tokenomics/tokens_example.html
+++ b/collections/projectinca/tokenomics/tokens_example.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mermaid Flowchart Pan Zoom Demo</title>
+    <script src="https://bumbu.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <style>
+        #svg-container {
+            width: 100%;
+            height: 600px;
+            border: 1px solid black;
+            overflow: hidden;
+        }
+        #mermaid-diagram {
+            width: 100%;
+            height: 100%;
+        }
+        #mermaid-diagram svg {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="svg-container">
+        <div id="mermaid-diagram" class="mermaid">
+            flowchart TD
+                A["Cloud User"] -- CHF/EUR/... --> B("CLOUD MARKET PLACE<br>Discount based on position<br>in TF Liquidity Pool.") & B2(("ThreeFold<br>Liquidity Pool"))
+                B2 -- TFT or INCA --> B
+                B -- TFT or INCA --> C{"Proof Of Utilization"}
+                G["FARMING GRANTS<br>40m Tokens / Month"] --> I{"Proof Of Capacity<br>uptime, location, ..."}
+                I --> D["ThreeFold Farmers"]
+                C -- 80% --> D
+                C -- 10% --> E["ThreeFold Cooperative"] & F["Validators<br>Commercial Partners"]
+        </div>
+    </div>
+
+    <div>
+        <button id="zoom-in">Zoom In</button>
+        <button id="zoom-out">Zoom Out</button>
+        <button id="reset">Reset</button>
+        <button id="center">Center</button>
+        <button id="fit">Fit</button>
+        <button id="toggle-pan">Toggle Pan</button>
+        <button id="toggle-zoom">Toggle Zoom</button>
+    </div>
+
+    <script>
+        mermaid.initialize({ startOnLoad: true });
+
+        // Wait for Mermaid to render the flowchart
+        mermaid.init(undefined, "#mermaid-diagram").then(function() {
+            // Get the SVG element created by Mermaid
+            var svgElement = document.querySelector("#mermaid-diagram svg");
+            
+            // Initialize svg-pan-zoom
+            var panZoomInstance = svgPanZoom(svgElement, {
+                zoomEnabled: true,
+                controlIconsEnabled: true,
+                fit: true,
+                center: true,
+                minZoom: 0.1,
+                maxZoom: 10,
+                zoomScaleSensitivity: 0.3
+            });
+
+            svgElement.addEventListener('touchstart', function(){}, { passive: true });
+            svgElement.addEventListener('touchmove', function(){}, { passive: true });
+            svgElement.addEventListener('touchend', function(){}, { passive: true });
+
+            // Event listeners for buttons
+            document.getElementById('zoom-in').addEventListener('click', function() {
+                panZoomInstance.zoomIn();
+            });
+
+            document.getElementById('zoom-out').addEventListener('click', function() {
+                panZoomInstance.zoomOut();
+            });
+
+            document.getElementById('reset').addEventListener('click', function() {
+                panZoomInstance.resetZoom();
+                panZoomInstance.resetPan();
+            });
+
+            document.getElementById('center').addEventListener('click', function() {
+                panZoomInstance.center();
+            });
+
+            document.getElementById('fit').addEventListener('click', function() {
+                panZoomInstance.fit();
+            });
+
+            document.getElementById('toggle-pan').addEventListener('click', function() {
+                if (panZoomInstance.isPanEnabled()) {
+                    panZoomInstance.disablePan();
+                    this.textContent = 'Enable Pan';
+                } else {
+                    panZoomInstance.enablePan();
+                    this.textContent = 'Disable Pan';
+                }
+            });
+
+            document.getElementById('toggle-zoom').addEventListener('click', function() {
+                if (panZoomInstance.isZoomEnabled()) {
+                    panZoomInstance.disableZoom();
+                    this.textContent = 'Enable Zoom';
+                } else {
+                    panZoomInstance.enableZoom();
+                    this.textContent = 'Disable Zoom';
+                }
+            });
+
+            // Example of programmatic panning
+            setTimeout(function() {
+                panZoomInstance.panBy({x: 50, y: 50});
+            }, 1000);
+
+            // Example of getting sizes
+            console.log('SVG Sizes:', panZoomInstance.getSizes());
+
+            // Example of zoom at a specific point
+            setTimeout(function() {
+                panZoomInstance.zoomAtPoint(2, {x: 300, y: 200});
+            }, 2000);
+
+            // Example of setting a custom beforeZoom function
+            panZoomInstance.setBeforeZoom(function(oldZoom, newZoom) {
+                console.log('Zoom is about to change from', oldZoom, 'to', newZoom);
+                return true; // Allows zooming to continue
+            });
+
+            // Example of setting a custom onZoom function
+            panZoomInstance.setOnZoom(function(newZoom) {
+                console.log('Zoom has changed to', newZoom);
+            });
+        });
+    </script>
+</body>
+</html>