TeamNewPipe/website
1
0
Fork 0
mirror of https://github.com/TeamNewPipe/website synced 2025-10-06 00:22:38 +02:00
Code Issues Releases Wiki Activity

- add circles to first slide

Browse Source 
- remove old bxSlider license
use SVG circle instead of the big other clumbsy css version
This commit is contained in:
TobiGr
2018-02-25 23:07:57 +01:00
parent fa24f6c451
commit 5e58aa7038
5 changed files with 299 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
css/style.css
View File

@@ -411,16 +411,8 @@ img.border-white {
/* Features */
.fa-money {
vertical-align: 2px;
}
#features2 {
background: #d0cdcd;
background: linear-gradient(to right, #d0cdcd 0px, #d0cdcd calc(100% - 25% - 25px),#E2DEE0 calc(100% - 25% - 24px));
background: #f3eff2;
/*padding-top: 30px;
padding-bottom: 30px;*/
}
#features2 #features2-title {
font-size: 28px;
@@ -570,23 +562,6 @@ img.border-white {
line-height: 2em !important;
vertical-align: middle;
}
#features2 .progress {
width: calc(100% - 84px);
float: left;
margin-top: auto;
margin-bottom: auto;
display: inline;
}
#features2 .progress-bar {
transition: width 1s;
width: 0%;
}
#features2 .progress-bar.active {
width: 100%;
}
.progress-bar-newpipe {
background: #cd201f;
}
#features2 #lightweight .feature2-description {
width: 100% !important;
}
@@ -594,11 +569,6 @@ img.border-white {
display: block;
margin-bottom: 15px;
}
/*#features2 .row.is-flex > * {
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 30px;
}*/
#features2 .description {
color: #cd201f;
font-weight: 600;
@@ -631,6 +601,100 @@ img.border-white {
#features2 .feature2-description ul > li.heart:before {
content: "\f004";
}
#features2 .c100 {
margin-right: auto;
margin-left: auto;
float: none;
}
#features2 .c100 ~ p {
text-align: center;
font-size: 18px;
}
#features2 #lightweight .feature2-description {
margin-top: 45px;
}
#features2 #lightweight .feature2-description [class^="col"] {
margin-bottom: 45px;
}
/* Progress circles */
.single-chart {
max-width: 100px;
justify-content: space-around ;
position: relative;
transform: rotate(0deg);
animation-play-state: running;
margin: 15px auto;
}
.circular-chart {
display: block;
margin: 0 auto;
max-width: 100%;
}
.circle-bg {
fill: #E2DEE0;
stroke: #c5c5c5 ;
stroke-width: 2.5;
}
.circle {
fill: none;
stroke-width: 0;
}
.single-chart.in .circle {
stroke-width: 2.5;
animation: progress 1.5s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
@keyframes circle-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes circle-rotate-text {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.circular-chart.red .circle {
stroke: #cd201f;
}
.circle-text {
color: #cd201f;
position: absolute;
width: 100%;
text-align: center;
line-height: 1em;
font-size: 30px;
margin-top: calc(-50% - 0.5em);
/*transition: all 0.2s ease;*/
}
.single-chart.animated .circle-text {
animation: circle-rotate-text 1.5s ease;
}
.single-chart.animated {
animation: circle-rotate 1.5s ease;
}
.single-chart .fa-mobile-wrapper {
font-size: 40px;
}
/* TEXT-2 */
@@ -834,3 +898,4 @@ body.modal-open {
.site-content {
flex: 1 0 auto;
}

BIN
img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

148
index.html
View File

@@ -6,20 +6,20 @@
<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">
<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 }}/img/favicon.gif" type="image/gif" sizes="64x64">
<link rel="icon" href="{{ site.baseurl }}/img/favicon.ico" type="image/gif" sizes="64x64" />
<!-- JQuery -->
<script src="{{ site.baseurl }}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<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:// -->
@@ -29,10 +29,13 @@
<![endif]-->
<!-- FontAwesome -->
<link rel="stylesheet" href="{{ site.baseurl }}/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ site.baseurl }}/font-awesome/css/font-awesome.min.css" />
<!-- Circle CSS for progress circles -->
<link rel="stylesheet" href="{{ site.baseurl }}/css/circle.css" />
<!-- Custom stylesheets -->
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/style.css">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/style.css" />
</head>
<body id="main-page">
@@ -125,56 +128,93 @@
<div class="container container-double">
<div class="row is-flex">
<div class="col-md-9 feature2-detail" id="lightweight">
<h3 style="font-weight: bold">NewPipe - the smart and lightweight streaming solution</h3>
<h3 style="font-weight: bold">NewPipe - the smart streaming solution</h3>
<div class="feature2-media"></div>
<div class="feature2-description">
<div class="row is-flex">
<div class="col-md-6">
<div class="description">
<!--<h3>Fast, mobile / battery friendly, little mobile data usage,
privacy friendly, designed for offline usage</h3>-->
</div>
<div class="icon">
<i class="fa fa-3x fa-bolt red"></i>
</div>
<div class="progress">
<div class="progress-bar progress-bar-newpipe" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="row">
<div class="col-md-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>
<div class="col-md-6">
<div class="icon">
<i class="fa fa-3x fa-dashboard red"></i>
</div>
<div class="progress">
<div class="progress-bar progress-bar-newpipe" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-center">Fast</p>
</div> <!-- fast -->
<div class="col-md-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>
<div class="col-md-6">
<div class="icon">
<i class="fa fa-3x fa-user-secret red"></i>
</div>
<div class="progress">
<div class="progress-bar progress-bar-newpipe" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-center">Small</p>
</div> <!-- size -->
<div class="col-md-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>
<div class="col-md-6">
<div class="icon">
<i class="fa fa-3x fa-battery-three-quarters red"></i>
</div>
<div class="progress">
<div class="progress-bar progress-bar-newpipe" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-center">Battery Saving</p>
</div> <!-- battery -->
<div class="col-md-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>
<div class="col-md-6">
<div class="icon">
<i class="fa fa-3x fa-wifi red"></i>
</div>
<div class="progress">
<div class="progress-bar progress-bar-newpipe" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<p class="text-center">Less Data Consumption</p>
</div> <!-- data -->
</div>
</div>
<div class="feature2-close-detail">
<i class="fa fa-arrow-left"></i>
</div>
@@ -225,7 +265,7 @@
<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 and save RAM and battery</li>
<li class="text-success">Pro tip: close NewPipe to save RAM and battery</li>
<li>Save mobile data volume (we only download the audio)</li>
</ul>
</div>
@@ -338,7 +378,7 @@
<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">WebLate, Sentry and other companies offer their services to Open Source projects for free</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="feature2-close-detail">

129
js/features.js
View File

@@ -1,3 +1,9 @@
/**
* feature.js functoins and animations for the feature section in the main page
* @author Tobias Groza
* @licence MIT
*/
/**
* IDs of all feature slides
* @type {Array}
@@ -9,19 +15,7 @@ var currentFeature = -1;
var isFullscreen = false;
var isActive = false;
/*$('#features2').click(function(){
$('#features2 .progress-bar').addClass('active');
});
$(window).on("orientationchange load resize", function () {
if ($(window).width() > 544) {
$('#features2 *').attr('data-role', 'none');
}
});*/
/*$("body").page({
keepNative: "#features2 *"
});*/
$(window).on("orientationchange load resize", function () {
if ($(window).width() > 767) {
if (!isActive) {
@@ -42,12 +36,6 @@ $(window).on("orientationchange load resize", function () {
}
});
/*$(window).on("orientationchange load resize", function () {
if ($(window).width() > 767 && $(window).height() < 665 + 60) {
$('.feature2-media').css('width', 'calc(33% - 15px)');
$('.feature2-description').css('width', 'calc(66% - 15px)');
}
});*/
$('.feature2-close-detail').click(function () {
$("#features-sidebar .list-group .active").removeClass('active');
@@ -69,6 +57,9 @@ $('#features-sidebar .list-group a').click(function (event) {
$('.feature2-detail.active').removeClass('active');
$(hash).addClass('active');
currentFeature = features.indexOf(hash.substr(1));
if (currentFeature == 0) {
animateCircleProgress(true);
}
if ($("body").outerWidth() > 767) {
@@ -82,7 +73,7 @@ $('#features-sidebar .list-group a').click(function (event) {
/**
* Check if the hash changed and update the features if necessary
*/
$(window).on('hashchange load', function(e){
$(window).on('hashchange load', function(){
var hash = window.location.hash;
console.log(">"+hash);
if (hash != "" && hash != null && hash != "undefined"
@@ -92,6 +83,7 @@ $(window).on('hashchange load', function(e){
$('.feature2-detail.active').removeClass('active');
$(hash).addClass('active');
currentFeature = features.indexOf(hash.substr(1));
if (currentFeature == 0) animateCircleProgress(true);
} else if(hash == "" && $(window).width() < 767) { // enables hardware back button or back key on keyboard to close the detail view
$("#features-sidebar .list-group .active").removeClass('active');
$('.feature2-detail.active').removeClass('active');
@@ -101,4 +93,103 @@ $(window).on('hashchange load', function(e){
}
});
//////////////////////////
// //
// ANIMATIONS //
// //
//////////////////////////
/////////////////////
// Progress Animation
/////////////////////
/**
* Checks if an element is visible to the user
* @param x how much of the element must be on screen; value from 0 to 1
* @param y how much of the element must be on screen; value from 0 to 1
* @returns {boolean}
*/
$.fn.isOnScreen = function(x, y){
if(x == null || typeof x == 'undefined') x = 1;
if(y == null || typeof y == 'undefined') y = 1;
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var height = this.outerHeight();
var width = this.outerWidth();
if(!width || !height){
return false;
}
var bounds = this.offset();
bounds.right = bounds.left + width;
bounds.bottom = bounds.top + height;
var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
console.log(viewport.bottom + " " + bounds.bottom);
if (viewport.bottom > bounds.bottom) return true;
if(!visible){
return false;
}
var deltas = {
top : Math.min( 1, ( bounds.bottom - viewport.top ) / height),
bottom : Math.min(1, ( viewport.bottom - bounds.top ) / height),
left : Math.min(1, ( bounds.right - viewport.left ) / width),
right : Math.min(1, ( viewport.right - bounds.left ) / width)
};
return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y;
};
/**
* Shows and Animates the progress circle when it is completely visible to the viewer
* @param force - boolean forces the progress circles to show
*/
function animateCircleProgress (force) {
if (force == null || typeof force == 'undefined' || force == "") force = false;
$('#lightweight .feature2-description .single-chart').each(function () {
if(force || !$(this).hasClass('in') && $(this).isOnScreen()) {
$(this).addClass('in');
}
});
}
$(window).on("load, scroll", function () {
animateCircleProgress()
});
//////////////////
// Hover Animation
//////////////////
(function( $ ){
$.fn.animateCircle = function() {
if (!$(this).hasClass('animated')) {
$(this).addClass('animated');
var circle = $(this);
setTimeout(function () {
circle.removeClass('animated')
}, 1750);
}
};
})( jQuery );
$('.single-chart').hover(function () {
$(this).animateCircle();
});
/* TODO Write methods for toggling .active class, feature-fullscreen detection at resize, back-button behavior */

24
licenses/mit-bxSlider.md
View File

@@ -1,24 +0,0 @@
License
-------
The MIT License (MIT)
Copyright © 2014 [Steven Wanderski](https://twitter.com/stevenwanderski)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.