trimill.xyz/flaskr/templates/projects/zzcxz_vis/index.html

80 lines
2.8 KiB
HTML

{% set meta={"title": "zzcxz visualizer", "desc": "Visualize the structure of <a href=https://zzcxz.citrons.xyz/>zzcxz</a>"} %}
{% extends "/_base.html" %}
{% block head %}
<style>
main, #graph {
height: 100%;
}
main {
position: relative;
}
h1 {
color: var(--fg);
}
.option, .option:hover, .option:active {
color: var(--fg);
text-decoration: underline;
}
.option:visited{
color: var(--fg-faded);
}
.cyan {
color: #0ff;
}
.uielems {
position: absolute;
top: 20px;
left: 20px;
padding-right: 10px;
}
.border {
border-right: 1px solid var(--fg);
}
.bl {
display: block;
margin-top: 2px;
margin-bottom: 2px;
}
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3plus@2"></script>
<script src="index.js"></script>
{% endblock %}
{% block content %}
<div id="spoiler">
<p>
you are about to view a force directed graph of <span class="cyan">zzcxz</span>, a collaborative interactive fiction website by <span class="cyan">citrons</span>. this will contain <span class="cyan">spoilers</span> for zzcxz, so i strongly recommend you try it out before continuing. common side effects of continuing without using zzcxz first include intense guilt, deep regret, immediate apification, and feelings of worthlessness.
</p>
<p>
note: at time of writing (2022-06-23), zzcxz and all other citrons-created content is offline. zzcxz visualizer will not work until it is no longer offline.
</p>
<ul>
<li><a href="https://zzcxz.citrons.xyz/" class="option">visit zzcxz (recommended)</a></li>
<li><a href="https://citrons.xyz/" class="option">visit citrons' website</a></li>
<li><a href="help.html" class="option">view the help page</a></li>
<li><a href="javascript:void(0)" class="option" onclick="visualize()">continue to zzcxz visualizer</a></li>
</ul>
</div>
<div id="graph" style="width: 90vw;"></div>
<div class="uielems border" id="ui" hidden>
<div><a href="javascript:void(0)" id="contract-link">&lt;&lt;</a></div>
Load page:
<input type="text" style="width: 6ch" id="load-page" />
<input class="bl" type="button" value="Clear" id="clear-nodes" />
<input class="bl" type="button" value="Toggle labels" id="toggle-labels" />
<div id="selected-node" hidden>
<hr />
<div><b>Selected node</b></div>
<div><b>title:</b> <span id="selected-node-title"></span></div>
<div><b>id:</b> <span id="selected-node-id"></span></div>
<div><b>link:</b> <a id="selected-node-link" target="_blank">link</a></div>
</div>
</div>
<div class="uielems" id="uiexpand" hidden>
<a href="javascript:void(0)" id="expand-link">&gt;&gt;</a>
</div>
{% endblock %}