Spaces:

awacke1
/

Educational-Scroll-Post-GeneticsandCellBiology

Running

App Files Files Community

awacke1 commited on Jul 19, 2024

Commit

9ef8bc4

verified ·

1 Parent(s): b3179e9

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -59

index.html CHANGED Viewed

@@ -5,6 +5,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>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
@@ -21,84 +23,115 @@
         #svgContainer {
             width: 90%;
-            height: 80vh;
             background-color: #ffffff;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
     </style>
 </head>
 <body>
-    <div id="svgContainer"></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
         `;
-        const svgContainer = document.getElementById('svgContainer');
-        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svg.setAttribute("width", "100%");
-        svg.setAttribute("height", "100%");
-        svgContainer.appendChild(svg);
-        const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-        text.setAttribute("x", "10");
-        text.setAttribute("y", "30");
-        text.setAttribute("font-size", "14");
-        text.setAttribute("fill", "#333");
-        svg.appendChild(text);
-        const lines = content.split('\n');
-        lines.forEach((line, index) => {
-            const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-            tspan.textContent = line.trim();
-            tspan.setAttribute("x", "10");
-            tspan.setAttribute("dy", index === 0 ? "0" : "1.2em");
-            text.appendChild(tspan);
-        });
-        const textHeight = text.getBBox().height;
         const svgHeight = svgContainer.clientHeight;
-        gsap.to(text, {
-            y: -textHeight,
-            duration: 30,
             ease: "linear",
             repeat: -1,
             onRepeat: () => {
-                gsap.set(text, { y: svgHeight });
             }
         });
     </script>
 </body>
 </html>

     <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');
         #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>