-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJupyterIframe.html
75 lines (69 loc) · 3.13 KB
/
JupyterIframe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js" integrity="sha512-oKI0pS1ut+mxQZdqnD3w9fqArLyILRsT3Dx0B+8RVEXzEk3aNK3J3pWlaGJ8MtTs1oiwyXDAH6hG6jy1sY0YqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.min.js" integrity="sha512-qKyIokLnyh6oSnWsc5h21uwMAQtljqMZZT17CIMXuCQNIfFSFF4tJdMOaJHL9fQdJUANid6OB6DRR0zdHrbWAw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
window.addEventListener("message", (event) => {
var data = event
}, false);
</script>
</head>
<body class="bg-white relative h-[100vh]">
<div id="body" class="h-full w-full bg-white p-5">
<div class="flex space-x-2">
<div class="relative grow ">
<div class="absolute -top-[0.8rem] px-1 left-5 bg-white">
Input
</div>
<div id="in" class="border rounded-xl p-5 h-[45vh] grow overflow-auto" contenteditable="true"> </div>
</div>
<div class="relative min-w-[10vw] ">
<div class="absolute -top-[0.8rem] px-1 left-5 bg-white">
Log
</div>
<div id="log" class="border rounded-xl p-5 h-[45vh] "> </div>
</div>
</div>
<div class="flex space-x-2 mt-5">
<div class="relative grow ">
<div class="absolute -top-[0.8rem] px-1 left-5 bg-white">
Plot
</div>
<div id="plot" class="border rounded-xl p-5 h-[49vh] grow overflow-auto" > </div>
</div>
<div class="relative min-w-[20vw] ">
<div class="absolute -top-[0.8rem] px-1 left-5 bg-white">
Data
</div>
<div id="data" class="border rounded-xl p-5 h-[41vh] " > </div>
</div>
</div>
<div>
<button class="absolute bottom-5 right-5 rounded-full bg-gray-500 p-4 cursor-pointer text-white" onclick="{document.getElementById('body').requestFullscreen()}">full</button>
</div>
</div>
<script>
const input = document.getElementById("in")
const log = document.getElementById("log")
const dataDiv = document.getElementById("data")
dataDiv.innerText = data
const inputEvent = (event) => {
console.log(event)
if(event.ctrlKey && event.key == 'Enter'){
console.log("run eval")
try{
const res = eval(input.innerText)
console.log(res)
log.innerText = res
} catch(e){
log.innerText = e
console.error(e)
}
}
}
input.addEventListener("keydown", inputEvent)
</script>
</body>
</html>