opencodeiiita · Hac144 · Jan 24, 2026 · Jan 24, 2026
diff --git a/contributors/Hac144/client/Demo.jsx b/contributors/Hac144/client/Demo.jsx
@@ -0,0 +1,11 @@
+import TrialCard from "./TrialCard";
+
+export default function Demo() {
+  const demoSub = {
+    name: "Netflix",
+    isTrial: true,
+    trialEndsAt: "2026-01-26"
+  };
+
+  return <TrialCard subscription={demoSub} />;
+}
diff --git a/contributors/Hac144/client/TrialCard.jsx b/contributors/Hac144/client/TrialCard.jsx
@@ -0,0 +1,39 @@
+export default function TrialCard({ subscription }) {
+  const today = new Date();
+  const end = new Date(subscription.trialEndsAt);
+  const daysLeft = Math.ceil((end - today) / (1000 * 60 * 60 * 24));
+
+  const endingSoon = daysLeft <= 3;
+
+  return (
+    <div style={{
+      border: "1px solid #ddd",
+      padding: "12px",
+      borderRadius: "10px",
+      maxWidth: "300px"
+    }}>
+
+      {subscription.isTrial && (
+        <span style={{
+          background: endingSoon ? "#ff4d4f" : "#52c41a",
+          color: "#fff",
+          padding: "4px 8px",
+          borderRadius: "6px",
+          fontSize: "12px"
+        }}>
+          FREE TRIAL
+        </span>
+      )}
+
+      <h3>{subscription.name}</h3>
+
+      {subscription.isTrial && (
+        <p>
+          {endingSoon
+            ? `Trial ending in ${daysLeft} days`
+            : `Trial ends in ${daysLeft} days`}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/contributors/Hac144/client/index.html b/contributors/Hac144/client/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Free Trial Highlighting</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background: #eef1f6;
+      padding: 40px;
+    }
+
+    .card {
+      max-width: 520px;
+      background: #ffffff;
+      padding: 30px;
+      border-radius: 18px;
+      box-shadow: 0 10px 24px rgba(0,0,0,0.12);
+      margin: auto;
+    }
+
+    .title {
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 14px;
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 8px 18px;
+      font-size: 15px;
+      border-radius: 20px;
+      background-color: #4caf50;
+      color: #fff;
+      margin-bottom: 18px;
+    }
+
+    .badge.warning {
+      background-color: #ff3b30;
+    }
+
+    .trial-text {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
+      margin-top: 12px;
+    }
+
+    .sub-text {
+      font-size: 15px;
+      color: #666;
+      margin-top: 6px;
+    }
+
+    @media (max-width: 600px) {
+      body {
+        padding: 20px;
+      }
+
+      .card {
+        padding: 22px;
+      }
+
+      .title {
+        font-size: 24px;
+      }
+
+      .trial-text {
+        font-size: 16px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="card">
+    <div class="title">Netflix Subscription</div>
+
+    <span id="trialBadge" class="badge">
+      FREE TRIAL
+    </span>
+
+    <div id="trialInfo" class="trial-text"></div>
+    <div class="sub-text">
+      Cancel anytime before the trial ends to avoid charges.
+    </div>
+  </div>
+
+  <script>
+    // Trial data (dynamic, not hardcoded text)
+    const isTrial = true;
+    const trialEndDate = new Date();
+    trialEndDate.setDate(trialEndDate.getDate() + 2); // ends in 2 days
+
+    const today = new Date();
+    const diff = trialEndDate - today;
+    const daysLeft = Math.ceil(diff / (1000 * 60 * 60 * 24));
+
+    const badge = document.getElementById("trialBadge");
+    const info = document.getElementById("trialInfo");
+
+    if (isTrial) {
+      if (daysLeft <= 3 && daysLeft >= 0) {
+        badge.classList.add("warning");
+        badge.innerText = "TRIAL ENDING SOON";
+      }
+
+      info.innerText = `Trial ends in ${daysLeft} days`;
+    }
+  </script>
+
+</body>
+</html>
diff --git a/contributors/Hac144/client/ui.html b/contributors/Hac144/client/ui.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Subscriptions - Filters & Sorting</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background: #f0f2f5;
+      padding: 30px;
+    }
+    h1 { text-align: center; margin-bottom: 20px; }
+    .filters {
+      display: flex;
+      gap: 15px;
+      justify-content: center;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+    select {
+      padding: 8px 12px;
+      font-size: 14px;
+      border-radius: 6px;
+      border: 1px solid #ccc;
+    }
+    .subscription-list {
+      max-width: 600px;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .card {
+      background: #fff;
+      padding: 16px;
+      border-radius: 12px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .card span { font-weight: bold; }
+    .no-results { text-align: center; font-size: 16px; color: #888; margin-top: 20px; }
+    @media (max-width: 600px) {
+      .card { flex-direction: column; align-items: flex-start; }
+    }
+  </style>
+</head>
+<body>
+
+<h1>My Subscriptions</h1>
+
+<div class="filters">
+  <select id="filterCategory">
+    <option value="">All Categories</option>
+    <option value="Video">Video</option>
+    <option value="Music">Music</option>
+    <option value="Gaming">Gaming</option>
+  </select>
+
+  <select id="filterStatus">
+    <option value="">All Status</option>
+    <option value="Active">Active</option>
+    <option value="Cancelled">Cancelled</option>
+    <option value="Trial">Trial</option>
+  </select>
+
+  <select id="sortBy">
+    <option value="">Sort By</option>
+    <option value="renewalDate">Renewal Date</option>
+    <option value="amount">Amount</option>
+  </select>
+</div>
+
+<div class="subscription-list" id="subscriptionList"></div>
+
+<script>
+const subscriptions = [
+  { name: "Netflix", category: "Video", status: "Active", renewal: "2026-02-01", amount: 500 },
+  { name: "Spotify", category: "Music", status: "Trial", renewal: "2026-01-28", amount: 300 },
+  { name: "YouTube Premium", category: "Video", status: "Cancelled", renewal: "2025-12-15", amount: 200 },
+  { name: "Xbox Game Pass", category: "Gaming", status: "Active", renewal: "2026-02-10", amount: 400 }
+];
+
+function renderList(list) {
+  const container = document.getElementById("subscriptionList");
+  container.innerHTML = "";
+  if(list.length === 0){
+    container.innerHTML = "<div class='no-results'>No subscriptions found.</div>";
+    return;
+  }
+  list.forEach(sub => {
+    container.innerHTML += `
+      <div class="card">
+        <div>
+          <div><span>${sub.name}</span></div>
+          <div>${sub.category} | ${sub.status}</div>
+        </div>
+        <div>
+          ₹${sub.amount} <br> ${sub.renewal}
+        </div>
+      </div>`;
+  });
+}
+
+function applyFilters() {
+  let filtered = [...subscriptions];
+  const cat = document.getElementById("filterCategory").value;
+  const stat = document.getElementById("filterStatus").value;
+  const sort = document.getElementById("sortBy").value;
+
+  if(cat) filtered = filtered.filter(sub => sub.category === cat);
+  if(stat) filtered = filtered.filter(sub => sub.status === stat);
+
+  if(sort === "renewalDate") filtered.sort((a,b) => new Date(a.renewal) - new Date(b.renewal));
+  if(sort === "amount") filtered.sort((a,b) => a.amount - b.amount);
+
+  renderList(filtered);
+}
+
+document.getElementById("filterCategory").addEventListener("change", applyFilters);
+document.getElementById("filterStatus").addEventListener("change", applyFilters);
+document.getElementById("sortBy").addEventListener("change", applyFilters);
+
+
+renderList(subscriptions);
+</script>
+
+</body>
+</html>