|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Blue Vervain and Mugwort Study</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.12/marked.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.3.0/mermaid.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap'); |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
background-color: #f0f0f0; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100vh; |
|
|
font-family: 'Roboto Mono', monospace; |
|
|
} |
|
|
|
|
|
#svgContainer { |
|
|
width: 90%; |
|
|
height: 90vh; |
|
|
background-color: #ffffff; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
#content { |
|
|
font-size: 24px; |
|
|
line-height: 1.5; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
h1, h2 { |
|
|
color: #2c3e50; |
|
|
} |
|
|
|
|
|
.mermaid { |
|
|
margin: 20px 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="svgContainer"> |
|
|
<div id="content"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const content = ` |
|
|
# Blue Vervain and Mugwort Study 🌿🔬 |
|
|
|
|
|
## 1. Phytochemical Analysis 🧪 |
|
|
- Isolate active compounds (HPLC, GC-MS, NMR) |
|
|
- Focus on terpenes, flavonoids, alkaloids |
|
|
|
|
|
## 2. In Vitro Studies 🧫 |
|
|
- Effects on endothelial cells, lymphocytes |
|
|
- Assess gene expression, protein levels |
|
|
|
|
|
## 3. Molecular Pathway Analysis 🧬 |
|
|
- Investigate compound-receptor interactions |
|
|
- Examine signaling pathways |
|
|
|
|
|
## 4. Animal Studies 🐁 |
|
|
- Observe systemic effects |
|
|
- Use intravital microscopy |
|
|
|
|
|
## 5. Clinical Trials 👥 |
|
|
- Small-scale human trials |
|
|
- Use relevant biomarkers |
|
|
|
|
|
## 6. Genetic/Epigenetic Studies 🧬🔍 |
|
|
- Analyze gene expression changes |
|
|
- Employ ChIP-seq and RNA-seq |
|
|
|
|
|
## Integration into Family Practice 👨⚕️👩⚕️ |
|
|
1. Standardize preparations and dosages |
|
|
2. Conduct safety assessments |
|
|
3. Develop clinical guidelines |
|
|
4. Educate practitioners and patients |
|
|
|
|
|
## Study Workflow |
|
|
\`\`\`mermaid |
|
|
graph TD |
|
|
A[Phytochemical Analysis] --> B[In Vitro Studies] |
|
|
B --> C[Molecular Pathway Analysis] |
|
|
C --> D[Animal Studies] |
|
|
D --> E[Clinical Trials] |
|
|
E --> F[Genetic/Epigenetic Studies] |
|
|
F --> G[Integration into Family Practice] |
|
|
\`\`\` |
|
|
`; |
|
|
|
|
|
const contentDiv = document.getElementById('content'); |
|
|
contentDiv.innerHTML = marked.parse(content); |
|
|
|
|
|
mermaid.initialize({ startOnLoad: true }); |
|
|
|
|
|
const svgContainer = document.getElementById('svgContainer'); |
|
|
const contentHeight = contentDiv.scrollHeight; |
|
|
const svgHeight = svgContainer.clientHeight; |
|
|
|
|
|
gsap.to(contentDiv, { |
|
|
y: -contentHeight + svgHeight, |
|
|
duration: 60, |
|
|
ease: "linear", |
|
|
repeat: -1, |
|
|
onRepeat: () => { |
|
|
gsap.set(contentDiv, { y: 0 }); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Inline SVG art |
|
|
const svgArt = ` |
|
|
<svg width="100" height="100" viewBox="0 0 100 100" style="position: absolute; top: 10px; right: 10px;"> |
|
|
<defs> |
|
|
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
|
<stop offset="0%" style="stop-color:#48c6ef;stop-opacity:1" /> |
|
|
<stop offset="100%" style="stop-color:#6f86d6;stop-opacity:1" /> |
|
|
</linearGradient> |
|
|
</defs> |
|
|
<circle cx="50" cy="50" r="40" fill="url(#grad)"> |
|
|
<animate attributeName="r" values="40;45;40" dur="2s" repeatCount="indefinite" /> |
|
|
</circle> |
|
|
<path d="M50 10 L90 90 L10 90 Z" fill="none" stroke="white" stroke-width="2"> |
|
|
<animate attributeName="stroke-dasharray" values="0,300;300,0;0,300" dur="4s" repeatCount="indefinite" /> |
|
|
</path> |
|
|
</svg> |
|
|
`; |
|
|
svgContainer.insertAdjacentHTML('beforeend', svgArt); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
