nutomic/joinpeertube
1
1
Fork 1
Code Issues 5 Pull requests Releases Wiki Activity

Rework homepage according to Angie's remarks

Browse source
This commit is contained in:
Chocobozzz 2019-10-23 09:42:57 +02:00
parent c7435f7fc1
commit f0262ee5fc
No known key found for this signature in database
GPG key ID: 583A612D890159BE
2 changed files with 237 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/scss/main.scss
View file

@ -135,20 +135,27 @@ main {
border-width: 2px; border-width: 2px;
} }
.section-title { .section-title,
font-size: 34px; .subtitle {
font-weight: $font-semibold;
margin: 100px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-family: 'Proza Libre', sans-serif;
.border-title { .border-title {
margin-left: 40px; margin-left: 40px;
height: 3px; height: 3px;
background-color: $orange; background-color: $orange;
flex-grow: 1; flex-grow: 1;
margin-top: 6px; }
}
.section-title {
font-size: 34px;
font-weight: $font-semibold;
margin: 100px 0;
font-family: 'Proza Libre', sans-serif;
.border-title {
margin-top: 4px;
} }
.brand-title { .brand-title {
@ -178,6 +185,30 @@ main {
@include one-column; @include one-column;
} }
.two-columns {
display: flex;
align-items: center;
margin-top: 50px;
& > img,
& > div {
flex-basis: 100%;
}
& > *:first-child {
margin-right: 30px;
}
img {
height: 231px;
width: 416px;
}
@media screen and (max-width: $responsive-screen) {
@include one-column;
}
}
.bottom-link-wrapper { .bottom-link-wrapper {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

366
src/views/Home.vue
View file

@ -54,7 +54,7 @@
<div class="border-title"></div> <div class="border-title"></div>
</div> </div>
<div class="ambition"> <div class="two-columns">
<img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/> <img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/>
<div> <div>
@ -70,25 +70,32 @@
</div> </div>
</div> </div>
<div class="federation one-column"> <div class="federation">
<div class="subtitle" v-translate>A federation of interconnected hosting services</div> <div class="subtitle" v-translate>
A federation of interconnected hosting services
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/> <div class="border-title"></div>
<div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate>
PeerTube is not meant to become a huge platform that would centralize videos from all around the world.
Rather, it is <strong>a network of inter-connected small videos hosters</strong>.
</div>
</div> </div>
<p v-translate> <div class="two-columns">
Anyone with a modicum of technical skills can host a PeerTube server, aka an instance. <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>
Each instance hosts its users and their videos.
In this way, <strong>every instance is created, moderated and maintained independently by various administrators.</strong> <div>
</p> <div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate>
PeerTube is not meant to become a huge platform that would centralize videos from all around the world.
Rather, it is <strong>a network of inter-connected small videos hosters</strong>.
</div>
</div>
<p v-translate>
Anyone with a modicum of technical skills can host a PeerTube server, aka an instance.
Each instance hosts its users and their videos.
In this way, <strong>every instance is created, moderated and maintained independently by various administrators.</strong>
</p>
</div>
</div>
<div class="bottom-link-wrapper"> <div class="bottom-link-wrapper">
<router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link"> <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
@ -97,28 +104,30 @@
</router-link> </router-link>
</div> </div>
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/> <div class="two-columns">
<div>
<p v-translate>
You can still watch from your account videos hosted by other instances though
if the administrator of your instance had previously connected it with other instances.
</p>
<p v-translate> <div class="citation">
You can still watch from your account videos hosted by other instances though <div class="left-bar"></div>
if the administrator of your instance had previously connected it with other instances.
</p>
<div class="citation"> <div class="text v-translate">This is just how a <strong>federation</strong> works!</div>
<div class="left-bar"></div> </div>
<div class="text v-translate">This is just how a <strong>federation</strong> works!</div> <p v-translate>
And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>,
provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected:
<strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed),
<strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong>
</p>
</div>
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
</div> </div>
<img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema"/>
<p v-translate>
And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>,
provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected:
<strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed),
<strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong>
</p>
<!-- TODO: find interesting resource regarding federation--> <!-- TODO: find interesting resource regarding federation-->
<!-- <div class="bottom-link-wrapper">--> <!-- <div class="bottom-link-wrapper">-->
<!-- <a href="#" class="bottom-link">--> <!-- <a href="#" class="bottom-link">-->
@ -128,35 +137,44 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
<div class="free-software one-column"> <div class="free-software">
<div class="subtitle" v-translate>An open-source, free/libre licence code</div> <div class="subtitle" v-translate>
An open-source, free/libre licence code
<img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema"/> <div class="border-title"></div>
<p v-translate>
Mainstream online video broadcasting services make money off of your data by analyzing your interactions
so that they can then bombard your with targeted advertising.
</p>
<div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate>
Peertube is not subject to any corporate monopoly, does not rely on ads and <strong>does not track you.</strong>
</div>
</div> </div>
<p v-translate> <div class="two-columns">
Most importantly, <strong>you are a person to PeerTube, not a product in need of profiling so as to be stuck in video loops.</strong> <img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema"/>
For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
</p>
<p v-translate> <div>
All of this is made possible by Peertube's free/libre license (GNU-AGPL). <p v-translate>
Its code is a digital "common", that belongs to everybody, instead of a secret formula that belongs to Google Mainstream online video broadcasting services make money off of your data by analyzing your interactions
(in the case of Youtube) or to Vivendi/Bolloré (Dailymotion). so that they can then bombard your with targeted advertising.
This free/libre license <strong>guarantees our fundamental freedoms as users and allows many contributors to offer evolutions and new features.</strong> </p>
</p>
<div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate>
Peertube is not subject to any corporate monopoly, does not rely on ads and <strong>does not track you.</strong>
</div>
</div>
<p v-translate>
Most importantly, <strong>you are a person to PeerTube, not a product in need of profiling so as to be stuck in video
loops.</strong>
For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
</p>
<p v-translate>
All of this is made possible by Peertube's free/libre license (GNU-AGPL).
Its code is a digital "common", that belongs to everybody, instead of a secret formula that belongs to Google
(in the case of Youtube) or to Vivendi/Bolloré (Dailymotion).
This free/libre license <strong>guarantees our fundamental freedoms as users and allows many contributors to offer evolutions
and new features.</strong>
</p>
</div>
</div>
<!-- TODO: find interesting resource regarding free softwares --> <!-- TODO: find interesting resource regarding free softwares -->
<!-- <div class="bottom-link-wrapper">--> <!-- <div class="bottom-link-wrapper">-->
@ -167,76 +185,93 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
<div id="you-are-a-video-maker" class="one-column"> <div id="you-are-a-video-maker">
<div class="subtitle" v-translate>Are you a video maker?</div> <div class="subtitle" v-translate>
Are you a video maker?
<div class="border-title"></div>
</div>
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"/> <div class="two-columns">
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"/>
<div class="citation"> <div>
<div class="left-bar"></div> <div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate> <div class="text" v-translate>
With PeerTube, chose <strong>your hosting company and the rules you believe in.</strong> With PeerTube, chose <strong>your hosting company and the rules you believe in.</strong>
</div>
</div>
<div v-translate>
YouTube has clearly gone astray: its hoster, Google-Alphabet, can enforce its ContentID system (the infamous "Robocopyright")
or its videos recommendation system, all of which appear to be as obscure as unfair.
</div>
<div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate>
Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company,
and <strong>you can nurture a special relationship with your hoster, who distributes your data.</strong>
</div>
</div>
<div v-translate>
With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user,
their moderation policy, who they chose to federate with... You are not speaking with a huge tech company, so you can
talk it out in case of any issue, need, desire...
</div>
</div> </div>
</div> </div>
<div v-translate>
YouTube has clearly gone astray: its hoster, Google-Alphabet, can enforce its ContentID system (the infamous "Robocopyright")
or its videos recommendation system, all of which appear to be as obscure as unfair.
</div>
<div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate>
Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company,
and <strong>you can nurture a special relationship with your hoster, who distributes your data.</strong>
</div>
</div>
<div v-translate>
With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user,
their moderation policy, who they chose to federate with... You are not speaking with a huge tech company, so you can
talk it out in case of any issue, need, desire...
</div>
<router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button discover-instances"> <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button discover-instances">
<translate>Browse/discover PeerTube instances</translate> <translate>Browse/discover PeerTube instances</translate>
</router-link> </router-link>
</div> </div>
<div class="p2p one-column"> <div class="p2p">
<div class="subtitle" v-translate>About peer-to-peer broadcasting and watching</div> <div class="subtitle" v-translate>
About peer-to-peer broadcasting and watching
<img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/> <div class="border-title"></div>
<div class="citation">
<div class="left-bar"></div>
<div class="text" v-translate>
The PeerTube software can, whenever necessary, use a peer-to-peer protocol (P2P) to broadcast viral videos,
<strong>lowering the load of their hosts.</strong>
</div>
</div> </div>
<p v-translate> <div class="two-columns">
In this way, when you watch a video, your computer contributes to its broadcast. <img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>
If a lot of people are watching the same video at the same time, their browser automatically send smalls pieces of the
video to the other viewers.
<strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized.
</p>
<p v-translate> <div>
It might not look like it, but thanks to peer-to-peer broadcasting, popular video makers and their videos are no longer <div class="citation">
forced to be hosted by big companies, whose infrastructure can stand thousands of views at the same time... or to pay for a <div class="left-bar"></div>
robust but extremely expensive independent video host.
</p> <div class="text" v-translate>
The PeerTube software can, whenever necessary, use a peer-to-peer protocol (P2P) to broadcast viral videos,
<strong>lowering the load of their hosts.</strong>
</div>
</div>
<p v-translate>
In this way, when you watch a video, your computer contributes to its broadcast.
If a lot of people are watching the same video at the same time, their browser automatically send smalls pieces of the
video to the other viewers.
<strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized.
</p>
<p v-translate>
It might not look like it, but thanks to peer-to-peer broadcasting, popular video makers and their videos are no longer
forced to be hosted by big companies, whose infrastructure can stand thousands of views at the same time... or to pay for a
robust but extremely expensive independent video host.
</p>
</div>
</div>
</div> </div>
<div id="you-play"> <div id="your-move">
<div class="one-column"> <div class="subtitle" v-translate>
<div class="subtitle" v-translate>Your move!</div> Your move!
<div class="border-title"></div>
</div>
<div class="one-column">
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="PeerTube you play illustration"/> <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="PeerTube you play illustration"/>
</div> </div>
@ -256,41 +291,53 @@
</div> </div>
</div> </div>
</section>
<div id="behind-peertube" class="one-column"> <section id="behind-peertube">
<div class="subtitle" v-translate>Who is behind PeerTube?</div> <div class="section-title">
<div v-translate>
Who is behind
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
?
</div>
<div class="border-title"></div>
</div>
<div class="two-columns">
<img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo"/> <img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo"/>
<p v-translate> <div>
Peertube is a <strong>free/libre software funded by a French non-profit organization</strong>: Framasoft <p v-translate>
</p> Peertube is a <strong>free/libre software funded by a French non-profit organization</strong>: Framasoft
</p>
<p v-translate> <p v-translate>
Our organization started in 2004, and now devotes itself <strong>to popular education about digital technology issues.</strong> Our organization started in 2004, and now devotes itself <strong>to popular education about digital technology issues.</strong>
We are a small structure of less than 40 members and under 10 employees, well-known for the De-google-ify Internet project, We are a small structure of less than 40 members and under 10 employees, well-known for the De-google-ify Internet project,
when we offered 34 ethical and alternative online tools. As a public interest organization, <strong>over 90% of our funding when we offered 34 ethical and alternative online tools. As a public interest organization, <strong>over 90% of our funding
comes from donations</strong> (tax deductible for French taxpayers). comes from donations</strong> (tax deductible for French taxpayers).
</p> </p>
<p v-translate> <p v-translate>
Thanks to our <a href="/hall-of-fame" target="_blank">crowdfunding (from March to July 2018)</a>, Thanks to our <a href="/hall-of-fame" target="_blank">crowdfunding (from March to July 2018)</a>,
<strong>Framasoft were able to employ PeerTube's main developer.</strong> <strong>Framasoft were able to employ PeerTube's main developer.</strong>
After a beta release in March 2018, release 1 came out in November 2018. After a beta release in March 2018, release 1 came out in November 2018.
Since then, several intermediary releases have brought many features along. Since then, several intermediary releases have brought many features along.
Several collectives have already created PeerTube hosts, laying the foundation for the federation. Several collectives have already created PeerTube hosts, laying the foundation for the federation.
</p> </p>
<p> <p>
<strong v-translate> <strong v-translate>
The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like YouTube. The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like YouTube.
</strong> </strong>
</p> </p>
</div>
<a href="https://framasoft.org/#soutenir" target="_blank" rel="noopener noreferrer" class="jpt-button">
<span v-translate>Donate to Framasoft</span>
</a>
</div> </div>
<a href="https://framasoft.org/#soutenir" target="_blank" rel="noopener noreferrer" class="jpt-button">
<span v-translate>Donate to Framasoft</span>
</a>
</section> </section>
</main> </main>
</template> </template>
@ -389,37 +436,21 @@
} }
} }
#what-is-peertube {
.ambition {
display: flex;
@media screen and (max-width: $responsive-screen) {
@include one-column;
}
& > img,
& > div {
flex-basis: 100%;
}
img {
margin-right: 30px;
height: 231px;
width: 416px;
}
}
}
#you-are-a-video-maker { #you-are-a-video-maker {
.discover-instances { .discover-instances {
min-width: 420px; min-width: 420px;
width: fit-content;
height: 50px; height: 50px;
margin: 50px 0; margin: 50px auto;
font-size: 20px; font-size: 20px;
} }
} }
#you-play { #your-move {
.one-column {
margin-top: 50px;
}
.buttons-row { .buttons-row {
margin-top: 60px; margin-top: 60px;
@ -431,13 +462,16 @@
#behind-peertube { #behind-peertube {
.framasoft-logo { .framasoft-logo {
margin: 100px 0; flex-basis: auto;
width: 264px;
height: 241px;
} }
.jpt-button { .jpt-button {
height: 50px; height: 50px;
min-width: 420px; min-width: 420px;
margin: 60px 0; width: fit-content;
margin: 60px auto;
font-size: 20px; font-size: 20px;
} }
} }