{
  "id": "flashcards",
  "name": "Flashcards",
  "category": "research",
  "tags": ["study", "flashcards", "learning"],
  "description": "Simple flashcard study tool with flip animation.",
  "triggers": ["flashcards", "study cards", "quiz me", "memorize"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function FlashcardsWidget() {\n  const cards = [\n    { q: 'What is the capital of France?', a: 'Paris' },\n    { q: 'What does HTTP stand for?', a: 'HyperText Transfer Protocol' },\n    { q: 'What is 2^10?', a: '1024' }\n  ];\n  const [index, setIndex] = React.useState(0);\n  const [flipped, setFlipped] = React.useState(false);\n\n  function nextCard() {\n    setFlipped(false);\n    setIndex((index + 1) % cards.length);\n  }\n\n  function prevCard() {\n    setFlipped(false);\n    setIndex((index - 1 + cards.length) % cards.length);\n  }\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#0f172a', color: '#e2e8f0', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n      <h3 style={{ margin: 0, marginBottom: 12 }}>Flashcards</h3>\n      <div\n        onClick={() => setFlipped(!flipped)}\n        style={{\n          width: '100%',\n          flex: 1,\n          background: '#1e293b',\n          borderRadius: 12,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          textAlign: 'center',\n          padding: 20,\n          cursor: 'pointer',\n          transition: 'transform 0.3s ease',\n          transform: flipped ? 'scale(1.02)' : 'scale(1)',\n          userSelect: 'none'\n        }}\n      >\n        <div style={{ fontSize: 18, fontWeight: 600 }}>\n          {flipped ? cards[index].a : cards[index].q}\n        </div>\n      </div>\n      <div style={{ marginTop: 12, fontSize: 12, color: '#94a3b8' }}>\n        Card {index + 1} of {cards.length} — tap card to flip\n      </div>\n      <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>\n        <button onClick={prevCard} style={{ padding: '8px 16px', borderRadius: 6, border: 'none', background: '#334155', color: '#fff', cursor: 'pointer', fontFamily: 'system-ui, sans-serif' }}>Prev</button>\n        <button onClick={nextCard} style={{ padding: '8px 16px', borderRadius: 6, border: 'none', background: '#3b82f6', color: '#fff', cursor: 'pointer', fontFamily: 'system-ui, sans-serif' }}>Next</button>\n      </div>\n    </div>\n  );\n}\nrender(<FlashcardsWidget/>);",
  "placeholders": []
}