From aefacaf97b69d75d132536f921b5e5139f3a9d13 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 12:26:34 +0000
Subject: [PATCH] Update file human-practices.html
---
wiki/pages/human-practices.html | 178 +++++++++++++++++---------------
1 file changed, 96 insertions(+), 82 deletions(-)
diff --git a/wiki/pages/human-practices.html b/wiki/pages/human-practices.html
index e95fad34..bb0fffb9 100644
--- a/wiki/pages/human-practices.html
+++ b/wiki/pages/human-practices.html
@@ -1,69 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
- <title>Tsinghua - IGEM 2024</title>
- <style>
- body {
- font-family: Calibri, sans-serif;
- line-height: 1.6;
- margin: 0;
- padding: 0;
- }
- .content {
- padding: 20px;
- max-width: 800px;
- margin: 0 auto;
- }
-
- h2 {
- scroll-margin-top: 60px;
- }
- .row.mt-4 {
- margin-right: 100px;
- margin-left: 130px;
- }
-
- .expert-card {
- background-color: white;
- border: 1px solid #ddd;
- border-radius: 8px;
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Expert Card - Li Peng</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ line-height: 1.6;
+ color: #333;
+ max-width: 800px;
+ margin: 0 auto;
padding: 20px;
- margin-bottom: 20px;
+ background-color: #f4f4f4;
+ }
+ .expert-card {
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ overflow: hidden;
transition: box-shadow 0.3s ease;
}
.expert-card:hover {
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+ }
+ .expert-header {
+ display: flex;
+ padding: 20px;
+ border-bottom: 1px solid #eee;
}
.expert-image {
- width: 200px;
- height: 200px;
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
object-fit: cover;
+ margin-right: 20px;
}
- .expert-details {
- display: flex;
- flex-direction: column;
- }
- .expert-name {
- font-size: 1.5rem;
- font-weight: bold;
+ .expert-info h2 {
+ margin: 0;
+ font-size: 1.5em;
+ color: #2c3e50;
}
- .expert-role {
- font-size: 1.2rem;
- color: #666;
+ .expert-info p {
+ margin: 5px 0;
+ color: #7f8c8d;
}
.expert-takeaway {
- margin-top: 15px;
- font-weight: bold;
+ padding: 20px;
+ background-color: #ecf0f1;
+ font-style: italic;
}
.expert-content {
- margin-top: 10px;
+ padding: 20px;
display: none;
}
-
- </style>
+ .toggle-content {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ background-color: #3498db;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ font-size: 1em;
+ transition: background-color 0.3s ease;
+ }
+ .toggle-content:hover {
+ background-color: #2980b9;
+ }
+ .expert-content.show {
+ display: block;
+ animation: fadeIn 0.5s ease;
+ }
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+ </style>
</head>
<body>
{% extends "layout.html" %}
@@ -138,33 +151,31 @@
</div>
</div>
- <div class="row mt-4">
- <div class="col-lg-12">
- <div class="expert-card" onclick="toggleContent(this)">
- <div class="row">
- <div class="col-md-3">
- <img src="https://static.igem.wiki/teams/5187/wiki-hp-fig/li-peng.jpg" alt="Li Peng" class="expert-image">
- </div>
- <div class="col-md-9 expert-details">
- <span class="expert-name">Li Peng</span>
- <span class="expert-role">Expert</span>
- <p class="expert-takeaway">
- <strong>Takeaway</strong><br>
- The group gave utmost importance to safety training prior to commencing the experiment, tackling laboratory safety concerns even within the context of a level 1 microbiological lab. The experienced mentorship of Li Peng, coupled with the implementation of tailored laboratory rules, guaranteed a high level of safety awareness and curtailed potential hazards throughout the research. Moreover, Dr Li Peng also served as a supervisor and gave us expert suggestions on project design, yeast cultivation and experimental procedures.
- </p>
- <div class="expert-content">
- <p><strong>Who</strong><br>
- Li Peng, the secondary PI of the Tsinghua iGEM team with rich experience.</p>
- <p><strong>Why</strong><br>
- After determining two possible topics, we were going to enter the pre-experiment phase. To maintain a high level of biosafety, we were required to go through a safety training first. Our lab was a level 1 microbiological lab with a level 2 biosafety cabinet, but there were still numerous potential areas for errors and non-standard operations, which could lead to safety hazards, diminished efficiency, and damage to the maintenance and hygiene of the lab. Therefore, Dr Li Peng, our secondary PI, arranged a biosafety seminar for us.</p>
- <p>Dr Ling Peng had been the secondary PI of Tsinghua iGEM team for many years. Consequently, his expertise was exceptionally profound. To make it vivid and relatable, he showed us numerous photos of incorrect operations from previous teams, profoundly conveying his dissatisfaction. He also took us on a tour of the laboratory, pointing out the uses of each bench and refrigerator, explaining the standards for waste classification, and highlighting other potential areas for error. Throughout all subsequent experiments, we established the "last person" laboratory policy, where the last person to leave each day ensures that the lab is left in proper condition. Sometimes, when Dr Li Peng visited the lab and spotted any incorrect practices, he would also take photos and send them to our WeChat group to remind us. The safety and standardization of the lab have thus been firmly established.</p>
- <p>Moreover, in the early stages of our Muscure project, since we chose yeast as the chassis organism, it was necessary for us to culture yeast. However, there were relatively few yeast laboratories at Tsinghua University, and we couldn't find a source to obtain yeast, nor did we know how to culture it. It was Dr Li Peng who provided us with the yeast strains he had preserved from the past and taught us how to culture them. Dr Li Peng also gave us his molecular biology laboratory manual, guiding us on the process of yeast transformation. During our initial meetings when we were selecting topics, Dr. Li Peng also listened attentively on the side, offering us advice on feasibility and other aspects.</p>
- <p>Dr Li Peng provided us with tremendous support in terms of experimental safety, materials, and methods, largely laying the foundation for our project.</p>
- </div>
- </div>
+ <div class="expert-card">
+ <div class="expert-header">
+ <img src="https://static.igem.wiki/teams/5187/wiki-hp-fig/li-peng.jpg" alt="Li Peng" class="expert-image">
+ <div class="expert-info">
+ <h2>Li Peng</h2>
+ <p>Expert</p>
</div>
</div>
- </div>
+ <div class="expert-takeaway">
+ <strong>Takeaway:</strong> The group gave utmost importance to safety training prior to commencing the experiment, tackling laboratory safety concerns even within the context of a level 1 microbiological lab. The experienced mentorship of Li Peng, coupled with the implementation of tailored laboratory rules, guaranteed a high level of safety awareness and curtailed potential hazards throughout the research. Moreover, Dr Li Peng also served as a supervisor and gave us expert suggestions on project design, yeast cultivation and experimental procedures.
+ </div>
+ <button class="toggle-content" onclick="toggleContent()">Show Details</button>
+ <div class="expert-content" id="expertContent">
+ <h3>Who</h3>
+ <p>Li Peng, the secondary PI of the Tsinghua iGEM team with rich experience.</p>
+
+ <h3>Why</h3>
+ <p>After determining two possible topics, we were going to enter the pre-experiment phase. To maintain a high level of biosafety, we were required to go through a safety training first. Our lab was a level 1 microbiological lab with a level 2 biosafety cabinet, but there were still numerous potential areas for errors and non-standard operations, which could lead to safety hazards, diminished efficiency, and damage to the maintenance and hygiene of the lab. Therefore, Dr Li Peng, our secondary PI, arranged a biosafety seminar for us.</p>
+
+ <p>Dr Ling Peng had been the secondary PI of Tsinghua iGEM team for many years. Consequently, his expertise was exceptionally profound. To make it vivid and relatable, he showed us numerous photos of incorrect operations from previous teams, profoundly conveying his dissatisfaction. He also took us on a tour of the laboratory, pointing out the uses of each bench and refrigerator, explaining the standards for waste classification, and highlighting other potential areas for error. Throughout all subsequent experiments, we established the "last person" laboratory policy, where the last person to leave each day ensures that the lab is left in proper condition. Sometimes, when Dr Li Peng visited the lab and spotted any incorrect practices, he would also take photos and send them to our WeChat group to remind us. The safety and standardization of the lab have thus been firmly established.</p>
+
+ <p>Moreover, in the early stages of our Muscure project, since we chose yeast as the chassis organism, it was necessary for us to culture yeast. However, there were relatively few yeast laboratories at Tsinghua University, and we couldn't find a source to obtain yeast, nor did we know how to culture it. It was Dr Li Peng who provided us with the yeast strains he had preserved from the past and taught us how to culture them. Dr Li Peng also gave us his molecular biology laboratory manual, guiding us on the process of yeast transformation. During our initial meetings when we were selecting topics, Dr. Li Peng also listened attentively on the side, offering us advice on feasibility and other aspects.</p>
+
+ <p>Dr Li Peng provided us with tremendous support in terms of experimental safety, materials, and methods, largely laying the foundation for our project.</p>
+ </div>
</div>
<div class="row mt-4">
@@ -749,16 +760,19 @@
</div>
-<script>
- function toggleContent(element) {
- const content = element.querySelector('.expert-content');
- if (content.style.display === 'none' || content.style.display === '') {
- content.style.display = 'block';
- } else {
- content.style.display = 'none';
- }
+ <script>
+ function toggleContent() {
+ var content = document.getElementById('expertContent');
+ var button = document.querySelector('.toggle-content');
+ if (content.classList.contains('show')) {
+ content.classList.remove('show');
+ button.textContent = 'Show Details';
+ } else {
+ content.classList.add('show');
+ button.textContent = 'Hide Details';
}
- </script>
+ }
+</script>
</body>
</html>
{% endblock %}
\ No newline at end of file
--
GitLab