Skip to content
Snippets Groups Projects

Compare revisions

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

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Commits on Source (2142)
2,042 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 3281 additions and 780 deletions
.gitignore
View file @ 3fd292fd
......@@ -3,9 +3,9 @@ venv
.vscode
__pycache__
.venv
code/biblib-master
node_modules
versions
code
.vite
app.py
unused.py
......@@ -13,4 +13,10 @@ unused-css-master
my-chart-test
other
dist
src/components/resources
\ No newline at end of file
src/components/resources
code/test.bib
.DS_Store
code/test file gitignore.txt
src/.DS_Store
vite.config.js.timestamp-1732367750130-6d00136194c2.mjs
vite.config.js.timestamp-1733161862061-488217339257e.mjs
code/cit.py 0 → 100644
View file @ 3fd292fd
# 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 0 → 100644
View file @ 3fd292fd
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
View file @ 3fd292fd
......@@ -3,9 +3,8 @@
<head>
<meta charset="UTF-8" />
<link
rel="shortcut icon"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png"
type="image/x-icon"
rel="icon" type="image/png" sizes="32x32"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.ico"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
......
src/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/App/App.css
View file @ 3fd292fd
This diff is collapsed.
src/App/App.scss
View file @ 3fd292fd
......@@ -142,10 +142,10 @@ $size: 6;
& > a {
opacity: 0;
position: absolute;
color: #000;
background-color: #000;
color: var(--offblack);
background-color: var(--offblack);
font: bold 4em "Helvetica";
$shadow: 5px #fff;
$shadow: 5px var(--ourbeige);
text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
1px 0px $shadow;
padding: 2rem;
......@@ -165,7 +165,7 @@ $size: 6;
& > div {
overflow: hidden;
position: relative;
box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
box-shadow: 0 2px 8px 0 rgba(var(--offblack), 0.2), 0 3px 20px 0 rgba(var(--offblack), 0.19);
}
div,
a {
......@@ -201,7 +201,7 @@ $size: 6;
.content {
max-width: 90%;
position: relative;
color: #fff;
color: var(--ourbeige);
&:hover > a.close {
opacity: 1;
transform: scale(1, 1);
......@@ -262,7 +262,7 @@ $size: 6;
opacity: 0;
transform-origin: right top;
text-decoration:none;
color:#fff;
color:var(--ourbeige);
&::after {
content: "X";
}
......@@ -332,7 +332,7 @@ $shadow: #bc15aa;
height: 100px;
line-height: 100px;
margin: auto;
color: #fff;
color: var(--ourbeige);
position: absolute;
top: 0;
bottom: 0;
......@@ -459,7 +459,7 @@ $shadow: #bc15aa;
}
i{
position: relative;
color: white;
color: var(--ourbeige);
font-size: 60px/2;
margin-top: 60px/4;
transition: all 0.25s ease;
......@@ -553,14 +553,34 @@ $shadow: #bc15aa;
max-width: 400px;
width: 90%;
margin: auto;
background: #fff;
background: var(--ourbeige);
padding: 30px;
border-style: solid;
border-width: 30px;
border-top-color: darken(#850F78, 0%);
border-right-color: darken(#850F78, 10%);
border-bottom-color: darken(#850F78, 0%);
border-left-color: darken(#850F78, 10%);
$color: "#850F78";
border-top-color: #850F78;
border-right-color: #bc15aa;
border-bottom-color: #850F78;
border-left-color: #bc15aa;
box-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
.cert-frame {
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);
}
......@@ -571,7 +591,7 @@ figure.snip1113 {
min-width: 220px;
max-width: 310px;
width: 80%;
background: #ffffff;
background: var(--ourbeige);
text-align: center;
}
......@@ -603,8 +623,8 @@ figure.snip1113 figcaption {
}
figure.snip1113 h3 {
background-color: #ffffff;
color: #000000;
background-color: var(--ourbeige);
color: var(--offblack);
font-size: 1.7em;
width: 100%;
padding: 5px 12px;
......
src/App/App.tsx
View file @ 3fd292fd
import { useEffect, useState } from "react";
import { useEffect } from "react";
import "./App.css";
import "./HP.css"
import "./mediarules.css"
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';
......@@ -16,12 +19,19 @@ import { Navbar } from "../components/Navbar.tsx";
import { getPathMapping } from "../utils/getPathMapping.ts";
import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/highlight.js";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import "./calendar.css"
import { useLoading } from "../utils/LoadingContext.tsx";
const App = () => {
const [isLoading, setIsLoading] = useState(true);
const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
window.scrollTo(0, 0);
// const [isLoading, setIsLoading] = useState(true);
const pathMapping = getPathMapping();
const currentPath =
......@@ -42,7 +52,7 @@ const App = () => {
const timer = setTimeout(() => {
console.log("Hiding loading screen");
setIsLoading(false);
}, 0); // Adjust the delay as needed, Update the loading state after 3 seconds
}, 1000); // Adjust the delay as needed, Update the loading state after 3 seconds
return () => {
console.log("Cleaning up timer");
......@@ -57,6 +67,7 @@ const App = () => {
) : (
<>
{/* Navigation */}
<Navbar />
......@@ -70,14 +81,14 @@ const App = () => {
<>
<Header />
{/* Page content */}
<div className="container-fluid">
<div className="container-fluid" >
<div className="row">
<Sidebar />
<div className="col">
<Sidebar/>
<div className="full-col-phone col-9 max-1240">
<Component />
<Villbuttonrow />
</div>
<div className="col-1 d-none d-lg-block">
<div className="col-1 none d-lg-block">
{/* <!-- empty!--> */}
</div>
</div>
......@@ -98,7 +109,7 @@ const App = () => {
<div className="col">
<Villbuttonrow />
</div>
<div className="col-1 d-none d-lg-block">
<div className="col-1 d-lg-block">
{/* <!-- empty!--> */}
</div>
</div>
......
src/App/Graph.css
View file @ 3fd292fd
/* Specific styles for the pie chart container */
.pie-chart-container {
display: block;
width: 100%;
height: auto;
padding: 20px;
width: 400px;
height: 400px;
padding: 10px;
margin: auto;
}
.pie-chart-container canvas {
width: 100% !important;
height: auto !important;
height: 100% !important;
}
src/App/HP.css 0 → 100644
View file @ 3fd292fd
#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 0 → 100644
View file @ 3fd292fd
.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
View file @ 3fd292fd
......@@ -9,6 +9,7 @@
justify-content: center;
align-items: center;
z-index: 9999;
animation: fadeInOut 5s forwards;
}
.custom-animation {
......@@ -24,4 +25,17 @@
50% {
transform: scale(1.2);
}
}
\ No newline at end of file
}
@keyframes fadeInOut {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
\ No newline at end of file
src/App/Timelines.css
View file @ 3fd292fd
......@@ -4,45 +4,46 @@
/* This is the timeline container */
.timeline {
white-space: nowrap;
min-height: 500px;
width: 83vw;
overflow-x: auto;
overflow-y: hidden;
background-color: inherit;
font-size: 1rem;
/* 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));
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;
.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: #f6faf6 transparent transparent transparent !important;
top: 100%;
left: 8px !important;
border-color: white transparent transparent transparent !important;
}
.timeline ol li:nth-child(2n+1) .moretop{
top: -40px !important;
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);
top: -16px;
transform: translateY(-100%);
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
......@@ -50,42 +51,42 @@
.timeline ol li:nth-child(2n) .time-meta::before{
top: 100%;
left: 8px !important;
border-color: transparent transparent transparent #f6faf6 !important;
border-color: transparent transparent transparent white !important;
}
.timeline ol li:nth-child(2n) .moretop{
top: 30px !important;
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);
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: 190px;
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;
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: white transparent transparent transparent;
border-color: var(--ourbeige) transparent transparent transparent;
}
.timeline ol li:nth-child(even) .timeline-item::before {
top: -20px;
......@@ -95,186 +96,189 @@ border-color: transparent transparent transparent white;
/* To extend the line at the end */
.timelineolli:last-child{
background-size: 65% 120%;
background-size: 65% 120%;
}
.timeline ol li:last-child {
width: 300px;
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);
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 {
min-height: 310%;
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 0.9rem;
white-space: normal;
color: black;
background: white;
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{
background-color: #f6faf6 !important;
border-radius: 10px;
border-radius: 10px;
}
/* Tags */
.t-tag{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
color: #fff;
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: black;
}
.colour-meta-tag{
background-color: var(--igemlightgreen);
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){
background-color: white;
}
.Patient, button.tabbutton:nth-child(2){
background-color: var(--accen-secondary);
}
.Medical, button.tabbutton:nth-child(3){
background-color: var(--accent-primary);
}
.Academia, .Research, button.tabbutton:nth-child(4){
background-color: var(--lightblue);
}
.Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple);
}
.Activist, button.tabbutton:nth-child(6){
background-color: var(--igemlightgreen);
}
.Ethics{
background-color: var(--offblack);
}
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;
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;
}
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: #fff;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 15px;
position: relative;
text-align: right;
}
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;
}
text-align: left;
align-items: flex-start;
}
/* Tags */
.timeline-item-content .tag {
color: #fff;
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;
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: black;
font-size: 16px;
font-weight: bold;
}
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;
}
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: #fff;
background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
......@@ -284,7 +288,7 @@ margin-top: 8vw;
.timeline-begin{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #fff;
background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
......@@ -294,16 +298,16 @@ margin-bottom: 8vw;
/* Make short description on card bigger */
.timeline-item-content span{
font-size: 18px;
}
font-size: 18px;
}
/* Make links on Cards fat */
.timeline-item-content a {
font-weight: bold;
}
.timeline-item-content a {
font-weight: bold;
}
/* Circle */
.timeline-item-content .circle {
background-color: #fff !important;
background-color: var(--ourbeige) !important;
border: 3px solid var(--text-primary);
border-radius: 50%;
position: absolute;
......@@ -314,80 +318,65 @@ height: 20px;
z-index: 100;
}
.timeline-item:nth-child(odd) .timeline-item-content .circle {
right: auto;
left: -53px;
right: auto;
left: -53px;
}
/* Checken ob wir das echt brauchen */
/* .timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline-item-content::after {
background-color: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
position: absolute;
right: -7.5px;
top: calc(50% - 7.5px);
transform: rotate(45deg);
width: 15px;
height: 15px;
}
.timeline-item:nth-child(odd) .timeline-item-content::after {
right: auto;
left: -7.5px;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
}
.timeline-item-content p {
font-size: 16px;
line-height: 24px;
margin: 15px 0;
}
.timeline-item-content a::after {
font-size: 12px;
}
.card {
border-radius: 4px;
background-color: #fff;
color: #333;
padding: 10px;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
width: 100%;
max-width: 560px;
*/
.hpbuttonrow {
display: flex; /* Flex-Layout für die untere Reihe */
margin-top: auto; /* Schiebt diese Reihe nach unten */
align-items: center; /* Vertikale Zentrierung */
}
.date {
background-color: var(--text-primary) !important;
padding: 4px !important;
color: #fff !important;
border-radius: 4px !important;
font-weight: 500;
font-size: .85rem;
.fillup {
flex: 1;
display: flex; /* Flex-Layout aktivieren */
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
.date-col{
position: relative;
background-color: #fff ;
padding: 10px;
width: 10%;
border-right: #000;
border-right-width: 2px;
}
.imageAtom{
object-fit: cover;
overflow: hidden;
width: 100%;
max-height: 400px;
}
*/
\ No newline at end of file
.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 0 → 100644
View file @ 3fd292fd
.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
src/App/mediarules.css 0 → 100644
View file @ 3fd292fd
/* * * * * * * */
/* MEDIA RULES */
/* * * * * * * */
/*For tablet or bigger*/
@media screen and (min-width: 992px) {
/* navbar opens on hover*/
.dropdown:hover .dropdown-menu {
display: block;
}
}
/*For Tablet and smaller*/
@media screen and (max-width: 992px){
.two-pdf-line{
max-height: 650px !important;
height: 26vh !important;
max-width: 50vw !important;
}
.seperator-2{
width: 1px !important;
}
.boxy-1{
margin-top: 10px !important;
}
.navbar {
flex-direction: column;
align-items: center;
}
.col-6 {
width: 100%; /* Full width on tablets */
}
.progress-bar{
display: none !important;
}
}
/*For Smartphones*/
/*12pro*/
@media screen and (max-width: 600px){
.lnp:hover > img{
display: block;
margin-left: none;
margin-right: none;
width: 8rem !important;
max-width: 100% !important;
}
.col-6 {
width: 100% ;
}
.container-fluid {
min-height: 100vh;
}
/***heading***/
.header-title{
min-height: 400px;
text-align: center;
align-items: center;
margin: auto !important;
padding: 0 30px;
font-size: 130px;
font-weight: 900;
line-height: 130px;
}
.header-container{
padding-top: 170px !important;
padding-bottom: 0px !important;
background-color: var(--ourbeige);
}
.base {
width: 100%;
background-color: var(--lightblue);
padding: 0px;
}
/***footer***/
footer {
width: 100% !important;
box-sizing: border-box !important;
padding: 15px !important;
}
.col {
width: 100% !important;
margin-bottom: 20px;
}
.col-sm-4, .col-sm-8, .col-6 {
width: 100%;
}
footer a, footer p {
font-size: 14px;
line-height: 1.4;
}
footer .socials {
display: flex;
justify-content: center !important;
margin-bottom: 10px;
}
.contact-info {
font-size: 14px;
text-align: center;
}
.img-sponsor {
width: 100px;
height: auto;
margin: 0 auto;
}
.footer-slider {
width: 100%;
margin-top: 20px;
}
footer a {
word-wrap: break-word;
overflow-wrap: break-word;
}
hr {
margin: 20px 0;
}
/***gif***/
.CFTR-gif {
width: 1000px !important;
max-width: 100%;
height: auto;
}
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
}
/*#breatht1 {
left: 0 !important;
position:initial!important;
font-size: 0.5em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
background-position: center 25%; /* Push the image down for better visibility */
height: 10px; /* Adjust the height for mobile screens */
}
/***contribution***/
.timeline-item{
padding-right: 0px !important;
padding-left: 5%;
width: 50% !important;
box-sizing: content-box;
text-align: left !important;
}
.timeline-item:nth-child(odd) {
align-self: flex-end !important;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
figure.snipp1113{
min-width: 0px !important ;
max-width: 120px ;
width: 100% ;
margin-left: 80px;
}
.timeline-item-content{
text-align:initial !important;
align-items: flex-end ;
padding-left: 30px;
font-display: initial !important;
display: flex;
position: inherit;
}
.timeline-item-content .tag{
padding: 0px !important;
}
/***engineering***/
.col-2{
width: 50% !important;
}
/***Description***/
.pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
}
.quiz-wrapper {
flex-direction: column;
padding: 10px;
width: 100% !important; /* Set width to 100% for mobile screens */
}
.quiz-front, .quiz-back {
padding: 10px !important;
}
.quiz-heading {
font-size: 1.2em;
}
.quiz-text {
font-size: 1em;
margin-bottom: 10px !important;
word-wrap: break-word; /* Keep word breaking for mobile */
}
.quiz-button-box {
margin-top: 5px !important;
justify-content: space-evenly;
}
.row-if-small{
--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));
width: 100% !important;
}
.col-4, .col-3{
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.full-small{
width: 100% !important;
max-height: 100% !important;
}
.max400{
max-width: 100% !important;
max-height: 100% !important;
}
.panel-talk-gallery div img{
max-width: 100% !important;
}
.panel-talk-gallery .col, .panel-talk-gallery .col:nth-child(5),
.panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(2),
.panel-talk-gallery .col:nth-child(3), .panel-talk-gallery .col:nth-child(4){
margin-top: 20px !important;
}
.bfh-slider{
width: 100em !important;
max-width: 250px !important;
}
.tag{
width: min-content !important;
}
.timeline-item-content time{
width: fit-content !important;
margin-top: 0 !important;
max-width: 10em !important;
}
.picture-frame{
margin-bottom: 20px !important;
}
.winner{
font-size: x-large;
}
.small-only{
display: block !important;
}
.small-none{
display: none !important;
}
.bfh-menu{
max-width: 50vw !important;
}
.two-pdf-line{
max-height: 650px !important;
height: 26vh !important;
width: 65vw !important;
max-width: 60vw !important;
margin: auto;
}
svg text{
font-size: 5vw !important;
stroke-width:1px !important;
}
.village-style-button h3{
display: none !important;
}
.village-style-button{
box-shadow: 1px 1px 1px gray;
border-radius: 10px;
border-color: var(--offblack);
padding: 10px;
}
.village-style-button:hover{
box-shadow: none;
}
.village-style-button img{
max-width: 90%;
max-height: 90%;
padding-top: 10px;
padding-bottom: 5px;
}
.bigtitle {
width: 450px !important;
height: 200px !important;
word-wrap: break-word;
}
.framecycletab{
margin-left: 0 !important;
}
body {
/* padding: 10px !important; */
width: 202% !important;
overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0;
padding: 0;
background-size: cover !important; /* Ensures the background scales to cover the entire screen */
background-position: center !important; /* Keeps the background centered */
background-repeat: no-repeat;
}
.img-half{
max-width: 100% !important;
height: auto !important;
}
/*.container {
padding: 10px;
}*/
.row{
display: grid !important;
}
.full-col-phone{
width: 100vw !important;
}
}
/*For small Smartphones (iphone 13 or similars)*/
@media screen and (max-width: 400px){
.figure-wrapper:first-of-type img {
width: 100% !important; /* Full width on small screens */
height: 10% !important; /* Maintain aspect ratio */
max-width: 100% !important; /* Limit the image width to fit the screen */
margin: 0 auto; /* Center the image horizontally */
overflow: visible !important;
}
.figure-wrapper:first-of-type img{
text-align: center; /* Ensure the figure caption is centered */
}
}
/* Big computer screens */
@media only screen and (min-width: 1600px){
.two-pdf-line{
max-height: 50vw !important;
height: 50vh !important;
}
}
/*Bigger than smartphones*/
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
/***description***/
.pie-chart-container {
width: 600px; /* Set the width of the container */
height: 600px; /* Set the height of the container */
position: relative;
margin: 0 auto; /* Center the chart */
}
@media screen and (max-width: 1300px){
.one-pdf-line{
height: 115vw !important;
}
}
\ No newline at end of file
src/components/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/components/AOSs.tsx
View file @ 3fd292fd
import { useEffect } from "react";
import AOS from "aos";
export function AOStry(){
useEffect(() => {
/* AOS.init({
AOS.init({
disable: "phone",
duration: 700,
easing: "ease-out-cubic",
}); */
});
}, []);
return(
<h1 data-aos="zoom-y-out">Sample heading</h1>
)
}
\ No newline at end of file
}
src/components/AirbuddyAnim.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function AirbuddyAnim(){
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 (
<>
{/* One */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-0.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={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-1.webp">
</img>
</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={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-2.webp">
</img>
</div>
{/* Four */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-3.webp">
</img>
</div>
{/* Five */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-4.webp">
</img>
</div>
{/* Six */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible6 ? '1' : '0'}`,
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
ref={domRef6}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-5.webp">
</img>
</div>
{/* Seven */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`}}
ref={domRef7}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-6.webp">
</img>
</div>
{/* Eight */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`}}
ref={domRef8}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-7.webp">
</img>
</div>
</>
);
}
\ No newline at end of file
src/components/BFH-Timeline.tsx 0 → 100644
View file @ 3fd292fd
This diff is collapsed.