.env

 VITE_TEAM_ID=5247
 VITE_TEAM_NAME=Bielefeld-CeBiTec
-VITE_TEAM_YEAR=2024
+VITE_TEAM_YEAR=2024
\ No newline at end of file

.gitignore

@@ -2,10 +2,21 @@ env
 venv
 .vscode
 __pycache__
-public
 .venv
+code/biblib-master
 node_modules
 versions
-code
 .vite
-app.py
\ No newline at end of file
+app.py
+unused.py
+unused-css-master
+my-chart-test
+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

.gitlab-ci.yml

@@ -3,17 +3,28 @@ image: node:18.20.0
 build:
   stage: build
   cache:
-    - key:
-        files:
-          - yarn.lock
+    - key: $CI_COMMIT_REF_SLUG
+        
       paths:
         - .yarn-cache/
   before_script:
     - echo 'yarn-offline-mirror ".yarn-cache/"' >> .yarnrc
     - echo 'yarn-offline-mirror-pruning true' >> .yarnrc
+    - apt-get update && apt-get install -y libpangocairo-1.0-0
     - yarn install --frozen-lockfile
+    - echo "$VITE_TEAM_NAME"
+    - echo "Environment variables:"
+    - printenv
+    - echo "Node version:"
+    - node -v
+    - echo "npm version:"
+    - npm -v
+    - echo "Installed packages:"
+    - yarn list
+
   script:
     - yarn build
+    - mv dist public
   rules:
     - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH
 
@@ -28,11 +39,12 @@ pages:
   before_script:
     - echo 'yarn-offline-mirror ".yarn-cache/"' >> .yarnrc
     - echo 'yarn-offline-mirror-pruning true' >> .yarnrc
+    - apt-get update && apt-get install -y libpangocairo-1.0-0
     - yarn install --frozen-lockfile
   script:
     - yarn build
-    - cp -a dist/. public/
-    - echo '/* /index.html 200' > public/_redirects
+    - mv dist public #Ensure the output directory is renamed to public
+    - echo '/* /index.html 200' > public/_redirects #original
   artifacts:
     paths:
       - public

README.md

