mirror of
https://github.com/TeamNewPipe/website
synced 2025-10-06 00:22:38 +02:00
change features
This commit is contained in:
TobiGr
2
Gemfile
2
Gemfile
@@ -9,7 +9,7 @@ ruby RUBY_VERSION
|
||||
#
|
||||
# This will help ensure the proper Jekyll version is running.
|
||||
# Happy Jekylling!
|
||||
gem "jekyll", "3.6.2"
|
||||
gem "jekyll", "3.7.2"
|
||||
|
||||
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
||||
gem "minima", "~> 2.0"
|
||||
|
||||
21
Gemfile.lock
21
Gemfile.lock
@@ -4,29 +4,40 @@ GEM
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.0.5)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
eventmachine (1.2.5)
|
||||
eventmachine (1.2.5-x64-mingw32)
|
||||
ffi (1.9.21)
|
||||
ffi (1.9.21-x64-mingw32)
|
||||
forwardable-extended (2.6.0)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (0.9.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (3.7.2)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 0.7)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 1.14)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (>= 1.7, < 3)
|
||||
rouge (>= 1.7, < 4)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-feed (0.9.3)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
jekyll-watch (2.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
jekyll-seo-tag (2.4.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-watch (2.0.0)
|
||||
listen (~> 3.0)
|
||||
kramdown (1.16.2)
|
||||
liquid (4.0.0)
|
||||
listen (3.1.5)
|
||||
@@ -44,7 +55,7 @@ GEM
|
||||
rb-fsevent (0.10.2)
|
||||
rb-inotify (0.9.10)
|
||||
ffi (>= 0.5.0, < 2)
|
||||
rouge (2.2.1)
|
||||
rouge (3.1.1)
|
||||
ruby_dep (1.5.0)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.5.5)
|
||||
@@ -63,7 +74,7 @@ PLATFORMS
|
||||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (= 3.6.2)
|
||||
jekyll (= 3.7.2)
|
||||
jekyll-feed (~> 0.6)
|
||||
jekyll-paginate
|
||||
minima (~> 2.0)
|
||||
|
||||
11
LICENSE.html
11
LICENSE.html
@@ -67,17 +67,6 @@ inside this repository as well as from the
|
||||
homepage</a>.</p>
|
||||
|
||||
|
||||
|
||||
<h3>bxSlider</h3>
|
||||
|
||||
<p>This project uses resources from the bxSlider project. Copyright 2014
|
||||
Steven Wanderski. Licensed under the terms of the MIT license.</p>
|
||||
|
||||
<p>You can fetch a copy from the "licenses" directory inside this repository as
|
||||
well as from bxSlider's
|
||||
<a href="https://github.com/stevenwanderski/bxslider-4/">GitHub repository</a>.</p>
|
||||
|
||||
|
||||
<h3>Background Image</h3>
|
||||
|
||||
<p>The background image has been published by Ken Lee under the terms of the
|
||||
|
||||
11
LICENSE.md
11
LICENSE.md
@@ -59,17 +59,6 @@ inside this repository as well as from the
|
||||
homepage](https://opensource.org/licenses/MIT).
|
||||
|
||||
|
||||
|
||||
### bxSlider
|
||||
|
||||
This project uses resources from the bxSlider project. Copyright 2014
|
||||
Steven Wanderski. Licensed under the terms of the MIT license.
|
||||
|
||||
You can fetch a copy from the "licenses" directory inside this repository as
|
||||
well as from bxSlider's
|
||||
[GitHub repository](https://github.com/stevenwanderski/bxslider-4/).
|
||||
|
||||
|
||||
### Background Image
|
||||
|
||||
The background image has been published by Ken Lee under the terms of the
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Repo for the [NewPipe website](https://newpipe.schabi.org/), which includes the blog and the press kit.
|
||||
|
||||
All sites are based on [Bootstrap](https://getbootstrap.com) 3.3.7 and [Jekyll](https://jekyllrb.com/) 3.6.2.
|
||||
All sites are based on [Bootstrap](https://getbootstrap.com) 3.3.7 and [Jekyll](https://jekyllrb.com/) 3.7.2.
|
||||
|
||||
|
||||
## Development
|
||||
|
||||
11
bxslider/jquery.bxslider.min.css
vendored
11
bxslider/jquery.bxslider.min.css
vendored
@@ -1,11 +0,0 @@
|
||||
.bx-wrapper{position:relative;margin-bottom:0px;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;/*-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;border:5px solid #fff;background:#fff*/}.bx-wrapper img{max-width:100%;display:block}.bxslider{margin:0;padding:0}ul.bxslider,.s.bxslider{list-style:none}.bx-viewport{-webkit-transform:translatez(0)}.bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{position:absolute;bottom:-30px;width:100%}.bx-wrapper .bx-loading{min-height:50px;background:url(../img/bx_loader.gif) center center no-repeat #fff;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}.bx-wrapper .bx-pager.bx-default-pager a{background:#666;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,.bx-wrapper .bx-pager.bx-default-pager a:hover{/*background:#000*/}.bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;vertical-align:bottom}.bx-wrapper .bx-pager-item{font-size:0;line-height:0}.bx-wrapper .bx-prev{left:10px;background:url(../img/bx_controls.png) 0 -32px no-repeat}.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 0}.bx-wrapper .bx-next{right:10px;background:url(../img/bx_controls.png) -43px -32px no-repeat}.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-43px 0}.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}.bx-wrapper .bx-controls-direction a.disabled{display:none}.bx-wrapper .bx-controls-auto{text-align:center}.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(../img/bx_controls.png) -86px -11px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,.bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(../img/bx_controls.png) -86px -44px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}
|
||||
/* replace default controls */
|
||||
.bx-wrapper a.bx-next,.bx-wrapper a.bx-next:hover,.bx-wrapper a.bx-next:focus{right:0px;padding:30px 15px 30px 30px;background:url(../img/control-next.png) 15px 15px no-repeat;height:0;width:0;margin-top:-30px;pointer-events:auto;}
|
||||
.bx-wrapper a.bx-prev,.bx-wrapper a.bx-prev:hover,.bx-wrapper a.bx-prev:focus{left:0px;padding:30px 15px 30px 30px;background:url(../img/control-prev.png) 15px 15px no-repeat;height:0;width:0;margin-top:-30px;pointer-events:auto;}
|
||||
.bx-wrapper .bx-pager.bx-default-pager a,.bx-wrapper .bx-pager.bx-default-pager a.active{background-color:transparent;text-indent:-9999px;display:block;width:15px;height:15px;margin:0 5px;outline:0;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px; background-image:url(../img/control-unselected.png);background-size:contain;}
|
||||
.bx-wrapper .bx-pager.bx-default-pager a.active{background-image:url(../img/control-selected.png);}
|
||||
.bx-wrapper .bx-pager.bx-default-pager{position: absolute; margin-top: -60px;bottom:auto;}
|
||||
.bxslider {display:flex;}
|
||||
.bx-controls-direction .container{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;}
|
||||
.bx-wrapper .bx-controls-direction a{z-index: 100;}
|
||||
@media(min-width: 767px){.bx-wrapper,.bx-viewport{height: auto !important;}.bx-wrapper{width:auto !important;border:0;}}
|
||||
7
bxslider/jquery.bxslider.min.js
vendored
7
bxslider/jquery.bxslider.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -112,12 +112,6 @@ main .row [class^="col"] {
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
@media (max-width: 992px){
|
||||
.phone-background .row [class^="col"] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#donate {
|
||||
padding: 30px 0;
|
||||
@@ -141,19 +135,21 @@ main .row [class^="col"] {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.features-background {
|
||||
#parallax-background {
|
||||
background: url('../img/bg_tiles.jpg') center center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -8;
|
||||
}
|
||||
.features-background img {
|
||||
width: 300px;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
.features-wrapper {
|
||||
#donate-wrapper {
|
||||
z-index: -4;
|
||||
position: relative;
|
||||
}
|
||||
#donate-wrapper .row > div > * {
|
||||
height: auto;
|
||||
}
|
||||
.phone-background {
|
||||
height: 0;
|
||||
position: absolute;
|
||||
@@ -174,6 +170,12 @@ main .row [class^="col"] {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px){
|
||||
.phone-background .row [class^="col"] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.phone-background img {
|
||||
margin-top: 45px;
|
||||
|
||||
354
css/style.css
354
css/style.css
@@ -6,6 +6,12 @@ body.modal-open {
|
||||
padding: 0!important;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
body.feature-fullscreen {
|
||||
margin-left: -100%;
|
||||
margin-right: 100%;
|
||||
}
|
||||
}
|
||||
.container .container {
|
||||
width: auto;
|
||||
}
|
||||
@@ -74,6 +80,8 @@ body.modal-open {
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
.row.is-flex > [class*='col-'] {
|
||||
display: -webkit-box;
|
||||
@@ -85,6 +93,9 @@ body.modal-open {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
flex: 1 auto;
|
||||
}
|
||||
.red, .red:hover {
|
||||
color: #cd201f;
|
||||
@@ -92,7 +103,7 @@ body.modal-open {
|
||||
.f-droid {
|
||||
width: 160px;
|
||||
}
|
||||
a:hover {
|
||||
a:hover, a:focus, a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
img.border-white {
|
||||
@@ -107,7 +118,6 @@ img.border-white {
|
||||
}
|
||||
.header-background {
|
||||
background: url('../img/background_header.png') center center;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
@@ -172,7 +182,7 @@ img.border-white {
|
||||
width: calc(328 / 553 * 350px);
|
||||
background: transparent;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
@media (max-width: 767px) {
|
||||
.header-box-wrapper .pull-left {
|
||||
float: none !important;
|
||||
}
|
||||
@@ -191,7 +201,10 @@ img.border-white {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
@media (min-width: 768px) {
|
||||
.header-background {
|
||||
background-size: cover;
|
||||
}
|
||||
.header-text {
|
||||
margin-bottom: 100px;
|
||||
width: auto;
|
||||
@@ -369,7 +382,7 @@ img.border-white {
|
||||
.text-1 {
|
||||
background: #f3eff2;
|
||||
padding-top: 70px;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.text-1 p {
|
||||
margin-bottom: 15px;
|
||||
@@ -377,6 +390,9 @@ img.border-white {
|
||||
.text-1 a {
|
||||
color: #cd201f;
|
||||
}
|
||||
.text-1 .separator {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.text-1-wrapper {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
@@ -394,153 +410,221 @@ img.border-white {
|
||||
|
||||
/* Features */
|
||||
|
||||
.features-background {
|
||||
background: url('../img/bg_tiles.jpg') center center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
}
|
||||
.features-wrapper .heading-wrapper {
|
||||
background: #f3eff2;
|
||||
text-align: center;
|
||||
}
|
||||
.features-wrapper .heading-wrapper h3 {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
color: #cd201f;
|
||||
}
|
||||
.features-wrapper .features {
|
||||
background: rgba(115, 115, 115, 0.88);
|
||||
color: white;
|
||||
}
|
||||
.features-wrapper .features .description {
|
||||
margin: 10px 0 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.features-wrapper .features .icon {
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left:0;
|
||||
margin-right: 20px;
|
||||
padding: 0;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: 2px 2px 6px 4px rgba(0,0,0,0.6);
|
||||
-moz-box-shadow: 2px 2px 6px 4px rgba(0,0,0,0.6);
|
||||
box-shadow: 2px 2px 6px 4px rgba(0,0,0,0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
.features-wrapper .features .icon .fa-2x, .features-wrapper .features .icon .glyphicon {
|
||||
font-size: 31px;
|
||||
}
|
||||
.features-wrapper .features .icon .text-center {
|
||||
font-family: Arial;
|
||||
vertical-align: -5px;
|
||||
}
|
||||
.features-wrapper .features .icon p, .features-wrapper .features .icon span {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.features-wrapper .features .icon .cross-out:nth-child(odd) {
|
||||
width: calc(91px); /* sqrt of (64px pow 4), Pythagoras' theorem */
|
||||
transform: rotate(315deg);
|
||||
transform-origin: 0% 0%;
|
||||
height: 4px;
|
||||
background: #cd201f;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
}
|
||||
.features-wrapper .features .icon i, .features-wrapper .features .icon img, .features-wrapper .features .icon .glyphicon {
|
||||
color: #cd201f;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: inline;
|
||||
}
|
||||
.features-wrapper .features .icon img.fa {
|
||||
height: 1.75em;
|
||||
}
|
||||
.features-wrapper .features .icon .fa-icon-light {
|
||||
-webkit-text-stroke: 2px white;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.features-wrapper .features .icon .fa-lock {
|
||||
-webkit-text-stroke: 1.5px white;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.fa-money {
|
||||
vertical-align: 2px;
|
||||
}
|
||||
/* .fa-eye icon has more padding on the top as on the bottom of it and is smaller than the other icons */
|
||||
.features-wrapper .features .icon .fa-eye-wrapper {
|
||||
margin-top: -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;*/
|
||||
}
|
||||
.features-wrapper .features .icon .fa-eye {
|
||||
font-size: 2.5em;
|
||||
#features2 #features2-title {
|
||||
font-size: 28px;
|
||||
color: #cd201f;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.features-wrapper .features .text {
|
||||
@media (min-width: 767px) {
|
||||
#features2 #features2-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
#features2 #features-sidebar {
|
||||
background: #E2DEE0;
|
||||
display: block;
|
||||
/* padding 0 to draw the separators, that is why .list-group-item has a double padding of 30px on each side */
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#features2 #features-sidebar .list-group {
|
||||
width: 100%;
|
||||
padding-top: 23px;
|
||||
background: #E2DEE0;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#features2 #features-sidebar .list-group .list-group-item {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #cd201f;
|
||||
padding: 17px 30px;
|
||||
}
|
||||
#features2 #features-sidebar .list-group > .active > .list-group-item {
|
||||
border-top: 1px solid white;
|
||||
border-bottom: 1px solid white;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
#features2 #features-sidebar .list-group .list-group-item span.icon {
|
||||
width: 25px;
|
||||
margin-right: 10px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
#features2 #features-sidebar .list-group .list-group-item span.icon .fa.fa-4k {
|
||||
font-size: 21px;
|
||||
line-height: 21px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#features2 .feature2-detail {
|
||||
background: #d0cdcd;
|
||||
display: none;
|
||||
float: left;
|
||||
width: calc(100% - 64px - 20px);
|
||||
padding-top: 20px;
|
||||
padding-left: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.features-wrapper .features .text p {
|
||||
/* pull text to top of the parent div: 1.5 as factor needed because font-size: 150% (see .features-wrapper .features .text strong) */
|
||||
margin-top: calc(-4px * 1.5);
|
||||
#features2 .feature2-detail.active {
|
||||
display: block;
|
||||
}
|
||||
.features-wrapper .features .text strong {
|
||||
font-size: 150%;
|
||||
}
|
||||
.features-wrapper .features .list-box {
|
||||
max-width: 750px;
|
||||
}
|
||||
.features-wrapper .features [class^="col"] {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.features-wrapper .row > div > * {
|
||||
height: auto;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
.features-background {
|
||||
height: 100vh;
|
||||
background: none;
|
||||
@media (max-width: 767px) {
|
||||
#features2 .feature2-detail.active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
max-width: 100%;
|
||||
min-height: 100%;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.features-wrapper {
|
||||
background: url("../img/bg_tiles.jpg");
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.features-wrapper .features .description {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.features-wrapper .features .description {
|
||||
margin: 20px 0 30px 0;
|
||||
#features2 .feature2-detail.active .back {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/* Extra small size since Bootstrap 4
|
||||
We use Bootstrap 3 but this size was added to Bootstrap 4 for a good reason. It adresses phones with portait mode. */
|
||||
@media (max-width: 543px) {
|
||||
.features-wrapper .features .icon {
|
||||
#features2 .feature2-detail h3 {
|
||||
color: #cd201f;
|
||||
text-align: center;
|
||||
text-indent: 20px;
|
||||
margin-bottom: 30px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
@media (min-width: 767px) {
|
||||
#features2 .feature2-detail h3 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
#features2 .feature2-detail .feature2-media {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (min-width: 767px) {
|
||||
#features2 .feature2-detail .feature2-media {
|
||||
width: calc(50% - 15px);
|
||||
margin-right: 15px;
|
||||
}
|
||||
.features-wrapper .features .text {
|
||||
float: left;
|
||||
width: calc(100% - 64px - 15px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.features-wrapper .features .text > p {
|
||||
line-height: 64px;
|
||||
margin: 0;
|
||||
}
|
||||
#features2 .feature2-detail .feature2-description {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media only screen and (min-width: 767px) and (max-height: 725px) {
|
||||
#features2 .feature2-detail .feature2-media {
|
||||
width: calc(33% - 15px);
|
||||
}
|
||||
.features-wrapper .features .text > p.description-text {
|
||||
line-height: 1.42857143;
|
||||
padding-top: 25px;
|
||||
display: none;
|
||||
text-align: left;
|
||||
#features2 .feature2-detail .feature2-description {
|
||||
width: calc(66% - 15px);
|
||||
}
|
||||
}
|
||||
#features2 .feature2-close-detail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 15px;
|
||||
font-size: 20px;
|
||||
color: #cd201f;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#features2 .feature2-detail.active .feature2-close-detail {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#features2 .icon {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
width: 54px;
|
||||
}
|
||||
#features2 .icon h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
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;
|
||||
}
|
||||
#features2 #lightweight .row.is-flex > [class*="col-"] {
|
||||
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;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#features2 .feature2-description a {
|
||||
color: #cd201f;
|
||||
}
|
||||
#features2 .feature2-description .text-success {
|
||||
color: #29a400;
|
||||
}
|
||||
#features2 .feature2-description ul {
|
||||
list-style: none;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#features2 .feature2-description ul > li {
|
||||
padding-left: 15px;
|
||||
line-height: 2;
|
||||
text-indent: -25px;
|
||||
}
|
||||
#features2 .feature2-description ul > li:before {
|
||||
content: "\f00c"; /* FontAwesome Unicode for check icon */
|
||||
font-family: FontAwesome;
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
padding-left: 25px;
|
||||
height: 100%;
|
||||
}
|
||||
#features2 .feature2-description ul > li.heart:before {
|
||||
content: "\f004";
|
||||
}
|
||||
|
||||
|
||||
/* TEXT-2 */
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
</div> <!-- Quotes -->
|
||||
|
||||
<!-- parallax background for header -->
|
||||
<div class="features-background"></div>
|
||||
<div id="parallax-background"></div>
|
||||
<div class="phone-background">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@@ -119,7 +119,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-wrapper">
|
||||
<div id="donate-wrapper">
|
||||
<div id="donate">
|
||||
<div class="container container-double">
|
||||
<div class="row">
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
BIN
img/phone_donate.png
Normal file
BIN
img/phone_donate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
639
index.html
639
index.html
@@ -17,7 +17,6 @@
|
||||
|
||||
<!-- JQuery -->
|
||||
<script src="{{ site.baseurl }}/js/jquery.min.js"></script>
|
||||
<!-- TODO: add local JQuery if JQuery is not defined -->
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -32,13 +31,8 @@
|
||||
<!-- FontAwesome -->
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/font-awesome/css/font-awesome.min.css">
|
||||
|
||||
<!-- bxSlider -->
|
||||
<link href="{{ site.baseurl }}/bxslider/jquery.bxslider.min.css" rel="stylesheet" />
|
||||
<script src="{{ site.baseurl }}/bxslider/jquery.bxslider.min.js"></script>
|
||||
|
||||
|
||||
<!-- Custom stylesheets -->
|
||||
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/style.css">
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/css/gallery.css">
|
||||
|
||||
</head>
|
||||
<body id="main-page">
|
||||
@@ -115,327 +109,322 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- separator -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<hr class="visible-xs separator" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- first text box -->
|
||||
|
||||
<!-- parallax background for features -->
|
||||
<div class="features-background"></div>
|
||||
|
||||
<!-- features wrapper -->
|
||||
<div class="features-wrapper">
|
||||
|
||||
<!-- features heading -->
|
||||
<div class="heading-wrapper">
|
||||
<div class="container">
|
||||
<h3>Main Features</h3>
|
||||
<div id="features2">
|
||||
<div class="container container-double">
|
||||
<h3 id="features2-title">Main Features</h3>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="downloads" >
|
||||
<h3>Downloads</h3>
|
||||
<div class="feature2-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="feature2-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="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="privacy" >
|
||||
<h3>Extended Privacy</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/screenshots/shot_01.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-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="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="background" >
|
||||
<h3>Background Player</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/screenshots/shot_06.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-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 and save RAM and battery</li>
|
||||
<li>Save mobile data volume (we only download the audio)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="popup" >
|
||||
<h3>Popup Player</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/screenshots/shot_05.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-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="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="subscriptions" >
|
||||
<h3>Subscriptions</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/screenshots/shot_09.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-description">
|
||||
<p><strong>Never miss updates again:</strong></p>
|
||||
<ul>
|
||||
<li>Subscribe a channel with one click</li>
|
||||
<li>Watch your custom feed</li>
|
||||
<li>Easily synchronize your local subscriptions with other devices</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="bookmarks">
|
||||
<h3>Bookmarks and Local Playlists</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/screenshots/shot_01.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-description">
|
||||
<p><strong>Endless music</strong></p>
|
||||
<ul>
|
||||
<li>Create your own playlists</li>
|
||||
<li>Mark your favourite videos</li>
|
||||
<li class="text-success">Pro tip: synchronize your data with other devices for the best user experience</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="history" >
|
||||
<h3>History</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/screenshots/shot_10.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-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="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="code" >
|
||||
<h3>NewPipe is Open Source</h3>
|
||||
<div class="feature2-media">
|
||||
<a href="https://github.com/TeamNewPipe/NewPipe">
|
||||
<img src="/img/newpipe_on_github.png" class="img-responsive" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature2-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 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 3.0 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="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="price" >
|
||||
<h3>Support NewPipe</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/phone_donate.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature2-close-detail">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9 feature2-detail" id="4k" >
|
||||
<h3>Background Player</h3>
|
||||
<div class="feature2-media">
|
||||
<img src="/img/screenshots/shot_01.png" class="img-responsive" />
|
||||
</div>
|
||||
<div class="feature2-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="feature2-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-4k">4K</i></span> High Quality
|
||||
</div>
|
||||
</a>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- features box -->
|
||||
<div class="features">
|
||||
|
||||
<!-- gallery -->
|
||||
<div class="gallery">
|
||||
|
||||
<div class="bxslider">
|
||||
|
||||
<div class="gallery-element-wrapper gallery-desktop-item">
|
||||
<div class="gallery-element gallery-parallax-background" id="features-tiles">
|
||||
<div class="container list-box">
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<p class="description">Top reasons users love NewPipe:<span class="visible-xxs"><br>Click them to get more info!</span></p>
|
||||
|
||||
<div class="row">
|
||||
<!--<a class="change-slide" onclick="gallery_slide(1,false)" ondblclick="gallery_slide(1,true)">-->
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#ytb-videos-des')">
|
||||
<div class="icon">
|
||||
<p><i class="fa fa-play fa-2x" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>YouTube Videos</strong></p>
|
||||
<p class="description-text" id="ytb-videos-des">Simple way to watch videos <br class="hidden-xxs">from the site and use its features.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--</a>-->
|
||||
<a class="change-slide" onclick="gallery_slide(1,false)" ondblclick="gallery_slide(1,true)">
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#ext-privacy-des')">
|
||||
<div class="icon">
|
||||
<p><i class="fa fa-lock fa-3x" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>Extended Privacy</strong></p>
|
||||
<p class="description-text" id="ext-privacy-des">Does not use the YouTube API <br class="hidden-xxs">nor the Google Play Services.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<a class="change-slide" onclick="gallery_slide(2,false)" ondblclick="gallery_slide(2,true)">
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#bg-player-des')">
|
||||
<div class="icon">
|
||||
<p><i class="fa fa-volume-up fa-2x" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>Background Player</strong></p>
|
||||
<p class="description-text" id="bg-player-des">Use other apps with no hassle <br class="hidden-xxs">while it plays your favourite songs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="change-slide" onclick="gallery_slide(3,false)" ondblclick="gallery_slide(3,true)">
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#download-des')">
|
||||
<div class="icon">
|
||||
<p><i class="fa fa-download fa-2x" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>Download Media</strong></p>
|
||||
<p class="description-text" id="download-des">Simply download YouTube <br class="hidden-xxs">videos or audio to your device.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<a class="change-slide" onclick="gallery_slide(4,false)" ondblclick="gallery_slide(4,true)">
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#subscribtions-des')">
|
||||
<div class="icon">
|
||||
<p><i class="fa fa-rss fa-2x" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>Subscriptions</strong></p>
|
||||
<p class="description-text" id="subscriptions-des">Never miss new content <br class="hidden-xxs">from your favourite channels.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!--<a class="change-slide" onclick="gallery_slide(1,false)" ondblclick="gallery_slide(1,true)">-->
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#history-des')">
|
||||
<div class="icon">
|
||||
<p><i class="fa fa-history fa-2x" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>History</strong></p>
|
||||
<p class="description-text" id="history-des">Go back in time and <br class="hidden-xxs">enjoy your favourites again.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--</a>-->
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<a class="change-slide" onclick="gallery_slide(8,false)" ondblclick="gallery_slide(5,true)">
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#open-src-des')">
|
||||
<div class="icon">
|
||||
<p class="fa-eye-wrapper"><i class="fa fa-eye fa-2x" aria-hidden="true" style="font-size: 2.5em"></i></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>Open Source</strong></p>
|
||||
<p class="description-text" id="open-src-des">How it works is not a secret.<br class="hidden-xxs">Go and check it on GitHub.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="change-slide" onclick="gallery_slide(8,false)" ondblclick="gallery_slide(5,true)">
|
||||
<div class="col-sm-6 col-xs-12" onclick="collapseDescription('#free-des')">
|
||||
<div class="icon">
|
||||
<p>
|
||||
<div class="cross-out"></div>
|
||||
<i class="glyphicon glyphicon-usd fa-2x" aria-hidden="true"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p><strong>Free</strong></p>
|
||||
<p class="description-text" id="free-des">You get the whole thing for free. <br class="hidden-xxs">No in-app purchases or ads either.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div> <!-- container fluid -->
|
||||
|
||||
</div> <!-- container list-box -->
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image">
|
||||
<img src="{{ site.baseurl }}/img/Privacy_written_in_tiles.jpg"/>
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>Extended Privacy</h3>
|
||||
<p class="subtitle">NewPipe does not use the YouTube API nor the Google Play Services.</p>
|
||||
<br>
|
||||
<p class="text-justify">This means that we do not share any data (except the video URL) with YouTube or Google. Also, the app does not save any data from you or use services that analyse your usage behaviour.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image">
|
||||
<img src="{{ site.baseurl }}/img/screenshot_4.png"/>
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>Background Player</h3>
|
||||
<p class="subtitle">Use other apps with no hassle while NewPipe plays your favourite songs.</p>
|
||||
<br>
|
||||
<p class="text-justify">We have added a background player to NewPipe. You can do whatever you want — your music keeps playing.</p>
|
||||
<p class="text-justify">And even better for you: we only download the audio, so you don't waste data volume.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image image-slideshow">
|
||||
<img src="{{ site.baseurl }}/img/screenshot_7.png" class="active" />
|
||||
<img src="{{ site.baseurl }}/img/screenshot_8.png"/>
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>Download Media</h3>
|
||||
<p class="subtitle">Simply download YouTube videos or audio to your device</p>
|
||||
<br>
|
||||
<p class="text-justify">With NewPipe you can not only watch YouTube videos, but also download them. The app offers different file formats and resolutions for the audio and videos.</p>
|
||||
<p class="text-justify">The download centre provides you a good overview of your downloads and their progress.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image image-slideshow">
|
||||
<img src="{{ site.baseurl }}/img/screenshot_6.png" class="active" />
|
||||
<img src="{{ site.baseurl }}/img/screenshot_12.png"/>
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>Subscriptions</h3>
|
||||
<p class="subtitle">Never miss videos from your favourite channels again.</p>
|
||||
<br>
|
||||
<p class="text-justify">You can now follow channels with just one click. Keep up to date with your favourite channels. With just a few clicks we'll assemble all the news for you.</p>
|
||||
<p class="text-justify">We save your subscriptions locally. That means you can use this feature - just like the whole app - without a Google Account.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image">
|
||||
<img src="{{ site.baseurl }}/img/screenshot_5.png"/>
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>Video Pop-Up</h3>
|
||||
<p class="subtitle">See your videos everywhere</p>
|
||||
<br>
|
||||
<p class="text-justify">Want to check your emails while watching a video? No problem!</p>
|
||||
<p class="text-justify">With the pop-up mode you can do whatever you want and keep watching videos. The pop-up is movable and resizable — it won't be in your way. We promise.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image">
|
||||
<img src="{{ site.baseurl }}/img/screenshot_2.png"/>
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>4K Support</h3>
|
||||
<p class="subtitle">Enjoy your videos in brilliant quality</p>
|
||||
<br>
|
||||
<p class="text-justify">You have one of these super high-resolution phones? Good for you! With NewPipe you can enjoy videos with up to 4K and 60fps and get the best out of your hardware.</p>
|
||||
<p class="text-justify">You just have a normal phone? No problem! NewPipe offers you tons of resolutions and codecs. Choose the one that fits to your device and save data volume.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image image-slideshow">
|
||||
<img src="{{ site.baseurl }}/img/screenshot_2.png" class="active" />
|
||||
<img src="{{ site.baseurl }}/img/screenshot_3.png" />
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>Multiple Themes</h3>
|
||||
<p class="subtitle">Customize NewPipe</p>
|
||||
<br>
|
||||
<p class="text-justify">Watch videos with NewPipe whenever you want: at day or at night.</p>
|
||||
<p class="text-justify">To increase your comfort at night, NewPipe has a dark mode. Go to settings and easily turn the dark mode on. It's fancy and good for your eyes. You want it still darker? Then you must try our black theme!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
<div class="gallery-element-wrapper">
|
||||
<div class="gallery-element details-wrapper">
|
||||
<div class="feature-details container">
|
||||
<div class="container">
|
||||
<div class="details-flex">
|
||||
<div class="details-image">
|
||||
<a href="https://github.com/TeamNewPipe/NewPipe/" target="_blank">
|
||||
<img src="{{ site.baseurl }}/img/GitHub.png" class="banner" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="details-text container">
|
||||
<h3>Open Source</h3>
|
||||
<p class="subtitle">How it works is not a secret</p>
|
||||
<br>
|
||||
<p class="text-justify">NewPipe does not use the YouTube API nor the Google Play Services. This is one reason why the app is free of proprietary software.</p>
|
||||
<p class="text-justify">You don't believe us? NewPipe's full source code is available on GitHub. Go and check it out. The app is developed by a small but growing community. If you have found an issue (we don't hope so) or want to help us develop new features, get in touch with us.</p>
|
||||
<p>Our awesome community and your donations keep NewPipe free.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- gallery-element-wrapper -->
|
||||
|
||||
</div> <!-- bxSlider -->
|
||||
|
||||
</div> <!-- gallery -->
|
||||
|
||||
</div> <!-- features -->
|
||||
|
||||
</div> <!-- features-wrapper -->
|
||||
</div>
|
||||
|
||||
<!-- second text box -->
|
||||
<div class="text-2">
|
||||
@@ -501,8 +490,8 @@
|
||||
<!-- Script for parallax animations -->
|
||||
<script src="{{ site.baseurl }}/js/parallax.js"></script>
|
||||
|
||||
<!-- Script for gallery animations -->
|
||||
<script src="{{ site.baseurl }}/js/gallery.js"></script>
|
||||
<!-- Script for feature animations -->
|
||||
<script src="{{ site.baseurl }}/js/features.js"></script>
|
||||
|
||||
<!-- Load and play animation on medium and large screens -->
|
||||
<script>
|
||||
|
||||
104
js/features.js
Normal file
104
js/features.js
Normal file
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* IDs of all feature slides
|
||||
* @type {Array}
|
||||
*/
|
||||
var features = [
|
||||
"lightweight", "downloads", "privacy", "background", "popup",
|
||||
"subscriptions", "bookmarks", "history", "code", "price"];
|
||||
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) {
|
||||
if (currentFeature == -1) currentFeature = 0;
|
||||
$('#' + features[currentFeature]).addClass('active');
|
||||
isActive = true;
|
||||
}
|
||||
if (isFullscreen) {
|
||||
|
||||
}
|
||||
} else {
|
||||
if (isActive) {
|
||||
if (currentFeature == -1) currentFeature = 0;
|
||||
$('#' + features[currentFeature]).removeClass('active');
|
||||
$('body').removeClass('feature-fullscreen');
|
||||
isActive = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*$(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');
|
||||
$(this).parent().removeClass('active');
|
||||
$('body').removeClass('feature-fullscreen');
|
||||
$(document).trigger('bodyClassChanged');
|
||||
history.pushState(null, null, "#"); // make sure to work with currentFeature
|
||||
});
|
||||
|
||||
/**
|
||||
* Onclick-listener for the features
|
||||
* Changes the slides
|
||||
*/
|
||||
$('#features-sidebar .list-group a').click(function (event) {
|
||||
event.preventDefault();
|
||||
var hash = $(this).attr('href');
|
||||
$('.list-group > .active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('.feature2-detail.active').removeClass('active');
|
||||
$(hash).addClass('active');
|
||||
currentFeature = features.indexOf(hash.substr(1));
|
||||
if ($("body").outerWidth() > 767) {
|
||||
|
||||
|
||||
} else {
|
||||
$("body").addClass("feature-fullscreen");
|
||||
isFullscreen = true;
|
||||
}
|
||||
history.pushState(null, null, hash);
|
||||
});
|
||||
|
||||
/**
|
||||
* Check if the hash changed and update the features if necessary
|
||||
*/
|
||||
$(window).on('hashchange load', function(e){
|
||||
var hash = window.location.hash;
|
||||
console.log(">"+hash);
|
||||
if (hash != "" && hash != null && hash != "undefined"
|
||||
&& features.includes(hash.substr(1))
|
||||
&& !$(hash).hasClass('active')) {
|
||||
if ($(window).width() <= 767) $('body').addClass('feature-fullscreen');
|
||||
$('.feature2-detail.active').removeClass('active');
|
||||
$(hash).addClass('active');
|
||||
currentFeature = features.indexOf(hash.substr(1));
|
||||
} 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');
|
||||
$('body').removeClass('feature-fullscreen');
|
||||
$(document).trigger('bodyClassChanged');
|
||||
currentFeature = -1;
|
||||
}
|
||||
});
|
||||
|
||||
/* TODO Write methods for toggling .active class, feature-fullscreen detection at resize, back-button behavior */
|
||||
@@ -1,4 +1,4 @@
|
||||
var headerHeight, featuresHeight, featuresPosition;
|
||||
var headerHeight;
|
||||
|
||||
function parallax_reset() {
|
||||
headerHeight = $('.header-wrapper').outerHeight(true);
|
||||
@@ -9,15 +9,11 @@ function parallax_reset() {
|
||||
else {
|
||||
if (headerHeight < $(window).height()) $('.header-background').css('height', '100vh');
|
||||
}
|
||||
featuresHeight = $('.features-wrapper').outerHeight(true);
|
||||
featuresPosition = $('.features-wrapper').position().top;
|
||||
$('.features-background').css('height', featuresHeight + 'px');
|
||||
}
|
||||
|
||||
function parallax() {
|
||||
var scrolled = $(window).scrollTop();
|
||||
$('.header-background').css('height', (headerHeight + 20 - scrolled) + 'px');
|
||||
$('.features-background').css('height', (featuresHeight - scrolled + featuresPosition) + 'px');
|
||||
}
|
||||
|
||||
$(window).scroll(function(e) {
|
||||
@@ -27,7 +23,7 @@ $(window).scroll(function(e) {
|
||||
});
|
||||
|
||||
$(window).resize(function(e) {
|
||||
/* timeout because gallery_resize needs some time to execute - only nacessary until parallax is pure CSS without JS */
|
||||
/* timeout because gallery_resize needs some time to execute - only necessary until parallax is pure CSS without JS */
|
||||
window.setTimeout(function(){
|
||||
parallax_reset();
|
||||
parallax();
|
||||
@@ -35,4 +31,8 @@ $(window).resize(function(e) {
|
||||
});
|
||||
|
||||
parallax_reset();
|
||||
if ($(window).width() > 767) parallax();
|
||||
if ($(window).width() > 767) parallax();
|
||||
|
||||
$(document).on('bodyClassChanged', function() {
|
||||
parallax_reset();
|
||||
})
|
||||
|
||||
@@ -11,9 +11,9 @@ function parallax_reset() {
|
||||
windowHeight = $(window).height();
|
||||
bitcoinHeight = $('#bitcoin-donation').outerHeight(true);
|
||||
|
||||
featuresHeight = $('.features-wrapper').outerHeight(true);
|
||||
featuresPosition = $('.features-wrapper').position().top;
|
||||
$('.features-background').css('height', featuresHeight + 'px');
|
||||
featuresHeight = $('#donate-wrapper').outerHeight(true);
|
||||
featuresPosition = $('#donate-wrapper').position().top;
|
||||
$('#parallax-background').css('height', featuresHeight + 'px');
|
||||
|
||||
if (collapsed != null) {
|
||||
$('#bitcoin-donation').toggle();
|
||||
@@ -24,9 +24,9 @@ function parallax() {
|
||||
var scrolled = $(window).scrollTop();
|
||||
//console.log(featuresHeight + " " + featuresPosition + " " + bitcoinHeight + " " + windowHeight + " " + scrolled + " " + (featuresHeight - scrolled + featuresPosition));
|
||||
if ($(document).height() <= $(window).height())
|
||||
$('.features-background').css('height', (featuresHeight + featuresPosition + bitcoinHeight - scrolled) + 'px');
|
||||
$('#parallax-background').css('height', (featuresHeight + featuresPosition + bitcoinHeight - scrolled) + 'px');
|
||||
else
|
||||
$('.features-background').css('height', (featuresHeight + featuresPosition + bitcoinHeight + windowHeight - scrolled) + 'px');
|
||||
$('#parallax-background').css('height', (featuresHeight + featuresPosition + bitcoinHeight + windowHeight - scrolled) + 'px');
|
||||
//$('.phone-background').css('top', featuresPosition + bitcoinHeight + featuresHeight/2 - scrolled*0.9 + 'px');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user