Add feature comparison chart

is the main part of CC#2465
This commit is contained in:
davegson 2022-08-11 14:50:32 +02:00
parent 9e21fb1863
commit c3a4769fed
2 changed files with 102 additions and 0 deletions

View file

@ -0,0 +1,91 @@
<div class="card-table">
<table>
<colgroup class="card-table-colgroup">
<col class="card-table-colgroup-col">
<col class="card-table-colgroup-col">
<col class="card-table-colgroup-col-highlight">
<col class="card-table-colgroup-col">
</colgroup>
<thead class="card-table-header">
<tr class="card-table-header-row">
<th class="card-table-header-row-cell"></th>
<th class="card-table-header-row-cell">Most VPNs</th>
<th class="card-table-header-row-cell">SPN</th>
<th class="card-table-header-row-cell">Tor</th>
</tr>
</thead>
<tbody class="card-table-body">
<tr class="card-table-body-row">
<td class="card-table-body-row-cell-title">Multiple Identities (simultaneous)</td>
<td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
</tr>
<tr class="card-table-body-row">
<td class="card-table-body-row-cell-title">Automatic Geo-Unblocking</td>
<td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
</tr>
<tr class="card-table-body-row">
<td class="card-table-body-row-cell-title">Individual Apps Settings</td>
<td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
</tr>
<tr class="card-table-body-row">
<td class="card-table-body-row-cell-title">Easy Setup</td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
<td class="card-table-body-row-cell"><strong>Browser Only</strong></td>
</tr>
<tr class="card-table-body-row">
<td class="card-table-body-row-cell-title">Availabilty</td>
<td class="card-table-body-row-cell">
<div class="md:space-x-2">
<i class="icon-windows text-2xl text-safing-blue-500"></i>
<i class="icon-linux text-2xl"></i>
<i class="icon-mac text-2xl text-gray-500"></i>
</div>
</td>
<td class="card-table-body-row-cell">
<a class="card-table-body-row-cell-link" href="{{ site.portmaster_url }}">
<div class="md:space-x-2">
<i class="icon-windows text-2xl text-safing-blue-500"></i>
<i class="icon-linux text-2xl"></i>
</div>
</a>
</td>
<td class="card-table-body-row-cell">
<a class="card-table-body-row-cell-link" href="https://www.torproject.org/download/">
<div class="md:space-x-2">
<i class="icon-windows text-2xl text-safing-blue-500"></i>
<i class="icon-linux text-2xl"></i>
<i class="icon-mac text-2xl text-gray-500"></i>
</div>
</a>
</td>
</tr>
<tr class="card-table-body-row">
<td class="card-table-body-row-cell-title">Open Source</td>
<td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
<td class="card-table-body-row-cell">
<a class="card-table-body-row-cell-link" href="{{ site.github_url }}/spn">
<i class="icon-tick text-2xl text-green-500"></i>
</a>
</td>
<td class="card-table-body-row-cell">
<a class="card-table-body-row-cell-link" href="https://gitweb.torproject.org/">
<i class="icon-tick text-2xl text-green-500"></i>
</a>
</td>
</tr>
<tr class="card-table-body-row">
<td class="card-table-body-row-cell-title">Built for Privacy</td>
<td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
<td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
</tr>
</tbody>
</table>
</div>

View file

@ -189,6 +189,17 @@ layout: page
</p>
</div>
</div>
<div class="showcase-two-container">
<div class="showcase-two-top-break-left">
<h2 class="showcase-two-top-title" id="feature-comparison-chart" style="max-width: 550px;">
Feature Comparison
</h2>
</div>
{% include spn_vs_others.html %}
</div>
<div class="showcase-two-container" id="pricing">
<div class="showcase-two-top" style="max-width: 690px;">
<a class="alert-primary hover-scale-out" data-method="get" href="{{ site.spn_alpha_status_page_url }}">