

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Downlines | Monosky Network</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <style>
    body {
        background-color: #f8f9fa;
        font-family: "Segoe UI", sans-serif;
    }
    .downline-card {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        margin: 15px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .level {
        font-size: 14px;
        font-weight: bold;
        color: #555;
    }
    .count {
        font-weight: 600;
        color: #009688;
    }
    h3 {
        color: #333;
        text-align: center;
        margin-bottom: 20px;
    }
  </style>
</head>
<body>

<div class="w3-container">
    <div class="w3-card w3-padding w3-round w3-margin-top">
        <h3>My Downlines</h3>

        <!-- Dummy User Info -->
        <div class="w3-panel w3-border w3-light-grey w3-round">
            <p><b>User:</b> John Doe</p>
            <p><b>Referral Code:</b> MONO1234</p>
            <p><b>Total Downlines:</b> 8 Members</p>
        </div>

        <!-- Downline List -->
        <div class="downline-card">
            <h4>Level 1 Downlines</h4>
            <ul class="w3-ul">
                <li>Mary Johnson <span class="w3-right w3-text-teal">3 Downlines</span></li>
                <li>Peter Samuel <span class="w3-right w3-text-teal">2 Downlines</span></li>
                <li>Grace Ade <span class="w3-right w3-text-teal">0 Downlines</span></li>
            </ul>
        </div>

        <div class="downline-card">
            <h4>Level 2 Downlines</h4>
            <ul class="w3-ul">
                <li>David Mark <span class="w3-right w3-text-teal">1 Downline</span></li>
                <li>Sarah Ben <span class="w3-right w3-text-teal">0 Downlines</span></li>
            </ul>
        </div>

        <div class="downline-card">
            <h4>Level 3 Downlines</h4>
            <ul class="w3-ul">
                <li>Michael John <span class="w3-right w3-text-teal">0 Downlines</span></li>
                <li>Ella Cruz <span class="w3-right w3-text-teal">0 Downlines</span></li>
            </ul>
        </div>

        <div class="w3-center w3-margin-top">
            <button class="w3-button w3-teal w3-round">Export Report</button>
        </div>
    </div>
</div>

</body>
</html>
