commit 00f5baee3f446824516ee2c947fa563472d9ef1a Author: Damian Johnson atagar@torproject.org Date: Mon Jul 24 14:11:24 2017 -0700
'What does Nyx provide?' section
Rather than just listing a bunch of confusing screenshots giving a brief guided tour on our features. Hopefully this will make much of what Nyx does more discoverable. --- web/images/features/bandwidth.png | Bin 0 -> 5698 bytes web/images/features/config_editor.png | Bin 0 -> 20697 bytes web/images/features/connections.png | Bin 0 -> 17545 bytes web/images/features/events.png | Bin 0 -> 12793 bytes web/images/features/interpreter.png | Bin 0 -> 53603 bytes web/images/features/menu.png | Bin 0 -> 23760 bytes web/images/features/torrc.png | Bin 0 -> 34782 bytes web/images/screenshots/config_editor.png | Bin 0 -> 603692 bytes web/images/screenshots/connections.png | Bin 0 -> 557585 bytes web/images/screenshots/front_page.png | Bin 0 -> 335698 bytes web/images/screenshots/interpreter.png | Bin 0 -> 726289 bytes web/images/screenshots/torrc.png | Bin 0 -> 531290 bytes web/index.html | 54 +++++++++++++++++++++++++++++-- web/styles.css | 32 +++++++++++++++--- 14 files changed, 80 insertions(+), 6 deletions(-)
diff --git a/web/images/features/bandwidth.png b/web/images/features/bandwidth.png new file mode 100644 index 0000000..032b7c3 Binary files /dev/null and b/web/images/features/bandwidth.png differ diff --git a/web/images/features/config_editor.png b/web/images/features/config_editor.png new file mode 100644 index 0000000..cd9e885 Binary files /dev/null and b/web/images/features/config_editor.png differ diff --git a/web/images/features/connections.png b/web/images/features/connections.png new file mode 100644 index 0000000..0955835 Binary files /dev/null and b/web/images/features/connections.png differ diff --git a/web/images/features/events.png b/web/images/features/events.png new file mode 100644 index 0000000..9cdf44b Binary files /dev/null and b/web/images/features/events.png differ diff --git a/web/images/features/interpreter.png b/web/images/features/interpreter.png new file mode 100644 index 0000000..730b9c4 Binary files /dev/null and b/web/images/features/interpreter.png differ diff --git a/web/images/features/menu.png b/web/images/features/menu.png new file mode 100644 index 0000000..ef2801e Binary files /dev/null and b/web/images/features/menu.png differ diff --git a/web/images/features/torrc.png b/web/images/features/torrc.png new file mode 100644 index 0000000..ca1f5e5 Binary files /dev/null and b/web/images/features/torrc.png differ diff --git a/web/images/screenshots/config_editor.png b/web/images/screenshots/config_editor.png new file mode 100644 index 0000000..d04f412 Binary files /dev/null and b/web/images/screenshots/config_editor.png differ diff --git a/web/images/screenshots/connections.png b/web/images/screenshots/connections.png new file mode 100644 index 0000000..5f5f2ad Binary files /dev/null and b/web/images/screenshots/connections.png differ diff --git a/web/images/screenshots/front_page.png b/web/images/screenshots/front_page.png new file mode 100644 index 0000000..ba1d982 Binary files /dev/null and b/web/images/screenshots/front_page.png differ diff --git a/web/images/screenshots/interpreter.png b/web/images/screenshots/interpreter.png new file mode 100644 index 0000000..045ebc0 Binary files /dev/null and b/web/images/screenshots/interpreter.png differ diff --git a/web/images/screenshots/torrc.png b/web/images/screenshots/torrc.png new file mode 100644 index 0000000..3263a47 Binary files /dev/null and b/web/images/screenshots/torrc.png differ diff --git a/web/index.html b/web/index.html index 365d97c..6e8eae2 100644 --- a/web/index.html +++ b/web/index.html @@ -28,9 +28,59 @@
<p>Nyx is a command-line monitor for <a href="https://www.torproject.org/">Tor</a>. With this you can get detailed real-time information about your relay such as bandwidth usage, connections, logs, and much more.</p>
- <p>Nyx's latest version is <b>1.4.5</b>, released April 28th, 2012.</p> + <p>Nyx's latest version is <b>1.4.5</b>, released April 28th, 2012. Prior to our upcoming release this application went under the name of '<b>arm</b>'. Sorry about the confusion!</p>
- <p><b>Note:</b> Prior to the next release this application went under the name of '<b>arm</b>'. Very sorry about the confusion.</p> + <div class="section" id="features"></div> + <a href="#features" class="section-title">What does Nyx provide?</a> + + <div class="feature"> + <a id="bandwidth"></a> + <a href="images/screenshots/front_page.png"><img src="images/features/bandwidth.png" alt="bandwidth" /></a> + <span class="feature-arrow">«</span><a href="#bandwidth" class="feature-title">Bandwidth Graph</a> + <p>Bandwidth used by Tor. You can press 'i' to pick the graphing <b>interval</b>, or 's' to show other usage <b>statistics</b>.</p> + </div> + + <div class="feature"> + <a id="events"></a> + <a href="images/screenshots/front_page.png"><img src="images/features/events.png" alt="event log" /></a> + <span class="feature-arrow">«</span><a href="#events" class="feature-title">Event Log</a> + <p>Tor logs a wealth of information about itself. We present it, colorized and deuplicated. Press 'e' to select what <b>events</b> are logged and 'f' to <b>filter</b> to just what you want.</p> + </div> + + <div class="feature"> + <a id="connections"></a> + <a href="images/screenshots/connections.png"><img src="images/features/connections.png" alt="connections" /></a> + <span class="feature-arrow">«</span><a href="#connections" class="feature-title">Connections</a> + <p>Connection data similar to netstat or lsof, but correlated with Tor relay information to make it much richer. Press 'enter' for more <b>details</b>, 's' to <b>sort</b>, and 'd' to see raw <b>descriptor</b> data.</p> + </div> + + <div class="feature"> + <a id="config_editor"></a> + <a href="images/screenshots/config_editor.png"><img src="images/features/config_editor.png" alt="configuration editor" /></a> + <span class="feature-arrow">«</span><a href="#config_editor" class="feature-title">Configuration Editor</a> + <p>Editor to change Tor's setting on the fly, with usage information from its manual. Press 'enter' to <b>change</b> Tor settings and 'w' to <b>write</b> your changes to disk.</p> + </div> + + <div class="feature"> + <a id="torrc"></a> + <a href="images/screenshots/torrc.png"><img src="images/features/torrc.png" alt="torrc" /></a> + <span class="feature-arrow">«</span><a href="#torrc" class="feature-title">Torrc</a> + <p>Provides your torrc with line numbers and syntax highlighting. Comments can be <b>stripped</b> by pressing 's'.</p> + </div> + + <div class="feature"> + <a id="interpreter"></a> + <a href="images/screenshots/interpreter.png"><img src="images/features/interpreter.png" alt="interpreter" /></a> + <span class="feature-arrow">«</span><a href="#interpreter" class="feature-title">Interpreter</a> + <p>Integration with <a href="https://stem.torproject.org/">Stem's</a> <a href="https://stem.torproject.org/tutorials/down_the_rabbit_hole.html">interpreter</a>, providing <a href="https://gitweb.torproject.org/torspec.git/tree/control-spec.txt">raw controller access</a>, irc-style commands like <b>/help</b>, tab completion, history scrollback, and a python prompt.</p> + </div> + + <div class="feature"> + <a id="and_more"></a> + <img src="images/features/menu.png" alt="menu" /> + <span class="feature-arrow">«</span><a href="#and_more" class="feature-title">... and more!</a> + <p>That's just the tip of the iceburg. All pages within Nyx provide <b>help</b> information when you press 'h' and <b>menu</b> in response to 'm'. So go explore!</p> + </div> </div> </body> </html> diff --git a/web/styles.css b/web/styles.css index 37bfc4a..bd2ff35 100644 --- a/web/styles.css +++ b/web/styles.css @@ -83,10 +83,10 @@ a:hover { background: white; border-radius: 10px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80); - margin: 50px auto 0px auto; + margin: 50px auto 30px auto; max-width: 630px; padding: 50px; - padding-top: 55px; + padding-top: 0px; text-align: center; }
@@ -96,13 +96,13 @@ a:hover { }
.section { - border-top: 1px solid #856231; + border-bottom: 1px solid #856231; margin-bottom: -16px; + padding-top: 55px; }
.section-title { background: white; - color: #856231; display: inline-block; font-size: 28px; margin: 0px auto; @@ -110,3 +110,27 @@ a:hover { position: relative; }
+.feature { + height: 150px; + margin-top: 25px; + text-align: left; +} + +.feature-title { + font-size: 24px; +} + +.feature-arrow { + color: #523a17; + float: left; + font-size: 50px; + margin-right: 8px; + margin-left: -10px; + margin-top: -20px; +} + +.feature img { + float: left; + margin-right: 25px; +} +