web view
This commit is contained in:
ciomek committed
1 parent
eb32643156
commit
cb735d4fa2
8 files changed
+2036
-507
No files matched your search
@@ -8,29 +8,64 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Colony</h1>
|
||||
<p id="summary" class="summary">Loading...</p>
|
||||
<div class="headline">
|
||||
<h1>Colony</h1>
|
||||
<p id="summary" class="summary">Loading...</p>
|
||||
</div>
|
||||
<div id="alerts" class="alerts"></div>
|
||||
<p id="error" class="error" hidden></p>
|
||||
<p id="viewpoint" class="route-line"></p>
|
||||
<p id="ondemand" class="muted"></p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<svg id="graph" viewBox="0 0 788 556" role="img" aria-label="Nodes with their hardware and the roles they hold"></svg>
|
||||
<ul class="legend">
|
||||
<li><span class="swatch alive"></span>node alive</li>
|
||||
<li><span class="swatch down"></span>node down</li>
|
||||
<li><span class="swatch link"></span>direct link</li>
|
||||
<li><span class="swatch oneway"></span>one-way reach</li>
|
||||
<li><span class="swatch bridge"></span>relays for others</li>
|
||||
<li><span class="swatch held"></span>role held</li>
|
||||
<li><span class="swatch unmet"></span>role unmet</li>
|
||||
<li><span class="swatch duplicate"></span>held twice</li>
|
||||
<li><span class="swatch general"></span>runs on every node</li>
|
||||
</ul>
|
||||
<p id="ondemand" class="muted"></p>
|
||||
<main id="stage">
|
||||
<svg id="map" class="lod2" role="group" aria-labelledby="map-title" aria-describedby="map-help">
|
||||
<title id="map-title">Map of the networks, the nodes in them, and the gateways that connect them</title>
|
||||
<desc id="map-help">Tab to a node, arrow keys move between nodes, Enter pins it. Plus and minus zoom, 0 fits everything, n cycles networks, Alt with arrows moves the focused item, Escape releases.</desc>
|
||||
<defs>
|
||||
<marker id="arrow-0" class="arrow n0" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
|
||||
<marker id="arrow-1" class="arrow n1" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
|
||||
<marker id="arrow-2" class="arrow n2" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
|
||||
<marker id="arrow-3" class="arrow n3" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
|
||||
<marker id="arrow-4" class="arrow n4" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
|
||||
<marker id="arrow-5" class="arrow n5" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker>
|
||||
</defs>
|
||||
<g id="world">
|
||||
<g id="layer-spokes"></g>
|
||||
<g id="layer-regions"></g>
|
||||
<g id="layer-ends"></g>
|
||||
<g id="layer-legs"></g>
|
||||
<g id="layer-nodes"></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="controls" role="group" aria-label="Map view">
|
||||
<button id="reset" type="button" class="text" hidden title="Forget the arrangement you made and lay the map out again">Reset layout</button>
|
||||
<button id="zoom-in" type="button" aria-label="Zoom in" title="Zoom in (+)"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12"/></svg></button>
|
||||
<button id="zoom-out" type="button" aria-label="Zoom out" title="Zoom out (-)"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h12"/></svg></button>
|
||||
<button id="fit" type="button" aria-label="Fit everything" title="Fit everything (0)"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 7V3h4M13 3h4v4M17 13v4h-4M7 17H3v-4"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div id="legend" class="legend">
|
||||
<button id="legend-close" type="button" aria-label="Hide the legend" title="Hide the legend"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15"/></svg></button>
|
||||
<ul>
|
||||
<li><span class="swatch network"></span>network, each in its own colour</li>
|
||||
<li><span class="swatch node"></span>node</li>
|
||||
<li><span class="swatch gateway"></span>gateway, on the edge of its network</li>
|
||||
<li><span class="swatch flow"></span>route through a gateway</li>
|
||||
<li><span class="swatch none"></span>no recent contact (not the same as unreachable)</li>
|
||||
</ul>
|
||||
<p>Drag the background to move, wheel or pinch to zoom. Drag a node, a gateway or a network's title to rearrange.</p>
|
||||
</div>
|
||||
<button id="legend-open" type="button" class="legend-open" aria-label="Show the legend" title="Show the legend" hidden>?</button>
|
||||
<p id="updated" class="muted stamp"></p>
|
||||
</main>
|
||||
|
||||
<footer class="muted"><span id="updated"></span></footer>
|
||||
<div id="live" class="sr-only" role="status" aria-live="polite"></div>
|
||||
<ul id="reader" class="sr-only" aria-label="Networks and their nodes"></ul>
|
||||
<script src="/static/model.js"></script>
|
||||
<script src="/static/layout.js"></script>
|
||||
<script src="/static/viewport.js"></script>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user