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