Embed

<style>
  .adw-dashboard {
    font-family: 'Segoe UI', sans-serif;
    padding: 2rem;
    background: #f0f4f8;
    color: #333;
    width: 100%;
    box-sizing: border-box;
  }

  .adw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }

  .adw-header h1 {
    font-size: 2rem;
    margin: 0;
  }

  .adw-header .language-switch {
    background: #004080;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
  }

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

  .adw-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .adw-card h2 {
    font-size: 2rem;
    margin: 0.5rem 0;
    color: #004080;
  }

  .adw-card p {
    font-size: 1rem;
    margin: 0;
  }

  .adw-nav {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }

  .adw-nav button {
    background: #007acc;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s;
  }

  .adw-nav button:hover {
    background: #005f99;
  }

  @media (max-width: 500px) {
    .adw-header {
      flex-direction: column;
      align-items: flex-start;
    }
  }
</style>

<div class="adw-dashboard">
  <div class="adw-header">
    <h1>🌍 President Dashboard - Africa Dream Water</h1>
    <button class="language-switch" onclick="alert('Language toggling coming soon!')">Français / English</button>
  </div>

  <div class="adw-stats">
    <div class="adw-card">
      <h2>36</h2>
      <p>Countries Active</p>
    </div>
    <div class="adw-card">
      <h2>27</h2>
      <p>National Presidents</p>
    </div>
    <div class="adw-card">
      <h2>$1.2M</h2>
      <p>Total Contributions</p>
    </div>
    <div class="adw-card">
      <h2>120</h2>
      <p>Global Projects</p>
    </div>
  </div>

  <div class="adw-nav">
  <button onclick="scrollToSection('global-strategy')">🧭 Global Strategy</button>
  <button onclick="scrollToSection('national-leadership')">👤 National Leadership</button>
  <button onclick="scrollToSection('bureau-section')">💼 Bureau International</button>
  <button onclick="scrollToSection('global-communication')">💬 Global Communication</button>
  <button onclick="scrollToSection('events-summits')">📅 Events & Summits</button>
  <button onclick="scrollToSection('reports-archives')">📑 Reports & Archives</button>
  <button onclick="scrollToSection('diplomacy-partners')">🤝 Diplomacy & Partners</button>
  <button onclick="scrollToSection('finance-overview')">💰 Finance Overview</button>
  <button onclick="scrollToSection('system-settings')">⚙️ System Settings</button>
</div>
</div>

<style>
  .strategy-section {
    padding: 2rem;
    background: #fff;
    width: 100%;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
  }

  .strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .strategy-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: #004080;
  }

  .strategy-controls button {
    background-color: #007acc;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .strategy-controls button:hover {
    background-color: #005f99;
  }

  .strategy-list {
    margin-top: 1rem;
    border-top: 1px solid #ccc;
  }

  .strategy-item {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
  }

  .strategy-item h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
  }

  .strategy-item p {
    margin: 0;
    color: #555;
  }
</style>


<section id="global-strategy" class="strategy-section">
  <div class="strategy-header">
    <h2>🧭 Global Strategy Dashboard</h2>
    <div class="strategy-controls">
      <button onclick="addStrategy()">➕ Add Strategy</button>
    </div>
  </div>

  <div id="strategyList" class="strategy-list">
    
  </div>
</section>

<script>
const strategies = [
  { title: "Expand Clean Water Projects in Sahel", description: "Target Mali, Niger, and Chad with new solar-powered wells." },
  { title: "Forge Partnerships with Global NGOs", description: "Collaborate with UN agencies and water-focused NGOs for resource pooling." },
  { title: "Develop Youth Training Modules", description: "Empower youth leaders to carry out awareness campaigns on hygiene and water conservation." }
];

function renderStrategies() {
  const list = document.getElementById('strategyList');
  list.innerHTML = '';
  strategies.forEach((strategy, index) => {
    list.innerHTML += `
      <div class="strategy-item">
        <h3>${strategy.title}</h3>
        <p>${strategy.description}</p>
      </div>
    `;
  });
}

function addStrategy() {
  const title = prompt("Enter Strategy Title:");
  const description = prompt("Enter Strategy Description:");
  if (title && description) {
    strategies.push({ title, description });
    renderStrategies();
  }
}

  function scrollToSection(id) {
    const section = document.getElementById(id);
    if (section) section.scrollIntoView({ behavior: "smooth" });
  }

// Initial render
renderStrategies();
</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

🌍 President Dashboard - Africa Dream Water

36

27

$1.2M

120

💼 Bureau International

🧭 Global Strategy Dashboard

🌍 National Leadership Overview

💰 Finance Overview

📋 Reports & Archives

📅 Events & Summits

📡 Global Communication

🤝 Diplomacy & Partners

🌍 Member Registry

📁 Projects Overview