legende
This commit is contained in:
parent
93b60f4a49
commit
cbe0d65a7a
|
@ -130,3 +130,32 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#legend {
|
||||||
|
position: absolute;
|
||||||
|
top: 1em;
|
||||||
|
right: 1.5em;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend ul {
|
||||||
|
list-style: none;
|
||||||
|
font-size: 9pt;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend li {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend li svg {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
display: inline;
|
||||||
|
vertical-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 9pt;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
|
@ -21,7 +21,39 @@
|
||||||
<li><a href="geomap.html">Knotenkarte</a></li>
|
<li><a href="geomap.html">Knotenkarte</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</header>
|
</header>
|
||||||
<div id="chart"></div>
|
<div id="chart">
|
||||||
|
<div id="legend">
|
||||||
|
<h2>Legende</h2>
|
||||||
|
<ul>
|
||||||
|
<li><svg width=30 height=20 class="node">
|
||||||
|
<ellipse cx=15 cy=10 ry=8 rx=8 />
|
||||||
|
</svg>
|
||||||
|
<label>Knoten</label>
|
||||||
|
</li>
|
||||||
|
<li><svg width=30 height=20 class="node">
|
||||||
|
<ellipse cx=15 cy=10 ry=8 rx=8 class="gateway"/>
|
||||||
|
</svg>
|
||||||
|
<label>Gateway</label>
|
||||||
|
</li>
|
||||||
|
<li><svg width=30 height=20 class="node">
|
||||||
|
<ellipse cx=15 cy=10 ry=4 rx=4 class="client"/>
|
||||||
|
</svg>
|
||||||
|
<label>Client</label>
|
||||||
|
</li>
|
||||||
|
<li><svg width=30 height=20 class="link">
|
||||||
|
<line x1="2" y1="10" x2="28" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
<label>Link</label>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><svg width=30 height=20 class="link vpn">
|
||||||
|
<line x1="2" y1="10" x2="28" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
<label>VPN-Link</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<script src='force.js' type='text/javascript'></script>
|
<script src='force.js' type='text/javascript'></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue