diff --git a/public/reading.tpl.html b/public/reading.tpl.html
new file mode 100644
index 0000000..656ee12
--- /dev/null
+++ b/public/reading.tpl.html
@@ -0,0 +1,19 @@
+
+      <div class="container py-5 my-5">
+
+        <h3 style="text-align: center;">Основы программирования. Д.В. Топольский, И.Г. Топольская. 2010</h3>
+        <div class="progress" role="progressbar" aria-label="" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
+            <div class="progress-bar bg-success" style="width: 100%">100%</div>
+        </div>
+
+        <h3 style="text-align: center;">Основы программирования. ч. 1. Тюгашев А. А. 2016</h3>
+        <div class="progress" role="progressbar" aria-label="" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" onmouseover="x=92/164*100; this.setAttribute('aria-valuenow', `${x}`);" style="height: 20px">
+            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 100%" onmouseover="x=92/164*100; this.style.width=`${x}px`; this.innerHTML=`${x}`;"></div>
+        </div>
+
+        <h3 style="text-align: center;">Основы программирования. ч. 2. Тюгашев А. А. 2016</h3>
+        <div class="progress" role="progressbar" aria-label="" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" onmouseover="x=1/124*100; this.setAttribute('aria-valuenow', `${x}`);" style="height: 20px">
+            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 100%" onmouseover="x=1/124*100; this.style.width=`${x}px`; this.innerHTML=`${x}`;"></div>
+        </div>
+
+      </div><!-- /.container -->