Newer
Older
import { ButtonOneEngineering } from "../components/Buttons";
Liliana Sanfilippo
committed
import { H3 } from "../components/Headings";
import { useTabNavigation } from "../utils/TabNavigation";
Liliana Sanfilippo
committed
<br/> <br/> <br/>
<div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
Liliana Sanfilippo
committed
<section > <br id="obenengineering"/>
Liliana Sanfilippo
committed
<div className="bg-lb box" >
Liliana Sanfilippo
committed
<H3 text="Our cycle" id="ourcycle"></H3>
Liliana Sanfilippo
committed
<p>Hallo Prime Editing diesdas</p>
</div>
<br/>
<div className="row">
<div className="col">
</div>
<div className="col button-left">
<div className="right"><ButtonOneEngineering label="Next" open="proof-of-concept"/></div>
</div>
</div>
</section>
</div>
<div id="tab-proof-of-concept" className="enginneeringtab" style={{display: "none"}}>
<section >
<div className="bg-lb box" >
<H3 id="Proof of Concept" text="Proof of Concept"></H3>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="cyc1">
<h3>cyc1</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="cyc2">
<h3>cyc2</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="cyc3">
<h3>cyc3</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="cyc4">
<h3>cyc4</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<br/>
<div className="row ">
<div className="col">
<div className="left"><ButtonOneEngineering label="Previous" open="our-cycle"/></div>
</div>
<div className="col button-left">
<div className="right"><ButtonOneEngineering label="Next" open="pe-systems"/></div>
</div>
</div>
</div>
<div className="enginneeringtab" id="tab-pe-systems" style={{display: "none"}}>
Liliana Sanfilippo
committed
<section id="PE Systems sec" >
<div className="bg-lb box" >
<H3 id="PE Systems" text="PE Systems"></H3>
<div className="box" >
<p id="pe1">
<h3>pe1</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="pe2">
<h3>pe2</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="pe3">
<h3>pe3</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<br/>
<div className="row ">
<div className="col">
<div className="left"><ButtonOneEngineering label="Previous" open="proof-of-concept"/></div>
</div>
<div className="col button-left">
<div className="right"><ButtonOneEngineering label="Next" open="nikase"/></div>
</div>
</div>
</div>
<div className="enginneeringtab" id="tab-nikase" style={{display: "none"}}>
Liliana Sanfilippo
committed
<section id="Nikase sec" >
<div className="bg-lb box" >
<H3 id="Nikase" text="Nikase"></H3>
<img src="https://static.igem.wiki/teams/5247/fanzor/movie2-ezgif-com-video-to-gif-converter.gif"></img>
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
</div>
<div className="box" >
<p id="nik1">
<h3>nik1</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="nik2">
<h3>nik2</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="nik3">
<h3>nik3</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="nik4">
<h3>nik4</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="nik5">
<h3>nik5</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="nik6">
<h3>nik6</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
<br/>
<div className="row ">
<div className="col">
<div className="left"><ButtonOneEngineering label="Previous" open="pe-systems"/></div>
</div>
<div className="col button-left">
<div className="right"><ButtonOneEngineering label="Next" open="pegrna"/></div>
</div>
</div>
</section>
</div>
<div className="enginneeringtab" id="tab-pegrna" style={{display: "none"}}>
Liliana Sanfilippo
committed
<section id="pegRNA sec" >
<div className="bg-lb box" >
<H3 id="pegRNA" text="pegRNA"></H3>
201
202
203
204
205
206
207
208
209
210
211
212
213
214
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
<div className="box" >
<p id="peg1">
<h3>peg1</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="peg2">
<h3>peg2</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="peg3">
<h3>peg3</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="peg4">
<h3>peg4</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="peg5">
<h3>peg5</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="peg6">
<h3>peg6</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<br/>
<div className="row ">
<div className="col">
<div className="left"><ButtonOneEngineering label="Previous" open="nikase"/></div>
</div>
<div className="col button-left">
<div className="right"><ButtonOneEngineering label="Next" open="delivery"/></div>
</div>
</div>
</section>
</div>
<div className="enginneeringtab" id="tab-delivery" style={{display: "none"}}>
Liliana Sanfilippo
committed
<section id="Delivery sec" >
<div className="bg-lb box" >
<H3 id="Delivery" text="Delivery"></H3>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="del1">
<h3>del1</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
<p id="del2">
<h3>del2</h3>
<LoremShort></LoremShort>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</p>
</div>
<div className="box" >
<p id="del3">
<h3>del3</h3>
<LoremShort></LoremShort>
</p>
<p><LoremShort></LoremShort></p>
<p><LoremShort></LoremShort></p>
</div>
<br/>
<div className="row ">
<div className="col">
<div className="left"><ButtonOneEngineering label="Previous" open="pegrna"/></div>
</div>
<div className="col button-left">
<div className="right"><ButtonOneEngineering label="Next" open="references"/></div>
</div>
</div>
<div className="enginneeringtab" id="tab-references" style={{display: "none"}}>
Liliana Sanfilippo
committed
<section id="References sec" >
<div className="bg-lb box" >
<H3 id="References" text="References"></H3>
<p><LoremShort></LoremShort></p>
</div>
<br/>
<div className="row ">
<div className="col">
<div className="left"><ButtonOneEngineering label="Previous" open="delivery"/></div>
</div>
<div className="col button-left">
</div>
</div>
return(
<svg className="rotate-linear-infinite"
width="100%"
height="100%"
viewBox="0 0 133 133"
id="svg25"
xmlns="http://www.w3.org/2000/svg">
<defs
id="defs1">
</defs>
<g
id="Layer_2"
data-name="Layer 2"
style={{strokeWidth:"6",strokeDasharray:"none"}}>
<g
id="Plasmid"
style={{strokeWidth:"6",strokeDasharray:"none"}}>
<g
id="g25"
transform="translate(7.500978,3.0504898)">
<a typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
<path
className="cls-7"
d="m 42.05,115.59 c 27.77,9.19 57.83,-4.79 69.76,-32.23"
id="path22"
style={{stroke:"#f4cc1e",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
</a>
</g>
<g
id="g26"
transform="translate(8.0019699,2.8418223)"
style={{strokeWidth:"6",strokeDasharray:"none"}}>
<polygon
className="cls-13"
points="112.07,83.36 110.94,76.27 117.65,78.84 "
id="polygon25"
style={{fill:"#850f78",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
transform="matrix(2.9806259,0,0,2.9806259,-225.43722,-156.45123)" />
<a typeof="button" className="svg-button" onClick={openElement({elementToOpen: "learning", classToHide: "cycletab"})}>
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
<path
className="cls-12"
d="M 114,78.55 C 123.45,50.86 110,20.75 82.66,8.6"
id="path25"
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text31"
transform="translate(5.6902194,-0.11551883)"><textPath
xlinkHref="#path25"
id="textPath33">Learn<tspan
id="tspan31" /></textPath></text> </a>
</g>
<g
id="g27"
style={{strokeWidth:"6",strokeDasharray:"none"}}
transform="translate(8.0019699,2.8418223)">
<polygon
className="cls-10"
points="62.53,7.12 63.47,0 69.17,4.37 "
id="polygon23"
transform="matrix(2.7712263,0.58147548,-0.58147548,2.7712263,-96.587828,-39.748071)"
style={{fill:"#a0a7f3",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
inkscape:transform-center-x="3.6173751"
inkscape:transform-center-y="5.1978852" />
<a typeof="button" className="svg-button" onClick={openElement({elementToOpen: "testing", classToHide: "cycletab"})}>
<path
className="cls-9"
d="M 78.599111,7.5468264 C 43.820346,-2.6177588 13.956746,14.286046 4.2106281,46.368749"
id="path23"
style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text28"
transform="translate(-0.03023506,-5.9602336)"><textPath
xlinkHref="#path23"
id="textPath28">Test</textPath></text> </a>
</g>
<g
id="g28"
style={{strokeWidth:"6",strokeDasharray:"none"}}
transform="translate(8.0019699,2.8418223)">
<polygon
className="cls-13"
points="117.65,78.84 112.07,83.36 110.94,76.27 "
id="polygon25-6"
style={{fill:"#f57d22",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
transform="matrix(-2.9650314,0.30449893,-0.30449893,-2.9650314,364.84067,249.28249)" />
<a typeof="button" className="svg-button" onClick={openElement({elementToOpen: "building", classToHide: "cycletab"})}>
<path
className="cls-11"
d="M 2.6659753,50.953505 C -2.0956694,72.727915 10.936866,102.94273 36.656234,113.62834"
id="path24"
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text32"
transform="translate(-5.7110315,1.7453243)"><textPath
xlinkHref="#path24"
id="textPath32">Build<tspan
id="tspan32" /></textPath></text> </a>
</g>
<polygon
className="cls-8"
points="37.22,113.74 44.3,112.56 41.78,119.28 "
id="polygon22"
style={{strokeWidth:"6",strokeDasharray:"none",fill:"#f4cc1e",fillOpacity:"1"}}
transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
<a typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text29"
transform="translate(8.4052921,8.8553334)"><textPath
xlinkHref="#path22"
id="textPath34">Design<tspan
id="tspan29" /></textPath></text> </a>
</g>
</g>
<a typeof="button" className="svg-button" onClick={openElement({elementToOpen: "overview", classToHide: "cycletab"})}>
<circle
style={{opacity:"0.85",fill:"#e2dad7",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",paintOrder:"fill markers stroke"}}
id="path1"
cx="67.916214"
cy="63.214005"
r="20" />
<text
style={{fontSize:"8px",lineHeight:"0",fontFamily:"Arial",opacity:"0.85",fill:"#000000",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",paintOrder:"fill markers stroke"}}
x="50.929825"
y="66.676674"
id="text1">
<tspan
id="tspan1"
x="50.929825"
y="66.676674"
style={{fontSize:"8px"}}>Overview</tspan></text>
</a>
</svg>
)
}