Difference between revisions of "Team:UCopenhagen"

 
(174 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{IGEM_TopBar}}
+
<!--{{IGEM_TopBar}}-->
 
{{UCopenhagen}}
 
{{UCopenhagen}}
−
 
+
{{Template:UCopenhagen/Header3}}
−
{{Template:UCopenhagen/Footer}}
+
−
{{Template:UCopenhagen/Header}}
+
−
{{Template:UCopenhagen/Header2}}
+
  
  
  
 
<html>
 
<html>
 +
  <head>
 +
    <style>
 +
      .image_container {
 +
        position: relative;
 +
        width: 100%;
 +
        overflow: hidden;
 +
        -o-object-fit: cover;
 +
        object-fit: cover;
 +
        margin-top: -5em;
 +
      }
  
−
<div class="column full_size" >
+
      .image_container img {
−
<h1> Okay let's see if we can try this out </h1>
+
        margin: 0;
−
<p>Maybe it'll end up being a little crazy </p>
+
        padding: 0;
 +
        height: 100%;
 +
      }
  
−
<img src="https://placehold.it/1080x320">
+
      .front_pic {
 +
        position: relative;
 +
        animation: droplets;
 +
        animation-duration: 3s;
 +
        animation-delay: 0.5s;
 +
        animation-fill-mode: forwards;
 +
        top: 0%;
 +
        left: 0%;
 +
        opacity: 0;
 +
        width: 150%;
 +
      }
  
−
</div>
+
      .bg {
 +
        position: absolute;
 +
        top: 0%;
 +
        left: 0%;
 +
        z-index: -2;
 +
        width: 150%;
 +
      }
  
−
<div class="column full_size" >
+
      @keyframes droplets {
 +
        0% {
 +
          opacity: 0;
 +
        }
 +
        25% {
 +
          opacity: 1;
 +
          transform: translate(0,0);
 +
        }
 +
        100% {
 +
          transform: translate(0,1.75%);
 +
          opacity: 1;
 +
        }
 +
      }
  
−
<h3>Before you start</h3>
+
      .catching {
−
<p> Please read the following pages:</p>
+
        display: flex;
−
<ul>
+
        justify-content: center;
−
<li> <a href="https://2020.igem.org/Competition">Competition Hub</a> </li>
+
        align-items: center;
−
<li> <a href="https://2020.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
        flex-direction: column;
−
<li> <a href="https://2020.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
        position: absolute;
−
</ul>
+
        top: 18.5%;
−
</div>
+
        left: 45%;
 +
        z-index: 1;
 +
      }
  
−
<div class="clear extra_space"></div>
+
      .slogan {
−
<div class="line_divider"></div>
+
        display: flex;
−
<div class="clear extra_space"></div>
+
        flex-direction: row;
 +
        margin: 0 auto;
 +
        text-transform: uppercase;
 +
        font-family: Montserrat;
 +
        font-size: 2.3em;
 +
        z-index: 1;
 +
      }
  
−
<div class="column full_size" >
+
      .fade {
−
<h3> Styling your wiki </h3>
+
        animation-name: fadein;
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
        animation-duration: 2s;
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
        animation-fill-mode: forwards;
 +
        opacity: 0;
 +
      }
  
−
</div>
+
      .khamse {animation-delay: 2.3s;}
  
  
 +
      @keyframes fadein{
 +
        0% {
 +
          opacity: 0%;
 +
        }
 +
        100% {
 +
          opacity: 1;
 +
        }
 +
      }
  
 +
      .everything {
 +
        margin: -5% 15% 0 15%;
 +
      }
  
−
<div class="clear extra_space"></div>
+
      .first {
 +
        position: absolute;
 +
        top: 14%;
 +
        max-width: 40%;
 +
        z-index: 1;
 +
        background-image: url('https://static.igem.org/mediawiki/2020/3/3b/T--UCopenhagen--watercolor_mix2.png');
 +
        background-position: top;
 +
        background-repeat: no-repeat;
 +
        background-size: 100% 100%;
 +
        padding: 10%;
 +
      }
  
 +
      .everything h2 {
 +
        margin-top: 5%;
 +
        margin-bottom: 3.5%;
 +
        font-family: Bavro;
 +
        color: #f1002d;
 +
        font-size: 35px;
 +
      }
  
 +
    .page-wrapper{
 +
      margin-bottom: -20%;
 +
      margin-top: -5%;
 +
      max-width: 100%;
 +
      background-image: url("https://static.igem.org/mediawiki/2020/a/a3/T--UCopenhagen--watercolor_bg_smaller.png");
 +
      background-repeat: repeat-y;
 +
      background-size: 100%;
 +
      background-color: #fcecdf;
 +
      padding-bottom: 15%;
 +
      padding-top:5%;
 +
      text-align: justify;
 +
    }
  
