Check-in HTML files

- Define parts of the HTML files required for each major content endpoint - Part of #311
CollinHeist · Mar 20, 2023 · 50c99e5 · 50c99e5
1 parent 5fd1058
commit 50c99e5
Show file tree

Hide file tree

Showing 12 changed files with 4,549 additions and 0 deletions.
diff --git a/app/templates/base.html b/app/templates/base.html
diff --git a/app/templates/cardTemplates.html b/app/templates/cardTemplates.html
diff --git a/app/templates/connections.html b/app/templates/connections.html
diff --git a/app/templates/fonts.html b/app/templates/fonts.html
diff --git a/app/templates/header.html b/app/templates/header.html
@@ -0,0 +1,17 @@
+<div id="header-search" class="ui transparent input">
+  <div id="search-bar" class="ui search">
+    <div class="ui icon input">
+    <input class="prompt" type="text" placeholder="Search...">
+    <i class="search icon"></i>
+    </div>
+    <div class="results"></div>
+  </div>
+</div>
+
+<div id="support-button">
+  <a href="https://github.com/sponsors/CollinHeist" target="_blank">
+    <div class="ui red button">
+      <i class="heart icon"></i> Support
+    </div>
+  </a>
+</div>
diff --git a/app/templates/import.html b/app/templates/import.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="/assets/logo128.png">
+  <link rel="shortcut icon" href="/assets/logo128.png"> 
+  <link rel="apple-touch-icon" href="/assets/logo128.png">
+  <title>Import - TitleCardMaker</title>
+
+  <!-- Formantic UI -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
+
+  <!-- Global styles -->
+  <link rel="stylesheet" type="text/css" href="/templates/style.css"/>
+  <style>
+    .card {
+      max-width: 1000px;
+    }
+    img {
+      max-width: 1000px;
+      position: relative;
+      display: inline-block;
+    }
+    .overlay {
+      display: none;
+    }
+    .card:hover .overlay {
+      width: 100%;
+      height: 100%;
+      background: rgba(12, 12, 12, 0.5);
+      position: absolute;
+      top: 50px;
+      left: 50px;
+      display:inline-block;
+      -webkit-box-sizing:border-box;
+      -moz-box-sizing:border-box;
+      box-sizing:border-box;
+    }
+
+    :root {
+      --clr-neon: hsl(215, 55%, 61%);
+      --clr-bg: rgb(24, 24, 24)
+    }
+    body {
+      background-color: var(--clr-bg);
+    }
+    #main-content {
+      min-height: 80vh;
+      display: grid;
+      place-items: center;
+      background: var(--clr-bg);
+      color: var(--clr-neon);
+    }
+
+    .neon-button {
+      font-size: 4rem;
+
+      display: inline-block;
+      cursor: pointer;
+      text-decoration: none;
+      color: var(--clr-neon);
+      border: var(--clr-neon) 0.125em solid;
+      padding: 0.5em;
+      border-radius: 0.25em;
+
+      text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
+
+      box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
+
+      position: relative;
+    }
+
+    .neon-button::before {
+      pointer-events: none;
+      content: "";
+      position: absolute;
+      background: var(--clr-neon);
+      top: 120%;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
+      filter: blur(1em);
+      opacity: 0.7;
+    }
+
+    /* .neon-button::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      box-shadow: 0 0 2em 0.5em var(--clr-neon);
+      opacity: 0;
+      background-color: var(--clr-neon);
+      z-index: -1;
+      transition: opacity 100ms linear;
+    } */
+
+    .neon-button:hover,
+    .neon-button:focus {
+      /* color: var(--clr-bg); */
+      color: hsl(215, 65%, 71%);
+      border:hsl(215, 65%, 71%) 0.125em solid;
+      box-shadow: inset 0 0 0.5em 0 hsl(215, 65%, 71%), 0 0 0.5em 0 hsl(215, 65%, 71%);
+      background: rgba(12, 12, 12, 0.75)
+      /* animation: pulse 2.5s infinite;  */
+    }
+
+    .neon-button:hover::before {
+      background: hsl(215, 65%, 71%);
+    }
+  </style>
+
+</head>
+
+<body>
+  <div class="pusher">
+    <!-- Static header and sidebar loaded by external script -->
+    <div id="page-header"></div>
+    <div id="nav-menu"></div>
+
+    <!-- Actual page content -->
+    <div id="main-content" class="article">
+      <!-- <div class="ui card">
+        <img src="/assets/cards/anime.jpg">
+        <div class="overlay">
+          Overlay Content
+        </div>
+      </div> -->
+
+      <div class="neon-button" contentEditable="true">
+        <i class="spinner loading icon"></i>
+        TitleCardMaker
+      </div>
+    </div>
+
+  </div>
+
+  <script>
+
+  </script>
+
+  <!-- Load Sidebar -->
+  <script src="/templates/loadStaticContent.js"></script>
+</body>
+
+</html>
diff --git a/app/templates/loadStaticContent.js b/app/templates/loadStaticContent.js
@@ -0,0 +1,72 @@
+// // Load sidebar
+// let xhr = new XMLHttpRequest();
+// xhr.open('GET', '/templates/sidebar.html', true);
+// xhr.onreadystatechange = function() {
+//   if (this.readyState !== 4) return;
+//   if (this.status !== 200) return;
+//   document.getElementById('nav-menu').innerHTML = this.responseText;
+// };
+// xhr.send();
+
+// // Load header
+// let xhr2 = new XMLHttpRequest();
+// xhr2.open('GET', '/templates/header.html', true);
+// xhr2.onreadystatechange = function() {
+//   if (this.readyState !== 4){return;}
+//   if (this.status !== 200) {return;}
+//   document.getElementById('page-header').innerHTML = this.responseText;
+// };
+// xhr2.send();
+
+// Initialize header search bar
+// $(document).ready(() => {
+//   $.fn.search.settings.templates = {
+//     standard: function(response) {
+//       let elements = response.results.map(({id, name, poster_url}) => {
+//         return `<a class="search result" href="/series/${id}"><div class="search content"><img src="${poster_url}" style="width: 35px; height: 50px; line-height: 50px">${name}</div></a>`;
+//       });
+//       return elements.join('');
+//     }
+//   }
+//   $('#search-bar').search({
+//     apiSettings: {
+//       url: '/api/series/search?query={query}',
+//     },
+//     // minCharacters: 3
+//   });
+// });
+
+// When the document is loaded...
+$(document).ready(function() {
+  // Load the header.html file
+  $.get('/templates/header.html')
+    .done(data => {
+      // Inject the header HTML into the page-header element
+      $('#page-header').html(data)
+      // Search bar uses the search API 
+      $('#search-bar').search({
+        apiSettings: {
+          url: '/api/series/search?query={query}&max_results=8',
+        }, 
+      });
+    })
+    .fail(($xhr, errorMsg) => $content.text(`Error: ${errorMsg}`));
+
+  // Load the sidebar.html file
+  $.get('/templates/sidebar.html')
+    .done(data => {
+      // Inject the sidebar HTML into the nev-menu element
+      $('#nav-menu').html(data)
+    })
+    .fail(($xhr, errorMsg) => $content.text(`Error: ${errorMsg}`));
+
+  // Search results should show a poster preview
+  $.fn.search.settings.templates = {
+    standard: function(response) {
+      let elements = response.results.map(({id, name, poster_url}) => {
+        return `<a class="search result" href="/series/${id}"><div class="search content"><img src="${poster_url}">${name}</div></a>`;
+      });
+      return elements.join('');
+    }
+  }
+})