diff --git a/src/App/App.css b/src/App/App.css
index e8319ff5877bd42cd9597ce68177513f9b96f2af..d0290e41a3db784034c831f9648966b5dc732d5d 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -147,6 +147,9 @@ a {
h3{
margin-bottom: 2vw !important;
}
+h1, h2, h3, h4, h5, h6{
+ color: var(--text-primary) !important;
+}
code{
color:black !important;
}
diff --git a/src/components/Headings.tsx b/src/components/Headings.tsx
index cee9005d2fc099e260d9d1cbc166b7f03291fc33..12d7e2eab3321ee6db4faec4cc2860ba06623eee 100644
--- a/src/components/Headings.tsx
+++ b/src/components/Headings.tsx
@@ -95,6 +95,21 @@ export function H3({text, id}:{text: string, id?: string}){
)
}
+export function H4({text, id}:{text: string, id?: string}){
+ var idtext: string;
+ if (id) {
+ idtext = id;
+ }
+ else{
+ idtext = stringToSlug(text);
+ }
+ return(
+ <div>
+ <h4 id={idtext}>{text}</h4>
+ </div>
+
+ )
+}
export function Hhighlight({children}:{children: React.ReactNode}){
diff --git a/src/contents/Human Practices/Further Engagement/Education.tsx b/src/contents/Human Practices/Further Engagement/Education.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fef6a309c373fa239bebc64de5e3fe0c6a754a2
--- /dev/null
+++ b/src/contents/Human Practices/Further Engagement/Education.tsx
@@ -0,0 +1,43 @@
+import { ButtonOne } from "../../../components/Buttons";
+import { H4 } from "../../../components/Headings";
+import { LoremMedium } from "../../../components/Loremipsum";
+
+
+export function HPEducation(){
+ return(
+ <div className="col">
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Overview" open="edu-overview"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
+ </div>
+ </div>
+
+ <div id="edu-overview" className="cycletab" style={{display: "block"}}>
+ <H4 id="edu-out-heading" text="Our education and outreach"/>
+ <LoremMedium/>
+ <H4 id="why-heading" text="If not as a special prize - then why?"/>
+ <LoremMedium/>
+ </div>
+ <div id="akademie" className="cycletab" style={{display: "none"}}>
+ <H4 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
+ </div>
+ <div id="teutoruft" className="cycletab" style={{display: "none"}}>
+ <H4 id="teuroruft-heading" text="Educational city tour for young and old"/>
+ <div className="row align-items-center">
+ <div className="col">
+ <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-experminet.jpeg"></img>
+ </div>
+ <div className="col">
+ <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-gruppe.jpeg"></img>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/Further Engagement/FurtherEngagement.tsx b/src/contents/Human Practices/Further Engagement/FurtherEngagement.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a8bdd37a8c1c64c1db60defa031d20551fe0817e
--- /dev/null
+++ b/src/contents/Human Practices/Further Engagement/FurtherEngagement.tsx
@@ -0,0 +1,26 @@
+import { Section, Subesction } from "../../../components/sections";
+import { HPEducation } from "./Education";
+import { HPOutreach } from "./Outreach";
+
+export function HPFurtherEngagement(){
+
+ return(
+ <Section title="Further Engagement" id="Further Engagement">
+ <Subesction title="Public Engagement" id="Further Engagement1">
+ <HPOutreach/>
+ </Subesction>
+ <Subesction title="Education" id="Further Engagement2">
+ <HPEducation/>
+ </Subesction>
+ <Subesction title="Entrepreneurship" id="Further Engagement3">
+ <HPEducation/>
+ </Subesction>
+ <Subesction title="Collaborations" id="Further Engagement4">
+ <HPEducation/>
+ </Subesction>
+ <Subesction title="Partnerships" id="Further Engagement5">
+ <HPEducation/>
+ </Subesction>
+ </Section>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/Further Engagement/Outreach.tsx b/src/contents/Human Practices/Further Engagement/Outreach.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..079d4079ac8a7777c1c8e8a4fb8abf6a5e500ded
--- /dev/null
+++ b/src/contents/Human Practices/Further Engagement/Outreach.tsx
@@ -0,0 +1,82 @@
+import { ButtonOne } from "../../../components/Buttons";
+import { H4 } from "../../../components/Headings";
+import { LoremMedium } from "../../../components/Loremipsum";
+import { useNavigation } from "../../../utils/useNavigation";
+
+export function HPOutreach(){
+ const { goToPagesAndOpenTab } = useNavigation();
+ return(
+ <div className="col">
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne openclass="edu-cycletab" text="Overview" open="out-overview"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne openclass="edu-cycletab" text="MUKOmove" open="mukomove"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne openclass="edu-cycletab" text="waffel sale" open="waffel sale"></ButtonOne>
+ </div>
+ </div>
+
+ <div id="out-overview" className="edu-cycletab" style={{display: "block"}}>
+ <H4 id="edu-out-heading" text="Our education and outreach"/>
+ <LoremMedium/>
+ <H4 id="why-heading" text="If not as a special prize - then why?"/>
+ <LoremMedium/>
+ </div>
+
+ <div id="waffle sale" className="edu-cycletab" style={{display: "none"}}></div>
+ <div id="mukomove" className="edu-cycletab" style={{display: "none"}}>
+ <H4 id="cf-month" text="Cystic fibrosis awareness month"/>
+ <div className="row">
+ <div className="full-small col-3">
+ <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/wir-plakat-mukomove.jpeg"></img>
+ </div>
+ <div className="col">
+ <h3>What is MUKOmove?</h3>
+ <p>As part of the cystic fibrosis awareness month May, we took part in this year's <a href="https://www.muko.info/mukomove">MUKOmove</a> from May 8th to May
+ 12th under the team name iGEM Bielefeld. MUKOmove is a participatory sports initiative organized by
+ <a href="https://www.muko.info/"> Mukoviszidose e.V.</a>, the German Cystic Fibrosis Association, aimed at raising awareness and funds
+ for cystic fibrosis research and support. This annual event encourages individuals and teams to
+ engage in various physical activities, track their movement, and share their experiences online. </p>
+ <button>Spenden</button>
+ </div>
+ </div>
+ <br/>
+ <div className="row">
+ <div className="col">
+ <h3>Why and in which ways were we invested in MUKOmove? </h3>
+ <p>We did not stop at our participation itself – we wanted to make other people from our university and city
+ aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team.
+ Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/human-practices?tab=')}>Kathrin Westhoff</a>, the head of a
+ practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known
+ this illness still is. Especially the interview with the physiotherapist made us realize how important
+ exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in
+ Bielefeld. That is why we really got the publicity going by putting up posters and distributing flyers
+ at the university and in our city as you can see in the following picture. </p>
+ </div>
+ <div className="full-small col-4">
+ <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/img-7828.jpeg"></img>
+ </div>
+ </div>
+ <br/>
+ <p>We also called for MUKOmove on our socials and set our team a goal of collecting 240 hours doing sports together,
+ while the entire MUKOmove had a goal of collecting 24,000 sport hours. In cooperation with our university's
+ sports facilities, using their <a href="https://www.uni-bielefeld.de/einrichtungen/hochschulsport/zusatzangebote/houbi/">“HOUBI-Aktivmobil"</a> and other equipment, we organized a team event at the sports
+ ground of our university at the begin of MUKOmove. Everyone was warmly invited to our event on May 8th, and
+ it was a lot of fun to play various sport games together outside in the sun – check out in the following
+ video! </p>
+ <div className="row align-items-center">
+ <div className="col">
+ <img src="https://www.mapcom.com/wp-content/uploads/2015/07/video-placeholder.jpg"></img>
+ </div>
+ </div>
+ <br/>
+ <h3>What did we achieve?</h3>
+ <p>We are happy to announce that both movement goals were surpassed: Team iGEM Bielefeld was able to collect 358 sport hours, and everyone who took part in MUKOmove together collected 36,542 sport hours! </p>
+ <p>The MUKOmove was therefore a complete success, and we take pride in having contributed to the goal while raising more awareness for cystic fibrosis in our region and Germany as a whole.</p>
+ </div>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/IHP.tsx b/src/contents/Human Practices/IHP.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..abaea4f1bbdf29f1c6ca19666395efc90c6c3d77
--- /dev/null
+++ b/src/contents/Human Practices/IHP.tsx
@@ -0,0 +1,92 @@
+import { ButtonOne } from "../../components/Buttons";
+import { HPTimeline } from "../../components/HP-timeline";
+import { LoremMedium } from "../../components/Loremipsum";
+import { Section, Subesction } from "../../components/sections";
+
+export function HPIntegrated(){
+
+ return(
+ <Section title="Integrated Human Practices" id="Integrated Human Practices">
+ <Subesction title="Framework" id="Integrated Human Practices1">
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Stakeholder Management" open="stakemamange" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Mendelow Analysis" open="mendelow" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="SWOT analysis" open="swot" openclass="framecycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="row align-items-center" style={{marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Feedback Cycle" open="feedcycle" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Thirs Party Feedback" open="thirdparty" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Cycle of Reflection" open="refcycle" openclass="framecycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="col framecycletab" id="stakemamange" style={{display: "block"}}>stakemamange </div>
+ <div className="col framecycletab" id="mendelow" style={{display: "none"}}>mendelow </div>
+ <div className="col framecycletab" id="swot" style={{display: "none"}}>
+
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
+ <div className="col">
+ <ButtonOne text="Patients" open="pats" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Industry" open="inds" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Academia" open="acs" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Healthcare" open="healths" openclass="subcycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="row align-items-center" style={{ marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Government" open="govs" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Community" open="comms" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="The Public" open="pubs" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Business" open="busi" openclass="subcycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="col subcycletab" id="pats" style={{display: "block"}}> pats </div>
+ <div className="col subcycletab" id="inds" style={{display: "none"}}>inds </div>
+ <div className="col subcycletab" id="acs" style={{display: "none"}}>acs </div>
+ <div className="col subcycletab" id="healths" style={{display: "none"}}> healths </div>
+ <div className="col subcycletab" id="govs" style={{display: "none"}}>govs </div>
+ <div className="col subcycletab" id="comms" style={{display: "none"}}>comms </div>
+ <div className="col subcycletab" id="pubs" style={{display: "none"}}>pubs </div>
+ <div className="col subcycletab" id="busi" style={{display: "none"}}>busi </div>
+ </div>
+ <div className="col framecycletab" id="thirdparty" style={{display: "none"}}>thirdparty </div>
+ <div className="col framecycletab" id="feedcycle" style={{display: "none"}}>feedcycle </div>
+ <div className="col framecycletab" id="refcycle" style={{display: "none"}}>refcycle </div>
+ </Subesction>
+ <Subesction title="Timeline" id="Integrated Human Practices2">
+ <HPTimeline/>
+ </Subesction>
+ <Subesction title="Implementation" id="Integrated Human Practices3">
+ <LoremMedium/>
+ </Subesction>
+ <Subesction title="Feedback" id="Integrated Human Practices4">
+ <LoremMedium/>
+ </Subesction>
+ <Subesction title="Conclusion" id="Integrated Human Practices5">
+ <LoremMedium/>
+ </Subesction>
+ </Section>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/Introduction.tsx b/src/contents/Human Practices/Introduction.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9aa345e3b09d132d6e1a8bf66946a5507c3ebe7c
--- /dev/null
+++ b/src/contents/Human Practices/Introduction.tsx
@@ -0,0 +1,25 @@
+import { ButtonOne } from "../../components/Buttons";
+import { Section } from "../../components/sections";
+
+
+export function HPIntroduction(){
+
+ return(
+ <Section title="Introduction" id="Introduction">
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
+ <div className="col">
+ <ButtonOne text="Our Understanding of HP" open="understanding"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Our Mission & Vision" open="mission"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Our Target Groups" open="targets"></ButtonOne>
+ </div>
+ </div>
+ <div className="col cycletab" id="understanding" style={{display: "block"}}> understanding </div>
+ <div className="col cycletab" id="mission" style={{display: "none"}}>mission </div>
+ <div className="col cycletab" id="targets" style={{display: "none"}}>targets </div>
+ </Section>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/Overwiev.tsx b/src/contents/Human Practices/Overwiev.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0b1ab9c96651ac184cac56ce9c6bab01c2f3bbcd
--- /dev/null
+++ b/src/contents/Human Practices/Overwiev.tsx
@@ -0,0 +1,18 @@
+import { BlockQuoteB } from "../../components/Quotes";
+
+export function HPOverview(){
+
+ return(
+ <div className="col">
+ <section id="OverviewH">
+ <h2 id="Overview"></h2>
+ <span id="hp-quote"><BlockQuoteB
+ text="Human Practices is the study of how your work affects the world, and how the world affects your work."
+ cite="- Peter Carr, Director of Judging"
+ /> </span>
+ <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.6mRPyWPFEIQzo-HP4kEukgHaEK%26pid%3DApi&f=1&ipt=ad1e62d3df6a343c1c163a8246d424a7b61015ac43a0cbe279976cf544be7aa7&ipo=images" alt="placeholder"></img>
+
+ </section>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/human-practices.tsx b/src/contents/Human Practices/human-practices.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5b6fca1d6c64194600d5b2831ac163993a4a6ef1
--- /dev/null
+++ b/src/contents/Human Practices/human-practices.tsx
@@ -0,0 +1,77 @@
+/*
+- seitwärts
+- mit Farben und Text anzeigen wozu die gehören
+- bei show more unten drunter Tabs öffnen
+- wenn man auf die Person klickt soll es Infos über die Person anzeigen
+- kann mn die Karten nach Links und nach rechts ausweiten zb für Mehr infos für die Person?
+- Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism)
+- DNA Strang als Timeline?
+*/
+
+
+/* <br/>
+ <h3>Name</h3>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Tag">
+ Beruf
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p> */
+
+
+/*
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p>
+ */
+import { openElement } from "../../utils/openElement";
+import { useNavigateTabs } from "../../utils/navigation";
+import { HPOverview } from "./Overwiev";
+import { HPIntroduction } from "./Introduction";
+import { HPIntegrated } from "./IHP";
+import { HPFurtherEngagement } from "./Further Engagement/FurtherEngagement";
+
+export function HumanPractices() {
+ useNavigateTabs();
+
+
+ openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
+
+ return (
+ <div className="col">
+ <HPOverview/>
+ <HPIntroduction/>
+ <HPIntegrated/>
+ <HPFurtherEngagement/>
+
+ </div>
+
+
+ );
+}
+
+
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
deleted file mode 100644
index 89a475a3871581693fccd96cabf1ccf084c7780c..0000000000000000000000000000000000000000
--- a/src/contents/human-practices.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-/*
-- seitwärts
-- mit Farben und Text anzeigen wozu die gehören
-- bei show more unten drunter Tabs öffnen
-- wenn man auf die Person klickt soll es Infos über die Person anzeigen
-- kann mn die Karten nach Links und nach rechts ausweiten zb für Mehr infos für die Person?
-- Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism)
-- DNA Strang als Timeline?
-*/
-
-
-/* <br/>
- <h3>Name</h3>
- <hr/>
- <div className="row">
- <div className="col-2">
- <div className="t-tag Tag">
- Beruf
- </div>
- </div>
- <div className="col">Original language: German</div>
- </div>
- <div className="row">
- <div className="col">
- <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
- </div>
- <div className="col-3">
- <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
- </div>
- </div>
- <h4>Aim of contact</h4>
- <p></p>
- <h4>Insights</h4>
- <p></p>
- <h4>Clarification</h4>
- <p></p>
- <h4>Implementation</h4>
- <p></p> */
-
-
-/*
- <h4>Aim of contact</h4>
- <p></p>
- <h4>Insights</h4>
- <p></p>
- <h4>Clarification</h4>
- <p></p>
- <h4>Implementation</h4>
- <p></p>
- */
-import { ButtonOne } from "../components/Buttons";
-import { BlockQuoteB } from "../components/Quotes";
-import { useNavigation } from "../utils/useNavigation";
-import { openElement } from "../utils/openElement";
-import { HPTimeline } from "../components/HP-timeline";
-import { H2, H3 } from "../components/Headings";
-import { useNavigateTabs } from "../utils/navigation";
-
-export function HumanPractices() {
- useNavigateTabs();
- const { goToPagesAndOpenTab } = useNavigation();
-
- openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
-
- return (
- <div className="row mt-4">
-
- <span id="hp-quote"><BlockQuoteB
- text="Human Practices is the study of how your work affects the world, and how the world affects your work."
- cite="- Peter Carr, Director of Judging"
- /> </span>
- <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.6mRPyWPFEIQzo-HP4kEukgHaEK%26pid%3DApi&f=1&ipt=ad1e62d3df6a343c1c163a8246d424a7b61015ac43a0cbe279976cf544be7aa7&ipo=images" alt="placeholder"></img>
-
- <H2 text="Introduction" id="intro"/>
- <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
- <div className="col">
- <ButtonOne text="Our Understanding of HP" open="understanding"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Our Mission & Vision" open="mission"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Our Target Groups" open="targets"></ButtonOne>
- </div>
- </div>
- <div className="col cycletab" id="understanding" style={{display: "block"}}> understanding </div>
- <div className="col cycletab" id="mission" style={{display: "none"}}>mission </div>
- <div className="col cycletab" id="targets" style={{display: "none"}}>targets </div>
-
- <H3 text="Framework" id="frame"/>
- <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
- <div className="col">
- <ButtonOne text="Stakeholder Management" open="stakemamange" openclass="framecycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Mendelow Analysis" open="mendelow" openclass="framecycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="SWOT analysis" open="swot" openclass="framecycletab"></ButtonOne>
- </div>
- </div>
- <div className="row align-items-center" style={{marginBottom: "5vh"}}>
- <div className="col">
- <ButtonOne text="Feedback Cycle" open="feedcycle" openclass="framecycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Thirs Party Feedback" open="thirdparty" openclass="framecycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Cycle of Reflection" open="refcycle" openclass="framecycletab"></ButtonOne>
- </div>
- </div>
- <div className="col framecycletab" id="stakemamange" style={{display: "block"}}>stakemamange </div>
- <div className="col framecycletab" id="mendelow" style={{display: "none"}}>mendelow </div>
- <div className="col framecycletab" id="swot" style={{display: "none"}}>
-
- <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
- <div className="col">
- <ButtonOne text="Patients" open="pats" openclass="subcycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Industry" open="inds" openclass="subcycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Academia" open="acs" openclass="subcycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Healthcare" open="healths" openclass="subcycletab"></ButtonOne>
- </div>
- </div>
- <div className="row align-items-center" style={{ marginBottom: "5vh"}}>
- <div className="col">
- <ButtonOne text="Government" open="govs" openclass="subcycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Community" open="comms" openclass="subcycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="The Public" open="pubs" openclass="subcycletab"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Business" open="busi" openclass="subcycletab"></ButtonOne>
- </div>
- </div>
- <div className="col subcycletab" id="pats" style={{display: "block"}}> pats </div>
- <div className="col subcycletab" id="inds" style={{display: "none"}}>inds </div>
- <div className="col subcycletab" id="acs" style={{display: "none"}}>acs </div>
- <div className="col subcycletab" id="healths" style={{display: "none"}}> healths </div>
- <div className="col subcycletab" id="govs" style={{display: "none"}}>govs </div>
- <div className="col subcycletab" id="comms" style={{display: "none"}}>comms </div>
- <div className="col subcycletab" id="pubs" style={{display: "none"}}>pubs </div>
- <div className="col subcycletab" id="busi" style={{display: "none"}}>busi </div>
- </div>
- <div className="col framecycletab" id="thirdparty" style={{display: "none"}}>thirdparty </div>
- <div className="col framecycletab" id="feedcycle" style={{display: "none"}}>feedcycle </div>
- <div className="col framecycletab" id="refcycle" style={{display: "none"}}>refcycle </div>
-
- <H2 text="Integrated Human Practices" id="timeline"/>
- <HPTimeline/>
-
- <H2 text="Feedback and Implementation" id="feedback"/>
-
- <H2 text="Conclusion" id="conclusion"/>
-
- <H2 text="Additions" id="additions"/>
-
- <H3 text="Public Engagement" id="public"/>
-
- <H3 text="Education" id="edu"/>
- <>
- <div>
- {/* <a onClick={() => goToTextsAndOpenCollapsible("symptoms-collapsible", "/description?collapseId=")}>
- Go to Texts and Open Collapsible 1
- </a> */}
- </div>
- <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
- <div className="col">
- <ButtonOne text="Overview" open="overview"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="MUKOmove" open="mukomove"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
- </div>
- <div className="col">
- <ButtonOne text="waffel sale" open="waffel sale"></ButtonOne>
- </div>
- </div>
- <div id="overview" className="cycletab" style={{display: "block"}}>
- <H2 id="edu-out-heading" text="Our education and outreach"/>
- <H2 id="why-heading" text="If not as a special prize - then why?"/>
- </div>
- <div id="akademie" className="cycletab" style={{display: "none"}}>
- <H2 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
- </div>
- <div id="teutoruft" className="cycletab" style={{display: "none"}}>
- <H2 id="teuroruft-heading" text="Educational city tour for young and old"/>
-
- <div className="row align-items-center">
- <div className="col">
- <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-experminet.jpeg"></img>
- </div>
- <div className="col">
- <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-gruppe.jpeg"></img>
- </div>
- </div>
- </div>
- <div id="waffle sale" className="cycletab" style={{display: "none"}}></div>
- <div id="mukomove" className="cycletab" style={{display: "none"}}>
- <H2 id="cf-month" text="Cystic fibrosis awareness month"/>
- <div className="row">
- <div className="full-small col-3">
- <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/wir-plakat-mukomove.jpeg"></img>
- </div>
- <div className="col">
- <h3>What is MUKOmove?</h3>
- <p>As part of the cystic fibrosis awareness month May, we took part in this year's <a href="https://www.muko.info/mukomove">MUKOmove</a> from May 8th to May
- 12th under the team name iGEM Bielefeld. MUKOmove is a participatory sports initiative organized by
- <a href="https://www.muko.info/"> Mukoviszidose e.V.</a>, the German Cystic Fibrosis Association, aimed at raising awareness and funds
- for cystic fibrosis research and support. This annual event encourages individuals and teams to
- engage in various physical activities, track their movement, and share their experiences online. </p>
- <button>Spenden</button>
- </div>
- </div>
- <br/>
- <div className="row">
- <div className="col">
- <h3>Why and in which ways were we invested in MUKOmove? </h3>
- <p>We did not stop at our participation itself – we wanted to make other people from our university and city
- aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team.
- Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/human-practices?tab=')}>Kathrin Westhoff</a>, the head of a
- practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known
- this illness still is. Especially the interview with the physiotherapist made us realize how important
- exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in
- Bielefeld. That is why we really got the publicity going by putting up posters and distributing flyers
- at the university and in our city as you can see in the following picture. </p>
- </div>
- <div className="full-small col-4">
- <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/img-7828.jpeg"></img>
- </div>
- </div>
- <br/>
- <p>We also called for MUKOmove on our socials and set our team a goal of collecting 240 hours doing sports together,
- while the entire MUKOmove had a goal of collecting 24,000 sport hours. In cooperation with our university's
- sports facilities, using their <a href="https://www.uni-bielefeld.de/einrichtungen/hochschulsport/zusatzangebote/houbi/">“HOUBI-Aktivmobil"</a> and other equipment, we organized a team event at the sports
- ground of our university at the begin of MUKOmove. Everyone was warmly invited to our event on May 8th, and
- it was a lot of fun to play various sport games together outside in the sun – check out in the following
- video! </p>
- <div className="row align-items-center">
- <div className="col">
- <img src="https://www.mapcom.com/wp-content/uploads/2015/07/video-placeholder.jpg"></img>
- </div>
- </div>
- <br/>
- <h3>What did we achieve?</h3>
- <p>We are happy to announce that both movement goals were surpassed: Team iGEM Bielefeld was able to collect 358 sport hours, and everyone who took part in MUKOmove together collected 36,542 sport hours! </p>
- <p>The MUKOmove was therefore a complete success, and we take pride in having contributed to the goal while raising more awareness for cystic fibrosis in our region and Germany as a whole.</p>
- </div>
-
- </>
- <H3 text="The survey" id="survey"/>
-
- <H3 text="Collabroations" id="collabs"/>
-
- <H3 text="Partnerships" id="ships"/>
- </div>
-
-
- );
-}
-
-
diff --git a/src/contents/index.tsx b/src/contents/index.tsx
index 232e9770c1417b864febec3907740d845c926ec3..ef131a9185f7c46ffde421215ce5d2e9d7eaf153 100644
--- a/src/contents/index.tsx
+++ b/src/contents/index.tsx
@@ -15,7 +15,7 @@ export * from "./results.tsx";
// Safety
export * from "./safety.tsx";
// Human Practices
-export * from "./human-practices.tsx";
+export * from "./Human Practices/human-practices.tsx";
export * from "../sidebars/hpS.tsx"
export * from "./wiki.tsx";
diff --git a/src/sidebars/hpS.tsx b/src/sidebars/hpS.tsx
index ef2d1dc9e6ca8a0770ca6cca49232c1ec3346299..93019cda232e48fd6f2454f40c0f27ed1d31ee80 100644
--- a/src/sidebars/hpS.tsx
+++ b/src/sidebars/hpS.tsx
@@ -12,11 +12,10 @@ export function HpSidebar(){
}
const tabs = [
- { tab: "Abstract" },
- { tab: "Cystic Fibrosis", subtabs: ["Overview", "The CFTR Protein", "ΔF508", "Symptoms", "Diagnosis", "Treatment"]},
- {tab: "Our Motivation"},
- {tab: "Approach"},
- {tab: "Delivery"},
- {tab: "Our Vision"},
- {tab: "References"}
+ { tab: "Overview" },
+ {tab: "Introduction"},
+ {tab: "Integrated Human Practices", subtabs: ["Framework", "Timeline", "Implementation", "Feedback", "Conclusion"]},
+ {tab: "Further Engagement", subtabs: ["Public Engagement", "Education", "Entrepreneurship", "Collaborations", "Partnerships"]},
+ {tab: "Supplementary Material"},
+ // {tab: ""},
];
\ No newline at end of file