<!doctype html>
<html lang="en">
<head>
  <title>Tautulli</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Meta Description -->
  <meta name="description" content="A Python based monitoring and tracking tool for Plex Media Server" property="og:description">
  <meta name="keywords" content="tautulli, plex, monitoring, tracking, stats, notifications, plex monitoring, plex tracking, plex stats, plex notifications">
  <meta name="author" content="Tautulli" property="og:title">
  <meta content="Tautulli" property="og:site_name">
  <meta content="website" property="og:type">
  <meta content="https://tautulli.com" property="og:url">
  <meta content="https://tautulli.com/images/logo-circle.png" property="og:image">

  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

  <!-- CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
        integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" href="css/plexcolors.css"/>
  <link rel="stylesheet" href="css/iconmoon.min.css"/>
  <link rel="stylesheet" href="css/gallery.css"/>
  <link rel="stylesheet" href="css/styles.css"/>
</head>
<body class="bg-shark text-alabaster">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-black">
  <div class="container">
    <a class="navbar-brand svg" href="#heading">
      <object data="images/logo-tautulli.svg" type="image/svg+xml" style="height: 50px;"></object>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link text-alabaster" href="#heading">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-alabaster" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-alabaster" href="#features">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-alabaster" href="#preview">Preview</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-alabaster" href="#download">Download</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-alabaster" href="#support">Support</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-alabaster" href="#donate">Donate</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<section id="heading" class="d-flex align-items-center justify-content-center">
  <div class="text-center">
    <h2 class="display-1" id="heading-name">
      <object data="images/tautulli.svg" type="image/svg+xml" style="height: 100px;"></object>
      <span id="heading-plex">for <img src="images/plex-logo-reversed-flat-transparent.png" /></span>
    </h2>
    <p class="p-5">Monitor your Plex Media Server</p>
    <p><a href="#download" class="btn bg-gamboge text-alabaster">Get It Now</a></p>
  </div>

  <blockquote class="blockquote text-right" style="position: absolute; bottom: 2rem; right: 4rem; max-width: 475px">
    <p class="mb-0"><em>Tautulli is the best web application to monitor, view analytics, and receive notifications
      about your Plex Media Server.</em></p>
    <footer class="blockquote-footer">One of the Developer's Mom</footer>
  </blockquote>
</section>

<section id="about" class="bg-river-bed text-alabaster p-5">
  <div class="container">
    <div class="sec-title">
    <h2 class="h2 mb-5 text-alabaster text-center">What is Tautulli?</h2>
    </div>
    <div class="row">
      <div class="col-md-3 col-lg-2 text-center mb-4">
        <object data="images/logo.svg" type="image/svg+xml" class="img-fluid" style="height: 180px;"></object>
      </div>
      <div class="col-md">


        <!--<p class="lead">Tautulli is a python based web application for monitoring, analytics, and notifications for your Plex Media Server.</p>-->
        <p>verb | tau &#x2022; tu &#x2022; li | <code class="bg-shark text-gamboge">/taʊ'-tu'-liː/</code> | To watch or monitor</p>
        <p>
          Tautulli is a 3rd party application that you can run alongside your Plex Media
          Server to monitor activity and track various statistics.
          Most importantly, these statistics include <span class="text-gamboge">what</span> has been watched, <span
          class="text-gamboge">who</span> watched it, <span class="text-gamboge">when</span> and <span
          class="text-gamboge">where</span> they watched it, and <span class="text-gamboge">how</span> it was watched.
          The only thing missing is "<span class="text-gamboge">why</span> they watched it",
          but who am I to question your 42 plays of <em>Frozen</em>.
          All statistics are presented in a nice and clean interface with many tables and graphs, which makes it easy to
          brag about your server to everyone else.
        </p>
      </div>

    </div>
  </div>
</section>

