Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>My static Space</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <script src="jquery-3.7.1.min.js"></script> | |
| </head> | |
| <body> | |
| <form id="my-form"> | |
| <textarea id="inp" rows="5" cols="33"></textarea> | |
| </form> | |
| <button onclick="displayFormOutput()" type="button">Submit & Display Output</button> | |
| <div id="myList"></div> | |
| <div id="test"> | |
| <pre id = "test1" class="mermaid"> | |
| graph TD | |
| A[Start] --> B[Task 1] | |
| B --> C[Task 2] | |
| C --> D[End] | |
| </pre> | |
| </div> | |
| <script> | |
| const queryString = window.location.search; | |
| const urlParams = new URLSearchParams(queryString); | |
| const merm = urlParams.get("mermaid"); | |
| console.log(merm); | |
| //this_id=document.getElementById("test1"); | |
| //this_id.innerHTML="graph TD\nA[Start] --> B[Task 1]\nB --> C[Task 7]\nC --> D[End]" | |
| //this_id.innerHTML=merm; | |
| </script> | |
| <script> | |
| function displayFormOutput() { | |
| const form = document.getElementById("my-form"); | |
| const inp = form.elements["inp"]; | |
| const inpValue = inp.value || "Not specified"; | |
| const node = document.createElement("pre"); | |
| node.classList.add('mermaid'); | |
| //const textnode = document.createTextNode(inp.value); | |
| //node.appendChild(textnode); | |
| node.innerHTML=inp.value; | |
| document.getElementById("myList").appendChild(node); | |
| this_id=document.getElementById("test1") | |
| this_id.innerHTML=inp.value | |
| $('#mermaid').html(node.data.graph).removeAttr('data-processed'); | |
| mermaid.init(undefined, $("#mermaid")); | |
| } | |
| </script> | |
| <script type="module"> | |
| import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; | |
| mermaid.initialize({ startOnLoad: true }); | |
| </script> | |
| </body> | |
| </html> | |