diff options
Diffstat (limited to 'pandoc/template.html')
| -rw-r--r-- | pandoc/template.html | 220 |
1 files changed, 220 insertions, 0 deletions
diff --git a/pandoc/template.html b/pandoc/template.html new file mode 100644 index 0000000..49999d7 --- /dev/null +++ b/pandoc/template.html @@ -0,0 +1,220 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> + <link rel="icon" href="data:,"> + <title>cve-poc-mon</title> + <style> + @font-face { + font-family: 'MorePerfectDOSVGA'; + src: url('assets/MorePerfectDOSVGA.ttf') format('truetype'); + } + ::-webkit-scrollbar { + display: none; + } + * { + -ms-overflow-style: none; + scrollbar-width: none; + } + body { + background-color: black; + color: #bbbbbb; + font-family: 'MorePerfectDOSVGA', monospace; + font-size: 14px; + line-height: 1.6; + max-width: 1000px; + margin: 0 auto; + padding: 20px; + } + .title-box { + text-align: left; + border: 1px solid #333; + padding: 15px; + margin-bottom: 10px; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 10px; + } + .title-box h1 { + color: #bbbbbb; + font-size: 18px; + margin: 0; + font-weight: normal; + flex: 1 1 100%; + } + .title-box .links { + display: flex; + gap: 15px; + flex-wrap: wrap; + } + .title-box .rss-link, + .title-box .repo-link { + color: #bbbbbb; + text-decoration: none; + font-size: 14px; + } + .title-box .rss-link:hover, + .title-box .repo-link:hover { + color: #ffffff; + } + .title-box .count { + color: #bbbbbb; + font-size: 14px; + } + .content { + text-align: left; + border: 1px solid #333; + padding: 15px; + } + .content ul { + list-style: none; + padding: 0; + margin: 0; + } + .content li { + margin: 20px 0; + } + .content li a { + color: #bbbbbb; + text-decoration: none; + border-bottom: 1px solid #333; + display: block; + margin-bottom: 5px; + } + .content li a:hover { + color: #ffffff; + border-bottom-color: #bbbbbb; + } + .content li span, + .content li p { + color: #bbbbbb; + text-align: justify; + display: block; + } + a { + color: #bbbbbb; + text-decoration: none; + } + a:hover { + color: #ffffff; + } + pre, code { + background-color: #222; + border: 1px solid #333; + color: #bbbbbb; + padding: 10px; + font-family: 'MorePerfectDOSVGA', monospace; + font-size: 14px; + } + .search-box { + margin-top: 15px; + flex: 1 1 100%; + } + .search-box input { + background-color: #222; + border: 1px solid #333; + color: #bbbbbb; + font-family: 'MorePerfectDOSVGA', monospace; + font-size: 14px; + padding: 8px; + width: 100%; + box-sizing: border-box; + outline: none; + } + .search-box input:focus { + border-color: #bbbbbb; + } + .search-box input::placeholder { + color: #666; + opacity: 1; + } + .video-background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -1; + overflow: hidden; + } + + .video-background video { + width: 100vw; + height: 100vh; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) skew(8deg); + object-fit: cover; + opacity: 0.15; + } + @media (max-width: 600px) { + body { + padding: 15px; + } + .title-box, + .content { + padding: 10px; + } + .title-box h1 { + font-size: 16px; + } + .title-box .links { + flex-direction: column; + gap: 8px; + } + .title-box .rss-link, + .title-box .repo-link, + .title-box .count { + font-size: 12px; + } + .search-box { + margin-top: 10px; + } + } + @media (max-width: 400px) { + .title-box { + flex-direction: column; + } + .search-box input { + font-size: 12px; + padding: 6px; + } + } + </style> +</head> +<body> + <div class="video-background"> + <video autoplay muted loop playsinline> + <!-- Canva Unique Design Futuristic Abstract Digital Animation Pixel Noise Glitch Background --> + <source src="/assets/background.webm" type="video/webm"> + </video> + </div> + <div class="title-box"> + <h1>$title$</h1> + <div class="links"> + <a href="$rss_url$" target="_blank" class="rss-link">[rss feed]</a> + <a href="$repo$" target="_blank" class="repo-link">[hard copies]</a> + <span class="count">[stats: $count$ repos, total size $size$, updated $date$]</span> + </div> + <div class="search-box"> + <input type="text" id="searchInput" placeholder="search this page"> + </div> + </div> + <div class="content"> + $body$ + </div> + <script> + document.getElementById('searchInput').addEventListener('input', function() { + const query = this.value.toLowerCase(); + const items = document.querySelectorAll('.content li'); + items.forEach(item => { + const text = item.textContent.toLowerCase(); + item.style.display = text.includes(query) ? '' : 'none'; + }); + }); + </script> +</body> +</html> |