convert some more cards

This commit is contained in:
Samuel Shifterovich 2018-10-25 18:12:44 +02:00
parent 29a52f38b2
commit 0192711cc9
3 changed files with 88 additions and 178 deletions

View File

@ -11,7 +11,7 @@
<p><img src="{{include.image}}" alt="{{include.title}}" class="panel-item">{{include.description}}</p> <p><img src="{{include.image}}" alt="{{include.title}}" class="panel-item">{{include.description}}</p>
<div class="card-bottom"> <div class="card-bottom">
<p> <p>
<a class="btn btn-{{include.color}}" href="{{include.url}}">Website: <a class="btn btn-{{include.color}} mb-1" href="{{include.url}}">Website:
{% if include.website %} {% if include.website %}
{{include.website}} {{include.website}}
{% else %} {% else %}
@ -19,7 +19,11 @@
{% endif %} {% endif %}
</a> </a>
{% if include.tor %} {% if include.tor %}
<a data-toggle="tooltip" data-placement="bottom" data-original-title="{{include.tor}}. Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="img/layout/tor.png" width="35"></a> <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="{{include.tor}}. Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="img/layout/tor.png" width="35"></a>
{% endif %}
{% if include.extra_button %}
{{include.extra_button}}
{% endif %} {% endif %}
</p> </p>
{% if include.footer %} {% if include.footer %}

View File

@ -8,17 +8,17 @@
/* todo */ /* todo */
} }
/* .card-success, .card-success .card-header { /*.card-success, */ .card-success .card-header {
border-color: rgba(40, 167, 69, 0.5) !important; border-color: rgba(40, 167, 69, 0.5) !important;
} }
.card-primary, .card-primary .card-header { /*.card-primary, */ .card-primary .card-header {
border-color: rgba(0, 123, 255, 0.5) !important; border-color: rgba(0, 123, 255, 0.5) !important;
} }
.card-warning, .card-warning .card-header { /*.card-warning, */ .card-warning .card-header {
border-color: rgba(255, 193, 7, 0.5) !important; border-color: rgba(255, 193, 7, 0.5) !important;
} */ }

View File

