-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFAQ.html
466 lines (408 loc) · 23.6 KB
/
FAQ.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
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
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQ</title>
<!-- Favicon for most browsers -->
<link rel="icon" href="/img/favicon_io/favicon.ico" type="image/x-icon">
<!-- PNG icons for better resolution -->
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon_io/favicon-16x16.png">
<!-- Apple Touch Icon (for iOS) -->
<link rel="apple-touch-icon" href="/img/favicon_io/apple-touch-icon.png">
<!-- Web Manifest (for PWAs) -->
<link rel="manifest" href="/img/favicon_io/site.webmanifest">
<link rel="stylesheet" href="styles.css">
<script src="backgroundImages.js"></script>
<script src="background.js"></script>
<script src="fontList.js"></script>
<script src="font.js"></script>
<style>
</style>
</head>
<body>
<div id="dim-overlay" class="dim-overlay"></div>
<div id="main-content">
<div class="FAQcontainer">
<div class="FAQheader">
<h1>FAQ</h1>
<h3>what this button do?</h3>
<h4>Is slowly updating!</h4>
</div>
<div class="content">
<p class="content-paragraph">
Here you'll find questions categorized by colors you might have about what is what. I'll add more content slowly as I get more questions.
</p>
<p class="content-paragraph clickable-category" style="color: rgb(99, 134, 123); font-weight: bold;" onclick="filterFAQs('all')">
Show All Questions
</p>
<p class="content-paragraph clickable-category" style="color: rgb(230, 244, 119); font-weight: bold;" onclick="filterFAQs('uni')">
Universal Questions
</p>
<p class="content-paragraph clickable-category" style="color: rgb(0, 252, 4); font-weight: bold;" onclick="filterFAQs('client')">
Questions about Client
</p>
<p class="content-paragraph clickable-category" style="color: rgb(152, 152, 247); font-weight: bold;" onclick="filterFAQs('urlmkr')">
Questions about URL Maker
</p>
<p class="content-paragraph clickable-category" style="color: orange; font-weight: bold;" onclick="filterFAQs('index')">
Questions about the Home Site
</p>
<p class="content-paragraph clickable-category" style="color: rgb(253, 128, 149); font-weight: bold;" onclick="filterFAQs('showhistory')">
Questions about ShowHistory
</p>
<p class="content-paragraph">If you have any questions, please feel free to ask! I'll do my best to include them asap.</p>
</div>
<!-- FAQ Section -->
<div class="faq-section">
<h2 class="faq-header-selection">FAQ (Frequently Asked Questions)</h2>
<div class="faq-question uni" onclick="toggleFaq('faq1')"><a href="#faqWhoMadeThis">Who's behind this and where can I find you?</a></div>
<div id="faq1" class="faq-answer">
<p>It's me, StellarStoic! Unknown to the world because I always keep my distance from it. But you can find me on the protocols like <a href="https://njump.me/npub1qqqqqqz7nhdqz3uuwmzlflxt46lyu7zkuqhcapddhgz66c4ddynswreecw" style="color: #9203d5;">
<strong>Nostr</strong></a> and ...<a href="https://nosta.me/nprofile1qqsqqqqqqp0fmkspg7w8d305ln96a0jw0ptwqtuwskkm5pddv2kkjfcpp4mhxue69uhkummn9ekx7mqpzemhxue69uhhyetvv9ujumn0wd68ytnzv9hxgn5ehlv" style="color: #9203d5"><strong>Nostr</strong></a></p>
<p>or on the internets like <a href="https://signal.me/#eu/MhhiDpAJwzngrTkJMp1LVEmTv3SaGc2WDlKD5603oOgiyCWpvXBHvbKg18tQhQOo"style="color: #01b0fb;"> SIGNAL</a> and <a href="https://t.me/stellarstoic" style="color: #01b0fb;">TELEGRAM</a></p>
</div>
<div class="faq-question uni" onclick="toggleFaq('faq2')"><a href="#faqHowToReport">How to Report a Content</a></div>
<div id="faq2" class="faq-answer">
<p>If you find something you believe is illegal, disturbing, or malicious, you can report the URL by emailing to <a href="mailto:report@snofl.com?subject=URL%20Report&body=URL:%20%0AWhere%20the%20URL%20was%20found:%20%0AWhy%20are%20you%20reporting:%20">[email protected]</a>. Please provide as many details as possible about the URL in question in your email. I will do everything within my power to make the URL inaccessible if it is found to violate our policies.</p>
</div>
<div class="faq-question urlmkr" onclick="toggleFaq('faq3')">
<a href="#faqParagraphSection">How should I format text and content in the "Your Content" section?</a>
</div>
<div id="faq3" class="faq-answer">
<p>
The "Your Content" section is where you present your content to the end user. You can type freely and structure it as you like.
<br><br>
You can embed Nostr notes and npub profiles by adding a prefix:
<ul>
<li><code>nostr:note1t9wfaksdutq0hlnvqpzud5cq4wm9574mey0ykg3ju65stgezvsds56fg9z</code></li>
<li><code>nostr:npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m</code></li>
</ul>
Only the <code>note1...</code> format is supported—sorry!
<br><br>
You can also include links to images or videos to display them in your custom page. Both Vimeo and YouTube links are supported and will generate thumbnails.
<br><br>
QR codes can be embedded using the <code>qr:</code> prefix, such as <code>qr:somethingSomething</code>. Some QR codes can include logos, which are used with specific prefixes:
<ul>
<li><code>bitcoin:</code></li>
<li><code>lightning:</code></li>
<li><code>ecash:</code></li>
<li><code>monero:</code></li>
</ul>
(If you think more should be added, let me know.)
<br><br>
Links starting with <code>https://</code> will be formatted to open on click.
<br><br>
Note: Script tags are not supported in this section. If you attempt to post code, the URL will be invalid for the end user. If you must share code, take a screenshot and upload it as an image link instead.
</p>
</div>
<div class="faq-question showhistory" onclick="toggleFaq('faq4')">
<a href="#faqShowHistory">What are all the features in ShowHistory?</a>
</div>
<div id="faq4" class="faq-answer">
<p>
The <strong>ShowHistory</strong> section contains all the Nostr events you have posted.
<br><br>
If you have created and used multiple Nostr IDs, each ID will have a different **color** to distinguish them. Each ID is given a **randomly generated name**, which consists of:
<ul>
<li>A random adjective</li>
<li>A random noun</li>
<li>A random number from <strong>01 to 21</strong></li>
</ul>
This name is always displayed under your avatar like <strong>weepy_bumph_13</strong>.
<br><br>
In the ShowHistory section, you will see a **number** in front of each name, which represents the **total number of notes** you have posted with that specific ID.
<br><br>
The details also include:
<ul>
<li>Your **private key** (masked with <code>*****</code> for security). Click to reveal it.</li>
<li>A **QR code** on the other side, which allows you to easily import the ID into any Nostr client.</li>
<li>Basic **Nostr event details** (following <a href="https://github.com/nostr-protocol/nips/blob/master/01.md" target="_blank">Kind 1 Nostr Events</a> specifications).</li>
</ul>
<br>
<strong>I am aware of the security risks associated with storing private keys in plain sight, but these are disposable IDs, and you should treat them as such.</strong>
<br>
<strong>Extra Features:</strong>
<ul>
<li>A large **Download** button at the top to export your full history in JSON format.</li>
<li>A **Delete All (Panic Button)** at the bottom if you want to erase everything quickly.</li>
</ul>
</p>
</div>
<div class="faq-question index" onclick="toggleFaq('faq5')">
<a href="#faqNotePosting">I posted a Note, but where did it go?</a>
</div>
<div id="faq5" class="faq-answer">
<p>
When you post a response (a note), you receive feedback containing the event details. The note has been broadcasted to Nostr relays and is now part of Nostr forever.
<br><br>
You have several options to search for your note:
<ul>
<li>Use the <a href="https://snofl.com/client.com" target="_blank">search client</a> to look up similar content.</li>
<li>Copy the event ID in the event details and search for it manually.</li>
<li>Visit <a href="https://njump.me" target="_blank">njump.me</a> using the buttons below the event details.</li>
<li>Copy the event ID with a button bellow the event details and search for it manually.</li>
</ul>
</p>
<p>If you lost track of your posted note details, don't worry. All your posted notes are stored in the ShowHistory section, located in the footer below.</p>
</div>
<div class="faq-question client" onclick="toggleFaq('faq6')"><a href="#faqAboutClient">You say there's a search client?</a></div>
<div id="faq6" class="faq-answer">
<p>
Yes, you can use the <a href="https://snofl.com/client.html" target="_blank">search client</a> to look up content on Nostr relays that support
<a href="https://github.com/nostr-protocol/nips/blob/master/50.md" target="_blank">NIP-50</a>.
<br><br>
You can search using multiple keywords, either combined or separately.
You can toggle the view by keyword, or even block publishers you don't like.
<br><br>
It's still a work in progress, so some features may not work as expected.
<strong>Reactions don’t work yet</strong>, and things are still a bit clunky because, honestly, I suck at understanding WebSockets. 😅
</p>
</div>
<div class="faq-question urlmkr" onclick="toggleFaq('faq7')"><a href="#faqNTAGtype">Is NTAG memory showing wrong values?</a></div>
<div id="faq7" class="faq-answer">
<h4>NTAG memory has been set with a careful reading of the NXP <a href="https://www.nxp.com/docs/en/data-sheet/NTAG213_215_216.pdf" target="_blank" title="nxp ntags documentation papers"> documentation papers </a> </h4>
<h2>NTAG Memory Comparison</h2>
<table>
<tr>
<th>NTAG Type</th>
<th>Total Memory</th>
<th>User Memory</th>
<th>Max NDEF (Writable Data)</th>
<th>Max Text (Char.)</th>
<th>Max URL (Char.)</th>
<th>Use Case</th>
</tr>
<tr>
<td>NTAG 203</td>
<td>168 bytes</td>
<td>144 bytes</td>
<td>~137 bytes</td>
<td>137</td>
<td>135</td>
<td>Short URLs, automation</td>
</tr>
<tr>
<td>NTAG 213</td>
<td>180 bytes</td>
<td>144 bytes</td>
<td>~137 bytes</td>
<td>137</td>
<td>135</td>
<td>Basic vCards, small automation</td>
</tr>
<tr>
<td>NTAG 215</td>
<td>540 bytes</td>
<td>504 bytes</td>
<td>~492 bytes</td>
<td>492</td>
<td>490</td>
<td>Amiibo, longer vCards</td>
</tr>
<tr>
<td>NTAG 216</td>
<td>924 bytes</td>
<td>888 bytes</td>
<td>~868 bytes</td>
<td>868</td>
<td>866</td>
<td>Large records, WiFi configs</td>
</tr>
<tr>
<td>NTAG 413 DNA</td>
<td>416 bytes</td>
<td>404 bytes</td>
<td>~398 bytes</td>
<td>398</td>
<td>396</td>
<td>Secure URLs, anti-counterfeit</td>
</tr>
<tr>
<td>NTAG 424 DNA</td>
<td>928 bytes</td>
<td>916 bytes</td>
<td>~888 bytes</td>
<td>888</td>
<td>886</td>
<td>Secure vCards, payments</td>
</tr>
</table>
</div>
<!-- New FAQ Question -->
<div class="faq-question uni" onclick="toggleFaq('faqFont')"><a href="#faqFont">What font does this website use?</a></div>
<div id="faqFont" class="faq-answer">
<p>The current font used on this website is <a id="fontLink" href="#" target="_blank">loading...</a>.</p>
<p>
You don't like the <span id="currentFontName">loading...</span> font? Not a biggie!
<a href="#" id="changeFont">Click here to choose a new random one.</a>
</p>
</div>
<div class="faq-question urlmkr" onclick="toggleFaq('faqEncryption')">
<a href="#faqEncryption">How secure is the URL encryption?</a>
</div>
<div id="faqEncryption" class="faq-answer">
<p>
The security of the URL encryption on this platform relies on <strong>AES (Advanced Encryption Standard)</strong>,
specifically AES-256. This encryption standard is widely recognized as one of the most secure methods available today
and is used globally to protect sensitive data, including government and financial information.
</p>
<h4>🔐 What Makes AES-256 Strong?</h4>
<ul>
<li><strong>Key Length:</strong> AES-256 uses a 256-bit encryption key, offering 2<sup>256</sup> possible combinations.
This is a number so large that even modern supercomputers would take <strong>billions of years</strong> to brute-force it.
</li>
<li><strong>Cryptographic Strength:</strong> AES is a symmetric encryption algorithm, meaning the same key is used for encryption
and decryption. This simplicity ensures high speed without compromising security.
</li>
</ul>
<h4>Examples of Password Strength and Brute-Forcing</h4>
<table>
<tr>
<th>Password Length/Type</th>
<th>Time to Crack (Brute Force)</th>
</tr>
<tr>
<td>Weak (e.g., "12345")</td>
<td>Instantly</td>
</tr>
<tr>
<td>Moderate (e.g., "P@ssw0rd")</td>
<td>A few hours with modern hardware</td>
</tr>
<tr>
<td>Strong (e.g., "F&2zL!8x9wXy@#Tp")</td>
<td>Over 1 trillion years</td>
</tr>
</table>
<h4>Best Practices for Maximum Security</h4>
<ul>
<li>Choose a password with a minimum of 12 characters, including uppercase, lowercase, numbers, and special symbols.</li>
<li>Avoid common words, predictable phrases, or keyboard patterns.</li>
<li>Store passwords in a secure <a href="https://bitwarden.com/" target="_blank">password manager</a> instead of relying
on memory.</li>
</ul>
<h4>A Brief History of AES</h4>
<p>
AES was established as the encryption standard by the U.S. National Institute of Standards and Technology (NIST) in 2001.
It replaced the older DES
(Data Encryption Standard) due to advancements in computing power that made DES vulnerable. AES was selected through a
global competition and is based
on the Rijndael cipher, designed by cryptographers Joan Daemen and Vincent Rijmen.
</p>
<h4>Why Privacy Matters</h4>
<p>
Protecting sensitive information like URLs ensures that your personal data and activity remain private.
Encryption plays a crucial role in safeguarding secure links and confidential content, providing peace of
mind that unauthorized access is nearly impossible.
However, centralized institutions have a poor reputation for securely storing personal data, highlighting
the need for individuals to take control of their privacy. While encryption is a powerful tool, it’s only
as strong as its weakest link—humans. Mistakes, phishing, and social engineering can compromise even the
most robust security systems.
Empowering users with knowledge and awareness is just as important as using strong encryption.</p>
<p>
Always remember: <strong>The strength of encryption depends on the strength of your password, your opsec and people you share this password with!</strong>
</p>
</div>
<!-- New FAQ Question -->
<div class="faq-question index" onclick="toggleFaq('faq10')"><a href="#faqCanIdelete">How can I delete a Note I posted?</a></div>
<div id="faq10" class="faq-answer">
<p><strong>You can't</strong></p>
</div>
</div>
</div>
</div>
<footer class="footerDynamic">
<a href="about.html">About</a> |
<a href="FAQ.html">FAQ</a> |
<a href="urlmkr.html">URLmkr</a>
<!-- <button id="showHistoryBtn" title="a History data of all the posted notes from this device">Show History</button> -->
</footer>
<script>
function toggleFaq(faqId) {
// Close all other FAQ answers
const answers = document.querySelectorAll('.faq-answer');
let selectedFaq = document.getElementById(faqId);
answers.forEach(answer => {
if (answer.id !== faqId) {
answer.style.display = 'none';
}
});
// Toggle visibility
if (selectedFaq.style.display === 'block') {
selectedFaq.style.display = 'none';
} else {
selectedFaq.style.display = 'block';
// Scroll to the FAQ smoothly
selectedFaq.scrollIntoView({ behavior: "smooth", block: "start" });
// Adjust scroll after `scrollIntoView` completes
setTimeout(() => {
window.scrollBy(0, -window.innerHeight / 4); // Moves up by 1/4th of screen height
}, 500); // Delay to allow scrollIntoView animation to finish
}
}
function filterFAQs(category) {
const allQuestions = document.querySelectorAll('.faq-question');
const allAnswers = document.querySelectorAll('.faq-answer');
if (category === 'all') {
// Show all questions
allQuestions.forEach(question => {
question.style.display = 'block';
});
// Hide all answers to prevent confusion
allAnswers.forEach(answer => {
answer.style.display = 'none';
});
} else {
// Hide all questions
allQuestions.forEach(question => {
question.style.display = 'none';
});
// Show only the selected category
const selectedQuestions = document.querySelectorAll(`.faq-question.${category}`);
selectedQuestions.forEach(question => {
question.style.display = 'block';
});
// Hide all answers
allAnswers.forEach(answer => {
answer.style.display = 'none';
});
}
}
// Function to display the current font
function displayCurrentFont() {
const selectedFontIndex = localStorage.getItem('selectedFontIndex') || 1;
const fontName = fontList[selectedFontIndex].split(':')[0]; // Extract font name only
const fontLink = `https://fonts.bunny.net/family/${fontName.replace(/\s+/g, '+')}`;
const fontAnchor = document.getElementById('fontLink');
const fontDisplay = document.getElementById('currentFontName');
fontAnchor.textContent = fontName;
fontAnchor.href = fontLink;
// Also update the text in the "change font" message
fontDisplay.textContent = fontName;
}
// Function to randomly change the font
function changeFontRandomly() {
const newFontIndex = Math.floor(Math.random() * 50) + 1; // Random number between 1 and 50
localStorage.setItem('selectedFontIndex', newFontIndex); // Save new font index
// Reload page to apply the new font
location.reload();
}
// Attach click event to the "change font" link
document.getElementById('changeFont').addEventListener('click', function(event) {
event.preventDefault(); // Prevent default link behavior
changeFontRandomly();
});
// Initialize font display
displayCurrentFont();
// Close FAQ when clicking outside of an open question
document.addEventListener('click', function (event) {
const openFaq = document.querySelector('.faq-answer[style="display: block;"]');
if (openFaq && !openFaq.contains(event.target) && !event.target.closest('.faq-question')) {
openFaq.style.display = 'none';
}
});
</script>
</body>
<script src="footer.js"></script>
</html>