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
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 6246 additions and 303 deletions
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>
)
......@@ -77,4 +77,34 @@ export function WarnBox({title, children}:{title: string, children: React.ReactN
</div>
</aside>
)
}
export function BlueInfoBox({title, children}:{title: string, children: React.ReactNode}){
return(
<aside className="hint-container danger">
<p className="hint-container-title">
{title}
</p>
<div className="v-card-text">
<p>
{children}
</p>
</div>
</aside>
)
}
export function NoteBox({title, children, id}:{title: string, children: React.ReactNode, id: string}){
return(
<aside className="hint-container note" id={id}>
<p className="hint-container-title">
{title}
</p>
<div className="v-card-text">
<p>
{children}
</p>
</div>
</aside>
)
}
\ No newline at end of file
src/components/Breathe.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function Breathe(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
const [isVisible2, setVisible2] = useState(false);
const domRef2 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible2(entry.isIntersecting));
});
observer.observe(domRef2.current!);
}, []);
const [isVisible3, setVisible3] = useState(false);
const domRef3 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible3(entry.isIntersecting));
});
observer.observe(domRef3.current!);
}, []);
const [isVisible4, setVisible4] = useState(false);
const domRef4 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible4(entry.isIntersecting));
});
observer.observe(domRef4.current!);
}, []);
const [isVisible5, setVisible5] = useState(false);
const domRef5 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible5(entry.isIntersecting));
});
observer.observe(domRef5.current!);
}, []);
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 (
<>
{/* purple */}
<div
className='col'
style={{ 'height': '700vh'}}
ref={domRef}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
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 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',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
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 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',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
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 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 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',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div>
{/* black */}
<div
style={{ 'height': '300vh'}} ref={domRef5}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
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={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div>
<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> */}
<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'}`
}}
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 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
style={{ 'height': '200vh'}} ref={domRef8}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
<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
This diff is collapsed.
src/components/Calendar/Calendar.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Calendar/cal-content.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Card.tsx deleted 100644 → 0
View file @ b98b99a1
import React from 'react';
export const Card = ({children}: CardProps) => {
return (
<div className="card-col">
{children}
</div>
);
}
interface CardProps {
children: React.ReactNode
}
export default Card;
\ No newline at end of file
src/components/code.tsx → src/components/Code.tsx
View file @ 3fd292fd
File moved
src/components/Complex-svg.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/diagram.tsx → src/components/Diagram.tsx
View file @ 3fd292fd
File moved
src/components/Event.tsx deleted 100644 → 0
View file @ b98b99a1
import React from 'react';
import Card from './Card';
import { joinClassNames } from './classNames';
interface EventProps{
children?: React.ReactNode;
date: string;
text: string;
marker?: React.ReactNode;
className: string;
card?: Function;
layout: string;
id?: string;
}
export default function Event({ date, children, className, card, layout, id}: EventProps) {
let CardComponent;
if (typeof card === 'function') {
CardComponent = card({ date, children });
} else {
CardComponent = <Card children={children}/>;
}
const classNames = joinClassNames({classNames:['event', className, layout]});
return (
<div className={classNames}>
<div className={`card-col`} id={id}>{CardComponent}</div>
</div>
);
}
src/components/FadeIn.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
return (
<>
<div
className='col'
style={{ 'height': '100vh'}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
src={bg}>
</img>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
src={filepath}>
</img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div>
</>
);
}
src/components/Fanzorviewer.tsx 0 → 100644
View file @ 3fd292fd
import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';
export const ProteinViewer: React.FC = () => {
const viewerRef = useRef<HTMLDivElement>(null); // Ref for the div container
useEffect(() => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); // Adjust aspect ratio if needed
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(100, 100); // Set a smaller size
if (viewerRef.current) {
viewerRef.current.appendChild(renderer.domElement);
}
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 2);
scene.add(light);
camera.position.z = 10;
// Render loop
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
// Clean up on component unmount
return () => {
if (viewerRef.current) {
viewerRef.current.removeChild(renderer.domElement);
}
};
}, []);
return (
<div
ref={viewerRef}
style={{
width: '100px', // Smaller width
height: '100px', // Smaller height
margin: '0 auto', // Center it if you want
border: '1px solid #ddd', // Optional: border around the viewer
}}
/>
);
};
export default ProteinViewer;
\ No newline at end of file
src/components/Figures.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/Footer.tsx
View file @ 3fd292fd
This diff is collapsed.
src/components/Graph.tsx
View file @ 3fd292fd
This diff is collapsed.
src/components/HP-tabs.tsx 0 → 100644
View file @ 3fd292fd
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
import React from "react";
export function HPTabs(){
const [value, setValue] = React.useState('1');
const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
setValue(newValue);
};
return(
<Box sx={{ width: '100%', typography: 'body1' }}>
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Patient Needs" value="1" />
<Tab label="Scientific Challenges" value="2" />
<Tab label="Academic consideration" value="3" />
<Tab label="Ethical questions" value="4" />
<Tab label="Medical perspectives" value="5" />
</TabList>
</Box>
<TabPanel value="1"> </TabPanel>
<TabPanel value="2"> </TabPanel>
<TabPanel value="3"> </TabPanel>
<TabPanel value="4"> </TabPanel>
<TabPanel value="5"> </TabPanel>
</TabContext>
</Box>
)
}
export function HPTabsTwo(){
return(
<>
<div className="row align-items-center">
<div className="col"></div>
<div className="col-8">
<div className="methods-node">
<div>Project selection</div>
</div>
<div className="methods-node">
<div>Foundation</div>
</div>
<div className="methods-node">
<div>Diversification</div>
</div>
<div className="methods-node">
<div>Fine-tuning</div>
</div>
<div className="methods-node">
<div>Finalization</div>
</div>
</div>
<div className="col"></div>
</div>
<div className="row align-items-center">
<div className="col-3">
</div>
<div className="col">
</div>
</div>
</>
)
}
\ No newline at end of file
src/components/HP-timeline.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/header-box.tsx → src/components/HeaderBox.tsx
View file @ 3fd292fd
import { Hpopart } from "./headings";
import { Hwave } from "./Headings";
interface Props{
title: string,
title: string ,
title2?: string,
children?: React.ReactNode,
id: string
}
export default function HeaderBox({children, title}: Props ){
export default function HeaderBox({children, title, title2, id}: Props ){
var ti: string = "";
if (title2) {
ti = title2;
}
return(
<>
<div className="row">
<div className="col">
<div className="col header-container">
<div className="header-title">
<Hpopart text={title}></Hpopart>
<div className="row header-title" id={id}>
<Hwave text={title}></Hwave>
<Hwave text={ti}></Hwave>
</div>
{children}
</div>
......
src/components/HomeAnimation.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.