-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
126 lines (105 loc) · 7.09 KB
/
index.html
File metadata and controls
126 lines (105 loc) · 7.09 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=""width=device-width, initial-scale=1.0">
<title>Random Password Generator</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
<canvas id="antigravity-canvas" class="background-canvas"></canvas>
<div class="app-wrapper">
<header class="app-header">
<h1 class="main-title">Password <span class="highlight-text">Generator</span></h1>
<p class="subtitle">Create strong and secure passwords instantly</p>
</header>
<main class="main-container glass-panel">
<section class="display-section">
<div id="password-display-container" class="password-display-container glow-effect-container">
<input type="text" id="password-display" class="password-display" readonly placeholder="P4$5W0rD!">
<button id="toggle-visibility-btn" class="icon-btn visibility-btn" title="Toggle Visibility" aria-label="Toggle Visibility">
<svg id="icon-eye-open" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
<svg id="icon-eye-closed" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off hidden">
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
</button>
<button id="copy-bton-btn copy-btn" title="Copy to Clipboard" aria-label="Copy to Clipboard">
<svg id="icon-copy-master" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
<div id="copy-feedback" class="copy-feedback hidden">Copied to clipboard!</div>
<div class="strength-indicator-container">
<div class="strength-header">
<span class="strength-label">Security Strength:</span>
<span id="strength-text" class="strength-text strength-medium">Medium</span>
</div>
<div class="strength-bar-background">
<div id="strength-bar-fill" class="strength-bar-fill strength-fill-medium"></div>
</div>
</div>
</section>
<section class="controls-section">
<div class="control-group length-control-group">
<div class="length-header">
<label for="length-slider" class="control-label">Character Length</label>
<span id="length-value" class="length-value highlight-text">16</span>
</div>
<div class="slider-container">
<input type="range" id="length-slider" class="length-slider" min="4" max="32" value="16" step="1">
<div class="slider-progress" id="slider-progress"></div>
</div>
</div>
<div class="options-group">
<label class="checkbox-container">
<span class="checkbox-label-text">Include Uppercase Letters (A-Z)</span>
<input type="checkbox" id="include-uppercase" class="criteria-checkbox" checked>
<span class="custom-checkbox"></span>
</label>
<label class="checkbox-container">
<span class="checkbox-label-text">Include Lowercase Letters (a-z)</span>
<input type="checkbox" id="include-lowercase" class="criteria-checkbox" checked>
<span class="custom-checkbox"></span>
</label>
<label class="checkbox-container">
<span class="checkbox-label-text">Include Numbers (0-9)</span>
<input type="checkbox" id="include-numbers" class="criteria-checkbox" checked>
<span class="custom-checkbox"></span>
</label>
<label class="checkbox-container">
<span class="checkbox-label-text">Include Symbols (!@#$%)</span>
<input type="checkbox" id="include-symbols" class="criteria-checkbox" checked>
<span class="custom-checkbox"></span>
</label>
</div>
</section>
<section class="action-section">
<button id="generate-btn" class="primary-btn generate-btn">
<span class="btn-text">Generate Password (Enter)</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right btn-icon"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</button>
</section>
<section id="history-section" class="history-section hidden">
<div class="history-header">
<h3 class="history-title">Recent History</h3>
<button id="clear-history-btn" class="text-btn">Clear</button>
</div>
<ul id="history-list" class="history-list"></ul>
</section>
</main>
<footer class="app-footer">
<p class="footer-text">Built with HTML, CSS, & Vanilla JS</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>