Embed

<style>
  .adw-member-dashboard {
    background: #f8f9fa;
    padding: 2rem 5vw;
    width: 100%;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #333;
  }

  .adw-dashboard-header {
    font-size: 1.7rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 2rem;
    text-align: center;
  }

  .adw-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .adw-profile-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .adw-profile-card h4 {
    margin-bottom: 0.8rem;
    color: #007bff;
    font-size: 1rem;
  }

  .adw-profile-card p {
    margin: 0.3rem 0;
    font-size: 0.95rem;
  }

  .adw-donation-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1rem;
  }

  .adw-donation-table th,
  .adw-donation-table td {
    padding: 12px;
    text-align: left;
    font-size: 0.9rem;
  }

  .adw-donation-table th {
    background-color: #007bff;
    color: #fff;
  }

  .adw-button-group {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .adw-button {
    padding: 12px 20px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
  }

  .adw-button.secondary {
    background: #6c757d;
  }

  .adw-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }

  .adw-modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 2rem;
    border: 1px solid #888;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }

  .adw-modal-content h3 {
    margin-top: 0;
    color: #007bff;
    margin-bottom: 1rem;
  }

  .adw-modal-content input,
  .adw-modal-content select {
    width: 100%;
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .adw-modal-buttons {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .adw-modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
  }

  .adw-submit {
    background-color: #28a745;
    color: white;
  }

  .adw-close {
    background-color: #dc3545;
    color: white;
  }
</style>

<div class="adw-member-dashboard">
  <div class="adw-dashboard-header">🌍 Member Profile - Africa Dream Water</div>

  <div class="adw-profile-grid">
    <div class="adw-profile-card">
      <h4>Personal Information</h4>
      <p><strong>Name:</strong> John Doe</p>
      <p><strong>Email:</strong> john@example.com</p>
      <p><strong>Phone:</strong> +237 670000000</p>
      <p><strong>Country:</strong> Cameroon</p>
      <p><strong>Address:</strong> Douala, Cameroon</p>
    </div>

    <div class="adw-profile-card">
      <h4>Membership Information</h4>
      <p><strong>Type:</strong> Simple Member</p>
      <p><strong>Status:</strong> Active</p>
      <p><strong>Joined:</strong> Jan 10, 2024</p>
    </div>

    <div class="adw-profile-card">
      <h4>Account Information</h4>
      <p><strong>Monthly Donation:</strong> 5,000 FCFA</p>
      <p><strong>Total Donated:</strong> 65,000 FCFA</p>
    </div>
  </div>

  <div>
    <h4 style="margin-bottom: 0.5rem; color: #007bff;">Donation History</h4>
    <table class="adw-donation-table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Amount (FCFA)</th>
          <th>Method</th>
        </tr>
      </thead>
      <tbody id="donationHistory">
        <tr>
          <td>May 2025</td>
          <td>5,000</td>
          <td>MTN MoMo</td>
        </tr>
        <tr>
          <td>April 2025</td>
          <td>10,000</td>
          <td>Orange Money</td>
        </tr>
        <tr>
          <td>March 2025</td>
          <td>5,000</td>
          <td>Bank Card</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="adw-button-group">
    <button class="adw-button">Edit Profile</button>
    <button class="adw-button secondary" onclick="openDonationModal()">Make a Donation</button>
    <button class="adw-button secondary" onclick="openPaymentModal()">Manage Payment Methods</button>
  </div>
</div>


<div id="donationModal" class="adw-modal">
  <div class="adw-modal-content">
    <h3>Make a Donation</h3>
    <input type="number" placeholder="Enter amount in FCFA" id="donationAmount" />
    <select id="paymentMethodSelect">
      <option value="">Select payment method</option>
    </select>
    <div class="adw-modal-buttons">
      <button class="adw-submit" onclick="submitDonation()">Submit</button>
      <button class="adw-close" onclick="closeDonationModal()">Close</button>
    </div>
  </div>
</div>


<div id="paymentModal" class="adw-modal">
  <div class="adw-modal-content">
    <h3>Payment Methods</h3>
    <div id="paymentMethodsList"></div>
    <select id="newMethodType">
      <option value="">Select method</option>
      <option value="MTN MoMo">MTN MoMo</option>
      <option value="Orange Money">Orange Money</option>
      <option value="Bank Card">Bank Card</option>
    </select>
    <input type="text" id="newCredential" placeholder="Enter number or card info" />
    <div class="adw-modal-buttons">
      <button class="adw-submit" onclick="addPaymentMethod()">Add</button>
      <button class="adw-close" onclick="closePaymentModal()">Close</button>
    </div>
  </div>
</div>

<script>
  let paymentMethods = ["MTN MoMo - 670000000", "Orange Money - 690000000"];
  let currentEditIndex = null;

  function openDonationModal() {
    const select = document.getElementById("paymentMethodSelect");
    select.innerHTML = '<option value="">Select payment method</option>';
    paymentMethods.forEach(method => {
      const option = document.createElement("option");
      option.value = method;
      option.textContent = method;
      select.appendChild(option);
    });
    document.getElementById("donationModal").style.display = "block";
  }

  function closeDonationModal() {
    document.getElementById("donationModal").style.display = "none";
  }

  function submitDonation() {
    const amount = document.getElementById("donationAmount").value;
    const method = document.getElementById("paymentMethodSelect").value;
    if (!amount || !method) {
      alert("Please fill in all fields.");
      return;
    }
    const table = document.getElementById("donationHistory");
    const row = table.insertRow(0);
    row.innerHTML = `<td>${new Date().toLocaleDateString()}</td><td>${amount}</td><td>${method}</td>`;
    closeDonationModal();
  }

  function openPaymentModal() {
    renderPaymentMethods();
    document.getElementById("paymentModal").style.display = "block";
  }

  function closePaymentModal() {
    document.getElementById("paymentModal").style.display = "none";
  }

  function renderPaymentMethods() {
    const list = document.getElementById("paymentMethodsList");
    list.innerHTML = "";
    paymentMethods.forEach((method, index) => {
      const row = document.createElement("div");
      row.style.display = "flex";
      row.style.justifyContent = "space-between";
      row.style.alignItems = "center";
      row.style.marginBottom = "0.5rem";

      const label = document.createElement("span");
      label.textContent = method;

      const btnGroup = document.createElement("div");
      btnGroup.style.display = "flex";
      btnGroup.style.gap = "0.4rem";

      const editBtn = document.createElement("button");
      editBtn.textContent = "Edit";
      editBtn.style.background = "#ffc107";
      editBtn.style.color = "#fff";
      editBtn.style.border = "none";
      editBtn.style.borderRadius = "4px";
      editBtn.style.padding = "4px 10px";
      editBtn.style.cursor = "pointer";
      editBtn.onclick = () => openEditMethodModal(index);

      const deleteBtn = document.createElement("button");
      deleteBtn.textContent = "Delete";
      deleteBtn.style.background = "#dc3545";
      deleteBtn.style.color = "#fff";
      deleteBtn.style.border = "none";
      deleteBtn.style.borderRadius = "4px";
      deleteBtn.style.padding = "4px 10px";
      deleteBtn.style.cursor = "pointer";
      deleteBtn.onclick = () => {
        paymentMethods.splice(index, 1);
        renderPaymentMethods();
      };

      btnGroup.appendChild(editBtn);
      btnGroup.appendChild(deleteBtn);

      row.appendChild(label);
      row.appendChild(btnGroup);
      list.appendChild(row);
    });
  }
  function addPaymentMethod() {
    const type = document.getElementById("newMethodType").value;
    const cred = document.getElementById("newCredential").value.trim();
    if (!type || !cred) {
      alert("Please fill in all fields.");
      return;
    }
    const full = `${type} - ${cred}`;
    paymentMethods.push(full);
    document.getElementById("newMethodType").value = "";
    document.getElementById("newCredential").value = "";
    renderPaymentMethods();
  }
</script>

Africa Dream Water

Providing clean drinking water to communities in Africa. People donante money and we mount projects to provide drinking water to communities in Africa. include dashborad, donation page, impact page, payment page, notification page, contact page

Date	Amount (FCFA)	Method
May 2025	5,000	MTN MoMo
April 2025	10,000	Orange Money
March 2025	5,000	Bank Card

Project Name	Status	Budget	Location	Comment
Well Construction - Bakou	Ongoing	1,200,000 FCFA	West Region	Started in April, progressing well
Solar Pump Installation	In Design	800,000 FCFA	Far North	Awaiting feasibility approval
Water Tank Upgrade	Completed	500,000 FCFA	Yaoundé	Completed in March 2025

Personal Information

Membership Information

Account Information

Donation History

Make a Donation

Payment Methods

Community Projects

Add New Project