Skip to content
Snippets Groups Projects
Commit 83b02332 authored by Kaya Lange's avatar Kaya Lange
Browse files

Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

parents fb757eed afeb5fdb
No related branches found
No related tags found
No related merge requests found
Pipeline #442719 failed
Stage: build
Expand all Hide whitespace changes
Inline Side-by-side
src/components/Breathe.tsx
+ 139
− 90
View file @ 83b02332
......@@ -47,139 +47,188 @@ export function Breathe(){
observer.observe(domRef5.current!);
}, []);
const Title1 = "Cystic Fibrosis";
const Title2 = "makes life breathtaking";
const Prob11 = "Thick mucus blocking airway and prevents"
const Prob12 = "oxygen absorption, leading to bronchial"
const Prob13 = "obstructions, organ failure an death";
const Prob21 = "Chronic inflammation occurs periodically";
const Prob22 = "due to a high vulnerability to";
const Prob23 = "bacterial and viral infections";
const Prob31 = "Heightened safety considerations and";
const Prob32 = "emotional stress promote depression";
const Prob33 = "and psychological issues";
const [isVisible6, setVisible6] = useState(false);
const domRef6 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible6(entry.isIntersecting));
});
observer.observe(domRef6.current!);
}, []);
const [isVisible7, setVisible7] = useState(false);
const domRef7 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible7(entry.isIntersecting));
});
observer.observe(domRef7.current!);
}, []);
const [isVisible8, setVisible8] = useState(false);
const domRef8 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible8(entry.isIntersecting));
});
observer.observe(domRef8.current!);
}, []);
return (
<>
{/* One */}
{/* purple */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
style={{ 'height': '700vh'}}
ref={domRef}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp">
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img>
</div>
{/* Two */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
{/* 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>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '22.5vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
</div>
{/* Three */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
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>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
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>
{/* 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>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div>
{/* Four */}
{/* black */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
style={{ 'height': '300vh'}} ref={domRef5}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
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 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> */}
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
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>
</div>
{/* Five */}
{/* grey */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
style={{ 'height': '200vh'}} ref={domRef8}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
</div>
</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>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
);
}
\ No newline at end of file
}
src/components/Buttons.tsx
+ 3
− 3
View file @ 83b02332
......@@ -25,7 +25,7 @@ export function Villagebutton({ title, source, page }: { title: string; source:
</Link>
)
}
export function Villbuttonrow(){
return(
<div className="small-row align-items-center bottom-buttons">
......@@ -34,8 +34,8 @@ export function Villbuttonrow(){
<Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></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=obeninsafety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
<Villagebutton page="/results?tab=resultheading" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
<Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
<Villagebutton page="/results?tab=Abstract" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
</div>
)
}
......
src/components/Problems.tsx
+ 20
− 38
View file @ 83b02332
......@@ -51,10 +51,10 @@ export function Problems(){
const Title2 = "makes life breathtaking";
const Prob11 = "Thick mucus blocking airway and prevents"
const Prob12 = "oxygen absorption, leading to bronchial"
const Prob13 = "obstructions, organ failure an death";
const Prob13 = "obstructions, organ failue an death";
const Prob21 = "Chronic inflammation occurs periodically";
const Prob22 = "due to a high vulnerability to";
const Prob23 = "bacterial and viral infections";
const Prob22 = "due to a high vulnerability ";
const Prob23 = "to bacterial and viral infections";
const Prob31 = "Heightened safety considerations and";
const Prob32 = "emotional stress promote depression";
const Prob33 = "and psychological issues";
......@@ -100,11 +100,9 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
</div>
{/* Three */}
<div
......@@ -125,14 +123,10 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
</div>
{/* Four */}
<div
......@@ -153,17 +147,11 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
</div>
{/* Five */}
<div
......@@ -184,17 +172,11 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
</div>
......
src/contents/Human Practices/Further Engagement/Collaborations.tsx
+ 1
− 1
View file @ 83b02332
......@@ -23,7 +23,7 @@ export function HPCollabs(){
<LoremMedium/>
</div>
<div id="colls2024" className="coll-cycletab" style={{display: "none"}}>
<H4 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
<H4 id="student-academy-heading" text="Collaboration with Lingköping"/>
<LoremMedium/>
</div>
<div id="Handbook" className="coll-cycletab" style={{display: "none"}}>
......
src/contents/safety.tsx
+ 145
− 63
View file @ 83b02332
This diff is collapsed.
src/contents/team.tsx
+ 4
− 4
View file @ 83b02332
......@@ -7,8 +7,8 @@ import { Section } from "../components/sections";
export function Team() {
useTabNavigation();
let teambriefe = createSteckbriefe(teammembers);
let advisorbriefe = createSteckbriefe(advisors);
let sinan = createSteckbriefe(instructor);
let advisorbriefe = createPiSteckbriefe(advisors);
let sinan = createPiSteckbriefe(instructor);
let pibriefe = createPiSteckbriefe(pis)
return (
<>
......@@ -108,7 +108,7 @@ function createSteckbriefe(data: Array<SteckbriefInterface>){
let facts = <div className={frontbriefclass}><div className=""> <b>Age:</b> {data[index].age} </div> <br/> {headof} <div> <b>Part of:</b> {jobs}</div> <br/> <div className=""> <b>Major:</b> {data[index].studiengang} </div> <br/> <div className=""> <b>Scientific interests:</b> {data[index].scientificinterests} </div> </div>;
let backbutton = <div className={backbriefclass} style={{display: "none"}}> <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></div>
let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
let favmusic = <><h6>Favourite music:</h6><p>{data[index].favlabmusic}</p></>
let favmusic = <><h6>Favourite lab music:</h6><p>{data[index].favlabmusic}</p></>
let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div>
let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
......@@ -203,7 +203,7 @@ function createPiSteckbriefe(data: Array<SteckbriefInterface>){
let facts = <div className={frontbriefclass}><div className=""> <b>Age:</b> {data[index].age} </div> <br/> {headof} <div> <b>Affiliation:</b> {jobs}</div> <br/> <div className=""> <b>Regular Job:</b> {data[index].studiengang} </div> <br/> <div className=""> <b>Scientific interests:</b> {data[index].scientificinterests} </div> </div>;
let backbutton = <div className={backbriefclass} style={{display: "none"}}> <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></div>
let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
let favmusic = <><h6>Favourite music:</h6><p>{data[index].favlabmusic}</p></>
let favmusic = <><h6>Favourite lab music:</h6><p>{data[index].favlabmusic}</p></>
let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div>
let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
......
src/data/drug-data.tsx
+ 3
− 3
View file @ 83b02332
export interface DrugDatensatz {
name: string;
picture: string;
introduction: string;
examples: Array<example>;
......@@ -9,7 +9,7 @@ export interface DrugDatensatz {
interface example{
title: string,
text: string
text: "ystic fibrosis therapy means inevitably a complex and customized treatment plan for each patient. It consists of a range of components. These include medication such as CFTR modulators and antibiotics as well as inhalation therapy and mucolytics, physiotherapy, nutritional therapy and sports therapy. It is therefore essential that CF patients receive treatment at a specialist centre [1]. "
}
export const drugdata: (Array<DrugDatensatz>) = [
......@@ -20,7 +20,7 @@ export const drugdata: (Array<DrugDatensatz>) = [
examples: [
{
title: "",
text: "string"
text: "test"
},
{
title: "",
......
src/sidebars/engS.tsx
+ 25
− 24
View file @ 83b02332
......@@ -2,6 +2,7 @@ import { useEffect } from "react";
import { NewHighlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
import { BackUp } from "../components/Buttons";
import { useNavigation } from "../utils";
export function EngSide(){
......@@ -26,7 +27,7 @@ export function EngSide(){
}
console.log(nums)
const {goToPageWithTabAndScroll} = useNavigation();
return(
<div className="col-2 d-none d-lg-block" >
<br/>
......@@ -51,23 +52,23 @@ export function EngSide(){
<summary>Proof Of Concept</summary>
<span id="proof-of-concept" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#cyc1">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc1"})}>
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#cyc2">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc2"})}>
<span id="subtitle1" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#cyc3">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc3"})}>
<span id="subtitle2" className='sideitem'>Iteration 3</span>
</a></li>
<li><a href="#cyc4">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc4"})}>
<span id="subtitle3" className='sideitem'>Iteration 4 </span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</a>
</div>
<div>
<a onClick={openThem({it: "pe-systems", scrollToId: "PE Systems"})}>
......@@ -76,13 +77,13 @@ export function EngSide(){
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#pe1">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle4" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#pe2">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle5" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#pe3">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle6" className='sideitem'>Iteration 3</span>
</a></li>
</ul>
......@@ -98,22 +99,22 @@ export function EngSide(){
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#nik1">
<li ><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik1"})}>
<span id="subtitle7" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#nik2">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik2"})}>
<span id="subtitle8" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#nik3">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik3"})}>
<span id="subtitle9" className='sideitem'>Iteration 3</span>
</a></li>
<li><a href="#nik4">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik4"})}>
<span id="subtitle10" className='sideitem'>Iteration 4</span>
</a></li>
<li><a href="#nik5">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik5"})}>
<span id="subtitle11" className='sideitem'>Iteration 5</span>
</a></li>
<li><a href="#nik6">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik6"})}>
<span id="subtitle12" className='sideitem'>Iteration 6</span>
</a></li>
</ul>
......@@ -129,22 +130,22 @@ export function EngSide(){
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#peg1">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg1"})}>
<span id="subtitle13" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#peg2">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg2"})}>
<span id="subtitle14" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#peg3">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg3"})}>
<span id="subtitle15" className='sideitem'>Iteration 3</span>
</a></li>
<li><a href="#peg4">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg4"})}>
<span id="subtitle16" className='sideitem'>Iteration 4</span>
</a></li>
<li><a href="#peg5">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg5"})}>
<span id="subtitle17" className='sideitem'>Iteration 6</span>
</a></li>
<li><a href="#peg6">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg6"})}>
<span id="subtitle18" className='sideitem'>Iteration 7</span>
</a></li>
</ul>
......@@ -160,13 +161,13 @@ export function EngSide(){
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a href="#del2">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle19" className='sideitem'>Iteration 1</span>
</a></li>
<li><a href="#del2">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle20" className='sideitem'>Iteration 2</span>
</a></li>
<li><a href="#del3">
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle21" className='sideitem'>Iteration 3</span>
</a></li>
</ul>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment