From cbe0d65a7adc257c38fef82eefc7d05258741328 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@gmail.com>
Date: Fri, 15 Jun 2012 20:33:47 +0200
Subject: [PATCH] legende

---
 html/force.css  | 29 +++++++++++++++++++++++++++++
 html/nodes.html | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/html/force.css b/html/force.css
index c857f5b..de89705 100644
--- a/html/force.css
+++ b/html/force.css
@@ -130,3 +130,32 @@
     color: #fff;
     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;
+}
diff --git a/html/nodes.html b/html/nodes.html
index 82ce6e5..72c295d 100644
--- a/html/nodes.html
+++ b/html/nodes.html
@@ -21,7 +21,39 @@
         <li><a href="geomap.html">Knotenkarte</a></li>
       </ul>
     </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>
   </body>
 </html>