/*
- 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 { openFromOtherPage } from "../utils/openFromOtherpAge";
import { BlockQuoteB } from "../components/Quotes";
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { useNavigation } from "../utils/useNavigation";
import { openElement } from "../utils/openElement";
import { HPTimeline } from "../components/HP-timeline";
import { H2, H3 } from "../components/Headings";
export function HumanPractices() {
const { goToPagesAndOpenTab/* , goToTextsAndOpenCollapsible */ } = useNavigation();
openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
const location = useLocation();
useEffect(() => {
const params = new URLSearchParams(location.search);
const collapseId = params.get('collapseId');
const tabId = params.get('tab');
// Scroll to the section specified by collapseId
if (collapseId) {
const collapseElement = document.getElementById(collapseId);
if (collapseElement) {
const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
const scrollPosition = elementTop - offset;
window.scrollTo({
top: scrollPosition,
behavior: 'smooth',
});
}
}
// Open the tab specified by tabId
if (tabId) {
openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
}
}, [location.search]);
return (
<div className="row mt-4">
<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"
/>
<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>
<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="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>
);
}