-
-
Notifications
You must be signed in to change notification settings - Fork 31
/
support.html
161 lines (156 loc) · 8.11 KB
/
support.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
---
layout: page
title: "Support Us"
permalink: /support
description: "Help us defend online freedom and user autonomy - support our mission today!"
---
{% include variables.html %}
{% include c_sub-hero.html title=page.title perex=page.description %}
<section>
<div class="container has-text-wrap-balance">
<div class="support-why has-radius-large has-glare has-border p-6-custom-responsive">
<div class="support-why__content">
<h2>{{ t.support.whySection.title }}</h2>
<h3 class="has-text-warning">
{{ t.support.whySection.subtitle }}
</h3>
{% if t.support.whySection.points.size > 0 %}
<ul class="support-why__list">
{% for point in t.support.whySection.points %}
<li class="support-why__list-item">
{{ point }}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="support-why__buttons has-text-centered">
<p class="mt-5">
<strong>{{ t.support.whySection.footer }}</strong>
</p>
<div class="buttons is-centered">
<a href="#free" class="button is-success is-large is-gap-1.5">
{{ t.support.whySection.buttonFree }}
{% include e_render-svg-icon.html icon="arrow-down" inline=true dimension=25 classes="icon" %}
</a>
<a href="#paid" class="button is-warning is-large is-gap-1.5">
{{ t.support.whySection.buttonPaid }}
{% include e_render-svg-icon.html icon="arrow-down" inline=true dimension=25 classes="icon" %}
</a>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container has-text-wrap-balance">
<div class="support-how mt-6 has-text-centered">
<h2 id="free">{{ t.support.howSection.title }}</h2>
<div class="columns is-multiline p-3">
<div class="column is-full-tablet is-one-quarter-desktop">
<p>{{ t.support.howSection.choices.affiliate }}</p>
<a href="{{ site.data._en.navigation.hiddenNav.affiliates.url | relative_url }}" class="button is-primary is-outlined">{{ site.data._en.navigation.hiddenNav.affiliates.title }}</a>
</div>
<div class="column is-full-tablet is-half-desktop">
<p>{{ t.support.howSection.choices.contributors }}</p>
<div class="buttons is is-centered">
<a href="#" class="button is-success is-outlined">Website</a>
<a href="{{ site.data._en.navigation.hiddenNav.vpnToolkit.url | relative_url }}" class="button is-success is-outlined">
{{ site.data._en.navigation.hiddenNav.vpnToolkit.title }}
</a>
<a href="{{ site.data._en.navigation.hiddenNav.plexus.url }}" class="button is-success is-outlined" target="_blank">{{ site.data._en.navigation.hiddenNav.plexus.title }}</a>
<a href="{{ site.data._en.navigation.mainNav.goincognito.url | relative_url }}" class="button is-success is-outlined">{{ site.data._en.navigation.mainNav.goincognito.title }}</a>
</div>
</div>
<div class="column is-full-tablet is-one-quarter-desktop">
<p>{{ t.support.howSection.choices.connect }}</p>
<a href="{{ site.forum.links.discuss }}" class="button is-info is-outlined" target="_blank">{{ t.global.platforms.discuss }}</a>
<a href="{{ site.socials.links.mastodon }}" class="button is-info is-outlined" target="_blank">{{ t.global.platforms.mastodon }}</a>
</div>
</div>
<p class="mt-5 has-text-centered has-text-wrap-balance is-flex is-flex-direction-column is-align-items-center">
<strong>{{ t.support.howSection.choices.share }}</strong>
<a href="#" class="support-how__ghost-link button is-ghost">{{ t.support.howSection.choices.shareButton }}</a>
</p>
</div>
</div>
</section>
<section>
<div class="support-paid container">
<h2 id="paid" class="has-text-centered is-flex is-justify-content-center is-align-items-center is-gap-2">
{% include e_render-svg-icon.html icon="star-solid" dimension=50 class="icon has-text-warning" inline=true %}
{{ t.support.paidSection.title }}
{% include e_render-svg-icon.html icon="star-solid" dimension=50 class="icon has-text-warning" inline=true %}
</h2>
<div class="support-paid__projects has-text-weight-bold has-border has-radius-large p-6-custom-responsive is-gap-2 has-text-wrap-balance">
<div class="columns">
<div class="column is-half-tablet is-three-fifths-desktop">
<p class="is-flex is-flex-direction-column is-gap-2">
{{ t.support.paidSection.choices.techlorian }}
<a href="{{ site.support.links.techlorian }}" class="button is-outlined is-gap-2 is-warning has-text-warning" target="_blank">
{% include e_render-svg-icon.html icon="discuss" dimension=25 class="icon has-text-warning" inline=true %} {{ t.support.paidSection.choices.techlorianButton }}
</a>
</p>
<p class="is-flex is-flex-direction-column is-gap-2">
{{ t.support.paidSection.choices.patreon }}
<a href="{{ site.support.links.patreon }}" class="button is-outlined is-gap-2 is-info has-text-info" target="_blank">
{% include e_render-svg-icon.html icon="patreon" dimension=25 class="icon has-text-warning" inline=true %} {{ t.support.paidSection.choices.patreonButton }}
</a>
</p>
<p class="is-flex is-flex-direction-column is-gap-2">
{{ t.support.paidSection.choices.goincognito }}
<a href="{{ site.data._en.navigation.mainNav.goincognito.url | relative_url }}" class="button is-outlined is-primary is-gap-2">
{% include e_render-svg-icon.html icon="star-solid" dimension=25 class="icon has-text-warning" inline=true %} {{ t.goincognito.premium.buttonText }}
</a>
</p>
<p class="is-flex is-flex-direction-column is-gap-2 is-warning">
{{ t.support.paidSection.choices.other }}
<span class="buttons">
<a href="{{ site.support.links.paypal }}" class="button is-outlined is-gap-2 is-warning" target="_blank">
{% include e_render-svg-icon.html icon="paypal" dimension=25 class="icon has-text-warning" inline=true %} {{ t.global.platforms.paypal }}
</a>
<a href="{{ site.support.extra.youtube }}" class="button is-outlined is-gap-2 is-warning" target="_blank">
{% include e_render-svg-icon.html icon="youtube" dimension=25 class="icon has-text-warning" inline=true %} {{ t.global.platforms.youtube }}
</a>
<a href="{{ site.support.extra.githubSponsors }}" class="button is-outlined is-gap-2 is-warning" target="_blank">
{% include e_render-svg-icon.html icon="github" dimension=25 class="icon has-text-warning" inline=true %} {{ t.global.platforms.github }}
</a>
</span>
</p>
<p class="is-flex is-flex-direction-column is-gap-2">
{{ t.support.paidSection.choices.sponsors }}
<a href="{{ site.support.extra.sponsors }}" class="button is-outlined is-gap-2 is-success" target="_blank">
{% include e_render-svg-icon.html icon="star-solid" dimension=25 class="icon has-text-warning" inline=true %} {{ t.support.paidSection.choices.sponsorsButton }}
</a>
</p>
<p class="is-flex is-flex-direction-column is-gap-2">
{{ t.support.paidSection.choices.xmrchat }}
<a href="{{ site.support.links.xmrchat }}" class="button is-outlined is-gap-2 is-warning" target="_blank">
{% include e_render-svg-icon.html icon="xmrchat" dimension=25 class="icon has-text-warning" inline=true %} {{ t.global.platforms.xmrchat }}
</a>
</p>
</div>
<div class="support-paid__monero column is-half-tablet is-two-fifths-desktop">
<div class="box has-glare has-background-warning-45 p-5">
<h3>{{ t.support.paidSection.choices.monero }}</h3>
<img src="{% link assets/images/techlorexmr.png %}" alt="Monero QR code" class="support-paid__qr has-radius-normal">
<div class="field mt-5">
<label class="label is-hidden" for="xmraddress"></label>
<div class="control">
<textarea id="xmraddress" class="textarea has-fixed-size has-text-info" readonly>{{ site.xmrAddress }}</textarea>
</div>
</div>
<div class="field">
<label class="label" for="openalias">
{{ t.support.paidSection.choices.openalias }}
</label>
<div class="control">
<input class="input has-text-info" id="openalias" type="text" value="{{ site.openalias }}" readonly>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>