-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (104 loc) · 6.1 KB
/
index.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
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-lang-key="title">PassGUID - Generera Säkra Lösenord och GUID</title>
<meta name="description" content="PassGUID är ett verktyg för att enkelt och snabbt generera säkra lösenord och GUID. Använd PassGUID för att skapa säkra och unika lösenord och GUID.">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="Assets/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<header class="header">
<h1 class="main-title" data-lang-key="mainTitle">PassGUID</h1>
<p class="sub-title" data-lang-key="subTitle">Enkel och snabb generering av säkra lösenord och GUID.</p>
<!-- Change language -->
<div class="language-container">
<img class="flag-switch swe-flag" src="Assets/Images/sweden-flag-icon.svg" alt="Swedish Flag">
<input id="language-toggle" class="language-input" type="checkbox" />
<label class="language-label" for="language-toggle"><span data-lang-key="languageLabelText">Svenska</span></label>
<img class="flag-switch uk-flag" src="Assets/Images/united-kingdom-flag-icon.svg" alt="UK Flag">
</div>
</header>
<main class="container">
<!-- Lösenordsgenerator -->
<section class="password-section">
<h2 data-lang-key="passwordSectionTitle">Generera Lösenord</h2>
<fieldset>
<legend data-lang-key="passwordSettingsLegend">Lösenord inställningar</legend>
<span>
<label for="length" data-lang-key="lengthLabel">Längd (6-100):</label>
<input type="number" id="length" min="6" max="100" value="16">
</span>
<br>
<span>
<input type="checkbox" id="include-numbers" checked>
<label for="include-numbers" data-lang-key="includeNumbersLabel">Inkludera siffror</label>
</span>
<br>
<span>
<input type="checkbox" id="include-lowercase" checked>
<label for="include-lowercase" data-lang-key="includeLowercaseLabel">Inkludera små bokstäver</label>
</span>
<br>
<span>
<input type="checkbox" id="include-uppercase" checked>
<label for="include-uppercase" data-lang-key="includeUppercaseLabel">Inkludera stora bokstäver</label>
</span>
<br>
<span>
<input type="checkbox" id="include-special" checked>
<label for="include-special" data-lang-key="includeSpecialLabel">Inkludera specialtecken</label>
</span>
</fieldset>
<br>
<button data-lang-key="generatePasswordButton" onclick="generatePassword()">Generera Lösenord</button>
<button id="copy-password-btn" data-lang-key="copyPasswordButton" onclick="copyToClipboard('password-result', 'copy-password-btn')" disabled>Kopiera</button>
<p id="password-result" class="results"></p>
</section>
<!-- GUID Generator -->
<section class="guid-section">
<h2 data-lang-key="guidSectionTitle">Generera GUID</h2>
<fieldset>
<legend data-lang-key="guidSettingsLegend">GUID inställningar</legend>
<span>
<label for="bulk-count" data-lang-key="bulkCountLabel">Antal (1-500):</label>
<input type="number" id="bulk-count" min="1" max="500" value="1">
</span>
<br>
<span>
<input type="checkbox" id="guid-format-curly-braces" title="Lägg till måsvingar" onclick="toggleGUIDFormat()">
<label for="guid-format-curly-braces" data-lang-key="guidFormatCurlyBracesLabel"> Med måsvingar {} </label>
</span>
<br>
<span>
<input type="checkbox" id="guid-format-double-quotes" title="Lägg till citationstecken" onclick="toggleGUIDFormat()">
<label for="guid-format-double-quotes" data-lang-key="guidFormatDoubleQuotesLabel"> Med citationstecken " "</label>
</span>
<br>
<span>
<input type="checkbox" id="guid-format-commas" title="Separera varje GUID med kommatecken" onclick="toggleGUIDFormat()">
<label for="guid-format-commas" data-lang-key="guidFormatCommasLabel"> Separera GUID med kommatecken</label>
</span>
<br>
<span>
<input type="checkbox" id="guid-new-line" title="Varje GUID på ny rad" onclick="toggleGUIDFormat()">
<label for="guid-new-line" data-lang-key="guidNewLineLabel"> Varje GUID på ny rad</label>
</span>
</fieldset>
<br>
<button data-lang-key="generateGuidButton" onclick="generateBulkGUID()">Generera GUID</button>
<button id="copy-bulk-guid-btn" data-lang-key="copyGuidButton" onclick="copyBulkToClipboard()" disabled>Kopiera GUID</button>
<div id="bulk-guid-result" class="results"></div>
</section>
</main>
</div>
<footer class="footer">
<p class="footer-p" data-lang-key="footerText">© 2024 PassGUID. Gjord med ❤️. <a href="https://github.com/NordinAlex/PassGUID" target="_blank" rel="noopener">Open source on GitHub</a></p>
</footer>
<script src="passwordGenerator.js"></script>
<script src="guidGenerator.js"></script>
<script type="module" src="Translate/language.js"></script>
</body>
</html>