-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (235 loc) · 16.2 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Longevity Genie</title>
<link rel="stylesheet" href="styles.css">
<link rel="preload" href="/images/background2.jpg" as="image">
<link rel="preload" href="/images/background1.jpg" as="image">
<link rel="preload" href="/images/background3.jpg" as="image">
<link rel="preload" href="/images/scenary.jpg" as="image">
<link rel="preload" href="/images/sun-part.jpg" as="image">
<link rel="preload" href="/images/background.jpg" as="image">
<link rel="icon" href="./images/icon.png">
<link rel="preload" href="/images/sun.jpg" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@600;700&family=Almarai:wght@300;400;700&family=Anton&family=Bebas+Neue&family=Kalam:wght@400;700&family=Open+Sans:wght@300&family=Orbitron:wght@400;500;700&family=PT+Sans:wght@400;700&family=Rubik:wght@400;500&family=Saira+Condensed:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header Section -->
<header class="header">
<img loading="lazy" class="icon" src="./images/icon.png">
<span class="header-text">
<h1>Longevity Genie</h1>
<p>Your Personal Genetics, and Longevity Research Open-Source Assistant</p>
</span>
<div id="menu" class="menu" onclick="burgerFunc()">
<span class="line line1">
</span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<div id="menu-hamburger" class="menu-hamburger" >
<a><span class="nav">Features</span></a>
<a><span class="nav">About us</span></a>
<a><span class="nav">Terms of use</span></a>
</div>
</header>
<div id="myLinks">
<a href="http://agingkills.eu:3081/" class="bold bold-libre" target="_blank" rel="noopener noreferrer"><span>NEW! </span>LibreChat Deployment</a>
<a href="https://chat.openai.com/g/g-HnvTUyFeq-genetics-genie" class="bold" target="_blank" rel="noopener noreferrer">Genetics Genie</a>
<a href="https://chat.openai.com/g/g-tpOIOEeWm-clinical-trials-genie" class="bold" target="_blank" rel="noopener noreferrer">Clinical Trials Genie</a>
<a href="https://chat.openai.com/g/g-Y7oRsdMUS-drugage-genie" target="_blank" rel="noopener noreferrer">DrugAge Genie</a>
<a href="https://chat.openai.com/g/g-I8OGEVL4X-animal-ageing-genie" target="_blank" rel="noopener noreferrer">Animal Ageing Genie</a>
<a href="https://dna-seq.github.io/" target="_blank" class="white-link" rel="noopener noreferrer">Just-DNA-Seq project</a>
</div>
</div>
<!-- Project Description Section -->
<section class="project-description">
<span class="description-text">
<h2 id="textbig" class="appearing">Unlock the secrets to a longer, healthier life with Longevity Genie! </h2>
<p id="text">Explore our open-source toolbox and chatbot designed to empower large language models in unraveling the mysteries of personal health, genetics, and groundbreaking longevity research. </p>
</span>
<div class="button_beginning">
<a href="http://agingkills.eu:3081/" class="bold bold-libre" target="_blank" rel="noopener noreferrer"><span>NEW! </span>LibreChat Deployment</a>
<a href="https://chat.openai.com/g/g-HnvTUyFeq-genetics-genie" class="bold" target="_blank" rel="noopener noreferrer">Genetics Genie</a>
<a href="https://chat.openai.com/g/g-tpOIOEeWm-clinical-trials-genie" class="bold" target="_blank" rel="noopener noreferrer">Clinical Trials Genie</a>
<a href="https://chat.openai.com/g/g-Y7oRsdMUS-drugage-genie" target="_blank" rel="noopener noreferrer">DrugAge Genie</a>
<a href="https://chat.openai.com/g/g-I8OGEVL4X-animal-ageing-genie" target="_blank" rel="noopener noreferrer">Animal Ageing Genie</a>
</div>
</section>
<div class="imagess">
<img loading="lazy" id="sun" class="sun-part appearing appearing1" src="./images/sun-part.png">
<img loading="lazy" id="background" class="scenary" src="./images/scenary.png">
</div>
<div class = "main-container">
<!-- Project Links Section -->
<section class="navigation">
<div id="sun1" class="link-div link-div1">
<img loading="lazy" class="sun sun-1" src="./images/sun.png">
<a class="link link-1"><h2>Features</h2></a>
</div>
<div id="sun2" class="link-div link-div2 ">
<img loading="lazy" class="sun sun-2" src="./images/sun.png">
<a class=" link link-2" href="./about_us.html"><h2>About us</h2></a>
</div>
<div id="sun3" class="link-div link-div3">
<img loading="lazy" class="sun sun-3" src="./images/sun.png">
<a class=" link link-3" href=""><h2>Terms of Use</h2></a>
</div>
<script>
let sun = document.getElementById("sun")
let text = document.getElementById("text")
let textbig = document.getElementById("textbig")
let sun1 = document.getElementById("sun1")
let sun2 = document.getElementById("sun2")
let sun3 = document.getElementById("sun3")
let isScrollListenerActive = false;
function parallax(){
let value = window.scrollY;
sun.style.top = 347 + value * 0.75 + "px";
sun.style.width = 100 - value*0.05 + "%";
sun.style.marginLeft = value*0.024 + "%";
sun.style.marginRight = value*0.4 + "%";
text.style.top = (800 - value * 0.25) + "px";
textbig.style.bottom = value*0.5 + "px";
sun1.style.bottom = 0 + value * 0.3 + "px";
sun2.style.bottom = 0 + value * 0.28 + "px";
sun3.style.bottom = 0 + value * 0.265 + "px";
if (value > 1020){
sun.style.visibility="hidden";
}
else{
sun.style.visibility="visible";
}
requestAnimationFrame(parallax)
}
function requesting(){
requestAnimationFrame(parallax);
}
function checking_size(){
if (window.innerWidth < 600 && isScrollListenerActive) {
window.removeEventListener("scroll", requesting);
isScrollListenerActive = false;
} else if (window.innerWidth >= 600 && !isScrollListenerActive) {
window.addEventListener("scroll", requesting);
isScrollListenerActive = true;
parallax(); // Optional: Trigger parallax immediately on resize if window is large
}
};
checking_size()
if (window.innerWidth > 600){
window.addEventListener("resize", checking_size)
}
</script>
</section>
<!-- Future Plans Section -->
<section class="future-plans">
<img loading="lazy" class="grandpablur grandpablur2" src="./images/grandpa1.png">
<img loading="lazy" class="grandpablur grandpablur1" src="./images/grandpa1.png">
<div class="container sections-wrapper">
<div class="slider sections">
<div class="slider-line">
<div class="slider-item">
<h3>DrugAge Genie</h3>
Identifying drugs, compounds, and supplements that may extend lifespan in humans remains an area of ongoing research. However, valuable insights have been gained from studies on model organisms. The DrugAge database, consisting of 1,316 entries featuring 418 unique compounds, draws from research across 27 model organisms, including worms, flies, yeast, and mice. Our agent enables users to quickly access all relevant information from this database in a matter of seconds.</div>
<div class="slider-item">
<h3>Genetics Genie</h3>
Do you have questions about genetics? Whether you're curious about the genetic causes of diseases, exploring how genes impact your daily health choices, seeking information on family planning, or uncovering a family history of inherited diseases, our agent is connected to the Online Mendelian Inheritance in Man (OMIM) database and other reliable sources to provide you with the answers you need.
</div>
<div class="slider-item">
<h3>Clinical Trials Genie</h3>
The registry of clinical trials, ClinicalTrials.gov, holds registrations from over 400,000 trials in more than 200 countries. To easily navigate among the registered clinical trials, we have created this agent. Which clinical trials are registered for a particular disease? Which of them are interventional? What outcomes have they shown? Get answers with just a click.
</div>
<div class="slider-item">
<h3>Longevity Map</h3>
Which genes influence our capacity to reach centenarian status, and how do these genes impact various pathways? The LongevityMap database serves as the most comprehensive repository on the genetics of human longevity. We have enhanced this database by incorporating details about both beneficial and detrimental variants associated with each gene. Whether you are intrigued by the genetics of human longevity or have your own genome data, our agent is ready to give an answer.
</div>
</div>
<div class="buttons sections">
<img loading="lazy" class="slider-prev" src="./images/left-arrow1.png">
<img loading="lazy" class="slider-next" src="./images/right-arrow1.png">
</div>
</div>
<!-- Add more content as needed -->
<div class="button">
<h2 class="chat-now sections sections-wrapper">Chat Now!*</h2>
<img loading="lazy" class="arrow sections sections-wrapper" src="./images/arrow.png">
<p class="note sections sections-wrapper">*You should have ChatGPT Plus subscription plan to be able to use agents</p>
<section class="button-itself sections-wrapper">
<img loading="lazy" class="sun1 sections" src="./images/sun1.png">
<section class="sections list-gpts">
<a href="https://chat.openai.com/g/g-HnvTUyFeq-genetics-genie" target="_blank" rel="noopener noreferrer"><p>Genetics Genie</p></a>
<a href="https://chat.openai.com/g/g-Y7oRsdMUS-drugage-genie" target="_blank" rel="noopener noreferrer"><p>DrugAge Genie</p></a>
<a href="https://chat.openai.com/g/g-I8OGEVL4X-animal-ageing-genie" target="_blank" rel="noopener noreferrer"><p>Animal Ageing Genie</p></a>
<a href="https://chat.openai.com/g/g-tpOIOEeWm-clinical-trials-genie" target="_blank" rel="noopener noreferrer"><p>Clinical Trials Genie</p></a>
</section>
</section>
<img loading="lazy" class="schema sections sections-wrapper" src="./images/schema.png">
</div>
</section>
<!-- Donors and Affiliations Section -->
<section class="donors-affiliations">
<h2>Sponsors and Collaborators</h2>
<p>Special thanks to our generous donors and affiliations who support our mission.</p>
<div class="logos-div">
<a target="_blank" rel="noopener noreferrer" href="https://heales.org/"><img loading="lazy" class="heales" src="./images/heales.png"></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.vitadao.com/"><img loading="lazy" class="zuzalu" src="./images/vitadao.png"></a>
<a target="_blank" rel="noopener noreferrer" href="https://cellfabrik.bio/"><img loading="lazy" class="cellfabric" src="./images/cellfabric.png"></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.healome.one/"><img loading="lazy" class="heales" src="./images/healome.webp"></a>
<a target="_blank" rel="noopener noreferrer" href="https://asklongevitygpt.com/"><span class="longevitygpt">Longevity GPT</span></a>
</div>
<!-- Add donor and affiliation information here -->
<img loading="lazy" class="footer-image" src="./images/wave.png">
</section>
<!-- Project Links Section -->
<section class="project-links">
<img loading="lazy" class="footer-image reversed" src="./images/wave_reversed.png">
<a class="link-header" target="_blank" rel="noopener noreferrer" href="https://github.com/longevity-genie">
<svg class="github-logo" width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
</a>
<a class="link-header telegram" target="_blank" rel="noopener noreferrer" href="https://web.telegram.org/a/#-1001603106352">
<svg xmlns="http://www.w3.org/2000/svg" height="150" width="150" viewBox="-36 -60 312 360"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="51.9" y1="11.536" x2="28.836" x1="46.136" id="a"><stop offset="0" stop-color="#37aee2"/><stop offset="1" stop-color="#1e96c8"/></linearGradient></defs><g transform="scale(3.4682)"><circle fill="url(#a)" r="34.6" cx="34.6" cy="34.6"/><path fill="#fff" d="M14.4 34.3l23.3-9.6c2.3-1 10.1-4.2 10.1-4.2s3.6-1.4 3.3 2c-.1 1.4-.9 6.3-1.7 11.6l-2.5 15.7s-.2 2.3-1.9 2.7c-1.7.4-4.5-1.4-5-1.8-.4-.3-7.5-4.8-10.1-7-.7-.6-1.5-1.8.1-3.2 3.6-3.3 7.9-7.4 10.5-10 1.2-1.2 2.4-4-2.6-.6l-14.1 9.5s-1.6 1-4.6.1c-3-.9-6.5-2.1-6.5-2.1s-2.4-1.5 1.7-3.1z"/></g></svg></svg>
</a>
</section>
<script>
function scrollTrigger(selector, options){
let els = document.querySelectorAll(selector)
els = Array.from(els)
els.forEach(el => {
addObserver(el, options)
})
}
function addObserver(el, options){
// We are creating a new IntersectionObserver instance
let observer = new IntersectionObserver((entries, options) => { // This takes a callback function that receives two arguments: the elements list and the observer instance.
entries.forEach(entry => {
// `entry.isIntersecting` will be true if the element is visible
if(entry.isIntersecting) {
entry.target.classList.add('animate-slide')
// We are removing the observer from the element after adding the active class
observer.unobserve(entry.target)
}
})
})
// Adding the observer to the element
observer.observe(el)
}
let options = {
root: document.querySelectorAll('sections-wrapper'),
rootMargin: '40%',
threshold: 1.0,
}
// Example usage
scrollTrigger('.sections', options)
</script>
<script src="script.js"></script>
</div>
<!-- Footer Section -->
<footer class="footer">
<p>© 2023 Longevity Genie. All rights reserved.</p>
</footer>
</body>
</html>