@ -1317,62 +1317,29 @@ layout: default
<div class="row"> <div class="row">
{% include card.html color="success"
title="searx"
image="img/provider/searx.jpg"
url="ttps://searx.me/"
tor="http://ulrn6sryqaifefld.onion"
extra_button='<a class="btn btn-success mb-1" href="https://github.com/asciimoo/searx/wiki/Searx-instances">List of Instances</a>'
description='An <a href="https://github.com/asciimoo/searx">open source</a> metasearch engine, aggregating the results of other search engines while not storing information about its users. No logs, no ads and no tracking.'
%}
<div class="col-sm-4"> {% include card.html color="primary"
<div class="panel panel-success"> title="StartPage"
<div class="panel-heading"> image="img/provider/StartPage.png"
<h3 class="panel-title">searx</h3> url="https://www.startpage.com/"
</div> description="Google search results, with complete privacy protection. Behind StartPage is an european company that has been obsessive about privacy since 2006."
<div class="panel-body"> %}
<p><img src="img/provider/searx.jpg" alt="searx" class="panel-item">An <a href="https://github.com/asciimoo/searx">open source</a> metasearch engine, aggregating the results of other search engines while not storing information about its users. No logs, no ads and no tracking.</p>
<p> {% include card.html color="warning"
<a class="btn btn-success" href="https://searx.me/">Website: searx.me</a> title="DuckDuckGo"
<a class="btn btn-success" href="https://github.com/asciimoo/searx/wiki/Searx-instances">List of Instances</a> image="img/provider/DuckDuckGo.jpg"
<a data-toggle="tooltip" data-placement="bottom" data-original-title="http://ulrn6sryqaifefld.onion. Requires specific software to access: torproject.org" href="http://ulrn6sryqaifefld.onion"><img alt="Tor" src="img/layout/tor.png" width="35"></a> url="https://duckduckgo.com/"
</p> tor="http://3g2upl4pq6kufc4m.onion"
description='The search engine that doesn\'t track you. Some of DuckDuckGo\'s code is free software hosted at <a href="https://github.com/duckduckgo">GitHub</a>, but the core is proprietary. <span class="flag-icon flag-icon-us"></span> <a href="#ukusa">The company is based in the USA.</a>'
</div> %}
</div>
</div>
<!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">StartPage</h3>
</div>
<div class="panel-body">
<p><img src="img/provider/StartPage.png" alt="StartPage" class="panel-item">Google search results, with complete privacy protection. Behind StartPage is an european company that has been obsessive about privacy since 2006.</p>
<p>
<a class="btn btn-info" href="https://www.startpage.com/">
Website: startpage.com
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">DuckDuckGo</h3>
</div>
<div class="panel-body">
<p><img src="img/provider/DuckDuckGo.jpg" alt="DuckDuckGo" class="panel-item">The search engine that doesn't track you. Some of DuckDuckGo's code is free software hosted at <a href="https://github.com/duckduckgo">GitHub</a>, but the core is proprietary. <span class="flag-icon flag-icon-us"></span> <a href="#ukusa">The company is based in the USA.</a></p>
<p>
<a class="btn btn-warning" href="https://duckduckgo.com/">
Website: duckduckgo.com
</a>
<a data-toggle="tooltip" data-placement="bottom" data-original-title="http://3g2upl4pq6kufc4m.onion. Requires specific software to access: torproject.org" href="http://3g2upl4pq6kufc4m.onion"><img alt="Tor" src="img/layout/tor.png" width="35"></a>
</p>
</div>
</div>
</div>
</div> </div>
<h3>Firefox Addon</h3> <h3>Firefox Addon</h3>
@ -1411,67 +1378,36 @@ layout: default
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-4"> {% include card.html color="success"
<div class="panel panel-success"> title="Mobile: Signal"
<div class="panel-heading"> image="img/tools/Signal.png"
<h3 class="panel-title">Mobile: Signal</h3> url="https://signal.org"
</div> footer="OS: Android, iOS, macOS, Windows, Linux, Web"
<div class="panel-body"> description="Signal is a mobile app developed by Open Whisper Systems. The app provides instant messaging, as well as voice and video calling.
<p> All communications are end-to-end encrypted. Signal is free and open source, enabling anyone to verify its security by auditing the code. The development team is supported by community donations and grants. There are no advertisements,
<img src="img/tools/Signal.png" alt="Signal" class="panel-item">Signal is a mobile app developed by Open Whisper Systems. The app provides instant messaging, as well as voice and video calling. and it doesn't cost anything to use."
All communications are end-to-end encrypted. Signal is free and open source, enabling anyone to verify its security by auditing the code. The development team is supported by community donations and grants. There are no advertisements, %}
and it doesn't cost anything to use.<br>
<b>Warning:</b> Requires a mobile number to register but you can <a href="https://infosec-handbook.eu/blog/signal-myths/#m2">securely use a disposable number</a>.
</p>
<p>
<a class="btn btn-success" href="https://signal.org">
Download: signal.org
</a>
</p>
<p>OS: Android, iOS, macOS, Windows, Debian-based Linux</p>
</div>
</div>
</div>
<div class="col-sm-4"> {% include card.html color="primary"
<div class="panel panel-info"> title="Wire"
<div class="panel-heading"> image="img/tools/wire.png"
<h3 class="panel-title">Wire</h3> url="https://get.wire.com"
</div> footer="OS: Android, iOS, macOS, Windows, Linux, Web"
<div class="panel-body"> description="Wire is an app developed by Wire Swiss GmbH.
<p><img src="img/tools/wire.png" alt="WIRE SWISS GmbH" class="panel-item">Wire is an app developed by Wire Swiss GmbH. The Wire app allows users to exchange end-to-end encrypted instant messages, as well as make voice and video calls. Wire is free and open source, enabling anyone to verify its security by auditing the code.
The Wire app allows users to exchange end-to-end encrypted instant messages, as well as make voice and video calls. Wire is free and open source, enabling anyone to verify its security by auditing the code. The development team is backed by Iconical and they will monetize in the future with premium features/services.<br>
The development team is backed by Iconical and they will monetize in the future with premium features/services.<br> <b>Caution:</b> The company keeps a list of all the users you contact until you delete your account."
<b>Caution:</b> The company keeps a list of all the users you contact until you delete your account.</p> %}
<p>
<a class="btn btn-info" href="https://get.wire.com">
Download: get.wire.com
</a>
</p>
<p>OS: Android, iOS, macOS, Windows, Linux, Web</p>
</div>
</div>
</div>
{% include card.html color="warning"
<div class="col-sm-4"> title="Desktop: Ricochet"
<div class="panel panel-warning"> image="img/tools/Ricochet.png"
<div class="panel-heading"> url="https://ricochet.im/"
<h3 class="panel-title">Desktop: Ricochet</h3> footer="OS: Windows, macOS, Linux."
</div> description='Ricochet uses the <a href="#browser"><span class="glyphicon glyphicon-link"></span> Tor network</a> to reach your contacts without relying on messaging servers. It creates a hidden service, which is used to rendezvous with
<div class="panel-body"> your contacts without revealing your location or IP address. Instead of a username, you get a unique address that looks like <em>ricochet:rs7ce36jsj24ogfw</em>. Other Ricochet users can use this address to send a contact request - asking to be
<p><img alt="Ricochet" src="img/tools/Ricochet.png" class="panel-item">Ricochet uses the <a href="#browser"><span class="glyphicon glyphicon-link"></span> Tor network</a> to reach your contacts without relying on messaging servers. It creates a hidden service, which is used to rendezvous with added to your contacts list.'
your contacts without revealing your location or IP address. Instead of a username, you get a unique address that looks like <em>ricochet:rs7ce36jsj24ogfw</em>. Other Ricochet users can use this address to send a contact request - asking to be %}
added to your contacts list.</p>
<p>
<a class="btn btn-warning" href="https://ricochet.im/">
Download: ricochet.im
</a>
</p>
<p>OS: Windows, macOS, Linux.</p>
</div>
</div>
</div>
</div> </div>
<h3>Worth Mentioning</h3> <h3>Worth Mentioning</h3>
@ -1502,63 +1438,34 @@ layout: default
<strong>If you are currently using an Video & Voice Messenger like Skype, Viber or Google Hangouts you should pick an alternative here.</strong> <strong>If you are currently using an Video & Voice Messenger like Skype, Viber or Google Hangouts you should pick an alternative here.</strong>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-4"> {% include card.html color="success"
<div class="panel panel-success"> title="Mobile: Signal"
<div class="panel-heading"> image="img/tools/Signal.png"
<h3 class="panel-title">Mobile: Signal</h3> url="https://signal.org"
</div> footer="OS: Android, iOS, macOS, Windows, Linux, Web"
description="Signal is a mobile app developed by Open Whisper Systems. The app provides instant messaging, as well as voice and video calling.
All communications are end-to-end encrypted. Signal is free and open source, enabling anyone to verify its security by auditing the code. The development team is supported by community donations and grants. There are no advertisements,
and it doesn't cost anything to use."
%}
<div class="panel-body"> {% include card.html color="primary"
<p><img src="img/tools/Signal.png" alt="Signal" class="panel-item">Signal is a mobile app developed by Open Whisper Systems. The app provides instant messaging, as well as voice and video calling. title="Wire"
All communications are end-to-end encrypted. Signal is free and open source, enabling anyone to verify its security by auditing the code. The development team is supported by community donations and grants. There are no advertisements, image="img/tools/wire.png"
and it doesn't cost anything to use.</p> url="https://get.wire.com"
<p> footer="OS: Android, iOS, macOS, Windows, Linux, Web"
<a class="btn btn-success" href="https://signal.org"> description="Wire is an app developed by Wire Swiss GmbH.
Download: signal.org The Wire app allows users to exchange end-to-end encrypted instant messages, as well as make voice and video calls. Wire is free and open source, enabling anyone to verify its security by auditing the code.
</a> The development team is backed by Iconical and they will monetize in the future with premium features/services.<br>
</p> <b>Caution:</b> The company keeps a list of all the users you contact until you delete your account."
<p>OS: iOS, Android.</p> %}
</div>
</div>
</div>
<div class="col-sm-4"> {% include card.html color="warning"
<div class="panel panel-info"> title="Linphone"
<div class="panel-heading"> image="img/tools/Linphone.png"
<h3 class="panel-title">Wire</h3> url="http://www.linphone.org/"
</div> footer="OS: iOS, Android, Windows Phone, Linux, Windows, macOS, Browser (Web)"
<div class="panel-body"> description="Linphone is an open source SIP Phone and a free voice over IP service, available on mobile and desktop environments and on web browsers. It supports ZRTP for end-to-end encrypted voice and video communication."
<p><img src="img/tools/wire.png" alt="WIRE SWISS GmbH" class="panel-item">Wire is an app developed by Wire Swiss GmbH. %}
The Wire app allows users to exchange end-to-end encrypted instant messages, as well as make voice and video calls. Wire is free and open source, enabling anyone to verify its security by auditing the code.
The development team is backed by Iconical and they will monetize in the future with premium features/services.<br>
<b>Caution:</b> The company keeps a list of all the users you contact until you delete your account.</p>
<p>
<a class="btn btn-info" href="https://get.wire.com">
Download: get.wire.com
</a>
</p>
<p>OS: Android, iOS, macOS, Windows, Linux, Web</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Linphone</h3>
</div>
<div class="panel-body">
<p><img src="img/tools/Linphone.png" alt="Linphone" class="panel-item">Linphone is an open source SIP Phone and a free voice over IP service, available on mobile and desktop environments and on web browsers. It supports ZRTP for
end-to-end encrypted voice and video communication.</p>
<p>
<a class="btn btn-warning" href="http://www.linphone.org/">
Download: linphone.org
</a>
</p>
<p>OS: iOS, Android, Windows Phone, Linux, Windows, macOS, Browser (Web)</p>
</div>
</div>
</div>
</div> </div>
@ -1582,8 +1489,7 @@ layout: default
<h1><a href="#filesharing" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> File Sharing</h1> <h1><a href="#filesharing" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> File Sharing</h1>
</div> </div>
<div class="row"> <div class="row">
{% include card.html {% include card.html color="success"
color="success"
title="OnionShare" title="OnionShare"
image="img/tools/OnionShare.png" image="img/tools/OnionShare.png"
url="https://onionshare.org/" url="https://onionshare.org/"
@ -1591,8 +1497,8 @@ layout: default
footer="OS: Windows, macOS, Linux." footer="OS: Windows, macOS, Linux."
description="OnionShare is an open source tool that lets you securely and anonymously share a file of any size. It works by starting a web server, making it accessible as a Tor onion service, and generating an unguessable URL to access and download the files. It doesn't require setting up a server on the internet somewhere or using a third party filesharing service. You host the file on your own computer and use a Tor onion service to make it temporarily accessible over the internet." description="OnionShare is an open source tool that lets you securely and anonymously share a file of any size. It works by starting a web server, making it accessible as a Tor onion service, and generating an unguessable URL to access and download the files. It doesn't require setting up a server on the internet somewhere or using a third party filesharing service. You host the file on your own computer and use a Tor onion service to make it temporarily accessible over the internet."
%} %}
{% include card.html
color="primary" {% include card.html color="primary"
title="Magic Wormhole" title="Magic Wormhole"
image="img/tools/Magic-Wormhole.png" image="img/tools/Magic-Wormhole.png"
url="http://magic-wormhole.io/" url="http://magic-wormhole.io/"