Spaces:
Running
Running
File size: 19,425 Bytes
e225a52 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 |
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flashcards de Bioeletrogênese Cardíaca</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.flashcard {
perspective: 1000px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flashcard.flipped {
transform: rotateY(180deg);
}
.flashcard-face {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.flashcard-back {
transform: rotateY(180deg);
}
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl font-bold text-center text-blue-800 mb-2">Bioeletrogênese Cardíaca</h1>
<p class="text-center text-gray-600 mb-12">Flashcards para Médicos Residentes</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Flashcard 1 -->
<div class="flashcard relative w-full h-96 cursor-pointer" onclick="this.classList.toggle('flipped')">
<div class="flashcard-face bg-white rounded-xl p-6 card-shadow card-hover">
<div class="flex items-center justify-center mb-4">
<i class="fas fa-heartbeat text-red-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900 text-center">O que é automaticidade cardíaca?</h2>
</div>
<div class="flex justify-center mb-4">
<i class="fas fa-question-circle text-blue-600 text-5xl opacity-30"></i>
</div>
<p class="text-gray-500 text-center">Clique para ver a resposta</p>
</div>
<div class="flashcard-face flashcard-back bg-white rounded-xl p-6 card-shadow">
<div class="flex items-center mb-4">
<i class="fas fa-heartbeat text-red-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900">Automaticidade Cardíaca</h2>
</div>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Capacidade intrínseca do coração de gerar impulsos elétricos sem estímulos externos</span>
</li>
<li class="flex items-start">
<i class="fas fa-map-marker-alt text-blue-500 mt-1 mr-2"></i>
<span>Principalmente no nódulo sinoatrial (SA)</span>
</li>
<li class="flex items-start">
<i class="fas fa-tachometer-alt text-purple-500 mt-1 mr-2"></i>
<span>Frequência de 60-100 bpm em repouso</span>
</li>
<li class="flex items-start">
<i class="fas fa-wave-square text-orange-500 mt-1 mr-2"></i>
<span>Devido à despolarização diastólica espontânea</span>
</li>
</ul>
<div class="absolute bottom-4 right-4 text-gray-400">
<i class="fas fa-undo"></i> Clique para voltar
</div>
</div>
</div>
<!-- Flashcard 2 -->
<div class="flashcard relative w-full h-96 cursor-pointer" onclick="this.classList.toggle('flipped')">
<div class="flashcard-face bg-white rounded-xl p-6 card-shadow card-hover">
<div class="flex items-center justify-center mb-4">
<i class="fas fa-bolt text-yellow-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900 text-center">Quais são as fases do potencial de ação ventricular?</h2>
</div>
<div class="flex justify-center mb-4">
<i class="fas fa-question-circle text-blue-600 text-5xl opacity-30"></i>
</div>
<p class="text-gray-500 text-center">Clique para ver a resposta</p>
</div>
<div class="flashcard-face flashcard-back bg-white rounded-xl p-6 card-shadow">
<div class="flex items-center mb-4">
<i class="fas fa-bolt text-yellow-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900">Fases do Potencial de Ação</h2>
</div>
<ul class="space-y-2">
<li class="flex items-start">
<span class="font-bold text-red-500 mr-2">Fase 0:</span>
<span>Despolarização rápida (canais de Na+)</span>
</li>
<li class="flex items-start">
<span class="font-bold text-orange-500 mr-2">Fase 1:</span>
<span>Repolarização inicial (K+ transitório)</span>
</li>
<li class="flex items-start">
<span class="font-bold text-yellow-500 mr-2">Fase 2:</span>
<span>Platô (equilíbrio Ca2+ e K+)</span>
</li>
<li class="flex items-start">
<span class="font-bold text-green-500 mr-2">Fase 3:</span>
<span>Repolarização final (K+)</span>
</li>
<li class="flex items-start">
<span class="font-bold text-blue-500 mr-2">Fase 4:</span>
<span>Potencial de repouso (Na+/K+ ATPase)</span>
</li>
</ul>
<div class="absolute bottom-4 right-4 text-gray-400">
<i class="fas fa-undo"></i> Clique para voltar
</div>
</div>
</div>
<!-- Flashcard 3 -->
<div class="flashcard relative w-full h-96 cursor-pointer" onclick="this.classList.toggle('flipped')">
<div class="flashcard-face bg-white rounded-xl p-6 card-shadow card-hover">
<div class="flex items-center justify-center mb-4">
<i class="fas fa-road text-blue-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900 text-center">Como é o sistema de condução cardíaco?</h2>
</div>
<div class="flex justify-center mb-4">
<i class="fas fa-question-circle text-blue-600 text-5xl opacity-30"></i>
</div>
<p class="text-gray-500 text-center">Clique para ver a resposta</p>
</div>
<div class="flashcard-face flashcard-back bg-white rounded-xl p-6 card-shadow">
<div class="flex items-center mb-4">
<i class="fas fa-road text-blue-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900">Sistema de Condução</h2>
</div>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-map-marker-alt text-red-500 mt-1 mr-2"></i>
<span><strong>Nódulo SA:</strong> Marcapasso natural (60-100 bpm)</span>
</li>
<li class="flex items-start">
<i class="fas fa-exchange-alt text-purple-500 mt-1 mr-2"></i>
<span><strong>Vias internodais:</strong> Conduzem impulso para nódulo AV</span>
</li>
<li class="flex items-start">
<i class="fas fa-hourglass-half text-yellow-500 mt-1 mr-2"></i>
<span><strong>Nódulo AV:</strong> Atraso de condução (0.1s)</span>
</li>
<li class="flex items-start">
<i class="fas fa-code-branch text-green-500 mt-1 mr-2"></i>
<span><strong>Feixe de His:</strong> Ramifica para ventrículos</span>
</li>
<li class="flex items-start">
<i class="fas fa-running text-blue-500 mt-1 mr-2"></i>
<span><strong>Fibras de Purkinje:</strong> Condução rápida</span>
</li>
</ul>
<div class="absolute bottom-4 right-4 text-gray-400">
<i class="fas fa-undo"></i> Clique para voltar
</div>
</div>
</div>
<!-- Flashcard 4 -->
<div class="flashcard relative w-full h-96 cursor-pointer" onclick="this.classList.toggle('flipped')">
<div class="flashcard-face bg-white rounded-xl p-6 card-shadow card-hover">
<div class="flex items-center justify-center mb-4">
<i class="fas fa-fire text-orange-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900 text-center">O que são sparks de cálcio?</h2>
</div>
<div class="flex justify-center mb-4">
<i class="fas fa-question-circle text-blue-600 text-5xl opacity-30"></i>
</div>
<p class="text-gray-500 text-center">Clique para ver a resposta</p>
</div>
<div class="flashcard-face flashcard-back bg-white rounded-xl p-6 card-shadow">
<div class="flex items-center mb-4">
<i class="fas fa-fire text-orange-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900">Sparks de Cálcio</h2>
</div>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-bolt text-yellow-500 mt-1 mr-2"></i>
<span>Microdescargas localizadas de Ca2+ do retículo sarcoplasmático</span>
</li>
<li class="flex items-start">
<i class="fas fa-sync-alt text-blue-500 mt-1 mr-2"></i>
<span>Ativação de grupos de canais de rianodina</span>
</li>
<li class="flex items-start">
<i class="fas fa-chart-line text-green-500 mt-1 mr-2"></i>
<span>Sincronizados durante o potencial de ação</span>
</li>
<li class="flex items-start">
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-2"></i>
<span>Alterações podem causar arritmias</span>
</li>
<li class="flex items-start">
<i class="fas fa-heartbeat text-purple-500 mt-1 mr-2"></i>
<span>Essenciais para contratilidade cardíaca</span>
</li>
</ul>
<div class="absolute bottom-4 right-4 text-gray-400">
<i class="fas fa-undo"></i> Clique para voltar
</div>
</div>
</div>
<!-- Flashcard 5 -->
<div class="flashcard relative w-full h-96 cursor-pointer" onclick="this.classList.toggle('flipped')">
<div class="flashcard-face bg-white rounded-xl p-6 card-shadow card-hover">
<div class="flex items-center justify-center mb-4">
<i class="fas fa-link text-green-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900 text-center">Qual a função das junções gap?</h2>
</div>
<div class="flex justify-center mb-4">
<i class="fas fa-question-circle text-blue-600 text-5xl opacity-30"></i>
</div>
<p class="text-gray-500 text-center">Clique para ver a resposta</p>
</div>
<div class="flashcard-face flashcard-back bg-white rounded-xl p-6 card-shadow">
<div class="flex items-center mb-4">
<i class="fas fa-link text-green-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900">Junções Gap</h2>
</div>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-plug text-blue-500 mt-1 mr-2"></i>
<span>Canais intercelulares para comunicação direta</span>
</li>
<li class="flex items-start">
<i class="fas fa-bolt text-yellow-500 mt-1 mr-2"></i>
<span>Permitem propagação rápida do potencial de ação</span>
</li>
<li class="flex items-start">
<i class="fas fa-puzzle-piece text-purple-500 mt-1 mr-2"></i>
<span>Formadas por conexinas (hexâmeros)</span>
</li>
<li class="flex items-start">
<i class="fas fa-exchange-alt text-green-500 mt-1 mr-2"></i>
<span>Permitem passagem de íons e pequenas moléculas</span>
</li>
<li class="flex items-start">
<i class="fas fa-heartbeat text-red-500 mt-1 mr-2"></i>
<span>Essenciais para contração sincronizada</span>
</li>
</ul>
<div class="absolute bottom-4 right-4 text-gray-400">
<i class="fas fa-undo"></i> Clique para voltar
</div>
</div>
</div>
<!-- Flashcard 6 -->
<div class="flashcard relative w-full h-96 cursor-pointer" onclick="this.classList.toggle('flipped')">
<div class="flashcard-face bg-white rounded-xl p-6 card-shadow card-hover">
<div class="flex items-center justify-center mb-4">
<i class="fas fa-cogs text-purple-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900 text-center">Como ocorre o acoplamento excitação-contração?</h2>
</div>
<div class="flex justify-center mb-4">
<i class="fas fa-question-circle text-blue-600 text-5xl opacity-30"></i>
</div>
<p class="text-gray-500 text-center">Clique para ver a resposta</p>
</div>
<div class="flashcard-face flashcard-back bg-white rounded-xl p-6 card-shadow">
<div class="flex items-center mb-4">
<i class="fas fa-cogs text-purple-500 text-3xl mr-3"></i>
<h2 class="text-xl font-bold text-blue-900">Acoplamento Excitação-Contração</h2>
</div>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-bolt text-yellow-500 mt-1 mr-2"></i>
<span>Potencial de ação abre canais de Ca2+ tipo L</span>
</li>
<li class="flex items-start">
<i class="fas fa-fire text-orange-500 mt-1 mr-2"></i>
<span>Liberação de Ca2+ do retículo sarcoplasmático</span>
</li>
<li class="flex items-start">
<i class="fas fa-handshake text-blue-500 mt-1 mr-2"></i>
<span>Ca2+ liga-se à troponina C</span>
</li>
<li class="flex items-start">
<i class="fas fa-dumbbell text-red-500 mt-1 mr-2"></i>
<span>Formação de pontes cruzadas actina-miosina</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-circle-down text-green-500 mt-1 mr-2"></i>
<span>Relaxamento por recaptação de Ca2+</span>
</li>
</ul>
<div class="absolute bottom-4 right-4 text-gray-400">
<i class="fas fa-undo"></i> Clique para voltar
</div>
</div>
</div>
</div>
<div class="mt-12 text-center text-gray-500 text-sm">
<p>Flashcards de Bioeletrogênese Cardíaca para Médicos Residentes</p>
<p class="mt-1">Clique em cada card para virar e ver a resposta</p>
</div>
</div>
<script>
// Add hover effect to all flashcards
document.querySelectorAll('.flashcard').forEach(card => {
card.addEventListener('mouseenter', () => {
if (!card.classList.contains('flipped')) {
card.classList.add('card-hover');
}
});
card.addEventListener('mouseleave', () => {
card.classList.remove('card-hover');
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Cyrofranklin/flashcard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |