Hugging Face's logo

Spaces:
awacke1
/
Educational-Scroll-Post-GeneticsandCellBiology
Running

App Files Community
awacke1 commited on
Commit
b3179e9
·
verified ·
1 Parent(s): 27652f1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +104 -19
index.html CHANGED
@@ -1,19 +1,104 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Blue Vervain and Mugwort Study</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
10
+
11
+ body {
12
+ margin: 0;
13
+ padding: 0;
14
+ background-color: #f0f0f0;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ height: 100vh;
19
+ font-family: 'Roboto Mono', monospace;
20
+ }
21
+
22
+ #svgContainer {
23
+ width: 90%;
24
+ height: 80vh;
25
+ background-color: #ffffff;
26
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div id="svgContainer"></div>
32
+
33
+ <script>
34
+ const content = `
35
+ Blue Vervain and Mugwort Study
36
+
37
+ 1. Phytochemical Analysis:
38
+ - Isolate active compounds (HPLC, GC-MS, NMR)
39
+ - Focus on terpenes, flavonoids, alkaloids
40
+
41
+ 2. In Vitro Studies:
42
+ - Effects on endothelial cells, lymphocytes
43
+ - Assess gene expression, protein levels
44
+
45
+ 3. Molecular Pathway Analysis:
46
+ - Investigate compound-receptor interactions
47
+ - Examine signaling pathways
48
+
49
+ 4. Animal Studies:
50
+ - Observe systemic effects
51
+ - Use intravital microscopy
52
+
53
+ 5. Clinical Trials:
54
+ - Small-scale human trials
55
+ - Use relevant biomarkers
56
+
57
+ 6. Genetic/Epigenetic Studies:
58
+ - Analyze gene expression changes
59
+ - Employ ChIP-seq and RNA-seq
60
+
61
+ Integration into Family Practice:
62
+ 1. Standardize preparations and dosages
63
+ 2. Conduct safety assessments
64
+ 3. Develop clinical guidelines
65
+ 4. Educate practitioners and patients
66
+ `;
67
+
68
+ const svgContainer = document.getElementById('svgContainer');
69
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
70
+ svg.setAttribute("width", "100%");
71
+ svg.setAttribute("height", "100%");
72
+ svgContainer.appendChild(svg);
73
+
74
+ const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
75
+ text.setAttribute("x", "10");
76
+ text.setAttribute("y", "30");
77
+ text.setAttribute("font-size", "14");
78
+ text.setAttribute("fill", "#333");
79
+ svg.appendChild(text);
80
+
81
+ const lines = content.split('\n');
82
+ lines.forEach((line, index) => {
83
+ const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
84
+ tspan.textContent = line.trim();
85
+ tspan.setAttribute("x", "10");
86
+ tspan.setAttribute("dy", index === 0 ? "0" : "1.2em");
87
+ text.appendChild(tspan);
88
+ });
89
+
90
+ const textHeight = text.getBBox().height;
91
+ const svgHeight = svgContainer.clientHeight;
92
+
93
+ gsap.to(text, {
94
+ y: -textHeight,
95
+ duration: 30,
96
+ ease: "linear",
97
+ repeat: -1,
98
+ onRepeat: () => {
99
+ gsap.set(text, { y: svgHeight });
100
+ }
101
+ });
102
+ </script>
103
+ </body>
104
+ </html>