added headerband fixed downloaf

SuperninjaXII · Dec 12, 2024 · 3c008bf · 3c008bf
1 parent bbdfba2
commit 3c008bf
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 97 deletions.
diff --git a/public/css/header.css b/public/css/header.css
@@ -0,0 +1,25 @@
+@import url("./variables.css");
+header {
+  display: flex;
+  width: 100svw;
+  height: 8svh;
+  background-color: var(--bg);
+  color: var(--light);
+}
+header div {
+  padding: 0.2rem;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+header div a i {
+  font-size: 1.8rem;
+}
+header .brand {
+  margin: auto;
+}
+.brand img {
+  width: 5rem;
+}
+header .brand h2 {
+  font-size: 1.2rem;
+}
diff --git a/public/images/papernet.png b/public/images/papernet.png
diff --git a/views/components/download.html b/views/components/download.html
@@ -8,11 +8,16 @@
   </head>
 
   <body>
+    {{template "header"}}
+
     <section>
       <div class="first">
         <div class="book-cover">
           <!-- Book cover image can be added here -->
-          <img src="{{.book.Image}}" alt="{{.book.Title}}" />
+          <img
+            src="/uploads/images/{{.book.Cartegory1}}/{{.book.Image}}"
+            alt="{{.book.Title}}"
+          />
         </div>
         <div class="book-details-container">
           <div class="book-details">
@@ -33,14 +38,19 @@ <h1 class="title">{{.book.Title}}</h1>
         <p class="description">{{.book.Description}}</p>
       </div>
       <button class="download-btn">
-        <a href="{{.book.Link}}"> Download</a>
+        <a
+          download="{{.book.File}}"
+          href="/uploads/files/{{.book.Cartegory1}}/{{.book.File}}"
+        >
+          Download</a
+        >
       </button>
     </section>
     <section
       class="related"
       hx-trigger="load"
       hx-get="/related/{{.book.Cartegory1}}"
-      hx-swap="innerHTML"
+      hx-swap="outterHTML"
     ></section>
   </body>
 

diff --git a/views/components/header.html b/views/components/header.html
@@ -1,26 +1,22 @@
 {{define "header"}}
-<section class="books">
-  <div class="book">
-    <div class="img">
-      <img class="" src="css/KOLORO_1718565912041.jpg" />
-    </div>
-    <div class="details">
-      <h1 class="title">Hello</h1>
-      <p class="date">
-        today
-      </p>
-      <p class="description">
-        a book about greeting alot of a lot of people .
-      </p>
-      <div class="tags">
-        <div class="tag">
-          social
-        </div>
-        <div class="tag">
-          +2 more
-        </div>
-      </div>
-    </div>
+<link rel="stylesheet" href="/css/header.css" />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
+/>
+<header>
+  <div>
+    <a href="">
+      <i class="bi bi-person-circle"></i>
+    </a>
   </div>
-</section>
+  <div class="brand">
+    <img src="/images/papernet.png" alt="" />
+  </div>
+  <div class="home">
+    <a>
+      <i class="bi bi-house"></i>
+    </a>
+  </div>
+</header>
 {{end}}
diff --git a/views/components/related.html b/views/components/related.html
@@ -1,11 +1,44 @@
 {{ if .Result }}
 <!--some comment-->
-{{range .Result}}
-<div>
-  <p>{{.Title}}</p>
-</div>
-{{end}}
-<!--some comment-->
-{{else}}
-<p>no related</p>
-{{end}}
+<style>
+  .recommended {
+    width: 90svw;
+    display: flex;
+    flex-wrap: wrap;
+    margin: auto;
+    justify-content: space-evenly;
+  }
+
+  .recommended .book-card {
+    width: 7rem;
+    height: 10rem;
+    background: var(--bg2);
+    color: var(--light);
+    border-radius: 0.5rem;
+    margin: 1rem;
+  }
+
+  .book-card img {
+    width: 7rem;
+    height: 8rem;
+  }
+
+  .book-card .title {
+    text-align: center;
+  }
+</style>
+<section class="recommended">
+  {{range .Result}}
+  <div class="book-card">
+    <img
+      src="/uploads/images/{{.book.Cartegory1}}/{{.book.Image}}"
+      alt="{{.book.Title}}"
+    />
+    <h3 class="title">{{.Title}}</h3>
+  </div>
+  {{end}}
+  <!--some comment-->
+  {{else}}
+  <p>no related</p>
+  {{end}}
+</section>
diff --git a/views/layouts/mainLayout.html b/views/layouts/mainLayout.html
@@ -1,26 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Papernet</title>
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="stylesheet" href="css/library.css" />
-
-    <script defer src="js/blob.js"></script>
-  </head>
-
-  <body hx-push-url="true" hx-boost="true">
-    {{template "search"}}
-
-    <script src="lib/htmx.js"></script>
-
-    <script src="js/main.js"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        function injectStyles() {
-          const style = document.createElement("style");
-          style.textContent = `
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Papernet</title>
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/library.css" />
+
+  <script defer src="js/blob.js"></script>
+</head>
+
+<body hx-push-url="true" hx-boost="true">
+  {{template "header"}}
+
+
+  {{template "search"}}
+
+  <script src="lib/htmx.js"></script>
+
+  <script src="js/main.js"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      function injectStyles() {
+        const style = document.createElement("style");
+        style.textContent = `
                 .hidden-content {
                     display: none;
                 }
@@ -32,54 +36,55 @@
                     position: relative;
                 }
             `;
-          document.head.appendChild(style);
-        }
+        document.head.appendChild(style);
+      }
 
-        function ExpandableContent() {
-          const containers = document.querySelectorAll(".expand-content");
+      function ExpandableContent() {
+        const containers = document.querySelectorAll(".expand-content");
 
-          containers.forEach((container) => {
-            const wordLimit = parseInt(container.dataset.wordLimit);
-            if (wordLimit) {
-              handleWordLimit(container, wordLimit);
-            }
-          });
-        }
+        containers.forEach((container) => {
+          const wordLimit = parseInt(container.dataset.wordLimit);
+          if (wordLimit) {
+            handleWordLimit(container, wordLimit);
+          }
+        });
+      }
 
-        function handleWordLimit(container, wordLimit) {
-          const text = container.textContent;
-          const words = text.split(/\s+/);
-          if (words.length > wordLimit) {
-            const visibleText = words.slice(0, wordLimit).join(" ");
-            const hiddenText = words.slice(wordLimit).join(" ");
+      function handleWordLimit(container, wordLimit) {
+        const text = container.textContent;
+        const words = text.split(/\s+/);
+        if (words.length > wordLimit) {
+          const visibleText = words.slice(0, wordLimit).join(" ");
+          const hiddenText = words.slice(wordLimit).join(" ");
 
-            const visibleContent = document.createElement("span");
-            visibleContent.textContent = visibleText;
+          const visibleContent = document.createElement("span");
+          visibleContent.textContent = visibleText;
 
-            const ellipsis = document.createElement("span");
-            ellipsis.className = "ellipsis";
-            ellipsis.textContent = "...";
+          const ellipsis = document.createElement("span");
+          ellipsis.className = "ellipsis";
+          ellipsis.textContent = "...";
 
-            const hiddenContent = document.createElement("span");
-            hiddenContent.className = "hidden-content";
-            hiddenContent.textContent = hiddenText;
+          const hiddenContent = document.createElement("span");
+          hiddenContent.className = "hidden-content";
+          hiddenContent.textContent = hiddenText;
 
-            container.innerHTML = "";
-            container.appendChild(visibleContent);
-            container.appendChild(ellipsis);
-            container.appendChild(hiddenContent);
-          }
+          container.innerHTML = "";
+          container.appendChild(visibleContent);
+          container.appendChild(ellipsis);
+          container.appendChild(hiddenContent);
         }
+      }
+
+      injectStyles();
+      ExpandableContent();
+    });
+  </script>
+  <script src="//cdn.jsdelivr.net/npm/eruda"></script>
+  <script>
+    eruda.init();
+  </script>
+
+  <script src="cdn_modules/[email protected]/gsap.min.js"></script>
+</body>
 
-        injectStyles();
-        ExpandableContent();
-      });
-    </script>
-    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
-    <script>
-      eruda.init();
-    </script>
-
-    <script src="cdn_modules/[email protected]/gsap.min.js"></script>
-  </body>
 </html>