Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Commits on Source (1042)
942 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 846 additions and 8267 deletions
.gitignore
View file @ 3fd292fd
......@@ -15,3 +15,8 @@ other
dist
src/components/resources
code/test.bib
.DS_Store
code/test file gitignore.txt
src/.DS_Store
vite.config.js.timestamp-1732367750130-6d00136194c2.mjs
vite.config.js.timestamp-1733161862061-488217339257e.mjs
code/neurship.bib deleted 100644 → 0
View file @ 4dc5628e
1
@article{frontiers_cystic_fibrosis,
title = {Cystic Fibrosis: A Comprehensive Review},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
2
@article{cystic_fibrosis_news_today,
title = {Cystic Fibrosis: Latest Developments and Research},
year = 2023,
journal = {Cystic Fibrosis News Today},
url = {
https://cysticfibrosisnewstoday.com/2023/06/10/latest-research-on-f508del-mutation/
}
}
3
@misc{expertmarketresearch_cystic_fibrosis_market,
title = {Cystic Fibrosis Treatment Market Report},
year = 2023,
url = {
https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
},
note = {Accessed: 2024-09-27}
}
4
@misc{cystic_fibrosis_news_kaftrio,
title = {Kaftrio Open to Patients 12 and Up in Europe with One F508del Mutation},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/news/kaftrio-open-patients-12-and-up-europe-one-f508del-mutation/
},
note = {Accessed: 2024-09-27}
}
5
@misc{expert_market_research_cf_market_size,
title = {Cystic Fibrosis Treatment Market Report},
year = 2023,
url = {
https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
},
note = {Accessed: 2024-09-27}
}
6
@misc{cystic_fibrosis_news_today_gene_therapy,
title = {Gene Therapy for F508del Mutation: A Growing Opportunity in CF Treatment},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/2023/09/01/gene-therapy-opportunities-in-f508del-mutation-treatment/
},
note = {Accessed: 2024-09-27}
}
7
@misc{expert_market_research_growth_drivers,
title = {Cystic Fibrosis Treatment Market Report},
year = 2023,
url = {
https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
},
note = {Accessed: 2024-09-27}
}
8
@article{frontiers_growth_drivers_cf,
title = {Cystic Fibrosis: A Comprehensive Review of Current and Emerging Therapies},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
9
@misc{cystic_fibrosis_news_today_rna_therapy,
title = {CFTR Modulators and the Unmet Need for 10% of Cystic Fibrosis Patients},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/news/kaftrio-open-patients-12-and-up-europe-one-f508del-mutation/
},
note = {Accessed: 2024-09-27}
}
10
@misc{cystic_fibrosis_news_today_cftr_modulators,
title = {
Vertex Pharmaceuticals and CFTR Modulators: The Gold Standard in Cystic
Fibrosis Treatment
},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/2023/06/10/kaftrio-trikafta-f508del-mutation-treatment/
},
note = {Accessed: 2024-09-27}
}
11
@misc{expert_market_research_cf_competitors,
title = {Cystic Fibrosis Treatment Market Report},
year = 2023,
url = {
https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
},
note = {Accessed: 2024-09-27}
}
12
@article{frontiers_gene_therapy_competitors,
title = {
Advancements in Gene Therapy for Cystic Fibrosis: Overcoming Early Challenges
},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
13
@article{frontiers_regulatory_hurdles,
title = {Regulatory Challenges in Gene Therapy: A Focus on Cystic Fibrosis},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
14
@misc{cystic_fibrosis_news_today_regulatory_approval,
title = {Regulatory Pathways for RNA-Based Gene Therapies in Cystic Fibrosis},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/2023/05/20/rna-gene-therapy-regulatory-hurdles/
},
note = {Accessed: 2024-09-27}
}
15
@misc{expert_market_research_rnd_costs,
title = {Cystic Fibrosis Treatment Market Report},
year = 2023,
url = {
https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
},
note = {Accessed: 2024-09-27}
}
16
@article{frontiers_delivery_challenges,
title = {
Challenges in RNA-Based Therapy Delivery: Focus on Lipid Nanoparticles for
Lung Targeting
},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
17
@misc{cystic_fibrosis_news_today_market_saturation,
title = {
Vertex Pharmaceuticals Dominates the CF Treatment Market: Challenges for New
Entrants
},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/2023/06/10/kaftrio-trikafta-f508del-mutation-treatment/
},
note = {Accessed: 2024-09-27}
}
18
@article{frontiers_clinical_partnerships,
title = {
The Role of Clinical Partnerships in Advancing RNA-Based Gene Therapies for
Cystic Fibrosis
},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
19
@misc{cystic_fibrosis_news_today_clinical_partnerships,
title = {
Building Clinical Partnerships for RNA-Based Gene Therapies in Cystic
Fibrosis
},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/2023/05/25/collaborations-in-cf-gene-therapy-research/
},
note = {Accessed: 2024-09-27}
}
20
@article{frontiers_early_adopters,
title = {
Targeting Early Adopters in Cystic Fibrosis Gene Therapy: A Focus on
Specialized Clinics
},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
21
@misc{expert_market_research_biotech_partnerships,
title = {Cystic Fibrosis Treatment Market Report},
year = 2023,
url = {
https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
},
note = {Accessed: 2024-09-27}
}
22
@misc{cystic_fibrosis_news_today_regulatory_strategy,
title = {
Regulatory Strategy for RNA-Based Gene Therapies: Focus on Orphan Drug
Designation and Fast-Track Approvals
},
year = 2023,
url = {
https://cysticfibrosisnewstoday.com/2023/06/15/fda-fast-track-approval-cystic-fibrosis-therapies/
},
note = {Accessed: 2024-09-27}
}
23
@article{frontiers_long_term_vision,
title = {
Expanding RNA-Based Gene Therapies Beyond Cystic Fibrosis: A Modular Approach
to Treating Genetic Disorders
},
year = 2023,
journal = {Frontiers},
url = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
}
code/output.txt deleted 100644 → 0
View file @ 4dc5628e
{/*<!-- Citation num 1--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Roth, F. C.</span>
<span property="schema:Name"> Draguhn, A.</span>
</span>
<span property="schema:name">&nbsp;Die Entwicklung der Patch-Clamp-Technik</span>.
<i property="schema:publisher" typeof="schema:Organization"> Springer eBooks</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>
,&nbsp;<span property="schema:pageBegin"> 1</span>-<span property="schema:pageEnd">14</span>&nbsp;
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
<a className="doi" href="https://doi.org/10.1007/978-3-662-66053-9"> doi: 10.1007/978-3-662-66053-9</a>
</li>
{/*<!-- Citation num 2--> */}
<li typeof="schema:Book" role="doc-biblioentry" property="schema:citation" id="desc-2">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Dallas, M.</span>
<span property="schema:Name"> Bell, D.</span>
</span>
<span property="schema:name">&nbsp;Patch clamp electrophysiology: methods and protocols.</span>
<i property="schema:publisher" typeof="schema:Organization">&nbsp;Humana Press</i>
&nbsp;(<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2021">2021</time>).
</li>
{/*<!-- Citation num 3--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-3">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Priel, A.</span>
<span property="schema:Name"> Gil, Z.</span>
<span property="schema:Name"> Moy, V. T.</span>
<span property="schema:Name"> Magleby, K. L.</span>
<span property="schema:Name"> Silberberg, S. D.</span>
</span>
<span property="schema:name">&nbsp;
Ionic Requirements for Membrane-Glass Adhesion and Giga Seal Formation in
Patch-Clamp Recording
</span>.
<i property="schema:publisher" typeof="schema:Organization"> Biophysical Journal</i>
<b property="issueNumber" typeof="PublicationIssue"> 92</b>
,&nbsp;<span property="schema:pageBegin"> 3893</span>-<span property="schema:pageEnd">3900</span>&nbsp;
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2007">2007</time>).
<a className="doi" href="https://doi.org/10.1529/biophysj.106.099119"> doi: 10.1529/biophysj.106.099119</a>
</li>
{/*<!-- Citation num 4--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-4">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Billet, A.</span>
<span property="schema:Name"> Froux, L.</span>
<span property="schema:Name"> Hanrahan, J. W.</span>
<span property="schema:Name"> Becq, F.</span>
</span>
<span property="schema:name">&nbsp;
Development of Automated Patch Clamp Technique to Investigate CFTR Chloride
Channel Function
</span>.
<i property="schema:publisher" typeof="schema:Organization"> Frontiers in Pharmacology</i>
<b property="issueNumber" typeof="PublicationIssue"> 8</b>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2017">2017</time>).
<a className="doi" href="https://doi.org/10.3389/fphar.2017.00195"> doi: 10.3389/fphar.2017.00195</a>
</li>
{/*<!-- Citation num 5--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-5">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> DuBridge, R. B.</span>
<span property="schema:Name"> Tang, P.</span>
<span property="schema:Name"> Hsia, H. C.</span>
<span property="schema:Name"> Leong, P. M.</span>
<span property="schema:Name"> Miller, J. H.</span>
<span property="schema:Name"> Calos, M. P.</span>
</span>
<span property="schema:name">&nbsp;
Analysis of mutation in human cells by using an Epstein-Barr virus shuttle
system.
</span>.
<i property="schema:publisher" typeof="schema:Organization"> Molecular and Cellular Biology</i>
<b property="issueNumber" typeof="PublicationIssue"> 7</b>
,&nbsp;<span property="schema:pageBegin"> 379</span>-<span property="schema:pageEnd">387</span>&nbsp;
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 1987">1987</time>).
</li>
{/*<!-- Citation num 6--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-6">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Qin, J. Y.</span>
<span property="schema:Name"> Zhang, L.</span>
<span property="schema:Name"> Clift, K. L.</span>
<span property="schema:Name"> Hulur, I.</span>
<span property="schema:Name"> Xiang, A. P.</span>
<span property="schema:Name"> Ren, B.</span>
<span property="schema:Name"> Lahn, B. T.</span>
</span>
<span property="schema:name">&nbsp;
Systematic Comparison of Constitutive Promoters and the Doxycycline-Inducible
Promoter
</span>.
<i property="schema:publisher" typeof="schema:Organization"> PLOS ONE</i>
<b property="issueNumber" typeof="PublicationIssue"> 5</b>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2010">2010</time>).
<a className="doi" href="https://doi.org/10.1371/journal.pone.0010611"> doi: 10.1371/journal.pone.0010611</a>
</li>
{/*<!-- Citation num 7--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-7">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Bulcaen, M.</span>
<span property="schema:Name"> Kortleven, P.</span>
<span property="schema:Name"> Liu, R. B.</span>
<span property="schema:Name"> Maule, G.</span>
<span property="schema:Name"> Dreano, E.</span>
<span property="schema:Name"> Kelly, M.</span>
<span property="schema:Name"> Ensinck, M. M.</span>
<span property="schema:Name"> et al.</span>
</span>
<span property="schema:name">&nbsp;Prime editing functionally corrects cystic fibrosis-causing CFTR mutations in human organoids and airway epithelial cells</span>.
<i property="schema:publisher" typeof="schema:Organization"> Cell Reports Medicine</i>
<b property="issueNumber" typeof="PublicationIssue"> 5</b>
<span property="schema:pageBegin">101544</span>&nbsp;
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2024">2024</time>).
<a className="doi" href="https://doi.org/https://doi.org/10.1016/j.xcrm.2024.101544"> doi: https://doi.org/10.1016/j.xcrm.2024.101544</a>
</li>
{/*<!-- Citation num 8--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-8">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Ensinck, M.</span>
<span property="schema:Name"> De Keersmaecker, L.</span>
<span property="schema:Name"> Heylen, L.</span>
<span property="schema:Name"> Ramalho, A. S.</span>
<span property="schema:Name"> Gijsbers, R.</span>
<span property="schema:Name"> Farré, R.</span>
<span property="schema:Name"> De Boeck, K.</span>
<span property="schema:Name"> et al.</span>
</span>
<span property="schema:name">&nbsp;
Phenotyping of Rare CFTR Mutations Reveals Distinct Trafficking and
Functional Defects
</span>.
<i property="schema:publisher" typeof="schema:Organization"> Cells</i>
<b property="issueNumber" typeof="PublicationIssue"> 9</b>
<span property="schema:pageBegin">754</span>&nbsp;
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2020">2020</time>).
<a className="doi" href="https://doi.org/10.3390/cells9030754"> doi: 10.3390/cells9030754</a>
</li>
{/*<!-- Citation num 9--> */}
<li typeof="schema:WebPage" role="doc-biblioentry" property="schema:citation" id="desc-9">
<span property="schema:author" typeof="schema:Organisation">
<span property="schema:Name"> Zoya Ignatova</span>.
</span>
<span property="schema:name">Research Group Ignatova at the Institute of Biochemistry and Molecular Biology.</span>
<i property="schema:publisher" typeof="schema:Organization">\url{https://www.chemie.uni-hamburg.de/institute/bc/arbeitsgruppen/ignatova.html}</i>
&nbsp;(<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2023">2023</time>).
</li>
{/*<!-- Citation num 10--> */}
<li typeof="schema:Book" role="doc-biblioentry" property="schema:citation" id="desc-10">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Mennella, V.</span>
</span>
<span property="schema:name">&nbsp;Cilia: methods and protocols.</span>
<i property="schema:publisher" typeof="schema:Organization">&nbsp;Humana Press</i>
&nbsp;(<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2024">2024</time>).
</li>
code/safety-bibtex.bib deleted 100644 → 0
View file @ 4dc5628e
This diff is collapsed.
index.html
View file @ 3fd292fd
......@@ -3,9 +3,8 @@
<head>
<meta charset="UTF-8" />
<link
rel="shortcut icon"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png"
type="image/x-icon"
rel="icon" type="image/png" sizes="32x32"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.ico"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
......
package-lock.json deleted 100644 → 0
View file @ 4dc5628e
This diff is collapsed.
src/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/App/App.css
View file @ 3fd292fd
This diff is collapsed.
src/App/App.scss
View file @ 3fd292fd
......@@ -142,10 +142,10 @@ $size: 6;
& > a {
opacity: 0;
position: absolute;
color: #000;
background-color: #000;
color: var(--offblack);
background-color: var(--offblack);
font: bold 4em "Helvetica";
$shadow: 5px #fff;
$shadow: 5px var(--ourbeige);
text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
1px 0px $shadow;
padding: 2rem;
......@@ -165,7 +165,7 @@ $size: 6;
& > div {
overflow: hidden;
position: relative;
box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
box-shadow: 0 2px 8px 0 rgba(var(--offblack), 0.2), 0 3px 20px 0 rgba(var(--offblack), 0.19);
}
div,
a {
......@@ -201,7 +201,7 @@ $size: 6;
.content {
max-width: 90%;
position: relative;
color: #fff;
color: var(--ourbeige);
&:hover > a.close {
opacity: 1;
transform: scale(1, 1);
......@@ -262,7 +262,7 @@ $size: 6;
opacity: 0;
transform-origin: right top;
text-decoration:none;
color:#fff;
color:var(--ourbeige);
&::after {
content: "X";
}
......@@ -332,7 +332,7 @@ $shadow: #bc15aa;
height: 100px;
line-height: 100px;
margin: auto;
color: #fff;
color: var(--ourbeige);
position: absolute;
top: 0;
bottom: 0;
......@@ -459,7 +459,7 @@ $shadow: #bc15aa;
}
i{
position: relative;
color: white;
color: var(--ourbeige);
font-size: 60px/2;
margin-top: 60px/4;
transition: all 0.25s ease;
......@@ -553,14 +553,15 @@ $shadow: #bc15aa;
max-width: 400px;
width: 90%;
margin: auto;
background: #fff;
background: var(--ourbeige);
padding: 30px;
border-style: solid;
border-width: 30px;
border-top-color: darken(#850F78, 0%);
border-right-color: darken(#850F78, 10%);
border-bottom-color: darken(#850F78, 0%);
border-left-color: darken(#850F78, 10%);
$color: "#850F78";
border-top-color: #850F78;
border-right-color: #bc15aa;
border-bottom-color: #850F78;
border-left-color: #bc15aa;
box-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
.cert-frame {
......@@ -572,14 +573,14 @@ $shadow: #bc15aa;
max-width: 200px;
width: 70%;
margin: auto;
background: #fff;
background: var(--ourbeige);
padding: 10px;
border-style: solid;
border-width: 20px;
border-top-color: darken(#850F78, 0%);
border-right-color: darken(#850F78, 10%);
border-bottom-color: darken(#850F78, 0%);
border-left-color: darken(#850F78, 10%);
border-top-color:#850F78;
border-right-color: #bc15aa;
border-bottom-color: #850F78;
border-left-color: #bc15aa;
box-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
......@@ -590,7 +591,7 @@ figure.snip1113 {
min-width: 220px;
max-width: 310px;
width: 80%;
background: #ffffff;
background: var(--ourbeige);
text-align: center;
}
......@@ -622,8 +623,8 @@ figure.snip1113 figcaption {
}
figure.snip1113 h3 {
background-color: #ffffff;
color: #000000;
background-color: var(--ourbeige);
color: var(--offblack);
font-size: 1.7em;
width: 100%;
padding: 5px 12px;
......
src/App/App.tsx
View file @ 3fd292fd
import { useEffect, useState } from "react";
import { useEffect } from "react";
import "./App.css";
import "./HP.css"
import "./mediarules.css"
......@@ -21,17 +21,17 @@ import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import { useScroll, motion } from "framer-motion";
import "./calendar.css"
import { useLoading } from "../utils/LoadingContext.tsx";
const App = () => {
const { scrollYProgress } = useScroll({
offset: ["start start", "end end"],
});
const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
window.scrollTo(0, 0);
const [isLoading, setIsLoading] = useState(true);
// const [isLoading, setIsLoading] = useState(true);
const pathMapping = getPathMapping();
const currentPath =
......@@ -52,7 +52,7 @@ const App = () => {
const timer = setTimeout(() => {
console.log("Hiding loading screen");
setIsLoading(false);
}, 0); // Adjust the delay as needed, Update the loading state after 3 seconds
}, 1000); // Adjust the delay as needed, Update the loading state after 3 seconds
return () => {
console.log("Cleaning up timer");
......@@ -70,10 +70,6 @@ const App = () => {
{/* Navigation */}
<Navbar />
<motion.div
className="progress-bar"
style={{ scaleX: scrollYProgress }}
/>
{/* Header and PageContent */}
<Routes>
......@@ -85,10 +81,10 @@ const App = () => {
<>
<Header />
{/* Page content */}
<div className="container-fluid">
<div className="container-fluid" >
<div className="row">
<Sidebar />
<div className="col-9">
<Sidebar/>
<div className="full-col-phone col-9 max-1240">
<Component />
<Villbuttonrow />
</div>
......
src/App/HP.css
View file @ 3fd292fd
......@@ -10,7 +10,7 @@
#under-responsive, #under-responsibility, #under-reflection{
border-radius: 10px;
color: white;
color: var(--ourbeige) ;
}
#under-reflection div, #under-responsibility div, #under-responsive div{
......
src/App/LandingPage.css
View file @ 3fd292fd
......@@ -6,14 +6,14 @@
transition: opacity 1200ms ease-out, transform 600ms ease-out,
visibility 1200ms ease-out;
will-change: opacity, visibility;
background-color: black;
background-color: var(--offblack);
}
.content-block.is-visible {
opacity: 1;
transform: none;
visibility: visible;
background-color: black;
background-color: var(--offblack);
}
.landing-page-header .row .col{
......@@ -46,4 +46,27 @@
/* .header-button-row .h5 {
} */
\ No newline at end of file
} */
#landing-page-header-2{
margin-top: 5rem;
background-image: url("https://static.igem.wiki/teams/5247/landing-page/lp-1new-lung-two.svg") !important;
background-size: 100% auto;
background-repeat: no-repeat;
padding: 0 !important;
}
.button-x{
align-items: center;
display: flex;
align-self: center;
}
.button-x button{
margin: auto;
padding: 10px;
border-radius: 10px;
background-color: var(--text-primary);
color: var(--ourbeige)
}
\ No newline at end of file
src/App/Timelines.css
View file @ 3fd292fd
......@@ -7,10 +7,11 @@
white-space: nowrap;
min-height: 700px;
width: 75vw;
overflow-x: auto;
overflow-y: hidden;
overflow-x: auto !important;
max-width: inherit !important;
overflow-y: hidden !important;
width: 100%;
background-color: inherit;
font-size: 1rem;
/* align items center */
align-items: center !important;
/* row */
......@@ -34,7 +35,7 @@
.timeline ol li:nth-child(2n+1) .time-meta::before{
top: 100%;
left: 8px !important;
border-color: #f6faf6 transparent transparent transparent !important;
border-color: white transparent transparent transparent !important;
}
.timeline ol li:nth-child(2n+1) .moretop{
top: -40px !important;
......@@ -50,7 +51,7 @@
.timeline ol li:nth-child(2n) .time-meta::before{
top: 100%;
left: 8px !important;
border-color: transparent transparent transparent #f6faf6 !important;
border-color: transparent transparent transparent white !important;
}
.timeline ol li:nth-child(2n) .moretop{
top: 50px !important;
......@@ -85,7 +86,7 @@ background-size: 100% 120%;
.timeline ol li:nth-child(odd) .timeline-item::before {
top: 100%;
border-width: 20px 8px 0 0;
border-color: white transparent transparent transparent;
border-color: var(--ourbeige) transparent transparent transparent;
}
.timeline ol li:nth-child(even) .timeline-item::before {
top: -20px;
......@@ -127,8 +128,8 @@ background-size: 65% 120%;
padding: 15px;
font-size: 0.9rem;
white-space: normal;
color: black;
background: white;
color: var(--offblack);
background: white; /* Soll white bleiben! */
}
/* Layout for meta timeline cards */
......@@ -139,7 +140,7 @@ background-size: 65% 120%;
/* Tags */
.t-tag{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
color: #fff;
color: var(--ourbeige);
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
......@@ -152,15 +153,13 @@ background-size: 65% 120%;
button.tabbutton.Patient.active, button.tabbutton.All.active,
button.tabbutton.Industry.active, button.tabbutton.Academia.active,
button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: black;
border-color: var(--offblack);
}
.colour-meta-tag{
background-color: var(--igemlightgreen);
}
/* and buttons */
button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: white;
background-color: white; /* soll whit ebleiben! */
}
.Patient, button.tabbutton:nth-child(2), .button.tabbutton:nth-child(7), .skin{
......@@ -178,11 +177,15 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple);
}
.Activist{
.Activist, .Milestone{
background-color: var(--igemmediumgreen) !important;
}
.Education, .Outreach{
background-color: var(--igemlightgreen);
}
.Ethics{
.Other{
background-color: var(--offblack);
}
......@@ -223,7 +226,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
background-color: white; /* Soll white bleiben! */
display: flex;
flex-direction: column;
align-items: flex-end;
......@@ -239,7 +242,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
/* Tags */
.timeline-item-content .tag {
color: #fff;
color: var(--ourbeige);
font-size: 12px;
font-weight: bold;
top: 5px;
......@@ -258,7 +261,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
}
/* Title design */
.timeline-item-content time {
color: black;
color: var(--offblack);
font-size: 16px;
font-weight: bold;
}
......@@ -275,7 +278,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-end{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
......@@ -285,7 +288,7 @@ margin-top: 8vw;
.timeline-begin{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
......@@ -304,7 +307,7 @@ margin-bottom: 8vw;
/* Circle */
.timeline-item-content .circle {
background-color: #fff !important;
background-color: var(--ourbeige) !important;
border: 3px solid var(--text-primary);
border-radius: 50%;
position: absolute;
......@@ -327,70 +330,6 @@ z-index: 100;
/* Checken ob wir das echt brauchen */
/* .timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline-item-content::after {
background-color: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
position: absolute;
right: -7.5px;
top: calc(50% - 7.5px);
transform: rotate(45deg);
width: 15px;
height: 15px;
}
.timeline-item:nth-child(odd) .timeline-item-content::after {
right: auto;
left: -7.5px;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
}
.timeline-item-content p {
font-size: 16px;
line-height: 24px;
margin: 15px 0;
}
.timeline-item-content a::after {
font-size: 12px;
}
.card {
border-radius: 4px;
background-color: #fff;
color: #333;
padding: 10px;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
width: 100%;
max-width: 560px;
}
.date {
background-color: var(--text-primary) !important;
padding: 4px !important;
color: #fff !important;
border-radius: 4px !important;
font-weight: 500;
font-size: .85rem;
}
.date-col{
position: relative;
background-color: #fff ;
padding: 10px;
width: 10%;
border-right: #000;
border-right-width: 2px;
}
.imageAtom{
object-fit: cover;
overflow: hidden;
width: 100%;
max-height: 400px;
}
*/
.hpbuttonrow {
display: flex; /* Flex-Layout für die untere Reihe */
......@@ -425,5 +364,19 @@ display: flex;
.timeline-item figcaption{
background-color: var(--ourbeige) !important;
}
.timeline-item figcaption, .timeline-item figure, .timeline-item figcaption h3 {
background-color: white !important;
}
.timeline-item .img-cube{
height: 120px;
max-height: 13vh;
object-fit: cover !important;
}
\ No newline at end of file
src/App/calendar.css
View file @ 3fd292fd
......@@ -34,7 +34,7 @@
}
.month ul li {
color: white !important;
color: var(--ourbeige) !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
......@@ -42,7 +42,7 @@
}
.prev a, .next a{
color: white !important;
color: var(--ourbeige) !important;
}
.month .prev {
float: left;
......@@ -88,7 +88,7 @@
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
color: var(--ourbeige) !important
}
/* Add media queries for smaller screens */
......
src/App/mediarules.css
View file @ 3fd292fd
......@@ -27,9 +27,6 @@
align-items: center;
}
h1 {
font-size: 2rem;
}
.col-6 {
width: 100%; /* Full width on tablets */
......@@ -50,42 +47,81 @@
max-width: 100% !important;
}
.col-6 {
width: 100%; /* Full width for smartphone */
width: 100% ;
}
.container-fluid {
min-height: 100vh; /* Füllt den gesamten Bildschirm aus */
min-height: 100vh;
}
/***heading***/
.header-title{
min-height: 400px;
text-align: center;
align-items: center;
margin: auto !important;
padding: 0 30px;
font-size: 130px;
font-weight: 900;
line-height: 130px;
}
.header-container{
padding-top: 170px !important;
padding-bottom: 0px !important;
background-color: var(--ourbeige);
}
.base {
width: 100%;
background-color: var(--lightblue);
padding: 0px;
}
/***footer***/
footer {
padding: 10px;
width: 100% !important;
box-sizing: border-box !important;
padding: 15px !important;
}
.col {
width: 100% !important;
margin-bottom: 20px;
}
.col-sm-4, .col-sm-8, .col-6 {
width: 100%;
}
footer a, footer p {
font-size: 14px;
line-height: 1.4;
}
footer .social-icons {
footer .socials {
display: flex;
justify-content: center;
justify-content: center !important;
margin-bottom: 10px;
}
footer .contact-info {
font-size: 12px;
.contact-info {
font-size: 14px;
text-align: center;
}
footer img {
.img-sponsor {
width: 100px;
height: auto;
margin: 0 auto;
}
.footer-slider {
width: 100%;
margin-top: 20px;
}
footer a {
word-wrap: break-word;
overflow-wrap: break-word;
}
hr {
margin: 20px 0;
}
/***gif***/
.CFTR-gif {
......@@ -93,39 +129,96 @@
max-width: 100%;
height: auto;
}
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
/***Description***/
#Cystic\ Fibrosis6 h2 {
font-size: 1.5em !important;
}
#Our\ Vision h2 {
font-size: 1 em !important;
}
/*#breatht1 {
left: 0 !important;
position:initial!important;
font-size: 0.5em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
background-position: center 25%; /* Push the image down for better visibility */
height: 10px; /* Adjust the height for mobile screens */
}
/***contribution***/
.timeline-item{
padding-right: 0px !important;
padding-left: 5%;
width: 50% !important;
box-sizing: content-box;
text-align: left !important;
}
.timeline-item:nth-child(odd) {
align-self: flex-end !important;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
figure.snipp1113{
min-width: 0px !important ;
max-width: 120px ;
width: 100% ;
margin-left: 80px;
}
.timeline-item-content{
text-align:initial !important;
align-items: flex-end ;
padding-left: 30px;
font-display: initial !important;
display: flex;
position: inherit;
}
.timeline-item-content .tag{
padding: 0px !important;
}
/***engineering***/
.col-2{
width: 50% !important;
}
/***Description***/
.pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
}
.quiz-wrapper {
.quiz-wrapper {
flex-direction: column;
padding: 10px;
width: 100% !important; /* Set width to 100% for mobile screens */
}
.quiz-front, .quiz-back {
.quiz-front, .quiz-back {
padding: 10px !important;
}
.quiz-heading {
.quiz-heading {
font-size: 1.2em;
}
.quiz-text {
.quiz-text {
font-size: 1em;
margin-bottom: 10px !important;
word-wrap: break-word; /* Keep word breaking for mobile */
}
.quiz-button-box {
.quiz-button-box {
margin-top: 5px !important;
justify-content: space-evenly;
}
......@@ -180,9 +273,6 @@
.winner{
font-size: x-large;
}
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{
display: block !important;
}
......@@ -209,7 +299,7 @@ svg text{
.village-style-button{
box-shadow: 1px 1px 1px gray;
border-radius: 10px;
border-color: black;
border-color: var(--offblack);
padding: 10px;
}
......@@ -222,27 +312,24 @@ svg text{
padding-top: 10px;
padding-bottom: 5px;
}
h1 {
font-size: 1vw !important;
line-height: 1.0 !important;
}
h2, h3 {
font-size: 24px !important;
}
.bigtitle {
width: 450px !important;
height: 200px !important;
word-wrap: break-word;
}
.framecycletab{
margin-left: 0 !important;
}
body {
padding: 10px !important;
width: 202% ;
overflow-x: hidden; /* Prevents horizontal scrolling */
/* padding: 10px !important; */
width: 202% !important;
overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0;
padding: 0;
background-size: cover; /* Ensures the background scales to cover the entire screen */
background-position: center; /* Keeps the background centered */
background-size: cover !important; /* Ensures the background scales to cover the entire screen */
background-position: center !important; /* Keeps the background centered */
background-repeat: no-repeat;
}
......@@ -251,17 +338,34 @@ body {
max-width: 100% !important;
height: auto !important;
}
.container {
/*.container {
padding: 10px;
}
}*/
.row{
display: grid !important;
}
.full-col-phone{
width: 100vw !important;
}
}
/*For small Smartphones (iphone 13 or similars)*/
@media screen and (max-width: 400px){
.figure-wrapper:first-of-type img {
width: 100% !important; /* Full width on small screens */
height: 10% !important; /* Maintain aspect ratio */
max-width: 100% !important; /* Limit the image width to fit the screen */
margin: 0 auto; /* Center the image horizontally */
overflow: visible !important;
}
.figure-wrapper:first-of-type img{
text-align: center; /* Ensure the figure caption is centered */
}
/*For small Smartphones*/
@media screen and (max-width: 750px){
}
/* Big computer screens */
......
src/components/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
import { NoButtTimelineItem, PanelTimelineItem, TimelineItemPic, TimelineItemTwoPic } from "./VerticalTimeline";
import SimpleSlider from "./Slider";
import { ScrollLink, SupScrollLink } from "./ScrollLink";
import { useNavigation } from "../utils";
export function BFHTimeline () {
const {goToPagesAndOpenTab} = useNavigation();
return(
<>
<div className="timeline-container">
......@@ -41,11 +43,13 @@ export function BFHTimeline () {
csstag="talkonek"
vorname="Kristian"
nachname="Müller"
heading=""
text=""
heading="Gene Therapy, AAVs and Innovations in Synthetic Biology"
text="Prof. Dr. Kristian Müller from Bielefeld University reflects on his long-term involvement with the iGEM competition, emphasizing advancements in gene therapy, particularly using adeno-associated viruses (AAVs) as viral vectors for gene delivery. He discusses innovations in virus production and targeting, while acknowledging ongoing challenges such as product purity, production efficiency, and side effects. Additionally, he addresses recent developments in nanopore sequencing for quality control and the use of non-natural nucleotides and methylation to improve therapeutic outcomes."
>
<div id="talkonek" style={{display: "none"}}>
Ask Sinan
<p>Prof. Dr. Kristian Müller from Research Group Cellular and Molecular Biotechnology at the Technical Faculty of Bielefeld University, delivered an insightful presentation on the integration of AI and advanced biotechnology, focusing on the production and refinement of AAV vectors. The presentation highlighted how AI-driven innovations are transforming research methodologies, especially in areas such as AAV production, genetic targeting, and quality control. Prof. Dr. Müller showcased practical applications of AI in optimizing these biotechnological processes, making them more efficient, scalable, and precise, particularly in therapeutic applications.</p>
<p>The speaker began by drawing parallels between technological advancements in fields like space exploration and breakthroughs in genetic research, emphasizing the rapid progression within a short span of time. This context set the stage for discussing recent developments in AAV technology, where the application of AI has been pivotal. A key takeaway was how AI is being used to enhance the stability of viral vectors and optimize gene delivery, allowing for the production of high-quality AAV vectors with improved precision. Real-world examples, such as the use of AI to monitor genetic purity during nanopore sequencing and to streamline plasmid engineering processes, showcased the tangible impact of these technologies on therapeutic research. The discussion also highlighted the importance of collaborations between academia and industry, drawing parallels to the historic partnership that sparked the recombinant DNA revolution.</p>
<p>The presentation provided attendees with a deeper understanding of how AI can significantly enhance lab work, particularly in scaling up AAV production and ensuring the quality of therapeutic vectors. Participants left with valuable insights on leveraging AI and advanced technologies to drive their own research projects forward, especially in fields like gene therapy, plasmid engineering, and synthetic biology.</p>
</div>
</TimelineItemPic>
......@@ -189,9 +193,14 @@ export function BFHTimeline () {
<h5>Team project presentations</h5>
<div className="col bfh-slider">
<SimpleSlider>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7428-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7430-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7485-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7498-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7506-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7524-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7532-enhanced-nr.webp"/>
<img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7548-enhanced-nr.webp"/>
</SimpleSlider>
</div>
<span>
......@@ -317,8 +326,8 @@ export function BFHTimeline () {
<p>
Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them
using the skills learned in this workshop. Our team revised their plans for explaining gene editing to
children and started developing experiments to help them better understand cystic fibrosis, which we
presented later onto the public at “Der Teuto ruft!” [Link], an event in Bielefeld to connect the local
children and started developing experiments to help them better understand Cystic Fibrosis, which we
presented later onto the public at <a onClick={() => goToPagesAndOpenTab("teutoruft", "human-practices")}>“Der Teuto ruft!”</a>, an event in Bielefeld to connect the local
population with regional companies and institutes to inform them about their work - including our iGEM team!
</p>
<h6>References</h6>
......@@ -482,12 +491,12 @@ export function BFHTimeline () {
heading="ChatGPT and Large Language Models"
nachname="Vaquet"
vorname="Jonas"
text="At this year's BFH Meetup, experienced slammers and FameLab [Link] participants were once again able to take
text="At this year's BFH Meetup, experienced slammers and FameLab participants were once again able to take
to the stage and present their scientific topic as simply as possible in 5 minutes. "
>
<div id="slam1" style={{display: "none"}}>
<p>With Jonas Vaquet, a
research associate of the EU project ERC Waterfutures [Link], the audience explored Large Language Models
research associate of the EU project <a href="https://waterfutures.eu/project/">ERC Waterfutures</a>, the audience explored Large Language Models
(LLMs) such as ChatGPT. The speaker humorously engaged the crowd, asking who had used such models, and
nearly all hands were raised in response. </p>
<p>The speaker introduced ChatGPT, a "Generative Pre-trained Transformer," using an interactive experiment where
......
src/components/Boxes.tsx
View file @ 3fd292fd
......@@ -57,9 +57,9 @@ export function InfoBox({title, children, id}:{title: string, children: React.Re
{title}
</p>
<div className="v-card-text">
<p>
<div>
{children}
</p>
</div>
</div>
</aside>
)
......
src/components/Breathe.tsx
View file @ 3fd292fd
......@@ -94,13 +94,13 @@ export function Breathe(){
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}>
<p style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
......@@ -111,13 +111,13 @@ export function Breathe(){
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}>
<p style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p style={{'fontSize' : '2.5em'}}>breathe out...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
......@@ -128,17 +128,17 @@ export function Breathe(){
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
......@@ -150,7 +150,7 @@ export function Breathe(){
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div>
{/* black */}
......@@ -168,7 +168,7 @@ export function Breathe(){
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img>
<div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{
......@@ -179,10 +179,10 @@ export function Breathe(){
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div>
<p style={{'fontSize' : '2.5em'}}>Not everyone </p>
<p style={{'fontSize' : '2.5em'}}>can breathe freely.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>essential.</p>
{/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
......@@ -196,13 +196,13 @@ export function Breathe(){
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>Cystic Fibrosis.</b></p>
</div>
{/* grey */}
<div
......@@ -219,14 +219,14 @@ export function Breathe(){
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
<p style={{'fontSize' : '2.5em'}}>texttexttext</p>
<p style={{'fontSize' : '2.5em'}}>texttexttext,</p>
<p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
<p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p id="breatht"style={{'fontSize' : '2.5em'}}>on their own.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
......
src/components/Buttons.tsx
View file @ 3fd292fd
......@@ -31,7 +31,7 @@ export function Villbuttonrow(){
<div className="small-row align-items-center bottom-buttons">
<Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
<Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
<Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
<Villagebutton page="/materials-methods?scrollTo=introduction" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Methods"></Villagebutton>
<Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
<Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
<Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
......@@ -75,7 +75,7 @@ const handleDownload = () => {
return (
<a type="button" onClick={handleDownload} className="download-butt">
Download
<span>Download</span>
</a>
);
......@@ -104,7 +104,7 @@ export const DownloadImageButton = ({ url, fileName, children}: {url: string, fi
return (
<a type="button" onClick={handleDownload} className="download-butt">
<a type="button" onClick={handleDownload} className="download-butt-image">
{children}
</a>
......@@ -114,7 +114,7 @@ return (
export function TabButtonRow({data, classy, opentype, closing}: {data: Array<TabDatensatz>, classy?: string, opentype: string, closing: string}){
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
if(classy){
rows.push(<TabButton classy={classy} type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>)
......@@ -136,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
if (!classy){
classy = ""
}
let classname = "tabbutton " + type + " " + classy;
let classname = "btn1 tabbutton " + type + " " + classy;
return(
<>
<button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button>
......@@ -144,16 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
)
}
export function HPMoreButton({name}: {name: string}){
let c = "timelinepersontabs"
export function BFHMoreButton({it}: {it: string}){
return(
<button className="tablinks hp-more-button" onClick={openElement({elementToOpen: name, classToHide: c, buttonClass: "tabbutton"})}> More</button>
<button className="tablinks btn1" onClick={expandIt({it})}> More</button>
)
}
export function BFHMoreButton({it}: {it: string}){
export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){
const {goToPageWithTabAndScroll} = useNavigation();
return(
<button className="tablinks bfh-more-button" onClick={expandIt({it})}> More</button>
<button className="tablinks btn1" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button>
)
}
......@@ -173,48 +175,17 @@ function expandIt({it}: {it: string}){
export function ButtonThree(){
return(
<div className="boxy-3">
<div className="btn-new btn-three">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonTwo(){
return(
<div className="boxy-2">
<div className="btn-new btn-two">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
const { goToPagesAndOpenTab } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
<a onClick={() => goToPagesAndOpenTab(open, "")}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
<button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
)
}
else{
return(
<div className="boxy-1">
<span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div></span>
</div>
<button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
)
}
}
......@@ -223,13 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
const { goToPageWithTabAndScroll } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
<a onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
<button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
)
}
else{
......@@ -247,12 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
return(
<div className="boxy-1">
<span typeof="button" onClick={openThem({it: open, scrollToId})}>
<div className="btn-new btn-one">
{label}
</div></span>
</div>
<button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
)
}
......