fedi/multimedia.html

255 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html>
<head profile="https://fedi.life">
<link rel="icon"
type="image/png"
href="favicon.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор! — Медиа-платформы</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/picnic.min.css">
<style>aside a.top {
font-size: 0;
position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head>
<body>
<nav class="fedi">
<a href="https://fedi.life" class="brand">
<img class="logo" src="images/logo.webp" />
<span>Fedi.Life</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">меню</label>
<div class="menu">
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="social.html" class="pseudo button">Соцсети</a>
<a href="multimedia.html" class="pseudo button">Мультимедиа</a>
<a href="mail.html" class="pseudo button">Почта</a>
<a href="search.html" class="pseudo button">Поиск</a>
<a href="extra.html" class="pseudo button">Допматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<main id="home" class="documentation">
<section class="flex">
<article class="four-fifth-1000">
<header><h3>Медиа-платформы</h3></header>
<p>Аудио- и видеоплатформы — на сегодняшний день одни из основных мест времяпровождения интернет-пользователей. Здесь перечислены свободные сервисы, свободные заменить неэтичные платформы больших корпораций.
<p>
</article>
<article class="card four-fifth-1000">
<header>#вместоyoutube PeerTube</header>
<center><label for="modal_pt"><img src="images/peertube.webp" width="80%"></label> </center>
<div class="modal">
<input id="modal_pt" type="checkbox" />
<label for="modal_pt" class="overlay"></label>
<article>
<header>
<h3>PeerTube</h3>
<label for="modal_pt" class="close">&times;</label>
</header>
<section class="content">
<img src="images/peertube.webp" width="100%">
</section>
</article>
</div>
<span><p>
PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.
</p>
<p>
В отличие от YouTube, PeerTube состоит из множества независимых сайтов,
способных общаться между собой. Не имеет значения,
на каком вы зарегистрируетесь — вся сеть в вашем распоряжении.
Плюс вы можете встроить видео с PeerTube куда угодно (см. пример выше).
</p>
<p>
Ну и вишенкой на торте — PeerTube также использует стандарт ActivityPub,
и подписаться на ваш канал там смогут все пользователи PeerTube, Mastodon,
Friendica и так далее.
</p>
</span>
<center>
<div class="tabs two">
<input id='tab-11' type='radio' name='tabgroupE' checked />
<label class="pseudo button toggle" for="tab-11">Где зарегистрироваться</label>
<input id='tab-12' type='radio' name='tabgroupE'>
<label class="pseudo button toggle" for="tab-12">Приложения</label>
<div class="row">
<div><center><a class="button" href="https://video.qoto.org">QOTO Peertube</a>
<a class="button" href="https://peertube.linuxrocks.online">peertube.linuxrocks.online</a>
<a class="button" href="https://joinpeertube.org/instances#instances-list">Выбрать сервер для регистрации</a>
</center></div>
<div><center>
<div><center><a class="button" href="https://play.google.com/store/apps/details?id=app.fedilab.
android"><img src="images/google.webp">Fedilab (платно)</a><br>
<a class="button" href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images
/fdroid.webp">Fedilab (бесплатно)</a>
<div><center><a class="button" href="https://f-droid.org/en/packages/net.schueller.peertube/"><img src="images/fdroid.webp">Thorium</a><br>
<a class="button" href="https://https://play.google.com/store/apps/details?id=net.schueller.peertube"><img src="images/google.webp">Peertube Player</a>
</center></div>
</div>
</div>
</center>
</article>
<article class="card four-fifth-1000">
<header>#вместоSoundCloud Funkwhale</header>
<center><label for="modal_pt"><img src="images/funkwhale.jpg" width="80%"></label> </center>
<div class="modal">
<input id="modal_pt" type="checkbox" />
<label for="modal_pt" class="overlay"></label>
<article>
<header>
<h3>Funkwhale</h3>
<label for="modal_pt" class="close">&times;</label>
</header>
<section class="content">
<img src="images/funkwhale.jpg" width="100%">
</section>
</article>
</div>
<span>
<p>
Funkwhale позволяет слушать музыку или подкасты и делиться ими
в сети Fediverse. Как и другие Fediverse-платформы, Funkwhale запущен на
разных не зависящих друг от друга узлах, и любой желающий может запустить
собственный узел.
</p>
<p>
В Funkwhale можно загружать свои аудиофайлы и пользователи других платформ,
как Mastodon, Pleroma и др. смогут увидеть их в своей ленте и подписаться на
вас.
</p>
</span>
<center>
<div class="tabs two">
<input id='tab-21' type='radio' name='tabgroupE' checked />
<label class="pseudo button toggle" for="tab-21">Где зарегистрироваться</label>
<input id='tab-22' type='radio' name='tabgroupE'>
<label class="pseudo button toggle" for="tab-22">Приложения</label>
<div class="row">
<div><center>
<a class="button" href="https://network.funkwhale.audio/dashboards/d/overview/funkwhale-network-overview?orgId=1&refresh=2h">Подобрать узел</a>
</center></div>
<div><center>
<div><center>
<a class="button" href="https://f-droid.org/en/packages/org.moire.ultrasonic/"><img src="images/fdroid.webp">Ultrasonic</a><br>
<a class="button" href="https://itunes.apple.com/us/app/substreamer/id1012991665"><img src="images/apple.webp">SubStreamer (iOS)</a><br>
</center></div>
</div>
</div>
</center>
</article>
</article>
</article>
</section>
</main>
<section>
<hr>
<center>
<a href="https://fedi.life/nocss/">Облегчённая версия сайта</a>&nbsp;|&nbsp;<a href="https://phreedom.club/~tolstoevsky"><img src="images/ava-min.webp" width=32px></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>&nbsp;|&nbsp; with <a href="https://phreedom.club/tt/landing.html">Trivial Technology</a> in mind.
</center>
</section>
</body>
</html>