{"id":10636,"date":"2026-01-17T22:06:32","date_gmt":"2026-01-17T22:06:32","guid":{"rendered":"https:\/\/karakoramtreks.com\/?page_id=10636"},"modified":"2026-01-17T22:06:34","modified_gmt":"2026-01-17T22:06:34","slug":"sign-up","status":"publish","type":"page","link":"https:\/\/karakoramtreks.com\/es\/sign-up\/","title":{"rendered":"Sign Up"},"content":{"rendered":"\n

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Sign Up<\/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .signup-container { background: white; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); max-width: 450px; width: 100%; padding: 40px; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } .subtitle { color: #666; margin-bottom: 30px; font-size: 14px; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; font-size: 14px; } input { width: 100%; padding: 12px 15px; border: 2px solid #e1e8ed; border-radius: 6px; font-size: 15px; transition: border-color 0.3s; } input:focus { outline: none; border-color: #667eea; } .password-strength { height: 4px; background: #e1e8ed; border-radius: 2px; margin-top: 8px; overflow: hidden; } .password-strength-bar { height: 100%; width: 0%; transition: all 0.3s; } .strength-weak { background: #ff4757; width: 33%; } .strength-medium { background: #ffa502; width: 66%; } .strength-strong { background: #26de81; width: 100%; } .checkbox-group { display: flex; align-items: start; margin-bottom: 20px; } .checkbox-group input[type=”checkbox”] { width: auto; margin-right: 10px; margin-top: 3px; } .checkbox-group label { margin-bottom: 0; font-weight: 400; font-size: 13px; } .checkbox-group a { color: #667eea; text-decoration: none; } .checkbox-group a:hover { text-decoration: underline; } .submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); } .submit-btn:active { transform: translateY(0); } .divider { text-align: center; margin: 25px 0; position: relative; } .divider::before { content: ”; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e1e8ed; } .divider span { background: white; padding: 0 15px; position: relative; color: #999; font-size: 13px; } .social-login { display: flex; gap: 10px; margin-bottom: 25px; } .social-btn { flex: 1; padding: 12px; border: 2px solid #e1e8ed; background: white; border-radius: 6px; cursor: pointer; transition: all 0.3s; font-size: 14px; font-weight: 500; } .social-btn:hover { border-color: #667eea; background: #f8f9ff; } .login-link { text-align: center; margin-top: 20px; font-size: 14px; color: #666; } .login-link a { color: #667eea; text-decoration: none; font-weight: 600; } .login-link a:hover { text-decoration: underline; } .error { color: #ff4757; font-size: 12px; margin-top: 5px; display: none; } <\/style> <\/head> <body> <div class=”signup-container”> <h1>Create Account<\/h1> <p class=”subtitle”>Join us today and get started<\/p> <div class=”social-login”> <button class=”social-btn” onclick=”alert(‘Google sign-up integration needed’)”> Google <\/button> <button class=”social-btn” onclick=”alert(‘GitHub sign-up integration needed’)”> GitHub <\/button> <\/div> <div class=”divider”> <span>or sign up with email<\/span> <\/div> <form id=”signupForm” onsubmit=”handleSubmit(event)”> <div class=”form-group”> <label for=”fullname”>Full Name<\/label> <input type=”text” id=”fullname” name=”fullname” required> <\/div> <div class=”form-group”> <label for=”email”>Email Address<\/label> <input type=”email” id=”email” name=”email” required> <span class=”error” id=”emailError”>Please enter a valid email<\/span> <\/div> <div class=”form-group”> <label for=”password”>Password<\/label> <input type=”password” id=”password” name=”password” required minlength=”8″ oninput=”checkPasswordStrength()”> <div class=”password-strength”> <div class=”password-strength-bar” id=”strengthBar”><\/div> <\/div> <\/div> <div class=”form-group”> <label for=”confirmPassword”>Confirm Password<\/label> <input type=”password” id=”confirmPassword” name=”confirmPassword” required> <span class=”error” id=”passwordError”>Passwords do not match<\/span> <\/div> <div class=”checkbox-group”> <input type=”checkbox” id=”terms” name=”terms” required> <label for=”terms”>I agree to the <a href=”#”>Terms of Service<\/a> and <a href=”#”>Privacy Policy<\/a><\/label> <\/div> <button type=”submit” class=”submit-btn”>Create Account<\/button> <\/form> <p class=”login-link”> Already have an account? <a href=”#”>Log in<\/a> <\/p> <\/div> <script> function checkPasswordStrength() { const password = document.getElementById(‘password’).value; const strengthBar = document.getElementById(‘strengthBar’); let strength = 0; if (password.length >= 8) strength++; if (password.match(\/[a-z]\/) && password.match(\/[A-Z]\/)) strength++; if (password.match(\/[0-9]\/)) strength++; if (password.match(\/[^a-zA-Z0-9]\/)) strength++; strengthBar.className = ‘password-strength-bar’; if (strength <= 2) { strengthBar.classList.add(‘strength-weak’); } else if (strength === 3) { strengthBar.classList.add(‘strength-medium’); } else { strengthBar.classList.add(‘strength-strong’); } } function handleSubmit(e) { e.preventDefault(); const password = document.getElementById(‘password’).value; const confirmPassword = document.getElementById(‘confirmPassword’).value; const email = document.getElementById(’email’).value; const passwordError = document.getElementById(‘passwordError’); const emailError = document.getElementById(’emailError’); \/\/ Reset errors<\/em> passwordError.style.display = ‘none’; emailError.style.display = ‘none’; \/\/ Validate email<\/em> const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/; if (!emailRegex.test(email)) { emailError.style.display = ‘block’; return; } \/\/ Validate password match<\/em> if (password !== confirmPassword) { passwordError.style.display = ‘block’; return; } \/\/ If validation passes, you would send data to your server here<\/em> alert(‘Sign up successful! In a real application, this would send data to your server.’); \/\/ Example of what you might do:<\/em> \/\/ fetch(‘\/api\/signup’, {<\/em> \/\/ method: ‘POST’,<\/em> \/\/ headers: { ‘Content-Type’: ‘application\/json’ },<\/em> \/\/ body: JSON.stringify({<\/em> \/\/ fullname: document.getElementById(‘fullname’).value,<\/em> \/\/ email: email,<\/em> \/\/ password: password<\/em> \/\/ })<\/em> \/\/ });<\/em> } <\/script> <\/body> <\/html><\/p>\n","protected":false},"excerpt":{"rendered":"

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Sign Up<\/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .signup-container { background: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-10636","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/pages\/10636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/comments?post=10636"}],"version-history":[{"count":1,"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/pages\/10636\/revisions"}],"predecessor-version":[{"id":10637,"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/pages\/10636\/revisions\/10637"}],"wp:attachment":[{"href":"https:\/\/karakoramtreks.com\/es\/wp-json\/wp\/v2\/media?parent=10636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}