Offline XRPL Account Generator

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>GlacierX — Offline XRPL Account Generator</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0f14;color:#e6edf3;margin:0;padding:24px;line-height:1.5}
.container{max-width:700px;margin:0 auto;background:#111826;border:1px solid #223046;border-radius:16px;overflow:hidden}
.header{background:#1a2332;padding:20px;text-align:center;border-bottom:1px solid #223046}
.header h1{margin:0;font-size:24px;color:#58a6ff;display:flex;align-items:center;justify-content:center;gap:12px}
.header p{margin:8px 0 0 0;font-size:14px;color:#9fb1c7}
.triangle-logo{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:20px solid #34d399}
.progress-bar{height:4px;background:#223046;margin-top:16px}
.progress-fill{height:100%;background:linear-gradient(90deg,#58a6ff,#34d399);transition:width 0.3s ease}
.step{padding:32px;text-align:center;min-height:400px;display:none}
.step.active{display:block}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#1f6feb;color:white;font-size:18px;font-weight:bold;margin-bottom:20px}
.step h2{margin:0 0 16px;font-size:22px;color:#e6edf3}
.step p{margin:16px 0;color:#9fb1c7;font-size:16px;line-height:1.6}
.btn{background:#1f6feb;border:0;color:#fff;padding:14px 28px;border-radius:10px;cursor:pointer;font-size:16px;font-weight:600;margin:8px;transition:all 0.2s}
.btn:hover{background:#2563eb;transform:translateY(-1px)}
.btn.success{background:#10b981}
.btn.success:hover{background:#059669}
.btn.secondary{background:#374151;color:#d1d5db}
.btn.secondary:hover{background:#4b5563}
.wallet-output{background:#1a2332;border:1px solid #34d399;border-radius:12px;padding:20px;margin:20px 0;text-align:left}
.wallet-item{margin:16px 0}
.wallet-label{color:#34d399;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:0.5px}
.wallet-value{background:#0f1419;padding:12px;border-radius:8px;font-family:monospace;word-break:break-all;font-size:14px;color:#e6edf3;margin-top:8px;border:1px solid #223046}
.warning{background:#7c2d12;border:1px solid:#dc2626;padding:16px;border-radius:10px;margin:20px 0;color:#fecaca}
.success-box{background:#064e3b;border:1px solid:#10b981;padding:16px;border-radius:10px;margin:20px 0;color:#a7f3d0}
.info-box{background:#1e3a8a;border:1px solid:#3b82f6;padding:16px;border-radius:10px;margin:20px 0;color:#bfdbfe}
.navigation{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;background:#0f1419;border-top:1px solid #223046}
.xaman-steps{text-align:left;background:#1a2332;border:1px solid:#3b82f6;border-radius:10px;padding:20px;margin:20px 0}
.xaman-steps h3{color:#3b82f6;margin:0 0 16px;font-size:18px}
.xaman-steps ol{color:#d1d5db;padding-left:24px}
.xaman-steps li{margin:8px 0;font-size:15px;line-height:1.5}
.xaman-steps .highlight{background:#374151;padding:2px 6px;border-radius:4px;color:#fbbf24;font-weight:600}
.address-display{background:#064e3b;border:2px solid #10b981;border-radius:12px;padding:24px;margin:20px 0;text-align:center}
.address-display .address{font-family:monospace;font-size:16px;background:#0f1419;padding:16px;border-radius:8px;word-break:break-all;color:#34d399;font-weight:bold;margin:12px 0}
</style></head><body>

<div class="container">
  <div class="header">
    <h1><div class="triangle-logo"></div>Offline XRPL Account Generator</h1>
    <p>Secure, air-gapped key generation for maximum safety</p>
    <div class="progress-bar">
      <div class="progress-fill" id="progressBar" style="width:14%"></div>
    </div>
  </div>

  <div class="bg-slate-900/50 border border-slate-600 rounded-lg p-4 mb-6" style="margin: 20px;">
      <h4 class="text-slate-200 font-semibold mb-2 flex items-center gap-2">
          Technical Verification
      </h4>
      <div class="text-slate-300 text-sm space-y-2">
          <p>The offline tool uses the official XRPL JavaScript library (xrpl@2.15.0) for key generation.</p>
          <p><strong>Verify it yourself:</strong> The tool's source code is visible when you download it. Any developer can audit exactly how keys are generated.</p>
          <p><strong>Library source:</strong> <code style="background:#1a2332; padding:2px 6px; border-radius:4px; font-family:monospace; color:#68d391;">https://github.com/XRPLF/xrpl.js</code></p>
          <p><strong>Algorithm:</strong> Uses Ed25519 elliptic curve cryptography (XRPL's recommended algorithm for new accounts).</p>
          <p><strong>Security:</strong> Ed25519 offers strong security properties and is preferred over secp256k1 for XRPL accounts.</p>
      </div>
  </div>

  <div class="step active" id="step1">
    <div class="step-number">1</div>
    <h2>Safety First</h2>
    <p>This tool creates a brand new XRPL wallet completely offline for maximum security.</p>
    <div class="warning">
      <strong>CRITICAL SAFETY RULES:</strong><br><br>
      Keep this computer <strong>OFFLINE</strong> (disconnect internet)<br>
      Write everything on <strong>PAPER ONLY</strong><br>
      <strong>NEVER</strong> take photos or screenshots<br>
      <strong>NEVER</strong> type into any online service
    </div>
    <p>Ready to create your secure wallet?</p>
    <button class="btn" onclick="nextStep()">I Understand - Let's Begin</button>
  </div>

  <div class="step" id="step2">
    <div class="step-number">2</div>
    <h2>Create Your New Wallet</h2>
    <p>Click the button below to generate your unique XRPL wallet instantly.</p>
    <button class="btn" id="generateBtn" onclick="generateWallet()">Generate Wallet</button>
    <div id="walletResult"></div>
  </div>

  <div class="step" id="step3">
    <div class="step-number">3</div>
    <h2>Your Public Address</h2>
    <p>Your <strong>ADDRESS</strong> (the "r..." text) is your public wallet address. This is <em>safe to share</em> with others.</p>
    <div class="address-display" id="addressDisplay">
      <p><strong>Your XRPL Address:</strong></p>
      <div class="address" id="displayAddress">[Address will appear here]</div>
      <p>Safe to share • Use this to receive XRP and tokens</p>
    </div>
    <button class="btn secondary" onclick="saveAddress()">Save Address to File</button>
    <button class="btn success" onclick="nextStep()">Continue</button>
  </div>

  <div class="step" id="step4">
    <div class="step-number">4</div>
    <h2>Get the Xaman Wallet App</h2>
    <p>Xaman is the most popular XRPL wallet app. You'll import your new wallet into it.</p>
    <div class="info-box">
      <strong>Download Xaman:</strong><br><br>
      iPhone: Search "Xaman" in App Store<br>
      Android: Search "Xaman" in Play Store<br>
      Or visit: <strong>xaman.app</strong>
    </div>
    <p>Once you've installed Xaman, come back here for the next step.</p>
    <button class="btn success" onclick="nextStep()">I've Installed Xaman</button>
  </div>

  <div class="step" id="step5">
    <div class="step-number">5</div>
    <h2>Import Your Wallet to Xaman</h2>
    <p>Now we'll put your new wallet into the Xaman app using your secret key.</p>
    <div class="xaman-steps">
      <h3>Step-by-step in Xaman:</h3>
      <ol>
        <li>Open the <strong>Xaman</strong> app</li>
        <li>Tap <span class="highlight">Settings</span> (gear icon)</li>
        <li>Tap <span class="highlight">Accounts</span></li>
        <li>Tap <span class="highlight">Add Account</span></li>
        <li>Choose <span class="highlight">"Import existing account"</span></li>
        <li>Select <span class="highlight">"Secret Numbers (Mnemonic)"</span> or <span class="highlight">"Family Seed"</span></li>
        <li>Type in your <span class="highlight">SECRET KEY</span> (the s... text from step 2)</li>
        <li>Xaman will show you the same address we generated</li>
      </ol>
    </div>
    <button class="btn success" onclick="nextStep()">Wallet Imported Successfully</button>
  </div>

  <div class="step" id="step6">
    <div class="step-number">6</div>
    <h2>Activate Your Account</h2>
    <p>XRPL accounts need <strong>at least 1 XRP</strong> to activate. Send some XRP to your new address.</p>
    <div class="success-box">
      <strong>How to get XRP:</strong><br><br>
      Send from another wallet you own<br>
      Buy from an exchange (Coinbase, Kraken, etc.)<br>
      Ask someone to send you some<br>
      Use your address from step 3
    </div>
    <div class="address-display">
      <p><strong>Send XRP to this address:</strong></p>
      <div class="address" id="finalAddress">[Your address]</div>
    </div>
    <button class="btn success" onclick="nextStep()">I've Sent XRP</button>
  </div>

  <div class="step" id="step7">
    <div class="step-number">7</div>
    <h2>Congratulations</h2>
    <p>Your XRPL wallet is now fully set up and ready to use.</p>
    <div class="success-box">
      <strong>What you've accomplished:</strong><br><br>
      Created a secure XRPL wallet offline<br>
      Safely stored your secret key<br>
      Imported wallet into Xaman app<br>
      Activated account with XRP<br>
    </div>
    <p><strong>Next steps:</strong> You can now use Xaman to send, receive, and manage your XRP and other XRPL tokens.</p>
    <div class="warning">
      <strong>Final Security Reminder:</strong><br>
      Keep your secret key safe and NEVER share it with anyone.
    </div>
    <button class="btn success" onclick="restartWizard()">Create Another Wallet</button>
  </div>

  <div class="navigation">
    <button class="btn secondary" id="backBtn" onclick="prevStep()" style="display:none">Back</button>
    <div id="stepIndicator">Step 1 of 7</div>
    <div></div>
  </div>
</div>

<script src="./xrpl.min.js"></script>
<script>
let currentStep = 1;
let generatedWallet = null;
const totalSteps = 7;

function updateProgress() {
  const progress = (currentStep / totalSteps) * 100;
  document.getElementById('progressBar').style.width = progress + '%';
  document.getElementById('stepIndicator').textContent = `Step ${currentStep} of ${totalSteps}`;
  
  const backBtn = document.getElementById('backBtn');
  backBtn.style.display = currentStep > 1 ? 'block' : 'none';
}

function showStep(step) {
  document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
  document.getElementById('step' + step).classList.add('active');
  
  if (generatedWallet && (step === 3 || step === 6)) {
    const addr = generatedWallet.classicAddress;
    const displayEl = document.getElementById(step === 3 ? 'displayAddress' : 'finalAddress');
    if (displayEl) displayEl.textContent = addr;
  }
}

function nextStep() {
  if (currentStep < totalSteps) {
    if (currentStep === 2 && !generatedWallet) {
        alert('Please generate your wallet and confirm you have written down the key before continuing.');
        return;
    }
    currentStep++;
    showStep(currentStep);
    updateProgress();
  }
}

function prevStep() {
  if (currentStep > 1) {
    currentStep--;
    showStep(currentStep);
    updateProgress();
  }
}

function generateWallet() {
  try {
    if (!window.xrpl) {
      alert('XRPL library not loaded. Make sure this file is next to xrpl.min.js');
      return;
    }
    
    // Generate wallet using XRPL.js default (Ed25519 algorithm)
    const wallet = window.xrpl.Wallet.generate();

    if (!wallet || !wallet.seed || !wallet.classicAddress) {
        throw new Error('Generated wallet is missing required properties.');
    }
    
    generatedWallet = wallet;
    
    const resultHtml = `
      <div class="wallet-output">
        <div class="wallet-item">
          <div class="wallet-label">SECRET KEY (Write this down!)</div>
          <div class="wallet-value">${wallet.seed}</div>
        </div>
        <div class="wallet-item">
          <div class="wallet-label">YOUR ADDRESS (Safe to share)</div>
          <div class="wallet-value">${wallet.classicAddress}</div>
        </div>
        <div class="wallet-item">
          <div class="wallet-label">ALGORITHM</div>
          <div class="wallet-value">Ed25519 (XRPL recommended)</div>
        </div>
      </div>
      
      <div class="warning" style="margin-top: 32px;">
        <strong>DO THIS RIGHT NOW:</strong><br><br>
        1. Get a pen and paper.<br>
        2. Copy the <strong>SECRET KEY</strong> (s...) from above exactly.<br>
        3. Make 2-3 copies and store them in different, safe, physical locations.
      </div>
      
      <p style="margin-top: 24px;">Once you are SURE you have written it down correctly, you can continue.</p>
      <button class="btn success" onclick="nextStep()">Yes, I've Written It Down</button>
    `;
    
    document.getElementById('walletResult').innerHTML = resultHtml;
    document.getElementById('generateBtn').innerHTML = 'Regenerate';
    
  } catch (error) {
    alert('Failed to generate wallet: ' + error.message);
    console.error(error);
  }
}

function saveAddress() {
  if (!generatedWallet) {
    alert('Please generate a wallet first.');
    return;
  }
  
  const addr = generatedWallet.classicAddress;
  const text = `My XRPL Wallet Address:\n${addr}\n\nThis address is safe to share.\nUse this to receive XRP and other tokens.\n\nGenerated by GlacierX Offline Tool`;
  
  const a = document.createElement('a');
  a.download = 'my-xrpl-address.txt';
  a.href = URL.createObjectURL(new Blob([text], {type: 'text/plain'}));
  a.click();
  
  alert('Address saved to my-xrpl-address.txt');
}

function restartWizard() {
  currentStep = 1;
  generatedWallet = null;
  showStep(1);
  updateProgress();
  document.getElementById('walletResult').innerHTML = '';
  document.getElementById('generateBtn').innerHTML = 'Generate Wallet';
  document.getElementById('displayAddress').textContent = '[Address will appear here]';
  document.getElementById('finalAddress').textContent = '[Your address]';
}

updateProgress();
</script>

</body></html>