@@ -6,64 +6,38 @@ Images, photos, icons and fonts **MUST** be stored on `static.igem.wiki` using [
 
 For up-to-date requirements, resources, help and guidance, visit [competition.igem.org/deliverables/team-wiki](https://competition.igem.org/deliverables/team-wiki).
 
-## Getting started
 
-You should probably only edit the files inside folders `static`, `wiki` and `wiki > pages`.
-1. Open the Web IDE
-2. Make the changes on the files you wish:
-    * For the menu, change the file [menu.html](wiki/menu.html)
-    * For the layout, change the file [layout.html](wiki/layout.html)
-    * For the pages, change the corresponding file in the foler [pages](wiki/pages)
-3. Review the changes you made
-4. Once you are done, save the changes by **committing** them to the *main branch* of the repository 
-5. An automated script will build, test and deploy your wiki, which should take less than 30 seconds.
-
-## About this Template
 
 ### Files
 
 The static assets are in the `static` directory. The layout and templates are in the `wiki` directory, and the pages live in the `wiki > pages` directory. Unless you are an experienced and/or adventurous human, you probably shouldn't change other files.
 
-    |__ static/             -> static assets (CSS and JavaScript files only)
-    |__ wiki/               -> Main directory for the pages and layouts
-        |__ footer.html     -> Footer that will appear in all the pages
-        |__ layout.html     -> Main layout of your wiki. All the pages will follow its structure
-        |__ menu.html       -> Menu that will appear in all the pages
-        |__ pages/          -> Directory for all the pages
-            |__ *.html      -> Actual pages of your wiki
-    |__ .gitignore          -> Tells GitLab which files/directories should not be uploaded to the repository
-    |__ .gitlab-ci.yml      -> Automated flow for building, testing and deploying your website.
-    |__ LICENSE             -> License CC-by-4.0, all wikis are required to have this license - DO NOT MODIFY
-    |__ README.md           -> File containing the text you are reading right now
-    |__ app.py              -> Python code managing your wiki
-    |__ dependencies.txt    -> Software dependencies from the Python code
-
-### Technologies
-
-  * [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/)
-  * [Python](https://www.python.org): Programming language
-  * [Flask](https://palletsprojects.com/p/flask/): Python framework
-  * [Fronzen-Flask](https://pythonhosted.org/Frozen-Flask): Library that builds the wiki to be deployed as a static website
-  * [Bootstrap](https://getbootstrap.com/docs/5.0/components): CSS and JS components used
-
-### Building locally (advanced users)
-
-To work locally with this project, follow the steps below:
-
-#### Install
-```bash
-git clone https://gitlab.igem.org/2024/bielefeld-cebitec.git
-cd bielefeld-cebitec
-python3 -m venv venv
-. venv/bin/activate # on Linux, MacOS; or
-. venv\Scripts\activate # on Windows
-pip install -r dependencies.txt
-```
+├── README.md                       -> The file you are currently reading
+├── public
+|   ├── index.html                  -> Single HTML file for the wiki
+├── package.json                    -> Manages project metadata and dependencies
+├── src/
+│   ├── components/                 -> Components (Like Navbar, Timelines, ...)
+│   ├── App/                        -> Main React application container
+|   |     ├── App.tsx
+|   |     └── App.css
+│   ├── contents/                   -> Page components for the website
+│   │   ├── *.tsx                   
+│   │   └── index.ts                -> Declaration file 
+│   ├── main.tsx                    -> Entry point of the wiki application
+│   ├── pages.ts                    -> Page definition and path mapping
+│   ├── utils/                      -> Utility functions
+|   |       ├── *.js                -> Extra js files
+|   |       └── *.ts                -> Given ts files 
+│   └── vite-env.d.ts               -> TypeScript definitions for Vite
+├── tsconfig.json                   -> Configures TypeScript options
+├── tsconfig.node.json              -> TypeScript settings for Node.js
+├── vite.config.ts                  -> Configuration for the Vite tool
+└── yarn.lock                       -> Yarn lock file for dependency management
+
+
+
 
-#### Execute
-```bash
-python app.py
-```
 
 Read me changed for test
 Kaya was here
@@ -75,6 +49,27 @@ hellooo it's mee, Flip :D
 
 
 
+### Local run 
+#### Install npm 
+For that, we have to install Node.js from https://nodejs.org/en/download/package-manager
+Close Terminal and open again
+check installation with: 
+  node -v
+  npm -v
+Close VSC and open it again
+#### Install yarn
+npm install --global yarn
+
+#### Navigate to folder and install dependencies
+cd bielefeld-cebitec
+yarn install
+
+#### Run 
+yarn run dev
+
+
+
+
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
 
 npm install @mui/material @emotion/react @emotion/styled
@@ -88,8 +83,35 @@ yarn add react-pdf
 npm install --save react-grid-gallery
 
 
-Argument of type 'ImageExtendedRow<T>[]' is not assignable to parameter of type 'ConcatArray<never>[]'.
-  Type 'ImageExtendedRow<T>' is not assignable to type 'ConcatArray<never>'.
-    The types returned by 'slice(...)' are incompatible between these types.
-      Type 'ImageExtended<T>[]' is not assignable to type 'never[]'.
-        Type 'ImageExtended<T>' is not assignable to type 'never'.
\ No newline at end of file
+Argument of type 'DSVRowArray<string>' is not assignable to parameter of type 'SetStateAction<never[]>'.
+  Type 'DSVRowArray<string>' is not assignable to type 'never[]'.
+    The types returned by 'pop()' are incompatible between these types.
+      Type 'DSVRowString<string> | undefined' is not assignable to type 'undefined'.
+        Type 'DSVRowString<string>' is not assignable to type 'undefined'.
+
+        Hallo ich bins
+        Hallo ich bins nochmal
+        Overwritten 
+        Overwritten 
+change2
+
+
+fnm env --use-on-cd | Out-String | Invoke-Expression
+fnm use --install-if-missing 18
+npm install -g yarn
+
+evtl: 
+yarn install
+
+
+
+
+
+kathleen
+malte
+Anna
+Vera:)
+isabell
+felicitas
+Christian
+Kai
\ No newline at end of file

code/cit.py

+# Voraussetzungen
+#- Python 3.x
+#- bibtexparser (Installieren Sie es mit `pip install bibtexparser`)
+# use like:  python3 cit.py -i bibtex.bib -s 1
+import re
+problemlist = []
+
+def main(): 
+
+    print("Starting program...")
+    try:
+        import bibtexparser
+    except ImportError:
+        print("The package 'bibtexparser' is not installed. Install with: pip install bibtexparser")
+        exit(1)
+    try:
+        import argparse
+    except ImportError:
+        print("The package  'argparse' is not installed.")
+        exit(1)
+    try:
+        import re
+    except ImportError:
+        print("The package  're' is not installed.")
+        exit(1)
+
+
+    try:
+        #reading command line input and parsing it 
+        parser = argparse.ArgumentParser(
+                            prog='HTML Citations',
+                            description='create acessible HTML Citations from bib files')
+        parser.add_argument('-i','--input', required=True, help="path to source bib")
+        parser.add_argument('-s','--startnumber', required=True, help="number from which to start numbering") 
+        
+        args = parser.parse_args()
+        print("Source: " + args.input)
+    except argparse.ArgumentError as e:
+            print(f"Argument parsing error: {e}")
+    except Exception as e:
+        print(f"An unexpected error occurred: {e}")
+    print("Reading file...")
+    #reading and parsing the file
+
+    try:
+        with open(args.input, 'r') as file:
+            file_content = file.read()
+        print("Parsing file...")
+        try:
+            library = bibtexparser.loads(file_content)
+            #opening output file 
+            try:
+                with open('output.txt', 'w') as out:
+                    length = len(library.entries)
+                    print("found " + str(length) + " entries")
+                    ran = range(length)
+                    startnum = int(args.startnumber); 
+                    count = 0; 
+                    #processing every entry and writing the dictionary for it 
+                    for x in ran:
+
+                        print("\n Initializing empty dictionary for entry "+ str(startnum+count) + "...")
+                        dictio = {}
+                        en_x = library.entries[x]
+                        print("Filling dictionary for entry "+ str(startnum+count) + "")
+                        
+                        
+                        for key, value in en_x.items(): 
+                            key_low = key.lower()
+                            dictio[key_low] = value
+                        
+                        print("Checking Entry type of "+ str(startnum+count) + "")
+                        if en_x['ENTRYTYPE'] == "article":
+                            articleHTML(dictio, (startnum+count), out)
+                        elif en_x['ENTRYTYPE'] == "misc":
+                            miscHTML(dictio, (startnum+count), out)
+                        elif en_x['ENTRYTYPE'] == "book":
+                            bookHTML(dictio, (startnum+count), out)
+                        elif en_x['ENTRYTYPE'] == "inbook":
+                            bookHTML(dictio, (startnum+count), out)
+
+                        count += 1; 
+
+            except Exception as e:
+                print(f"An unexpected error occurred: {e} in line 85")
+        except Exception as e:
+            print(f"An unexpected error occurred: {e} in line 87")
+    except FileNotFoundError:
+            print(f"Error: The file '{args.input}' was not found. line 89")
+    if len(problemlist)>0:
+        print("- - - - - - - - - - - - - - - - - ")
+        print("REMAINING ERRORS:")
+        
+        for p in problemlist:
+            print(p)
+    else: 
+        print("DONE")
+
+def makeauthors(authors, out):
+    print("Starting on authors...")
+    authors = authors.replace("\n", " ").replace(" and ", "|").strip()  # "and" durch "|" ersetzen und Whitespace entfernen
+    autlist = authors.split("|")
+
+    # Maximale Anzahl der anzuzeigenden Autoren
+    max_authors = 7
+    
+    out.write("\t<span property=\"schema:author\" typeof=\"schema:Person\">\n")  # Tag für Autoren öffnen
+    #print(autlist)
+    for i, a in enumerate(autlist):
+        try:
+            a = a.strip()  # Whitespace entfernen
+            
+            # Nachnamen und Vornamen aufteilen
+            if ',' in a:
+                s = a.split(", ")
+                last = s[0].strip()  # Nachname
+                first_names = s[1].strip() if len(s) > 1 else ''
+                
+                # Initialen für Vornamen erstellen
+                initials = '. '.join([n[0] for n in first_names.split()]) + '.' if first_names else ''
+                name = f"{last}, {initials}" if initials else f"{last}, "
+            else:
+                s = a.split()
+                last = s[-1].strip()  # Nachname
+                first = '. '.join([n[0] for n in s[:-1]]) + '.'  # Initialen der Vornamen
+                name = f"{last}, {first}"
+            
+            # Schreibe den Namen in die Ausgabedatei
+            if i < max_authors:
+                out.write(f"\t\t<span property=\"schema:Name\"> {name}</span>\n")
+            # Wenn wir den 6. Autor erreicht haben, schreibe "et al." nach dem 6. Autor
+            if i == max_authors:
+                out.write("\t\t<span property=\"schema:Name\"> et al.</span>\n")
+                break  # Stoppe die Schleife, nachdem "et al." hinzugefügt wurde
+            
+        except Exception as e:
+            print(f"An unexpected error occurred: {e} see " + a)
+
+    out.write("\t</span>\n")  # Tag für Autoren schließen
+
+
+
+def articleHTML(dictio, x, out):
+    print("Writing html code for article "+ str(x) + "...")
+    out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
+    out.write("<li typeof=\"schema:ScolarlyArticle\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
+    print("Just a sec, separating authors...")
+    authors = dictio['author']
+    print("giving authors...")
+    makeauthors(authors, out)
+#    out.write("\t" +"</span>"+ "\n")
+    title = dictio['title'].replace('{', '').replace('}', '')
+    out.write("\t" + "<span property=\"schema:name\">&nbsp;"+ title + "</span>. "+ "\n")
+    out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\"> "+ dictio['journal'] +"</i>"+ "\n")
+    out.write("\t" +"<b property=\"issueNumber\" typeof=\"PublicationIssue\"> "+dictio['volume']+"</b>"+ "\n")
+    print("Getting pages...")
+    try:
+        pages = dictio['pages']
+        if pages is not None and len(pages) > 0:
+            # Überprüfen, ob die Seitenangabe nur aus Zahlen und Bindestrichen besteht
+                if '-' in pages or '–' in pages or '--' in pages or '–' in pages:
+                    pag = re.split('--|-|–|–', pages)
+                    begin = pag[0].strip()
+                    end = pag[1].strip()
+                    print("- in pages")
+                    out.write("\t" + ",&nbsp;<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>&nbsp;"+ "\n")
+                else:
+                    if re.match(r'^\d+(-\d+)?$', pages):  # Check for typical numeric page ranges
+                        out.write("\t" + "<span property=\"schema:pageBegin\">"+ pages +"</span>&nbsp;"+ "\n")
+                    else:
+                        # Seitenangabe ist nicht numerisch, als fehlend behandeln
+                        print(f"Non-numeric page information detected ('{pages}'). Treating as missing.")
+                        problemlist.append(f"Non-numeric page info at entry {x}")
+        else:
+            print("Sorry, no page information")
+            problemlist.append("Check for missing page info at " + str(x))
+    except KeyError:
+        print("Sorry, no page information")
+        problemlist.append("Check for missing page info at " + str(x))
+
+
+    year = dictio['year']
+    out.write("\t" +"(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\" " + year + "\">"+year+"</time>)."+ "\n")
+    
+    try:
+        doi = dictio['doi']
+        out.write("\t" +"<a className=\"doi\" href=\"https://doi.org/"+doi+"\"> doi: "+doi+"</a>"+ "\n")
+    except KeyError as e:
+        print("Sorry, no doi information")
+        problemlist.append("Check for missing doi info at " + str (x))
+
+    out.write("</li>" + "\n"+ "\n")
+
+
+
+
+
+def miscHTML(dictio, x, out):
+    print("Writing html code for entry "+ str(x) + "...")
+    out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
+    out.write("<li typeof=\"schema:WebPage\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
+    out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Organisation\">"+ "\n")
+    aut = dictio['author']
+    out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
+    out.write("\t" +"</span>"+ "\n")
+    out.write("\t" + "<span property=\"schema:name\">"+dictio['title']+ ".</span>"+ "\n")
+    out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\">"+ dictio['howpublished'] +"</i>"+ "\n")
+    year = dictio['year']
+    out.write("\t" +"&nbsp;(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\"" + year + "\">"+year+"</time>)."+ "\n")
+    out.write("</li>" + "\n"+ "\n")
+
+def bookHTML(dictio, x, out):
+    print("Writing html code for entry "+ str(x) + "...")
+    out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
+    out.write("<li typeof=\"schema:Book\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
+   # out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Organisation\">"+ "\n")
+    print("Just a sec, separating authors...")
+    if 'author' in dictio:
+        authors = dictio['author']
+    elif 'editor' in dictio:
+        authors = dictio['editor']
+    makeauthors(authors, out)
+   # out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
+   # out.write("\t" +"</span>"+ "\n")
+    if 'title' in dictio:
+        out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['title']+ ".</span>"+ "\n")
+    elif 'booktitle' in dictio:
+        out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['booktitle']+ ".</span>"+ "\n")
+    else:
+        print(f"No title or booktitle found for entry {x}")
+        problemlist.append(f"Check for missing title or booktitle at entry {x}")
+
+    out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\">&nbsp;"+ dictio['publisher'] +"</i>"+ "\n")
+    year = dictio['year']
+    out.write("\t" + "&nbsp;(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\"" + year + "\">"+year+"</time>)."+ "\n")
+    out.write("</li>" + "\n"+ "\n")
+
+
+main()
+

code/citations.py

+import biblib.bib
+import biblib.messages
+import biblib.algo
+from biblib import FileBibDB
+import argparse
+import sys
+import re
+
+fileDb = biblib.FileBibDB('test.bib', mode='r')

index.html

-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link
-      rel="shortcut icon"
-      href="https://static.igem.wiki/common/icons/favicons/igem-2022.svg"
-      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" />
-    <title>%VITE_TEAM_NAME% - iGEM %VITE_TEAM_YEAR%</title>
+
+    <title>Bielefeld-CeBiTec - iGEM 2024</title>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <div id="root" style="background-color: #FFF6F2;"></div>
+    
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
 

package.json

@@ -7,32 +7,61 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "format": "prettier --write \"**/*.{ts,tsx,md,json,css}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,md,json,css,js}\"",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.21",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@gsap/react": "^2.1.1",
+    "@mui/icons-material": "^5.16.5",
+    "@mui/lab": "^5.0.0-alpha.171",
+    "@mui/material": "^5.16.5",
+    "@mui/x-charts": "^7.11.0",
+    "@popperjs/core": "^2.11.8",
+    "@types/three": "^0.168.0",
+    "aos": "^2.3.4",
+    "beautiful-react-diagrams": "^0.5.1",
+    "bibtex-parser-js": "^0.0.2",
     "bootstrap": "^5.3.3",
-    "react": "^16.13.0",
+    "chart.js": "^4.4.4",
+    "dangerously-set-html-content": "^1.1.0",
+    "dompurify": "^3.1.5",
+    "framer-motion": "^11.2.13",
+    "gsap": "^3.12.5",
+    "jarn": "^0.0.1",
+    "markmap": "^0.6.1",
+    "markmap-common": "^0.17.0",
+    "markmap-lib": "^0.16.1",
+    "markmap-toolbar": "^0.17.0",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
-    "react-dom": "^16.13.0",
-    "react-grid-gallery": "^1.0.1",
-    "react-pdf": "^9.0.0",
-    "react-router-dom": "^6.23.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-collapsed": "^4.1.2",
+    "react-dom": "^18.2.0",
+    "react-js-diagrams": "^2.3.2",
+    "react-photo-album": "^2.4.1",
+    "react-router-dom": "^6.26.0",
     "react-select": "^5.8.0",
-    "react-simple-maps": "^3.0.0"
+    "react-slick": "^0.30.2",
+    "sass": "^1.77.6",
+    "three": "^0.168.0",
+    "victory": "^37.0.2",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
+    "@types/aos": "^3.0.7",
+    "@types/dompurify": "^3.0.5",
+    "@types/faker": "^6.6.9",
+    "@types/jquery": "^3.5.30",
     "@types/node": "^20.12.10",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
-    "@types/react-simple-maps": "^3.0.4",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

src/App/App.scss

+$background: #E4FFF7;
+
+@function textShadow($precision, $size, $color){
+  $value: null;
+  $offset: 0;
+  $length: $size * calc(1 / $precision) - 1;
+
+  @for $i from 0 through $length {
+    $offset: $offset + $precision;
+    $shadow: $offset + px $offset + px $color;
+    $value: append($value, $shadow, comma);
+  }
+
+  @return $value;
+}
+
+.playful span {
+  position: relative;
+  color: #850F78;
+  text-shadow: textShadow(0.25, 6, #ca17b6);
+  animation: scatter 1.75s infinite;
+}
+
+.playful span:nth-child(2n) {
+  color: #F57D22;
+  text-shadow: textShadow(0.25, 6, #f8a86b);
+  animation-delay: 0.3s;
+}
+
+.playful span:nth-child(3n) {
+  color: #F4CC1E;
+  text-shadow: textShadow(0.25, 6, #f8dd67);
+  animation-delay: 0.15s;
+}
+
+.playful span:nth-child(5n) {
+  color: #5c68ea;
+  text-shadow: textShadow(0.25, 6, #A0A7F3);
+  animation-delay: 0.4s;
+}
+
+.playful span:nth-child(7n), .playful span:nth-child(11n) {
+  color: #bc15aa;
+  text-shadow: textShadow(0.25, 6, #ff1ce4);
+  animation-delay: 0.25s;
+}
+
+@keyframes scatter {
+  0% {
+    top: 0;
+  }
+  50% {
+    top: -10px;
+  }
+  100% {
+    top: 0;
+  }
+}
+
+
+
+.smoke span {
+  display: inline-block;
+  text-shadow: 0 0 0 whitesmoke;
+  animation: smoky 5s 3s both;
+}
+
+.smoke span:nth-child(even){
+  animation-name: smoky-mirror;
+}
+
+@keyframes smoky {
+  60% {
+    text-shadow: 0 0 40px whitesmoke;
+  }
+  to {
+    transform:
+      translate3d(15rem,-8rem,0)
+      rotate(-40deg)
+      skewX(70deg)
+      scale(1.5);
+    text-shadow: 0 0 20px whitesmoke;
+    opacity: 0;
+  }
+}
+
+@keyframes smoky-mirror {
+  60% {
+    text-shadow: 0 0 40px whitesmoke; }
+  to {
+    transform:
+      translate3d(18rem,-8rem,0)
+      rotate(-40deg) 
+      skewX(-70deg)
+      scale(2);
+     text-shadow: 0 0 20px whitesmoke;
+    opacity: 0;
+  }
+}
+
+@for $item from 1 through 21 {
+  span:nth-of-type(#{$item}){ 
+    animation-delay: #{(3 + (calc($item / 10)))}s; 
+  }
+} 
+
+
+
+$size: 6;
+#gallery {
+  display: grid;
+  height: calc(100vh - 10px);
+  grid-template: repeat($size,   1fr) / repeat($size, 1fr);
+  grid-gap: 0.5em;
+  @media (max-width: 800px) {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    justify-content: center;
+    & > div {
+      width: 48%;
+      margin: 1%;
+      @media (max-width: 350px) {
+        width: 98%;
+      }
+    }
+  }
+  & > div {
+    //Grid Structure
+    &:nth-child(#{$size}n + 1) {
+      grid-column: span 2;
+      grid-row: span 2;
+    }
+    &:nth-child(2) {
+      grid-column: span 3;
+      grid-row: span 3;
+    }
+    &:nth-child(4) {
+      grid-column: span 1;
+      grid-row: span 2;
+    }
+    & > a {
+      opacity: 0;
+      position: absolute;
+      color: var(--offblack);
+      background-color: var(--offblack);
+      font: bold 4em "Helvetica";
+      $shadow: 5px var(--ourbeige);
+      text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
+        1px 0px $shadow;
+      padding: 2rem;
+      mix-blend-mode: difference;
+      width: 100%;
+      height: 100%;
+      transition: all ease 1s;
+    }
+    & > img {
+      width: 100%;
+      min-height: 100%;
+      transition: all ease 1s;
+    }
+
+    
+  }
+  & > div {
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 2px 8px 0 rgba(var(--offblack), 0.2), 0 3px 20px 0 rgba(var(--offblack), 0.19);
+  }
+  div,
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+  }
+}
+//
+// lightbox
+//
+[id^="lightbox-"] {
+  &:target {
+    opacity:1;
+    pointer-events:inherit;
+    img{
+      filter:blur(0);
+    }
+  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(black, 0.5);
+  display: flex;
+  opacity:0;
+  transition: opacity 450ms ease-in-out;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  .content {
+    max-width: 90%;
+    position: relative;
+    color: var(--ourbeige);
+    &:hover > a.close {
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+    &:hover > .title {
+      opacity: 1;
+      transform: translateY(-3px); //Fix extra line at end
+      &::after{
+        opacity:1;
+      }
+    }
+    & > * {
+      transition: all 450ms ease-in-out;
+    }
+  }
+  .title {
+    display: block;
+    margin: 0;
+    padding: 1em;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    transform: translateY(50%);
+    font-size:1.5em;
+    opacity:0;
+    &::after{
+      content: ' ';
+      background-color: rgba(black, 0.4);
+      bottom:0;
+      left:0;
+      height:100%;
+      width:100%;
+      position:absolute;
+      transition: all 350ms ease-in-out 250ms;
+      opacity:0;
+      transform-origin:bottom;
+      mix-blend-mode: soft-light;
+    }
+  }
+  img {
+    max-height: 90vh;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    filter: blur(50px);
+  }
+  a.close {
+    width: 2em;
+    height: 2em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: rgba(black, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: scale(0, 0);
+    opacity: 0;
+    transform-origin: right top;
+    text-decoration:none;
+    color:var(--ourbeige);
+    &::after {
+      content: "X";
+    }
+  }
+}
+
+
+.fancy {
+  position: relative;
+  white-space: nowrap;
+  &:after {
+    --deco-height: 0.3125em;
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(var(--deco-height) * -0.625);
+    height: var(--deco-height);
+    background-image: url("../components/data/stroke.svg"); 
+    background-size: auto 100%;
+    background-repeat: round;
+    background-position: 0em;
+  }
+}
+
+.lines {
+  $color: #59c1fe;
+  position: fixed;
+  width: 100vw;
+  height: 4em;
+  background: linear-gradient(rgba($color, 0.2) 20%, $color 40%, $color 60%, rgba($color, 0.2) 80%);
+  background-size: 1px 0.5em;
+  box-shadow: 0 0 1em rgba($color, 0.4);
+  transform: translateY(-1em);
+  left: 0;
+}
+
+/* STROKE TEXT */
+$stroke: #111827;
+$shadow: #bc15aa;
+@mixin stroke-width($property) {
+	-webkit-text-stroke-width: $property;
+	-moz-text-stroke-width: $property;
+}
+
+@mixin stroke-color($property) {
+	-webkit-text-stroke-color: $property;
+	-moz-text-stroke-color: $property;
+}
+.stroke {
+	@include stroke-width(2px);
+	@include stroke-color($stroke);
+	color: transparent;
+  font-size: 5vw;
+}
+.shadow-stroke {
+	text-shadow: 0.25vw 0.25vw $shadow;
+}
+
+
+
+/* Main Styles */
+.button {
+	display: block;
+	background-color: var(--accent-primary);
+	width: 300px;
+	height: 100px;
+	line-height: 100px;
+	margin: auto;
+	color: var(--ourbeige);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	cursor: pointer;
+	overflow: hidden;
+	border-radius: 5px;
+	box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
+	transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
+	
+	.but-span ,
+	.icon {
+		display: block;
+		height: 100%;
+		text-align: center;
+		position: absolute;
+		top: 0;
+	}
+	
+	.but-span {
+		width: 72%;
+		line-height: inherit;
+		font-size: 22px;
+		text-transform: uppercase;
+		left: 0;
+		transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
+		
+		&:after {
+			content: '';
+			background-color: var(--text-primary);
+			width: 2px;
+			height: 70%;
+			position: absolute;
+			top: 15%;
+			right: -1px;
+		}
+	}
+	
+	.icon {
+		width: 28%;
+		right: 0;
+		transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
+		
+		.fa {
+			font-size: 30px;
+			vertical-align: middle;
+			transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400), height #{"0.25s"} ease;
+		}
+		
+		.fa-remove {
+			height: 36px;
+		}
+		
+		.fa-check {
+			display: none;
+		}
+	}
+	
+	&.success,
+	&:hover {
+		
+		.but-span  {
+			left: -72%;
+			opacity: 0;
+		}
+		
+		.icon {
+			width: 100%;
+			
+			.fa {
+				font-size: 45px;
+			}
+		}
+	}
+	
+	&.success {
+		background-color: #27ae60;
+		
+		.icon {
+			
+			.fa-remove {
+				display: none;
+			}
+			
+			.fa-check {
+				display: inline-block;
+			}
+		}
+	}
+	
+	&:hover {
+		opacity: .9;
+		
+		.icon .fa-remove {
+			height: 46px;
+		}
+	}
+	
+	&:active {
+		opacity: 1;
+	}
+}
+
+.icon{
+	cursor: pointer;
+	position: relative;
+	display: inline-block;
+	width: 60px;
+	height: 60px;
+	margin-left: 60px/5;
+	margin-right: 60px/5;
+	border-radius: 60px*0.5;
+	overflow: hidden;
+	&::before, &::after{
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		transition: all 0.25s ease;
+		border-radius: 60px*0.5;
+	}
+	i{
+		position: relative;
+		color: var(--ourbeige);
+		font-size: 60px/2;
+		margin-top: 60px/4;
+		transition: all 0.25s ease;
+	}
+}
+
+.icon-fill{
+	&::before{
+		transition-duration: 0.5s;
+		box-shadow: inset 0 0 0 1px green;
+	}
+	&:hover::before{
+		box-shadow: inset 0 0 0 60px green;
+	}
+}
+
+.icon-enter{
+	&::after{
+		box-shadow: inset 0 0 0 1px orange;
+	}
+	&::before{
+		border-radius: 0;
+		margin-left: -100%;
+		box-shadow: inset 0 0 0 60px orange;
+	}
+	&:hover::before{
+		margin-left: 0; 
+	}
+}
+
+.icon-expand{
+	&::after{
+		box-shadow: inset 0 0 0 1px red;
+	}
+	&::before{
+		background: red;
+		box-shadow: inset 0 0 0 60px $background;
+	}
+	&:hover::before{
+		box-shadow: inset 0 0 0 1px $background;
+	}
+}
+
+.icon-collapse{
+	&::before{
+		border-radius: 0;
+	}
+	&:hover::before{
+		box-shadow: 
+		inset 0 60px/2 0 0 green,
+		inset 0 60px/-2 0 0 green;
+	}
+	&::after{
+		box-shadow: inset 0 0 0 1px green;
+	}
+}
+
+.icon-rotate{
+	box-shadow: inset 0 0 0 1px purple;
+	&::after, &::before{
+		border: 0px solid transparent;
+	}
+	&:hover::before{
+		transition:
+			border-top-width 0.3s ease,
+			border-top-color 0.3s ease;
+		border-width: 60px;
+		border-top-color: purple;
+	}
+	&:hover::after{
+		transition:
+			border-left-width 0.3s ease,
+			border-left-color 0.3s ease;
+		border-width: 60px;
+		border-left-color: purple;
+	}
+	&:hover{
+		transition: background 0.001s ease 0.3s;
+		background: purple;
+	}
+	i{
+		z-index: 1;
+	}
+}
+
+.picture-frame {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-width: 400px;
+  width: 90%;
+  margin: auto;
+  background: var(--ourbeige);
+  padding: 30px;
+  border-style: solid;
+  border-width: 30px;
+  $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 {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-width: 180px;
+  max-width: 200px;
+  width: 70%;
+  margin: auto;
+  background: var(--ourbeige);
+  padding: 10px;
+  border-style: solid;
+  border-width: 20px;
+  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);
+}
+
+figure.snip1113 {
+  font-family: 'Raleway', Arial, sans-serif;
+  position: relative;
+  overflow: hidden;
+  min-width: 220px;
+  max-width: 310px;
+  width: 80%;
+  background: var(--ourbeige);
+  text-align: center;
+}
+
+figure.snip1113 * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+figure.snip1113 img {
+  max-width: 65%;
+  margin: 40px auto;
+  display: block;
+  position: relative;
+  border: 3px solid #F59121;
+  padding: 15px 15px 85px 15px;
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+
+figure.snip1113 figcaption {
+  position: absolute;
+  height: 120px;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  display: block;
+}
+
+figure.snip1113 h3 {
+  background-color: var(--ourbeige);
+  color: var(--offblack);
+  font-size: 1.7em;
+  width: 100%;
+  padding: 5px 12px;
+  margin: 0;
+  text-transform: uppercase;
+  font-weight: 400;
+}
+
+figure.snip1113 h3 span {
+  font-weight: 800;
+}
+
+/* Collapsible 2 */

src/App/App.tsx

+import { useEffect } from "react";
 import "./App.css";
+import "./HP.css"
+import "./mediarules.css"
+import "./Timelines.css";
+import '../App/Graph.css'; 
+import '../components/test.css'
+import "./LandingPage.css"
+import "../contents/example.css"
+import "./App.scss";
+import 'beautiful-react-diagrams/styles.css';
 import "bootstrap/dist/css/bootstrap.min.css";
-import { Route, Routes } from "react-router-dom";
+import "./Graph.css"
+import LoadingScreen from "../components/LoadingScreen.tsx";
+import { Routes, Route } from "react-router-dom";
 import { Footer } from "../components/Footer.tsx";
-import { Header } from "../components/Header.tsx";
 import { NotFound } from "../components/NotFound.tsx";
 import { Navbar } from "../components/Navbar.tsx";
 import { getPathMapping } from "../utils/getPathMapping.ts";
 import { stringToSlug } from "../utils/stringToSlug.ts";
-import { useEffect} from "react";
-import Villbuttonrow from "../components/Villagebuttons.tsx";
-import Sidebar from "../components/Sidebar.tsx";
-import "../utils/highlight.js";
-/* import Sidebar from "../../components/Sidebar.tsx"; */
+import { Villbuttonrow } from "../components/Buttons.tsx";
+import "../utils/Highlight-functions.js";
+import "./LoadingScreen.css";
+import "./calendar.css"
+import { useLoading } from "../utils/LoadingContext.tsx";
+
 
 const App = () => {
-  /* // Dark Mode toggle 
-  const [isDarkMode, setIsDarkMode] = useState(true);
-  useEffect(() => {
-    document.body.className = isDarkMode ? 'dark-mode' : '';
-  }, [isDarkMode]); */
+  const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
+
+
+  window.scrollTo(0, 0);
+
+//  const [isLoading, setIsLoading] = useState(true);
 
   const pathMapping = getPathMapping();
   const currentPath =
@@ -34,56 +47,81 @@ const App = () => {
     document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
   }, [title]);
 
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      console.log("Hiding loading screen");
+      setIsLoading(false);
+    }, 1000); // Adjust the delay as needed, Update the loading state after 3 seconds
+
+    return () => {
+      console.log("Cleaning up timer");
+      clearTimeout(timer);  // Clear the timer on component unmount
+    };
+  }, []);
+
   return (
     <>
+    {isLoading ? (
+      <LoadingScreen />
+    ) : (
+
+    <>
+      
       {/* Navigation */}
-      <Navbar /* isDarkMode={isDarkMode} setIsDarkMode={setIsDarkMode} */ />
+      <Navbar />
 
       {/* Header and PageContent */}
       <Routes>
-        {Object.entries(pathMapping).map(
-          ([path, { navlist, title, lead, component: Component}]) => (
-            <Route
-              key={path}
-              path={path}
-              element={
-                <>
-                  <Header title={title || ""} lead={lead || ""} />
-                  {/* Page content */}
-                  <div className="container-fluid">
-                    <div className="row ">
-                      <div className="col-2 d-none d-lg-block"> 
-                        <div className="sticky-top sidebar">
-                           <Sidebar nums={navlist || [""]}></Sidebar>
-                        </div>
-                      </div>
-                      <div className="col">
-                        <Component />
-                        <Villbuttonrow/>
-                      </div>
-                      <div className="col-1 d-none d-lg-block" >
-                        {/* <!-- empty so far --> */}
-                        
-                      </div>
+        {Object.entries(pathMapping).map(([path, { header: Header, component: Component, navlist: Sidebar }]) => (
+          <Route
+            key={path}
+            path={path}
+            element={
+              <>
+                <Header />
+                {/* Page content */}
+                <div className="container-fluid" >
+                  <div className="row">
+                    <Sidebar/>
+                    <div className="full-col-phone col-9 max-1240">
+                      <Component />
+                      <Villbuttonrow />
+                    </div>
+                    <div className="col-1 none d-lg-block">
+                      {/* <!-- empty!--> */}
                     </div>
                   </div>
+                </div>
+                {/* End page content */}
+              </>
+            }
+          />
+        ))}
+        {/* Add a route for the Description component */}
+        <Route
+          path="/description"
+          element={
+            <>
+              {/* Page content */}
+              <div className="container-fluid">
+                <div className="row">
+                  <div className="col">
+                    <Villbuttonrow />
+                  </div>
+                  <div className="col-1  d-lg-block">
+                    {/* <!-- empty!--> */}
+                  </div>
+                </div>
+              </div>
+            </>
+          }
+        />
 
-                  {/* End page content */}
-                  
-
-                </>
-              }
-            />
-          ),
-        )}
         <Route
           path="*"
           element={
             <>
-              <Header
-                title="Not Found"
-                lead="The requested URL was not found on this server."
-              />
               <NotFound />
             </>
           }
@@ -91,10 +129,11 @@ const App = () => {
       </Routes>
 
       {/* Footer */}
-      {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
       <Footer />
+      </>
+      )}
     </>
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file

src/App/Graph.css

+/* Specific styles for the pie chart container */
+.pie-chart-container {
+    display: block; 
+    width: 400px; 
+    height: 400px; 
+    padding: 10px; 
+    margin: auto;
+}
+
+
+.pie-chart-container canvas {
+    width: 100% !important; 
+    height: 100% !important;
+}

src/App/HP.css

+#under-reflection{
+    background-color: var(--lightblue) !important;
+}
+#under-responsibility{
+    background-color: var(--lightpurple) !important;
+}
+#under-responsive{
+    background-color: var(--text-primary) !important;
+}
+
+#under-responsive, #under-responsibility, #under-reflection{
+    border-radius: 10px;
+    color: var(--ourbeige) ;
+}
+
+#under-reflection div, #under-responsibility div, #under-responsive div{
+    padding: 15px;   
+}
+
+.framecycletab{
+    box-shadow: 1px 2px 5px gray;
+    background-color: var(--background);
+    padding: 30px 20px;
+    border-radius: 20px;
+    margin-left: 60px;
+  }
+
+  .act-version, .reflect-version, .engage-version /*, .anticipate-version */{
+    display: none !important;
+  }
+
+  #g744{
+    display: block !important;
+  }
+
+  #hp3-wrapper{
+    display: inline-flex;
+    justify-content: center;
+    max-width: 70%;
+    max-height: 60%;
+  }
+
+  
+  #left-col {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  #ref-img {
+    width: 100%;
+    height: auto;
+  }
+
+
+  
+  .mitte {
+    
+    flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
+  }
+  
+  .unten {
+    padding-bottom: 50px;
+    padding-left: 10px;
+  }
+  
+  .mitte-parent{
+    display: grid;
+  }
+
+  .graphs{
+    max-height: 50% !important;
+  }
+
+  .pie-chart-container-small{
+    height: auto;
+  }
+
+  .pie-chart-container-other{
+    height: 250px !important;
+  }
+
+  .pie-chart-container-small, .pie-chart-container, .pie-chart-container-other, .bar-chart-container {
+    margin-bottom: 10px;
+  }
\ No newline at end of file

