Fix to click to copy, added NB-man pages to flipbook

src/layouts/page/nebraska-man.html

@@ -85,12 +85,15 @@
           <div class="aspect">
             <div class="aspect-inner">
               <div class="flipbook" id="flipbook">
-                <div class="page"><img src="/Images/placeholder/batman-2016-120-1.jpeg" draggable="false" alt="" /></div>
-                <div class="page"><img src="/Images/placeholder/batman-2016-120-3.jpeg" draggable="false" alt="" /></div>
-                <div class="page"><img src="/Images/placeholder/batman-2016-120-4.jpeg" draggable="false" alt="" /></div>
-                <div class="page"><img src="/Images/placeholder/batman-2016-120-5.jpeg" draggable="false" alt="" /></div>
-                <div class="page"><img src="/Images/placeholder/batman-2016-120-6.jpeg" draggable="false" alt="" /></div>
-                <div class="page"><img src="/Images/placeholder/batman-2016-120-7.jpeg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
               </div>
             </div>
           </div>

src/layouts/page/package-detail.html

@@ -32,144 +32,12 @@
   </div>
 </section>
 
-<hr>
-  <div class="row button-container">
-    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
+{{- partial "clipboard-copy.html" -}}
 
-    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
-  </div>
-<hr>
+<script type="text/javascript">
 
-<style>
+  document.getElementById("shortcodeCopy").value = "sh <curl tea.xyz) +{{- .Title -}}";
 
-  @media only screen and (min-width: 768px) {
-
-    .one-liner{
-      width: 85%;
-      padding: 2.455vw 4.185vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2vw;
-      border-left: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      height: 8.371vw;
-      width: 14%;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2.1vw;
-      float:right;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
-    }
-
-    .clipboard-copy:hover{
-      background-color: #00ffd0 !important;
-      color: #1a1a1a !important;
-      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
-    }
-
-  }
-
-  @media only screen and (min-width: 576px) and (max-width: 768px) {
-
-    .one-liner{
-      width: 85%;
-      padding: 5vw 4vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 3.5vw;
-      border-left: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      padding: 5vw 4vw;
-      width: 14%;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 3.5vw;
-      float:right;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
-    }
-
-    .clipboard-copy:hover{
-      background-color: #00ffd0 !important;
-      color: #1a1a1a !important;
-      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
-    }
-
-  }
-
-  @media only screen and (max-width: 576px) {
-
-    .one-liner{
-      width: 100%;
-      padding: 7.5vw 7.5vw !important;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      text-align: center !important;
-      font-size: 4vw;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      display: none;
-    }
-
-  }
-
-</style>
-
-<script>
-    function myFunction() {
-    // Get the text field
-    var copyText = document.getElementById("myInput");
-
-    // Select the text field
-    copyText.select();
-    copyText.setSelectionRange(0, 99999); // For mobile devices
-
-     // Copy the text inside the text field
-    navigator.clipboard.writeText(copyText.value);
-
-    //Change button text to 'copied'
-    document.getElementById("copy-icon").innerHTML = "copied!";
-  }
 </script>
 
 <style>

src/layouts/partials/clipboard-copy.html

@@ -1,6 +1,6 @@
 <hr>
   <div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
-    <input class="one-liner" type="text" value="sh <(curl tea.xyz)" id="myInput" readonly>
+    <input class="one-liner" type="text" value="sh <(curl tea.xyz)" id="shortcodeCopy" readonly>
 
     <!-- The button used to copy the text -->
 
@@ -180,7 +180,7 @@
 
     function changeCopied() {
     // Get the text field
-    var copyText = document.getElementById("myInput");
+    var copyText = document.getElementById("shortcodeCopy");
 
     // Select the text field
     copyText.select();