Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MOEWR Dashboard</title>
  <style>
    :root {
      --bg-light: #f0f2f5;
      --text-dark: #000;
      --card-text: #fff;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: var(--bg-light);
      color: var(--text-dark);
      transition: all 0.3s ease;
    }

    body.dark {
      --bg-light: #121212;
      --text-dark: #fff;
      --card-text: #000;
    }

    .dashboard-container {
      max-width: 1400px;
      margin: auto;
      padding: 2rem;
    }

    .dashboard-header {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 2rem;
      flex-wrap: wrap;
      gap: 10px;
    }

    .dashboard-header input,
    .dashboard-header select {
      padding: 10px 14px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 1rem;
    }

    .dashboard-header button {
      padding: 10px 16px;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      border: none;
      background-color: #007bff;
      color: white;
    }

    #clearSearch {
      background-color: #dc3545;
    }

    .dashboard-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
    }

    .dashboard-card {
      flex: 1 1 260px;
      max-width: 300px;
      min-height: 180px;
      background: #007bff;
      color: var(--card-text);
      text-align: center;
      text-decoration: none;
      padding: 1.5rem;
      border-radius: 16px;
      transition: all 0.3s ease;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
    }

    .dashboard-card:hover {
      transform: translateY(-6px) scale(1.02);
    }

    .dashboard-card i {
      font-size: 2.5rem;
      margin-bottom: 1.2rem;
      transition: transform 0.3s ease;
    }

    .dashboard-card:hover i {
      transform: scale(1.2);
    }

    .dashboard-card span {
      font-size: 1.1rem;
      font-weight: bold;
    }

    .dashboard-card .badge {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 0.75rem;
      padding: 4px 8px;
      background-color: rgba(255, 255, 255, 0.9);
      color: #333;
      border-radius: 12px;
      font-weight: 600;
    }

    .card-2 { background: #28a745; }
    .card-3 { background: #17a2b8; }
    .card-4 { background: #ffc107; color: #000; }
    .card-5 { background: #fd7e14; }
    .card-6 { background: #6f42c1; }
    .card-7 { background: #20c997; }
    .card-8 { background: #dc3545; }

    .so-content { display: none; }
    .lang-so .en-content { display: none; }
    .lang-so .so-content { display: block; }

    @media (max-width: 600px) {
      .dashboard-header {
        justify-content: center;
      }

      .dashboard-header input,
      .dashboard-header select {
        width: 100%;
      }
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head>
<body>

  <div class="dashboard-container">
    
    <div class="dashboard-header">
      <input type="text" id="dashboardSearch" placeholder="Search..." onkeyup="filterCards()" />
      <select id="categoryFilter" onchange="filterCards()">
        <option value="">All Categories</option>
        <option value="about">About</option>
        <option value="services">Services</option>
        <option value="policies">Policies</option>
        <option value="assessments">Assessments</option>
        <option value="crm">CRM</option>
        <option value="projects">Projects</option>
        <option value="partners">Partners</option>
        <option value="departments">Departments</option>
      </select>
      <button id="clearSearch" onclick="clearSearch()">Clear</button>
      <button onclick="toggleLanguage()">EN | SO</button>
      <button onclick="toggleDarkMode()">🌙</button>
    </div>

    
    <div class="dashboard-grid" id="dashboardGrid">
      <a href="https://moewr-jubalandstate.so/about-us" class="dashboard-card card-1" data-category="about">
        <i class="fas fa-info-circle"></i>
        <span class="en-content">About Us</span>
        <span class="so-content">Nagu Saabsan</span>
        <div class="badge">About</div>
      </a>

      <a href="https://moewr-jubalandstate.so/what-we-do" class="dashboard-card card-2" data-category="services">
        <i class="fas fa-tasks"></i>
        <span class="en-content">What We Do</span>
        <span class="so-content">Waxaan Qabanaa</span>
        <div class="badge">Services</div>
      </a>

      <a href="https://moewr-jubalandstate.so/acts-pollicies-regulations" class="dashboard-card card-3" data-category="policies">
        <i class="fas fa-gavel"></i>
        <span class="en-content">Policies</span>
        <span class="so-content">Siyaasado</span>
        <div class="badge">Policies</div>
      </a>

      <a href="https://moewr-jubalandstate.so/assessments-studies" class="dashboard-card card-4" data-category="assessments">
        <i class="fas fa-chart-line"></i>
        <span class="en-content">Assessments</span>
        <span class="so-content">Qiimeyn</span>
        <div class="badge">Assessments</div>
      </a>

      <a href="https://moewr-jubalandstate.so/complaint-response-mechanism" class="dashboard-card card-5" data-category="crm">
        <i class="fas fa-comments"></i>
        <span class="en-content">CRM</span>
        <span class="so-content">Cabashooyinka</span>
        <div class="badge">CRM</div>
      </a>

      <a href="https://moewr-jubalandstate.so/all-projects" class="dashboard-card card-6" data-category="projects">
        <i class="fas fa-folder-open"></i>
        <span class="en-content">Projects</span>
        <span class="so-content">Mashaariicda</span>
        <div class="badge">Projects</div>
      </a>

      <a href="https://moewr-jubalandstate.so/our-partners" class="dashboard-card card-7" data-category="partners">
        <i class="fas fa-handshake"></i>
        <span class="en-content">Partners</span>
        <span class="so-content">La-hawlgalayaasha</span>
        <div class="badge">Partners</div>
      </a>

      <a href="https://moewr-jubalandstate.so/ministry-departments-and-key-sectors" class="dashboard-card card-8" data-category="departments">
        <i class="fas fa-sitemap"></i>
        <span class="en-content">Departments</span>
        <span class="so-content">Waaxyaha</span>
        <div class="badge">Departments</div>
      </a>
    </div>
  </div>

  
  <script>
    function toggleLanguage() {
      document.body.classList.toggle('lang-so');
    }

    function toggleDarkMode() {
      document.body.classList.toggle('dark');
    }

    function clearSearch() {
      document.getElementById("dashboardSearch").value = "";
      document.getElementById("categoryFilter").value = "";
      filterCards();
    }

    function filterCards() {
      const query = document.getElementById("dashboardSearch").value.toLowerCase();
      const category = document.getElementById("categoryFilter").value;
      const cards = document.querySelectorAll(".dashboard-card");

      cards.forEach(card => {
        const enText = card.querySelector(".en-content").textContent.toLowerCase();
        const soText = card.querySelector(".so-content").textContent.toLowerCase();
        const cardCategory = card.dataset.category;

        const matchText = enText.includes(query) || soText.includes(query);
        const matchCategory = category === "" || cardCategory === category;

        card.style.display = (matchText && matchCategory) ? "flex" : "none";
      });
    }
  </script>

</body>
</html>

Recent blog posts

<figure id="figure-619dxh2eguma281k1q" class=""><img id="619dxh2eguma281k1q" src="https://cdn.durable.co/blocks/30agg85TOm18wTqrTMtDo0T3GeNOZ1TmqoGY2sFbVu3Jf5qTD7JfUPW12ZfkzKrw.jpg" alt="" title="" class="object-cover bg-gray-100 " style="aspect-ratio: 16/9; object-position: center center;" data-corners="default" data-aspect="16:9" data-caption="" data-positionx="undefined" data-positiony="undefined" data-fullwidth="false" data-mce-src="https://cdn.durable.co/blocks/30agg85TOm18wTqrTMtDo0T3GeNOZ1TmqoGY2sFbVu3Jf5qTD7JfUPW12ZfkzKrw.jpg" data-mce-style="aspect-ratio: 16/9; object-position: center center;"></figure><p>Kismaayo , Sunday ,27th April 2025 - Agaasimaha Guud ee Wasaarada Tamarta &amp; Kheyraadka Biyaha Dowlada Jubaland, Mudane Ahmed Osman Siyah, ayaa soo xiray tababar socday labo maalmood (26-27th April 2025), kaas oo loogu talagalay sare u qaadista aqoonta iyo xirfadaha shaqaalaha Wasaaradda.<br>Tababarkan oo uu daadihinaayay Agaasimaha Waaxda Tamarta, Mudane Abdisalan Haji Aden, ayaa si gaar ah diiradda loogu saaray horumarinta xirfadaha fudud (Soft Skills) iyo xoojinta habsami u socodka shaqada maalinlaha ah.<br>Agaasimaha Guud oo ka hadlay munaasabadda xiritaanka ayaa ku dhiirrigeliyay shaqaalaha inay ku dabaqaan aqoonta iyo xirfadaha ay tababarka ka kororsadeen shaqadooda maalinlaha ah.<br>Sida oo kale, Agaasimaha Waaxda Biyaha iyo Maareeye Ku-xigeenka Wakaaladda Biyaha ayaa ka qeybgalay munaasabadda, iyaga oo bogaadiyay dadaalka shaqaalaha iyo baahida loo qabo tababaro noocan oo kale ah.</p><figure id="figure-aswselgzxlma2829e1" class=""><img id="aswselgzxlma2829e1" src="https://cdn.durable.co/blocks/dDOOtzrrPFTR80GIQ5BsMfHXUOKBconOxy3OW80d0KbXol73IKJzfofDXooHn1gE.jpg" alt="" title="" class="object-cover bg-gray-100 " style="aspect-ratio: 16/9; object-position: center center;" data-corners="default" data-aspect="16:9" data-caption="" data-positionx="null" data-positiony="null" data-fullwidth="false" data-mce-src="https://cdn.durable.co/blocks/dDOOtzrrPFTR80GIQ5BsMfHXUOKBconOxy3OW80d0KbXol73IKJzfofDXooHn1gE.jpg" data-mce-style="aspect-ratio: 16/9; object-position: center center;"></figure><figure id="figure-ffwcxdpyqma2845r3"><img id="ffwcxdpyqma2845r3" src="https://cdn.durable.co/blocks/39PHdhowTFwYT4HOF3i4b1AWx9Eva38vfBYN99ElZzihu7VXpcmgcxKgkkx9JUER.jpg" alt="" title="" class="object-cover bg-gray-100" style="aspect-ratio: 16/9; object-position: center center;" data-corners="default" data-aspect="16:9" data-caption="" data-positionx="undefined" data-positiony="undefined" data-fullwidth="false" data-mce-src="https://cdn.durable.co/blocks/39PHdhowTFwYT4HOF3i4b1AWx9Eva38vfBYN99ElZzihu7VXpcmgcxKgkkx9JUER.jpg" data-mce-style="aspect-ratio: 16/9; object-position: center center;"></figure><figure id="figure-s953jpwmsima2855og"><img id="s953jpwmsima2855og" src="https://cdn.durable.co/blocks/25qWA0sqZmWPca5dx7RvEUHKNyDE7Ri01Pzl5B1wMjJMtg2HjPCVjGlgMkNApiIc.jpg" alt="" title="" class="object-cover bg-gray-100 " style="aspect-ratio: 16/9; object-position: center center;" data-corners="default" data-aspect="16:9" data-caption="" data-positionx="undefined" data-positiony="undefined" data-fullwidth="false" data-mce-src="https://cdn.durable.co/blocks/25qWA0sqZmWPca5dx7RvEUHKNyDE7Ri01Pzl5B1wMjJMtg2HjPCVjGlgMkNApiIc.jpg" data-mce-style="aspect-ratio: 16/9; object-position: center center;"></figure><p><br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br><br>&nbsp;<br>&nbsp;</p>

Tababarka  sare u qaadista aqoonta iyo xirfadaha shaqaalaha Wasaaradda.

<p><strong>Kismaayo , Febraury 9 , 2025 .</strong> Madaxwaynaha dowlada Jubaland mudane Ahmed Mohamed Islam ayaa maanta kormeer shaqo ku yimid Wasaaradda Tamarta &amp; Kheyraadka Biyaha Jubaland.<br>Wasiirka Wasaarada Tamarta &amp; Kheyraadka Biyaha Mudane Ahmed Baraki ayaa xafiiskiisa ku qaabilay madaxwaynaha ayaga oo ka wada hadlay shaqooyinka ay wasaaraddu dardar galinayso,<br>Ujeedka madaxwaynaha ayaa ahaa kormeer iyo indha-indhayn ku aadan habsami u socodka shaqada ee wasaaradda.</p><figure id="figure-genvp6mpogm7j69pwu"><iframe id="genvp6mpogm7j69pwu" src="https://www.youtube.com/embed/Z6yoN4VYtp8" class="w-full bg-gray-100 " style="aspect-ratio: 16/9" allow="autoplay; encrypted-media" allowFullScreen="" data-url="https://www.youtube.com/watch?v=Z6yoN4VYtp8" data-corners="default" data-fullWidth="false"></iframe></figure>

Booqasho Madaxweynaha Dowlada Jubaland ee Wasaarada - 9th Feb 2025

Kismaayo -22 February 2025. Daahfurka Ceelbiyood hab casri ah loo dhisay oo ay Wasaarada Tamarta & Kheyraadka Biyaha Dowlada Jubaland ka hirgalisay Deegaanka Janaa cabdalle.

Recent blog posts

Tababarka sare u qaadista aqoonta iyo xirfadaha shaqaala...

Booqasho Madaxweynaha Dowlada Jubaland ee Wasaarada - 9th...

Kismaayo -22 February 2025. Daahfurka Ceelbiyood hab casr...