euphobyte.github.io/index.html at main · euphobyte/euphobyte.github.io · GitHub

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<title>Euphobyte</title>
<script>
const lines = ["ncurses.txt", "pc_bios.txt", "pc_boot_sector.txt","pc_boot_second.txt","pc_boot_keyb.txt","pc_boot_serial.txt",
               "cs_console.txt", "cs_serial.txt", "cs_data.txt", "cs_disk.txt", "control_chars.txt", "xmodem.txt", "debian_nodejs.txt"];
window.addEventListener("load", (event) => {
  initList();
});

function initList(){
  const el=document.querySelector("#list1");
  lines.forEach((str) => {
    const ln= document.createElement("li");
    ln.innerText = str;
    ln.addEventListener("click", clickedItem);
    el.appendChild(ln);
  });
}

function clickedItem(e){
  const el = document.querySelector("#frame_a");
  el.src = "doc/" + e.target.innerText;
}
</script>
<style>
a{
  text-decoration: none;
}
li{
  font: normal 10pt Consolas;
  cursor: pointer;
}
#outer{
  display: flex;
  height: 100%;
}
#left, #right{
  flex: 1;
}
#left{
  display: flex;
  flex-direction: column;
}
.msg{
  font: italic 8pt Consolas;
}
#right{
  display: flex;
  border-left: 1px solid lightgrey;
  margin-left: 4px;
  overflow: hidden;
}
#lmain{
  flex: 1;
}
iframe{
  flex: 1;
  border: none;
}
h2{
  font: bold 13pt Consolas;
}
h3{
  font: bold 11pt Consolas;
}
hr{
  border: none;
  border-top: 1px solid lightgrey;
}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="lmain">
<h2>Exploring Digital Technology</h2>
<ul id="list1"></ul>
<hr><br>
<a class="msg" href="nojs.html">Go for the future, select the sans JS version of this page</a>
<br><h3>Simple example of JS library</h3>
<ul>
<li><a href="api/calendar.html" target="frame_a">FullCalendar</a>
<li><a href="api/ace_code_ed.html" target="frame_a">Ace Code Editor</a>
<li><a href="api/mirror.html" target="frame_a">Code Mirror</a>
<li><a href="api/tabulator.html" target="frame_a">Tabulator</a>
</ul>
</div>
<div class="msg">FOR EDUCATIONAL PURPOSES ONLY. Source code is provided as-is without warranty, and disclaiming liability for damages resulting from using the source code.</div>
</div>
<div id="right">
<iframe id="frame_a" name="frame_a"></iframe>
</div>
</div>
</body>
</html>