−
<div class="column third_size" >
+
      .todelt {
 +
        display: flex;
 +
        flex-direction: row;
 +
        justify-content: space-between;
 +
        margin: 2% 0 2% 0;
 +
      }
  
−
<h3> Uploading pictures and files </h3>
+
      .todelt .txt {
−
<p> You must upload any pictures and files to the iGEM 2020 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
+
        display: flex;
 +
        max-width: 50%;
 +
        padding: 0 2% 0 2%;
 +
      }
  
 +
      .norm h2 {
 +
        text-align: center;
 +
        font-family: Bavro;
 +
        font-size: 35px;
 +
        color: #f1002d;
  
−
<p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
      }
  
−
<div class="button_link">
+
      .norm {
−
<a href="https://2020.igem.org/Special:Upload">
+
        display: flex;
−
UPLOAD FILES
+
        flex-direction: column;
−
</a>
+
        object-fit: contain;
−
</div>
+
        margin: 0 auto;
 +
        padding-bottom: 2%;
 +
      }
  
−
</div>
+
      .txt h2 {
 +
        font-family: Bavro;
 +
        font-size: 35px;
 +
        color: #F3557E;
 +
        line-height: 1.4;
 +
      }
  
−
<div class="column third_size" >
 
−
<h3> Wiki template information </h3>
 
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2020.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
 
  
−
</div>
+
      .first h2 {
 +
        line-height: 1.4;
 +
      }
  
−
<div class="column third_size" >
+
      .image {
−
<div class="highlight decoration_B_full">
+
        object-fit: contain;
−
<h3> Editing your wiki </h3>
+
        width: 50%;
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
      }
−
<p>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
  
−
<div class="button_link">
+
      .image img {
−
<a href="https://2020.igem.org/wiki/index.php?title=Team:UCopenhagen&action=edit">
+
        object-fit: contain;
−
EDIT PAGE
+
        width: 100%;
−
</a>
+
        height: 100%;
−
</div>
+
        margin-top: 2%;
 +
        margin-bottom: 2%;
 +
      }
  
 +
      .txt {
 +
        display: flex;
 +
        flex-direction: column;
 +
        justify-content: center;
 +
      }
  
−
</div>
+
      .format {
−
</div>
+
        font-family: Avenir;
 +
        font-size: 16px;
 +
        line-height: 1.3;
 +
        text-align: justify;
 +
      }
  
 +
      .txt img {
 +
        object-fit: contain;
 +
        width: 85%;
 +
        height: 100%;
 +
        padding-bottom: 3.5%;
 +
        padding-top: 3.5%;
 +
        margin: 0 auto;
 +
      }
  
 +
      .fun_fact {
 +
        margin: 0 auto;
 +
        max-width: 55%;
 +
        background-image: url('https://static.igem.org/mediawiki/2020/4/41/T--UCopenhagen--watercolor_mix1.png');
 +
        background-position: top;
 +
        background-repeat: no-repeat;
 +
        background-size: 100% 100%;
 +
        padding: 15% 7.5% 15% 7.5%;
 +
      }
  
 +
    </style>
  
 +
<!--{{HTML starts here}}-->
  
−
<div class="clear extra_space"></div>
+
  </head>
−
<div class="line_divider"></div>
+
  <body>
