commit 981e666340bea021408c1a9aebe23b05514f1e98 Author: Damian Johnson atagar@torproject.org Date: Fri Jul 28 16:49:52 2017 -0700

Drop wrapper 'panes' div

Oh. Thought this was necessary for tabs to work but that turns out not to be the case. Neat. --- web/index.html | 252 ++++++++++++++++++++++++++++----------------------------- web/styles.css | 4 +- 2 files changed, 127 insertions(+), 129 deletions(-)

diff --git a/web/index.html b/web/index.html index e1c3c6d..5da37bf 100644 --- a/web/index.html +++ b/web/index.html @@ -25,167 +25,165 @@ </div> </div>

- <div class="panes"> - <div id="home" class="content"> - <div id="welcome" class="section"></div> - <a href="#welcome" class="section-title">Welcome to Nyx</a> + <div id="home" class="page"> + <div id="welcome" class="section"></div> + <a href="#welcome" class="section-title">Welcome to Nyx</a>

- <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 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. Prior to our upcoming release this application went under the name of '<b>arm</b>'. Sorry for the confusion!</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 for the confusion!</p>

- <div id="features" class="section"></div> - <a href="#features" class="section-title">What does Nyx provide?</a> + <div id="features" class="section"></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="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="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="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="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="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="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 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>

- <div id="faq" class="content"> - <div class="section"></div> - <a href="#faq" class="section-title">Fact &amp; Question</a> + <div id="faq" class="page"> + <div class="section"></div> + <a href="#faq" class="section-title">Fact &amp; Question</a>

- <br /><br /> + <br /><br />

- <div class="question" id="what_is_nyx"> - <span>What is Nyx?</span> - <div class="answer"> - <a href="images/screenshots/front_page.png"><img src="images/faq/front_page.png" alt="screenshot" /></a> - <p>Nyx is a command-line application for monitoring real time <a href="https://www.torproject.org/">Tor</a> status information. This includes bandwidth usage, logs, connections, configuration, and more.</p> - <p>As a curses interface Nyx is particularly well suited for ssh connections, tty terminals, and command-line aficionados.</p> - </div> + <div class="question" id="what_is_nyx"> + <span>What is Nyx?</span> + <div class="answer"> + <a href="images/screenshots/front_page.png"><img src="images/faq/front_page.png" alt="screenshot" /></a> + <p>Nyx is a command-line application for monitoring real time <a href="https://www.torproject.org/">Tor</a> status information. This includes bandwidth usage, logs, connections, configuration, and more.</p> + <p>As a curses interface Nyx is particularly well suited for ssh connections, tty terminals, and command-line aficionados.</p> </div> + </div>

- <div class="question" id="why_is_it_called_nyx"> - <span>Why is it called Nyx?</span> - <div class="answer"> - <a href="http://fallenlights.net/"><img src="images/faq/shadowgirl.jpg" alt="greek goddess" title="Nyx by Shadowgirl, used with permission." /></a> - <p style="min-height: 340px">Simple - because the <a href="https://en.wikipedia.org/wiki/Nyx">Greek goddess of night</a> is short and memorable. Terminal applications are handiest when they're brief and easy to type. Top, ssh, scp - anything longer is just begging to be aliased down.</p> - </div> + <div class="question" id="why_is_it_called_nyx"> + <span>Why is it called Nyx?</span> + <div class="answer"> + <a href="http://fallenlights.net/"><img src="images/faq/shadowgirl.jpg" alt="greek goddess" title="Nyx by Shadowgirl, used with permission." /></a> + <p style="min-height: 340px">Simple - because the <a href="https://en.wikipedia.org/wiki/Nyx">Greek goddess of night</a> is short and memorable. Terminal applications are handiest when they're brief and easy to type. Top, ssh, scp - anything longer is just begging to be aliased down.</p> </div> </div> + </div>

- <div id="download" class="content"> - <div class="section"></div> - <a href="#download" class="section-title">Download</a> + <div id="download" class="page"> + <div class="section"></div> + <a href="#download" class="section-title">Download</a>

- <p>Nyx is available Mac OSX, Linux, and BSD but <a href="#windows">not Windows</a>. Find your platform below to get started.</p> + <p>Nyx is available Mac OSX, Linux, and BSD but <a href="#windows">not Windows</a>. Find your platform below to get started.</p>