<section id="features" class="text-alabaster p-5">
  <div class="container">

    <div class="sec-title">
      <h2 class="h2 mb-5 text-alabaster text-center">Features</h2>
    </div>

    <div class="row justify-content-md-center">


      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-play fa-3x"></i>
          </div>
          <h3>Monitoring</h3>
          <p class="text-gray-chateau">Monitor the current activity on your Plex Media Server.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-list fa-3x"></i>
          </div>
          <h3>Statistics</h3>
          <p class="text-gray-chateau">View statistics about your Plex library.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-history fa-3x"></i>
          </div>
          <h3>History</h3>
          <p class="text-gray-chateau">Log watch history for all your users.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-chart-bar fa-3x"></i>
          </div>

          <h3>Graphs</h3>
          <p class="text-gray-chateau">View streaming trends with intuitive graphs.</p>
        </div>
      </div>

    </div>

    <div class="row justify-content-md-center">

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-bell fa-3x"></i>
          </div>

          <h3>Notifications</h3>
          <p class="text-gray-chateau">Trigger notifications or scripts from events on your Plex server.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-download fa-3x"></i>
          </div>

          <h3>Recently Added</h3>
          <p class="text-gray-chateau">Keep track of when content is added to your Plex library.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="far fa-newspaper fa-3x"></i>
          </div>

          <h3>Newsletters</h3>
          <p class="text-gray-chateau">Create and send newsletters for recently added media.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-cloud-download-alt fa-3x"></i>
          </div>

          <h3>Sync</h3>
          <p class="text-gray-chateau">View and delete all synced content from your server.</p>
        </div>
      </div>

    </div>

    <div class="row justify-content-md-center">
      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-film fa-3x"></i>
          </div>

          <h3>Media Info</h3>
          <p class="text-gray-chateau">See detailed information on all of your media.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-desktop fa-3x"></i>
          </div>

          <h3>Cross Platform</h3>
          <p class="text-gray-chateau">Works on any system that supports python.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fab fa-android fa-3x mr-2"></i>
            <i class="fab fa-apple fa-3x ml-2"></i>
          </div>

          <h3>Tautulli Remote</h3>
          <p class="text-gray-chateau">Download the official app to view activity and stats on the go.</p>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 col-xs-12 text-center">
        <div class="features-item">
          <div class="m-5">
            <i class="fa fa-ellipsis-h fa-3x"></i>
          </div>

          <h3>And More!</h3>
          <p class="text-gray-chateau"></p>
        </div>
      </div>

    </div>
  </div>
</section>

<section id="preview" class="text-alabaster bg-river-bed p-5">
  <div class="container">

    <div class="sec-title">
      <h2 class="h2 mb-5 text-alabaster text-center">Preview</h2>
    </div>

    <div class="gallery">

      <figure data-image="images/screenshots/activity.png?v=2">
        <img src="images/screenshots/activity-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>Homepage
          <small>Monitor current activity and statistics from the homepage</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/libraries.png?v=2">
        <img src="images/screenshots/libraries-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>Libraries
          <small>View the number of media items in your libraries.</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/library.png?v=2">
        <img src="images/screenshots/library-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>Library Statistics
          <small>See detailed statistics about each library.</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/media-item.png?v=2">
        <img src="images/screenshots/media-item-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>Media Info
          <small>Browse and view info about the media in your Plex libraries.</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/users.png?v=2">
        <img src="images/screenshots/users-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>Users
          <small>Track the activity of your users.</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/user-info.png?v=2">
        <img src="images/screenshots/user-info-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>User Statistics
          <small>See detailed statistics about each user.</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/history.png?v=2">
        <img src="images/screenshots/history-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>History
          <small>Log detailed watched statistics for all streaming activity.</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/graphs.png?v=2">
        <img src="images/screenshots/graphs-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>Graphs
          <small>Analyze trends on your server using beautiful graphs.</small>
        </figcaption>
      </figure>

      <figure data-image="images/screenshots/notifications.png?v=2">
        <img src="images/screenshots/notifications-thumb.png?v=2" alt="Alt Image Text"/>
        <figcaption>Notification
          <small>Get notified with your favourite notification agents.</small>
        </figcaption>
      </figure>

    </div>

  </div>
