[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]

[tor-commits] [nyx/master] 'What does Nyx provide?' section



commit 00f5baee3f446824516ee2c947fa563472d9ef1a
Author: Damian Johnson <atagar@xxxxxxxxxxxxxx>
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">&laquo;</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">&laquo;</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">&laquo;</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">&laquo;</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">&laquo;</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">&laquo;</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">&laquo;</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;
+}
+



_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits