vulbyteDotCom/support.html at main · vulbyte/vulbyteDotCom · GitHub

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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type='module' src='/client_management.js'></script>
	<title> support | vulbyte.com </title>
</head>

<body>
	<h1>thank you so much for even considering supporting me, <br>it means the world!</h1>
	<div>
		<h3>here's the FAQ:</h3>
		<sub>please note at the time, this was exclusively written by vulbyte. when you see words like 'we' or 'us', i'm
			talking about friends, contributors, mods/admins, not the generic corpo speak</sub>
		<div style='width:80%; margin:auto;'>
			<details>
				<summary>can i do a one time donation?</summary>
				of course! just select 'one time donation' on checkout to do so, you'll receive any perks of that their for 30
				days!
				<br>
				the reason we do subscription by default is because this is meant to be a patreon alternative. so that's the
				primary focus! <br>
				i know some people are super duper into it, so if you'd like to donate via crypto here's my metamask account
				code: <em>0x8a161F7c1aF7f40BEc95842dA74EFc36f8a20d16</em> (double-click -> right click to copy). <br>
				i don't use it at all do if you do donate anything their please let me know somehow (ideally email, discord, or
				a twitter @ or something lol)
			</details>
			<details>
				<summary>why is 3$ USD the minimum?</summary>
				our payment provider <a href='https://stripe.com/' target='_blank'>stripe</a> charges (at the time of writing) a
				2.9% fee + 0.30$ fee per transaction.
				at 3$ that means stripe is taking 0.09$ (2.9%) + the 0.30$ flat rate, and my local area + tax rate is: 5.06%
				(0.156$). <br><br>
				meaning all together on 3$ i'll receive approximately 2.46$.<br>
				and simply put i think that's about the right about before the amount is so small it becomes awkward beans to
				deal
				with.<br>
				if that doesn't work for you or you don't like it that's fine! thanks for considering anyways!
			</details>
			<details>
				<summary>why do i need an account?</summary>
				to keep track of your payments and billing!<br>
				simply put for <em>legal</em> reasons we need to keep records of basically every transaction for i believe 7
				years.
			</details>
			<details>
				<summary>can i be banned?</summary>
				yes, of course. if you're reasonable we wouldn't want to ever (paid or not).<br>
				if you're wondering what might get you banned, here are the main reasons:
				<ul>
					<li>any forms of discrimination, including but not limited to:
						<ul style='padding-left:3em;'>
							<li>race</li>
							<li>sexual orientation</li>
							<li>gender ideologies</li>
							<li>harassment</li>
						</ul>
						{
					</li>
				</ul>
				<em>we reserve the right to ban for any reason.</em><br>
			</details>
			<details>
				<summary>can i upload the content provided?</summary>
				no sorry, this is meant for supporters only. However i won't be a stickler! feel free to share with friends and
				family! <br>
				i just ask you don't go posting the links around online because if you do then i might need to put restrictions
				in
				place, and i don't want to have to do so.
			</details>
			<details>
				<summary>can i make clips?</summary>
				sure! just keep them short, something like no more then 2-3 minutes. and no more then a couple per stream.
			</details>
			<details>
				<summary>can i remix and rework things? (audio tracks, source files, etcetc)</summary>
				as long as it's derivative sure! just please don't share them (outside family and friends, but same as above).
				just make it distinctly different from the original!
				and
				please tag me if you do! i'd love to see/listen!
			</details>
			<details>
				<summary>what if i stop supporting?</summary>
				The policy currently in place is if you cancel you will have access to all the content you had at the tier you
				had until that period is up.
			</details>
			<details>
				<summary>i meant to cancel and i got charged already, can i get a refund?</summary>
				please email vulbyte at: <a href='mailto:vulbyt3@gmail.com'>vulbyt3@gmail.com</a>
				and we'll get you sorted :)
			</details>
			<details>
				<summary>vulbyte is slow to respond!</summary>
				sorry! i'm one person who tries to stay busy! if you're having a non-urgent issue please email vulbyte at: <a
					href='mailto:vulbyt3@gmail.com'>vulbyt3@gmail.com</a>.<br>
				if it's urgent please consider joining the <a href='https://discord.gg/JsbeAAwuaF' target='_blank'>discord</a>
				and messaging vulbyte their!<br>
				if they're not responding on either they're probably dealing with something very important, they're at work, or
				some other reason they can't respond!
			</details>
			<details>
				<summary>why only stripe?</summary>
				stipe offered a realitively easy solution for me to impliment
			</details>
			<details>
				<summary>why don't you use provider [xyz]</summary>
				mainly because it's more work for me to maintain. i'm a one person show running all this so it's more moving
				targets i need to support and
			</details>
			<details>
				<summary>how will the money be spent?</summary>
				primarily living costs and investing in equipment and tallent (f@#$ ai)! i'm currently not living very
				comfortably
				so i would use any
				donations for financial security first. if the income is enough i'd use it to pivot to making full-time content
			</details>
			<details>
				<summary>MY HOUSE IS BURNING AAAAA</summary>
				oh? i thought it was just you being in the room uwu
			</details>
		</div>
		<br>
		<br>
		<br>
		<br>
		here are the tiers:
		<style>
			#tiers_display {
				/*
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(12em, 22em));
				justify-content: space-evenly;
				*/
				display: flex;
				flex-direction: row;
				margin: auto;
				padding: none;
				width: fit-content !important;
				overflow-x: scroll;
				/*min-width: 100vw;
				width: 100vw;
				max-width: 100vw;7*/
			}

			#tiers_display>div {
				border-radius: 36px;
				background-color: var(--color_primary);
				gap: 1em;
				overflow-x: scroll;
				padding: none;
				margin-right: 1em;
				margin: none;
				min-width: 16em;
				width: 90% !important;
				max-width: 32em;
			}

			#tiers_display>div>div>ul>li {
				display: flex;
				justify-content: space-evenly;
			}

			#tiers_display>div>div>ul>li>img {
				box-shadow: 2px 2px 2px #000;
				margin-right: 1em;
			}

			#tiers_display>div>* {
				margin: auto;
				text-align: left;
			}

			#perk_icon {
				max-width: 3rem;
				max-height: 3rem;
			}

			#join_button {
				margin: auto;
				text-align: center;
				width: 100%;
			}
		</style>
		<div id='tiers_display'></div>
		<script type='module'>
			const tiers = [
				{
					'title': 'coffee',
					'picture': '/assets/tier_coffee.svg',
					'sub': 'a nice tip that helps make my days just a little nicer',
					'limit': 'none!',
					'price': `3$+ USD`,
					'perks': {
						'https://svgl.app/library/discord.svg': `custom role for the discord server! (no exlusive channels tho, i don't think those are cool-)`,
						'/assets/headshot_doodle.png': `at the end of each video and stream, you'll get a little black and white doodle headshot of your guy/gal/other!`,
						'/assets/nope.svg': `no nsfw stuff! suggestive is fine as long as it's youtube safe! \nsubstitution might be available tho so reach out!`,
						'/assets/attribution.svg': `in the supporters -> "coffee tier supporters" section of the video: 3(opt out available)`,
						'/assets/stream.svg': `you'll have access to the supporters exclusive art stream (unlisted yt video)`,
					},
					'join': 'link',
				},
				{
					'title': 'cheese',
					'picture': '/assets/tier_cheese.svg',
					'sub': 'thank you so much for buying me a meal!',
					'limit': 'none!',
					'price': '8$+ USD',
					'perks': {
						'/assets/plus.svg': 'all previous rewards! plus also...',
						'/assets/headshot_flats.png': `at the end of each video and stream, you'll get a colored bust of your character of choice (oc's included :3)`,
						'/assets/nope.svg': `no nsfw stuff! suggestive is fine as long as it's youtube safe! \nsubstitution might be available tho so reach out!`,
						'/assets/attribution_plus.svg': `aswell as you'll now be in the supporters -> "cheese tier supporters" section of the of the video :3 (opt out available)`,
						'/assets/the_archive.svg': `access to 'the archive', a place where you can download or stream all the videos and streams that have happened before! in the highest quality possible of course`
					},
					'join': 'link',
				},
				{
					'title': 'crab',
					'picture': '/assets/tier_crab.svg',
					'sub': 'thank you so much for help with some expenses!',
					'limit': '0/30',
					'price': '20$+ USD',
					'perks': {
						'/assets/plusplus.svg': 'all previous rewards! plus plus...',
						'/assets/headshot_shaded.png': `at the end of each video and stream, you'll get a shaded bust of your character of choice (oc's included :3)!`,
						'/assets/nope.svg': `no nsfw stuff! suggestive is fine as long as it's youtube safe! \nsubstitution might be available tho so reach out!`,
						'/assets/attribution_plusplus.svg': `aswell as you'll now be in the supporters -> "crab tier supporters" producers section of the of the video :3 (opt out available)`,
					},
					'join': 'link',
				},
			];


			const dis = document.getElementById('tiers_display');
			dis.style.width = '80%';
			dis.style.margin = 'auto';

			console.log(tiers);

			for (let i = 0; i < tiers.length; ++i) {
				console.log(`adding: ${tiers[i].title}`);

				let c = document.createElement('div');

				let title_container = document.createElement('div');
				// {{{3
				let tier_image = document.createElement('div');
				tier_image.style.backgroundImage = `url(${tiers[i].picture})`;
				tier_image.style.backgroundRepeat = `no-repeat`;
				tier_image.style.backgroundSize = '150%';
				tier_image.style.padding = '0px';
				tier_image.style.margin = '0px';
				//tier_image.style.background = '0px';
				tier_image.style.backgroundPositionX = '49%';
				tier_image.style.backgroundPositionY = '50%';
				tier_image.style.height = '10em';

				title_container.appendChild(tier_image);
				let title = document.createElement('h3');
				title.innerText = tiers[i].title;
				title_container.appendChild(title);

				let sub = document.createElement('h3');
				sub.innerText = tiers[i].sub;
				title_container.appendChild(sub)
				// }}}3

				c.appendChild(title_container);

				let body_div = document.createElement('div');
				body_div.style.padding = '1em';

				/*price and limit*/
				let pal = document.createElement('div');
				pal.style.display = 'flex';
				pal.style.justifyContent = 'space-between';
				pal.style.height = '3em';
				pal.style.width = '100%';

				let price = document.createElement('h4');
				price.innerText = tiers[i].price;
				price.style.backgroundColor = '#00000000';
				price.style.color = 'var(--color_tertiary)';
				price.style.height = '1em';
				price.style.fontSize = '1.3em';
				price.style.padding = '0px';
				price.style.margin = '0px';
				pal.appendChild(price);

				let limit = document.createElement('h5');
				limit.innerText = `sub'd / limit: ` + tiers[i].limit;
				limit.style.color = 'var(--color_tertiary)';
				limit.style.backgroundColor = '#00000000';
				limit.style.height = '1em';
				//limit.style.fontSize = '1.3em';
				limit.style.padding = '0px';
				limit.style.margin = '0px';
				pal.appendChild(limit);

				body_div.appendChild(pal);

				let description = document.createElement('div');
				body_div.appendChild(description);

				let perks = document.createElement('ul');
				let flav = document.createElement('details');
				let flav_sum = document.createElement('summary');
				flav.appendChild(flav_sum);
				flav_sum.innerText = 'click here to see the perks!';
				flav_sum.style.color = 'white';
				//perks.appendChild(flav);

				let perk_list = tiers[i].perks;
				for (let j = 0; j < Object.keys(perk_list).length; ++j) {
					console.log('j loop')
					let perk = document.createElement('li');

					let perk_icon = document.createElement('img');
					perk_icon.width = '256';
					perk_icon.height = '256';
					perk_icon.src = Object.keys(perk_list)[j];
					perk_icon.id = 'perk_icon';
					perk.appendChild(perk_icon);

					let perk_des = document.createElement('span');
					perk_des.innerText = Object.values(perk_list)[j];
					perk.appendChild(perk_des);

					perks.appendChild(perk);
				}
				flav.appendChild(perks);
				body_div.appendChild(flav);

				let joinLink = document.createElement('button');
				joinLink.id = 'join_button'
				joinLink.innerText = 'join this tier';
				joinLink.style.color = '#ffffff';
				joinLink.style.margin = 'auto';
				joinLink.style.marginTop = '1em';
				joinLink.style.justifyContent = 'center';
				/*joinLink.style.
					joinLink.style.
					joinLink.style.
					joinLink.style.
					joinLink.style.*/
				body_div.appendChild(joinLink);
				c.appendChild(body_div);
				// event listener


				dis.appendChild(c);
			};
		</script>
		</p>
	</div>
</body>

</html>