Orris
attachment

Create flips cards with answer to memorize the concepts easily

Checking Date & Time
Running Command

ls -la /home/daytona/workspace/ 2>/dev/null || echo "workspace empty or missing"

Writing File

~/unani-flashcards/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Unani System – Flip Cards</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      min-height: 100vh;
      padding: 30px 20px;
      color: #fff;
    }

    h1 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 6px;
      color: #e2b96f;
      letter-spacing: 1px;
    }

    .subtitle {
      text-align: center;
      color: #aac4d0;
      font-size: 0.95rem;
      margin-bottom: 30px;
    }

    /* Category filter tabs */
    .tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 30px;
    }

    .tab-btn {
      padding: 8px 18px;
      border: 2px solid #e2b96f;
      background: transparent;
      color: #e2b96f;
      border-radius: 20px;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 600;
      transition: all 0.25s;
    }

    .tab-btn:hover, .tab-btn.active {
      background: #e2b96f;
      color: #1a1a2e;
    }

    /* Progress */
    .progress-bar-wrap {
      max-width: 700px;
      margin: 0 auto 24px;
    }

    .progress-label {
      font-size: 0.82rem;
      color: #aac4d0;
      margin-bottom: 5px;
      text-align: right;
    }

    .progress-bar {
      height: 6px;
      background: rgba(255,255,255,0.12);
      border-radius: 10px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #e2b96f, #f0d080);
      border-radius: 10px;
      transition: width 0.4s ease;
    }

    /* Card grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 28px;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* Flip card */
    .card-wrap {
      perspective: 1200px;
      height: 220px;
      cursor: pointer;
    }

    .card-wrap.hidden { display: none; }

    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
      border-radius: 16px;
    }

    .card-wrap.flipped .card {
      transform: rotateY(180deg);
    }

    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 22px 20px;
      text-align: center;
    }

    /* Front face */
    .front {
      background: linear-gradient(145deg, #1e3a5f, #14284a);
      border: 1.5px solid rgba(226, 185, 111, 0.35);
      box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    }

    .category-tag {
      position: absolute;
      top: 12px;
      left: 14px;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      padding: 3px 9px;
      border-radius: 10px;
      opacity: 0.85;
    }

    .flip-hint {
      position: absolute;
      bottom: 10px;
      right: 14px;
      font-size: 0.68rem;
      color: rgba(255,255,255,0.35);
    }

    .front .q-num {
      font-size: 0.72rem;
      color: rgba(226,185,111,0.6);
      margin-bottom: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .front .question {
      font-size: 1.05rem;
      font-weight: 600;
      color: #e8f0ff;
      line-height: 1.5;
    }

    /* Back face */
    .back {
      background: linear-gradient(145deg, #2a1a0e, #3d2a10);
      border: 1.5px solid rgba(226, 185, 111, 0.5);
      box-shadow: 0 8px 30px rgba(0,0,0,0.4);
      transform: rotateY(180deg);
      justify-content: flex-start;
      overflow-y: auto;
    }

    .back .answer-label {
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #e2b96f;
      margin-bottom: 10px;
      font-weight: 700;
    }

    .back .answer {
      font-size: 0.93rem;
      color: #f0e0c0;
      line-height: 1.65;
    }

    .back .answer ul {
      text-align: left;
      padding-left: 16px;
    }

    .back .answer ul li {
      margin-bottom: 5px;
    }

    .back .answer strong {
      color: #e2b96f;
    }

    /* Category colours */
    .cat-origin    { background: #1a6b3a; color: #a8ffc8; }
    .cat-principles{ background: #5a2d82; color: #dbb4ff; }
    .cat-humours   { background: #8b1a1a; color: #ffb3b3; }
    .cat-diagnosis { background: #1a4a7a; color: #b3d4ff; }
    .cat-dosage    { background: #7a5a00; color: #ffe9a0; }
    .cat-pharma    { background: #1a5a5a; color: #a0ffee; }

    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 14px;
      margin: 36px auto 10px;
      flex-wrap: wrap;
      max-width: 700px;
    }

    .ctrl-btn {
      padding: 10px 24px;
      border-radius: 24px;
      border: none;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      letter-spacing: 0.5px;
    }

    .ctrl-btn.primary {
      background: #e2b96f;
      color: #1a1a2e;
    }

    .ctrl-btn.secondary {
      background: rgba(255,255,255,0.1);
      color: #e8f0ff;
      border: 1.5px solid rgba(255,255,255,0.2);
    }

    .ctrl-btn:hover { transform: translateY(-2px); opacity: 0.9; }

    /* Score tracker */
    .score-section {
      text-align: center;
      margin-top: 10px;
      color: #aac4d0;
      font-size: 0.85rem;
    }

    @media (max-width: 500px) {
      h1 { font-size: 1.4rem; }
      .grid { grid-template-columns: 1fr; }
      .card-wrap { height: 240px; }
    }
  </style>
</head>
<body>

<h1>🌿 Unani System of Medicine</h1>
<p class="subtitle">Click any card to reveal the answer &nbsp;|&nbsp; Tap again to flip back</p>

<!-- Filter tabs -->
<div class="tabs">
  <button class="tab-btn active" onclick="filterCards('all')">All Cards</button>
  <button class="tab-btn" onclick="filterCards('origin')">Origin</button>
  <button class="tab-btn" onclick="filterCards('principles')">Principles</button>
  <button class="tab-btn" onclick="filterCards('humours')">Humours</button>
  <button class="tab-btn" onclick="filterCards('diagnosis')">Diagnosis</button>
  <button class="tab-btn" onclick="filterCards('dosage')">Dosage Forms</button>
  <button class="tab-btn" onclick="filterCards('pharma')">Pharmacognosy</button>
</div>

<!-- Progress -->
<div class="progress-bar-wrap">
  <div class="progress-label" id="progressLabel">0 / 0 cards reviewed</div>
  <div class="progress-bar"><div class="progress-fill" id="progressFill" style="width:0%"></div></div>
</div>

<!-- Card Grid -->
<div class="grid" id="cardGrid"></div>

<!-- Controls -->
<div class="controls">
  <button class="ctrl-btn primary" onclick="flipAll()">Reveal All</button>
  <button class="ctrl-btn secondary" onclick="closeAll()">Hide All</button>
  <button class="ctrl-btn secondary" onclick="shuffleCards()">🔀 Shuffle</button>
  <button class="ctrl-btn secondary" onclick="resetProgress()">↺ Reset</button>
</div>
<div class="score-section" id="scoreSection"></div>

<script>
const cards = [
  // ── ORIGIN ───────────────────────────────────────────────────────────────
  {
    cat: "origin",
    catLabel: "Origin",
    catClass: "cat-origin",
    q: "Where did the Unani system of medicine originate?",
    a: "Unani originated in <strong>Greece</strong> and was later developed in the <strong>Arab world</strong>."
  },
  {
    cat: "origin",
    catLabel: "Origin",
    catClass: "cat-origin",
    q: "On whose teachings is the Unani system based?",
    a: "It is based on the teachings of <strong>Hippocrates and Galen</strong>."
  },
  {
    cat: "origin",
    catLabel: "Origin",
    catClass: "cat-origin",
    q: "What are the alternative names for the Unani system?",
    a: "<ul><li><strong>Unanitibb</strong></li><li><strong>Arabian medicine</strong></li><li><strong>Islamic medicine</strong></li></ul>"
  },
  {
    cat: "origin",
    catLabel: "Origin",
    catClass: "cat-origin",
    q: "In which countries was Unani a contemporary system of traditional medicine?",
    a: "<strong>Egypt, Syria, Iraq, Persia, India, China</strong> and other <strong>Middle East</strong> countries."
  },
  {
    cat: "origin",
    catLabel: "Origin",
    catClass: "cat-origin",
    q: "When and by whom was Unani introduced in India?",
    a: "Around <strong>10th century AD</strong> by <strong>Arabs</strong>."
  },

  // ── PRINCIPLES ──────────────────────────────────────────────────────────
  {
    cat: "principles",
    catLabel: "Principles",
    catClass: "cat-principles",
    q: "How many proximal qualities make up the body in Unani?",
    a: "The body is made up of <strong>Three proximal qualities</strong>."
  },
  {
    cat: "principles",
    catLabel: "Principles",
    catClass: "cat-principles",
    q: "What are the four basic elements of the human body in Unani?",
    a: "<strong>Earth, Air, Water, and Fire</strong> — each having a different temperament (Cold, Hot, Wet, Dry)."
  },
  {
    cat: "principles",
    catLabel: "Principles",
    catClass: "cat-principles",
    q: "What temperaments arise after mixing and interaction of the four elements?",
    a: "<ul><li><strong>Hot Wet</strong></li><li><strong>Hot Dry</strong></li><li><strong>Cold Wet</strong></li><li><strong>Cold Dry</strong></li></ul>"
  },
  {
    cat: "principles",
    catLabel: "Principles",
    catClass: "cat-principles",
    q: "What are the four 'humours' of the human body in Unani?",
    a: "<strong>Blood, Phlegm, Yellow bile, Black bile</strong> — they nourish the body through simple and compound organs."
  },
  {
    cat: "principles",
    catLabel: "Principles",
    catClass: "cat-principles",
    q: "What are the four qualities/states of the human body in Unani?",
    a: "<strong>Cold, Hot, Wet, Dry</strong> — corresponding to the four basic elements."
  },

  // ── HUMOURS ─────────────────────────────────────────────────────────────
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "What is the temperament of Blood?",
    a: "<strong>Hot and Wet</strong>"
  },
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "What is the temperament of Yellow Bile?",
    a: "<strong>Hot and Dry</strong>"
  },
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "What is the temperament of Phlegm?",
    a: "<strong>Cold and Hot</strong> (Cold and Wet in some references; the diagram shows Phlegm on the Wet side)"
  },
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "What is the temperament of Black Bile?",
    a: "<strong>Cold and Dry</strong>"
  },
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "Which element corresponds to Cold & Day quality in Unani?",
    a: "<strong>Air</strong> → Quality: Cold, Day &nbsp;|&nbsp; Humour: <strong>Phlegm (Sptum)</strong>"
  },
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "Match: Earth → Quality → Humour",
    a: "Earth → <strong>Cold, Day</strong> → <strong>Blood</strong>"
  },
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "Match: Water → Quality → Humour",
    a: "Water → <strong>Wet</strong> → <strong>Yellow Bile</strong>"
  },
  {
    cat: "humours",
    catLabel: "Humours",
    catClass: "cat-humours",
    q: "Match: Fire → Quality → Humour",
    a: "Fire → <strong>Hot</strong> → <strong>Black Bile</strong>"
  },

  // ── DIAGNOSIS ──────────────────────────────────────────────────────────
  {
    cat: "diagnosis",
    catLabel: "Diagnosis",
    catClass: "cat-diagnosis",
    q: "How are diseases identified in the Unani system?",
    a: "Through <strong>pulse reading</strong> and <strong>physical examination</strong> of <strong>stools and urine</strong>."
  },
  {
    cat: "diagnosis",
    catLabel: "Diagnosis",
    catClass: "cat-diagnosis",
    q: "What tools help in spot diagnosis in Unani?",
    a: "<strong>Simple, modern gadgets</strong> for systematic patient examination."
  },
  {
    cat: "diagnosis",
    catLabel: "Diagnosis",
    catClass: "cat-diagnosis",
    q: "Name diseases for which Unani has shown remarkable curative results.",
    a: "<ul><li>Arthritis</li><li>Leucoderma</li><li>Jaundice</li><li>Liver disorder</li><li>Bronchial asthma</li></ul>"
  },

  // ── DOSAGE FORMS ────────────────────────────────────────────────────────
  {
    cat: "dosage",
    catLabel: "Dosage Forms",
    catClass: "cat-dosage",
    q: "What is Safoof and who discovered it?",
    a: "<strong>Safoof</strong> is a powder form. <strong>Aristotle</strong> is credited with its discovery. Used for <strong>external and internal</strong> purposes."
  },
  {
    cat: "dosage",
    catLabel: "Dosage Forms",
    catClass: "cat-dosage",
    q: "What is a Majoon?",
    a: "A <strong>semi-solid oral dosage form</strong> prepared by mixing powdered medicinal herbs in a base of <strong>honey or sugar syrup (qiwam)</strong>."
  },
  {
    cat: "dosage",
    catLabel: "Dosage Forms",
    catClass: "cat-dosage",
    q: "How is Khameera different from Majoon?",
    a: "<strong>Khameera</strong> is a type of Majoon obtained by mixing decoction of drugs in a base made of <strong>purified honey sugar or jaggery</strong>."
  },
  {
    cat: "dosage",
    catLabel: "Dosage Forms",
    catClass: "cat-dosage",
    q: "What is Jawarish?",
    a: "A type of Majoon prepared by mixing <strong>coarse powder of drug</strong> to a base of <strong>purified honey</strong>."
  },
  {
    cat: "dosage",
    catLabel: "Dosage Forms",
    catClass: "cat-dosage",
    q: "What is Marham?",
    a: "A <strong>semisolid</strong> dosage form prepared by <strong>fine powder</strong>."
  },
  {
    cat: "dosage",
    catLabel: "Dosage Forms",
    catClass: "cat-dosage",
    q: "What is Sharbat?",
    a: "A <strong>liquor (sharbat)</strong> made from decoction of <strong>fruit juice</strong> by addition of sugar to yield <strong>qiwam</strong>."
  },
  {
    cat: "dosage",
    catLabel: "Dosage Forms",
    catClass: "cat-dosage",
    q: "List all six Unani dosage forms.",
    a: "<ul><li>Safoof (powder)</li><li>Majoon (semi-solid)</li><li>Khameera (type of Majoon)</li><li>Jawarish (type of Majoon)</li><li>Marham (semisolid)</li><li>Sharbat (liquid)</li></ul>"
  },

  // ── PHARMACOGNOSY ───────────────────────────────────────────────────────
  {
    cat: "pharma",
    catLabel: "Pharmacognosy",
    catClass: "cat-pharma",
    q: "What is the concern about Unani medicines from a pharmacognosy perspective?",
    a: "Some medicines traditionally used by Unani practitioners are <strong>known to be poisonous</strong>."
  },
  {
    cat: "pharma",
    catLabel: "Pharmacognosy",
    catClass: "cat-pharma",
    q: "What role can pharmacognosy play in Unani medicine evaluation?",
    a: "Pharmacognosy can be a tool in <strong>evaluation of such drugs</strong> and <strong>restrict their applications</strong>."
  },
  {
    cat: "pharma",
    catLabel: "Pharmacognosy",
    catClass: "cat-pharma",
    q: "What parameters are important in evaluating crude Unani drugs?",
    a: "<ul><li><strong>Marker Component</strong></li><li><strong>Chromatographic Profile</strong></li><li><strong>Safety studies</strong></li><li><strong>Efficacy studies</strong></li></ul>"
  }
];

let reviewed = new Set();
let currentFilter = "all";

function getVisible() {
  return cards.filter(c => currentFilter === "all" || c.cat === currentFilter);
}

function updateProgress() {
  const visible = getVisible();
  const total = visible.length;
  const done = visible.filter((_, i) => {
    const el = document.querySelector(`.card-wrap[data-index="${cards.indexOf(_)}"]`);
    return el && el.classList.contains("flipped");
  }).length;
  const pct = total ? (done / total) * 100 : 0;
  document.getElementById("progressLabel").textContent = `${done} / ${total} cards reviewed`;
  document.getElementById("progressFill").style.width = pct + "%";
}

function renderCards(list) {
  const grid = document.getElementById("cardGrid");
  grid.innerHTML = "";

  cards.forEach((c, i) => {
    const isVisible = list.includes(c);
    const wrap = document.createElement("div");
    wrap.className = "card-wrap" + (isVisible ? "" : " hidden");
    wrap.dataset.index = i;

    wrap.innerHTML = `
      <div class="card">
        <div class="face front">
          <span class="category-tag ${c.catClass}">${c.catLabel}</span>
          <div class="q-num">Q${(list.indexOf(c) + 1) || (i + 1)}</div>
          <div class="question">${c.q}</div>
          <span class="flip-hint">tap to reveal ▶</span>
        </div>
        <div class="face back">
          <div class="answer-label">Answer</div>
          <div class="answer">${c.a}</div>
        </div>
      </div>`;

    wrap.addEventListener("click", () => {
      wrap.classList.toggle("flipped");
      updateProgress();
    });

    grid.appendChild(wrap);
  });

  updateProgress();
}

function filterCards(cat) {
  currentFilter = cat;
  document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
  event.target.classList.add("active");
  const visible = getVisible();
  renderCards(visible);
}

function flipAll() {
  document.querySelectorAll(".card-wrap:not(.hidden)").forEach(w => w.classList.add("flipped"));
  updateProgress();
}

function closeAll() {
  document.querySelectorAll(".card-wrap").forEach(w => w.classList.remove("flipped"));
  updateProgress();
}

function shuffleCards() {
  const grid = document.getElementById("cardGrid");
  const items = [...grid.children];
  items.sort(() => Math.random() - 0.5);
  items.forEach(el => grid.appendChild(el));
}

function resetProgress() {
  closeAll();
  document.getElementById("scoreSection").textContent = "";
}

// Initial render
renderCards(cards);
</script>
</body>
</html>
Your flip cards are ready! 🎉

index

HTML File · HTML

Here's what's included — 31 flip cards across 6 colour-coded categories:
CategoryCardsColour
🟢 Origin5Green
🟣 Principles5Purple
🔴 Humours8Red
🔵 Diagnosis3Blue
🟡 Dosage Forms7Gold
🩵 Pharmacognosy3Teal
Features:
  • Click any card to flip and reveal the answer; click again to hide it
  • Filter tabs at the top to study one category at a time
  • Progress bar that tracks how many cards you've reviewed
  • Reveal All / Hide All buttons for quick review
  • Shuffle button to randomise card order for active recall practice
This is a shared conversation. Sign in to Orris to start your own chat.