4.6 KB192 lines
Blame
1<html>
2 <head>
3 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
4 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
5 <link
6 rel="stylesheet"
7 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
8 />
9 <link
10 href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
11 rel="stylesheet"
12 />
13 <link
14 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
15 rel="stylesheet"
16 />
17 <link rel="preconnect" href="https://fonts.googleapis.com" />
18 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
19 <link
20 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
21 rel="stylesheet"
22 />
23 <link
24 href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
25 rel="stylesheet"
26 />
27 <link
28 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
29 rel="stylesheet"
30 />
31
32 <style>
33 body {
34 font-family: 'Arial';
35 }
36
37 table {
38 width: 100%;
39 border-collapse: collapse;
40 table-layout: fixed;
41 }
42
43 th,
44 td {
45 border: 1px solid black;
46 padding: 10px;
47 text-align: center;
48 vertical-align: middle;
49 }
50
51 .separator {
52 height: 20px;
53 background-color: #f0f0f0;
54 }
55
56 .vertical-header {
57 text-align: center;
58 }
59
60 .collapsible {
61 background-color: #f9f9f9;
62 color: #444;
63 cursor: pointer;
64 padding: 18px;
65 width: 100%;
66 border: none;
67 text-align: left;
68 outline: none;
69 font-size: 15px;
70 }
71
72 .active,
73 .collapsible:hover {
74 background-color: #ccc;
75 }
76
77 .collapsible:after {
78 content: '\002B';
79 color: #777;
80 font-weight: bold;
81 float: right;
82 margin-left: 2px;
83 }
84
85 .active:after {
86 content: '\2212';
87 }
88
89 .content {
90 padding: 0 5px;
91 max-height: 0;
92 overflow: hidden;
93 transition: max-height 0.2s ease-out;
94 background-color: #f1f1f1;
95 }
96
97 .content .pre-scrollable {
98 max-height: 200px;
99 overflow-y: scroll;
100 }
101 </style>
102 </head>
103
104 <body>
105 <table>
106 <tr>
107 <th></th>
108 <!-- Placeholder for the top left corner -->
109 <th>State rough</th>
110 <th>Flowchart rough</th>
111 </tr>
112 <tr>
113 <th class="vertical-header">
114 <button class="collapsible">Stadium shape</button>
115 <div class="content">
116 <div class="pre-scrollable">
117 <pre>
118 flowchart LR
119 id1([This is the text in the box])
120
121 </pre
122 >
123 </div>
124 </div>
125 </th>
126 <td>
127 <pre id="diagram1" class="mermaid">
128%%{init: {"look": "handDrawn"} }%%
129stateDiagram-v2
130 stateA
131
132 </pre
133 >
134 </td>
135 <td>
136 <pre id="diagram2" class="mermaid">
137%%{init: {"look": "handDrawn"} }%%
138flowchart LR
139 id1[[This is the text in the box]]
140
141
142 </pre
143 >
144 </td>
145 </tr>
146 </table>
147
148 <script type="module">
149 import mermaid from './mermaid.esm.mjs';
150 import layouts from './mermaid-layout-elk.esm.mjs';
151 mermaid.registerLayoutLoaders(layouts);
152 mermaid.parseError = function (err, hash) {};
153
154 mermaid.initialize({
155 handDrawn: false,
156 mergeEdges: true,
157 layout: 'dagre',
158 flowchart: { titleTopMargin: 10 },
159 // fontFamily: 'Caveat',
160 fontFamily: 'Kalam',
161 sequence: {
162 actorFontFamily: 'courier',
163 noteFontFamily: 'courier',
164 messageFontFamily: 'courier',
165 },
166 fontSize: 16,
167 logLevel: 0,
168 });
169 function callback() {
170 alert('It worked');
171 }
172 mermaid.parseError = function (err, hash) {
173 console.error('In parse error:');
174 console.error(err);
175 };
176
177 let coll = document.getElementsByClassName('collapsible');
178 for (const element of coll) {
179 element.addEventListener('click', function () {
180 this.classList.toggle('active');
181 let content = this.nextElementSibling;
182 if (content.style.maxHeight) {
183 content.style.maxHeight = null;
184 } else {
185 content.style.maxHeight = content.scrollHeight + 'px';
186 }
187 });
188 }
189 </script>
190 </body>
191</html>
192