Merge branch 'main' of https://gitlab.igem.org/2024/iisc-bengaluru

wiki/pages/description.html

@@ -3,17 +3,21 @@
 {% block title %}Project Description{% endblock %}
 
 {% block page_content %}
-
+<style>
+  p {
+    text-align: justify;
+  }
+</style>
 <div class="row mt-4">
 
-  <div class="col-12">
+  <div class="col-8">
     <h1 class="text-center padding">
       Development of Novel Therapeutic and Diagnostic Strategies guided by Aptamer Specificity - Foundational Advance
     </h1>
     <hr>
   </div>
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-8">
       <h2 class="mt-3 text-center padding">
         Introduction
       </h2>

wiki/pages/notebook.html

@@ -4,27 +4,56 @@
 {% block lead %}Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.{% endblock %}
 
 {% block page_content %}
+
+<style>
+  /* Style for the PDF container */
+  #pdf-container {
+      width: 100%;
+      height: 600px;
+      border: 1px solid #ccc;
+      margin-top: 20px;
+  }
+
+  /* Buttons styling */
+  .toggle-btn {
+      margin-right: 10px;
+      padding: 10px 20px;
+      cursor: pointer;
+      background-color: #008CBA;
+      color: white;
+      border: none;
+      border-radius: 5px;
+  }
+
+  .toggle-btn:hover {
+      background-color: #005f73;
+  }
+</style>
 <link href="{{ url_for('static', filename = 'blog.css') }}" rel="stylesheet">
 <!-- <div class="row mt-4">
   <div class="col-lg-8">
         <p class="body-text">{{ note|safe }}</p>
   </div>
 </div> -->
-
-<div class="container"></div>
-  <div class="row">
-    <div class="col-md-12 text-center">
-      <h1 class="display-4"><b>Notebook</b></h1>
-      <hr style="width:75%; margin: auto;" />
-      <div style="height: 3rem;"></div>
-        <p><a href="https://static.igem.wiki/teams/5170/protein-expression.pdf">Protein Expression</a></p>
-        <p><a href="https://static.igem.wiki/teams/5170/protein-purification-and-verification.pdf">Protein Purification and Verification</a></p>
-        <p><a href="https://static.igem.wiki/teams/5170/phosphorylation.pdf">Phosphorylation</a></p>
-        <p><a href="https://static.igem.wiki/teams/5170/click-reaction-and-binding-of-aptamers.pdf">Click Reaction and binding of Aptamers</a></p>
-    </div>
-  </div>
+<h1 class="padding text-center">Lab Notebook</h1>
+<div style="text-align: center;">
+<button class="toggle-btn" onclick="showPDF('https://static.igem.wiki/teams/5170/protein-expression.pdf')">Protein Expression</button>
+<button class="toggle-btn" onclick="showPDF('https://static.igem.wiki/teams/5170/protein-purification-and-verification.pdf')">Protein Purification and Verification</button>
+<button class="toggle-btn" onclick="showPDF('https://static.igem.wiki/teams/5170/phosphorylation.pdf')">Phosphorylation</button>
+<button class="toggle-btn" onclick="showPDF('https://static.igem.wiki/teams/5170/click-reaction-and-binding-of-aptamers.pdf')">Click Reaction and binding of Aptamers</button>
+<button class="toggle-btn" onclick="showPDF('https://static.igem.wiki/teams/5170/asymmetricpcr.pdf')">Asymmetric PCR</button>
+</div>
+<div id="pdf-container">
+  <iframe id="pdf-viewer" src="https://static.igem.wiki/teams/5170/protein-expression.pdf" width="100%" height="100%"></iframe>
 </div>
 
 <div style="height: 10rem;"></div>
 
+<script>
+  // JavaScript function to change the PDF source
+  function showPDF(pdfUrl) {
+      document.getElementById('pdf-viewer').src = pdfUrl;
+  }
+</script>
+
 {% endblock %}