aboutsummaryrefslogtreecommitdiffstats
path: root/templates/ranking.html
diff options
context:
space:
mode:
authorPinapelz <donaldshan1@outlook.com>2023-06-20 02:27:11 -0700
committerPinapelz <donaldshan1@outlook.com>2023-06-20 02:27:11 -0700
commitf10d68b75062aaf401350833e19edee833c6684b (patch)
treef4870f44f8d54d18139c1d454ab20e51ecfd858e /templates/ranking.html
parent5de1f89a4dc909e6045cc86f387a1766e6b4f785 (diff)
added templates
Diffstat (limited to 'templates/ranking.html')
-rw-r--r--templates/ranking.html231
1 files changed, 231 insertions, 0 deletions
diff --git a/templates/ranking.html b/templates/ranking.html
new file mode 100644
index 0000000..773c041
--- /dev/null
+++ b/templates/ranking.html
@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8"/>
+ <head>
+ <title>{{meta_title}}</title>
+ <link rel="icon" type="image/x-icon" href="{{meta_image_url}}">
+ <meta name="description" content="{{meta_description}}">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Google / Search Engine Tags -->
+ <meta itemprop="name" content="{{meta_title}}">
+ <meta itemprop="description" content="{{meta_description}}">
+ <meta itemprop="image" content="{{meta_image_url}}">
+
+ <!-- Facebook Meta Tags -->
+ <meta property="og:url" content="http://nijitracker.com">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="{{meta_title}}">
+ <meta property="og:description" content="{{meta_description}}">
+ <meta property="og:image" content="{{meta_image_url}}">
+
+ <!-- Twitter Meta Tags -->
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:title" content="{{meta_title}}">
+ <meta name="twitter:description" content="{{meta_description}}">
+ <meta name="twitter:image" content="{meta_{image_url}}">
+ </head>
+ <body>
+ {{title_banner}}
+ <style>
+ .banner-container {
+ background-color: #2a4b71;
+ color: white;
+ text-align: center;
+ font-size: 6em;
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ font-weight: bold;
+ padding: 0.2em 0;
+ margin-bottom: 0.5em;
+ margin: 0;
+ position: relative;
+ word-wrap: break-word;
+ }
+ .banner-text {
+ animation-name: slideInDown;
+ animation-duration: 1s;
+ animation-timing-function: ease;
+ animation-delay: 0s;
+ animation-fill-mode: both;
+ }
+ .menu-bar {
+ background-color: #f2f2f2;
+ overflow: hidden;
+ position: relative;
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 1.5em;
+ font-weight: bold;
+ text-align: center;
+ }
+ .menu-bar a {
+ display: inline-block;
+ color: #2a4b71;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ transition: 0.3s;
+ }
+ .menu-bar a:hover {
+ background-color: #2a4b71;
+ color: white;
+ }
+ @keyframes slideInDown {
+ 0% {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ }
+ @media (max-width: 768px) {
+ .banner-container {
+ font-size: 3em;
+ padding: 0.2em 0.5em;
+ }
+ .menu-bar a {
+ font-size: 1em;
+ }
+ }
+ @media (max-width: 480px) {
+ .banner-container {
+ font-size: 2em;
+ padding: 0.2em 0.5em;
+ }
+ .menu-bar a {
+ font-size: 0.8em;
+ }
+ }
+ </style>
+ {{ranking_graph}}
+ <div style="text-align:center;">
+ <hr style="height: 3px; border: none; background-color: #f2f2f2; margin: 25px 0;" />
+ <span style="display:inline-block; position:relative; top:-1.5em; padding: 0 20px; background-color:#fff; font-size: 1.2em; font-weight:bold; color: #555; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 5px; font-family: Arial, sans-serif; letter-spacing: 2px;">{{divider}}</span>
+ </div>
+ {{ranking_table}}
+ <style>
+ table {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
+ max-width: 1570px;
+ margin: 0 auto;
+ background-color: #fff;
+ border-radius: 5px;
+ overflow: hidden;
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+ }
+ th,
+ td {
+ text-align: left;
+ padding: 12px 15px;
+ font-size: 18px;
+ border-bottom: 1px solid #ddd;
+ }
+ th {
+ background-color: #2a4b71;
+ color: #fff;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ }
+ td:nth-child(3),
+ td:nth-child(4) {
+ text-align: left;
+ padding: 12px 15px;
+ font-size: 18px;
+ border-bottom: 1px solid #ddd;
+ }
+ tbody tr:nth-child(even) {
+ background-color: #f2f2f2;
+ }
+ tbody tr:hover {
+ background-color: #ddd;
+ }
+ a {
+ color: #3c8dbc;
+ text-decoration: none;
+ }
+ @media screen and (max-width: 1024px) {
+ table {
+ font-size: 14px;
+ }
+ th,
+ td {
+ padding: 8px 10px;
+ font-size: 16px;
+ }
+ }
+ @media screen and (max-width: 768px) {
+ th,
+ td {
+ padding: 5px 8px;
+ font-size: 14px;
+ }
+ }
+ @media screen and (max-width: 600px) {
+ th,
+ td {
+ padding: 3px 5px;
+ font-size: 10px;
+ }
+ }
+ @media screen and (max-width: 400px) {
+ th,
+ td {
+ padding: 2px 4px;
+ font-size: 8px;
+ }
+ }
+ </style>
+ <div
+ style="
+ background-color: #f5f5f5;
+ padding: 20px;
+ font-size: 16px;
+ font-family: 'Open Sans', sans-serif;
+ "
+ >
+ <div style="text-align: center">
+ <span style="font-weight: bold">Information</span>
+ </div>
+ <div style="margin-top: 20px; text-align: center">
+ <p style="text-align: center">
+ Data for this site is taken every hour. Due to limitation with
+ YouTube's API only certain increments in subscriber counts will be
+ reflected based on each liver's channel size
+ </p>
+ <p style="text-align: center">
+ Each liver has their own page to track their own individual
+ achievements and subscriber count. The full table of all recorded
+ daily data for each channel is also viewable
+ </p>
+ </div>
+ <div style="text-align: center">
+ <span style="font-weight: bold">A Note on Graduating Livers</span>
+ </div>
+ <div style="margin-top: 20px; text-align: center">
+ <p style="text-align: center">
+ If a liver is determined to be graduating, retiring, or terminated,
+ Nijitracker will stop tracking their subscriber count, and their page
+ and entry will be removed
+ </p>
+ </div>
+ <div style="margin-top: 20px; text-align: center">
+ <p style="text-align: center">{{footer}}</p>
+ </div>
+ <div style="text-align: center; margin-top: 20px">
+ <a href="https://github.com/pinapelz/NijiTrack" target="_blank">
+ <img
+ src="https://img.shields.io/github/license/pinapelz/NijiTrack?color=%23994CC3&style=flat-square"
+ alt="License"
+ />
+ </a>
+ </div>
+ </div>
+ </body>
+</html>
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage