added templates

author: Pinapelz <donaldshan1@outlook.com> 2023-06-20 02:27:11 -0700
committer: Pinapelz <donaldshan1@outlook.com> 2023-06-20 02:27:11 -0700
commit: f10d68b75062aaf401350833e19edee833c6684b (patch)
tree: f4870f44f8d54d18139c1d454ab20e51ecfd858e
parent: 5de1f89a4dc909e6045cc86f387a1766e6b4f785 (diff)
3 files changed, 686 insertions, 0 deletions
diff --git a/templates/full_table.html b/templates/full_table.html
new file mode 100644
index 0000000..adcaceb
--- /dev/null
+++ b/templates/full_table.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <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>
+            <a href="{{homepage_url}}" target="_self" rel="noopener noreferrer">
+                <div class="banner-container">
+                    <div class="banner-text">{{sub_text}}</div>
+                </div>
+            </a>
+            <style>
+                .banner-container {
+                    background-color: #2a4b71;
+                    color: white;
+                    text-align: center;
+                    font-size: 6em;
+                    font-family: 'Montserrat', sans-serif;
+                    font-weight: bold;
+                    padding: 0.2em 0;
+                    margin-bottom: 0.5em;
+                    margin: 0;
+                    position: relative;
+                }
+        
+                .banner-text {
+                    position: relative;
+                    animation-name: slideInRight;
+                    animation-duration: 1s;
+                    animation-timing-function: ease;
+                    animation-delay: 0s;
+                    animation-fill-mode: both;
+                }
+        
+                @keyframes slideInRight {
+                    0% {
+                        transform: translateX(-100%);
+                        opacity: 0;
+                    }
+                    100% {
+                        transform: translateX(0);
+                        opacity: 1;
+                    }
+                }
+        
+                /* Responsive design */
+                @media (max-width: 768px) {
+                    .banner-container {
+                        font-size: 4em;
+                    }
+                }
+        
+                @media (max-width: 576px) {
+                    .banner-container {
+                        font-size: 3em;
+                    }
+                }
+            </style>
+            <br>
+            <style>
+                .info-card {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    margin-bottom: 20px;
+                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                    border-radius: 10px;
+                    overflow: hidden;
+                }
+        
+                .img-wrapper {
+                    width: 200px;
+                    height: 200px;
+                    overflow: hidden;
+                }
+        
+                .img-wrapper img {
+                    width: 100%;
+                    height: auto;
+                }
+        
+                .text-wrapper {
+                    flex: 1;
+                    padding: 20px;
+                }
+        
+                h2 {
+                    font-size: 24px;
+                    margin-bottom: 10px;
+                    font-family: Arial, sans-serif;
+                }
+        
+                p {
+                    font-size: 16px;
+                    margin-bottom: 20px;
+                    font-family: Arial, sans-serif;
+                }
+                a{
+                    font-family: Arial, sans-serif;
+                }
+        
+                .button {
+                    display: inline-block;
+                    padding: 10px 20px;
+                    border-radius: 20px;
+                    background-color: #0077b5;
+                    color: #fff;
+                    text-decoration: none;
+                    transition: background-color 0.2s ease;
+                }
+        
+                .button:hover {
+                    background-color: #005ea3;
+                }
+        
+                @media only screen and (max-width: 768px) {
+                    .info-card {
+                        flex-direction: column;
+                        align-items: flex-start;
+                    }
+                    .img-wrapper {
+                        width: 100%;
+                        height: 250px;
+                        margin-bottom: 20px;
+                    }
+                    .text-wrapper {
+                        width: 100%;
+                        white-space: pre-line;
+                    }
+                }
+            </style>
+            <div class="info-card">
+                <div class="img-wrapper">
+                <img src="{{profile_pic}}" alt="{{name}}">
+                </div>
+                <div class="text-wrapper">
+                    <h2>{{name}}</h2>
+                    <p>{{description}}</p>
+                    <a class="button" href="https://www.youtube.com/channel/{{channel_id}}">YouTube Channel</a>
+                    </div>
+            </div>
+            <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: 12px;
+                    }
+                }
+                @media screen and (max-width: 400px) {
+                    th, td {
+                        padding: 2px 4px;
+                        font-size: 10px;
+                    }
+                }
+                </style>
+                {{full_table}}
+        </body>
+    </head>
+\ No newline at end of file
diff --git a/templates/individual.html b/templates/individual.html
new file mode 100644
index 0000000..948777a
--- /dev/null
+++ b/templates/individual.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <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>
+        <a href="{{homepage_url}}" target="_self" rel="noopener noreferrer">
+            <div class="banner-container">
+                <div class="banner-text">{{sub_text}}</div>
+            </div>
+        </a>
+        <style>
+            .banner-container {
+                background-color: #2a4b71;
+                color: white;
+                text-align: center;
+                font-size: 6em;
+                font-family: 'Montserrat', sans-serif;
+                font-weight: bold;
+                padding: 0.2em 0;
+                margin-bottom: 0.5em;
+                margin: 0;
+                position: relative;
+            }
+    
+            .banner-text {
+                position: relative;
+                animation-name: slideInRight;
+                animation-duration: 1s;
+                animation-timing-function: ease;
+                animation-delay: 0s;
+                animation-fill-mode: both;
+            }
+    
+            @keyframes slideInRight {
+                0% {
+                    transform: translateX(-100%);
+                    opacity: 0;
+                }
+                100% {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+            }
+    
+            /* Responsive design */
+            @media (max-width: 768px) {
+                .banner-container {
+                    font-size: 4em;
+                }
+            }
+    
+            @media (max-width: 576px) {
+                .banner-container {
+                    font-size: 3em;
+                }
+            }
+        </style>
+        <br>
+        <style>
+            .info-card {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                margin-bottom: 20px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                border-radius: 10px;
+                overflow: hidden;
+            }
+    
+            .img-wrapper {
+                width: 200px;
+                height: 200px;
+                overflow: hidden;
+            }
+    
+            .img-wrapper img {
+                width: 100%;
+                height: auto;
+            }
+    
+            .text-wrapper {
+                flex: 1;
+                padding: 20px;
+            }
+    
+            h2 {
+                font-size: 24px;
+                margin-bottom: 10px;
+                font-family: Arial, sans-serif;
+            }
+    
+            p {
+                font-size: 16px;
+                margin-bottom: 20px;
+                font-family: Arial, sans-serif;
+            }
+            a{
+                font-family: Arial, sans-serif;
+            }
+    
+            .button {
+                display: inline-block;
+                padding: 10px 20px;
+                border-radius: 20px;
+                background-color: #0077b5;
+                color: #fff;
+                text-decoration: none;
+                transition: background-color 0.2s ease;
+            }
+    
+            .button:hover {
+                background-color: #005ea3;
+            }
+    
+            @media only screen and (max-width: 768px) {
+                .info-card {
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+                .img-wrapper {
+                    width: 100%;
+                    height: 250px;
+                    margin-bottom: 20px;
+                }
+                .text-wrapper {
+                    width: 100%;
+                    white-space: pre-line;
+                }
+            }
+        </style>
+        <div class="info-card">
+            <div class="img-wrapper">
+            <img src="{{profile_pic}}" alt="{{name}}">
+            </div>
+            <div class="text-wrapper">
+                <h2>{{name}}</h2>
+                <p>{{description}}</p>
+                <a class="button" href="https://www.youtube.com/channel/{{channel_id}}">YouTube Channel</a>
+                </div>
+        </div>
+        {{projection_card}}
+        {{subscriber_trend}}
+        <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>
+        {{weekly_trend}}
+        <style>
+            .btn {
+                display: inline-block;
+                font-weight: 400;
+                text-align: center;
+                white-space: nowrap;
+                user-select: none;
+                border: 1px solid transparent;
+                padding: .375rem .75rem;
+                font-size: 1rem;
+                line-height: 1.5;
+                border-radius: .25rem;
+                transition: color .15s ease-in-out,
+                            background-color .15s ease-in-out,
+                            border-color .15s ease-in-out,
+                            box-shadow .15s ease-in-out;
+                color: #fff;
+                background-color: #007bff;
+                border-color: #007bff;
+                margin: 0 auto;
+                display: block;
+                max-width: 200px;
+            }
+    
+            .btn:hover {
+                color: #fff;
+                background-color: #0069d9;
+                border-color: #0062cc;
+            }
+    
+            .btn:focus, .btn.focus {
+                outline: 0;
+                box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5);
+            }
+    
+            .btn-lg {
+                font-size: 1.25rem;
+                line-height: 1.5;
+                padding: .3rem .75rem;
+                border-radius: .3rem;
+            }
+        </style>
+        <br>
+        <a href="{{full_table_url}}" class="btn btn-primary btn-lg" role="button">View Full Table</a>
+    </body>
+</html>
+\ No newline at end of file
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>
author	Pinapelz <donaldshan1@outlook.com>	2023-06-20 02:27:11 -0700
committer	Pinapelz <donaldshan1@outlook.com>	2023-06-20 02:27:11 -0700
commit	f10d68b75062aaf401350833e19edee833c6684b (patch)
tree	f4870f44f8d54d18139c1d454ab20e51ecfd858e
parent	5de1f89a4dc909e6045cc86f387a1766e6b4f785 (diff)