Newer
Older
/*
- 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?
*/
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* <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 { openFromOtherPage } from "../utils/openFromOtherpAge";
import { useLocation } from "react-router-dom";
Liliana Sanfilippo
committed
const { goToPagesAndOpenTab/* , goToTextsAndOpenCollapsible */ } = useNavigation();
openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
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]);
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>
<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">
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<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="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>
<ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<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="Collabroations" id="collabs"/>
<H3 text="Partnerships" id="ships"/>