From fa99cd225154d6be7acd16b57ce3bacee742e87c Mon Sep 17 00:00:00 2001
From: TylerCG <117808427+TylerCG@users.noreply.github.com>
Date: Sun, 27 Apr 2025 20:04:45 -0400
Subject: [PATCH] ydl

---
 app/static/css/style.css | 350 ---------------------------------------
 app/templates/ydl.html   |  61 ++++++-
 2 files changed, 57 insertions(+), 354 deletions(-)
 delete mode 100644 app/static/css/style.css

diff --git a/app/static/css/style.css b/app/static/css/style.css
deleted file mode 100644
index 352d245..0000000
--- a/app/static/css/style.css
+++ /dev/null
@@ -1,350 +0,0 @@
-:root {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    font-size: 17px;
-    background-color: #292F36;
-    color: #ccc;
-}
-nav {
-    width: 100%;
-    text-align: left;
-    position: fixed;
-    z-index: 5;
-    top: 0;
-    left: 0;
-    text-decoration: unset;
-    background-color: #1b1f24;
-    & ul {
-        padding-inline-start: unset;
-        display: flex;
-        align-items: center; 
-        margin-block-start: .4em;
-        margin-block-end: .4em;
-        & li {
-            text-align: left;
-            display: inline-block;
-            font-size: 1.5em;
-            & hover {
-                cursor: pointer;;
-            }
-            & a {
-                display: block;
-                text-decoration: none; /* no underline */
-                color: #ccc;
-                padding: .4em .75em .4em .75em;
-            }
-            & a:hover {
-                color: #f0f0f0;
-            }
-            & i {
-                padding-top: .1em;
-            }
-            & .bx-search {
-                text-align: right;
-            }
-        }
-        & b {
-            display: unset;
-            position: absolute;
-            right: 1em;
-            padding: .75em .2em;
-            z-index: 5;
-        }
-    }
-    & form {
-        all: unset;
-        display: inline-block;
-        border: solid 2px #ccc;
-        border-radius: 2em;
-        padding: .15em 1em;
-        top: 0;
-        & input {
-            display: block;
-            all: unset;
-        }
-        & button {
-            all: unset;
-            top: 5em;
-            cursor: pointer;
-            & a {
-                font-size: 1.5em;
-                display: block;
-                position: relative;
-                bottom: -5;
-            }
-        }
-    }
-    #dropSearch {
-        color: #ccc;
-        & form {
-            all: unset;
-            text-align: left;
-            text-indent: 1em;
-            & input {
-                z-index: 6;
-                float: left;
-                height: 2.4em;
-                font-size: 1.2em;
-                background-color: #1b1f24;
-            }
-        }
-        
-    }
-}
-#searchFilters {
-    margin-bottom: 1em;
-    /* display:none; */
-    & .selects-container {
-        display: inline-block;
-        background-color: #1b1f24;
-        margin: 0.2em;
-        text-align: left;
-        border-radius: .25em;
-        cursor: pointer;
-        position: relative;
-    }
-    & select {
-        left:0;
-        top:0;
-        all: unset;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        background-color: #1b1f24;
-        width: 11ch;
-        padding: 0.5em;
-        border-radius: inherit;
-    }
-    & a {
-        padding: 0.5em;
-        background-color: #2163a1;
-        border-radius: inherit;
-        cursor: pointer;
-    }
-    & a:hover{
-        color: #f0f0f0;
-    }
-    & i {
-        right: 0.4em;
-        top: 0.65em;
-        position: relative;
-        float: right;
-    }
-}
-#searchButton{
-    display: none;
-}
-#searchButton:hover {
-    cursor: pointer;
-}
-#glass {
-    position: fixed;
-    pointer-events: unset;
-    height: 100%;
-    width: 100%;
-    z-index: 4;
-    backdrop-filter: blur(10px);
-    left:0;
-    top: 0;
-}
-/* .background-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('background.jpg');
-    background-size: cover;
-    filter: blur(10px);
-    z-index: -1;
-    opacity: 50%;
-  } */
-body {
-    text-align: center;
-    margin-top: 5em;
-}
-@media (min-width: 1171px) {
-    .downloader{
-        
-        height: 50px;
-    }
-}
-@media (max-width: 1170px) {
-    :root {
-        font-size: 40px;
-    }
-    .movie {
-        margin: 75em;
-    }
-    #desktopSearch {
-        display: none;
-    }
-    #searchButton {
-        display: block;
-    }
-    #searchFilters {
-        font-size: 1.2em;
-    }
-    #redirect{
-        width: 300;
-        height: 300;
-    }
-    nav {
-        text-align: right;
-        & ul {
-            display: block;
-            & b {
-                left: 1em;
-                right: unset;
-            }
-        }
-        & li {
-            border-radius: .5em;
-            margin-right: .25em;
-            background-color: rgba(255, 255, 255, 0.10);
-            box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
-        }
-    }
-    .pageButton {
-        margin-bottom: 3em;
-        font-size: 1.1em;
-    }
-    .downloader{
-        height: 125px;
-        width: 700px;
-    }
-}
-.description {
-    width: 10em;
-    height: 3em;
-    overflow: hidden;
-    & h4 {
-        margin-block-start: .1em;
-        margin-block-end: .1em;
-        display: -webkit-box;
-        -webkit-line-clamp: 2; /* Number of visible lines */
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-.resDownload {
-    bottom: 0;
-    display: unset;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none;
-    & .resolution {
-        font-weight: bold;
-        color: white;
-        text-decoration: unset;
-        display: inline-block;
-        padding: .25em 1em .5em 1em;
-        border-radius: .5em;
-        vertical-align: bottom;
-    }
-    & .resError {
-        background-color: red;
-    }
-}
-.resolution_exists {
-    background-color: #525252;
-    cursor: not-allowed;
-}
-.resolution_available {
-    background-color: #2163a1;
-    cursor: pointer;
-    & .resolution_available:active {
-        background-color: #184875;
-    }
-}
-.details {
-    position: absolute;
-    margin: .25em;
-    margin-top: unset;
-    z-index: 3;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none;
-    & .chip {
-        background-color: rgba(0, 0, 0, 0.45);
-        border-radius: .5em;
-        font-size: .75em;
-        padding: .075em .3em;
-        display: inline-block;
-        backdrop-filter: blur(10px);
-        color: #ccc;
-    }
-    & .rating {
-        color: #fcba03;
-    }
-}
-
-.movie {
-    margin: .25em;
-    margin-bottom: 1em;
-    padding: .5em;
-    display: inline-block;
-    border-radius: .75em;
-    width: 10em;
-    color: whitesmoke;
-    background-color: rgba(0, 0, 0, 0.45);
-    backdrop-filter: blur(10px);
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
-}
-
-.movie img {
-    border-radius: .45em;
-    width: 10em;
-    height: auto;
-    position: relative;
-    z-index: 2;
-}
-#search {
-    height: 2em;
-}
-.pageButton {
-    margin: auto;
-    margin-bottom: 2em;
-    margin-top: 1em;
-    width: fit-content;
-    border-radius: 2em;
-    padding: .5em 0em;
-    background-color: rgba(255, 255, 255, 0.10);
-    & a {
-        padding: .5em 1em;
-    }
-    & a:hover {
-        background-color: #ccc;
-        cursor: pointer;
-        color: #292F36;
-    }
-    & #leftArrow {
-        border-radius: 2em 0 0 2em;
-    }
-    & #rightArrow {
-        border-radius: 0 2em 2em 0;
-    }
-}
-.disabled-button {
-    color: rgb(116, 116, 116);
-    pointer-events: none;
-  }
-.activePage {
-    text-decoration: underline;
-}
-.downloader {
-    font-size: 1.25em;
-    padding: 0.5em;
-    border-radius: 0.5em;
-    margin-bottom: 20px;
-}
-#redirect{
-    border-radius: 40px;
-    margin: 50px;
-}
\ No newline at end of file
diff --git a/app/templates/ydl.html b/app/templates/ydl.html
index 8cae1af..2b0ccd1 100644
--- a/app/templates/ydl.html
+++ b/app/templates/ydl.html
@@ -6,9 +6,40 @@
     <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
     <link rel="manifest" href="static/site.webmanifest">
