Embed

<style>
  .ms-profile-card {
    max-width: 440px;
    margin: 40px auto;
    padding: 32px;
    background-color: #161C28;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    font-family: inherit;
    color: #ffffff;
    box-sizing: border-box;
  }

  .ms-profile-title {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
  }

  .ms-account-details {
    margin-bottom: 28px;
  }

  .ms-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af;
    margin-bottom: 8px;
  }

  .ms-email-display {
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 15px;
    color: #ffffff;
    word-break: break-all;
    min-height: 20px;
  }

  .ms-account-actions, .ms-modal-actions {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .ms-btn-primary {
    padding: 12px 20px;
    background-color: #651368;
    border: 1px solid #651368;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .ms-btn-primary:hover {
    opacity: 0.9;
  }

  .ms-btn-danger-outline {
    padding: 12px 20px;
    background-color: transparent;
    border: 1px solid #ef4444;
    border-radius: 8px;
    color: #f87171;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .ms-btn-danger-outline:hover {
    background-color: rgba(239, 68, 68, 0.1);
  }

  .ms-btn-danger {
    padding: 12px 20px;
    background-color: #dc2626;
    border: 1px solid #dc2626;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .ms-btn-danger:hover {
    background-color: #b91c1c;
  }

  /* Modal Overlay */
  .ms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
  }

  .ms-modal-card {
    margin: 0;
    width: 90%;
    max-width: 400px;
  }

  .ms-modal-text {
    font-size: 14px;
    color: #d1d5db;
    margin-bottom: 24px;
    line-height: 1.5;
  }
</style>




<div data-ms-content="members" class="ms-profile-card">
  <h2 class="ms-profile-title">My Profile</h2>
  
  <div class="ms-account-details">
    <label class="ms-form-label">Email Address</label>
    
    <div class="ms-email-display" data-ms-member="email"></div>
  </div>

  <div class="ms-account-actions">
    
    <button data-ms-action="logout" class="ms-btn-primary">Log Out</button>

    
    <button id="ms-open-delete-modal" type="button" class="ms-btn-danger-outline">Delete Account</button>
  </div>
</div>


<div id="ms-delete-modal" class="ms-modal-overlay" style="display: none;">
  <div class="ms-profile-card ms-modal-card">
    <h3 class="ms-profile-title">Delete Account?</h3>
    <p class="ms-modal-text">Are you sure you want to permanently delete your account? This action cannot be undone.</p>
    
    <div class="ms-modal-actions">
      
      <button data-ms-action="delete-member" class="ms-btn-danger">Yes, Delete Account</button>
      <button id="ms-close-delete-modal" type="button" class="ms-btn-primary">Cancel</button>
    </div>
  </div>
</div>


<script>
  (function() {
    function setupModal() {
      const openBtn = document.getElementById("ms-open-delete-modal");
      const closeBtn = document.getElementById("ms-close-delete-modal");
      const modal = document.getElementById("ms-delete-modal");

      if (openBtn && closeBtn && modal) {
        openBtn.addEventListener("click", function() {
          modal.style.display = "flex";
        });

        closeBtn.addEventListener("click", function() {
          modal.style.display = "none";
        });

        modal.addEventListener("click", function(e) {
          if (e.target === modal) {
            modal.style.display = "none";
          }
        });
      }
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", setupModal);
    } else {
      setupModal();
    }
  })();
</script>

ZeroToClient

ZeroToClient is a community-driven platform that helps aspiring and experienced digital entrepreneurs learn, collaborate, and grow their businesses. Members gain access to mentors, live classes, workshops, and educational resources while networking with professionals across web development, marketing, advertising, design, and other digital services. Beyond learning, the platform connects members with client opportunities, encourages collaboration on real projects, and helps them build profitable digital bus