- <br /> + <br />

- <div class="platform"> - <a href="https://pypi.python.org/pypi/nyx/" id="pypi"><img src="images/download/pypi.png" alt="PyPI" /></a> - <a href="https://pypi.python.org/pypi/nyx/" class="platform-title">Python Package Index</a> - <p>Signed releases and instructions for both Python 2.x and 3.x. You can easily install from its <a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2">tarball</a> (<a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2.asc">sig</a>), or with <b>pip</b>...</p> - <pre> + <div class="platform"> + <a href="https://pypi.python.org/pypi/nyx/" id="pypi"><img src="images/download/pypi.png" alt="PyPI" /></a> + <a href="https://pypi.python.org/pypi/nyx/" class="platform-title">Python Package Index</a> + <p>Signed releases and instructions for both Python 2.x and 3.x. You can easily install from its <a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2">tarball</a> (<a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2.asc">sig</a>), or with <b>pip</b>...</p> + <pre> % sudo easy_install pip % sudo pip install nyx </pre> - </div> + </div>

- <div class="platform"> - <a id="osx"><img src="images/download/osx.png" alt="OSX" /></a> - <span class="platform-title">Mac OSX</span> - <p>As of OSX 10.8 the platform bundles Python 2.7 by default. This makes installation easy...</p> - <pre> + <div class="platform"> + <a id="osx"><img src="images/download/osx.png" alt="OSX" /></a> + <span class="platform-title">Mac OSX</span> + <p>As of OSX 10.8 the platform bundles Python 2.7 by default. This makes installation easy...</p> + <pre> % sudo easy_install pip % sudo pip install nyx </pre> - </div> + </div>

- <div class="platform"> - <a href="http://packages.debian.org/sid/tor-arm" id="debian"><img src="images/download/debian.png" alt="Debian" /></a> - <a href="http://packages.debian.org/sid/tor-arm" class="platform-title">Debian</a> - <p>Package maintained by Dererk for Debian.</p> - <pre>% sudo apt-get install tor-arm</pre> - </div> + <div class="platform"> + <a href="http://packages.debian.org/sid/tor-arm" id="debian"><img src="images/download/debian.png" alt="Debian" /></a> + <a href="http://packages.debian.org/sid/tor-arm" class="platform-title">Debian</a> + <p>Package maintained by Dererk for Debian.</p> + <pre>% sudo apt-get install tor-arm</pre> + </div>

- <div class="platform"> - <a href="https://launchpad.net/ubuntu/+source/tor-arm" id="ubuntu"><img src="images/download/ubuntu.png" alt="Ubuntu" /></a> - <a href="https://launchpad.net/ubuntu/+source/tor-arm" class="platform-title">Ubuntu</a> - <p>Package derived from Debian for Ubuntu.</p> - <pre>% sudo apt-get install tor-arm</pre> - </div> + <div class="platform"> + <a href="https://launchpad.net/ubuntu/+source/tor-arm" id="ubuntu"><img src="images/download/ubuntu.png" alt="Ubuntu" /></a> + <a href="https://launchpad.net/ubuntu/+source/tor-arm" class="platform-title">Ubuntu</a> + <p>Package derived from Debian for Ubuntu.</p> + <pre>% sudo apt-get install tor-arm</pre> + </div>

- <div class="platform"> - <a href="https://apps.fedoraproject.org/packages/tor-arm" id="fedora"><img src="images/download/fedora.png" alt="Fedora" /></a> - <a href="https://apps.fedoraproject.org/packages/tor-arm" class="platform-title">Fedora</a> - <p>Packages maintained by Juan for Fedora.</p> - <pre>% sudo yum install tor-arm</pre> - </div> + <div class="platform"> + <a href="https://apps.fedoraproject.org/packages/tor-arm" id="fedora"><img src="images/download/fedora.png" alt="Fedora" /></a> + <a href="https://apps.fedoraproject.org/packages/tor-arm" class="platform-title">Fedora</a> + <p>Packages maintained by Juan for Fedora.</p> + <pre>% sudo yum install tor-arm</pre> + </div>