-    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
-    <link rel="stylesheet" type="text/css" href="/static/css/boxicons.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <style>
+        :root {
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            font-size: 17px;
+            background-color: #292F36;
+            color: #ccc;
+        }
+        body {
+            text-align: center;
+            margin-top: 5em;
+        }
+        @media (min-width: 1171px) {
+            .downloader{
+                
+                height: 50px;
+            }
+        }
+        @media (max-width: 1170px) {
+            :root {
+                font-size: 40px;
+            }
+            .downloader{
+                height: 125px;
+                width: 700px;
+            }
+        }
+        .downloader {
+            font-size: 1.25em;
+            padding: 0.5em;
+            border-radius: 0.5em;
+            margin-bottom: 20px;
+        }
+    </style>
 </head>
 
 <body>
@@ -27,7 +58,29 @@
     <div id="downloadResult"></div>
 </body>
 
-<script type="text/javascript" src="/static/javascript/general.js"></script>
-<script type="text/javascript" src="/static/javascript/ydl.js"></script>
+<script>
+    function clearInput() {
+        $('#download_field').val(''); // Clear the input field
+    }
+            
+    // Handle the form submission with AJAX
+    $(document).ready(function () {
+        $('#ydl_download').submit(function (event) {
+            event.preventDefault(); // Prevent the default form submission
+            alert("File is now downloading");
+
+            $.ajax({
+                type: 'POST', // Use POST method to send data
+                url: '/ydl', // Target URL for the CherryPy handler
+                data: $('#ydl_download').serializeArray(), // Serialize the form data
+                success: function (data) {
+                    $('#downloadResult').html(data); // Display the result in the specified div
+                    alert("File has finished downloading");
+                }
+            });
+        });
+    });
+</script>
+<!-- <script type="text/javascript" src="/static/javascript/ydl.js"></script> -->
 
 </html>
\ No newline at end of file