</section>

<section id="download" class="bg-gamboge text-shark p-5">
  <div class="container">

    <div class="sec-title">
      <h2 class="h2 mb-5 text-center">Download</h2>
    </div>

    <div class="row justify-content-md-center">
      <div class="col-md-4">
        <p class="text-center lead">Tautulli</p>
        <a target="_blank" href="https://github.com/Tautulli/Tautulli"
           onclick="gtag('event', 'download', {event_category: 'engagement', event_label: 'Download - Tautulli', variant: 'Tautulli'})">
          <img alt='Get it on GitHub' src='images/github_badge.png' class="img-fluid mx-auto"/>
        </a>
      </div>
      <div class="col-md-4">
        <p class="text-center lead">Tautulli Remote</p>
        <a target="_blank" href='https://play.google.com/store/apps/details?id=com.tautulli.tautulli_remote'
           onclick="gtag('event', 'download', {event_category: 'engagement', event_label: 'Download - Tautulli Remote', variant: 'Tautulli Remote'})">
          <img alt='Get it on Google Play' src='images/google_play_badge.png' class="img-fluid mx-auto"/>
        </a>
        <a target="_blank" href='https://apps.apple.com/us/app/tautulli-remote/id1570909086'
           onclick="gtag('event', 'download', {event_category: 'engagement', event_label: 'Download - Tautulli Remote', variant: 'Tautulli Remote'})">
          <img alt='Download on the App Store' src='images/app_store_badge.png' class="img-fluid mx-auto"/>
      </a>
      </div>
    </div>

  </div>
</section>


<section id="support" class="text-alabaster p-5">
  <div class="container">

    <div class="sec-title">
      <h2 class="h2 mb-5 text-alabaster text-center">Support</h2>
    </div>
    <div class="row support-button">

      <div class="col-md-3">
        <a target="_blank" href="https://github.com/Tautulli/Tautulli/wiki"
           onclick="gtag('event', 'support', {event_category: 'engagement', event_label: 'Github FAQ'})">
          <i class="fab fa-github fa-3x"></i></a>
      </div>

      <div class="col-md-3">
        <a target="_blank" href="https://tautulli.com/discord.html"
           onclick="gtag('event', 'support', {event_category: 'engagement', event_label: 'Discord'})">
          <i class="fab fa-discord fa-3x"></i></a>
      </div>

      <div class="col-md-3">
        <a target="_blank" href="https://www.reddit.com/r/Tautulli/"
           onclick="gtag('event', 'support', {event_category: 'engagement', event_label: 'Reddit'})">
          <i class="fab fa-reddit-alien fa-3x"></i></a>
      </div>

      <div class="col-md-3">
        <a target="_blank" href="https://forums.plex.tv/t/tautulli-monitor-your-plex-media-server/225242"
           onclick="gtag('event', 'support', {event_category: 'engagement', event_label: 'Plex Forum'})">
          <i class="icon icon-plex fa-3x"></i></a>
      </div>

    </div>
  </div>
</section>

