[tor-commits] [nyx/master] 'What does Nyx provide?' section
atagar at torproject.org
atagar at torproject.org
Sat Aug 5 01:18:26 UTC 2017
commit 00f5baee3f446824516ee2c947fa563472d9ef1a
Author: Damian Johnson <atagar at 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;
+}
+
More information about the tor-commits
mailing list