diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 95ab15d22f5b17a74e902aba11e5b8a775cc8c58..f4f50a3ac47142947c7e6cd967829de9864d9425 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -446,13 +446,13 @@ footer a:hover {
.rounded-border {
margin: 50px;
padding: 50px;
- border: 2px solid #f7a901;
+ border: 2px solid #e4dfb4b0;
/* 设置边框的宽度和颜色 */
border-radius: 10px; /* 设置圆角åŠå¾„ */
margin-bottom: 100px;
margin-left: 20px;
/* max-width: 0.9vw; */
- background-color: #ffa6009f;
+ background-color: #e4dfb4b0;
/* box-shadow: 15px 15px 5px rgba(0,0,0,0.1); */
/* display: flex;
flex-direction: column; */
@@ -462,12 +462,12 @@ footer a:hover {
margin: 50px;
margin-left: 20px;
padding: 50px;
- border: 2px solid #f7a901;
+ border: 2px solid #e4dfb4b0;
/* 设置边框的宽度和颜色 */
border-radius: 10px; /* 设置圆角åŠå¾„ */
margin-bottom: 100px;
/* max-width: 0.9vw; */
- background-color: #ffa600c0;
+ background-color: #e4dfb4b0;
box-shadow: 10px 10px 5px rgba(0,0,0,0.1);
transform: scale(1.01);
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 06ce9e7c9a267c93b0b2dcd7e12796c87b0bd318..e9bbaeebeffafd39a84a9639b05d06383bac991e 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -1,6 +1,6 @@
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 {
@@ -31,201 +31,194 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
export function HumanPractices() {
// 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
+ 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-human-practices">
-<h1 className="centered-title">
-<img
- src="https://static.igem.wiki/teams/5378/header/human-practices.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="custom-header-human-practices">
+ <h1 className="centered-title">
+ <img
+ src="https://static.igem.wiki/teams/5378/header/human-practices.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} />
</div>
-
+
<div className="col-10">
-
-
- <Element name="section1" className="element rounded-border" id='section1'>
- <h2>Section 1</h2>
- <p>Content for section 1.</p>
- <img
- src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
- alt="example"
- className="responsive-img"
- />
- </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">
+
+
+ <Element name="section1" className="element rounded-border" id='section1'>
+ <h2>Section 1</h2>
+ <p>Content for section 1.</p>
+ <img
+ src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
+ alt="example"
+ className="responsive-img"
+ />
+ </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>
+ </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">
+ <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>
+ </div>
+ </Element>
- <div className="bd-callout bd-callout-info bg-gray">
- <h1>What do we do to ...? See...</h1>
- </div>
+ <div className="bd-callout bd-callout-info bg-gray">
+ <h1>What do we do to ...? See...</h1>
+ </div>
- <Element name="section5" className="element rounded-border" id='section5'>
- <h2>5. STAKEHOLDER</h2>
- <p>Our stakeholders.</p>
- <div className="rounded-border">
+ <Element name="section5" className="element rounded-border" id='section5'>
+ <h2>5. STAKEHOLDER</h2>
+ <p>Our stakeholders.</p>
+ <div className="rounded-border">
<h3 >5.1. Stakeholder Identification</h3>
<p className='indent'>
-Our iGEM project, focusing on innovative treatment for hepatic encephalopathy (<span className='bold-font'>HE</span>), has identified key stakeholders critical to the success and real-world application of our research. These stakeholders include HE patients, medical professionals (doctors), pharmaceutical company representatives, research experts involved in HE-related studies, and the general public.
- <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
- <li><span className='bold-font'>Patients</span>: Suffering from HE represent a primary stakeholder, as their quality of life directly depends on effective treatment options. </li>
- <li><span className='bold-font'>Doctors</span>: Especially hepatologists and neurologists, are integral in diagnosing and treating HE, providing us with valuable insights into clinical needs. Pharmaceutical company representatives: They are vital for translating research into market-ready therapies, ensuring accessibility and scalability of our solutions.</li>
- <li><span className='bold-font'>Researchers</span>: Including academics and specialists in liver disease, are critical for guiding the scientific direction of the project. </li>
- <li><span className='bold-font'>General public</span>: As raising awareness and educating people about HE can significantly contribute to early diagnosis and treatment, ultimately benefiting the healthcare ecosystem as a whole.</li>
- </ul>
- </p>
- </div>
- </Element>
- <Element name="section5" className="element rounded-border" id='section5'>
- <div className="rounded-border">
- <h3>5.2. Stakeholder Engagement</h3>
- <p className='indent'>
- We reached out to the stakeholders for expert insights through structured interviews, following a comprehensive engagement process: Preparation, Contact, Content Development, Execution, Summary, Reflection, and Updates. This approach allowed us to better understand the specific needs and challenges faced by each stakeholder group. Their feedback provided critical insights that guided improvements to our project design, ensuring it addresses real-world issues effectively.
- </p>
- <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
- <li><span className='bold-font'>Prepare:</span> We researched stakeholder backgrounds to understand their relevance to our project.</li>
- <li><span className='bold-font'>Contact:</span> Initial outreach was made via email and phone calls.</li>
- <li><span className='bold-font'>Interview Content Construction:</span> We developed targeted questions focusing on hepatic encephalopathy.</li>
- <li><span className='bold-font'>Conduct Interview:</span> Interviews were held online or in person.</li>
- <li><span className='bold-font'>Summarization:</span> Key insights were documented.</li>
- <li><span className='bold-font'>Reflection:</span> We analyzed the feedback to refine our approach.</li>
- <li><span className='bold-font'>Update:</span> Stakeholder feedback was integrated into project updates.</li>
- </ul>
- </div>
- </div>
+ Our iGEM project, focusing on innovative treatment for hepatic encephalopathy (<span className='bold-font'>HE</span>), has identified key stakeholders critical to the success and real-world application of our research. These stakeholders include HE patients, medical professionals (doctors), pharmaceutical company representatives, research experts involved in HE-related studies, and the general public.
+ <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+ <li><span className='bold-font'>Patients</span>: Suffering from HE represent a primary stakeholder, as their quality of life directly depends on effective treatment options. </li>
+ <li><span className='bold-font'>Doctors</span>: Especially hepatologists and neurologists, are integral in diagnosing and treating HE, providing us with valuable insights into clinical needs. Pharmaceutical company representatives: They are vital for translating research into market-ready therapies, ensuring accessibility and scalability of our solutions.</li>
+ <li><span className='bold-font'>Researchers</span>: Including academics and specialists in liver disease, are critical for guiding the scientific direction of the project. </li>
+ <li><span className='bold-font'>General public</span>: As raising awareness and educating people about HE can significantly contribute to early diagnosis and treatment, ultimately benefiting the healthcare ecosystem as a whole.</li>
+ </ul>
+ </p>
+ </div>
+ </Element>
+ <Element name="section5" className="element rounded-border" id='section5'>
+ <div className="rounded-border">
+ <h3>5.2. Stakeholder Engagement</h3>
+ <p className='indent'>
+ We reached out to the stakeholders for expert insights through structured interviews, following a comprehensive engagement process: Preparation, Contact, Content Development, Execution, Summary, Reflection, and Updates. This approach allowed us to better understand the specific needs and challenges faced by each stakeholder group. Their feedback provided critical insights that guided improvements to our project design, ensuring it addresses real-world issues effectively.
+ </p>
+ <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+ <li><span className='bold-font'>Prepare:</span> We researched stakeholder backgrounds to understand their relevance to our project.</li>
+ <li><span className='bold-font'>Contact:</span> Initial outreach was made via email and phone calls.</li>
+ <li><span className='bold-font'>Interview Content Construction:</span> We developed targeted questions focusing on hepatic encephalopathy.</li>
+ <li><span className='bold-font'>Conduct Interview:</span> Interviews were held online or in person.</li>
+ <li><span className='bold-font'>Summarization:</span> Key insights were documented.</li>
+ <li><span className='bold-font'>Reflection:</span> We analyzed the feedback to refine our approach.</li>
+ <li><span className='bold-font'>Update:</span> Stakeholder feedback was integrated into project updates.</li>
+ </ul>
+ </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>
-
- <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="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="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="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="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="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="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="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>
- <div className="col-1"></div>
+ </Element>
-
-
- </div>
+ </div>
+ </div>
</>
);
}