−
<div class="clear extra_space"></div>
+
    <div class="image_container">
 +
      <img class="bg" src="https://static.igem.org/mediawiki/2020/b/b2/T--UCopenhagen--AC_Guy.png">
 +
      <img class="front_pic" src="https://static.igem.org/mediawiki/2020/1/1d/T--UCopenhagen--drops_ver_500.png">
 +
      <div class="catching">
 +
        <img src="https://static.igem.org/mediawiki/2020/4/4d/T--UCopenhagen--Logo_Transparent_BG.png" style="width:65%;">
 +
        <div class="slogan">
 +
          <p class="wahed" style="font-size: 24px; font-family: Avenir, Montserrat; color: #052155">Rubor. Calor. Tumor. Dolor</p>
 +
          <p class="khamse fade" style="font-size: 24px; font-family: Avenir, Montserrat; color: #052155">. <span style="color: #f3565c;">Sensor.</span></p>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="first txt">
 +
      <h2 style="text-align: center;">Chronic Inflammatory Diseases</h2><div class="format">
 +
      <b>Chronic Inflammatory Diseases (CIDs)</b> are debilitating, leaving your well-being
 +
      at the mercy of your flare-ups and remissions. Due to the complexity of these diseases,
 +
      no two patients' experiences are the same. Likewise, the right treatment for two people,
 +
      even if they have the same disease, can be different, and to treat these diseases
 +
      properly, patients therefore need to <b>monitor the progression of their disease closely</b>
 +
      to gather as much information about it as possible.</div>
 +
    </div>
 +
    <div class="page-wrapper">
 +
        <div class="everything">
 +
          <div class="second">
 +
            <div class="todelt">
 +
              <div class="image">
 +
                <img src="https://static.igem.org/mediawiki/2020/f/fd/T--UCopenhagen--complete_patch.png">
 +
              </div>
 +
              <div class="txt">
 +
                <h2>Our Solution</h2><div class="format">
 +
                To supplement current testing methods, we have designed <b>a sweat collecting patch</b>
 +
                that patients with CIDs can use to monitor their inflammation status on the go.
 +
                The plaster will sit on the patient's skin and change color depending on the
 +
                patient's level of inflammation, as it reflects itself in the patient's sweat.
 +
                This'll grant them an easy-to-use, non-invasive device that'll give them
 +
                insight into the progression of their disease, and provide them and their
 +
                healthcare professionals with valuable information about their illness, without
 +
                the discomfort surrounding current, more invasive testing methods.</div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="third norm txt">
 +
            <h2>What does this mean for the patients?</h2><div class="format">
 +
            Our tool stands for <b>patient empowerment.</b> Our self-monitoring device is
 +
            suitable for home use, and does not have to interfere with patients' daily
 +
            lives or act as a reminder of their illness. Instead, patients can go about their
 +
            day, knowing that they're collecting data on their disease while performing
 +
            other tasks. <br>
 +
            It allows for transparency for the patient regarding the progression of their CID,
 +
            can aid them in discovering the best self-management strategies that work for them,
 +
            and most of all, the collected data can help better guide healthcare professionals
 +
            in evaluating the efficacy of current or new treatment plans, allowing for faster
 +
            treatment adjustment.
 +
            <br>
 +
            CIDosis brings you the data needed to get <b>a clearer picture of your disease.</b></div>
 +
            <img src="https://static.igem.org/mediawiki/2020/b/b8/T--UCopenhagen--clearer_image.png">
 +
          </div>
 +
          <div class="fourth">
 +
            <div class="todelt">
 +
              <div style="max-width: 55%;" class="txt">
 +
                <h2>The Science</h2> <div class="format">
 +
                Our patch will contain <b>genetically modified yeast</b> expressing <b>engineered interleukin
 +
                receptors.</b> These interleukin receptors will bind and react to the inflammatory biomarkers (interleukins)
 +
                found in sweat, whereby a fused intracellular <b>split protein</b> will be recomplemented.
 +
                The recomplementation of the split protein then triggers a signaling pathway,
 +
                in which our signal is amplified, eventually resulting in the production of a pigment,
 +
                which will act as our reporter.
 +
                <br>
 +
                For more information on our engineered interleukin receptors and biosensor components,
 +
                check out our project design page!</div>
 +
              </div>
 +
              <div style="width: 40%;" class="image">
 +
                <img src="https://static.igem.org/mediawiki/2020/8/82/T--UCopenhagen--design_system_loop.gif">
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="fifth norm txt">
 +
            <div class="txt">
 +
              <h2>Three Tiers of Biosensor Design</h2> <div class="format">
 +
              Our scientific design has gone through many iterations, <b>guided especially
 +
              by our human practices and dry lab findings.</b> Through our engineering work,
 +
              we've come up with three different designs, in which we have three different
 +
              tiers of signal amplification, and three different intracellular modifications
 +
              to our interleukin receptors.</div>
 +
            <img style="width: 65%;" src="https://static.igem.org/mediawiki/2020/3/3f/T--UCopenhagen--dynamic-ranges.png">
 +
              <div class="format">For our design and engineering processes, check out our design page, modeling page, human practices page, and engineering success page!</div></div>
 +
          </div>
 +
          <div class="fun_fact txt">
 +
            <h3 style="font-family: Bavro; font-size: 28px; text-align: center;">Fun Fact!</h3>
 +
            <span style="text-align: center; font-family: Avenir; font-size: 16px;">Inflammation is tied to heat, pain, redness, and swelling. In latin,
 +
            that's <b>calor, dolor, rubor, and tumor.</b> It fits perfectly with developing an
 +
            inflammation <b>biosens-or</b> ;)</span>
 +
         
 +
          </div>
 +
          </div>
 +
    </div>
 +
  </body>
 +
