Skip to content
Snippets Groups Projects
Commit d2dc368d authored by Xingan Zhao's avatar Xingan Zhao
Browse files

Merge branch 'main' of https://gitlab.igem.org/2024/smu-gdmu-china 

merge
parents 9d30d029 2c9d13a5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/contents/experiments copy.tsx 0 → 100644
+ 116
− 0
View file @ d2dc368d
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>
</>
);
}
src/contents/experiments.tsx
+ 93
− 171
View file @ d2dc368d
import { Nav } from 'react-bootstrap'; import { Nav } from 'react-bootstrap';
import { Link,Element } from 'react-scroll'; import { Link, Element } from 'react-scroll';
import React,{useEffect,useState} from 'react'; import React, { useEffect, useState } from 'react';
// sidenavbar begin // sidenavbar begin
interface SideNavbarProps { interface SideNavbarProps {
activeLink: string; activeLink: string;
onLinkClick: (section: string) => void;
} }
const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => { const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink, onLinkClick }) => {
return ( return (
<div className="side-navbar"> <div className="side-navbar">
<Nav className="flex-column"> <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
<Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link> as={Link}
<Nav.Link as={Link} to="section3" smooth={true} duration={500} className={activeLink === 'section3' ? 'active' : 'notActive'}>Section 3</Nav.Link> to="section1"
<Nav.Link as={Link} to="section4" smooth={true} duration={500} className={activeLink === 'section4' ? 'active' : 'notActive'}>Section 4</Nav.Link> smooth={true}
<Nav.Link as={Link} to="section5" smooth={true} duration={500} className={activeLink === 'section5' ? 'active' : 'notActive'}>Section 5</Nav.Link> duration={500}
<Nav.Link as={Link} to="section6" smooth={true} duration={500} className={activeLink === 'section6' ? 'active' : 'notActive'}>Section 6</Nav.Link> className={activeLink === 'section1' ? 'active' : 'notActive'}
<Nav.Link as={Link} to="section7" smooth={true} duration={500} className={activeLink === 'section7' ? 'active' : 'notActive'}>Section 7</Nav.Link> onClick={() => onLinkClick('section1')}
<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> Section 1
<Nav.Link as={Link} to="section10" smooth={true} duration={500} className={activeLink === 'section10' ? 'active' : 'notActive'}>Section 10</Nav.Link> </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="section2"
smooth={true}
duration={500}
className={activeLink === 'section2' ? 'active' : 'notActive'}
onClick={() => onLinkClick('section2')}
>
Section 2
</Nav.Link>
{/* 添加更多导航链接 */} {/* 添加更多导航链接 */}
</Nav> </Nav>
</div> </div>
...@@ -30,174 +40,86 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => { ...@@ -30,174 +40,86 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
export function Experiments() { export function Experiments() {
// sidenavbar begin // sidenavbar begin
const [activeLink, setActiveLink] = useState<string>(''); const [activeLink, setActiveLink] = useState<string>('section1');
useEffect(() => { const [visibleSection, setVisibleSection] = useState<string>('section1');
const handleScroll = () => {
const sections = document.querySelectorAll('.element'); useEffect(() => {
let currentSection = ''; const handleScroll = () => {
sections.forEach(section => { const sections = document.querySelectorAll('.element');
const sectionTop = section.getBoundingClientRect().top; let currentSection = '';
if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) { sections.forEach(section => {
currentSection = section.id; const sectionTop = section.getBoundingClientRect().top;
} if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
}); currentSection = section.id;
setActiveLink(currentSection); }
}; });
window.addEventListener('scroll', handleScroll); setActiveLink(currentSection);
return () => window.removeEventListener('scroll', handleScroll); };
}, []); window.addEventListener('scroll', handleScroll);
// sidenavbar end return () => window.removeEventListener('scroll', handleScroll);
}, []);
// sidenavbar end
const handleMouseEnter = (section: string) => {
setVisibleSection(section);
};
const handleLinkClick = (section: string) => {
setVisibleSection(section);
};
return ( return (
<> <>
<div className="custom-header-experiments"> <div className="custom-header-experiments">
<h1 className="centered-title"> <h1 className="centered-title">
<img <img
src="https://static.igem.wiki/teams/5378/header/experiment.png" src="https://static.igem.wiki/teams/5378/header/experiment.png"
alt="safety header" alt="safety header"
className="header-img" className="header-img"
/> />
<img <img
src="https://static.igem.wiki/teams/5378/header/header-bar.webp" src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
alt="safety header" alt="safety header"
className="header-bar" className="header-bar"
/> />
</h1> </h1>
</div> </div>
<div className="row bg-rice_yellow">
<div className="row bg-rice_yellow">
<div className="col-2"> <div className="col-2">
<SideNavbar activeLink={activeLink} /> <SideNavbar activeLink={activeLink} onLinkClick={handleLinkClick} />
</div> </div>
<div className="col-10"> <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
<Element name="section1" className="element rounded-border" id='section1'> name="section2"
<h2>Section 1</h2> className="element rounded-border"
<p>Content for section 1.</p> id='section2'
onMouseEnter={() => handleMouseEnter('section2')}
<iframe style={{ display: visibleSection === 'section2' ? 'block' : 'none' }}
src="https://static.igem.wiki/teams/5378/pdf/example.pdf" >
style={{ width: '100%', height: '1000px' }} <h2>Section 2</h2>
title="PDF Viewer" <p>Content for section 2.</p>
></iframe> <div className="rounded-border">
</Element> <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>
<div className="bd-callout bd-callout-info bg-gray"> <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>
<h1>What do we do to ...? See...</h1> </div>
</div> </Element>
<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>
</div> </div>
<div className="col-1"></div> <div className="col-1"></div>
</div> </div>
</> </>
); );
} }
\ No newline at end of file
src/contents/parts.tsx
+ 1
− 1
View file @ d2dc368d
...@@ -145,7 +145,7 @@ export function parts() { ...@@ -145,7 +145,7 @@ export function parts() {
<Element name="section3" className="element rounded-border" id='section3'> <Element name="section3" className="element rounded-border" id='section3'>
<h2> 3.Contribution</h2> <h2> 3.Contribution</h2>
<p className="indent">In addition, we have added content to the uploaded parts.</p> <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> </Element>
......
src/contents/safety.tsx
+ 1
− 6
View file @ d2dc368d
...@@ -73,15 +73,10 @@ export function Safety() { ...@@ -73,15 +73,10 @@ export function Safety() {
<Element name="section1" className="element rounded-border" id='section1'> <Element name="section1" className="element rounded-border" id='section1'>
<h2 className="center-text">Overview</h2> <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> The next page details the security measures and considerations our team has taken into account for this iGEM project.</p>
</Element> </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'> <Element name="section2" className="element rounded-border" id='section2'>
<h2 className="center-text">Safe Project Design</h2> <h2 className="center-text">Safe Project Design</h2>
<h3>2.1Chassis Safety</h3> <h3>2.1Chassis Safety</h3>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment