From 743c82b5a51eee91d580d223fe1bd86d1822eeb0 Mon Sep 17 00:00:00 2001
From: Mahdi Dibaiee <mdibaiee@pm.me>
Date: Mon, 18 Oct 2021 09:30:35 +0100
Subject: [PATCH] Add references section

---
 css/style.css           |  9 +++++++++
 index.html              | 15 +++++++++++++++
 javascript/main.js      | 16 ++++++++++++++++
 templates/index.nj      |  2 ++
 templates/references.nj | 13 +++++++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 templates/references.nj

diff --git a/css/style.css b/css/style.css
index 2098a13..edf2b89 100644
--- a/css/style.css
+++ b/css/style.css
@@ -74,3 +74,12 @@ svg {
 #Alcohol, #connection-rectangle, #brain, #brain-projection, #human {
   opacity: 0;
 }
+
+.references li {
+  transition: background-color 1s;
+  padding: 0.5rem 1rem;
+}
+
+.highlight {
+  background-color: rgb(251, 255, 130);
+}
diff --git a/index.html b/index.html
index ea77a9d..9389686 100644
--- a/index.html
+++ b/index.html
@@ -176,6 +176,21 @@
   </div class='column'>
 </div>
 
+
+      <div class='row'>
+  <div class='column'>
+    <h2>References</h2>
+  </div>
+</div>
+<div class='references row'>
+  <div class='column'>
+    <ol>
+      <li id='ref-1'>Alcoholic brain damage. (2013). In Crichton, R., & Ward, R. (2013). Metal-based neurodegeneration: from molecular mechanisms to therapeutic strategies. John Wiley & Sons. <a href="https://doi.org/10.1002/9781118553480.ch12">https://doi.org/10.1002/9781118553480.ch12</a></li>
+      <li id='ref-2'>Global Burden of Disease Collaborative Network. Global Burden of Disease Study 2019 (GBD 2019) Results. Seattle, United States: Institute for Health Metrics and Evaluation (IHME), 2020. Available from <a href="http://ghdx.healthdata.org/gbd-results-tool">http://ghdx.healthdata.org/gbd-results-tool</a></li>
+    </ol>
+  </div>
+</div>
+
     </div>
   </body>
 
diff --git a/javascript/main.js b/javascript/main.js
index a51cb4c..7d421ee 100644
--- a/javascript/main.js
+++ b/javascript/main.js
@@ -75,3 +75,19 @@ anime({
   delay: 3000,
   easing: 'easeInOutExpo'
 });
+
+
+var HIGHLIGHT_DURATION = 4000;
+// Highlight References
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('[href^="#ref-"]').forEach(function(a) {
+    a.addEventListener('click', function() {
+      var target = document.getElementById(a.href.slice(a.href.indexOf('#') + 1));
+      target.classList.add('highlight');
+
+      setTimeout(function() {
+        target.classList.remove('highlight');
+      }, HIGHLIGHT_DURATION);
+    });
+  });
+});
diff --git a/templates/index.nj b/templates/index.nj
index 6570ac4..36c220a 100644
--- a/templates/index.nj
+++ b/templates/index.nj
@@ -37,6 +37,8 @@
       {% include './assessment.nj' %}
 
       {% include './treatment.nj' %}
+
+      {% include './references.nj' %}
     </div>
   </body>
 
diff --git a/templates/references.nj b/templates/references.nj
new file mode 100644
index 0000000..6d8dcd3
--- /dev/null
+++ b/templates/references.nj
@@ -0,0 +1,13 @@
+<div class='row'>
+  <div class='column'>
+    <h2>References</h2>
+  </div>
+</div>
+<div class='references row'>
+  <div class='column'>
+    <ol>
+      <li id='ref-1'>{{ "Alcoholic brain damage. (2013). In Crichton, R., & Ward, R. (2013). Metal-based neurodegeneration: from molecular mechanisms to therapeutic strategies. John Wiley & Sons. https://doi.org/10.1002/9781118553480.ch12" | urlize | safe }}</li>
+      <li id='ref-2'>{{ "Global Burden of Disease Collaborative Network. Global Burden of Disease Study 2019 (GBD 2019) Results. Seattle, United States: Institute for Health Metrics and Evaluation (IHME), 2020. Available from http://ghdx.healthdata.org/gbd-results-tool." | urlize | safe }}</li>
+    </ol>
+  </div>
+</div>