add tutorial and contributors sentence

ippisite/ippidb/templates/about-contributors.html

@@ -5,6 +5,9 @@
 {% block pagetitle %}Contributors{% endblock%}
 
 {% block view_content %}
+<div class="row justify-content-center">
+	The following list comprises individuals who have contributed to adding compounds to iPPI-DB.
+</div>
 <div class="row">
 	<table class="table table-striped">
 		<thead>
@@ -18,7 +21,7 @@
 			<tr>
 				<td>
 					<a href="{{ contributor.id }}">
-						{{ contributor.get_contributor_firstname | capfirst }} 
+						{{ contributor.get_contributor_firstname | capfirst }}
 						{{ contributor.get_contributor_lastname | capfirst }}
 					</a>
 				</td>

ippisite/ippidb/templates/tutorials.html

@@ -39,7 +39,19 @@
 								</div>
 							</div>
 							<div class="col-6">
-
+								<div class="card" style="max-width: 100%;">
+									<div class="card-header">
+										<h5 class="card-title text-center">Tutorial for Visualize pockets</h5>
+									</div>
+									<iframe style="min-height: 320px;"
+										src="https://www.youtube.com/embed/qXqgEWhI4uY?si=s8h15BAQYvFqMYzY"
+										frameborder="0"
+										allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+										allowfullscreen></iframe>
+									<div class="card-body">
+										<p class="card-text">Visualize pockets on the Protein Interaction Explorer.</p>
+									</div>
+								</div>
 							</div>
 						</div>
 						<div class="row m-2">
@@ -60,10 +72,90 @@
 									</div>
 								</div>
 							</div>
+							<div class="col-6">
+								<div class="card" style="max-width: 100%;">
+									<div class="card-header">
+										<h5 class="card-title text-center">Tutorial for Analyze druggability /
+											interactibility</h5>
+									</div>
+									<iframe style="min-height: 320px;"
+										src="https://www.youtube.com/embed/E6yYPRGFUuI?si=xK57ke4oBWw1ZvbI"
+										frameborder="0"
+										allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+										allowfullscreen></iframe>
+									<div class="card-body">
+										<p class="card-text">Analyze druggability / interactibility of proteins on the
+											Protein Interaction Explorer.</p>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="row m-2">
 							<div class="col-6">
 
 							</div>
+							<div class="col-6">
+								<div class="card" style="max-width: 100%;">
+									<div class="card-header">
+										<h5 class="card-title text-center">Tutorial for Visualize hotspots and ligands
+										</h5>
+									</div>
+									<iframe style="min-height: 320px;"
+										src="https://www.youtube.com/embed/h6OGkaXuU1M?si=zUDbkIYsK8zgDQJg"
+										frameborder="0"
+										allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+										allowfullscreen></iframe>
+									<div class="card-body">
+										<p class="card-text">Visualize hotspots and ligands on the Protein Interaction
+											Explorer.</p>
+									</div>
+								</div>
+							</div>
 						</div>
+						<div class="row m-2">
+							<div class="col-6">
+
+							</div>
+							<div class="col-6">
+								<div class="card" style="max-width: 100%;">
+									<div class="card-header">
+										<h5 class="card-title text-center">Tutorial for study closely related pockets
+										</h5>
+									</div>
+									<iframe style="min-height: 320px;"
+										src="https://www.youtube.com/embed/XTndlDFGlGU?si=aJwnulh6pNO4s2bp"
+										frameborder="0"
+										allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+										allowfullscreen></iframe>
+									<div class="card-body">
+										<p class="card-text">Study closely related pockets on the Protein Interaction
+											Explorer.</p>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="row m-2">
+							<div class="col-6">
+
+							</div>
+							<div class="col-6">
+								<div class="card" style="max-width: 100%;">
+									<div class="card-header">
+										<h5 class="card-title text-center">How to use the TMAP</h5>
+									</div>
+									<iframe style="min-height: 320px;"
+										src="https://www.youtube.com/embed/sPeKz-DPD-U?si=37iAclsdSk6Ew_Qf"
+										frameborder="0"
+										allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+										allowfullscreen></iframe>
+									<div class="card-body">
+										<p class="card-text">How to use the TMAP on the Protein Interaction Explorer.
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+