Embed

<style>
  .adw-admin-container {
  font-family: sans-serif;
  padding: 2rem;
  background-color: #f4f6f9;
  color: #333;
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
}
  .adw-admin-header {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 2rem;
    text-align: center;
  }
  .adw-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  .adw-tab-button {
    padding: 10px 20px;
    border: none;
    background-color: #e9ecef;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
  }
  .adw-tab-button.active,
  .adw-tab-button:hover {
    background-color: #007bff;
    color: white;
  }
  .adw-tab-content {
    display: none;
    background-color: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  .adw-tab-content.active {
    display: block;
  }
  .adw-section-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: #007bff;
  }
  .adw-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
  }
  .adw-table th, .adw-table td {
    border: 1px solid #ddd;
    padding: 10px;
    font-size: 0.95rem;
  }
  .adw-table th {
    background-color: #007bff;
    color: white;
  }
  .adw-button {
    background-color: #28a745;
    color: white;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
  }
  .adw-button.secondary {
    background-color: #dc3545;
  }
  .adw-modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
  }
  .adw-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    position: relative;
  }
  .adw-modal-close {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #333;
  }
  .adw-chart {
    margin-top: 2rem;
  }
</style>

<div class="adw-admin-container">
  <div class="adw-admin-header">🌍 Admin Dashboard - Africa Dream Water</div>
  <div class="adw-tabs">
    <button class="adw-tab-button active" onclick="switchTab('projects')">Projects</button>
    <button class="adw-tab-button" onclick="switchTab('donations')">Donations</button>
    <button class="adw-tab-button" onclick="switchTab('members')">Members</button>
    <button class="adw-tab-button" onclick="switchTab('analytics')">Analytics</button>
  </div>

  <div id="projects" class="adw-tab-content active">
    <div class="adw-section-title">📁 Manage Projects</div>
    <button class="adw-button" onclick="openModal('projectModal')">+ Add New Project</button>
    <table class="adw-table">
      <thead><tr><th>Name</th><th>Location</th><th>Status</th><th>Funds</th><th>Action</th></tr></thead>
      <tbody><tr><td>Borehole</td><td>Bamenda</td><td>In Progress</td><td>1.2M</td>
        <td><button class="adw-button" onclick="openModal('projectModal')">Edit</button>
        <button class="adw-button secondary">Delete</button></td></tr></tbody>
    </table>
  </div>

  <div id="donations" class="adw-tab-content">
    <div class="adw-section-title">💰 Manage Donations</div>
    <table class="adw-table">
      <thead><tr><th>Donor</th><th>Date</th><th>Amount</th><th>Method</th><th>Status</th></tr></thead>
      <tbody><tr><td>John Doe</td><td>May 20</td><td>10,000</td><td>MTN</td><td>Confirmed</td></tr></tbody>
    </table>
  </div>

  <div id="members" class="adw-tab-content">
    <div class="adw-section-title">👥 Manage Members</div>
    <button class="adw-button" onclick="openModal('memberModal')">+ Add Member</button>
    <table class="adw-table">
      <thead><tr><th>Name</th><th>Email</th><th>Status</th><th>Type</th><th>Action</th></tr></thead>
      <tbody><tr><td>Jane</td><td>jane@example.com</td><td>Active</td><td>Donor</td>
        <td><button class="adw-button" onclick="openModal('memberModal')">Edit</button>
        <button class="adw-button secondary">Remove</button></td></tr></tbody>
    </table>
  </div>

  <div id="analytics" class="adw-tab-content">
    <div class="adw-section-title">📊 Analytics</div>
    <canvas id="donationChart" class="adw-chart" height="100"></canvas>
  </div>
</div>


<div id="projectModal" class="adw-modal" onclick="closeModal(event, 'projectModal')">
  <div class="adw-modal-content">
    <span class="adw-modal-close" onclick="closeModal(null, 'projectModal')">&times;</span>
    <h3>Add/Edit Project</h3>
    <input type="text" placeholder="Project Name" style="width:100%;margin:10px 0">
    <input type="text" placeholder="Location" style="width:100%;margin:10px 0">
    <select style="width:100%;margin:10px 0">
      <option>In Progress</option><option>Completed</option>
    </select>
    <input type="number" placeholder="Funds Raised" style="width:100%;margin:10px 0">
    <button class="adw-button" style="width:100%">Save</button>
  </div>
</div>


<div id="memberModal" class="adw-modal" onclick="closeModal(event, 'memberModal')">
  <div class="adw-modal-content">
    <span class="adw-modal-close" onclick="closeModal(null, 'memberModal')">&times;</span>
    <h3>Add/Edit Member</h3>
    <input type="text" placeholder="Full Name" style="width:100%;margin:10px 0">
    <input type="email" placeholder="Email" style="width:100%;margin:10px 0">
    <select style="width:100%;margin:10px 0">
      <option>Active</option><option>Inactive</option>
    </select>
    <select style="width:100%;margin:10px 0">
      <option>Donor</option><option>Volunteer</option><option>Staff</option>
    </select>
    <button class="adw-button" style="width:100%">Save</button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function switchTab(id) {
  document.querySelectorAll(".adw-tab-button").forEach(b => b.classList.remove("active"));
  document.querySelectorAll(".adw-tab-content").forEach(c => c.classList.remove("active"));
  event.target.classList.add("active");
  document.getElementById(id).classList.add("active");
}
function openModal(id) {
  document.getElementById(id).style.display = "flex";
}
function closeModal(e, id) {
  if (!e || e.target === document.getElementById(id)) {
    document.getElementById(id).style.display = "none";
  }
}

const ctx = document.getElementById('donationChart');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Donations (FCFA)',
      data: [50000, 70000, 80000, 60000, 90000],
      backgroundColor: '#007bff'
    }]
  },
  options: {
    scales: { y: { beginAtZero: true } }
  }
});
</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