-
Notifications
You must be signed in to change notification settings - Fork 0
/
ThreeRandomWords.html
110 lines (81 loc) · 5.13 KB
/
ThreeRandomWords.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
---
layout: default
---
<!-- Three Random Words Password Generator
This is included in the Git Pages template, inserted after the initial <body> and some initial code.
Head elements are in _includes/head-custom.html
-->
<!--<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-150979818-1"></script>-->
<!-- ****************************************** Stylesheet *********************************************** -->
<style>
/** Override the Merlot template: */
footer {
padding-top: 30px;
margin: auto; /* Default overwrites much of the page. */
}
h1 {
text-transform: capitalize !important; /* Default of THREERANDOMWORDS is not helpful.*/
}
/** Other style settings: */
.socialMedia {
margin-top: 40px;
text-align: center;
}
#theSuggestion {
font-size: 133%;
color: blue;
margin-left: 3em;
}
#oldFashioned {
text-indent: 4em;
color: blue;
}
</style>
<!-- ****************************************** HTML body *********************************************** -->
<h2>Your New Password</h2>
<img src="images/scrabble-tiles-pixabay.jpg" width="25%"/ style="float:right"/>
<div>
<p>Below is a new password of three random words. It has been created in your web browser, so unless they can see your screen, nobody else has had access to it.</p>
<p id="theSuggestion"> <span class="word1"></span> <span class="word2"> </span> <span class="word3"></span> </p> <!-- Oddly, '/>' doesn't work with spans -->
<p>For websites that have old-fashioned constraints—such as demands for capitals, numbers and non-alphanumerics—copy and paste the following, which is just as secure: </p>
<p id="oldFashioned"><span class="word1c"></span><span class="word2c"></span><span class="word3c"></span>9!</p>
<p>Don't like the password? Refresh the page to select another.</p>
<p>Like this page? Share it using the social media buttons below.</p>
<div class="socialMedia">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://securityessentials.github.io/ThreeRandomWords/ThreeRandomWords.html"><img src="images/icons8-facebook.svg" width="40" height="40" alt="Share with Facebook"/></a>
<a href="https://twitter.com/intent/tweet?url=https://securityessentials.github.io/ThreeRandomWords/ThreeRandomWords.html"><img src="images/icons8-twitter.svg" width="40" height="40" alt="Share with Twitter"/></a>
<a href="https://www.linkedin.com/shareArticle?url=https://securityessentials.github.io/ThreeRandomWords/ThreeRandomWords.html"><img src="images/icons8-linkedin.svg" width="40" height="40" alt="Share with LinkedIn"/></a>
</div>
</div>
<!-- Footer with copyright etc. -->
<footer id="footer">
<p>Copyright (c) 2024 Charles Weir </p>
<p>The word list is derived from <a href="https://github.com/first20hours/google-10000-english">Josh Kaufman's Google-10000-English Github repository</a>, which is based on <a href="https://books.google.com/ngrams/info">Google's Trillion Word Corpus</a>. There may be <a href="https://github.com/first20hours/google-10000-english/blob/master/LICENSE.md"> limitations on its commercial use</a>.
</footer>
<!-- ****************************************** Javascript *********************************************** -->
<script type="text/javascript">
function capitalize(word) {
return word ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() : '';
}
$.get('https://raw.githubusercontent.com/first20hours/google-10000-english/master/google-10000-english-no-swears.txt', function(passwordFile) {
var passwords = (passwordFile.split(/\s+/) // Ignore different line endings
.filter(word => word.length > 3 && word.length < 9) // One to three letter words are mostly rubbish. Too long is a pain to enter.
);
var randomIntegers = new Uint32Array(3);
window.crypto.getRandomValues(randomIntegers);
$(".word1").text(passwords[randomIntegers[0] % passwords.length]);
$(".word2").text(passwords[randomIntegers[1] % passwords.length]);
$(".word3").text(passwords[randomIntegers[2] % passwords.length]);
$(".word1c").text(capitalize(passwords[randomIntegers[0] % passwords.length]));
$(".word2c").text(capitalize(passwords[randomIntegers[1] % passwords.length]));
$(".word3c").text(capitalize(passwords[randomIntegers[2] % passwords.length]));
}, 'text');
</script>
<!-- ************************************ Google Analytics ****************************** -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-762RZQ4E4B"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-762RZQ4E4B');
</script>