src/components/Buttons.tsx

@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
 import { openFromOtherPage } from "../utils/openFromOtherpAge";
 import { openThem } from "../utils/openThem";
 import { openElement } from "../utils/openElement";
+import { useNavigation } from "../utils/useNavigation";
 interface UrlButtonProps{
     href: string,
     children: string,
@@ -24,17 +25,17 @@ export function Villagebutton({ title, source, page }: { title: string; source:
       </Link>
   )
 }
-
+ 
 export function Villbuttonrow(){
   return(
       <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=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>  
   )
 }
@@ -71,19 +72,49 @@ const handleDownload = () => {
         console.error("Error fetching the file:", error);
     });
 };
+return (
+
+  <a type="button" onClick={handleDownload} className="download-butt">
+      <span>Download</span>
+  </a>
+
+);
+};
+
+export const DownloadImageButton = ({ url, fileName, children}: {url: string, fileName: string, children: React.ReactNode}) => {
+  const handleDownload = () => {
+      fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+          const url = window.URL.createObjectURL(new Blob([blob]));
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = fileName || "downloaded-file";
+          document.body.appendChild(link);
+  
+          link.click();
+  
+          document.body.removeChild(link);
+          window.URL.revokeObjectURL(url);
+      })
+      .catch((error) => {
+          console.error("Error fetching the file:", error);
+      });
+  };
   
 return (
 
-    <a type="button" onClick={handleDownload} className="download-butt">
-        Download
+    <a type="button" onClick={handleDownload} className="download-butt-image">
+        {children}
     </a>
 
 );
 };
 
 
+
 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}/>)
@@ -105,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>
@@ -113,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>
   )
 }
 
@@ -142,55 +175,44 @@ 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(
+      <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
+    )
+    
+  }
+  else{
+    return(
+        <button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
+    )
+  }
 }
 
-export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
+export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:string, scrollId: string,  open:string, openclass?: string}){
+  const { goToPageWithTabAndScroll } = useNavigation();
   if (openclass) {
+    return(
+        <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
+    )
+  }
+  else{
     return(
       <div className="boxy-1">
-        <span typeof="button" onClick={openFromOtherPage(open, openclass)}>
+        <span typeof="button" onClick={openFromOtherPage(open)}>
         <div className="btn-new btn-one">
         {text}
         </div></span>
       </div>
     )
-    
   }
-  return(
-    <div className="boxy-1">
-      <span typeof="button" onClick={openFromOtherPage(open)}>
-      <div className="btn-new btn-one">
-      {text}
-      </div></span>
-    </div>
-  )
 }
-export function ButtonOneEngineering({label, open}: {label:string, open:string}){
+
+
+export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
   return(
-    <div className="boxy-1">
-      <span typeof="button" onClick={openThem({it: open})}>
-      <div className="btn-new btn-one">
-      {label}
-      </div></span>
-    </div>
+    <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
   )
 }
 
@@ -223,9 +245,59 @@ export function ButtonFourRotate(){
 }
 
 
+export function BackUp(){
+  return(
+    <>
+    <br/>
+        <div className="col" id="eng-backup" style={{display: "flex", alignItems: "right"}}>
+            <a onClick={() => scrollUpWithOffset()} className="backtotop">
+                Back to Top &#8593;
+            </a>
+        </div>  
+    </>
+  )
+}
 
+function scrollUpWithOffset() {
+  if (typeof window !== 'undefined') {
+    const offset = window.innerHeight  ; // 50% der Viewport-Höhe
+    const targetScrollPosition = Math.max(0,  offset); // Neue Scroll-Position, aber nicht unter 0
 
+    console.log(`Scrolling up to position: ${targetScrollPosition}`);
+    window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
+  }
+}
 
 
+export function ShowSolution({element}: {element: string}){
 
-    
+  return(
+    <button onClick={flip(element)} className="quiz-button">Show solution</button>
+  )
+}
+
+export function HideSolution({element}: {element: string}){
+  return(
+    <button onClick={flipBack(element)} className="quiz-button">Return to question</button>
+  )
+}
+
+function flip(element: string){
+  const flipp = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    let elementToHide = document.getElementById("front-"+element);
+        (elementToHide as HTMLElement).style.display = "none";
+    let elementToFind = document.getElementById("back-"+element);
+      (elementToFind as HTMLElement).style.display = "block";
+  }
+  return flipp; 
+}
+
+function flipBack(element: string){
+  const flippback = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    let elementToHide = document.getElementById("back-"+element);
+        (elementToHide as HTMLElement).style.display = "none";
+    let elementToFind = document.getElementById("front-"+element);
+      (elementToFind as HTMLElement).style.display = "block";
+  }
+  return flippback;  
+}

src/components/FadeIn.tsx

@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
             <div className='col' style={{ 'height': '95vh' }}></div>
         </>
     );
