Spaces:

awacke1
/

Educational-Scroll-Post-GeneticsandCellBiology

Running

Educational-Scroll-Post-GeneticsandCellBiology

File size: 4,254 Bytes

<!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>