</html>
  
  
−
 
+
{{Template:UCopenhagen/Footer_Bubbly_sponsors}}
−
<div class="column two_thirds_size" >
+
−
<h3>Tips</h3>
+
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
−
<ul>
+
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2020.igem.org/Calendar">iGEM 2020 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column third_size">
+
−
<div class="highlight decoration_A_full">
+
−
<h3>Inspiration</h3>
+
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
−
<ul>
+
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
</html>
+

Latest revision as of 23:45, 27 October 2020

Description Design Implementation Poster
Engineering Success Modeling/Simulation Parts Overview Results Protocols Notebook Safety
Integrated Human Practices Entrepreneurship Education
Collaborations Partnership Our Contribution
Judging Form Medals
Team Members Attributions Sponsors


Rubor. Calor. Tumor. Dolor

. Sensor.

Chronic Inflammatory Diseases

Chronic Inflammatory Diseases (CIDs) are debilitating, leaving your well-being at the mercy of your flare-ups and remissions. Due to the complexity of these diseases, no two patients' experiences are the same. Likewise, the right treatment for two people, even if they have the same disease, can be different, and to treat these diseases properly, patients therefore need to monitor the progression of their disease closely to gather as much information about it as possible.

Our Solution

To supplement current testing methods, we have designed a sweat collecting patch that patients with CIDs can use to monitor their inflammation status on the go. The plaster will sit on the patient's skin and change color depending on the patient's level of inflammation, as it reflects itself in the patient's sweat. This'll grant them an easy-to-use, non-invasive device that'll give them insight into the progression of their disease, and provide them and their healthcare professionals with valuable information about their illness, without the discomfort surrounding current, more invasive testing methods.

What does this mean for the patients?

Our tool stands for patient empowerment. Our self-monitoring device is suitable for home use, and does not have to interfere with patients' daily lives or act as a reminder of their illness. Instead, patients can go about their day, knowing that they're collecting data on their disease while performing other tasks.
It allows for transparency for the patient regarding the progression of their CID, can aid them in discovering the best self-management strategies that work for them, and most of all, the collected data can help better guide healthcare professionals in evaluating the efficacy of current or new treatment plans, allowing for faster treatment adjustment.
CIDosis brings you the data needed to get a clearer picture of your disease.

The Science

Our patch will contain genetically modified yeast expressing engineered interleukin receptors. These interleukin receptors will bind and react to the inflammatory biomarkers (interleukins) found in sweat, whereby a fused intracellular split protein will be recomplemented. The recomplementation of the split protein then triggers a signaling pathway, in which our signal is amplified, eventually resulting in the production of a pigment, which will act as our reporter.
For more information on our engineered interleukin receptors and biosensor components, check out our project design page!

Three Tiers of Biosensor Design

Our scientific design has gone through many iterations, guided especially by our human practices and dry lab findings. Through our engineering work, we've come up with three different designs, in which we have three different tiers of signal amplification, and three different intracellular modifications to our interleukin receptors.
For our design and engineering processes, check out our design page, modeling page, human practices page, and engineering success page!

Fun Fact!

Inflammation is tied to heat, pain, redness, and swelling. In latin, that's calor, dolor, rubor, and tumor. It fits perfectly with developing an inflammation biosens-or ;)


About us

Comprising this team are nine ambitious students from various walks of life, who have come together to produce CIDosis - a non-invasive device that can help people with chronic inflammatory diseases visualize their level of inflammation.

Helpful Links

The Team
Promotional Video
Poster
Medals

Address

University of Copenhagen
Thorvaldsensvej 40, Frederiksberg C
Denmark

Icons made by Freepik from www.flaticon.com