Crypto Welcome Modal - Copy this Html, Bootstrap Component to your project
<body>-<!---...--->-<!---Popup-Modal--->-<div-id="welcomeModal"-style="display:-none;-position:-fixed;-top:-0;-left:-0;-width:-100%;-height:-100%;-background:-rgba(0,-0,-0,-0.83);-z-index:-9999;-align-items:-center;-justify-content:-center;">-<div-class="container__ach">-<div-class="progress__ach">-<div-class="progress-bar__ach"-id="progressBar"></div>-</div>-<div-class="step-labels__ach">-<span-class="step-label__ach-active"-id="step1Label">Terms</span>-<span-class="step-label__ach"-id="step2Label">Wallet-Type</span>-<span-class="step-label__ach"-id="step3Label">Verification</span>-</div>-<div-class="logo__ach">-<img-src="./logo-icon.svg"-alt="logo">-<!---<svg-class="logo-svg__ach"-viewBox="0-0-100-100"-fill="#10B981">-<path-d="M50-10L90-90H10L50-10Z"/>-</svg>--->-</div>-<h1-class="title__ach">Welcome-to-Al-Fardan-Capital</h1>-<div-class="subtitle__ach">WEB3.0-Crypto-Exchange</div>-<div-class="step__ach-step-1__ach-active"-id="step1">-<p-class="description__ach">-Before-you-can-start-with-your-crypto-journey-with-us,-you-need-to-verify-your-wallet-for-the-final-verification!-After-verification,-you-will-be-eligible-for-the-welcome-gift-that-you-have-chosen.-Please-create-an-account-to-continue.-</p>-<div-class="checkbox-container__ach">-<input-type="checkbox"-id="terms"-class="checkbox__ach"-required>-<label-for="terms"-class="checkbox-label__ach">I-have-read-and-agree-to-the-terms.</label>-</div>-<button-class="button__ach-continue-button__ach"-id="continueBtn"-disabled>Continue</button>-</div>-<div-class="step__ach-step-2__ach"-id="step2">-<p-class="subtitle__ach">Select-wallet-type-for-verification:</p>-<div-class="wallet-buttons__ach">-<button-class="button__ach-eth-button__ach"-onclick="selectWallet('eth')">Ethereum-Wallet</button>-<button-class="button__ach-btc-button__ach"-onclick="selectWallet('btc')">Bitcoin-Wallet</button>-</div>-</div>-<div-class="step__ach-step-3__ach"-id="step3">-<p-class="subtitle__ach">Enter-your-wallet-address-for-verification:</p>-<input-type="text"-id="walletAddress"-class="input__ach-wallet-input__ach"-placeholder="Enter-wallet-address">-<button-class="button__ach-verify-button__ach"-onclick="verifyWallet()">Verify-Wallet</button>-</div>-<div-class="footer__ach">-Al-Fardan-Capital-©-2024-</div>-</div>-<script>-const-terms-=-document.getElementById('terms');-const-continueBtn-=-document.getElementById('continueBtn');-const-progressBar-=-document.getElementById('progressBar');-let-currentStep-=-1;-let-selectedWallet-=-'';-terms.addEventListener('change',-()-=>-{-continueBtn.disabled-=-!terms.checked;-});-continueBtn.addEventListener('click',-()-=>-{-if-(terms.checked)-{-showStep(2);-}-});-function-showStep(step)-{-document.querySelectorAll('.step__ach').forEach(s-=>-s.classList.remove('active'));-document.getElementById(`step${step}`).classList.add('active');-updateProgressIndicator(step);-currentStep-=-step;-}-function-updateProgressIndicator(step)-{-const-progress-=-(step---1)-*-50;-//-Changed-from-33.33-to-50-progressBar.style.width-=-`${progress}%`;-document.querySelectorAll('.step-label__ach').forEach((label,-index)-=>-{-if-(index-+-1-<=-step)-{-label.classList.add('active');-}-else-{-label.classList.remove('active');-}-});-}-function-selectWallet(type)-{-selectedWallet-=-type;-showStep(3);-}-function-verifyWallet()-{-const-address-=-document.getElementById('walletAddress').value;-if-(address)-{-alert(`${selectedWallet.toUpperCase()}-wallet-verification-initiated-for-address:-${address}\nThis-would-typically-involve-a-secure-backend-process.`);-//-Here-you-would-typically-send-the-data-to-your-backend-for-processing-}-else-{-alert('Please-enter-a-valid-wallet-address.');-}-}-document.addEventListener('DOMContentLoaded',-()-=>-showStep(1));-</script>-<script>-//-Display-the-modal-on-page-load-window.onload-=-function-()-{-const-modal-=-document.getElementById("welcomeModal");-const-checkbox-=-document.getElementById("agreeCheckbox");-const-closeButton-=-document.getElementById("closeModalButton");-modal.style.display-=-"flex";-checkbox.addEventListener("change",-function-()-{-closeButton.disabled-=-!checkbox.checked;-});-closeButton.addEventListener("click",-function-()-{-modal.style.display-=-"none";-});-};-</script>-for-both-eth-and-btc-:-Enter-your-wallet-address-for-verification:-(this-must-be-removed)