src/App/LandingPage.css

+.content-block {
+  width:100vw;
+  height:100vh;
+  opacity: 0;
+  visibility: hidden;  
+  transition: opacity 1200ms ease-out, transform 600ms ease-out,
+  visibility 1200ms ease-out;
+  will-change: opacity, visibility;
+  background-color: var(--offblack);
+}
+
+.content-block.is-visible {
+    opacity: 1;
+    transform: none;
+    visibility: visible;
+    background-color: var(--offblack);
+}
+
+.landing-page-header .row .col{
+  padding: 30px;
+  margin: auto;
+  justify-content: center;
+}
+
+.landing-page-header .col{
+  justify-content: center;
+  display: grid ;
+}
+
+
+.landing-page-header button{
+  background-color: var(--accent-primary);
+  border-radius: 10px;
+  padding: 10px;
+  width: 30vw;
+}
+
+.landing-page-header{
+  padding-top: 200px !important;
+}
+
+.header-button-row{
+  min-height: 450px;
+}
+
+
+/* .header-button-row .h5 {
+
+} */
+
+#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/LoadingScreen.css

+#LoadingScreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #b5ade6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    animation: fadeInOut 5s forwards;
+}
+
+.custom-animation {
+    width: 150px; 
+    height: 150px; 
+    animation: pulse 2s infinite; /* Apply the pulsing animation */
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+}
+
+@keyframes fadeInOut {
+        0% {
+            opacity: 1;
+        }
+        80% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+
+    }
\ No newline at end of file

