47 lines
1.8 KiB
HTML
47 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mermaid Diagram</title>
|
|
<script type="module">
|
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
|
|
|
|
// Initialize Mermaid with the correct configuration
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
theme: "forest", // Set the theme to "forest"
|
|
flowchart: {
|
|
curve: 'basis', // For smoother edges
|
|
},
|
|
themeVariables: {
|
|
handDrawn: true, // Enable hand-drawn look
|
|
fontFamily: 'Comic Sans MS', // Optional: to make the font match a more "hand-drawn" style
|
|
},
|
|
width: '100%', // Ensure the diagram uses max available width
|
|
height: '600px' // Limit the height to emphasize horizontal space
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- Mermaid Diagram -->
|
|
<div class="mermaid">
|
|
flowchart LR
|
|
A["The Customer"] -- CHF/EUR/... --> B("CLOUD MARKET PLACE<br>Discount based on position<br>in TF Liquidity Pool.")
|
|
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<br>Can be Tier-S Datacenters"]
|
|
C -- 80% --> D
|
|
C -- 10% --> E["ThreeFold Cooperative"] & F["Validators<br>Commercial Partners"]
|
|
D -- license fees --> H["TF9<br>ThreeFold Belgium"]
|
|
X["Autonomous AI & Cloud Solutions"] --> B
|
|
A --> X
|
|
X -- Margin --> Y["ThreeFold Dubai"]
|
|
style H fill:#BBDEFB
|
|
style Y fill:#BBDEFB
|
|
style D fill:#BBDEFB
|
|
style F fill:#BBDEFB
|
|
</div>
|
|
</body>
|
|
</html>
|