diff --git a/src/contents/experiments copy.tsx b/src/contents/experiments copy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b4b0661b49b5ad9a707b7a0eb83302ca89bfbd0b
--- /dev/null
+++ b/src/contents/experiments copy.tsx
@@ -0,0 +1,116 @@
+import { Nav } from 'react-bootstrap';
+import { Link,Element } from 'react-scroll';
+import React,{useEffect,useState} from 'react';
+
+// sidenavbar begin
+interface SideNavbarProps {
+ activeLink: string;
+}
+const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
+ return (
+ <div className="side-navbar">
+ <Nav className="flex-column">
+ <Nav.Link as={Link} to="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Section 1</Nav.Link>
+ <Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link>
+
+
+ {/* æ·»åŠ æ›´å¤šå¯¼èˆªé“¾æŽ¥ */}
+ </Nav>
+ </div>
+ );
+};
+// sidenavbar end
+
+export function Experiments() {
+ // sidenavbar begin
+ const [activeLink, setActiveLink] = useState<string>('');
+ useEffect(() => {
+ const handleScroll = () => {
+ const sections = document.querySelectorAll('.element');
+ let currentSection = '';
+ sections.forEach(section => {
+ const sectionTop = section.getBoundingClientRect().top;
+ if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
+ currentSection = section.id;
+ }
+ });
+ setActiveLink(currentSection);
+ };
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+ // sidenavbar end
+
+
+
+ return (
+ <>
+ <div className="custom-header-experiments">
+ <h1 className="centered-title">
+ <img
+ src="https://static.igem.wiki/teams/5378/header/experiment.png"
+ alt="safety header"
+ className="header-img"
+ />
+ <img
+ src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
+ alt="safety header"
+ className="header-bar"
+ />
+ </h1>
+ </div>
+
+
+ <div className="row bg-rice_yellow">
+ <div className="col-2">
+ <SideNavbar activeLink={activeLink} />
+ </div>
+
+
+ <div className="col-10">
+
+
+ <Element name="section1" className="element rounded-border" id='section1'>
+ <h2>Section 1</h2>
+ <p>Content for section 1.</p>
+ </Element>
+
+ <div className="bd-callout bd-callout-info bg-gray">
+ <h1>What do we do to ...? See...</h1>
+ </div>
+
+
+ {/* <Element name="section2" className="element rounded-border" id='section2'>
+ <h2>Section 2</h2>
+ <p>Content for section 2.</p>
+ <img
+ src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
+ alt="example"
+ className="responsive-img"
+ />
+ </Element> */}
+
+
+ <Element name="section3" className="element rounded-border" id='section2'>
+ <h2>Section 2</h2>
+ <p>Content for section 2.</p>
+ <div className="rounded-border">
+ <h4 className="center-text">Section 2</h4>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ </div>
+ </Element>
+
+
+
+
+
+ </div>
+ <div className="col-1"></div>
+
+
+
+ </div>
+ </>
+ );
+}
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index 7380947cfffc585ae9580534b1f06b496ecadeba..01b0bd7490e47e8476525973f3702693356831c1 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -1,26 +1,36 @@
import { Nav } from 'react-bootstrap';
-import { Link,Element } from 'react-scroll';
-import React,{useEffect,useState} from 'react';
+import { Link, Element } from 'react-scroll';
+import React, { useEffect, useState } from 'react';
// sidenavbar begin
interface SideNavbarProps {
activeLink: string;
+ onLinkClick: (section: string) => void;
}
-const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
+const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink, onLinkClick }) => {
return (
<div className="side-navbar">
<Nav className="flex-column">
- <Nav.Link as={Link} to="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Section 1</Nav.Link>
- <Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link>
- <Nav.Link as={Link} to="section3" smooth={true} duration={500} className={activeLink === 'section3' ? 'active' : 'notActive'}>Section 3</Nav.Link>
- <Nav.Link as={Link} to="section4" smooth={true} duration={500} className={activeLink === 'section4' ? 'active' : 'notActive'}>Section 4</Nav.Link>
- <Nav.Link as={Link} to="section5" smooth={true} duration={500} className={activeLink === 'section5' ? 'active' : 'notActive'}>Section 5</Nav.Link>
- <Nav.Link as={Link} to="section6" smooth={true} duration={500} className={activeLink === 'section6' ? 'active' : 'notActive'}>Section 6</Nav.Link>
- <Nav.Link as={Link} to="section7" smooth={true} duration={500} className={activeLink === 'section7' ? 'active' : 'notActive'}>Section 7</Nav.Link>
- <Nav.Link as={Link} to="section8" smooth={true} duration={500} className={activeLink === 'section8' ? 'active' : 'notActive'}>Section 8</Nav.Link>
- <Nav.Link as={Link} to="section9" smooth={true} duration={500} className={activeLink === 'section9' ? 'active' : 'notActive'}>Section 9</Nav.Link>
- <Nav.Link as={Link} to="section10" smooth={true} duration={500} className={activeLink === 'section10' ? 'active' : 'notActive'}>Section 10</Nav.Link>
- <Nav.Link as={Link} to="section11" smooth={true} duration={500} className={activeLink === 'section11' ? 'active' : 'notActive'}>Section 11</Nav.Link>
+ <Nav.Link
+ as={Link}
+ to="section1"
+ smooth={true}
+ duration={500}
+ className={activeLink === 'section1' ? 'active' : 'notActive'}
+ onClick={() => onLinkClick('section1')}
+ >
+ Section 1
+ </Nav.Link>
+ <Nav.Link
+ as={Link}
+ to="section2"
+ smooth={true}
+ duration={500}
+ className={activeLink === 'section2' ? 'active' : 'notActive'}
+ onClick={() => onLinkClick('section2')}
+ >
+ Section 2
+ </Nav.Link>
{/* æ·»åŠ æ›´å¤šå¯¼èˆªé“¾æŽ¥ */}
</Nav>
</div>
@@ -30,174 +40,86 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
export function Experiments() {
// sidenavbar begin
- const [activeLink, setActiveLink] = useState<string>('');
- useEffect(() => {
- const handleScroll = () => {
- const sections = document.querySelectorAll('.element');
- let currentSection = '';
- sections.forEach(section => {
- const sectionTop = section.getBoundingClientRect().top;
- if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
- currentSection = section.id;
- }
- });
- setActiveLink(currentSection);
- };
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
- }, []);
- // sidenavbar end
-
-
+ const [activeLink, setActiveLink] = useState<string>('section1');
+ const [visibleSection, setVisibleSection] = useState<string>('section1');
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const sections = document.querySelectorAll('.element');
+ let currentSection = '';
+ sections.forEach(section => {
+ const sectionTop = section.getBoundingClientRect().top;
+ if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
+ currentSection = section.id;
+ }
+ });
+ setActiveLink(currentSection);
+ };
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+ // sidenavbar end
+
+ const handleMouseEnter = (section: string) => {
+ setVisibleSection(section);
+ };
+
+ const handleLinkClick = (section: string) => {
+ setVisibleSection(section);
+ };
return (
<>
<div className="custom-header-experiments">
-<h1 className="centered-title">
- <img
- src="https://static.igem.wiki/teams/5378/header/experiment.png"
- alt="safety header"
- className="header-img"
- />
- <img
- src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
- alt="safety header"
- className="header-bar"
- />
-</h1>
-</div>
- <div className="row bg-rice_yellow">
+ <h1 className="centered-title">
+ <img
+ src="https://static.igem.wiki/teams/5378/header/experiment.png"
+ alt="safety header"
+ className="header-img"
+ />
+ <img
+ src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
+ alt="safety header"
+ className="header-bar"
+ />
+ </h1>
+ </div>
+
+ <div className="row bg-rice_yellow">
<div className="col-2">
- <SideNavbar activeLink={activeLink} />
+ <SideNavbar activeLink={activeLink} onLinkClick={handleLinkClick} />
</div>
<div className="col-10">
+ <Element
+ name="section1"
+ className="element rounded-border"
+ id='section1'
+ onMouseEnter={() => handleMouseEnter('section1')}
+ style={{ display: visibleSection === 'section1' ? 'block' : 'none' }}
+ >
+ <h2>Section 1</h2>
+ <p>Content for section 1.</p>
+ </Element>
-
- <Element name="section1" className="element rounded-border" id='section1'>
- <h2>Section 1</h2>
- <p>Content for section 1.</p>
-
- <iframe
- src="https://static.igem.wiki/teams/5378/pdf/example.pdf"
- style={{ width: '100%', height: '1000px' }}
- title="PDF Viewer"
- ></iframe>
- </Element>
-
- <div className="bd-callout bd-callout-info bg-gray">
- <h1>What do we do to ...? See...</h1>
- </div>
-
-
- <Element name="section2" className="element rounded-border" id='section2'>
- <h2>Section 2</h2>
- <p>Content for section 2.</p>
- <img
- src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
- alt="example"
- className="responsive-img"
- />
- </Element>
-
-
- <Element name="section3" className="element rounded-border" id='section3'>
- <h2>Section 3</h2>
- <p>Content for section 3.</p>
- <div className="rounded-border">
- <h4 className="center-text">Section 3</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section4" className="element rounded-border" id='section4'>
- <h2>Section 4</h2>
- <p>Content for section 4.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section5" className="element rounded-border" id='section5'>
- <h2>Section 5</h2>
- <p>Content for section 5.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section6" className="element rounded-border" id='section6'>
- <h2>Section 6</h2>
- <p>Content for section 6.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section7" className="element rounded-border" id='section7'>
- <h2>Section 7</h2>
- <p>Content for section 7.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section8" className="element rounded-border" id='section8'>
- <h2>Section 8</h2>
- <p>Content for section 8.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section9" className="element rounded-border" id='section9'>
- <h2>Section 9</h2>
- <p>Content for section 9.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section10" className="element rounded-border" id='section10'>
- <h2>Section 10</h2>
- <p>Content for section 10.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
- <Element name="section11" className="element rounded-border" id='section11'>
- <h2>Section 11</h2>
- <p>Content for section 11.</p>
- <div className="rounded-border">
- <h4 className="center-text">我是大帅B</h4>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
- </div>
- </Element>
-
-
+ <Element
+ name="section2"
+ className="element rounded-border"
+ id='section2'
+ onMouseEnter={() => handleMouseEnter('section2')}
+ style={{ display: visibleSection === 'section2' ? 'block' : 'none' }}
+ >
+ <h2>Section 2</h2>
+ <p>Content for section 2.</p>
+ <div className="rounded-border">
+ <h4 className="center-text">Section 2</h4>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+ </div>
+ </Element>
</div>
<div className="col-1"></div>
-
-
-
</div>
</>
);
-}
+}
\ No newline at end of file
diff --git a/src/contents/parts.tsx b/src/contents/parts.tsx
index 3968c95c618372b55a95243e084221d65845bc66..2ea8bc2ef716237b981d9ad69b70d62dda2fc298 100644
--- a/src/contents/parts.tsx
+++ b/src/contents/parts.tsx
@@ -145,7 +145,7 @@ export function parts() {
<Element name="section3" className="element rounded-border" id='section3'>
<h2> 3.Contribution</h2>
<p className="indent">In addition, we have added content to the uploaded parts.</p>
- <p className="indent">We optimized the codon of <a href=''>BBa_K3924011</a> and <a href=''>BBa_K3924002</a>, and added two basic components accordingly, namely <a href=''>BBa_K5378011</a> and <a href=''>BBa_K5378012</a>.</p>
+ <p className="indent">We optimized the codon of <a href='https://parts.igem.org/Part:BBa_K3924011'>BBa_K3924011</a> and <a href='https://parts.igem.org/Part:BBa_K3924002'>BBa_K3924002</a>, and added two basic components accordingly, namely <a href='https://parts.igem.org/Part:BBa_K5378011'>BBa_K5378011</a> and <a href='https://parts.igem.org/Part:BBa_K5378012'>BBa_K5378012</a>.</p>
</Element>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index d8a8e507f826d3c18bdedfae3c08c6dcea2d48e4..0342dbef9685d45fec37546e1791d76009c57b26 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -73,15 +73,10 @@ export function Safety() {
<Element name="section1" className="element rounded-border" id='section1'>
<h2 className="center-text">Overview</h2>
- <p>Members of SMU-GDMU attach great importance to all safety issues involved in the project progress process and implement effective and feasible solutions to the safety issues faced, including project design safety, experimental safety, and biosafety.
+ <p className="indent">Members of SMU-GDMU attach great importance to all safety issues involved in the project progress process and implement effective and feasible solutions to the safety issues faced, including project design safety, experimental safety, and biosafety.
The next page details the security measures and considerations our team has taken into account for this iGEM project.</p>
</Element>
- <div className="bd-callout bd-callout-info bg-gray">
- <h1>What do we do to ...? See...</h1>
- </div>
-
-
<Element name="section2" className="element rounded-border" id='section2'>
<h2 className="center-text">Safe Project Design</h2>
<h3>2.1Chassis Safety</h3>