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 (2091)
1,991 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2812 additions and 858 deletions
.gitignore
View file @ 3fd292fd
......@@ -15,3 +15,8 @@ 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
code/cit.py
View file @ 3fd292fd
import argparse
import bibtexparser
# 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')
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:
......@@ -21,40 +41,52 @@ def main():
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.parse_string(file_content)
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(x+1) + "...")
print("\n Initializing empty dictionary for entry "+ str(startnum+count) + "...")
dictio = {}
en_x = library.entries[x]
print("Filling dictionary for entry "+ str(x+1) + "")
for y in en_x.fields:
key = y.key
print("Filling dictionary for entry "+ str(startnum+count) + "")
for key, value in en_x.items():
key_low = key.lower()
dictio[key_low] = y.value
dictio[key_low] = value
if en_x.entry_type == "article":
articleHTML(dictio, x, out)
elif en_x.entry_type =="misc":
miscHTML(dictio, x, out)
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}")
print(f"An unexpected error occurred: {e} in line 85")
except Exception as e:
print(f"An unexpected error occurred: {e}")
print(f"An unexpected error occurred: {e} in line 87")
except FileNotFoundError:
print(f"Error: The file '{args.input}' was not found.")
print(f"Error: The file '{args.input}' was not found. line 89")
if len(problemlist)>0:
print("- - - - - - - - - - - - - - - - - ")
print("REMAINING ERRORS:")
......@@ -64,86 +96,88 @@ def main():
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("|")
def articleHTML(dictio, x, out):
print("Writing html code for entry "+ str(x+1) + "...")
out.write("{/*<!-- Citation num " + str(x+1) + "--> */}" + "\n")
out.write("<li typeof=\"schema:ScolarlyArticle\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x+1) + "\">"+ "\n")
out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Person\">"+ "\n")
# Maximale Anzahl der anzuzeigenden Autoren
max_authors = 7
print("Just a sec, seperating authors...")
authors = dictio['author']
authors = authors.replace(" and ", "|")
liste = authors.split("|")
for a in liste:
try:
#print("processing " + a)
first = None
last = None
name = None
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(", ")
first = s[1]
first_sh = first[0]
last = s[0]
name = last + ", " + first_sh + "."
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()
if len(s) == 2:
first = s[0]
first_sh = first[0]
last = s[1]
name = last + ", " + first_sh + "."
else:
leng = len(s)
last = s[leng-1]
first = ''
for n in s:
if n != s[-1]:
first = first + n[0] + '.'
name = last + ", " + first
if a == liste[-1]:
out.write("\t" + "\t" +"<span property=\"schema:Name\"> " +name + "</span>"+ "\n")
else:
out.write("\t" +"\t" +"<span property=\"schema:Name\"> " +name + "</span>;"+ "\n")
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")
out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['title']+ ". </span>"+ "\n")
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>,&nbsp;"+ "\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:
if len(pages) > 0:
if '--' in pages:
pag = pages.split("--")
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()
out.write("\t" + "<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>"+ "\n")
elif '-' in pages:
pag = pages.split("-")
begin = pag[0].strip()
end = pag[1].strip()
out.write("\t" + "<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>"+ "\n")
elif len(pages) > 0:
out.write("\t" + "<span property=\"schema:pageBegin\">"+ pages +"</span>"+ "\n")
print("- in pages")
out.write("\t" + ",&nbsp;<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>&nbsp;"+ "\n")
else:
print("Sorry, no readable page information")
problemlist.append("Check for missing page info at " + str (x+1))
else:
print("Sorry, no page information")
problemlist.append("Check for missing page info at " + str (x+1))
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+1))
except KeyError as e:
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+1))
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")
......@@ -153,24 +187,54 @@ def articleHTML(dictio, x, out):
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+1))
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+1) + "...")
out.write("#<!-- Citation num " + str(x+1) + "-->" + "\n")
out.write("<li typeof=\"schema:WebPage\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x+1) + "\">"+ "\n")
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'].strip("\{\}")
out.write("\t" + "\t" +"<span property=\"schema:Name\">" +aut + "</span>."+ "\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" +"(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" datetime=\"" + year + "\">"+year+"</time>)."+ "\n")
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()
main()
\ No newline at end of file
code/output.txt deleted 100644 → 0
View file @ 8bff6435
{/*<!-- Citation num 1--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Roth, F.</span>;
<span property="schema:Name"> Draguhn, A.</span>
</span>
<span property="schema:name">&nbsp;Die Entwicklung der Patch-Clamp-Technik. </span>
<i property="schema:publisher" typeof="schema:Organization"> Springer eBooks</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>,&nbsp;
<span property="schema:pageBegin"> 1</span>-<span property="schema:pageEnd">14</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
<a className="doi" href="https://doi.org/10.1007/978-3-662-66053-9_1"> doi: 10.1007/978-3-662-66053-9_1</a>
</li>
{/*<!-- Citation num 2--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-2">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Mete, V.</span>
</span>
<span property="schema:name">&nbsp;Entwicklung und Validierung neuer nicht-invasiver Diagnosesysteme für Mucociliary Clearance Disorders (MCCD). </span>
<i property="schema:publisher" typeof="schema:Organization"> Dissertation, Westfälische Wilhelms-Universität Münster</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>,&nbsp;
<span property="schema:pageBegin"> </span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
<a className="doi" href="https://doi.org/10.17879/98958441905"> doi: 10.17879/98958441905</a>
</li>
{/*<!-- Citation num 3--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-3">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Giaever, I.</span>;
<span property="schema:Name"> Keese, C.</span>
</span>
<span property="schema:name">&nbsp;A morphological biosensor for mammalian cells. </span>
<i property="schema:publisher" typeof="schema:Organization"> Nature</i>
<b property="issueNumber" typeof="PublicationIssue"> 366</b>,&nbsp;
<span property="schema:pageBegin"> 591</span>-<span property="schema:pageEnd">592</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 1993">1993</time>).
<a className="doi" href="https://doi.org/10.1038/366591a0"> doi: 10.1038/366591a0</a>
</li>
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';
......@@ -17,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 =
......@@ -43,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");
......@@ -58,6 +67,7 @@ const App = () => {
) : (
<>
{/* Navigation */}
<Navbar />
......@@ -71,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>
......@@ -99,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
View file @ 3fd292fd
......@@ -22,9 +22,23 @@
.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*/
@media screen and (max-width: 768px){
/*12pro*/
@media screen and (max-width: 600px){
.lnp:hover > img{
display: block;
margin-left: none;
......@@ -32,6 +46,184 @@
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;
......@@ -65,7 +257,8 @@
.bfh-slider{
width: 100em !important;
max-width: 250px !important;
}
}
.tag{
width: min-content !important;
}
......@@ -80,9 +273,6 @@
.winner{
font-size: x-large;
}
h3{
margin-bottom: 4vw !important;
}
.small-only{
display: block !important;
}
......@@ -100,16 +290,18 @@
margin: auto;
}
svg text{
font-size: 9vw;
stroke-width:1px;
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: 20px !important;
border-color: black;
border-radius: 10px;
border-color: var(--offblack);
padding: 10px;
}
.village-style-button:hover{
box-shadow: none;
......@@ -120,16 +312,60 @@ svg text{
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*/
@media screen and (max-width: 750px){
/*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 */
......@@ -157,6 +393,13 @@ svg text{
}
/***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{
......
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