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
|
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hyperbolic tree</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
body { background-color: #091028; }
.tooltip {
color: white;
background-color: #202020;
border: 1px solid #303030;
z-index: 1;
}
.overlay {
background-color: black;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 2;
}
.translucent {
background-color:rgba(0,0,0,0.7)
}
.text { border: 1px solid black; }
.tooltip {
padding: 0.4em;
white-space: nowrap;
}
.button .on { visibility:hidden; }
.button:hover .on { visibility:visible; }
.button:hover .off { visibility:hidden; }
.filled_button.on {
background: -webkit-gradient(linear, left top, left bottom, from(#707080), to(#383848));
background: -moz-linear-gradient(top, #707080 , #383848);
background: -o-linear-gradient(top, #707080 , #383848);
background-color: #606070;
}
.filled_button.off {
background: -webkit-gradient(linear, left top, left bottom, from(#404050), to(#303040));
background: -moz-linear-gradient(top, #404050, #303040);
background: -o-linear-gradient(top, #404050, #303040);
background-color: #303040;
}
.text {
background-color: white;
border-radius: 2px 2px 2px 2px;
padding: 0.4em;
overflow: auto;
}
.text p { margin: 0px; }
.text dl {
margin-top:0;
margin-bottom:0;
}
.text dd {
font-weight:bold;
margin-left:0;
}
.text dt { margin-bottom:0.4em; }
.text ul { padding-left:10px; margin:0; }
.text li { list-style-type: none; }
.text h1 { text-align: center; margin-bottom: 2em; }
</style>
<script type="text/javascript">
var hyp_style =
{ border: 8, padding: 2,
backgroundColor: "black",
treeColor: "#794c0d",
nodeBackgroundColor: "#794c0d", nodeColor: "#171b37",
buttonColor: "white" };
</script>
</head>
<body>
<script type="text/javascript" src="hypertree.js"></script>
</body>
</html>
|
