-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
201 lines (190 loc) · 10.4 KB
/
index.html
File metadata and controls
201 lines (190 loc) · 10.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="PassWizard - A convenient, user-friendly password generator with a magical theme. Create strong, randomized passwords instantly with one click to generate." />
<meta name="keywords" content="password generator online, password creation, password tool, password safety" />
<meta name="author" content="Bobby Asakawa" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="PassWizard - Your Magical Password Generator" />
<meta property="og:description" content="Create strong, randomized passwords instantly with PassWizard's magical password generator. Perfect for securing your digital accounts with a single click." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pass-wizard.up.railway.app/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@boobeh123" />
<meta name="twitter:title" content="PassWizard - Your Magical Password Generator" />
<meta name="twitter:description" content="Create strong, randomized passwords instantly with PassWizard's magical password generator. Perfect for securing your digital accounts with a single click." />
<meta name="theme-color" content="#ffffff" />
<link rel="canonical" href="https://pass-wizard.up.railway.app/" />
<!-- Preload-->
<link rel="preload" href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" as="style">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style">
<link rel="preload" href="css/reset.css" as="style">
<link rel="preload" href="css/normalize.css" as="style">
<link rel="preload" href="css/style.css" as="style">
<link rel="preload" href="js/main.js" as="script">
<!-- Preconnect-->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://kit.fontawesome.com" crossorigin>
<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<!-- Fontawesome -->
<script src="https://kit.fontawesome.com/9f91d488b5.js" crossorigin="anonymous" defer></script>
<!-- External CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<title>PassWizard - Your Magical Password Generator</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "PassWizard",
"description": "A fun, hobby project featuring a magical password generator that creates randomized passwords with a wizard theme. Created as a learning experience and personal tool.",
"url": "https://pass-wizard.up.railway.app/",
"applicationCategory": "PersonalProject",
"operatingSystem": "Any",
"browserRequirements": "Requires JavaScript. Works in all modern browsers.",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"featureList": [
"Instant password generation",
"Randomized combinations",
"One-click copying",
"Toggle password visibility",
"Dark/Light mode support"
],
"author": {
"@type": "Person",
"name": "Bobby Asakawa",
"url": "https://bobby-asakawa.netlify.app/"
},
"purpose": "Personal project and learning experience"
}
</script>
</head>
<body>
<!-- Tooltip Notification -->
<div id="tooltipNotification" class="tooltip-notification" role="alert" aria-live="polite" hidden>
<i class="fas fa-check-circle" aria-hidden="true"></i>
<span id="tooltipMessage">Copied to clipboard</span>
</div>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header class="site-header" role="banner">
<nav class="main-nav" role="navigation" aria-label="Main navigation">
<div class="logo">
<i class="fas fa-hat-wizard" aria-hidden="true"></i>
<span>PassWizard</span>
</div>
<ul class="nav-links">
<li>
<button type="button" id="themeToggle" class="theme-toggle" aria-label="Toggle dark mode">
<i class="fas fa-moon" aria-hidden="true"></i>
</button>
</li>
<li><a href="#" id="aboutBtn" aria-haspopup="dialog">About</a></li>
</ul>
</nav>
</header>
<!-- Modal Structure -->
<div class="modal" id="aboutModal" role="dialog" aria-labelledby="modalTitle" aria-modal="true" hidden>
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle"><i class="fas fa-scroll" aria-hidden="true"></i> About PassWizard</h2>
<button class="close-modal" aria-label="Close modal">×</button>
</div>
<div class="modal-body">
<p>Welcome to PassWizard, where we combine the art of magic with the science of security to create the perfect passwords for your digital realm.</p>
<h3>Our Magical Features:</h3>
<ul>
<li><i class="fas fa-wand-magic-sparkles" aria-hidden="true"></i> Instant password generation</li>
<li><i class="fas fa-shield" aria-hidden="true"></i> Strong, randomized combinations</li>
<li><i class="fas fa-copy" aria-hidden="true"></i> One-click copying</li>
</ul>
<h3>The Magic Behind the Curtain:</h3>
<p>Built with web technologies, PassWizard ensures your passwords are generated randomly and conveniently. Our spells (algorithms) create unique combinations of letters, numbers, and special characters to protect your digital treasures.</p>
</div>
</div>
</div>
<main id="main-content" role="main">
<section class="hero" aria-label="Introduction">
<div class="hero-content">
<h1>PassWizard</h1>
<p class="tagline">Conjure the perfect password with a wave of your wand</p>
</div>
</section>
<section class="password-generator" aria-labelledby="generator-title">
<div class="container">
<h2 id="generator-title">Cast Your Password Spell</h2>
<button type="button" id="randomBtn" aria-label="Generate new password">
<i class="fas fa-wand-magic-sparkles" aria-hidden="true"></i>
Generate Password
</button>
<div class="password-container" role="region" aria-label="Generated password">
<button type="button" class="action-btn" id="toggleVisibility" title="Toggle password visibility" aria-label="Toggle password visibility">
<i class="fas fa-eye" aria-hidden="true"></i>
</button>
<p class="passwordResult" aria-live="polite"></p>
<div class="password-actions">
<button type="button" class="action-btn" id="copyBtn" title="Copy to clipboard" aria-label="Copy password to clipboard">
<i class="fas fa-copy" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</section>
<section class="features" aria-labelledby="features-title">
<div class="container">
<h2 id="features-title">Magical Features</h2>
<div class="feature-grid">
<article class="feature-card">
<i class="fas fa-shield" aria-hidden="true"></i>
<h3>Secure</h3>
<p>Strong, randomized passwords that protect your accounts</p>
</article>
<article class="feature-card">
<i class="fas fa-bolt" aria-hidden="true"></i>
<h3>Fast</h3>
<p>Generate passwords instantly with a single click</p>
</article>
<article class="feature-card">
<i class="fas fa-eye-slash" aria-hidden="true"></i>
<h3>Private</h3>
<p>Toggle visibility to keep your passwords hidden</p>
</article>
</div>
</div>
</section>
</main>
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-hat-wizard" aria-hidden="true"></i>
<span>PassWizard</span>
</div>
<p class="copyright"><span></span> All rights reserved.</p>
<nav class="social-links" aria-label="Social media links">
<a href="https://x.com/boobeh123" title="X" aria-label="Follow us on X" target="_blank">
<i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
</a>
<a href="https://github.com/boobeh123/Coin-flip-server-side" title="GitHub" aria-label="Visit our GitHub profile" target="_blank">
<i class="fab fa-github" aria-hidden="true"></i>
</a>
<a href="https://bobby-asakawa.netlify.app/" title="Portfolio" aria-label="Visit our portfolio website" target="_blank">
<i class="fa-solid fa-globe" aria-hidden="true"></i>
</a>
</nav>
</div>
</div>
</footer>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>