diff --git a/static/resources_list.txt b/static/resources_list.txt
index 9939f4b61..41552195d 100644
--- a/static/resources_list.txt
+++ b/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
diff --git a/static/skin/bittorrent.png b/static/skin/bittorrent.png
new file mode 100644
index 000000000..5a34549ca
Binary files /dev/null and b/static/skin/bittorrent.png differ
diff --git a/static/skin/download.png b/static/skin/download.png
new file mode 100644
index 000000000..14dd22d07
Binary files /dev/null and b/static/skin/download.png differ
diff --git a/static/skin/hash.png b/static/skin/hash.png
new file mode 100644
index 000000000..f4885145b
Binary files /dev/null and b/static/skin/hash.png differ
diff --git a/static/skin/home.css b/static/skin/home.css
index 5c07bf7ee..e1a539793 100644
--- a/static/skin/home.css
+++ b/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;
diff --git a/static/skin/index.js b/static/skin/index.js
index 4febd9540..487f70aba 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -101,7 +101,7 @@
${description}
${language.substr(0, 2).toUpperCase()}
- `;
+ Preview${downloadLink ? ` |
Download` : ''}
`;
return divTag;
}
@@ -114,6 +114,62 @@
}
}
+ function insertModal(button) {
+ const downloadLink = button.getAttribute('data-link');
+ button.addEventListener('click', () => {
+ document.body.insertAdjacentHTML('beforeend', ``);
+ })
+ }
+
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 = '') {
diff --git a/static/skin/magnet.png b/static/skin/magnet.png
new file mode 100644
index 000000000..e792fa5a3
Binary files /dev/null and b/static/skin/magnet.png differ
diff --git a/static/templates/index.html b/static/templates/index.html
index f3617e5a0..c6f05aa42 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -71,4 +71,11 @@
+ 
+ 
+ 
+ 
+