pkcpkc/index.html

## index.html
<html>

<head>
    <!-- https://mermaidjs.github.io/sequenceDiagram.html -->
    <script>
        function generateTableOfContents(maxHeaderLevel = 3, styleItem = function (text, level, itemAnchor) {
            var spaces = "&nbsp;".repeat(Math.max(0, (level - 1)) * 3);
            var tocEntry = spaces + '• <a href="#' + itemAnchor + '">' + text + '</a><br/>';
            return tocEntry;
        }) {
            var headers = [];
            for (var i = 0; i < maxHeaderLevel; i++) {
                for (var element of document.getElementsByTagName("h" + i)) {
                    headers.push(element);
                }
            }

            headers.sort(function (a, b) {
                return a.getBoundingClientRect().y - b.getBoundingClientRect().y;
            });

            headers = headers.map(function (element) {
                var tocElementId = 'toc-' + Math.random(Number.MAX_VALUE);
                var styledItem = styleItem(element.innerHTML, element.tagName.substring(1), tocElementId);
                element.innerHTML = '<a name="' + tocElementId + '" href="#"></a>' + element.innerHTML;
                return styledItem;
            });

            return headers.join("");
        }
    </script>
    <style>
        .newPage {
            page-break-before:always;
        }
    </style>
</head>

<body onload="document.getElementById('js-toc').innerHTML=generateTableOfContents();">
    <h1>Table of Contents</h1>
    <div id="js-toc"></div>
    <hr/>
    <h2>My sequence diagram</h2>
    <ul>
        <li>This is why you should do things one after another!</li>
    </ul>
    <div class="mermaid">
        sequenceDiagram
        participant A as British
        participant B as Translator
        participant C as French

        Note over A,C: Nice note!
        A->>B: Hello
        B->>C: Salut
        C-->>B: Quoi?
        B-->>A: Whoot?
    </div>
    <hr />

    <script src="https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ startOnLoad: true, sequence: { useMaxWidth: false } });</script>
</body>

</html>
	<html>

	<head>
	<!-- https://mermaidjs.github.io/sequenceDiagram.html -->
	<script>
	function generateTableOfContents(maxHeaderLevel = 3, styleItem = function (text, level, itemAnchor) {
	var spaces = " ".repeat(Math.max(0, (level - 1)) * 3);
	var tocEntry = spaces + '• <a href="#' + itemAnchor + '">' + text + '</a><br/>';
	return tocEntry;
	}) {
	var headers = [];
	for (var i = 0; i < maxHeaderLevel; i++) {
	for (var element of document.getElementsByTagName("h" + i)) {
	headers.push(element);
	}
	}

	headers.sort(function (a, b) {
	return a.getBoundingClientRect().y - b.getBoundingClientRect().y;
	});

	headers = headers.map(function (element) {
	var tocElementId = 'toc-' + Math.random(Number.MAX_VALUE);
	var styledItem = styleItem(element.innerHTML, element.tagName.substring(1), tocElementId);
	element.innerHTML = '<a name="' + tocElementId + '" href="#"></a>' + element.innerHTML;
	return styledItem;
	});

	return headers.join("");
	}
	</script>
	<style>
	.newPage {
	page-break-before:always;
	}
	</style>
	</head>

	<body onload="document.getElementById('js-toc').innerHTML=generateTableOfContents();">
	<h1>Table of Contents</h1>
	<div id="js-toc"></div>
	<hr/>
	<h2>My sequence diagram</h2>
	<ul>
	<li>This is why you should do things one after another!</li>
	</ul>
	<div class="mermaid">
	sequenceDiagram
	participant A as British
	participant B as Translator
	participant C as French

	Note over A,C: Nice note!
	A->>B: Hello
	B->>C: Salut
	C-->>B: Quoi?
	B-->>A: Whoot?
	</div>
	<hr />

	<script src="https://unpkg.com/mermaid@8.0.0/dist/mermaid.min.js"></script>
	<script>mermaid.initialize({ startOnLoad: true, sequence: { useMaxWidth: false } });</script>
	</body>

	</html>