432 lines
16 KiB
HTML
432 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
|
|
<!-- <link rel="stylesheet" href="grids-responsive-min.css"> -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PFstats</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="layout">
|
|
|
|
<header class="header">
|
|
<h1>PFstats</h1>
|
|
<h2>Datawiz Project to view the monitoring by pfstat</h2>
|
|
</header>
|
|
|
|
<a class="menu-link" href="#menu" id="menuLink"><span></span></a>
|
|
|
|
<nav id="menu">
|
|
<div class="pure-menu">
|
|
<!-- <a class="pure-menu-heading" href="/">pfstats</a> -->
|
|
<dl>
|
|
<dt class="pure-menu-list"><a class="pure-menu-heading pure-menu-link" href="#traffic-views">Traffic</a></dt>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#hourly-traffic">Hourly Traffic</a></dd>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#daily-traffic">Daily Traffic</a></dd>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#weekly-traffic">Weekly Traffic</a></dd>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#monthly-traffic">Monthly Traffic</a></dd>
|
|
<!-- <dd><a href="#yearly-traffic">Yearly Traffic</a></dd> -->
|
|
<dt class="pure-menu-list"><a class="pure-menu-heading pure-menu-link" href="#packets-views">Packets</a></dt>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#hourly-packets">Hourly Packets</a></dd>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#daily-packets">Daily Packets</a></dd>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#weekly-packets">Weekly Packets</a></dd>
|
|
<dd class="pure-menu-item"><a class="pure-menu-link" href="#monthly-packets">Monthly Packets</a></dd>
|
|
<!-- <dd><a href="#yearly-packets">Yearly Packets</a></dd> -->
|
|
<dt class="pure-menu-list"><a class="pure-menu-heading pure-menu-link" href="#states-views">States</a></dt>
|
|
<dt class="pure-menu-list"><a class="pure-menu-heading pure-menu-link" href="#errors-views">Errors</a></dt>
|
|
</dl>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="content" id="main">
|
|
|
|
<!-- article for traffic views -->
|
|
<article id="traffic-views">
|
|
<h2 class="content-subhead">Traffic</h2>
|
|
<div class="">
|
|
<section class="" id="hourly-traffic">
|
|
<h3>Hourly</h3>
|
|
<figure>
|
|
<a href="hourly-traffic-ipv4.jpg" title="Hourly Traffic IPv4">
|
|
<picture>
|
|
<source srcset="hourly-traffic-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="hourly-traffic-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="Hourly Traffic IPv4" class="pure-img" src="hourly-traffic-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Hourly Traffic IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="hourly-traffic-ipv6.jpg" title="Hourly Traffic IPv6">
|
|
<picture>
|
|
<source srcset="hourly-traffic-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="hourly-traffic-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="Hourly Traffic IPv6" class="pure-img" src="hourly-traffic-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Hourly Traffic IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<section class="" id="daily-traffic">
|
|
<h3>Daily</h3>
|
|
<figure>
|
|
<a href="daily-traffic-ipv4.jpg" title="Daily Traffic IPv4">
|
|
<picture>
|
|
<source srcset="daily-traffic-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="daily-traffic-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="Daily Traffic IPv4" class="pure-img" src="daily-traffic-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Daily Traffic IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="daily-traffic-ipv6.jpg" title="Daily Traffic IPv6">
|
|
<picture>
|
|
<source srcset="daily-traffic-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="daily-traffic-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="Daily Traffic IPv6" class="pure-img" src="daily-traffic-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Daily Traffic IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<section class="" id="weekly-traffic">
|
|
<h3>Weekly</h3>
|
|
<figure>
|
|
<a href="weekly-traffic-ipv4.jpg" title="Weekly Traffic IPv4">
|
|
<picture>
|
|
<source srcset="weekly-traffic-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="weekly-traffic-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="Weekly Traffic IPv4" class="pure-img" src="weekly-traffic-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Weekly Traffic IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="weekly-traffic-ipv6.jpg" title="Weekly Traffic IPv6">
|
|
<picture>
|
|
<source srcset="weekly-traffic-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="weekly-traffic-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="Weekly Traffic IPv6" class="pure-img" src="weekly-traffic-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Weekly Traffic IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<section class="" id="monthly-traffic">
|
|
<h3>Monthly</h3>
|
|
<figure>
|
|
<a href="monthly-traffic-ipv4.jpg" title="Monthly Traffic IPv4">
|
|
<picture>
|
|
<source srcset="monthly-traffic-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="monthly-traffic-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="Monthly Traffic IPv4" class="pure-img" src="monthly-traffic-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Monthly Traffic IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="monthly-traffic-ipv6.jpg" title="Monthly Traffic IPv6">
|
|
<picture>
|
|
<source srcset="monthly-traffic-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="monthly-traffic-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="Monthly Traffic IPv6" class="pure-img" src="monthly-traffic-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Monthly Traffic IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<!--
|
|
<section class="pure-sm-1-2 pure-md-1-3 pure-lg-1-4 pure-xl-1-5" id="yearly-traffic">
|
|
<h3>Yearly</h3>
|
|
<figure>
|
|
<a href="yearly-traffic-ipv4.jpg" title="Yearly Traffic IPv4">
|
|
<picture>
|
|
<source srcset="yearly-traffic-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="yearly-traffic-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="Yearly Traffic IPv4" class="pure-img" src="yearly-traffic-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Yearly Traffic IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="yearly-traffic-ipv6.jpg" title="Yearly Traffic IPv6">
|
|
<picture>
|
|
<source srcset="yearly-traffic-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="yearly-traffic-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="Yearly Traffic IPv6" class="pure-img" src="yearly-traffic-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Yearly Traffic IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
-->
|
|
</div>
|
|
</article>
|
|
<!-- article for packets view -->
|
|
<article id="packets-views">
|
|
<h2 class="content-subhead">Packets</h2>
|
|
<div class="">
|
|
<section class="" id="hourly-packets">
|
|
<h3>Hourly</h3>
|
|
<figure>
|
|
<a href="hourly-packets-ipv4.jpg" title="Hourly Packets IPv4">
|
|
<picture>
|
|
<source srcset="hourly-packets-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="hourly-packets-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="hourly-packets-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Hourly Packets IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="hourly-packets-ipv6.jpg" title="Hourly Packets IPv6">
|
|
<picture>
|
|
<source srcset="hourly-packets-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="hourly-packets-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="hourly-packets-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Hourly Packets IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<section class="" id="daily-packets">
|
|
<h3>Daily</h3>
|
|
<figure>
|
|
<a href="daily-packets-ipv4.jpg" title="Daily Packets IPv4">
|
|
<picture>
|
|
<source srcset="daily-packets-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="daily-packets-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="daily-packets-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Daily Packets IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="daily-packets-ipv6.jpg" title="Daily Packets IPv6">
|
|
<picture>
|
|
<source srcset="daily-packets-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="daily-packets-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="daily-packets-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Daily Packets IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<section class="" id="weekly-packets">
|
|
<h3>Weekly</h3>
|
|
<figure>
|
|
<a href="weekly-packets-ipv4.jpg" title="Weekly Packets IPv4">
|
|
<picture>
|
|
<source srcset="weekly-packets-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="weekly-packets-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="weekly-packets-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Weekly Packets IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="weekly-packets-ipv6.jpg" title="Weekly Packets IPv6">
|
|
<picture>
|
|
<source srcset="weekly-packets-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="weekly-packets-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="weekly-packets-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Weekly Packets IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<section class="" id="monthly-packets">
|
|
<h3>Monthly</h3>
|
|
<figure>
|
|
<a href="monthly-packets-ipv4.jpg" title="Monthly Packets IPv4">
|
|
<picture>
|
|
<source srcset="monthly-packets-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="monthly-packets-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="monthly-packets-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Monthly Packets IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="monthly-packets-ipv6.jpg" title="Monthly Packets IPv6">
|
|
<picture>
|
|
<source srcset="monthly-packets-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="monthly-packets-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="monthly-packets-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Monthly Packets IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
<!--
|
|
<section class="" id="yearly-packets">
|
|
<h3>Yearly</h3>
|
|
<figure>
|
|
<a href="yearly-packets-ipv4.jpg" title="Yearly Packets IPv4">
|
|
<picture>
|
|
<source srcset="yearly-packets-ipv4.jpg.avif" type="image/avif">
|
|
<source srcset="yearly-packets-ipv4.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="yearly-packets-ipv4.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Yearly Packets IPv4</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="yearly-packets-ipv6.jpg" title="Yearly Packets IPv6">
|
|
<picture>
|
|
<source srcset="yearly-packets-ipv6.jpg.avif" type="image/avif">
|
|
<source srcset="yearly-packets-ipv6.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="yearly-packets-ipv6.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Yearly Packets IPv6</figcaption>
|
|
</figure>
|
|
</section>
|
|
-->
|
|
</div>
|
|
</article>
|
|
<!-- article for states views -->
|
|
<article id="states-views">
|
|
<h2 class="content-subhead">States</h2>
|
|
<div class="pure-g">
|
|
<figure class="pure-u-1-5">
|
|
<a href="hourly-states.jpg" title="Hourly States">
|
|
<picture>
|
|
<source srcset="hourly-states.jpg.avif" type="image/avif">
|
|
<source srcset="hourly-states.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="hourly-states.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Hourly States</figcaption>
|
|
</figure>
|
|
|
|
<figure class="pure-u-1-5">
|
|
<a href="daily-states.jpg" title="Daily States">
|
|
<picture>
|
|
<source srcset="daily-states.jpg.avif" type="image/avif">
|
|
<source srcset="daily-states.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="daily-states.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Daily States</figcaption>
|
|
</figure>
|
|
|
|
<figure class="pure-u-1-5">
|
|
<a href="weekly-states.jpg" title="Weekly States">
|
|
<picture>
|
|
<source srcset="weekly-states.jpg.avif" type="image/avif">
|
|
<source srcset="weekly-states.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="weekly-states.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Weekly States</figcaption>
|
|
</figure>
|
|
|
|
<figure class="pure-u-1-5">
|
|
<a href="monthly-states.jpg" title="Monthly States">
|
|
<picture>
|
|
<source srcset="monthly-states.jpg.avif" type="image/avif">
|
|
<source srcset="monthly-states.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="monthly-states.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Monthly States</figcaption>
|
|
</figure>
|
|
<!--
|
|
<figure class="pure-u-1-5">
|
|
<a href="yearly-states.jpg" title="Yearly States">
|
|
<picture>
|
|
<source srcset="yearly-states.jpg.avif" type="image/avif">
|
|
<source srcset="yearly-states.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="yearly-states.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Yearly States</figcaption>
|
|
</figure>
|
|
-->
|
|
</div>
|
|
</article>
|
|
<!-- article for errors views -->
|
|
<article id="errors-views">
|
|
<h2 class="content-subhead">Errors</h2>
|
|
<div class="pure-g">
|
|
<figure class="pure-u-1-5">
|
|
<a href="hourly-errors.jpg" title="Hourly Errors">
|
|
<picture>
|
|
<source srcset="hourly-errors.jpg.avif" type="image/avif">
|
|
<source srcset="hourly-errors.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="hourly-errors.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Hourly Errors</figcaption>
|
|
</figure>
|
|
|
|
<figure class="pure-u-1-5">
|
|
<a href="daily-errors.jpg" title="Daily Errors">
|
|
<picture>
|
|
<source srcset="daily-errors.jpg.avif" type="image/avif">
|
|
<source srcset="daily-errors.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="daily-errors.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Daily Errors</figcaption>
|
|
</figure>
|
|
|
|
<figure class="pure-u-1-5">
|
|
<a href="weekly-errors.jpg" title="Weekly Errors">
|
|
<picture>
|
|
<source srcset="weekly-errors.jpg.avif" type="image/avif">
|
|
<source srcset="weekly-errors.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="weekly-errors.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Weekly Errors</figcaption>
|
|
</figure>
|
|
|
|
<figure class="pure-u-1-5">
|
|
<a href="monthly-errors.jpg" title="Monthly Errors">
|
|
<picture>
|
|
<source srcset="monthly-errors.jpg.avif" type="image/avif">
|
|
<source srcset="monthly-errors.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="monthly-errors.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Monthly Errors</figcaption>
|
|
</figure>
|
|
<!--
|
|
<figure class="pure-u-1-5">
|
|
<a href="yearly-errors.jpg" title="Yearly Errors">
|
|
<picture>
|
|
<source srcset="yearly-errors.jpg.avif" type="image/avif">
|
|
<source srcset="yearly-errors.jpg.webp" type="image/webp">
|
|
<img alt="" class="pure-img" src="yearly-errors.jpg" type="image/jpeg" width="">
|
|
</picture>
|
|
</a>
|
|
<figcaption>Yearly Errors</figcaption>
|
|
</figure>
|
|
-->
|
|
</div>
|
|
</article>
|
|
|
|
<footer class="footer">
|
|
<hr>
|
|
<p><a href="https://www.benzedrine.ch/pfstat.html">pfstat</a> is a project of Daniel Hartmeir.</p>
|
|
<p>
|
|
This site is built using <a href="https://purecss.io">PureCSS</a>. <br>
|
|
Made with One Brain, Two Hands and <abbr title="Lots Of Love">LOL</abbr>, by <strong><a href="https://huc.fr.eu.org">Stéphane HUC</a> :: IT Log</strong>. <br>
|
|
<a href="https://tildegit.org/hucste/pfstats.git">Git Project</a>
|
|
</p>
|
|
<p>Licensed by <a href="https://opensource.org/licenses/BSD-2-Clause">BSD License</a> © 07/2021</p>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<script src="ui.js"></script>
|
|
</body>
|
|
</html>
|