<section id="donate" class="bg-river-bed text-alabaster p-5">
  <div class="container">

    <div class="sec-title">
      <h2 class="h2 mb-5 text-alabaster text-center">Donate</h2>
    </div>

    <div class="row justify-content-md-center">
      <div class="col-md-8 mb-3 card-deck">
        <div class="card bg-shark">
          <div class="card-body">
            <h4 class="card-title">Tautulli</h4>

            <a target="_blank" href="https://github.com/sponsors/JonnyWong16"
               onclick="gtag('event', 'donate', {event_category: 'ecommerce', event_label: 'Tautulli - Github', method: 'Github', variant: 'Tautulli'})"
               class="btn btn-link text-gamboge hover-text-alabaster">
              <i class="fab fa-github"></i> Github</a>
            <a target="_blank" href="https://www.patreon.com/join/tautulli"
               onclick="gtag('event', 'donate', {event_category: 'ecommerce', event_label: 'Tautulli - Patreon', method: 'Patreon', variant: 'Tautulli'})"
               class="btn btn-link text-gamboge hover-text-alabaster">
              <i class="fab fa-patreon"></i> Patreon</a>
            <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=6XPPKTDSX9QFL&lc=US&item_name=Tautulli&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted"
               onclick="gtag('event', 'donate', {event_category: 'ecommerce', event_label: 'Tautulli - Paypal', method: 'Paypal', variant: 'Tautulli'})"
               class="btn btn-link text-gamboge hover-text-alabaster">
              <i class="fab fa-paypal"></i> PayPal</a>
          </div>
        </div>
        <div class="card bg-shark">
          <div class="card-body">
            <h4 class="card-title">Tautulli Remote</h4>

            <a target="_blank" href="https://github.com/sponsors/TheMeanCanEHdian"
               onclick="gtag('event', 'donate', {event_category: 'ecommerce', event_label: 'Tautulli Remote - Github', method: 'Github', variant: 'Tautulli Remote'})"
               class="btn btn-link text-gamboge hover-text-alabaster">
              <i class="fab fa-github"></i> Github</a>
          <a target="_blank" href="https://play.google.com/store/apps/details?id=com.tautulli.tautulli_remote"
             class="btn btn-link text-gamboge hover-text-alabaster">
            <i class="fab fa-android"></i> In-app</a>
          <!-- <a target="_blank" href=""
             class="btn btn-link text-gamboge hover-text-alabaster">
            <i class="fab fa-apple"></i> In-app</a> -->
          </div>
        </div>
      </div>
    </div>

  </div>

    <div class="modal fade" id="bitcoin-modal" tabindex="-1" role="dialog" aria-labelledby="bitcoin-modal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content bg-shark">
          <div class="modal-header bg-river-bed border-shark">
            <h5 class="modal-title">Bitcoin Donation</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"><i class="fa fa-remove"></i></span>
            </button>
          </div>
          <div class="modal-body">
            <label>QR Code</label>
            <pre id="crypto_qr_code" class="text-center bg-alabaster rounded p-2"></pre>
            <label>Bitcoin Address</label>
            <pre id="crypto_address" class="text-center bg-alabaster rounded p-2"></pre>
          </div>
          <!--<div class="modal-footer">-->
          <!--</div>-->
        </div>
      </div>
    </div>

</section>

<footer id="footer" class="p-5 text-gray-chateau">
  <div class="container">
    <div class="text-center">
      <div class="footer-content">
        <p>Copyright &copy; 2021 | JonnyWong16 / WilliamComartin / TheMeanCanEHdian</p>
        <p>Tautulli is not affiliated with Plex Inc.</p>
      </div>
    </div>
  </div>
</footer>

<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" style="display:none;">
  <symbol id="close" viewBox="0 0 18 18">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M9,0.493C4.302,0.493,0.493,4.302,0.493,9S4.302,17.507,9,17.507
			S17.507,13.698,17.507,9S13.698,0.493,9,0.493z M12.491,11.491c0.292,0.296,0.292,0.773,0,1.068c-0.293,0.295-0.767,0.295-1.059,0
			l-2.435-2.457L6.564,12.56c-0.292,0.295-0.766,0.295-1.058,0c-0.292-0.295-0.292-0.772,0-1.068L7.94,9.035L5.435,6.507
			c-0.292-0.295-0.292-0.773,0-1.068c0.293-0.295,0.766-0.295,1.059,0l2.504,2.528l2.505-2.528c0.292-0.295,0.767-0.295,1.059,0
			s0.292,0.773,0,1.068l-2.505,2.528L12.491,11.491z"/>
  </symbol>
</svg>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
        integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"
        integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe"
        crossorigin="anonymous"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<!-- jquery easing -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>

<script src="js/script.min.js"></script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JW9GTT49EH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JW9GTT49EH');
</script>

</body>
</html>