From d258e92cb85743907996825d2f74ce73fd9035d5 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 9 Aug 2024 17:50:41 +0200
Subject: [PATCH] svg texte
---
src/components/loremipsum.tsx | 13 +++++++
src/components/testsvganimation.tsx | 54 +++++++++++++++++------------
src/contents/engineering.tsx | 29 +++++++++-------
src/contents/example.css | 32 +++++++++++++++++
src/contents/example.tsx | 5 ++-
5 files changed, 95 insertions(+), 38 deletions(-)
create mode 100644 src/components/loremipsum.tsx
diff --git a/src/components/loremipsum.tsx b/src/components/loremipsum.tsx
new file mode 100644
index 00000000..06a110ce
--- /dev/null
+++ b/src/components/loremipsum.tsx
@@ -0,0 +1,13 @@
+export function LoremMedium(){
+ return(
+ <>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
+</>
+ )
+}
\ No newline at end of file
diff --git a/src/components/testsvganimation.tsx b/src/components/testsvganimation.tsx
index c1636359..086c8172 100644
--- a/src/components/testsvganimation.tsx
+++ b/src/components/testsvganimation.tsx
@@ -3,6 +3,7 @@ import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { useRef } from 'react';
import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
+import { LoremMedium } from "./loremipsum";
@@ -56,31 +57,40 @@ console.log("Started TestSVG")
return (
- <div className="col-8">
-
- <svg id="svg" xmlns="" viewBox="0 0 1980 4400">
-
- <path className="theLine" d="
- M 50 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 0 4000 540 4000 L 540 4500"
- /* file="none" */ stroke="white" strokeWidth="10px"></path>
+ <div className="row col">
+ <svg id="svg" viewBox="0 0 1500 1000">
+ {/*
+ <path className="theLine" d="S 50"
+ stroke="white" strokeWidth="10px"></path>
-
+ <path className="theLine2" d="M 300 50 S 50 200"
+ stroke="white" strokeWidth="10px" width="10px"></path>
+ */}
+ <foreignObject x="5vw" y="5vh" className="box1">
+ <h2>Mutation canidates</h2>
+ <p >
+ <LoremMedium></LoremMedium>
+ </p>
+ </foreignObject>
+ <foreignObject className="box2">
+ <h2>Mutation canidates</h2>
+ <p>
+ <LoremMedium></LoremMedium>
+ </p>
+ </foreignObject>
- <path className="theLine2" d="
- M 1030 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 540 4000 L 540 3500"
- /* file="none" */ stroke="white" strokeWidth="10px"></path>
+ {/* <path className="theLine3" d="M 300"
+ stroke="white" strokeWidth="10px"></path> */}
-
-
- <path className="theLine3" d="
- M 2000 600 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 -100 4000 L -100 4200"
- /* file="none" */ stroke="white" strokeWidth="10px"></path>
-
- </svg>
- <img ref={vectorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg"/>
- <img ref={payloadRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg" alt="payloadImg"/>
- <img ref={inhalatorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/albuterol.svg" alt="inhalatorImg"/>
- </div>
+ </svg>
+ {/* </svg> */}
+ {/* <text ref={vectorRef}>H</text>
+ <text ref={payloadRef}>B</text> */}
+ {/* <img ref={vectorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg"/>
+ */}{/* <img ref={payloadRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg" alt="payloadImg"/>
+ */}
+ {/* <img className="test2" ref={inhalatorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg" />
+ */} </div>
);
}
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 4945fc03..3f0296f2 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,5 +1,6 @@
import { openIt } from "../components/Buttons";
+import { LoremMedium } from "../components/loremipsum";
export function Engineering() {
@@ -9,9 +10,10 @@ export function Engineering() {
<div className="col">
<br/>
<br/>
- <div className="row align-items-center">
+
+{/* <div className="row align-items-center">
<div className="col-3">
- <EngineeringCycleTab/>
+
</div>
<div className="col">
@@ -36,20 +38,21 @@ export function Engineering() {
<hr/>
</div>
</div>
- </div>
-
- <section id="RNAbindingprotein">
-
- </section>
- <section id="RNAbindingprotein">
-
- </section>
- <section id="RNAbindingprotein">
-
+ </div> */}
+ <section id="one">
+ <section id="mutations">
+ <h3>Mutation canidates</h3>
+ <LoremMedium/>
+ </section>
+ <section id="508del">
+ <h3>508del</h3>
+ <LoremMedium/>
+ </section>
</section>
<section id="RNAbindingprotein">
</section>
+
</div>
</div>
@@ -59,7 +62,7 @@ export function Engineering() {
-function EngineeringCycleTab(){
+export function EngineeringCycleTab(){
return(
<svg className="rotate-linear-infinite"
width="100%"
diff --git a/src/contents/example.css b/src/contents/example.css
index df7369fc..bce2cdfe 100644
--- a/src/contents/example.css
+++ b/src/contents/example.css
@@ -57,4 +57,36 @@
.example-advanced-tag{
background-color: orangered;
width: fit-content;
+}
+
+
+.st196{fill:none;stroke:black;stroke-miterlimit:10;}
+.st455{font-size:auto;}
+
+/* .d-none{
+ background-color: red;
+} */
+
+
+
+.relative{
+ position: relative;
+}
+.flex{
+ position: flex;
+}
+
+:root{
+ --nhb1: 400px;
+ --nhb2: 400px;
+ --hb2: calc(var(--nhb1) + var(--nhb2));
+}
+.box1{
+ height: var(--nhb1);
+ width: 90%;
+}
+.box2{
+ transform: translate(5vw, var(--nhb1));
+ width: 90%;
+ height: var(--nhb2);
}
\ No newline at end of file
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 96916625..23ca5764 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -6,10 +6,9 @@ import TestSVG from "../components/testsvganimation";
export function Example() {
return (
<>
- <div className="col">
<div className="col">
<TestSVG></TestSVG>
- <h3 className="example">Exercises</h3>
+{/* <h3 className="example">Exercises</h3>
<i><h6>By Your name</h6></i>
<div className="example-exercise">
<p> All components should be in this file. The extra css has to be put into exapmle.css. Turn to Liliana if you need or want a scss file, too.</p>
@@ -171,7 +170,7 @@ export function Example() {
<p> See DocuBox component. </p>
</div>
</div>
- <hr/>
+ <hr/> */}
{/* <div className="col exercise">
<div className="row align-items-center">
<div className="col"><h4> </h4></div>
--
GitLab