src/App/Timelines.css

+/* * * * * * * * * * * */
+/* Horizontal Timeline */
+/* * * * * * * * * * * */
+
+/* This is the timeline container */
+.timeline {
+  white-space: nowrap;
+  min-height: 700px;
+  width: 75vw; 
+  overflow-x: auto !important;
+  max-width: inherit !important;
+  overflow-y: hidden !important;
+  width: 100%;
+  background-color: inherit; 
+  /* align items center */
+  align-items: center !important;
+  /* row */
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-.5 * var(--bs-gutter-x));
+  margin-left: calc(-.5 * var(--bs-gutter-x));
+}
+/* This is the timeline list container */
+.timelineol {
+  font-size: 0;
+  width: 100vw;
+  padding: 250px 0;
+  transition: all 1s;
+}
+
+/* Positioning of the upper timeline cards */
+.timeline ol li:nth-child(2n+1) .time-meta::before{
+  top: 100%;
+  left: 8px !important;
+  border-color: white transparent transparent transparent !important;
+}
+.timeline ol li:nth-child(2n+1) .moretop{
+  top: -40px !important;   
+}
+.timeline ol li:nth-child(odd) .timeline-item {
+  top: -16px;
+  transform: translateY(-100%);
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+
+
+/* Positioning for the lower timeline cards */
+.timeline ol li:nth-child(2n) .time-meta::before{
+top: 100%;
+left: 8px !important;
+border-color:  transparent transparent transparent white !important;
+}
+.timeline ol li:nth-child(2n) .moretop{
+top: 50px !important;   
+}
+.timeline ol li:nth-child(even) .timeline-item {
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  top: calc(100% + 16px);
+}
+  
+
+/* The DNA Strang of the timeline */
+.timelineolli {
+position: relative;
+display: inline-block;
+list-style-type: none;
+width: 250px;
+height: 20px;
+background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg"); 
+background-size: 100% 120%;
+}
+
+/* Timeline Pointers outline and form */
+.timeline ol li .timeline-item::before {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;  
+}
+.timeline ol li:nth-child(odd) .timeline-item::before {
+top: 100%;
+border-width: 20px 8px 0 0;
+border-color: var(--ourbeige)  transparent transparent transparent;
+}
+.timeline ol li:nth-child(even) .timeline-item::before {
+top: -20px;
+border-width: 20px 0 0 8px;
+border-color: transparent transparent transparent white;
+}
+
+/* To extend the line at the end */
+.timelineolli:last-child{
+background-size: 65% 120%;
+}
+.timeline ol li:last-child {
+  width: 300px;
+}
+
+/* For the points */
+.timeline ol li:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: calc(98%);
+  bottom: 0;
+  z-index: 4;
+  width: 40px;
+  height: 40px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: var(--text-primary);
+}
+
+/* Card layout */
+
+.timeline ol li .timeline-item {
+  height: 250px;
+  min-height: 310%;
+  position: absolute;
+  left: calc(100% + 7px);
+  width: 350px;
+  padding: 15px;
+  font-size: 0.9rem;
+  white-space: normal;
+  color: var(--offblack);
+  background: white; /* Soll white bleiben! */
+}
+
+/* Layout for meta timeline cards */
+.time-meta{
+  border-radius: 10px;
+}
+
+/* Tags */
+.t-tag{
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  color: var(--ourbeige);
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  width: fit-content !important;
+}
+
+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: var(--offblack);
+}
+
+
+/* and buttons */
+button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
+  background-color: white; /* soll whit ebleiben! */
+}
+
+.Patient, button.tabbutton:nth-child(2), .button.tabbutton:nth-child(7), .skin{
+  background-color: var(--accen-secondary) !important;
+}
+
+.Medical, button.tabbutton:nth-child(3), .button.tabbutton:nth-child(8), .mucosa{
+  background-color: var(--accent-primary);
+}
+
+.Academia, .Research, button.tabbutton:nth-child(4), button.tabbutton:nth-child(9){
+  background-color: var(--lightblue);
+}
+
+.Industry, button.tabbutton:nth-child(5){
+  background-color: var(--mediumpurple);
+}
+.Activist, .Milestone{
+  background-color: var(--igemmediumgreen) !important;
+}
+
+.Education, .Outreach{
+  background-color: var(--igemlightgreen);
+}
+
+.Other{
+  background-color: var(--offblack); 
+}
+
+
+/* * * * * * * */
+/* TIMELINE BFH*/
+/* * * * * * * */
+
+/* Container */
+.timeline-container {
+  display: flex;
+
+  flex-direction: column;
+  position: relative;
+  margin: 40px 0;
+}
+/* Line */
+.timeline-container::after {
+  background-color: var(--text-primary);
+  position: absolute;
+  left: calc(50% - 2px);
+  content: "";
+  width: 4px;
+  height: 100%;
+  z-index: 0;
+} 
+
+/* Cards */
+.timeline-item {
+  min-width: 100px;
+ /*  display: flex; */
+  justify-content: flex-end;
+  padding-right: 30px;
+  position: relative;
+  margin: 10px 0;
+  width: 50%;
+}
+.timeline-item-content {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background-color: white; /* Soll white bleiben! */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 15px;
+  position: relative;
+  text-align: right;
+}
+/* Accomodate for alteration in card design */
+.timeline-item:nth-child(odd) .timeline-item-content {
+  text-align: left;
+  align-items: flex-start;
+}
+
+/* Tags */
+.timeline-item-content .tag {
+  color: var(--ourbeige);
+  font-size: 12px;
+  font-weight: bold;
+  top: 5px;
+  left: 5px;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-top: 5px;
+  margin-left: 5px;
+  position: absolute;
+  text-transform: uppercase;
+}
+  .timeline-item:nth-child(odd) .timeline-item-content .tag {
+  left: auto;
+  right: 5px;
+  margin-right: 5px;
+}  
+/* Title design */  
+.timeline-item-content time {
+  color: var(--offblack);
+  font-size: 16px;
+  font-weight: bold;
+}
+
+/* To create alternation */
+.timeline-item:nth-child(odd) {
+  align-self: flex-end;
+  justify-content: flex-start;
+  padding-left: 30px;
+  padding-right: 0;
+}
+
+/* To create bigger first and final cards */
+.timeline-end{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: white; /* soll white bleiben */ 
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-top: 8vw;
+}
+.timeline-begin{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: white; /* soll white bleiben */
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-bottom: 8vw;
+}
+
+/* Make short description on card bigger */
+.timeline-item-content span{
+  font-size: 18px;
+}
+/* Make links on Cards fat */
+.timeline-item-content a {
+  font-weight: bold;
+}
+
+/* Circle */
+.timeline-item-content .circle {
+background-color: var(--ourbeige) !important;
+border: 3px solid var(--text-primary);
+border-radius: 50%;
+position: absolute;
+top: calc(50% - 10px);
+right: -54px !important;
+width: 20px;
+height: 20px;
+z-index: 100;
+} 
+.timeline-item:nth-child(odd) .timeline-item-content .circle {
+  right: auto;
+  left: -53px;
+}
+
+
+
+
+
+
+
+
+
+*/
+.hpbuttonrow {
+  display: flex; /* Flex-Layout für die untere Reihe */
+  margin-top: auto; /* Schiebt diese Reihe nach unten */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+.fillup {
+flex: 1;
+display: flex; /* Flex-Layout aktivieren */
+align-items: center; /* Vertikale Zentrierung */
+justify-content: center; /* Horizontale Zentrierung */
+}
+
+.timeline-item .row:first-child {
+  flex: 1; /* Füllt den verbleibenden Raum aus */
+  display: flex; /* Flex-Layout aktivieren */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+/* Untere Reihe */
+.timeline-item .row:last-child {
+  margin-top: auto; /* Schiebt die letzte Reihe nach unten */
+}
+
+
+
+
+.fillup-wrapper{
+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

+
+.month {
+    padding: 70px 25px;
+    width: 100%;
+    margin-top: 40px;
+    background: var(--mediumpurple);
+    text-align: center;
+    border-radius: 10px;
+  }
+
+.cal-entry{
+  border-color: var(--text-primary);
+  border-radius: 10px;
+  border-width: 2px;
+  border-style: dotted; 
+}
+
+.entry-body{
+  padding: 2vw 4vw;
+  
+}
+ 
+.entry-header{
+  background-color: var(--darkerbeige);
+  padding: 15px;
+  border-bottom-color: var(--text-primary);
+  border-bottom-width: 1px;
+  border-bottom-style: solid; 
+}
+  
+  .month ul {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .month ul li {
+    color: var(--ourbeige) !important;
+    font-size: 20px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    list-style: none;
+  }
+  
+  .prev a, .next a{
+    color: var(--ourbeige) !important;
+  }
+  .month .prev {
+    float: left;
+    padding-top: 10px;
+  }
+  
+  .month .next {
+    float: right;
+    padding-top: 10px;
+  }
+  
+  .weekdays {
+    border-radius: 10px;
+    margin: 0;
+    padding: 10px 0;
+    background-color: #ddd;
+  }
+  
+  .weekdays li {
+    display: inline-block;
+    width: 13.6%;
+    color: #666;
+    text-align: center;
+  }
+  
+  .days {
+    border-radius: 10px;
+    padding: 10px 0;
+    background: #eee;
+    margin: 0;
+  }
+  
+  .days li {
+    list-style-type: none;
+    display: inline-block;
+    width: 13.6%;
+    text-align: center;
+    margin-bottom: 5px;
+    font-size:12px;
+    color: #777;
+  }
+  
+  .days li .active {
+    padding: 5px;
+    background: #1abc9c;
+    color: var(--ourbeige) !important
+  }
+  
+  /* Add media queries for smaller screens */
+  @media screen and (max-width:720px) {
+    .weekdays li, .days li {width: 13.1%;}
+  }
+  
+  @media screen and (max-width: 420px) {
+    .weekdays li, .days li {width: 12.5%;}
+    .days li .active {padding: 2px;}
+  }
+  
+  @media screen and (max-width: 290px) {
+    .weekdays li, .days li {width: 12.2%;}
+  }
\ No newline at end of file