Create a flip cards with answer to memorize the concepts in easily way
Checking Date & Time
Running Command
ls -la /home/daytona/workspace/ 2>/dev/null || mkdir -p /home/daytona/workspace
Running Command
mkdir -p /home/daytona/workspace/homeopathy-flashcards
Writing File
~/homeopathy-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>Homeopathy Flip Cards</title>
<style>
:root {
--green: #2e7d52;
--green-light: #43a871;
--gold: #e8a820;
--bg: #f4f7f2;
--card-bg: #ffffff;
--shadow: 0 6px 24px rgba(0,0,0,0.13);
--radius: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: var(--bg);
min-height: 100vh;
padding: 20px;
}
header {
text-align: center;
padding: 28px 16px 10px;
margin-bottom: 10px;
}
header h1 {
font-size: 2rem;
color: var(--green);
letter-spacing: 1px;
}
header p {
color: #555;
margin-top: 6px;
font-size: 0.97rem;
}
/* Category tabs */
.tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 28px;
}
.tab-btn {
padding: 7px 18px;
border: 2px solid var(--green);
background: white;
color: var(--green);
border-radius: 30px;
cursor: pointer;
font-size: 0.88rem;
font-weight: 600;
transition: all 0.2s;
}
.tab-btn:hover, .tab-btn.active {
background: var(--green);
color: white;
}
/* Progress */
.progress-bar-wrap {
max-width: 600px;
margin: 0 auto 18px;
background: #dde8da;
border-radius: 10px;
height: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: var(--green-light);
border-radius: 10px;
transition: width 0.4s;
}
.progress-label {
text-align: center;
font-size: 0.82rem;
color: #666;
margin-bottom: 18px;
}
/* Card grid */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 26px;
max-width: 1100px;
margin: 0 auto;
}
/* Flip card */
.flip-card {
perspective: 1200px;
height: 210px;
cursor: pointer;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(.4,2,.6,1);
}
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 22px 20px;
text-align: center;
}
.flip-card-front {
background: var(--green);
color: white;
}
.flip-card-back {
background: var(--card-bg);
transform: rotateY(180deg);
color: #222;
}
.card-category {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
background: rgba(255,255,255,0.2);
padding: 3px 10px;
border-radius: 20px;
margin-bottom: 12px;
color: #e8f5e0;
}
.flip-card-front .question {
font-size: 1.08rem;
font-weight: 700;
line-height: 1.45;
}
.flip-card-front .hint {
font-size: 0.78rem;
color: #c8eac0;
margin-top: 10px;
}
.flip-card-back .answer-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--green);
margin-bottom: 10px;
}
.flip-card-back .answer {
font-size: 0.93rem;
line-height: 1.6;
color: #333;
}
.flip-card-back .answer strong {
color: var(--green);
}
/* Flip icon */
.flip-icon {
position: absolute;
bottom: 12px;
right: 14px;
font-size: 1.1rem;
opacity: 0.55;
}
/* Learned badge */
.learned-btn {
position: absolute;
top: 10px;
right: 12px;
background: none;
border: none;
font-size: 1.3rem;
cursor: pointer;
z-index: 10;
opacity: 0.45;
transition: opacity 0.2s, transform 0.2s;
}
.learned-btn.learned { opacity: 1; transform: scale(1.25); }
/* Controls */
.controls {
display: flex;
justify-content: center;
gap: 12px;
margin: 30px 0 10px;
flex-wrap: wrap;
}
.ctrl-btn {
padding: 9px 22px;
border-radius: 30px;
border: none;
background: var(--green);
color: white;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.2s;
}
.ctrl-btn:hover { background: var(--green-light); }
.ctrl-btn.secondary {
background: white;
color: var(--green);
border: 2px solid var(--green);
}
.ctrl-btn.secondary:hover { background: #eaf4ee; }
/* Stats */
.stats {
text-align: center;
font-size: 0.85rem;
color: #777;
margin-bottom: 30px;
}
.stats span { color: var(--green); font-weight: 700; }
/* Hidden */
.hidden { display: none; }
@media (max-width: 500px) {
header h1 { font-size: 1.4rem; }
.flip-card { height: 200px; }
}
</style>
</head>
<body>
<header>
<h1>🌿 Homeopathy Flash Cards</h1>
<p>Click any card to reveal the answer · Mark ⭐ when learned</p>
</header>
<div class="tabs" id="tabs"></div>
<div class="progress-bar-wrap">
<div class="progress-bar" id="progressBar" style="width:0%"></div>
</div>
<div class="progress-label" id="progressLabel">0 of 0 learned</div>
<div class="cards-grid" id="cardsGrid"></div>
<div class="controls">
<button class="ctrl-btn secondary" onclick="flipAll()">↩ Flip All Back</button>
<button class="ctrl-btn secondary" onclick="resetLearned()">🔄 Reset Learned</button>
<button class="ctrl-btn" onclick="shuffleCards()">🔀 Shuffle</button>
</div>
<div class="stats" id="statsLine"></div>
<script>
const cards = [
// ── ORIGIN ──────────────────────────────────────────────────────────
{
category: "Origin",
question: "Who founded Homeopathy and in which year?",
answer: "<strong>Samuel Hahnemann</strong> — a German Physician, founded Homeopathy in <strong>1796</strong>."
},
{
category: "Origin",
question: "What does the word 'Homeopathy' literally mean?",
answer: "<strong>Homoios</strong> = like / similar | <strong>Pathos</strong> = feeling / suffering. Together: 'similar suffering'."
},
{
category: "Origin",
question: "What are the two core claims of Homeopathy?",
answer: "1. <strong>Like cures like</strong> — a substance causing symptoms in a healthy person cures those symptoms in a sick person.<br>2. <strong>Dilution increases potency.</strong>"
},
{
category: "Origin",
question: "What is Hahnemann's foundational doctrine?",
answer: "<strong>Similia Similibus Curentur</strong> — 'Let likes be cured by likes.' A medicine that produces symptoms in a healthy person cures the same symptoms in a diseased person."
},
// ── PRINCIPLES LIST ──────────────────────────────────────────────────
{
category: "Principles",
question: "List all 9 Principles of Homeopathy.",
answer: "1. Law of Similia<br>2. Law of Simplex<br>3. Law of Minimum<br>4. Drug Proving<br>5. Drug Dynamization / Potentization<br>6. Vital Force<br>7. Acute & Chronic Diseases<br>8. Individualization<br>9. Direction of Cure"
},
// ── LAW OF SIMILIA ───────────────────────────────────────────────────
{
category: "Law of Similia",
question: "What is the Law of Similia?",
answer: "The therapeutic law: <em>Similia Similibus Curentur</em> — 'Let likes be cured by likes.' A medicine that produces disease symptoms in a healthy person will cure those same symptoms in a diseased person."
},
{
category: "Law of Similia",
question: "What is the 'Simillimum'?",
answer: "The remedy whose pathogenesis is <strong>most similar</strong> to the symptoms of the diseased individual. It is selected and administered with certainty to cure."
},
// ── LAW OF SIMPLEX ───────────────────────────────────────────────────
{
category: "Law of Simplex",
question: "What does the Law of Simplex state?",
answer: "<strong>Simple and single drugs</strong> should be prescribed at a time. Medicines are proved on healthy humans singly, without admixture of any other substance."
},
// ── LAW OF MINIMUM ───────────────────────────────────────────────────
{
category: "Law of Minimum",
question: "What does the Law of Minimum state?",
answer: "Medicines are required only to <strong>arouse a reaction</strong> in the body. The <strong>minutest quantity</strong> of medicine is used — large doses cause side effects and organic damage."
},
{
category: "Law of Minimum",
question: "What happens if homeopathic medicines are given in large doses?",
answer: "They cause <strong>physiological action</strong> producing <strong>unwanted side effects and organic damage</strong>. Minimum quantity ensures curative action without aggravation."
},
// ── DRUG PROVING ─────────────────────────────────────────────────────
{
category: "Drug Proving",
question: "What is Drug Proving?",
answer: "The process of proving a drug's curative power by testing it on <strong>healthy human beings singly</strong>. The drug's ability to produce disease symptoms = its curative power (<strong>pathogenesis</strong>)."
},
{
category: "Drug Proving",
question: "How is the curative power of a homeopathic drug ascertained?",
answer: "By its <strong>pathogenesis</strong> — proved singly on healthy human beings. This serves as the <strong>only true record</strong> of the drug's curative properties."
},
// ── DRUG DYNAMIZATION ────────────────────────────────────────────────
{
category: "Drug Dynamization",
question: "What is Drug Dynamization / Potentization?",
answer: "The process of liberating the drug's <strong>dynamic curative power</strong> which lies dormant in it. Disease is a dynamic disturbance of life force, so medicine must act dynamically."
},
{
category: "Drug Dynamization",
question: "What are the two methods of Dynamization?",
answer: "<strong>Trituration</strong> — for insoluble substances.<br><strong>Succession</strong> — for soluble substances."
},
// ── VITAL FORCE ──────────────────────────────────────────────────────
{
category: "Vital Force",
question: "What is the Vital Force in Homeopathy?",
answer: "An invisible force governing the body. Disease = <strong>disharmonious flow</strong> of vital force → abnormal sensations & functions. Cure = restoring the <strong>disordered vital force</strong> to normal."
},
{
category: "Vital Force",
question: "What are the characteristics of Vital Force?",
answer: "<strong>Spiritual · Autocratic · Automatic · Dynamic · Unintelligent · Instinctive</strong>"
},
{
category: "Vital Force",
question: "How are Disease and Health related to Vital Force?",
answer: "They are two different <strong>quantitative states</strong> of the vital force of a living being. Cure is bringing the disordered vital force back to the healthy state."
},
// ── ACUTE & CHRONIC DISEASES ─────────────────────────────────────────
{
category: "Diseases",
question: "How does Homeopathy classify Acute and Chronic diseases?",
answer: "Classified depending on their <strong>onset, nature of progress, and termination</strong> of diseases."
},
// ── INDIVIDUALIZATION ────────────────────────────────────────────────
{
category: "Individualization",
question: "What is the principle of Individualization?",
answer: "<strong>No two individuals are alike</strong>. The same disease presents a unique individual picture in each patient. Medicines cannot be prescribed by disease name alone — each case must be <strong>individualized</strong>."
},
// ── DIRECTION OF CURE ────────────────────────────────────────────────
{
category: "Direction of Cure",
question: "What is Hering's Law (Direction of Cure)?",
answer: "Dr. Hering: <em>'Cure takes place within outward, from above to downward, and symptoms disappear in the reverse of their appearance.'</em><br>If direction is reversed → it is <strong>suppression</strong>, not cure."
},
// ── DIAGNOSIS & TREATMENT ────────────────────────────────────────────
{
category: "Diagnosis & Treatment",
question: "How is diagnosis done in Homeopathy?",
answer: "• Collection of detailed <strong>case history & medical history</strong><br>• Investigation of <strong>symptoms, location, sensation</strong>, etc.<br>• Build-up of symptoms in the patient."
},
{
category: "Diagnosis & Treatment",
question: "What forms are Homeopathic drugs used in?",
answer: "<strong>Mother tincture, small pills, and powders.</strong>"
},
{
category: "Diagnosis & Treatment",
question: "What are the three processes in preparation of Homeopathic doses?",
answer: "1. <strong>Succession</strong><br>2. <strong>Serial dilution</strong><br>3. <strong>Trituration</strong>"
},
{
category: "Diagnosis & Treatment",
question: "What is Potentiation and what are its three scales?",
answer: "Potentiation is a <strong>physical process</strong> denoted by three scales:<br>1. <strong>Decimal</strong><br>2. <strong>Centesimal</strong><br>3. <strong>Millesimal</strong>"
},
{
category: "Diagnosis & Treatment",
question: "What is a Mother Tincture?",
answer: "A <strong>concentrated herbal extract</strong>, often used in Homeopathy as the initial raw material to produce potentized remedies."
},
// ── SOURCES ──────────────────────────────────────────────────────────
{
category: "Sources",
question: "What are the 5 sources of Homeopathic medicines?",
answer: "1. <strong>Plants</strong> — various plants, fungi<br>2. <strong>Animals</strong> — secretions, saliva, etc.<br>3. <strong>Minerals & Chemicals</strong> — toxic metals, inorganic salts<br>4. <strong>Serum</strong> — protoplasm of animals, hormones<br>5. <strong>Vaccines</strong> — bacterial and viral products"
},
// ── PHARMACOGNOSY ────────────────────────────────────────────────────
{
category: "Pharmacognosy",
question: "What is the Role of Pharmacognosy in Homeopathy?",
answer: "• <strong>Authentication & Standardization</strong> of herbal raw material<br>• Authentication & Standardization of finished products<br>• Establishing <strong>safety, efficacy, quality</strong> of formulations<br>• Increasing <strong>consumer confidence</strong> in Homeopathy"
}
];
// ─── State ────────────────────────────────────────────────────────────────────
let currentCategory = "All";
let learned = JSON.parse(localStorage.getItem("hcl_learned") || "{}");
let order = cards.map((_, i) => i);
// ─── Categories ───────────────────────────────────────────────────────────────
const categories = ["All", ...new Set(cards.map(c => c.category))];
function buildTabs() {
const tabs = document.getElementById("tabs");
tabs.innerHTML = "";
categories.forEach(cat => {
const btn = document.createElement("button");
btn.className = "tab-btn" + (cat === currentCategory ? " active" : "");
btn.textContent = cat;
btn.onclick = () => { currentCategory = cat; buildTabs(); renderCards(); };
tabs.appendChild(btn);
});
}
// ─── Render ───────────────────────────────────────────────────────────────────
function filteredOrder() {
if (currentCategory === "All") return order;
return order.filter(i => cards[i].category === currentCategory);
}
function renderCards() {
const grid = document.getElementById("cardsGrid");
grid.innerHTML = "";
const fo = filteredOrder();
fo.forEach(i => {
const card = cards[i];
const isLearned = !!learned[i];
const el = document.createElement("div");
el.className = "flip-card";
el.dataset.idx = i;
el.innerHTML = `
<div class="flip-card-inner">
<div class="flip-card-front">
<span class="card-category">${card.category}</span>
<div class="question">${card.question}</div>
<div class="hint">tap to reveal →</div>
<span class="flip-icon">🔄</span>
</div>
<div class="flip-card-back">
<button class="learned-btn ${isLearned ? 'learned' : ''}" title="Mark as learned" onclick="toggleLearned(event, ${i})">⭐</button>
<div class="answer-label">Answer</div>
<div class="answer">${card.answer}</div>
<span class="flip-icon">🔄</span>
</div>
</div>`;
el.addEventListener("click", function(e) {
if (e.target.classList.contains("learned-btn")) return;
this.classList.toggle("flipped");
});
grid.appendChild(el);
});
updateProgress();
}
// ─── Learned ─────────────────────────────────────────────────────────────────
function toggleLearned(e, idx) {
e.stopPropagation();
if (learned[idx]) {
delete learned[idx];
} else {
learned[idx] = true;
}
localStorage.setItem("hcl_learned", JSON.stringify(learned));
const btn = document.querySelector(`.flip-card[data-idx="${idx}"] .learned-btn`);
if (btn) btn.classList.toggle("learned", !!learned[idx]);
updateProgress();
}
function resetLearned() {
learned = {};
localStorage.setItem("hcl_learned", "{}");
renderCards();
}
// ─── Progress ────────────────────────────────────────────────────────────────
function updateProgress() {
const fo = filteredOrder();
const total = fo.length;
const done = fo.filter(i => learned[i]).length;
const pct = total ? Math.round((done / total) * 100) : 0;
document.getElementById("progressBar").style.width = pct + "%";
document.getElementById("progressLabel").textContent = `${done} of ${total} learned (${pct}%)`;
document.getElementById("statsLine").textContent = `Total cards: ${cards.length} | Showing: ${total} | Learned: ${Object.keys(learned).length}`;
}
// ─── Controls ────────────────────────────────────────────────────────────────
function flipAll() {
document.querySelectorAll(".flip-card.flipped").forEach(c => c.classList.remove("flipped"));
}
function shuffleCards() {
for (let i = order.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[order[i], order[j]] = [order[j], order[i]];
}
renderCards();
}
// ─── Init ─────────────────────────────────────────────────────────────────────
buildTabs();
renderCards();
</script>
</body>
</html>
Your Homeopathy flip cards are ready! 🌿
index
HTML File · HTML
What's included
26 flip cards covering every concept from your notes, organized into 10 categories:
| Category | Cards |
|---|---|
| Origin | 4 |
| Principles (overview) | 1 |
| Law of Similia | 2 |
| Law of Simplex | 1 |
| Law of Minimum | 2 |
| Drug Proving | 2 |
| Drug Dynamization | 2 |
| Vital Force | 3 |
| Diseases / Individualization / Direction of Cure | 3 |
| Diagnosis & Treatment | 5 |
| Sources & Pharmacognosy | 2 |
Features
- Click any card → flips to reveal the answer
- ⭐ Star button → marks a card as learned (saved in browser)
- Progress bar → tracks how many you've learned
- Category tabs → filter by topic to study one section at a time
- 🔀 Shuffle → randomizes card order for spaced repetition
- ↩ Flip All Back → resets all cards to question side
This is a shared conversation. Sign in to Orris to start your own chat.