added modal for downloading zim file on welcome page

static/resources_list.txt

@@ -18,6 +18,10 @@ skin/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png
 skin/jquery-ui/jquery-ui.theme.min.css
 skin/jquery-ui/jquery-ui.min.css
 skin/caret.png
+skin/bittorrent.png
+skin/magnet.png
+skin/download.png
+skin/hash.png
 skin/search-icon.svg
 skin/taskbar.js
 skin/langList.js

static/skin/home.css

@@ -256,6 +256,7 @@ body {
 }
 
 .book__links > a, .book__links > span {
+    cursor: pointer;
     text-decoration: none;
     color: #00b4e4;
     position: relative;
@@ -263,11 +264,86 @@ body {
     font-family: roboto;
 }
 
-.book__links > a:hover {
+.book__links > a:hover, .book__links > span:hover {
     background: #00b4e4;
     color: white;
 }
 
+.modal-wrapper {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    background-color: rgba(0, 0, 0, 30%);
+}
+
+.modal {
+    color: #444343;
+    height: 280px;
+    width: 250px;
+    margin: 15px;
+    background-color: #f7f7f7;
+    border: 1px solid #ececec;
+    border-radius: 3px;
+}
+
+.modal-heading {
+    background-color: #f0f0f0;
+    height: 20%;
+    width: 100%;
+    border-bottom: 1px solid #ececec;
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+}
+
+.modal-title {
+    display: flex;
+    font-size: 15px;
+    align-items: center;
+    padding-left: 20px;
+    font-family: poppins;
+}
+
+.modal-close-button {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    padding: 20px;
+}
+
+.modal-content div {
+    width: 100%;
+    height: 40px;
+}
+
+.modal-content a {
+    text-decoration: none;
+}
+
+.modal-content a>div {
+    position: relative;
+    top: -26px;
+    left: 50px;
+    text-decoration: underline;
+    color: black;
+}
+
+.modal-content img {
+    display: inline-block;
+    margin: 0 10px;
+    height: 30px;
+}
+
 .fadeOut {
     position: fixed;
     display: none;

static/skin/index.js

@@ -101,7 +101,7 @@
             <div class='book__description' title='${description}'>${description}</div>
             <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</div>
             <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
-            <div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>${downloadLink ? `&nbsp;|&nbsp;<a href="${downloadLink}" data-hove="Download" download>Download</a>` : ''} </div></div>`;
+            <div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>${downloadLink ? `&nbsp;|&nbsp;<span class="download" data-link=${downloadLink} class="modal-button">Download</span>` : ''} </div></div>`;
         return divTag;
     }
 
@@ -114,6 +114,62 @@
         }
     }
 
+    function insertModal(button) {
+        const downloadLink = button.getAttribute('data-link');
+        button.addEventListener('click', () => {
+            document.body.insertAdjacentHTML('beforeend', `<div class="modal-wrapper">
+                <div class="modal">
+                    <div class="modal-heading">
+                        <div class="modal-title">
+                            <div>
+                                Download
+                            </div>
+                        </div>
+                        <div onclick="closeModal()" class="modal-close-button">
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 
+                                    0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711
+                                    0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417
+                                    -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834
+                                    -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7
+                                    8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 
+                                    14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-content">
+                        <div class="modal-regular-download">
+                            <a href="${downloadLink}" download>
+                                <img src="../skin/download.png" alt="direct download" />
+                                <div>Direct download</div>
+                            </a>
+                        </div>
+                        <div class="modal-regular-download">
+                            <a href="${downloadLink}.sha256" download>
+                                <img src="../skin/hash.png" alt="download hash" />
+                                <div>Download sha256 hash</div>
+                            </a>
+                        </div>
+                        <div class="modal-regular-download">
+                            <a href="${downloadLink}.magnet">
+                                <img src="../skin/magnet.png" alt="download magnet" />
+                                <div>Download magnet link</div>
+                            </a>
+                        </div>
+                        <div class="modal-regular-download">
+                            <a href="${downloadLink}.torrent" download>
+                                <img src="../skin/bittorrent.png" alt="download torrent" />
+                                <div>Download torrent file</div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>`);
+        })
+    }
+
     async function loadBooks() {
         loader.style.display = 'block';
         return await fetch(queryUrlBuilder()).then(async (resp) => {
@@ -222,7 +278,13 @@
         });
         books = [...books].filter((book) => {return !booksToFilter.has(getInnerHtml(book, 'id'))});
         booksToDelete.forEach(book => {iso.remove(book);});
-        books.forEach((book) => {iso.insert(generateBookHtml(book, sort))});
+        books.forEach((book) => {
+            iso.insert(generateBookHtml(book, sort))
+            const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .download`);
+            if (downloadButton) {
+                insertModal(downloadButton);
+            }
+        });
     }
 
     async function resetAndFilter(filterType = '', filterValue = '') {

static/templates/index.html

@@ -71,4 +71,11 @@
     <div class="loader" style="position: absolute; top: 50%"><div class="loader-spinner"></div></div>
     <div id="kiwixfooter" class="kiwixfooter">Powered by&nbsp;<a href="https://kiwix.org">Kiwix</a></div>
   </body>
+  <script>
+    function closeModal() {
+      for(modal of document.getElementsByClassName('modal-wrapper')) {
+        modal.remove();
+      }
+    }
+  </script>
 </html>