- <div class="platform"> - <a href="http://packages.gentoo.org/package/net-misc/arm" id="gentoo"><img src="images/download/gentoo.png" alt="Gentoo" /></a> - <a href="http://packages.gentoo.org/package/net-misc/arm" class="platform-title">Gentoo</a> - <p>Package maintained by Jesse for Gentoo.</p> - <pre>% sudo emerge arm</pre> - </div> + <div class="platform"> + <a href="http://packages.gentoo.org/package/net-misc/arm" id="gentoo"><img src="images/download/gentoo.png" alt="Gentoo" /></a> + <a href="http://packages.gentoo.org/package/net-misc/arm" class="platform-title">Gentoo</a> + <p>Package maintained by Jesse for Gentoo.</p> + <pre>% sudo emerge arm</pre> + </div>

- <div class="platform"> - <a href="https://slackbuilds.org/repository/13.37/network/arm/" id="slackware"><img src="images/download/slackware.png" alt="Slackware" /></a> - <a href="https://slackbuilds.org/repository/13.37/network/arm/" class="platform-title">Slackware</a> - <p>Package maintained by pyllyukko for <a href="http://slackbuilds.org/howto/">Slackware</a>.</p> - </div> + <div class="platform"> + <a href="https://slackbuilds.org/repository/13.37/network/arm/" id="slackware"><img src="images/download/slackware.png" alt="Slackware" /></a> + <a href="https://slackbuilds.org/repository/13.37/network/arm/" class="platform-title">Slackware</a> + <p>Package maintained by pyllyukko for <a href="http://slackbuilds.org/howto/">Slackware</a>.</p> + </div>

- <div class="platform"> - <a href="http://www.freshports.org/security/arm" id="freebsd"><img src="images/download/freebsd.png" alt="FreeBSD" /></a> - <a href="http://www.freshports.org/security/arm" class="platform-title">FreeBSD</a> - <p>Port maintained by Carlo for <a href="http://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/ports.html">FreeBSD</a>.</p> - <pre>% pkg install security/arm</pre> - </div> + <div class="platform"> + <a href="http://www.freshports.org/security/arm" id="freebsd"><img src="images/download/freebsd.png" alt="FreeBSD" /></a> + <a href="http://www.freshports.org/security/arm" class="platform-title">FreeBSD</a> + <p>Port maintained by Carlo for <a href="http://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/ports.html">FreeBSD</a>.</p> + <pre>% pkg install security/arm</pre> + </div>

- <div class="platform"> - <a href="https://gitweb.torproject.org/nyx.git" id="git"><img src="images/download/git.png" alt="Git" /></a> - <a href="https://gitweb.torproject.org/nyx.git" class="platform-title">Source Repository</a> - <p>For those that want to live on the bleeding edge or contribute, Nyx's git repository can be fetched with...</p> - <pre>% git clone https://git.torproject.org/nyx.git</pre> - </div> + <div class="platform"> + <a href="https://gitweb.torproject.org/nyx.git" id="git"><img src="images/download/git.png" alt="Git" /></a> + <a href="https://gitweb.torproject.org/nyx.git" class="platform-title">Source Repository</a> + <p>For those that want to live on the bleeding edge or contribute, Nyx's git repository can be fetched with...</p> + <pre>% git clone https://git.torproject.org/nyx.git</pre> </div> </div>

@@ -194,10 +192,10 @@ // when provided an anchor select the tab it resides within

var anchor = window.location.hash; - $(".tabs").tabs(".panes > .content", { history: true }); + $(".tabs").tabs(".page", { history: true });

if (anchor) { - $(".panes").children().each(function () { + $(".page").each(function () { if ($(this).find(anchor).length) { $(".tabs").data("tabs").click(this.id); document.getElementById(anchor.substr(1)).scrollIntoView(); diff --git a/web/styles.css b/web/styles.css index 081ff27..617b74b 100644 --- a/web/styles.css +++ b/web/styles.css @@ -91,7 +91,7 @@ Header Bar (logo and nav) Common Page Attributes ============================================================*/

-.content { +.page { background: white; border-radius: 10px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80); @@ -102,7 +102,7 @@ Common Page Attributes text-align: center; }

-.content p { +.page p { margin: 20px 0px 0px; text-align: justify; }