-}
\ No newline at end of file
+}
+

src/components/Fanzorviewer.tsx

-import React, { useEffect } from 'react';
+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(() => {
-    //Set up the scene, camera, and renderer
     const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); // Adjust aspect ratio if needed
     const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
 
-    //Add lighting to the scene
+    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 = 5; // Adjust the camera position
-    //Render loop
+    camera.position.z = 10; 
+
+    // Render loop
     const animate = () => {
       requestAnimationFrame(animate);
       renderer.render(scene, camera);
@@ -25,11 +31,23 @@ export const ProteinViewer: React.FC = () => {
 
     // Clean up on component unmount
     return () => {
-      document.body.removeChild(renderer.domElement);
+      if (viewerRef.current) {
+        viewerRef.current.removeChild(renderer.domElement);
+      }
     };
   }, []);
 
-  return null; // No JSX to return as we're appending the canvas directly to the body
+  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/Footer.tsx

@@ -48,7 +48,7 @@ export function Footer() {
             </a>
           </div>
           <div className="small-none col" style={{paddingLeft: "20px"}}>
-            <h6>Former iGem Bielefeld teams</h6>
+            <h6>Former iGEM Bielefeld teams</h6>
           </div>
         </div>
       </div>
@@ -56,12 +56,12 @@ export function Footer() {
     <div className="small-row align-items-center">
       <div className="col-sm-4">
           <div className="col">
-            info@igem-bielefeld.de
+            info[at]igem-bielefeld[dot]de
           </div>
           <div className="col"> </div>
           <div className="col">
             iGEM2024
-            Universitätsstraße 25, 33613 Bielefeld
+            Universitätsstraße 25, 33615 Bielefeld
             Centrum für Biotechnologie (CeBiTec)
             Universität Bielefeld
           </div> 
@@ -70,37 +70,40 @@ export function Footer() {
       <div className="col-4 footer-slider">
         <SimpleSlider>
             <a className="sponsor-container" href="https://www.plasmidfactory.com/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
             </a>
+            <a className="sponsor-container" href="https://bio.nrw.de/">
+                <img className="img-sponsor-partner-page side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bionrw-logo.png"/>
+              </a>
             <a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
             </a>
             <a className="sponsor-container" href="https://www.jenabioscience.com/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
             </a>
             <a className="sponsor-container" href="https://www.gip.com/home/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
             </a>
             <a className="sponsor-container" href="https://www.integra-biosciences.com">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
             </a>
             <a className="sponsor-container" href="https://www.uni-bielefeld.de/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
             </a>
             <a className="sponsor-container" href="www.snapgene.com">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
             </a>
             <a className="sponsor-container" href="https://bts-ev.de/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
             </a> 
             <a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
             </a>
             <a className="sponsor-container" href="www.idtdna.com">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
             </a>
             <a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/">
-                  <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
+                  <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
             </a>
           </SimpleSlider>
       </div>

src/components/HP-timeline.tsx

 import { TabButtonRow } from "./Buttons";
-import TimeHori from "./HorizontalTimeline";
+import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
-import { timelinedata } from "./data/hptimelinedata";
+import { timelinedata } from "../data/hptimelinedata";
 export function HPTimeline(){
     return(
       <section id="Timeline" className="section">
+        <p>Feel free to scroll trough our timeline and learn more about our extensive human-centric approach!</p>
         <div className="center">
         </div> 
         <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
@@ -18,7 +19,9 @@ export function HPTimeline(){
     {
       buttonname: "All", 
       node: <TimeHori tab="" ></TimeHori>, 
-      cssname: "First"
+      cssname: "First",
+      main: true
+      
     },
     { 
       node: <TimeHori tab="Patient" ></TimeHori>,
@@ -39,7 +42,23 @@ export function HPTimeline(){
       node: <TimeHori tab="Industry" ></TimeHori>,
       buttonname: "Industry", 
       cssname: "Industry"
-    }
+    },
+    { 
+      node: <TimeHori tab="Milestone" ></TimeHori>,
+      buttonname: "Milestones", 
+      cssname: "Milestone"
+    },
+   { 
+      node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
+      buttonname: "Education & Outreach", 
+      cssname: "Education"
+    },
+    /*
+    { 
+      node: <TimeHori tab="Outreach" ></TimeHori>,
+      buttonname: "Outreach", 
+      cssname: "Outreach"
+    } */
   ]
   
 

src/components/HeaderBox.tsx

 import { Hwave } from "./Headings";
 
 interface Props{
-    title: string,
+    title: string ,
     title2?: string,
     children?: React.ReactNode,
+    id: string
 }
 
-export default function HeaderBox({children, title, title2}: 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="row header-title">
+            <div className="row header-title" id={id}>
               <Hwave text={title}></Hwave>
               <Hwave text={ti}></Hwave>