diff options
| author | Costa Tsaousis (ktsaou) <costa@tsaousis.gr> | 2016-12-01 00:42:42 +0200 |
|---|---|---|
| committer | Costa Tsaousis (ktsaou) <costa@tsaousis.gr> | 2016-12-01 00:42:42 +0200 |
| commit | cc8937ae0800911c121525784789a9ae7bd1a477 (patch) | |
| tree | 10ef656bbc38f24d77d92ff3038b23850665652f /web | |
| parent | c5a15fa11fa1ef83b059cee74f0d69862eddd526 (diff) | |
new site home page
Diffstat (limited to 'web')
| -rw-r--r-- | web/demosites.html | 1728 | ||||
| -rw-r--r-- | web/demosites2.html | 1111 |
2 files changed, 1927 insertions, 912 deletions
diff --git a/web/demosites.html b/web/demosites.html index b515b82c8b..11d4a57412 100644 --- a/web/demosites.html +++ b/web/demosites.html @@ -1,24 +1,457 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <title>NetData - Real-time performance monitoring, done right!</title> - <meta name="application-name" content="netdata"> - - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="apple-mobile-web-app-capable" content="yes"> - <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> - - <meta property="og:locale" content="en_US" /> - <meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/19168687/f6a567be-8c19-11e6-8561-ce8d589e8346.gif"/> - <meta property="og:url" content="http://my-netdata.io/"/> - <meta property="og:type" content="website"/> - <meta property="og:site_name" content="netdata"/> - <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/> - <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." /> -</head> +<!doctype html> +<html lang=en-us> +<meta charset=utf-8> +<title>NetData - Real-time performance monitoring, done right!</title> +<meta name=description + content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance."> +<meta name=viewport content="width=device-width,initial-scale=1"> +<link rel=apple-touch-icon href=apple-touch-icon.png> + +<style>/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ +html { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + color: #fff; + font: 17px/1.4 'Open Sans', sans-serif; + text-align: center +} + +body { + margin: 0; + background-color: #2f3135; + background-image: url(data:image/png;base64,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) +} + +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; + color: #069; + text-decoration: none +} + +a:active, a:hover { + outline-width: 0 +} + +strong { + font-weight: bolder +} + +h1 { + font-size: 3em; + line-height: 1.2em; + margin: 0 .5em .75em +} + +img { + border-style: none; + vertical-align: middle +} + +[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { + border-style: none; + padding: 0 +} + +[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { + outline: 1px dotted ButtonText +} + +a:active, a:focus, a:hover { + text-decoration: underline +} + +::-moz-selection { + background-color: #b3d4fc; + text-shadow: none +} + +::selection { + background-color: #b3d4fc; + text-shadow: none +} + +h2 { + font-size: 2em; + margin: 1.5em 0 +} + +h3 { + color: #555; + font-size: 1.25em; + margin: 0 0 .5em +} + +p { + margin: 0 0 2em +} + +.grid { + margin: 0 -15px; + letter-spacing: -.31em; + word-spacing: -.43em; + text-rendering: optimizespeed +} + +.grid-cell { + display: inline-block; + letter-spacing: normal; + text-align: left; + text-rendering: auto; + vertical-align: top; + width: 50%; + word-spacing: normal +} + +.grid-cell > * { + padding: 0 15px +} + +.inline-block-list { + list-style-type: none; + margin: 0; + padding: 0 +} + +.inline-block-list li { + display: inline-block; + margin: 0 0 0 1.5em; + padding: 0; + vertical-align: top +} + +.inline-block-list li:first-child { + margin-left: 0 +} + +.flex-embed { + background-color: #000; + box-shadow: 0 0 10px #000; + height: 0; + overflow: hidden; + padding-bottom: 56.25%; + position: relative +} + +.flex-embed a, .flex-embed img { + bottom: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100% +} + +.flex-embed .play-btn { + background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2LDkyLjQ4MWM0NC40MzMsMCw4Ni4xOCwxNy4wNjgsMTE3LjU1Myw0OC4wNjRDNDA0Ljc5NCwxNzEuNDExLDQyMiwyMTIuNDEzLDQyMiwyNTUuOTk5cy0xNy4yMDYsODQuNTg4LTQ4LjQ0OCwxMTUuNDU1Yy0zMS4zNzIsMzAuOTk0LTczLjEyLDQ4LjA2NC0xMTcuNTUyLDQ4LjA2NHMtODYuMTc5LTE3LjA3LTExNy41NTItNDguMDY0QzEwNy4yMDYsMzQwLjU4Nyw5MCwyOTkuNTg1LDkwLDI1NS45OTlzMTcuMjA2LTg0LjU4OCw0OC40NDgtMTE1LjQ1M0MxNjkuODIxLDEwOS41NSwyMTEuNTY4LDkyLjQ4MSwyNTYsOTIuNDgxIE0yNTYsNTIuNDgxIGMtMTEzLjc3MSwwLTIwNiw5MS4xMTctMjA2LDIwMy41MThjMCwxMTIuMzk4LDkyLjIyOSwyMDMuNTIsMjA2LDIwMy41MmMxMTMuNzcyLDAsMjA2LTkxLjEyMSwyMDYtMjAzLjUyQzQ2MiwxNDMuNTk5LDM2OS43NzIsNTIuNDgxLDI1Niw1Mi40ODFMMjU2LDUyLjQ4MXogTTIwNi41NDQsMzU3LjE2MVYxNTkuODMzbDE2MC45MTksOTguNjY2TDIwNi41NDQsMzU3LjE2MXoiPjwvcGF0aD48L3N2Zz4K); + height: 150px; + left: 50%; + margin-left: -75px; + margin-top: -75px; + position: absolute; + top: 50%; + -webkit-transition: 1s; + transition: 1s; + width: 150px +} + +.flex-embed:hover .play-btn { + opacity: .5 +} + +.clearfix:after, .clearfix:before { + content: ' '; + display: table +} + +.clearfix:after { + clear: both +} + +.clearfix { + *zoom: 1 +} + +.container { + margin: 0 auto; + max-width: 760px; + padding: 0 10px +} + +.aside { + background-color: #eee; + border: solid #e3e3e3; + border-width: 1px 0; + font-size: 1.125em; + padding: 1em 0 +} + +.btn, .cta-option { + display: inline-block; + position: relative +} + +.cta-option { + margin: 2.5em .5em 0; + vertical-align: top +} + +.btn { + color: #fff; + font-size: 1.5em; + padding: .6em 1em; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); + vertical-align: middle; + border-radius: 4px; + border: 1px solid #333 +} + +.btn:active, .btn:focus, .btn:hover { + text-decoration: none +} + +.btn-download { + background-color: #d9750b; + background-image: -webkit-linear-gradient(#f90 10%, #e76a00 100%); + background-image: linear-gradient(#f90 10%, #e76a00 100%); + box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 3px rgba(0, 0, 0, .2); + border: 1px solid #995309 +} + +.btn-download:active, .btn-download:focus, .btn-download:hover { + background-color: #e0811b; + background-image: -webkit-linear-gradient(#f0a100 10%, #f70 100%); + background-image: linear-gradient(#f0a100 10%, #f70 100%) +} + +.btn-download:active { + background-color: #cf6a00; + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2) inset +} + +.btn-alt { + background-color: #444; + border-color: #222; + box-shadow: none; + font-size: 1.25em; + margin-top: .25em +} + +.btn-alt:active, .btn-alt:focus, .btn-alt:hover { + background-color: #555 +} + +.star { + color: #e08524 +} + +.Icon { + display: inline-block; + height: 16px; + margin: -3px 1px 0 0; + vertical-align: middle; + width: 16px +} + +.Icon--github { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjEgMTIxIj48ZyBmaWxsPSIjMTkxNzE3Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYwLjUgMS42Yy0zMy4zIDAtNjAuNCAyNy02MC40IDYwLjQgMCAyNi43IDE3LjMgNDkuMyA0MS4zIDU3LjMgMyAuNiA0LjEtMS4zIDQuMS0yLjkgMC0xLjQtLjEtNi4yLS4xLTExLjItMTYuNyAzLjYtMjAuMy03LjItMjAuMy03LjItMi43LTctNi43LTguOC02LjctOC44LTUuNS0zLjcuNC0zLjcuNC0zLjcgNi4xLjQgOS4zIDYuMiA5LjMgNi4yIDUuNCA5LjIgMTQuMSA2LjYgMTcuNiA1IC41LTMuOSAyLjEtNi42IDMuOC04LjEtMTMuNC0xLjQtMjcuNS02LjYtMjcuNS0yOS44IDAtNi42IDIuNC0xMiA2LjItMTYuMi0uNi0xLjUtMi43LTcuNy42LTE2IDAgMCA1LjEtMS42IDE2LjYgNi4yIDQuOC0xLjMgMTAtMiAxNS4xLTJzMTAuMy43IDE1LjEgMmMxMS41LTcuOCAxNi42LTYuMiAxNi42LTYuMiAzLjMgOC4zIDEuMiAxNC41LjYgMTYgMy45IDQuMiA2LjIgOS42IDYuMiAxNi4yIDAgMjMuMi0xNC4xIDI4LjMtMjcuNSAyOS44IDIuMiAxLjkgNC4xIDUuNSA0LjEgMTEuMiAwIDguMS0uMSAxNC42LS4xIDE2LjYgMCAxLjYgMS4xIDMuNSA0LjEgMi45IDI0LTggNDEuMy0zMC42IDQxLjMtNTcuMyAwLTMzLjQtMjctNjAuNC02MC40LTYwLjR6Ii8+PHBhdGggZD0iTTIzIDg4LjNjLS4xLjMtLjYuNC0xIC4ycy0uNy0uNi0uNS0uOWMuMS0uMy42LS40IDEtLjJzLjYuNi41Ljl6bS0uOC0uNU0yNS40IDkxYy0uMy4zLS45LjEtMS4yLS4zLS40LS40LS41LTEtLjItMS4zLjMtLjMuOC0uMSAxLjIuMy41LjUuNSAxLjEuMiAxLjN6bS0uNS0uNk0yNy44IDk0LjVjLS40LjMtMSAwLTEuMy0uNS0uNC0uNS0uNC0xLjIgMC0xLjQuNC0uMyAxIDAgMS4zLjUuNC41LjQgMS4xIDAgMS40em0wIDBNMzEuMSA5Ny45Yy0uMy40LTEgLjMtMS42LS4yLS41LS41LS43LTEuMi0uMy0xLjUuMy0uNCAxLS4zIDEuNi4yLjUuNC42IDEuMS4zIDEuNXptMCAwTTM1LjYgOTkuOGMtLjEuNS0uOC43LTEuNS41LS43LS4yLTEuMS0uOC0xLTEuMi4xLS41LjgtLjcgMS41LS41LjcuMiAxLjEuNyAxIDEuMnptMCAwTTQwLjUgMTAwLjJjMCAuNS0uNi45LTEuMy45LS43IDAtMS4zLS40LTEuMy0uOXMuNi0uOSAxLjMtLjljLjcgMCAxLjMuNCAxLjMuOXptMCAwTTQ1LjEgOTkuNGMuMS41LS40IDEtMS4xIDEuMS0uNy4xLTEuMy0uMi0xLjQtLjctLjEtLjUuNC0xIDEuMS0xLjEuNy0uMSAxLjMuMiAxLjQuN3ptMCAwIi8+PC9nPjwvc3ZnPgo=) +} + +.Icon--html5 { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjUwIDEwMSA0MTIgNDEyIj48cGF0aCBmaWxsPSIjRTQ0RDI2IiBkPSJNMTA3LjY0NCA0NzAuODc3bC0zMy4wMTEtMzcwLjI1N2gzNjIuNzM0bC0zMy4wNDYgMzcwLjE5OS0xNDguNTQzIDQxLjE4MXoiLz48cGF0aCBmaWxsPSIjRjE2NTI5IiBkPSJNMjU2IDQ4MC41MjNsMTIwLjAzLTMzLjI3NyAyOC4yNC0zMTYuMzUyaC0xNDguMjd6Ii8+PHBhdGggZmlsbD0iI0VCRUJFQiIgZD0iTTI1NiAyNjguMjE3aC02MC4wOWwtNC4xNS00Ni41MDFoNjQuMjR2LTQ1LjQxMWgtMTEzLjg2OGwxLjA4NyAxMi4xODMgMTEuMTYxIDEyNS4xMzloMTAxLjYyem0wIDExNy45MzZsLS4xOTkuMDUzLTUwLjU3NC0xMy42NTYtMy4yMzMtMzYuMjE3aC00NS41ODVsNi4zNjIgNzEuMzAxIDkzLjAyIDI1LjgyMy4yMDktLjA1OHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjU1Ljg0MyAyNjguMjE3djQ1LjQxaDU1LjkxOGwtNS4yNzEgNTguODk0LTUwLjY0NyAxMy42N3Y0Ny4yNDRsOTMuMDk0LTI1LjgwMS42ODMtNy42NzIgMTAuNjcxLTExOS41NTEgMS4xMDgtMTIuMTk0aC0xMi4yMzd6bTAtOTEuOTEydjQ1LjQxMWgxMDkuNjg4bC45MTEtMTAuMjA3IDIuMDY5LTIzLjAyMSAxLjA4Ni0xMi4xODN6Ii8+PC9zdmc+Cg==) +} + +.Icon--stackoverflow { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjMgMi44IDU4LjIgNTgiPjxwYXRoIGQ9Ik05LjMwNSAzNi44NDhsNC40MDEuMDQzLS4xNTMgMTkuNTk4aDI5LjI5MXYtMTkuNTI4aDQuNjM4djI0LjI4N2gtMzguMjAxbC4wMjQtMjQuNDAxem03LjE3NyAxMS41ODZoMjIuOTQ1djQuODgyaC0yMi45NDV6IiBmaWxsPSIjOTE5MTkxIi8+PHBhdGggZmlsbD0iI2E3OGI2OCIgZD0iTTE3LjAyIDM5LjY0OGwyMi45NiAyLjIxNi0uNDgxIDQuOTgxLTIyLjk2LTIuMjE2eiIvPjxwYXRoIGZpbGw9IiNjMTk2NTMiIGQ9Ik0xOS4xMjEgMjkuNzEzbDIyLjIgNi4yNjYtMS4zNTkgNC44MTYtMjIuMi02LjI2NnoiLz48cGF0aCBmaWxsPSIjZDQ4YzI4IiBkPSJNMjQuNTAxIDE4LjQ4NGwxOS43NDUgMTEuOTI2LTIuNTg3IDQuMjgzLTE5Ljc0NS0xMS45MjZ6Ii8+PHBhdGggZmlsbD0iI2ZlODkwOCIgZD0iTTM1LjczMyA3Ljg0OWwxMy40MzUgMTguNzUxLTQuMDY4IDIuOTE0LTEzLjQzNS0xOC43NTF6Ii8+PHBhdGggZmlsbD0iI2ZmN2ExNSIgZD0iTTUxLjM0IDIuNzUxbDMuODAyIDIyLjc1Mi00LjkzNi44MjUtMy44MDItMjIuNzUyeiIvPjwvc3ZnPgo=) +} + +.site-header { + padding-top: 50px +} + +.site-logo { + color: #fff; + float: left; + font-size: 25px; + font-weight: 700; + line-height: 32px; + text-decoration: none; + text-shadow: 2px 2px 0 #000; + text-transform: uppercase +} + +.site-nav { + float: right; + list-style-type: none; + margin: 7px 0 0; + padding: 0 +} + +.site-nav a { + color: #ffa000; + display: block; + text-decoration: none; + text-transform: uppercase +} + +.site-nav a:active, .site-nav a:focus, .site-nav a:hover { + color: #fff +} + +.site-promo { + padding: 4em 0 6em; + color: white; +} + +.site-promo .description { + color: #ddd; + font-size: 1.2em; + margin: 1em 2em 0 +} + +.last-update { + color: #999; + display: block; + font-size: .75em; + margin-top: 10px +} + +.site-section { + background-color: #f9f9f9; + color: #333; + overflow: hidden; + padding: 2em 0 6em +} + +.site-section-video { + background-color: transparent; + color: #fff; + text-align: center; + padding: 2em 0 3em +} + +.site-section-video .content { + max-width: 720px; + margin: auto; + padding: 10px +} + +.site-section-video h2 { + margin: 1em 0 +} + +.in-the-wild { + font-size: 1.25em; + margin: 0 auto; + max-width: 720px +} + +.site-footer { + font-size: .875em; + padding: 2em +} + +.site-footer a { + color: #ffa000 +} + +@media only screen and (max-width: 800px) { + .site-logo, .site-nav { + float: none + } + + .site-nav li { + margin: 0 .5em + } + + .site-header { + padding-top: 40px + } + + .site-promo { + padding: 3em 0; + color: white; + } + + .site-section { + padding: 0 1em 4em + } +} + +@media only screen and (max-width: 600px) { + html { + font-size: 14px + } + + .last-update, .site-footer { + font-size: 1em + } +} + +@media only screen and (max-width: 460px) { + .grid-cell { + width: 100% + } +} + +@media only screen and (max-width: 420px) { + h1 { + font-size: 2.5em + } + + html { + font-size: 13px + } +} + +@media print { + * { + background-color: transparent !important; + box-shadow: none !important; + color: #000 !important; + text-shadow: none !important + } + + a, a:visited { + text-decoration: underline + } + + img { + page-break-inside: avoid; + max-width: 100% !important + } + + h1 { + padding: 1em 0 0 + } + + .site-promo { + margin: 1em; + padding: 0; + color: white; + } + + .site-section { + padding: 0; + margin: 2em 1em + } + + .site-section-video { + display: none + } + + h2, h3, p { + orphans: 3; + widows: 3 + } + + h2, h3 { + page-break-after: avoid + } +} +</style> <script> // --- OPTIONS FOR THE DASHBOARD -- @@ -31,39 +464,40 @@ // var netdataTheme = 'default'; // this is white var netdataTheme = 'slate'; // this is dark + var netdataNoBootstrap = true; // Set the default netdata server. // on charts without a 'data-host', this one will be used. // the default is the server that dashboard.js is downloaded from. // var netdataServer = 'http://my.server:19999/'; - </script> +</script> - <!-- - --- LOAD dashboard.js --- +<!-- + --- LOAD dashboard.js --- - to host this HTML file on your web server, - you have to load dashboard.js from the netdata server. + to host this HTML file on your web server, + you have to load dashboard.js from the netdata server. - So, pick one the two below - If you pick the first, set the server name/IP. + So, pick one the two below + If you pick the first, set the server name/IP. - The second assumes you host this file on /usr/share/netdata/web - and that you have chown it to be owned by netdata:netdata - --> - <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> --> - <script type="text/javascript" src="dashboard.js?v20161112-1"></script> + The second assumes you host this file on /usr/share/netdata/web + and that you have chown it to be owned by netdata:netdata +--> +<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> --> +<script type="text/javascript" src="dashboard.js?v20161112-1"></script> - <script> +<script> // --- OPTIONS FOR THE CHARTS -- // destroy charts not shown (lowers memory on the browsers) // set this to 'true' to destroy, 'false' to hide the charts NETDATA.options.current.destroy_on_hide = false; - + // set this to false, to always show all dimensions NETDATA.options.current.eliminate_zero_dimensions = true; - + // set this to false, to lower the pressure on the browser NETDATA.options.current.concurrent_refreshes = true; @@ -77,139 +511,172 @@ // abort ajax calls when we scroll NETDATA.options.current.abort_ajax_on_scroll = true; </script> + <style> - body { - font-size: 1vw; + .mygauge-combo { + display: inline-block; + } + + .mygauge { + position: relative; + display: block; + width: 171px; + height: 105px; + } + + .mygauge-button { + display: block; + } + + .mygauge-legend-button { + font-size: 13px; + } + + .mygause-donation { + font-size: 9px; + color: #999; } .mysparkline { position: relative; display: inline-block; - min-height: 50px; width: 100%; - height: 7vmax; + height: 50px; text-align: left; } .mysparkline-overchart-label { position: absolute; display: block; - top: 0; + top: -15px; left: 10px; bottom: 0; right: 0; - font-size: 1vmax; + font-size: 14px; z-index: 1; } .mysparkline-overchart-value { position: absolute; display: block; - top: 1.1vmax; + top: 0px; left: 10px; bottom: 0; right: 0; - font-size: 5vmax; + font-size: 40px; z-index: 2; text-shadow: #333 0px 0px 2px; } - .myfullchart { - position: relative; - display: inline-block; - width: 100%; - height: 12vmax; - min-height: 150px; - text-align: left; - } - - .mygauge-combo { - display: inline-block; - } - - .mygauge { - position: relative; - display: block; - width: 18vw; - height: 11vw; - } - - .mygauge-button { + .mysparkline-overchart-value-center { + position: absolute; display: block; - } - - .mytitle { - padding-top: 6vw; - padding-bottom: 1vw; - text-align: center; - font-size: 2.4vw; - } - - .mysubtitle { - padding-top: 2vw; - padding-bottom: 1vw; + top: 5px; + left: 0px; + bottom: 0; + right: 0; + font-size: 35px; + font-weight: bold; text-align: center; - font-size: 1.8vw; + z-index: 2; + text-shadow: #333 0px 0px 2px; } - .mycontent { - text-align: center; - font-size: 1.5vw; - } - @media only screen and (min-width : 992px) { - .container { - width: 80%; - } - } - @media only screen and (max-width : 992px) { - .container { - width: 100%; - } - } </style> -<body style="text-align: center; background-color: #272b30;"> - -<div class="container"> - - <div style="text-align: center; font-size: 13vw; height: 14vw;"> - <b>netdata</b> - </div> - <div style="text-align: center; font-size: 2vw; height: 2.5vw;"> - real-time performance monitoring - </div> - <div style="width:80%; text-align: right; font-size: 2.7vw;"> - <strong>scaled out</strong>! +<div class=container> + <div class="site-header clearfix" role=banner> + <div class=site-logo>my-netdata.io</div> + <ul class="site-nav inline-block-list"> + <li><a href=https://github.com/firehol/netdata data-ga-category="Outbound links" + data-ga-action="Nav click" data-ga-label="Source code">Source code</a> + <li><a href=https://github.com/firehol/netdata/wiki + data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Docs>Docs</a> + </ul> </div> - <div class="mytitle"> - pick a <b>netdata</b> demo server - </div> - <div class="mycontent"> - these demo servers show what you will get by installing <b>netdata</b> + <div class=site-promo><h1>Linux’s most powerful performance monitoring</h1> + <p class=description> + <strong>Unparalleled</strong> insights, in <strong>real-time</strong>, + of <strong>everything</strong> happening on your Linux systems and applications, + with <strong>stunning</strong> interactive web dashboards + and powerful <strong>performance</strong> and <strong>health</strong> alarms. + <div class=cta-option> + <a class="btn btn-download" href=https://github.com/firehol/netdata/wiki/Installation + data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Install><strong>Install netdata now</strong></a> + <a class=last-update href=https://github.com/firehol/netdata/releases + data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Releases>See netdata releases</a></div> + <div class=cta-option> + <a class="btn btn-alt" href="#demosites">netdata live demo</a> + </div> </div> - <div style="width: 100%; text-align: center; padding-top: 2vw;"> - <div style="width: 100%; text-align: center;"> +</div> +<div class=site-section> + <div class=container><h2>Get control of your Linux servers</h2> + <div class=grid> + <div class=grid-cell><h3><span class=star>★</span> Monitor everything</h3> + <p>Analyze thousands of metrics per server. + Everything about the system (CPU, RAM, disks, network, firewall, QoS, NFS, etc) and detailed performance metrics for dozens of Linux applications + (such as web servers, databases servers, email servers, DNS servers, etc) + and <strong>SNMP</strong> devices. + </div> + <div class=grid-cell><h3><span class=star>★</span> With alarms</h3> + <p>Alarms can be set on any metric monitored by netdata. + Alarm notifications are role-based and support dynamic thresholds, hysteresis and can be dispatched + via multiple methods (such as email, slack.com, pushover.net, pushbullet.com telegram.org, twilio.com). + </div> + <div class=grid-cell><h3><span class=star>★</span> In real-time</h3> + <p>netdata collects thousands of metrics per server <strong>per second</strong>, with just 1% CPU + utilization of a single core, a few MB or RAM and no disk I/O at all. + View everything on <strong>stunning</strong> real-time interactive web dashboards, even when netdata is + running on low-end hardware. + </div> + <div class=grid-cell><h3><span class=star>★</span> Out of the box</h3> + <p>netdata supports auto-detection for everything. It collects more than 5000 metrics automatically, with + <strong>zero configuration</strong>, it has <strong>zero dependencies</strong>, requires <strong>zero + maintenance</strong> and comes with more than 100 alarms pre-configured to detect common + failures, performance and availability issues. + </div> + <div class=grid-cell><h3><span class=star>★</span> Embeddable</h3> + <p>netdata can run anywhere a Linux kernel runs (even IoT) and its charts can be embedded on any web site too. + </div> + <div class=grid-cell><h3><span class=star>★</span> Customizable</h3> + <p>Custom dashboards can be built using simple HTML (no javascript necessary). + </div> + <div class=grid-cell><h3><span class=star>★</span> Extensible</h3> + <p>Anything you can get a number for, can be given to netdata, using its Plugin API (anything can be a netdata plugin, BASH, python, perl, node.js, java, Go, ruby, etc). + </div> + <div class=grid-cell><h3><span class=star>★</span> Scalable</h3> + <p>netdata scales out, your web browser is the central netdata connecting all your servers together. + netdata can archive its metrics to <strong>graphite</strong> or <strong>opentsdb</strong> at a lower + rate, to avoid congesting these servers with the amount of data collected. + </div> + </div> + </div> +</div> +<div id="demosites" class="site-section site-section-video"><h2>netdata live demo sites</h2> + <div class="content"> + <div class="container" style="text-align: center;"> <div class="mygauge-combo"> <div class="mygauge"> <div data-netdata="netdata.requests" - data-host="//london.my-netdata.io" - data-title="EU - London" - data-chart-library="gauge" - data-decimal-digits="0" - data-common-max="top-gauges" - data-width="100%" - data-after="-300" - data-points="300" - data-colors="#558855" - ></div> + data-host="//london.my-netdata.io" + data-title="EU - London" + data-chart-library="gauge" + data-decimal-digits="0" + data-common-max="top-gauges" + data-width="100%" + data-after="-300" + data-points="300" + data-colors="#558855" + ></div> </div> <div class="mygauge-button"> <br/> <br/> - <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'" style="font-size: 1.0vw;">Enter London!</button> - <div style="font-size: 0.8vw;"> + <button type="button" class="btn btn-alt mygauge-legend-button" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'">Enter London!</button> + <div class="mygause-donation"> Donated by DigitalOcean.com </div> </div> @@ -217,21 +684,21 @@ <div class="mygauge-combo"> <div class="mygauge"> <div data-netdata="netdata.requests" - data-host="//atlanta.my-netdata.io" - data-title="US - Atlanta" - data-chart-library="gauge" - data-decimal-digits="0" - data-common-max="top-gauges" - data-width="100%" - data-after="-300" - data-points="300" - data-colors="#AA5555" - ></div> + data-host="//atlanta.my-netdata.io" + data-title="US - Atlanta" + data-chart-library="gauge" + data-decimal-digits="0" + data-common-max="top-gauges" + data-width="100%" + data-after="-300" + data-points="300" + data-colors="#AA5555" + ></div> </div> <div class="mygauge-button"> <br/> <br/> - <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'" style="font-size: 1.0vw;">Enter Atlanta!</button> - <div style="font-size: 0.8vw;"> + <button type="button" class="btn btn-alt mygauge-legend-button" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'">Enter Atlanta!</button> + <div class="mygause-donation"> Donated by CDN77.com </div> </div> @@ -239,21 +706,21 @@ <div class="mygauge-combo"> <div class="mygauge"> <div data-netdata="netdata.requests" - data-host="//sanfrancisco.netdata.rocks" - data-title="US - California" - data-chart-library="gauge" - data-decimal-digits="0" - data-common-max="top-gauges" - data-width="100%" - data-after="-300" - data-points="300" - data-colors="#5555AA" - ></div> + data-host="//sanfrancisco.netdata.rocks" + data-title="US - California" + data-chart-library="gauge" + data-decimal-digits="0" + data-common-max="top-gauges" + data-width="100%" + data-after="-300" + data-points="300" + data-colors="#5555AA" + ></div> </div> <div class="mygauge-button"> <br/> <br/> - <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//sanfrancisco.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter California!</button> - <div style="font-size: 0.8vw;"> + <button type="button" class="btn btn-alt mygauge-legend-button" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//sanfrancisco.netdata.rocks/default.html'">Enter California!</button> + <div class="mygause-donation"> Donated by DigitalOcean.com </div> </div> @@ -261,21 +728,21 @@ <div class="mygauge-combo"> <div class="mygauge"> <div data-netdata="netdata.requests" - data-host="//toronto.netdata.rocks" - data-title="Canada" - data-chart-library="gauge" - data-decimal-digits="0" - data-common-max="top-gauges" - data-width="100%" - data-after="-300" - data-points="300" - data-colors="#885588" - ></div> + data-host="//toronto.netdata.rocks" + data-title="Canada" + data-chart-library="gauge" + data-decimal-digits="0" + data-common-max="top-gauges" + data-width="100%" + data-after="-300" + data-points="300" + data-colors="#885588" + ></div> </div> <div class="mygauge-button"> <br/> <br/> - <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//toronto.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Canada!</button> - <div style="font-size: 0.8vw;"> + <button type="button" class="btn btn-alt mygauge-legend-button" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//toronto.netdata.rocks/default.html'">Enter Canada!</button> |