(增加气泡内容,删除项目描述。) |
m |
||
(18 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<title>2018 iGEM_DLUT_B</title> | <title>2018 iGEM_DLUT_B</title> | ||
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css"> | ||
Line 7: | Line 8: | ||
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css"> | ||
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css"> | ||
− | |||
<script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script> | <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script> | ||
− | <script | + | |
+ | <script> | ||
+ | function check() { | ||
+ | let a = false, b = false; | ||
+ | if (navigator.userAgent.indexOf("compatible") > -1) | ||
+ | if (navigator.userAgent.indexOf("MSIE") > -1) | ||
+ | a = true; | ||
+ | if (navigator.userAgent.indexOf('Trident') > -1) | ||
+ | if (navigator.userAgent.indexOf("rv:11.0") > -1) | ||
+ | b = true; | ||
+ | if (a || b) | ||
+ | alert('We are sorry but Microsoft Internet Explorer may be too old to display this page correctly.\nIt is recommended to update your browser, otherwise your experience may suffer.'); | ||
+ | } | ||
+ | </script> | ||
</head> | </head> | ||
− | <body> | + | <body onload="check()"> |
<div id="dlutb"> | <div id="dlutb"> | ||
<div id="header"> | <div id="header"> | ||
+ | <div id="team">DLUT_China_B</div> | ||
<div id="nav"></div> | <div id="nav"></div> | ||
− | + | <div id="box"> | |
− | <div | + | <img src="https://static.igem.org/mediawiki/2018/4/47/T--DLUT_China_B--Top1.png"> |
− | + | <div> | |
− | + | <h2>Dr. Familict</h2> | |
+ | <p>Hello! I’m a lovely Kidney baby, an essential organ in your body. Can you see those sparkling items | ||
+ | pointed by my hand? Right! This is a wonderful liquid crystal show caused by the combination of | ||
+ | β<sub>2</sub>-MG and nanobodies. What’s more, the different concentrations of β<sub>2</sub>-MG make | ||
+ | the different degree of brightness showed by liquid crystal. We can make use of this phenomenon to | ||
+ | achieve early detection of CKD caused mostly by diabetes and high blood pressure according to the | ||
+ | brightness displayed by the detector confidently. Such an amazing idea, right?</p> | ||
+ | </div> | ||
</div> | </div> | ||
<br> | <br> | ||
− | <a class=" | + | </div> |
+ | |||
+ | <div id="circle"> | ||
+ | <div class="tr"> | ||
+ | <div class="td"> | ||
+ | <a href="https://2018.igem.org/Team:DLUT_China_B/Description"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/b/b8/T--DLUT_China_B--Circle1.png" width="250"> | ||
+ | <div>Project</div> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="td"> | ||
+ | <a href="https://2018.igem.org/Team:DLUT_China_B/Parts"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/f/f0/T--DLUT_China_B--Circle2.png" width="250"> | ||
+ | <div>Parts</div> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="td"> | ||
+ | <a href="https://2018.igem.org/Team:DLUT_China_B/GrayValueConcentrationModel"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c6/T--DLUT_China_B--Circle3.png" width="250"> | ||
+ | <div>Model</div> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="tr"> | ||
+ | <div class="td"> | ||
+ | <a href="https://2018.igem.org/Team:DLUT_China_B/Applied_Design"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/7/71/T--DLUT_China_B--Circle4.png" width="250"> | ||
+ | <div>Awards</div> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="td"> | ||
+ | <a href="https://2018.igem.org/Team:DLUT_China_B/Human_Practices"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/6/63/T--DLUT_China_B--Circle5.png" width="250"> | ||
+ | <div id="humanPracticesCircle"><p>Human<br>Practices</p></div> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="td"> | ||
+ | <a href="https://2018.igem.org/Team:DLUT_China_B/TeamMembers"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/0/06/T--DLUT_China_B--Circle6.png" width="250"> | ||
+ | <div>Team</div> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
<div> | <div> | ||
− | <h2 class="title | + | <h2 class="title">Click bubbles to chat with me</h2> |
<div id="chatBubbles"></div> | <div id="chatBubbles"></div> | ||
</div> | </div> | ||
Line 33: | Line 96: | ||
<h3><i class="fas fa-map-marker-alt"></i> Address</h3> | <h3><i class="fas fa-map-marker-alt"></i> Address</h3> | ||
<p>No.2 Linggong Road, Ganjingzi District, Dalian City, Liaoning Province, P.R.C., 116024</p> | <p>No.2 Linggong Road, Ganjingzi District, Dalian City, Liaoning Province, P.R.C., 116024</p> | ||
+ | <h3><i class="fas fa-at"></i> E-mail</h3> | ||
+ | <p>igem_dlut_china_B#163.com (Please replace # with @)</p> | ||
</div> | </div> | ||
<div id="follow"> | <div id="follow"> | ||
Line 55: | Line 120: | ||
<script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/script.js&action=raw&ctype=text/javascript"></script> | <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/script.js&action=raw&ctype=text/javascript"></script> | ||
<script> | <script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/*对话气泡*/ | /*对话气泡*/ | ||
let conversation = { | let conversation = { | ||
Line 85: | Line 135: | ||
"We have a lot of significant updates.(Of course we cannot make it as cool as the Apple launch update)", | "We have a lot of significant updates.(Of course we cannot make it as cool as the Apple launch update)", | ||
"As an old friend, let me open the VIP channel for you.", | "As an old friend, let me open the VIP channel for you.", | ||
− | 'Click "Skip", then you will skip the | + | 'Click "Skip", then you will skip the Project Introduction section.', |
'Click "Listen", then you will acknowledge more details about our story.' | 'Click "Listen", then you will acknowledge more details about our story.' | ||
], | ], | ||
Line 123: | Line 173: | ||
}, | }, | ||
{ | { | ||
− | question: "Human | + | question: "Human Practices", |
− | answer: " | + | answer: "humanPractices" |
}, | }, | ||
{ | { | ||
Line 132: | Line 182: | ||
] | ] | ||
}, | }, | ||
− | "listen1":{ | + | "listen1": { |
− | says:[ | + | says: [ |
"Here is iGEM_DLUT_China_B.", | "Here is iGEM_DLUT_China_B.", | ||
− | "I | + | "I`ll introduce our project to you.", |
− | " | + | "Many diseases in the world severely threaten human health, but some of them can be predicted and cured.", |
− | " | + | "The first step to prevent disease is to figure out what kind of population may face higher risk.", |
− | "For example, diabetic and hypertensive patients | + | "For example, diabetic and hypertensive patients are more likely to suffer from chronic kidney disease.", |
− | " | + | "People older than 60 are more likely to develop Alzheimer`s disease." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"And then?", | + | question: "And then?", |
− | answer:"listen2" | + | answer: "listen2" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "listen2":{ | + | "listen2": { |
− | says:["The second step is to | + | says: ["The second step is to monitor regularly to intervene the occurrence and development of diseases timely."], |
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"Yes, it makes sense | + | question: "Yes, it makes sense. But how can it be achieved?", |
− | answer:"listen3" | + | answer: "listen3" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "listen3":{ | + | "listen3": { |
− | says:[ | + | says: [ |
"You may not believe that", | "You may not believe that", | ||
− | "we can know our physical condition through | + | "we can know our current physical condition through urine.", |
− | "Urine is | + | "Urine is considered to be \"gold mine\" for the identification of disease markers." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"Is that true?", | + | question: "Is that true?", |
− | answer:"listen4" | + | answer: "listen4" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "listen4":{ | + | "listen4": { |
− | says:[ | + | says: [ |
− | "Absolutely | + | "Absolutely. It`s like a mirror that reflects one`s health.", |
− | "In the early stages of | + | "In the early stages of a disease, we can use the protein markers in the urine to screen the disease." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"But how do you | + | question: "But how do you screen it?", |
− | answer:"listen5" | + | answer: "listen5" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "listen5":{ | + | "listen5": { |
− | says:[" | + | says: ["We use nano-antibody combining with liquid crystal sensor to show the results for us."], |
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"Liquid crystal? How?", | + | question: "Liquid crystal? How?", |
− | answer:"listen6" | + | answer: "listen6" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "listen6":{ | + | "listen6": { |
− | says:[ | + | says: [ |
− | "In our daily life, we usually | + | "In our daily life, we usually find the LCD screen black. However, it becomes colorful when it works.", |
− | "Our products are similar in principle.", | + | "Our products are similar to it in principle.", |
− | "The combination of the nano-antibody and the protein in | + | "The combination of the nano-antibody and the marked protein in urine will result in a slight change in the liquid crystalline substrate.", |
− | " | + | "It also causes changes in the brightness and color of the liquid crystal film.", |
− | " | + | "So the liquid crystal brightness can reflect the antigen concentration directly." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"That means we can | + | question: "That means we can know whether we are sick and what extent the disease has progressed to.", |
− | answer:"listen7" | + | answer: "listen7" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "listen7":{ | + | "listen7": { |
− | says:[ | + | says: [ |
"Yes, but we need to do a more accurate quantitative analysis.", | "Yes, but we need to do a more accurate quantitative analysis.", | ||
− | "We take photos, | + | "We take photos, then perform greyscale processing and analyze the average greyscale.", |
− | " | + | "In contrast to the concentration-gray curve we have obtained, we can obtain the concentration of the antigen accurately." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"You did something amazing!", | + | question: "You guys did something amazing!", |
− | answer:"last" | + | answer: "last" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "last":{ | + | "last": { |
says: [ | says: [ | ||
"Summary has ended, the following is for each plate specific content.", | "Summary has ended, the following is for each plate specific content.", | ||
Line 246: | Line 296: | ||
}, | }, | ||
{ | { | ||
− | question: "Human | + | question: "Human Practices", |
− | answer: " | + | answer: "humanPractices" |
}, | }, | ||
{ | { | ||
Line 255: | Line 305: | ||
] | ] | ||
}, | }, | ||
− | "projectIntroduction":{ | + | "projectIntroduction": { |
− | says:[ | + | says: [ |
− | "Wow, you | + | "Wow, you selected Project as the destination.", |
"Are you ready to go?" | "Are you ready to go?" | ||
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"Yes.", | + | question: "Yes.", |
− | answer:"goProjectIntroduction" | + | answer: "goProjectIntroduction" |
}, | }, | ||
{ | { | ||
− | question:"Wait a second.", | + | question: "Wait a second.", |
− | answer:"dest" | + | answer: "dest" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "parts":{ | + | "parts": { |
− | says:[ | + | says: [ |
− | "Didi, you are about to reach | + | "Didi, you are about to reach Parts.", |
"You will learn about the main components we use such as messages." | "You will learn about the main components we use such as messages." | ||
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"OK, let`s go.", | + | question: "OK, let`s go.", |
− | answer:"goParts" | + | answer: "goParts" |
}, | }, | ||
{ | { | ||
− | question:"Wait a second.", | + | question: "Wait a second.", |
− | answer:"dest" | + | answer: "dest" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "model":{ | + | "model": { |
− | says:[ | + | says: [ |
− | " | + | "Have you decided to make Model as your destination?", |
"Project optimization and results will be exhibited here." | "Project optimization and results will be exhibited here." | ||
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"Go and visit.", | + | question: "Go and visit.", |
− | answer:"goModel" | + | answer: "goModel" |
}, | }, | ||
{ | { | ||
− | question:"I want | + | question: "I want another destination.", |
− | answer:"dest" | + | answer: "dest" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "awards":{ | + | "awards": { |
− | says:[ | + | says: [ |
− | "You will find the treasures of application | + | "You will find the treasures of application design at Awards office." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:" | + | question: "Go. ( ̄)  ̄) ↗", |
− | answer:"goAwards" | + | answer: "goAwards" |
}, | }, | ||
{ | { | ||
− | question:"I`m not interested in treasure hunt.", | + | question: "I`m not interested in treasure hunt.", |
− | answer:"dest" | + | answer: "dest" |
} | } | ||
] | ] | ||
}, | }, | ||
− | " | + | "humanPractices": { |
− | says:[ | + | says: [ |
"We are committed to education and publicity.", | "We are committed to education and publicity.", | ||
− | "Choose \"Learn more\" and will arrive at | + | "Choose \"Learn more\" and you will arrive at Human Practices.", |
− | "Choose \"Back\", | + | "Choose \"Back\", the destination will be reset." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"Learn more", | + | question: "Learn more", |
− | answer:" | + | answer: "goHumanPractices" |
}, | }, | ||
{ | { | ||
− | question:"Back", | + | question: "Back", |
− | answer:"dest" | + | answer: "dest" |
} | } | ||
] | ] | ||
}, | }, | ||
− | "teamworkAndCooperation":{ | + | "teamworkAndCooperation": { |
− | says:[ | + | says: [ |
− | "Choose \"Learn more\" will | + | "Choose \"Learn more\", you will arrive at Team Introduction,", |
− | "and learn about team members and | + | "and learn about our team members and our collaborations with other teams.", |
− | "Choose \"Back\", | + | "Choose \"Back\", the destination will be reset." |
], | ], | ||
− | reply:[ | + | reply: [ |
{ | { | ||
− | question:"Learn more", | + | question: "Learn more", |
− | answer:"goTeamworkAndCooperation" | + | answer: "goTeamworkAndCooperation" |
}, | }, | ||
{ | { | ||
− | question:"Back", | + | question: "Back", |
− | answer:"dest" | + | answer: "dest" |
} | } | ||
] | ] | ||
Line 365: | Line 415: | ||
} | } | ||
}; | }; | ||
− | goProjectIntroduction=function(){ | + | goProjectIntroduction = function () { |
− | window.location.href=" | + | window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Description"; |
}; | }; | ||
− | goParts=function(){ | + | goParts = function () { |
− | window.location.href=" | + | window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Parts"; |
}; | }; | ||
− | goModel=function(){ | + | goModel = function () { |
− | window.location.href=" | + | window.location.href = "https://2018.igem.org/Team:DLUT_China_B/GrayValueConcentrationModel"; |
}; | }; | ||
− | goAwards=function(){ | + | goAwards = function () { |
− | window.location.href=" | + | window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Applied_Design"; |
}; | }; | ||
− | + | goHumanPractices = function () { | |
− | + | window.location.href = "https://2018.igem.org/Team:DLUT_China_B/Human_Practices"; | |
− | window.location.href=" | + | |
}; | }; | ||
− | goTeamworkAndCooperation=function(){ | + | goTeamworkAndCooperation = function () { |
− | window.location.href=" | + | window.location.href = "https://2018.igem.org/Team:DLUT_China_B/TeamMembers"; |
}; | }; | ||
− | function isShow($el){ | + | function isShow($el) { |
− | let winH = $(window).height(),/*获取窗口高度*/ | + | let winH = $(window).height(), /*获取窗口高度*/ |
− | scrollH = $(window).scrollTop(),/*获取窗口滚动高度*/ | + | scrollH = $(window).scrollTop(), /*获取窗口滚动高度*/ |
− | top = $el.offsetTop;/*获取元素距离窗口顶部偏移高度*/ | + | top = $el.offsetTop; /*获取元素距离窗口顶部偏移高度*/ |
return top < scrollH + winH; | return top < scrollH + winH; | ||
} | } | ||
+ | |||
let chatWindow; | let chatWindow; | ||
− | + | ||
− | if(document.getElementById("chat")==null | + | function lazyLoad() { |
− | + | if (document.getElementById("chat") == null) | |
− | + | if (isShow(document.getElementById("chatBubbles"))) { | |
− | + | let chat = document.createElement("div"); | |
− | + | chat.setAttribute("id", "chat"); | |
− | + | document.getElementById("chatBubbles").appendChild(chat); | |
− | + | chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow"); | |
− | + | chatWindow.talk(conversation); | |
− | }; | + | } |
+ | } | ||
+ | |||
+ | $(document).ready(function () { | ||
+ | $(window).scroll(function () { | ||
+ | topToggle(); | ||
+ | }); | ||
+ | $(window).scroll(function () { | ||
+ | lazyLoad(); | ||
+ | }); | ||
+ | }) | ||
</script> | </script> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 02:42, 18 October 2018
DLUT_China_B
Dr. Familict
Hello! I’m a lovely Kidney baby, an essential organ in your body. Can you see those sparkling items pointed by my hand? Right! This is a wonderful liquid crystal show caused by the combination of β2-MG and nanobodies. What’s more, the different concentrations of β2-MG make the different degree of brightness showed by liquid crystal. We can make use of this phenomenon to achieve early detection of CKD caused mostly by diabetes and high blood pressure according to the brightness displayed by the detector confidently. Such an amazing idea, right?