1
0
mirror of https://github.com/TeamNewPipe/website synced 2025-10-06 00:22:38 +02:00
Files
website/index.html

564 lines
28 KiB
HTML

---
---
<!DOCTYPE html>
<html>
<head>
<title>NewPipe - a free YouTube client</title>
<meta name="author" content="Christian Schabesberger, NewPipe" />
<meta name="description" content="Welcome to the Website of NewPipe the lightweight YouTube experience for Android." />
<meta name="keywords" content="NewPipe, YouTube, Android" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="icon" href="{{ site.baseurl }}/favicon.ico" sizes="64x64" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/blog/feeds/news.rss"/>
<link rel="alternate" type="application/atom+xml" title="ATOM" href="/blog/feeds/news.atom"/>
<!-- JQuery -->
<script src="{{ site.baseurl }}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="{{ site.baseurl }}/js/html5shiv.min.js"></script>
<script src="{{ site.baseurl }}/js/respond.min.js"></script>
<![endif]-->
<!-- FontAwesome -->
<link rel="stylesheet" href="{{ site.baseurl }}/font-awesome/css/font-awesome.min.css" />
<!-- Custom stylesheets -->
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/style.css" />
</head>
<body id="main-page">
<!-- parallax background for header -->
<div class="header-background"></div>
<!-- header-wrapper -->
<div class="header-wrapper">
<!-- navigation -->
<div id="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" onclick="parallax_reset();" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">NewPipe</a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="{{ site.baseurl }}/">Home</a></li>
<li><a href="{{ site.baseurl }}/blog/">Blog</a></li>
<li><a href="{{ site.baseurl }}/press/">Press</a></li>
<li><a href="https://github.com/TeamNewPipe/NewPipe/">GitHub</a></li>
<li><a href="https://github.com/TeamNewPipe/NewPipe/releases/">Releases</a></li>
<li><a href="https://github.com/TeamNewPipe/NewPipe/issues/">Issues</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div> <!-- navigation -->
<!-- header-box -->
<div class="header-box-wrapper">
<div class="container container-double">
<div class="header-text pull-left">
<h1 class="hidden-xs">NewPipe</h1>
<br class="hidden-xs">
<h3>the lightweight<br>YouTube experience<br>for Android</h3>
</div>
<div class="logo">
<img src="{{ site.baseurl }}/img/logo.svg" class="img-circle border-white" />
</div>
<div class="f-droid-wrapper">
<a href="https://f-droid.org/packages/org.schabi.newpipe/" target="_blank">
<img src="{{ site.baseurl }}/img/f-droid.svg" class="f-droid" alt="F-Droid" />
</a>
</div>
<div class="phone hidden-xs">
<video id="animation" src="{{ site.baseurl }}/img/newpipe_promotion_video.mp4" preload='none' loop="" ></video>
<img src="{{ site.baseurl }}/img/nexus6.png" />
</div>
</div>
</div> <!-- header-box -->
</div> <!-- header-wrapper -->
<!-- first text box -->
<div class="text-1">
<div class="container container-double">
<div class="text-1-wrapper">
<div class="row">
<div class="col-sm-6">
<p><strong>Do you like watching videos on YouTube<br>but looking for a simple app to do that?</strong></p>
<p class="text-justify-md"><span class="red">NewPipe</span> has been created with the purpose of getting the original YouTube experience on your smartphone without annoying ads and questionable permissions.</p>
<p>The application is Open Source and you can check on it at <a href="https://github.com/TeamNewPipe/NewPipe/">GitHub</a>.</p>
</div>
</div>
</div>
<!-- separator -->
<div class="row">
<div class="col-md-12">
<hr class="visible-xs separator" />
</div>
</div>
</div>
</div> <!-- first text box -->
<div id="features">
<div class="container container-double">
<h3 id="features-title">Main Features</h3>
</div>
<div class="container container-double">
<div class="row is-flex">
<div class="col-md-9 feature-detail" id="lightweight">
<h3 style="font-weight: bold">NewPipe - the smart streaming solution</h3>
<div class="feature-media"></div>
<div class="feature-description">
<div class="row">
<div class="col-sm-6">
<div class="single-chart">
<svg viewbox="0 0 36 36" class="circular-chart red">
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle in"
stroke-dasharray="80, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span class="circle-text"><i class="fa fa-bolt"></i></span>
</div>
<p class="text-center">Fast</p>
</div> <!-- fast -->
<div class="col-sm-6">
<div class="single-chart">
<svg viewbox="0 0 36 36" class="circular-chart red">
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle"
stroke-dasharray="87, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span class="circle-text fa-mobile-wrapper"><i class="fa fa-mobile"></i></span>
</div>
<p class="text-center">Small</p>
</div> <!-- size -->
<div class="col-sm-6">
<div class="single-chart">
<svg viewbox="0 0 36 36" class="circular-chart red">
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle"
stroke-dasharray="97, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span class="circle-text"><i class="fa fa-battery"></i></span>
</div>
<p class="text-center">Battery Saving</p>
</div> <!-- battery -->
<div class="col-sm-6">
<div class="single-chart">
<svg viewbox="0 0 36 36" class="circular-chart red">
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle in"
stroke-dasharray="90, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span class="circle-text"><i class="fa fa-signal"></i></span>
</div>
<p class="text-center">Little Data Consumption</p>
</div> <!-- data -->
</div>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="downloads" >
<h3>Downloads</h3>
<div class="feature-media">
<img src="/img/screenshots/shot_02.png" class="img-responsive active" />
<!--<img src="/img/screenshots/shot_03.png" class="img-responsive" />-->
</div>
<div class="feature-description">
<p><strong>Customize your download:</strong></p>
<ul>
<li>Set title</li>
<li>Choose between video or audio download</li>
<li>Select the most suitably file format</li>
<li>Download the resolution you need</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="privacy" >
<h3>Extended Privacy</h3>
<div class="feature-media">
<img src="/img/privacy_written_in_tiles.jpg" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>We protect your privacy</strong></p>
<ul>
<li>No proprietary Google APIs</li>
<li>Only send information which are required to get video and channel details</li>
<li>Decide what information we keep</li>
<li>We store everything offline on your device</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="background" >
<h3>Background Player</h3>
<div class="feature-media">
<img src="/img/screenshots/shot_06.png" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>Listen to your favourite music while using other apps:</strong></p>
<ul>
<li>Play in background</li>
<li class="text-success">Pro tip: close NewPipe to save RAM and battery</li>
<li>Create playlists for an endless music experience</li>
<li>Save mobile data volume (we only download the audio)</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="popup" >
<h3>Popup Player</h3>
<div class="feature-media">
<img src="/img/screenshots/shot_05.png" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>Never stop playing!</strong></p>
<ul>
<li>View videos whenever you like</li>
<li>Resize and move it wherever you like</li>
<li>Use the full comfort of our normal video player</li>
<li class="text-success">Pro tip: switch between all players with one click</li>
<li>Available for all Android versions</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="subscriptions" >
<h3>Subscriptions</h3>
<div class="feature-media">
<img src="/img/screenshots/shot_09.png" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>Never miss updates again:</strong></p>
<ul>
<li>Subscribe a channel with one click</li>
<li>Use your custom feed</li>
<li>Watch your favourite artists</li>
<li>Easily synchronize your local subscriptions with other devices</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="bookmarks">
<h3>Bookmarks and Local Playlists</h3>
<div class="feature-media">
<img src="/img/screenshots/shot_14.png" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>Endless music</strong></p>
<ul>
<li>Create your own playlists</li>
<li>Import playlists</li>
<li>Mark your favourite videos</li>
<li class="text-success">Synchronize your data with other devices to safe time</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="history" >
<h3>History</h3>
<div class="feature-media">
<img src="/img/screenshots/shot_10.png" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>Go back in time</strong></p>
<ul>
<li>Watch your favourites again</li>
<li>Search suggestions based on your last searches </li>
<li>Easily open what you watch most</li>
<li class="text-success">Control what we keep for you</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="code" >
<h3>NewPipe is Open Source</h3>
<div class="feature-media">
<a href="https://github.com/TeamNewPipe/NewPipe">
<img src="/img/newpipe_on_github.png" class="img-responsive" />
</a>
</div>
<div class="feature-description">
<p><strong>Your advantages</strong></p>
<ul>
<li>Quick help when you have a problem (nobody's ever had one)</li>
<li>Dozens of people bring NewPipe forward and translate it into <a href="https://hosted.weblate.org/engage/NewPipe/">43&nbsp;languages</a>.</li>
<li>You can check the sourcecode on <a href="https://github.com/TeamNewPipe/NewPipe">GitHub</a> and contribute to NewPipe.</li>
<li>NewPipe is covered by the <a href="https://github.com/TeamNewPipe/NewPipe/blob/master/LICENSE">GPL&nbsp;3.0&nbsp;license</a>.</li>
<li>Get NewPipe from <a href="https://f-droid.org/packages/org.schabi.newpipe/">F-Droid</a> and we guarantee that it is generated from the sourcecode.</li>
<li class="text-success">NewPipe is available for free</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="col-md-9 feature-detail" id="price" >
<h3>Support NewPipe</h3>
<div class="feature-media">
<img src="/img/phone_donate.png" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>Why NewPipe is free</strong></p>
<ul>
<li class="heart">We love what we are doing</li>
<li>NewPipe is powered by a growing community</li>
<li>Our goal is to make the internet a more free (libre) place and open it for everyone</li>
<li>Your donation cover a majority our costs</li>
<li class="text-success">F-Droid, WebLate, Sentry and other companies offer their services to Open Source projects for free</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<!--<div class="col-md-9 feature-detail" id="4k" >
<h3>Live Stream and 4k</h3>
<div class="feature-media">
<img src="/img/screenshots/shot_01.png" class="img-responsive" />
</div>
<div class="feature-description">
<p><strong>Ge</strong></p>
<ul>
<li>Set title</li>
<li>Choose between video or audio download</li>
<li>Select the most suitably file format</li>
<li>Download the resolution you need</li>
</ul>
</div>
<div class="feature-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
</div>-->
<!-- Sidebar -->
<div class="col-md-3" id="features-sidebar">
<div class="list-group">
<a href="#lightweight">
<div class="list-group-item active">
<span class="icon"><i class="fa fa-bolt"></i></span> Lightweight
</div>
</a>
<a href="#downloads">
<div class="list-group-item">
<span class="icon"><i class="fa fa-download"></i></span> Downloads
</div>
</a>
<a href="#privacy">
<div class="list-group-item">
<span class="icon"><i class="fa fa-lock"></i></span> Extended Privacy
</div>
</a>
<a href="#background">
<div class="list-group-item">
<span class="icon"><i class="fa fa-volume-up"></i></span> Background Player
</div>
</a>
<a href="#popup">
<div class="list-group-item">
<span class="icon"><i class="fa fa-window-maximize"></i></span> Popup Player
</div>
</a>
<a href="#subscriptions">
<div class="list-group-item">
<span class="icon"><i class="fa fa-feed"></i></span> Subscriptions
</div>
</a>
<a href="#bookmarks">
<div class="list-group-item">
<span class="icon"><i class="fa fa-bookmark"></i></span> Bookmarks
</div>
</a>
<a href="#history">
<div class="list-group-item">
<span class="icon"><i class="fa fa-history"></i></span> History
</div>
</a>
<a href="#code">
<div class="list-group-item">
<span class="icon"><i class="fa fa-code"></i></span> Open Source
</div>
</a>
<a href="#price">
<div class="list-group-item">
<span class="icon"><i class="fa fa-dollar"></i></span> Free
</div>
</a>
<!--<a href="#4k">
<div class="list-group-item">
<span class="icon"><i class="fa fa-podcast"></i></span> Live
</div>
</a>-->
</div>
</div>
</div>
</div>
</div>
<!-- second text box -->
<div class="text-2">
<div class="container">
<!-- download -->
<div class="row">
<div class="col-md-12">
<p><strong class="extra">Like the idea?<br>Download <a class="red">NewPipe</a> from <a href="https://f-droid.org/" target="_blank">F-Droid</a></strong></p>
<br>
<p>F-Droid is a trusted catalogue of Free and Open Source applications for Android.</p>
<p class="f-droid-wrapper"><a href="https://f-droid.org/packages/org.schabi.newpipe/" target="_blank"><img src="{{ site.baseurl }}/img/f-droid.svg" class="f-droid" alt="F-Droid" /></a></p>
<br class="hidden-xs" ><br class="hidden-xs" >
</div>
</div>
<!-- separator -->
<div class="row">
<div class="col-md-12">
<hr class="visible-xs separator" />
</div>
</div>
<!-- donate -->
<div class="row">
<div class="col-md-12">
<p><strong class="extra">Do we look fancy?</strong></p>
<br>
</div>
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-justify">
<p>We hope so! But don't forget, a lot of time and energy goes into this, and we share it with you. We would like to offer you some ways you can support our work by donations. So we can get some <strong class="red">extra snacks during work!</strong></p>
<br>
</div>
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
<p><a href="{{ site.baseurl }}/donate/"><button class="donate">Donate</button></a></p>
<br>
<p>Thank you in advance!</p>
</div>
</div> <!-- donate -->
</div>
</div> <!-- second text box -->
<!-- footer -->
<footer class="footer">
<div class="image-puffer background-light-gray"></div>
<div class="container">
<div class="image-holder">
<img src="{{ site.baseurl }}/img/logo.svg" class="footer-logo img-circle border-white" />
</div>
<div class="footer-copyright text-center">
<p>
<span class="copyright">Copyright &copy; Team NewPipe. Please refer to our <a href="LICENSE.html" target="_blank">licensing page</a> for more information.</span>
</p>
</div>
</div>
</footer> <!-- footer -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ site.baseurl }}/bootstrap/js/bootstrap.min.js"></script>
<!-- Script for parallax animations -->
<script src="{{ site.baseurl }}/js/parallax.js"></script>
<!-- Script for feature animations -->
<script src="{{ site.baseurl }}/js/features.js"></script>
<!-- Load and play animation on medium and large screens -->
<script>
var loaded = false;
var playing = false;
var animation = $('#animation').get(0);
$(window).on("orientationchange load resize", function () {
if($(window).width() > 767 && !loaded){
animation.load();
loaded = true;
animation.play();
playing = true;
}
else if($(window).width() > 767 && !playing){
animation.play();
playing = true;
}
else if($(window).width() <= 767 && loaded && playing){
animation.pause();
playing = false;
}
});
</script>
</body>
</html>