Trainery1/gmailgym-practice-email-creation
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Gmail Gym - Practice Email Creation</title>7 <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/1">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <link rel="stylesheet" href="style.css">12<script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 primary: '#4285F4',18 secondary: '#34A853',19 accent: '#EA4335',20 warning: '#FBBC05'21 }22 }23 }24 }25 </script>26 <style>27 .password-strength {28 transition: width 0.3s ease;29 }30 .input-highlight {31 box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);32 }33 </style>34</head>35<body class="bg-gray-50 min-h-screen">36 <div class="max-w-lg mx-auto py-12 px-4 sm:px-6 lg:px-8">37 <div class="text-center mb-8">38 <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="h-10 mx-auto mb-4">39 <h1 class="text-3xl font-bold text-gray-800">Create your Google Account</h1>40 <p class="text-gray-600 mt-2">Practice creating a secure email address</p>41 </div>42 43 <div class="bg-white rounded-lg shadow-md p-8">44 <form id="signupForm" class="space-y-6">45 <!-- Name Section -->46 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">47 <div>48 <label for="firstName" class="block text-sm font-medium text-gray-700">First name</label>49 <input type="text" id="firstName" name="firstName" required 50 class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">51 </div>52 <div>53 <label for="lastName" class="block text-sm font-medium text-gray-700">Last name</label>54 <input type="text" id="lastName" name="lastName" required 55 class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">56 </div>57 </div>58 59 <!-- Username Section -->60 <div>61 <label for="username" class="block text-sm font-medium text-gray-700">Username</label>62 <div class="mt-1 relative rounded-md shadow-sm">63 <input type="text" id="username" name="username" required 64 class="block w-full border border-gray-300 rounded-md py-2 px-3 pr-10 focus:outline-none focus:ring-primary focus:border-primary"65 pattern="[a-z0-9._%+-]+"66 title="Lowercase letters, numbers, and periods only">67 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">68 <span class="text-gray-500 sm:text-sm">@gmail.com</span>69 </div>70 </div>71 <p id="usernameFeedback" class="mt-2 text-sm text-gray-500">72 You can use letters, numbers & periods73 </p>74 <div id="usernameSuggestions" class="hidden mt-2 space-x-2">75 <span class="inline-block text-xs text-primary cursor-pointer">suggestions</span>76 </div>77 </div>78 79 <!-- Password Section -->80 <div>81 <label for="password" class="block text-sm font-medium text-gray-700">Password</label>82 <div class="mt-1 relative">83 <input type="password" id="password" name="password" required 84 class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"85 minlength="8">86 <div class="absolute inset-y-0 right-0 pr-3 flex items-center">87 <i data-feather="eye-off" class="text-gray-400 cursor-pointer hover:text-gray-600" id="togglePassword"></i>88 </div>89 </div>90 <div class="mt-2">91 <div class="h-1 bg-gray-200 rounded-full overflow-hidden">92 <div id="passwordStrength" class="h-full password-strength w-0"></div>93 </div>94 <div id="passwordRequirements" class="mt-2 space-y-1">95 <p class="text-xs text-gray-500 flex items-center"><i data-feather="check" class="w-3 h-3 mr-1 text-green-500"></i> Minimum 8 characters</p>96 </div>97 </div>98 </div>99 100 <!-- Confirm Password -->101 <div>102 <label for="confirmPassword" class="block text-sm font-medium text-gray-700">Confirm</label>103 <div class="mt-1 relative">104 <input type="password" id="confirmPassword" name="confirmPassword" required 105 class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">106 <div class="absolute inset-y-0 right-0 pr-3 flex items-center">107 <i data-feather="check" id="passwordMatchIcon" class="hidden text-green-500"></i>108 </div>109 </div>110 </div>111 112 <!-- Birthday and Gender -->113 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">114 <div>115 <label class="block text-sm font-medium text-gray-700">Birthday</label>116 <div class="mt-1 grid grid-cols-3 gap-3">117 <div class="relative">118 <select name="month" id="month" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary appearance-none">119 <option value="">Month</option>120 <script>121 const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];122 months.forEach((month, index) => {123 document.write(`<option value="${index + 1}">${month}</option>`);124 });125 </script>126 </select>127 <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">128 <i data-feather="chevron-down" class="text-gray-400"></i>129 </div>130 </div>131 <div class="relative">132 <input type="number" id="day" name="day" min="1" max="31" placeholder="Day" 133 class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">134 <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">135 <span class="text-gray-400">DD</span>136 </div>137 </div>138 <div class="relative">139 <input type="number" id="year" name="year" min="1900" max="2023" placeholder="Year" 140 class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">141 <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">142 <span class="text-gray-400">YYYY</span>143 </div>144 </div>145 </div>146 </div>147<div>148 <label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>149 <select id="gender" name="gender" 150 class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">151 <option value="">I prefer not to say</option>152 <option value="male">Male</option>153 <option value="female">Female</option>154 <option value="other">Other</option>155 </select>156 </div>157 </div>158 <!-- Security Tips -->159 <security-tips></security-tips>160 161 <!-- Phone Number -->162<div>163 <label for="phone" class="block text-sm font-medium text-gray-700">Phone number (recommended)</label>164 <div class="mt-1 relative rounded-md shadow-sm">165 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">166 <select id="countryCode" name="countryCode" 167 class="h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 focus:outline-none focus:ring-primary focus:border-primary">168 <option value="+1">US +1</option>169 <option value="+44">UK +44</option>170 <option value="+91">IN +91</option>171 </select>172 </div>173 <input type="tel" id="phone" name="phone" 174 class="block w-full pl-20 border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">175 </div>176 <p class="mt-2 text-sm text-gray-500">Used for account recovery</p>177 </div>178 179 <!-- Recovery Email -->180 <div>181 <label for="recoveryEmail" class="block text-sm font-medium text-gray-700">Recovery email address (optional)</label>182 <input type="email" id="recoveryEmail" name="recoveryEmail" 183 class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">184 </div>185 186 <!-- Location -->187 <div>188 <label for="location" class="block text-sm font-medium text-gray-700">Location</label>189 <select id="location" name="location" 190 class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">191 <option value="">Select a country</option>192 <option value="US">United States</option>193 <option value="UK">United Kingdom</option>194 <option value="CA">Canada</option>195 <option value="AU">Australia</option>196 <option value="IN">India</option>197 </select>198 </div>199 200 <!-- Submit Button -->201 <div class="pt-4">202 <div class="flex justify-between items-center">203 <a href="#" class="text-sm font-medium text-primary hover:text-primary-600">Sign in instead</a>204 <button type="button" id="reviewBtn" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">205 Next206 </button>207</div>208 </div>209 </form>210 </div>211 <!-- Account Review Section -->212 <div id="accountReview" class="hidden bg-white rounded-lg shadow-md p-8 mt-8">213 <div class="text-center mb-6">214 <h2 class="text-2xl font-bold text-gray-800">Review Your Account</h2>215 <p class="text-gray-600 mt-2">Please verify your information before continuing</p>216 </div>217 218 <div class="space-y-6">219 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">220 <div>221 <h3 class="text-sm font-medium text-gray-500">Name</h3>222 <p id="reviewName" class="text-gray-800 font-medium"></p>223 </div>224 <div>225 <h3 class="text-sm font-medium text-gray-500">Birthday</h3>226 <p id="reviewBirthday" class="text-gray-800"></p>227 </div>228 </div>229 230 <div>231 <h3 class="text-sm font-medium text-gray-500">Email Address</h3>232 <div class="flex items-baseline">233 <p id="reviewEmail" class="text-gray-800 font-medium"></p>234 <span id="emailAvailability" class="ml-2 text-xs px-2 py-1 rounded-full"></span>235 </div>236 <p id="emailFeedback" class="text-xs mt-1 text-gray-500"></p>237 </div>238 239 <div>240 <h3 class="text-sm font-medium text-gray-500">Password Strength</h3>241 <div class="flex items-center">242 <div class="h-2 w-full bg-gray-200 rounded-full overflow-hidden">243 <div id="reviewPasswordStrength" class="h-full"></div>244 </div>245 <span id="passwordStrengthText" class="ml-2 text-xs font-medium"></span>246 </div>247 <div id="passwordFeedback" class="mt-2 space-y-1 text-xs"></div>248 </div>249 250 <div class="bg-blue-50 p-4 rounded-lg">251 <h3 class="text-sm font-medium text-blue-800 flex items-center">252 <i data-feather="shield" class="w-4 h-4 mr-2"></i> Security Checklist253 </h3>254 <ul class="mt-2 space-y-2 text-xs text-blue-700">255 <li class="flex items-start">256 <i data-feather="check" class="w-3 h-3 mr-2 mt-0.5 flex-shrink-0"></i>257 <span>Never share your password with anyone</span>258 </li>259 <li class="flex items-start">260 <i data-feather="check" class="w-3 h-3 mr-2 mt-0.5 flex-shrink-0"></i>261 <span>Use a unique password for each account</span>262 </li>263 <li class="flex items-start">264 <i data-feather="check" class="w-3 h-3 mr-2 mt-0.5 flex-shrink-0"></i>265 <span>Enable 2-step verification if available</span>266 </li>267 </ul>268 </div>269 270 <div class="pt-4 flex justify-between">271 <button type="button" id="editBtn" class="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">272 Edit Information273 </button>274 <a href="account_summary.html" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">275 Confirm & Continue276 </a>277 </div>278 </div>279 </div>280<div id="accountSummary" class="hidden bg-white rounded-lg shadow-md p-8 mt-8">281 <div class="text-center mb-6">282 <i data-feather="check-circle" class="w-12 h-12 text-green-500 mx-auto"></i>283 <h2 class="text-2xl font-bold text-gray-800 mt-4">Account Created Successfully!</h2>284 <p class="text-gray-600 mt-2">Here's a summary of your account details</p>285 </div>286 287 <div class="space-y-4">288 <div>289 <h3 class="text-sm font-medium text-gray-500">Name</h3>290 <p id="summaryName" class="mt-1 text-gray-800"></p>291 </div>292 <div>293 <h3 class="text-sm font-medium text-gray-500">Email</h3>294 <p id="summaryEmail" class="mt-1 text-gray-800"></p>295 <p id="emailFeedback" class="mt-1 text-sm text-green-600"></p>296 </div>297 <div>298 <h3 class="text-sm font-medium text-gray-500">Password Strength</h3>299 <p id="summaryPassword" class="mt-1 text-gray-800">••••••••</p>300 <p id="passwordFeedback" class="mt-1 text-sm text-green-600"></p>301 </div>302 <div>303 <h3 class="text-sm font-medium text-gray-500">Birthday</h3>304 <p id="summaryBirthday" class="mt-1 text-gray-800"></p>305 <p id="birthdayFeedback" class="mt-1 text-sm text-blue-600"></p>306 </div>307 </div>308 309 <div class="mt-8 pt-6 border-t border-gray-200 flex justify-center">310 <button id="goBackBtn" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">311 Create Another Account312 </button>313 </div>314 </div>315 316 <div class="mt-8 text-center">317<p class="text-gray-600 text-sm">This is a practice page. No actual account will be created.</p>318 <p class="text-gray-600 text-sm mt-2">Learn more about <a href="#" class="text-primary hover:underline">Google's security recommendations</a></p>319 </div>320 321 <!-- Footer -->322 <div class="mt-12 border-t border-gray-200 pt-6">323 <div class="flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">324 <div class="flex space-x-4 mb-4 md:mb-0">325 <a href="#" class="hover:underline">Help</a>326 <a href="#" class="hover:underline">Privacy</a>327 <a href="#" class="hover:underline">Terms</a>328 </div>329 <div>330 <select class="border-0 text-gray-500 focus:outline-none focus:ring-0">331 <option>English (United States)</option>332 <option>Español (España)</option>333 <option>Français (France)</option>334 <option>Deutsch</option>335 </select>336 </div>337 </div>338 </div>339 </div>340 <script>341 feather.replace();342 343 // Show review section when Next is clicked344 document.getElementById('reviewBtn').addEventListener('click', function() {345 const firstName = document.getElementById('firstName').value;346 const lastName = document.getElementById('lastName').value;347 const username = document.getElementById('username').value;348 const password = document.getElementById('password').value;349 const month = document.getElementById('month').value;350 const day = document.getElementById('day').value;351 const year = document.getElementById('year').value;352 353 // Update review section354 document.getElementById('reviewName').textContent = `${firstName} ${lastName}`;355 document.getElementById('reviewEmail').textContent = `${username}@gmail.com`;356 document.getElementById('reviewBirthday').textContent = `${month}/${day}/${year}`;357 358 // Check email availability (simulated)359 const emailAvailable = Math.random() > 0.3; // 70% chance available360 const emailAvailEl = document.getElementById('emailAvailability');361 emailAvailEl.textContent = emailAvailable ? 'Available' : 'Taken';362 emailAvailEl.className = `ml-2 text-xs px-2 py-1 rounded-full ${emailAvailable ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`;363 document.getElementById('emailFeedback').textContent = emailAvailable 364 ? 'This email address looks good!' 365 : 'This username is already taken. Try adding numbers or initials.';366 367 // Password strength analysis368 analyzePassword(password);369 370 // Hide form and show review371 document.querySelector('.bg-white.rounded-lg').classList.add('hidden');372 document.getElementById('accountReview').classList.remove('hidden');373 });374 375 // Edit button handler376 document.getElementById('editBtn').addEventListener('click', function() {377 document.querySelector('.bg-white.rounded-lg').classList.remove('hidden');378 document.getElementById('accountReview').classList.add('hidden');379 });380 381 function analyzePassword(password) {382 let strength = 0;383 const feedback = [];384 385 // Length check386 if (password.length >= 12) strength += 2;387 else if (password.length >= 8) strength += 1;388 else feedback.push('Too short - should be at least 8 characters');389 390 // Character diversity391 const hasUpper = /[A-Z]/.test(password);392 const hasLower = /[a-z]/.test(password);393 const hasNumber = /[0-9]/.test(password);394 const hasSpecial = /[^A-Za-z0-9]/.test(password);395 396 if (hasUpper && hasLower) strength += 1;397 else feedback.push('Mix uppercase and lowercase letters');398 399 if (hasNumber) strength += 1;400 else feedback.push('Add numbers');401 402 if (hasSpecial) strength += 1;403 else feedback.push('Add special characters (!@#$%^&*)');404 405 // Common patterns406 if (/password|123|qwerty/i.test(password)) {407 strength = 0;408 feedback.push('Avoid common passwords and patterns');409 }410 411 // Update UI412 const strengthMeter = document.getElementById('reviewPasswordStrength');413 const strengthText = document.getElementById('passwordStrengthText');414 const feedbackEl = document.getElementById('passwordFeedback');415 416 let strengthClass, strengthLabel;417 if (strength >= 4) {418 strengthClass = 'bg-green-500';419 strengthLabel = 'Very Strong';420 } else if (strength >= 3) {421 strengthClass = 'bg-green-400';422 strengthLabel = 'Strong';423 } else if (strength >= 2) {424 strengthClass = 'bg-yellow-500';425 strengthLabel = 'Fair';426 } else {427 strengthClass = 'bg-red-500';428 strengthLabel = 'Weak';429 }430 431 strengthMeter.className = `h-full ${strengthClass}`;432 strengthMeter.style.width = `${(strength/4)*100}%`;433 strengthText.textContent = strengthLabel;434 strengthText.className = `ml-2 text-xs font-medium ${strengthClass.replace('bg', 'text')}`;435 436 feedbackEl.innerHTML = feedback.map(item => 437 `<p class="flex items-center ${feedback.length > 3 ? 'text-red-500' : 'text-gray-500'}">438 <i data-feather="${feedback.length > 3 ? 'x' : 'alert-circle'}" class="w-3 h-3 mr-1"></i>439 ${item}440 </p>`441 ).join('');442 443 if (feedback.length === 0) {444 feedbackEl.innerHTML = '<p class="text-green-500 flex items-center"><i data-feather="check" class="w-3 h-3 mr-1"></i> Excellent password!</p>';445 }446 447 feather.replace();448 }449// Form submission handler450 document.getElementById('signupForm').addEventListener('submit', function(e) {451 e.preventDefault();452 453 // Get form values454 const firstName = document.getElementById('firstName').value;455 const lastName = document.getElementById('lastName').value;456 const username = document.getElementById('username').value;457 const password = document.getElementById('password').value;458 const month = document.getElementById('month').value;459 const day = document.getElementById('day').value;460 const year = document.getElementById('year').value;461 462 // Hide form and show summary463 document.querySelector('.bg-white.rounded-lg').classList.add('hidden');464 document.getElementById('accountSummary').classList.remove('hidden');465 466 // Set summary values467 document.getElementById('summaryName').textContent = `${firstName} ${lastName}`;468 document.getElementById('summaryEmail').textContent = `${username}@gmail.com`;469 document.getElementById('summaryBirthday').textContent = `${month}/${day}/${year}`;470 471 // Generate feedback472 const emailQuality = username.length > 6 && !username.includes('.') && !username.match(/\d{3,}/) 473 ? 'Professional email name'474 : username.length > 5 475 ? 'Good email name' 476 : 'Consider a longer email name';477 478 const passwordQuality = password.length > 12 479 ? 'Excellent password (strong)'480 : password.length > 8 481 ? 'Good password'482 : 'Consider a longer password';483 484 document.getElementById('emailFeedback').textContent = emailQuality;485 document.getElementById('passwordFeedback').textContent = passwordQuality;486 487 // Birthday feedback488 const age = new Date().getFullYear() - parseInt(year);489 let birthdayFeedback = '';490 if (age < 13) {491 birthdayFeedback = 'You must be at least 13 years old to create a Google Account';492 } else if (age < 18) {493 birthdayFeedback = 'Parental supervision recommended for this account';494 } else {495 birthdayFeedback = 'Age appropriate account settings';496 }497 document.getElementById('birthdayFeedback').textContent = birthdayFeedback;498 });499 500 // Go back button501 document.getElementById('goBackBtn').addEventListener('click', function() {502 document.querySelector('.bg-white.rounded-lg').classList.remove('hidden');503 document.getElementById('accountSummary').classList.add('hidden');504 document.getElementById('signupForm').reset();505 });506// Password strength meter507 const passwordInput = document.getElementById('password');508 const passwordStrength = document.getElementById('passwordStrength');509 const passwordRequirements = document.getElementById('passwordRequirements');510 const togglePassword = document.getElementById('togglePassword');511 const confirmPassword = document.getElementById('confirmPassword');512 const passwordMatchIcon = document.getElementById('passwordMatchIcon');513 514 passwordInput.addEventListener('input', function() {515 const password = this.value;516 let strength = 0;517 518 // Add requirements based on password complexity519 const requirements = [520 { regex: /.{8,}/, message: "Minimum 8 characters", valid: false },521 { regex: /[a-z]/, message: "Lowercase letter", valid: false },522 { regex: /[A-Z]/, message: "Uppercase letter", valid: false },523 { regex: /[0-9]/, message: "Number", valid: false },524 { regex: /[^A-Za-z0-9]/, message: "Special character", valid: false }525 ];526 527 requirements.forEach(req => {528 req.valid = req.regex.test(password);529 if (req.valid) strength += 20;530 });531 532 // Update password strength meter533 passwordStrength.style.width = strength + '%';534 passwordStrength.className = 'h-full password-strength ' + 535 (strength < 40 ? 'bg-red-500' : 536 strength < 70 ? 'bg-yellow-500' : 'bg-green-500');537 538 // Update requirements list539 passwordRequirements.innerHTML = requirements.map(req => 540 `<p class="text-xs ${req.valid ? 'text-green-500' : 'text-gray-500'} flex items-center">541 <i data-feather="${req.valid ? 'check' : 'x'}" class="w-3 h-3 mr-1 ${req.valid ? 'text-green-500' : 'text-gray-500'}"></i>542 ${req.message}543 </p>`544 ).join('');545 546 feather.replace();547 });548 549 // Toggle password visibility550 togglePassword.addEventListener('click', function() {551 const icon = this;552 const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';553 passwordInput.setAttribute('type', type);554 icon.setAttribute('data-feather', type === 'password' ? 'eye-off' : 'eye');555 feather.replace();556 });557 558 // Confirm password match559 confirmPassword.addEventListener('input', function() {560 if (passwordInput.value && this.value) {561 if (passwordInput.value === this.value) {562 passwordMatchIcon.classList.remove('hidden');563 } else {564 passwordMatchIcon.classList.add('hidden');565 }566 }567 });568 569 // Username suggestions570 const usernameInput = document.getElementById('username');571 const usernameFeedback = document.getElementById('usernameFeedback');572 const usernameSuggestions = document.getElementById('usernameSuggestions');573 574 usernameInput.addEventListener('input', function() {575 const username = this.value.toLowerCase();576 if (username.length > 3) {577 usernameSuggestions.classList.remove('hidden');578 579 // Generate some random suggestions580 const suggestions = [581 username + Math.floor(Math.random() * 100),582 username + '_' + ['2023', 'cool', 'official', 'me', 'team'].find(() => Math.random() > 0.5),583 username.split('')[0] + username.split('')[1] + Math.floor(Math.random() * 1000)584 ];585 586 usernameSuggestions.innerHTML = suggestions.map(sug => 587 `<span class="inline-block text-xs text-primary cursor-pointer hover:underline" onclick="document.getElementById('username').value='${sug}'">${sug}</span>`588 ).join(' | ');589 } else {590 usernameSuggestions.classList.add('hidden');591 }592 });593 </script>594 <script src="components/security-tips.js"></script>595 </body>596</html>