Initial Web Site Commit

2021-11-08 02:32:37 -06:00 · 2021-11-08 02:32:37 -06:00 · 040bc5e152
commit 040bc5e152
68 changed files with 62598 additions and 0 deletions
--- a/assets/icons/icon-128x128.png
+++ b/assets/icons/icon-128x128.png
--- a/assets/icons/icon-144x144.png
+++ b/assets/icons/icon-144x144.png
--- a/assets/icons/icon-152x152.png
+++ b/assets/icons/icon-152x152.png
--- a/assets/icons/icon-192x192.png
+++ b/assets/icons/icon-192x192.png
--- a/assets/icons/icon-384x384.png
+++ b/assets/icons/icon-384x384.png
--- a/assets/icons/icon-48x48.png
+++ b/assets/icons/icon-48x48.png
--- a/assets/icons/icon-512x512.png
+++ b/assets/icons/icon-512x512.png
--- a/assets/icons/icon-72x72.png
+++ b/assets/icons/icon-72x72.png
--- a/assets/icons/icon-96x96.png
+++ b/assets/icons/icon-96x96.png
--- a/css/bootstrap-grid.css
+++ b/css/bootstrap-grid.css
--- a/css/bootstrap-grid.css.map
+++ b/css/bootstrap-grid.css.map
--- a/css/bootstrap-grid.min.css
+++ b/css/bootstrap-grid.min.css
--- a/css/bootstrap-grid.min.css.map
+++ b/css/bootstrap-grid.min.css.map
--- a/css/bootstrap-grid.rtl.css
+++ b/css/bootstrap-grid.rtl.css
--- a/css/bootstrap-grid.rtl.css.map
+++ b/css/bootstrap-grid.rtl.css.map
--- a/css/bootstrap-grid.rtl.min.css
+++ b/css/bootstrap-grid.rtl.min.css
--- a/css/bootstrap-grid.rtl.min.css.map
+++ b/css/bootstrap-grid.rtl.min.css.map
--- a/css/bootstrap-reboot.css
+++ b/css/bootstrap-reboot.css
@ -0,0 +1,485 @@
+/*!
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+  direction: ltr /* rtl:ignore */;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/*# sourceMappingURL=bootstrap-reboot.css.map */
--- a/css/bootstrap-reboot.css.map
+++ b/css/bootstrap-reboot.css.map
--- a/css/bootstrap-reboot.min.css
+++ b/css/bootstrap-reboot.min.css
--- a/css/bootstrap-reboot.min.css.map
+++ b/css/bootstrap-reboot.min.css.map
--- a/css/bootstrap-reboot.rtl.css
+++ b/css/bootstrap-reboot.rtl.css
@ -0,0 +1,482 @@
+/*!
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-bs-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-right: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+a:hover {
+  color: #0a58ca;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+  direction: ltr ;
+  unicode-bidi: bidi-override;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: right;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: right;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: right;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
--- a/css/bootstrap-reboot.rtl.css.map
+++ b/css/bootstrap-reboot.rtl.css.map
--- a/css/bootstrap-reboot.rtl.min.css
+++ b/css/bootstrap-reboot.rtl.min.css
--- a/css/bootstrap-reboot.rtl.min.css.map
+++ b/css/bootstrap-reboot.rtl.min.css.map
--- a/css/bootstrap-utilities.css
+++ b/css/bootstrap-utilities.css
--- a/css/bootstrap-utilities.css.map
+++ b/css/bootstrap-utilities.css.map
--- a/css/bootstrap-utilities.min.css
+++ b/css/bootstrap-utilities.min.css
--- a/css/bootstrap-utilities.min.css.map
+++ b/css/bootstrap-utilities.min.css.map
--- a/css/bootstrap-utilities.rtl.css
+++ b/css/bootstrap-utilities.rtl.css
--- a/css/bootstrap-utilities.rtl.css.map
+++ b/css/bootstrap-utilities.rtl.css.map
--- a/css/bootstrap-utilities.rtl.min.css
+++ b/css/bootstrap-utilities.rtl.min.css
--- a/css/bootstrap-utilities.rtl.min.css.map
+++ b/css/bootstrap-utilities.rtl.min.css.map
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
--- a/css/bootstrap.css.map
+++ b/css/bootstrap.css.map
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/css/bootstrap.min.css.map
+++ b/css/bootstrap.min.css.map
--- a/css/bootstrap.rtl.css
+++ b/css/bootstrap.rtl.css
--- a/css/bootstrap.rtl.css.map
+++ b/css/bootstrap.rtl.css.map
--- a/css/bootstrap.rtl.min.css
+++ b/css/bootstrap.rtl.min.css
--- a/css/bootstrap.rtl.min.css.map
+++ b/css/bootstrap.rtl.min.css.map
--- a/css/styles.css
+++ b/css/styles.css
@ -0,0 +1,62 @@
+:root {
+    --background-color:rgb(43, 39, 39);
+    --fore-color: rgb(255, 255, 255);
+}
+body {
+    background-color: var(--background-color);
+    color: var(--fore-color);
+}
+.download_box
+{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%;
+}
+.download_button
+{
+    position:relative;
+    
+    top: 4px;
+    font-size: 8pt;
+    
+}
+.progress_bar {
+    color: red;
+    width: 84%;
+
+}
+.selector
+{
+    position: relative;
+
+    top: 4px;
+    font-size: 8pt;
+}
+.res_selector
+{
+    position: relative;
+
+    top: 4px;
+    font-size: 8pt;
+}
+.download_text_box {
+   width: 100%;
+    border-color: var(--fore-color);
+    font-size: 12pt;
+    background-color: var(--fore-color);
+    color: var(--background-color)
+}
+
+.page
+{
+    display: none;
+    width: 100%;
+    min-height: 100%;
+    position: absolute;
+}
+.active
+{
+    display: block;
+}
+
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tesses YouTube Downloader</title>
+    <link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
+    <link rel="stylesheet" href="css/styles.css" crossorigin="use-credentials">
+    <link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="use-credentials">
+</head>
+<body>
+    
+    <nav class="navbar navbar-expand-lg bg-danger navbar-dark">
+        <div class="container">
+            <a href="#" data-target="home" class="navbar-brand spalnk">Tesses YouTube Downloader</a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navmenu">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a href="#" data-target="videos" class="nav-link spalnk">Videos</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" data-target="playlists" class="nav-link spalnk">Playlists</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" data-target="settings" class="nav-link spalnk">Settings</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="upload.html" class="nav-link">Upload</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="legacy.html" class="nav-link">Legacy Mode</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main>
+    
+        <div class="modal" tabindex="-1" role="dialog" id="modal1">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 id="video_title_modal" class="modal-title">Video Name</h5>
+                  
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <input type="radio" name="res" value="1" id="res-sd" checked> 
+                        <label for="res-sd">SD</label>
+                        <br>
+                        <input type="radio" name="res" value="0" id="res-hd">
+                        <label for="res-hd">HD</label>
+                        <br>
+                        <input type="radio" name="res" value="2" id="res-au">
+                        <label for="res-au">Audio</label>
+                        <input type="hidden" id="video_id_modal">
+                    </form>
+                    
+
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-primary" onclick="play();">Play</button>
+                  <button type="button" class="btn btn-secondary" onclick="download();">Download</button>
+                </div>
+              </div>
+            </div>
+          </div>
+   
+    <div class="page" id="home">
+        <!--Home Page-->
+        <section class="bg-danger text-light p-3">
+            <div class="container">
+                <div>
+                    <div>
+                        <h3>
+                            Download YouTube Videos, Playlists or Channels
+                        </h3>
+                        
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="bg-light text-dark p-3">
+            <div class="dropdown-menu">
+                <a class="dropdown-item" href="#">Server Download (SD)</a>
+                <a class="dropdown-item" href="#">Server Download (HD)</a>
+                <a class="dropdown-item" href="#">Server Download (Audio Only)</a>
+                <div role="separator" class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">Download To Device (SD)</a>
+                <a class="dropdown-item" href="#">Download To Device (HD)</a>
+                <a class="dropdown-item" href="#">Download To Device (Audio Only)</a>
+              </div>
+                    
+            <div class="input-group">
+              
+           
+                <input type="text" id="download_text_box" class="form-control" placeholder="https://www.youtube.com/watch?v=il9nqWw9W3Y" aria-label="Text input with segmented dropdown button">
+                <select class="form-control custom-select" id="selector" style="max-width: 6em;">
+                    
+                    <option selected value=0>Video</option>
+                    <option value=1>Playlist</option>
+                    <option value=2>Channel</option>
+                    <option value=3>User</option>
+                    <option value=4>Server</option>
+                  </select>
+                  <select class="form-control custom-select" id="res_selector" style="max-width: 5em;">
+                    
+                    <option selected  value=1>SD</option>
+                    <option value=0>HD</option>
+                    <option value=2>Audio</option>
+                   
+                    
+                  </select>
+                <div class="input-group-append">
+                   
+                  <button id="download_button" type="button" class="btn btn-primary">Download</button>
+                  
+                    
+                  
+                </div>
+              </div>
+            
+        </section>
+        <section class="bg-danger text-light p-3" style="height: 100%;">
+            <div class="container">
+
+            
+                <h3 id="date">00/00/0000</h3> 
+                 <h3 id="views">42 views - 0 likes - 0 dislikes</h3>
+                 <hr>
+                 Keywords: <span id="keywords"></span>
+                <hr>
+                <p id="description">
+                
+                </p>
+                </div>
+        </section>
+        
+    </div>
+
+    <div class="page" id="videos">
+        <br>
+        <div class="container">
+                
+               <template id="video_template">
+                    <div class="row">
+                    <div class="col">
+                      <img class="image"  width="256" height="144">
+              
+                    </div>
+                    <div class="col-9">
+                        <h4>
+                         <a class="video_link"  style="text-decoration: none" class="text-dark">
+                          </a></h4>
+                          <span class="views"></span> &middot; <span class="date"></span><br>
+                          <span class="video_author"></span>
+  
+                    </div>
+                    </div>
+                    <br>
+               </template>
+               <div id="videos_list">
+                   
+               </div>
+        </div>
+   
+    </div>
+    <div class="page" id="playlists">
+        <br>
+        <div class="container">
+            <div id="playlists_list">
+                   
+            </div>
+        </div>
+    </div>
+    
+    <div class="page" id="view_videos_list">
+        <br>
+        <div class="container">
+            
+            <div id="videos_list_view">
+                   
+            </div>
+        </div>
+    </div>
+    <div class="page" id="settings">
+        <section class="bg-danger text-light p-3">
+            <div class="container">
+                <div>
+                    <div>
+                        <h3>
+                            Settings 
+                        </h3>
+                        
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="bg-success text-light p-3">
+            <div class="container">
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" role="switch" id="enable_thumbnails">
+                    <label class="form-check-label" for="enable_thumbnails">Enable Thumbnails</label>
+                </div>
+                Startup Page: <select class="custom-select" id="starting_page"></select>
+            </div>
+        </section>
+       
+    </div>
+   
+    </main>
+    <footer class="fixed-bottom bg-danger text-light" id="footer">
+        <div class="container">
+            <h5 id="video_title" class="video_title"><a id="video_link" style="text-decoration: none" class="text-light" href="/">No Title</a> by <a id="channel_link" class="text-light" style="text-decoration: none" href="/">No Channel</a></a></h5> 
+            
+            
+          
+            <div class="progress" style="height: 4px;">
+                <div class="progress-bar" role="progressbar" style="width: 25%;" id="progress_bar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              
+              
+        </div>
+    </footer>
+    <script src="js/jquery.js"></script>
+    <script src="js/lazyload.js"></script>
+    <script src="js/spa.js"></script>
+    <script src="js/new_main.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+</body>
+</html>
--- a/js/bootstrap.bundle.js
+++ b/js/bootstrap.bundle.js
--- a/js/bootstrap.bundle.js.map
+++ b/js/bootstrap.bundle.js.map
--- a/js/bootstrap.bundle.min.js
+++ b/js/bootstrap.bundle.min.js
--- a/js/bootstrap.bundle.min.js.map
+++ b/js/bootstrap.bundle.min.js.map
--- a/js/bootstrap.esm.js
+++ b/js/bootstrap.esm.js
--- a/js/bootstrap.esm.js.map
+++ b/js/bootstrap.esm.js.map
--- a/js/bootstrap.esm.min.js
+++ b/js/bootstrap.esm.min.js
--- a/js/bootstrap.esm.min.js.map
+++ b/js/bootstrap.esm.min.js.map
--- a/js/bootstrap.js
+++ b/js/bootstrap.js
--- a/js/bootstrap.js.map
+++ b/js/bootstrap.js.map
--- a/js/bootstrap.min.js
+++ b/js/bootstrap.min.js
--- a/js/bootstrap.min.js.map
+++ b/js/bootstrap.min.js.map
--- a/js/jquery.js
+++ b/js/jquery.js
@ -0,0 +1,752 @@
+/*!
+ * jQuery Migrate - v1.4.1 - 2016-05-19
+ * Copyright jQuery Foundation and other contributors
+ */
+(function( jQuery, window, undefined ) {
+    // See http://bugs.jquery.com/ticket/13335
+    // "use strict";
+    
+    
+    jQuery.migrateVersion = "1.4.1";
+    
+    
+    var warnedAbout = {};
+    
+    // List of warnings already given; public read only
+    jQuery.migrateWarnings = [];
+    
+    // Set to true to prevent console output; migrateWarnings still maintained
+    // jQuery.migrateMute = false;
+    
+    // Show a message on the console so devs know we're active
+    if ( window.console && window.console.log ) {
+        window.console.log( "JQMIGRATE: Migrate is installed" +
+            ( jQuery.migrateMute ? "" : " with logging active" ) +
+            ", version " + jQuery.migrateVersion );
+    }
+    
+    // Set to false to disable traces that appear with warnings
+    if ( jQuery.migrateTrace === undefined ) {
+        jQuery.migrateTrace = true;
+    }
+    
+    // Forget any warnings we've already given; public
+    jQuery.migrateReset = function() {
+        warnedAbout = {};
+        jQuery.migrateWarnings.length = 0;
+    };
+    
+    function migrateWarn( msg) {
+        var console = window.console;
+        if ( !warnedAbout[ msg ] ) {
+            warnedAbout[ msg ] = true;
+            jQuery.migrateWarnings.push( msg );
+            if ( console && console.warn && !jQuery.migrateMute ) {
+                console.warn( "JQMIGRATE: " + msg );
+                if ( jQuery.migrateTrace && console.trace ) {
+                    console.trace();
+                }
+            }
+        }
+    }
+    
+    function migrateWarnProp( obj, prop, value, msg ) {
+        if ( Object.defineProperty ) {
+            // On ES5 browsers (non-oldIE), warn if the code tries to get prop;
+            // allow property to be overwritten in case some other plugin wants it
+            try {
+                Object.defineProperty( obj, prop, {
+                    configurable: true,
+                    enumerable: true,
+                    get: function() {
+                        migrateWarn( msg );
+                        return value;
+                    },
+                    set: function( newValue ) {
+                        migrateWarn( msg );
+                        value = newValue;
+                    }
+                });
+                return;
+            } catch( err ) {
+                // IE8 is a dope about Object.defineProperty, can't warn there
+            }
+        }
+    
+        // Non-ES5 (or broken) browser; just set the property
+        jQuery._definePropertyBroken = true;
+        obj[ prop ] = value;
+    }
+    
+    if ( document.compatMode === "BackCompat" ) {
+        // jQuery has never supported or tested Quirks Mode
+        migrateWarn( "jQuery is not compatible with Quirks Mode" );
+    }
+    
+    
+    var attrFn = jQuery( "<input/>", { size: 1 } ).attr("size") && jQuery.attrFn,
+        oldAttr = jQuery.attr,
+        valueAttrGet = jQuery.attrHooks.value && jQuery.attrHooks.value.get ||
+            function() { return null; },
+        valueAttrSet = jQuery.attrHooks.value && jQuery.attrHooks.value.set ||
+            function() { return undefined; },
+        rnoType = /^(?:input|button)$/i,
+        rnoAttrNodeType = /^[238]$/,
+        rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,
+        ruseDefault = /^(?:checked|selected)$/i;
+    
+    // jQuery.attrFn
+    migrateWarnProp( jQuery, "attrFn", attrFn || {}, "jQuery.attrFn is deprecated" );
+    
+    jQuery.attr = function( elem, name, value, pass ) {
+        var lowerName = name.toLowerCase(),
+            nType = elem && elem.nodeType;
+    
+        if ( pass ) {
+            // Since pass is used internally, we only warn for new jQuery
+            // versions where there isn't a pass arg in the formal params
+            if ( oldAttr.length < 4 ) {
+                migrateWarn("jQuery.fn.attr( props, pass ) is deprecated");
+            }
+            if ( elem && !rnoAttrNodeType.test( nType ) &&
+                (attrFn ? name in attrFn : jQuery.isFunction(jQuery.fn[name])) ) {
+                return jQuery( elem )[ name ]( value );
+            }
+        }
+    
+        // Warn if user tries to set `type`, since it breaks on IE 6/7/8; by checking
+        // for disconnected elements we don't warn on $( "<button>", { type: "button" } ).
+        if ( name === "type" && value !== undefined && rnoType.test( elem.nodeName ) && elem.parentNode ) {
+            migrateWarn("Can't change the 'type' of an input or button in IE 6/7/8");
+        }
+    
+        // Restore boolHook for boolean property/attribute synchronization
+        if ( !jQuery.attrHooks[ lowerName ] && rboolean.test( lowerName ) ) {
+            jQuery.attrHooks[ lowerName ] = {
+                get: function( elem, name ) {
+                    // Align boolean attributes with corresponding properties
+                    // Fall back to attribute presence where some booleans are not supported
+                    var attrNode,
+                        property = jQuery.prop( elem, name );
+                    return property === true || typeof property !== "boolean" &&
+                        ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
+    
+                        name.toLowerCase() :
+                        undefined;
+                },
+                set: function( elem, value, name ) {
+                    var propName;
+                    if ( value === false ) {
+                        // Remove boolean attributes when set to false
+                        jQuery.removeAttr( elem, name );
+                    } else {
+                        // value is true since we know at this point it's type boolean and not false
+                        // Set boolean attributes to the same name and set the DOM property
+                        propName = jQuery.propFix[ name ] || name;
+                        if ( propName in elem ) {
+                            // Only set the IDL specifically if it already exists on the element
+                            elem[ propName ] = true;
+                        }
+    
+                        elem.setAttribute( name, name.toLowerCase() );
+                    }
+                    return name;
+                }
+            };
+    
+            // Warn only for attributes that can remain distinct from their properties post-1.9
+            if ( ruseDefault.test( lowerName ) ) {
+                migrateWarn( "jQuery.fn.attr('" + lowerName + "') might use property instead of attribute" );
+            }
+        }
+    
+        return oldAttr.call( jQuery, elem, name, value );
+    };
+    
+    // attrHooks: value
+    jQuery.attrHooks.value = {
+        get: function( elem, name ) {
+            var nodeName = ( elem.nodeName || "" ).toLowerCase();
+            if ( nodeName === "button" ) {
+                return valueAttrGet.apply( this, arguments );
+            }
+            if ( nodeName !== "input" && nodeName !== "option" ) {
+                migrateWarn("jQuery.fn.attr('value') no longer gets properties");
+            }
+            return name in elem ?
+                elem.value :
+                null;
+        },
+        set: function( elem, value ) {
+            var nodeName = ( elem.nodeName || "" ).toLowerCase();
+            if ( nodeName === "button" ) {
+                return valueAttrSet.apply( this, arguments );
+            }
+            if ( nodeName !== "input" && nodeName !== "option" ) {
+                migrateWarn("jQuery.fn.attr('value', val) no longer sets properties");
+            }
+            // Does not return so that setAttribute is also used
+            elem.value = value;
+        }
+    };
+    
+    
+    var matched, browser,
+        oldInit = jQuery.fn.init,
+        oldFind = jQuery.find,
+        oldParseJSON = jQuery.parseJSON,
+        rspaceAngle = /^\s*</,
+        rattrHashTest = /\[(\s*[-\w]+\s*)([~|^$*]?=)\s*([-\w#]*?#[-\w#]*)\s*\]/,
+        rattrHashGlob = /\[(\s*[-\w]+\s*)([~|^$*]?=)\s*([-\w#]*?#[-\w#]*)\s*\]/g,
+        // Note: XSS check is done below after string is trimmed
+        rquickExpr = /^([^<]*)(<[\w\W]+>)([^>]*)$/;
+    
+    // $(html) "looks like html" rule change
+    jQuery.fn.init = function( selector, context, rootjQuery ) {
+        var match, ret;
+    
+        if ( selector && typeof selector === "string" ) {
+            if ( !jQuery.isPlainObject( context ) &&
+                    (match = rquickExpr.exec( jQuery.trim( selector ) )) && match[ 0 ] ) {
+    
+                // This is an HTML string according to the "old" rules; is it still?
+                if ( !rspaceAngle.test( selector ) ) {
+                    migrateWarn("$(html) HTML strings must start with '<' character");
+                }
+                if ( match[ 3 ] ) {
+                    migrateWarn("$(html) HTML text after last tag is ignored");
+                }
+    
+                // Consistently reject any HTML-like string starting with a hash (gh-9521)
+                // Note that this may break jQuery 1.6.x code that otherwise would work.
+                if ( match[ 0 ].charAt( 0 ) === "#" ) {
+                    migrateWarn("HTML string cannot start with a '#' character");
+                    jQuery.error("JQMIGRATE: Invalid selector string (XSS)");
+                }
+    
+                // Now process using loose rules; let pre-1.8 play too
+                // Is this a jQuery context? parseHTML expects a DOM element (#178)
+                if ( context && context.context && context.context.nodeType ) {
+                    context = context.context;
+                }
+    
+                if ( jQuery.parseHTML ) {
+                    return oldInit.call( this,
+                            jQuery.parseHTML( match[ 2 ], context && context.ownerDocument ||
+                                context || document, true ), context, rootjQuery );
+                }
+            }
+        }
+    
+        ret = oldInit.apply( this, arguments );
+    
+        // Fill in selector and context properties so .live() works
+        if ( selector && selector.selector !== undefined ) {
+            // A jQuery object, copy its properties
+            ret.selector = selector.selector;
+            ret.context = selector.context;
+    
+        } else {
+            ret.selector = typeof selector === "string" ? selector : "";
+            if ( selector ) {
+                ret.context = selector.nodeType? selector : context || document;
+            }
+        }
+    
+        return ret;
+    };
+    jQuery.fn.init.prototype = jQuery.fn;
+    
+    jQuery.find = function( selector ) {
+        var args = Array.prototype.slice.call( arguments );
+    
+        // Support: PhantomJS 1.x
+        // String#match fails to match when used with a //g RegExp, only on some strings
+        if ( typeof selector === "string" && rattrHashTest.test( selector ) ) {
+    
+            // The nonstandard and undocumented unquoted-hash was removed in jQuery 1.12.0
+            // First see if qS thinks it's a valid selector, if so avoid a false positive
+            try {
+                document.querySelector( selector );
+            } catch ( err1 ) {
+    
+                // Didn't *look* valid to qSA, warn and try quoting what we think is the value
+                selector = selector.replace( rattrHashGlob, function( _, attr, op, value ) {
+                    return "[" + attr + op + "\"" + value + "\"]";
+                } );
+    
+                // If the regexp *may* have created an invalid selector, don't update it
+                // Note that there may be false alarms if selector uses jQuery extensions
+                try {
+                    document.querySelector( selector );
+                    migrateWarn( "Attribute selector with '#' must be quoted: " + args[ 0 ] );
+                    args[ 0 ] = selector;
+                } catch ( err2 ) {
+                    migrateWarn( "Attribute selector with '#' was not fixed: " + args[ 0 ] );
+                }
+            }
+        }
+    
+        return oldFind.apply( this, args );
+    };
+    
+    // Copy properties attached to original jQuery.find method (e.g. .attr, .isXML)
+    var findProp;
+    for ( findProp in oldFind ) {
+        if ( Object.prototype.hasOwnProperty.call( oldFind, findProp ) ) {
+            jQuery.find[ findProp ] = oldFind[ findProp ];
+        }
+    }
+    
+    // Let $.parseJSON(falsy_value) return null
+    jQuery.parseJSON = function( json ) {
+        if ( !json ) {
+            migrateWarn("jQuery.parseJSON requires a valid JSON string");
+            return null;
+        }
+        return oldParseJSON.apply( this, arguments );
+    };
+    
+    jQuery.uaMatch = function( ua ) {
+        ua = ua.toLowerCase();
+    
+        var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+            /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+            /(msie) ([\w.]+)/.exec( ua ) ||
+            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+            [];
+    
+        return {
+            browser: match[ 1 ] || "",
+            version: match[ 2 ] || "0"
+        };
+    };
+    
+    // Don't clobber any existing jQuery.browser in case it's different
+    if ( !jQuery.browser ) {
+        matched = jQuery.uaMatch( navigator.userAgent );
+        browser = {};
+    
+        if ( matched.browser ) {
+            browser[ matched.browser ] = true;
+            browser.version = matched.version;
+        }
+    
+        // Chrome is Webkit, but Webkit is also Safari.
+        if ( browser.chrome ) {
+            browser.webkit = true;
+        } else if ( browser.webkit ) {
+            browser.safari = true;
+        }
+    
+        jQuery.browser = browser;
+    }
+    
+    // Warn if the code tries to get jQuery.browser
+    migrateWarnProp( jQuery, "browser", jQuery.browser, "jQuery.browser is deprecated" );
+    
+    // jQuery.boxModel deprecated in 1.3, jQuery.support.boxModel deprecated in 1.7
+    jQuery.boxModel = jQuery.support.boxModel = (document.compatMode === "CSS1Compat");
+    migrateWarnProp( jQuery, "boxModel", jQuery.boxModel, "jQuery.boxModel is deprecated" );
+    migrateWarnProp( jQuery.support, "boxModel", jQuery.support.boxModel, "jQuery.support.boxModel is deprecated" );
+    
+    jQuery.sub = function() {
+        function jQuerySub( selector, context ) {
+            return new jQuerySub.fn.init( selector, context );
+        }
+        jQuery.extend( true, jQuerySub, this );
+        jQuerySub.superclass = this;
+        jQuerySub.fn = jQuerySub.prototype = this();
+        jQuerySub.fn.constructor = jQuerySub;
+        jQuerySub.sub = this.sub;
+        jQuerySub.fn.init = function init( selector, context ) {
+            var instance = jQuery.fn.init.call( this, selector, context, rootjQuerySub );
+            return instance instanceof jQuerySub ?
+                instance :
+                jQuerySub( instance );
+        };
+        jQuerySub.fn.init.prototype = jQuerySub.fn;
+        var rootjQuerySub = jQuerySub(document);
+        migrateWarn( "jQuery.sub() is deprecated" );
+        return jQuerySub;
+    };
+    
+    // The number of elements contained in the matched element set
+    jQuery.fn.size = function() {
+        migrateWarn( "jQuery.fn.size() is deprecated; use the .length property" );
+        return this.length;
+    };
+    
+    
+    var internalSwapCall = false;
+    
+    // If this version of jQuery has .swap(), don't false-alarm on internal uses
+    if ( jQuery.swap ) {
+        jQuery.each( [ "height", "width", "reliableMarginRight" ], function( _, name ) {
+            var oldHook = jQuery.cssHooks[ name ] && jQuery.cssHooks[ name ].get;
+    
+            if ( oldHook ) {
+                jQuery.cssHooks[ name ].get = function() {
+                    var ret;
+    
+                    internalSwapCall = true;
+                    ret = oldHook.apply( this, arguments );
+                    internalSwapCall = false;
+                    return ret;
+                };
+            }
+        });
+    }
+    
+    jQuery.swap = function( elem, options, callback, args ) {
+        var ret, name,
+            old = {};
+    
+        if ( !internalSwapCall ) {
+            migrateWarn( "jQuery.swap() is undocumented and deprecated" );
+        }
+    
+        // Remember the old values, and insert the new ones
+        for ( name in options ) {
+            old[ name ] = elem.style[ name ];
+            elem.style[ name ] = options[ name ];
+        }
+    
+        ret = callback.apply( elem, args || [] );
+    
+        // Revert the old values
+        for ( name in options ) {
+            elem.style[ name ] = old[ name ];
+        }
+    
+        return ret;
+    };
+    
+    
+    // Ensure that $.ajax gets the new parseJSON defined in core.js
+    jQuery.ajaxSetup({
+        converters: {
+            "text json": jQuery.parseJSON
+        }
+    });
+    
+    
+    var oldFnData = jQuery.fn.data;
+    
+    jQuery.fn.data = function( name ) {
+        var ret, evt,
+            elem = this[0];
+    
+        // Handles 1.7 which has this behavior and 1.8 which doesn't
+        if ( elem && name === "events" && arguments.length === 1 ) {
+            ret = jQuery.data( elem, name );
+            evt = jQuery._data( elem, name );
+            if ( ( ret === undefined || ret === evt ) && evt !== undefined ) {
+                migrateWarn("Use of jQuery.fn.data('events') is deprecated");
+                return evt;
+            }
+        }
+        return oldFnData.apply( this, arguments );
+    };
+    
+    
+    var rscriptType = /\/(java|ecma)script/i;
+    
+    // Since jQuery.clean is used internally on older versions, we only shim if it's missing
+    if ( !jQuery.clean ) {
+        jQuery.clean = function( elems, context, fragment, scripts ) {
+            // Set context per 1.8 logic
+            context = context || document;
+            context = !context.nodeType && context[0] || context;
+            context = context.ownerDocument || context;
+    
+            migrateWarn("jQuery.clean() is deprecated");
+    
+            var i, elem, handleScript, jsTags,
+                ret = [];
+    
+            jQuery.merge( ret, jQuery.buildFragment( elems, context ).childNodes );
+    
+            // Complex logic lifted directly from jQuery 1.8
+            if ( fragment ) {
+                // Special handling of each script element
+                handleScript = function( elem ) {
+                    // Check if we consider it executable
+                    if ( !elem.type || rscriptType.test( elem.type ) ) {
+                        // Detach the script and store it in the scripts array (if provided) or the fragment
+                        // Return truthy to indicate that it has been handled
+                        return scripts ?
+                            scripts.push( elem.parentNode ? elem.parentNode.removeChild( elem ) : elem ) :
+                            fragment.appendChild( elem );
+                    }
+                };
+    
+                for ( i = 0; (elem = ret[i]) != null; i++ ) {
+                    // Check if we're done after handling an executable script
+                    if ( !( jQuery.nodeName( elem, "script" ) && handleScript( elem ) ) ) {
+                        // Append to fragment and handle embedded scripts
+                        fragment.appendChild( elem );
+                        if ( typeof elem.getElementsByTagName !== "undefined" ) {
+                            // handleScript alters the DOM, so use jQuery.merge to ensure snapshot iteration
+                            jsTags = jQuery.grep( jQuery.merge( [], elem.getElementsByTagName("script") ), handleScript );
+    
+                            // Splice the scripts into ret after their former ancestor and advance our index beyond them
+                            ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) );
+                            i += jsTags.length;
+                        }
+                    }
+                }
+            }
+    
+            return ret;
+        };
+    }
+    
+    var eventAdd = jQuery.event.add,
+        eventRemove = jQuery.event.remove,
+        eventTrigger = jQuery.event.trigger,
+        oldToggle = jQuery.fn.toggle,
+        oldLive = jQuery.fn.live,
+        oldDie = jQuery.fn.die,
+        oldLoad = jQuery.fn.load,
+        ajaxEvents = "ajaxStart|ajaxStop|ajaxSend|ajaxComplete|ajaxError|ajaxSuccess",
+        rajaxEvent = new RegExp( "\\b(?:" + ajaxEvents + ")\\b" ),
+        rhoverHack = /(?:^|\s)hover(\.\S+|)\b/,
+        hoverHack = function( events ) {
+            if ( typeof( events ) !== "string" || jQuery.event.special.hover ) {
+                return events;
+            }
+            if ( rhoverHack.test( events ) ) {
+                migrateWarn("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'");
+            }
+            return events && events.replace( rhoverHack, "mouseenter$1 mouseleave$1" );
+        };
+    
+    // Event props removed in 1.9, put them back if needed; no practical way to warn them
+    if ( jQuery.event.props && jQuery.event.props[ 0 ] !== "attrChange" ) {
+        jQuery.event.props.unshift( "attrChange", "attrName", "relatedNode", "srcElement" );
+    }
+    
+    // Undocumented jQuery.event.handle was "deprecated" in jQuery 1.7
+    if ( jQuery.event.dispatch ) {
+        migrateWarnProp( jQuery.event, "handle", jQuery.event.dispatch, "jQuery.event.handle is undocumented and deprecated" );
+    }
+    
+    // Support for 'hover' pseudo-event and ajax event warnings
+    jQuery.event.add = function( elem, types, handler, data, selector ){
+        if ( elem !== document && rajaxEvent.test( types ) ) {
+            migrateWarn( "AJAX events should be attached to document: " + types );
+        }
+        eventAdd.call( this, elem, hoverHack( types || "" ), handler, data, selector );
+    };
+    jQuery.event.remove = function( elem, types, handler, selector, mappedTypes ){
+        eventRemove.call( this, elem, hoverHack( types ) || "", handler, selector, mappedTypes );
+    };
+    
+    jQuery.each( [ "load", "unload", "error" ], function( _, name ) {
+    
+        jQuery.fn[ name ] = function() {
+            var args = Array.prototype.slice.call( arguments, 0 );
+    
+            // If this is an ajax load() the first arg should be the string URL;
+            // technically this could also be the "Anything" arg of the event .load()
+            // which just goes to show why this dumb signature has been deprecated!
+            // jQuery custom builds that exclude the Ajax module justifiably die here.
+            if ( name === "load" && typeof args[ 0 ] === "string" ) {
+                return oldLoad.apply( this, args );
+            }
+    
+            migrateWarn( "jQuery.fn." + name + "() is deprecated" );
+    
+            args.splice( 0, 0, name );
+            if ( arguments.length ) {
+                return this.bind.apply( this, args );
+            }
+    
+            // Use .triggerHandler here because:
+            // - load and unload events don't need to bubble, only applied to window or image
+            // - error event should not bubble to window, although it does pre-1.7
+            // See http://bugs.jquery.com/ticket/11820
+            this.triggerHandler.apply( this, args );
+            return this;
+        };
+    
+    });
+    
+    jQuery.fn.toggle = function( fn, fn2 ) {
+    
+        // Don't mess with animation or css toggles
+        if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) {
+            return oldToggle.apply( this, arguments );
+        }
+        migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");
+    
+        // Save reference to arguments for access in closure
+        var args = arguments,
+            guid = fn.guid || jQuery.guid++,
+            i = 0,
+            toggler = function( event ) {
+                // Figure out which function to execute
+                var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
+                jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
+    
+                // Make sure that clicks stop
+                event.preventDefault();
+    
+                // and execute the function
+                return args[ lastToggle ].apply( this, arguments ) || false;
+            };
+    
+        // link all the functions, so any of them can unbind this click handler
+        toggler.guid = guid;
+        while ( i < args.length ) {
+            args[ i++ ].guid = guid;
+        }
+    
+        return this.click( toggler );
+    };
+    
+    jQuery.fn.live = function( types, data, fn ) {
+        migrateWarn("jQuery.fn.live() is deprecated");
+        if ( oldLive ) {
+            return oldLive.apply( this, arguments );
+        }
+        jQuery( this.context ).on( types, this.selector, data, fn );
+        return this;
+    };
+    
+    jQuery.fn.die = function( types, fn ) {
+        migrateWarn("jQuery.fn.die() is deprecated");
+        if ( oldDie ) {
+            return oldDie.apply( this, arguments );
+        }
+        jQuery( this.context ).off( types, this.selector || "**", fn );
+        return this;
+    };
+    
+    // Turn global events into document-triggered events
+    jQuery.event.trigger = function( event, data, elem, onlyHandlers  ){
+        if ( !elem && !rajaxEvent.test( event ) ) {
+            migrateWarn( "Global events are undocumented and deprecated" );
+        }
+        return eventTrigger.call( this,  event, data, elem || document, onlyHandlers  );
+    };
+    jQuery.each( ajaxEvents.split("|"),
+        function( _, name ) {
+            jQuery.event.special[ name ] = {
+                setup: function() {
+                    var elem = this;
+    
+                    // The document needs no shimming; must be !== for oldIE
+                    if ( elem !== document ) {
+                        jQuery.event.add( document, name + "." + jQuery.guid, function() {
+                            jQuery.event.trigger( name, Array.prototype.slice.call( arguments, 1 ), elem, true );
+                        });
+                        jQuery._data( this, name, jQuery.guid++ );
+                    }
+                    return false;
+                },
+                teardown: function() {
+                    if ( this !== document ) {
+                        jQuery.event.remove( document, name + "." + jQuery._data( this, name ) );
+                    }
+                    return false;
+                }
+            };
+        }
+    );
+    
+    jQuery.event.special.ready = {
+        setup: function() {
+            if ( this === document ) {
+                migrateWarn( "'ready' event is deprecated" );
+            }
+        }
+    };
+    
+    var oldSelf = jQuery.fn.andSelf || jQuery.fn.addBack,
+        oldFnFind = jQuery.fn.find;
+    
+    jQuery.fn.andSelf = function() {
+        migrateWarn("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()");
+        return oldSelf.apply( this, arguments );
+    };
+    
+    jQuery.fn.find = function( selector ) {
+        var ret = oldFnFind.apply( this, arguments );
+        ret.context = this.context;
+        ret.selector = this.selector ? this.selector + " " + selector : selector;
+        return ret;
+    };
+    
+    
+    // jQuery 1.6 did not support Callbacks, do not warn there
+    if ( jQuery.Callbacks ) {
+    
+        var oldDeferred = jQuery.Deferred,
+            tuples = [
+                // action, add listener, callbacks, .then handlers, final state
+                [ "resolve", "done", jQuery.Callbacks("once memory"),
+                    jQuery.Callbacks("once memory"), "resolved" ],
+                [ "reject", "fail", jQuery.Callbacks("once memory"),
+                    jQuery.Callbacks("once memory"), "rejected" ],
+                [ "notify", "progress", jQuery.Callbacks("memory"),
+                    jQuery.Callbacks("memory") ]
+            ];
+    
+        jQuery.Deferred = function( func ) {
+            var deferred = oldDeferred(),
+                promise = deferred.promise();
+    
+            deferred.pipe = promise.pipe = function( /* fnDone, fnFail, fnProgress */ ) {
+                var fns = arguments;
+    
+                migrateWarn( "deferred.pipe() is deprecated" );
+    
+                return jQuery.Deferred(function( newDefer ) {
+                    jQuery.each( tuples, function( i, tuple ) {
+                        var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
+                        // deferred.done(function() { bind to newDefer or newDefer.resolve })
+                        // deferred.fail(function() { bind to newDefer or newDefer.reject })
+                        // deferred.progress(function() { bind to newDefer or newDefer.notify })
+                        deferred[ tuple[1] ](function() {
+                            var returned = fn && fn.apply( this, arguments );
+                            if ( returned && jQuery.isFunction( returned.promise ) ) {
+                                returned.promise()
+                                    .done( newDefer.resolve )
+                                    .fail( newDefer.reject )
+                                    .progress( newDefer.notify );
+                            } else {
+                                newDefer[ tuple[ 0 ] + "With" ](
+                                    this === promise ? newDefer.promise() : this,
+                                    fn ? [ returned ] : arguments
+                                );
+                            }
+                        });
+                    });
+                    fns = null;
+                }).promise();
+    
+            };
+    
+            deferred.isResolved = function() {
+                migrateWarn( "deferred.isResolved is deprecated" );
+                return deferred.state() === "resolved";
+            };
+    
+            deferred.isRejected = function() {
+                migrateWarn( "deferred.isRejected is deprecated" );
+                return deferred.state() === "rejected";
+            };
+    
+            if ( func ) {
+                func.call( deferred, deferred );
+            }
+    
+            return deferred;
+        };
+    
+    }
+    
+    })( jQuery, window );
--- a/js/lazyload.js
+++ b/js/lazyload.js
@ -0,0 +1,180 @@
+/*!
+ * Lazy Load - JavaScript plugin for lazy loading images
+ *
+ * Copyright (c) 2007-2019 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ *   https://appelsiini.net/projects/lazyload
+ *
+ * Version: 2.0.0-rc.2
+ *
+ */
+
+(function (root, factory) {
+    if (typeof exports === "object") {
+        module.exports = factory(root);
+    } else if (typeof define === "function" && define.amd) {
+        define([], factory);
+    } else {
+        root.LazyLoad = factory(root);
+    }
+}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) {
+
+    "use strict";
+
+    if (typeof define === "function" && define.amd){
+        root = window;
+    }
+
+    const defaults = {
+        src: "data-src",
+        srcset: "data-srcset",
+        selector: ".lazyload",
+        root: null,
+        rootMargin: "0px",
+        threshold: 0
+    };
+
+    /**
+    * Merge two or more objects. Returns a new object.
+    * @private
+    * @param {Boolean}  deep     If true, do a deep (or recursive) merge [optional]
+    * @param {Object}   objects  The objects to merge together
+    * @returns {Object}          Merged values of defaults and options
+    */
+    const extend = function ()  {
+
+        let extended = {};
+        let deep = false;
+        let i = 0;
+        let length = arguments.length;
+
+        /* Check if a deep merge */
+        if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
+            deep = arguments[0];
+            i++;
+        }
+
+        /* Merge the object into the extended object */
+        let merge = function (obj) {
+            for (let prop in obj) {
+                if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+                    /* If deep merge and property is an object, merge properties */
+                    if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") {
+                        extended[prop] = extend(true, extended[prop], obj[prop]);
+                    } else {
+                        extended[prop] = obj[prop];
+                    }
+                }
+            }
+        };
+
+        /* Loop through each object and conduct a merge */
+        for (; i < length; i++) {
+            let obj = arguments[i];
+            merge(obj);
+        }
+
+        return extended;
+    };
+
+    function LazyLoad(images, options) {
+        this.settings = extend(defaults, options || {});
+        this.images = images || document.querySelectorAll(this.settings.selector);
+        this.observer = null;
+        this.init();
+    }
+
+    LazyLoad.prototype = {
+        init: function() {
+
+            /* Without observers load everything and bail out early. */
+            if (!root.IntersectionObserver) {
+                this.loadImages();
+                return;
+            }
+
+            let self = this;
+            let observerConfig = {
+                root: this.settings.root,
+                rootMargin: this.settings.rootMargin,
+                threshold: [this.settings.threshold]
+            };
+
+            this.observer = new IntersectionObserver(function(entries) {
+                Array.prototype.forEach.call(entries, function (entry) {
+                    if (entry.isIntersecting) {
+                        self.observer.unobserve(entry.target);
+                        let src = entry.target.getAttribute(self.settings.src);
+                        let srcset = entry.target.getAttribute(self.settings.srcset);
+                        if ("img" === entry.target.tagName.toLowerCase()) {
+                            if (src) {
+                                entry.target.src = src;
+                            }
+                            if (srcset) {
+                                entry.target.srcset = srcset;
+                            }
+                        } else {
+                            entry.target.style.backgroundImage = "url(" + src + ")";
+                        }
+                    }
+                });
+            }, observerConfig);
+
+            Array.prototype.forEach.call(this.images, function (image) {
+                self.observer.observe(image);
+            });
+        },
+
+        loadAndDestroy: function () {
+            if (!this.settings) { return; }
+            this.loadImages();
+            this.destroy();
+        },
+
+        loadImages: function () {
+            if (!this.settings) { return; }
+
+            let self = this;
+            Array.prototype.forEach.call(this.images, function (image) {
+                let src = image.getAttribute(self.settings.src);
+                let srcset = image.getAttribute(self.settings.srcset);
+                if ("img" === image.tagName.toLowerCase()) {
+                    if (src) {
+                        image.src = src;
+                    }
+                    if (srcset) {
+                        image.srcset = srcset;
+                    }
+                } else {
+                    image.style.backgroundImage = "url('" + src + "')";
+                }
+            });
+        },
+
+        destroy: function () {
+            if (!this.settings) { return; }
+            this.observer.disconnect();
+            this.settings = null;
+        }
+    };
+
+    root.lazyload = function(images, options) {
+        return new LazyLoad(images, options);
+    };
+
+    if (root.jQuery) {
+        const $ = root.jQuery;
+        $.fn.lazyload = function (options) {
+            options = options || {};
+            options.attribute = options.attribute || "data-src";
+            new LazyLoad($.makeArray(this), options);
+            return this;
+        };
+    }
+
+    return LazyLoad;
+});
--- a/js/main.js
+++ b/js/main.js
@ -0,0 +1,161 @@
+
+const urlField = document.getElementById('download_text_box');
+
+const downloadBtn = document.getElementById('download_button');
+
+const dlType = document.getElementById('selector');
+
+const res = document.getElementById('res_selector');
+
+const video_url = document.getElementById('video_link');
+const myTitle = document.getElementById('video_title');
+
+const channel_url = document.getElementById('channel_link');
+const channel_title = document.getElementById('channel_name');
+
+const my_date = document.getElementById('date');
+
+const size_len = document.getElementById('size_len');
+
+const myViews = document.getElementById('views');
+const myKeywords = document.getElementById('keywords');
+const myDescription = document.getElementById('description');
+const myProgress = document.getElementById('progress_bar');
+const myProgressVal = document.getElementById('progress_value');
+function sec2time(given_seconds){
+   var dateObj = new Date(parseInt(given_seconds) * 1000);
+   hours = dateObj.getUTCHours();
+   minutes = dateObj.getUTCMinutes();
+   seconds = dateObj.getSeconds();
+
+   return hours.toString().padStart(2, '0')
+       + ':' + minutes.toString().padStart(2, '0')
+       + ':' + seconds.toString().padStart(2, '0');
+
+}
+function progress2page()
+{
+   var xmlhttp = new XMLHttpRequest();
+
+
+xmlhttp.onreadystatechange = function() {
+  if (this.readyState == 4 && this.status == 200) {
+    var myData = JSON.parse(this.responseText);
+    var progressStr=myData.Progress.toString() + '%';
+    var progressData = myData.Progress;
+    //var fileLength = formatBytes(myData.Length);
+    var title = myData.Saved.Title;
+    var uploadDate = new Date(myData.Saved.UploadDate);
+    var id = myData.Saved.Id;
+    var atitle = myData.Saved.AuthorTitle;
+    var acid = myData.Saved.AuthorChannelId;
+    var desc = myData.Saved.Description;
+    //var dur = sec2time(myData.Saved.Duration);
+    var views = myData.Saved.Views;
+    var likes = myData.Saved.Likes;
+    var dislikes = myData.Saved.Dislikes;
+    myProgress.setAttribute("value", progressData.toString());
+    myProgressVal.textContent = progressStr;
+    
+    myDescription.textContent = desc;
+    myTitle.textContent = title;
+    channel_title.textContent = atitle;
+    myViews.textContent = views.toString() + " view(s) - " + likes.toString() + " like(s) - " + dislikes.toString() + " dislikes";
+   
+    channel_url.href = "https://www.youtube.com/channel/" + acid;
+    video_url.href = "https://www.youtube.com/watch?v=" + id;
+    
+    my_date.textContent = (uploadDate.getMonth() + 1).toString() + '/' + uploadDate.getDate().toString() + '/' + uploadDate.getFullYear().toString();
+      let kw = "";  
+    myData.Saved.Keywords.forEach((item, index) => {
+         if(index == 0)
+         {
+            kw = item;
+         }else{
+            kw += ", " + item;
+         }
+
+      });
+      
+      keywords.textContent = kw;
+   }
+   //if(!(fileLength === undefined || dur ))
+   {
+      //size_len.textContent = fileLength + " - " + dur;
+   }
+};
+xmlhttp.open("GET", "api/Progress", true);
+xmlhttp.send();
+}
+
+function formatBytes(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}
+downloadBtn.addEventListener('click',()=>{
+   
+    let url =urlField.value;
+    
+    let opt = parseInt(dlType.value);
+    
+   if(opt == 0)
+   {
+         
+         var req = new XMLHttpRequest();
+         req.open("GET","api/AddVideoRes/" + res.value + '/' + url);
+         req.send(null);
+   }
+   if(opt == 1)
+   {
+      var req = new XMLHttpRequest();
+      req.open("GET","api/AddPlaylistRes/" + res.value + '/' + url);
+      req.send(null);
+   }
+   if(opt == 2)
+   {
+      var req = new XMLHttpRequest();
+      req.open("GET","api/AddChannelRes/" + res.value + '/' + url);
+      req.send(null);
+   }
+   if(opt == 3)
+   {
+      var req = new XMLHttpRequest();
+         req.open("GET","api/AddUserRes/" + res.value + '/' + url);
+         req.send(null);
+          
+   }         
+        
+    
+
+});
+function yturl(url){
+   if(url.length == 11)
+   {
+      return url;
+   }
+   var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+
+   url = (decodeURIComponent(url));
+   return (url.match(p)) ? RegExp.$1 : false ;
+   
+}
+
+function play_video()
+{
+   let url =yturl(urlField.value);
+   let resval=parseInt(res.value);
+   let v = "";
+   if(resval == 0)
+   {
+      v = "Converted";
+   }
+   if(resval == 1)
+   {
+      v="NotConverted";
+   }
+   if(resval == 2)
+   {
+      v="Audio";
+   }
+   // "api/Storage/File/" + v + '/' + url + ".mp4"
+
+   window.open("api/Storage/File/" + v + '/' + url + ".mp4");
+}
+setInterval(progress2page, 3000); 
--- a/js/new_main.js
+++ b/js/new_main.js
@ -0,0 +1,146 @@
+
+const urlField = document.getElementById('download_text_box');
+
+const downloadBtn = document.getElementById('download_button');
+
+const dlType = document.getElementById('selector');
+
+const res = document.getElementById('res_selector');
+
+const video_url = document.getElementById('video_link');
+
+
+const channel_url = document.getElementById('channel_link');
+
+
+const my_date = document.getElementById('date');
+
+const size_len = document.getElementById('size_len');
+
+const myViews = document.getElementById('views');
+const myKeywords = document.getElementById('keywords');
+const myDescription = document.getElementById('description');
+const myProgress = document.getElementById('progress_bar');
+const myProgressVal = document.getElementById('progress_value');
+function sec2time(given_seconds){
+   var dateObj = new Date(parseInt(given_seconds) * 1000);
+   hours = dateObj.getUTCHours();
+   minutes = dateObj.getUTCMinutes();
+   seconds = dateObj.getSeconds();
+
+   return hours.toString().padStart(2, '0')
+       + ':' + minutes.toString().padStart(2, '0')
+       + ':' + seconds.toString().padStart(2, '0');
+
+}
+function progress2page()
+{
+   var xmlhttp = new XMLHttpRequest();
+
+
+xmlhttp.onreadystatechange = function() {
+  if (this.readyState == 4 && this.status == 200) {
+    var myData = JSON.parse(this.responseText);
+    var progressStr=myData.Progress.toString() + '%';
+    var progressData = myData.Progress;
+    var fileLength = formatBytes(myData.Length);
+    var title = myData.Saved.Title;
+    var uploadDate = new Date(myData.Saved.UploadDate);
+    var id = myData.Saved.Id;
+    var atitle = myData.Saved.AuthorTitle;
+    var acid = myData.Saved.AuthorChannelId;
+    var desc = myData.Saved.Description;
+    var dur = sec2time(myData.Saved.Duration);
+    var views = myData.Saved.Views;
+    var likes = myData.Saved.Likes;
+    var dislikes = myData.Saved.Dislikes;
+   
+    
+   myDescription.textContent = desc;
+    video_url.textContent = title;
+    channel_url.textContent = atitle;
+    myViews.textContent = views.toString() + " view(s) - " + likes.toString() + " like(s) - " + dislikes.toString() + " dislikes";
+   
+    channel_url.href = "https://www.youtube.com/channel/" + acid;
+    video_url.href = "https://www.youtube.com/watch?v=" + id;
+    
+    my_date.textContent = (uploadDate.getMonth() + 1).toString() + '/' + uploadDate.getDate().toString() + '/' + uploadDate.getFullYear().toString();
+      let kw = "";  
+    myData.Saved.Keywords.forEach((item, index) => {
+         if(index == 0)
+         {
+            kw = item;
+         }else{
+            kw += ", " + item;
+         }
+
+      });
+      
+      keywords.textContent = kw;
+      myProgress.setAttribute("aria-valuenow", progressData.toString());
+      myProgress.setAttribute("style", "width: "+ progressData.toString() +"%;" );
+      
+   }
+   //if(!(fileLength === undefined || dur ))
+   {
+      //size_len.textContent = fileLength + " - " + dur;
+   }
+};
+xmlhttp.open("GET", "api/Progress", true);
+xmlhttp.send();
+}
+
+function formatBytes(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}
+downloadBtn.addEventListener('click',()=>{
+   
+    let url =urlField.value;
+    
+    let opt = parseInt(dlType.value);
+    
+   if(opt == 0)
+   {
+         
+         var req = new XMLHttpRequest();
+         req.open("GET","api/AddVideoRes/" + res.value + '/' + url);
+         req.send(null);
+   }
+   if(opt == 1)
+   {
+      var req = new XMLHttpRequest();
+      req.open("GET","api/AddPlaylistRes/" + res.value + '/' + url);
+      req.send(null);
+   }
+   if(opt == 2)
+   {
+      var req = new XMLHttpRequest();
+      req.open("GET","api/AddChannelRes/" + res.value + '/' + url);
+      req.send(null);
+   }
+   if(opt == 3)
+   {
+      var req = new XMLHttpRequest();
+         req.open("GET","api/AddUserRes/" + res.value + '/' + url);
+         req.send(null);
+          
+   }         
+   if(opt == 4)
+   {
+       window.open("api/Storage/VideoRes/" + res.value + '/' + yturl(url),"_blank");
+   }
+    
+
+});
+function yturl(url){
+   if(url.length == 11)
+   {
+      return url;
+   }
+   var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+
+   url = (decodeURIComponent(url));
+   return (url.match(p)) ? RegExp.$1 : false ;
+   
+}
+
+
+setInterval(progress2page, 3000); 
--- a/js/popper.min.js
+++ b/js/popper.min.js
--- a/js/search.js
+++ b/js/search.js
@ -0,0 +1,190 @@
+const search_list = document.getElementById('search_list');
+const text_field = document.getElementById('text_field');
+const button = document.getElementById('search_button');
+
+button.addEventListener('click', ()=>{
+    search(text_field.value);
+});
+
+function addVideo(id,title)
+{
+    let row = document.createElement('tr');
+    let image_col = document.createElement('td');
+    let title_col = document.createElement('td');
+    let type_col = document.createElement('td');
+    let id_col = document.createElement('td');
+    let res_col = document.createElement('td');
+   
+    // image
+    let img_link = document.createElement('a');
+    img_link.href = "api/AddVideo/" + id;
+    let img = document.createElement('img');
+    img.src = "api/Storage/File/Thumbnails/120x90/" + id + ".jpg";
+    img.alt = title;
+    img.width = 128;
+    img.height = 72;
+    img_link.appendChild(img);
+    image_col.appendChild(img_link);
+    row.appendChild(image_col);
+
+    //title
+    let title_link = document.createElement('a');
+    title_link.href="api/AddVideo/" + id;
+    title_link.textContent = title;
+    title_col.appendChild(title_link);
+    row.appendChild(title_col);
+
+    //type constant
+    type_col.textContent = "Video";
+    row.appendChild(type_col);
+
+    //id
+    id_col.textContent = id;
+    row.appendChild(id_col);
+    //other res
+    let link0 = document.createElement('a');
+    let sep = document.createElement('a');
+    let link1 = document.createElement('a');
+    link0.textContent = "Highest";
+    link0.href="api/AddVideo/0/" + id;
+    res_col.appendChild(link0);
+    sep.textContent = "|";
+    res_col.appendChild(sep);
+    link1.textContent = "Audio Only";
+    link1.href="api/AddVideo/2/" + id;
+    res_col.appendChild(link1);
+    row.appendChild(res_col)
+    //append to list
+    search_list.appendChild(row);
+}
+function addPlaylist(id,title)
+{
+    let row = document.createElement('tr');
+    let image_col = document.createElement('td');
+    let title_col = document.createElement('td');
+    let type_col = document.createElement('td');
+    let id_col = document.createElement('td');
+    let res_col = document.createElement('td');
+    // image
+    let img_link = document.createElement('a');
+    img_link.href = "api/AddPlaylist/" + id;
+    let img = document.createElement('img');
+    img.src = "api/Storage/File/Thumbnails/196x110/" + id + ".jpg";
+    img.alt = title;
+    img.width = 128;
+    img.height = 72;
+    img_link.appendChild(img);
+    image_col.appendChild(img_link);
+    row.appendChild(image_col);
+
+    //title
+    let title_link = document.createElement('a');
+    title_link.href="api/AddPlaylist/" + id;
+    title_link.textContent = title;
+    title_col.appendChild(title_link);
+    row.appendChild(title_col);
+
+    //type constant
+    type_col.textContent = "Playlist";
+    row.appendChild(type_col);
+
+    //id
+    id_col.textContent = id; 
+    row.appendChild(id_col);
+    //other resolutions
+    let link0 = document.createElement('a');
+    let sep = document.createElement('a');
+    let link1 = document.createElement('a');
+    link0.textContent = "Highest";
+    link0.href="api/AddPlaylist/0/" + id;
+    res_col.appendChild(link0);
+    sep.textContent = "|";
+    res_col.appendChild(sep);
+    link1.textContent = "Audio Only";
+    link1.href="api/AddPlaylist/2/" + id;
+    res_col.appendChild(link1);
+    row.appendChild(res_col)
+
+   
+    //append to list
+    search_list.appendChild(row);
+}
+function addChannel(id,title)
+{
+    let row = document.createElement('tr');
+    let image_col = document.createElement('td');
+    let title_col = document.createElement('td');
+    let type_col = document.createElement('td');
+    let id_col = document.createElement('td');
+    let res_col = document.createElement('td');
+    // image
+    let img_link = document.createElement('a');
+    img_link.href = "api/AddChannel/" + id;
+    let img = document.createElement('img');
+    img.src = "api/Storage/File/Thumbnails/900x900/" + id + ".jpg";
+    img.alt = title;
+    img.width = 128;
+    img.height = 72;
+    img_link.appendChild(img);
+    image_col.appendChild(img_link);
+    row.appendChild(image_col);
+
+    //title
+    let title_link = document.createElement('a');
+    title_link.href="api/AddChannel/" + id;
+    title_link.textContent = title;
+    title_col.appendChild(title_link);
+    row.appendChild(title_col);
+
+    //type constant
+    type_col.textContent = "Channel";
+    row.appendChild(type_col);
+
+    //id
+    id_col.textContent = id; 
+    row.appendChild(id_col);
+    //other resolutions
+    let link0 = document.createElement('a');
+    let sep = document.createElement('a');
+    let link1 = document.createElement('a');
+    link0.textContent = "Highest";
+    link0.href="api/AddChannel/0/" + id;
+    res_col.appendChild(link0);
+    sep.textContent = "|";
+    res_col.appendChild(sep);
+    link1.textContent = "Audio Only";
+    link1.href="api/AddChannel/2/" + id;
+    res_col.appendChild(link1);
+    row.appendChild(res_col)
+
+   
+    //append to list
+    search_list.appendChild(row);
+}
+function search(query){
+    search_list.textContent = '';
+    var xmlhttp = new XMLHttpRequest();
+
+
+    xmlhttp.onreadystatechange = function() {
+    
+        if (this.readyState == 4 && this.status == 200) {
+                var myData = JSON.parse(this.responseText);
+                myData.forEach((item, index) => {
+                if(item.Kind == 0){
+                    addVideo(item.Id,item.Title);
+                }
+                if(item.Kind == 1)
+                {
+                    addPlaylist(item.Id,item.Title);
+                }
+                if(item.Kind == 2){
+                    addChannel(item.Id,item.Title);
+                }
+            });
+        };
+    };
+    
+  xmlhttp.open("GET", "api/Search/" + encodeUri(query), true);
+    xmlhttp.send();
+}
--- a/js/spa.js
+++ b/js/spa.js
@ -0,0 +1,389 @@
+settings = {
+    defaultPage: "home",
+    showThumbnails: true,
+    load: function()
+    {
+        var data=localStorage.getItem('settings');
+        if(data != null)
+        {
+            cloneObject(settings,JSON.parse(data));
+        }
+        
+    },
+    save: function()
+    {
+        localStorage.setItem('settings', JSON.stringify(settings));
+
+    }
+};
+function cloneObject(target, source) {
+    if (!source || !target || typeof source !== "object" || typeof target !== "object")
+        throw new TypeError("Invalid argument");
+
+    for (var p in source)
+        if (source.hasOwnProperty(p))
+            if (source[p] && typeof source[p] === "object")
+                if (target[p] && typeof target[p] === "object")
+                    cloneObject(target[p], source[p]);
+                else
+                    target[p] = source[p];
+            else 
+                target[p] = source[p];
+}
+const app= {
+    
+    pages: [],
+    show: new Event('show'),
+    init: function()
+    {
+        myModal = new bootstrap.Modal(document.getElementById('modal1'));
+        settings.load();
+        var starting_page_name = settings.defaultPage;
+        const enable_thumb= document.getElementById("enable_thumbnails");
+        
+      
+        enable_thumb.checked=settings.showThumbnails;
+        enable_thumb.addEventListener('input',(item)=>{
+            settings.showThumbnails=item.target.checked;
+            settings.save();
+        });
+        
+        const starting_page = document.getElementById("starting_page");
+        app.pages = document.querySelectorAll('.page');
+        app.pages.forEach((pg) =>{
+            pg.addEventListener('show',app.pageShown);
+        })
+        document.getElementById(starting_page_name).classList.add('active');
+        document.querySelectorAll('.spalnk').forEach((link)=> {
+            link.addEventListener('click', app.nav);
+            var pageOption = document.createElement("option");
+            starting_page.appendChild(pageOption);
+            var pageLink = link.getAttribute('data-target');
+            var pageName = link.innerText;
+            if(pageName == "Tesses YouTube Downloader")
+            {
+                pageName = "Home";
+            }
+            pageOption.innerText = pageName;
+            pageOption.value = pageLink;
+            if(pageLink == settings.defaultPage)
+            {
+               
+                history.replaceState({},pageName,'#' + pageLink);
+              
+            }
+            
+            
+        })
+        starting_page.addEventListener('input',(event)=>{
+            settings.defaultPage=event.target.value;
+            settings.save();
+        })
+        starting_page.value=settings.defaultPage;
+        window.addEventListener('popstate',app.poppin);
+        if(settings.defaultPage == 'videos')
+        {
+            list_videos();
+        }
+        if(settings.defaultPage == 'playlists')
+        {
+            list_playlists();
+        }
+    },
+    nav: function(ev) {
+        ev.preventDefault();
+        let currentPage = ev.target.getAttribute('data-target');
+        document.querySelector('.active').classList.remove('active');
+        document.getElementById(currentPage).classList.add('active');
+        console.log(currentPage);
+        history.pushState({},currentPage,`#${currentPage}`)
+        document.getElementById(currentPage).dispatchEvent(app.show);
+    },
+    pageShown: function(ev)
+    {
+        let hash=location.hash.replace('#','');
+
+        if(hash == 'videos')
+        {
+            list_videos();
+        }
+        if(hash == 'playlists')
+        {
+            list_playlists();
+        }
+       
+    },
+    poppin: function(ev)
+    {
+        let hash=location.hash.replace('#','');
+        let currentPage = ev.target.getAttribute('data-target');
+        document.querySelector('.active').classList.remove('active');
+        document.getElementById(hash).classList.add('active');
+        console.log(hash);
+       // history.pushState({},currentPage,`#${currentPage}`)
+        document.getElementById(currentPage).dispatchEvent(app.show);
+    }
+}
+function get_view_count(views)
+{
+    if(views > 1000000000)
+    {
+        
+        return Math.round(views/1000000000).toString() + "B";
+    }
+    if(views > 1000000)
+    {
+        
+        return Math.round(views/1000000).toString() + "M";
+    }
+    if(views > 1000)
+    {
+        
+        return Math.round(views/1000).toString() + "K";
+    }
+    return views.toString();
+}
+function removeAllChildNodes(parent) {
+    while (parent.firstChild) {
+        parent.removeChild(parent.firstChild);
+    }
+}
+function add_playlist(vid_list,item)
+{
+    
+    var vid_template = document.getElementById("video_template");
+    var xmlhttp2 = new XMLHttpRequest();
+                xmlhttp2.onreadystatechange = function() {
+                  if (this.readyState == 4 && this.status == 200) {
+                    var myData2 = JSON.parse(this.responseText);
+                        //this is a video
+                        var id = myData2.Id;
+                        var title=myData2.Title;
+                        var author = myData2.AuthorTitle;
+                        var views = myData2.Videos.length.toString() + " Videos";
+                        
+                        
+
+                        var video_element = vid_template.content.cloneNode(true);
+                        var video_link=video_element.querySelector(".video_link");
+                        video_link.innerText = title;
+                        video_link.href="#";
+                        video_link.setAttribute('data-id',id);
+                        video_link.addEventListener("click",(evt)=>{
+                            evt.preventDefault();
+                           
+                            document.querySelector('.active').classList.remove('active');
+                            document.getElementById('view_videos_list').classList.add('active');
+                            console.log('view_videos_list');
+                            history.pushState({},'view_videos_list','#view_videos_list');
+                            document.getElementById('view_videos_list').dispatchEvent(app.show);
+                            list_playlist(evt.target.getAttribute('data-id'));
+                        })
+                        var video_thumbnail=video_element.querySelector(".image");
+                        if(settings.showThumbnails){
+                            if(myData2.videos.length > 0){
+                            video_thumbnail.setAttribute("src","api/Storage/File/Thumbnails/168x94/" + myData2.Videos[0] + ".jpg");
+                            }
+                        }
+                        var video_views = video_element.querySelector(".views");
+                        video_views.innerText = views;
+                        var video_author = video_element.querySelector(".video_author");
+                        video_author.innerText = author;
+                        
+                        vid_list.appendChild(video_element);
+                       
+                  }
+                };
+                xmlhttp2.open("GET", "api/Storage/File/Playlist/" + item, true);
+                xmlhttp2.send();
+}
+function list_playlist(id)
+{
+    console.log(id);
+    console.log("list_playlist");
+    var xmlhttp = new XMLHttpRequest();
+    var vid_list= document.getElementById("videos_list_view");
+    
+    removeAllChildNodes(vid_list);
+
+
+    xmlhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+          console.log("got /api/Storage/GetFiles/Playlist");
+        var myData = JSON.parse(this.responseText);
+            myData.Videos.forEach((item)=>{
+                try {
+                    add_video(vid_list,item + '.json');
+                } catch (error) {
+                    
+                }
+                
+            });
+          
+       }
+       
+    };
+    xmlhttp.open("GET", "api/Storage/File/Playlist/" + id + ".json", true);
+    xmlhttp.send();
+}
+
+function close_modal()
+{
+    myModal.hide();
+}
+
+function list_playlists()
+{
+    console.log("list_playlist");
+    var xmlhttp = new XMLHttpRequest();
+    var vid_list= document.getElementById("playlists_list");
+    
+    try{
+    removeAllChildNodes(vid_list);
+    }catch(er)
+    {
+
+    }
+
+    xmlhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+          console.log("got /api/Storage/GetFiles/Playlist");
+        var myData = JSON.parse(this.responseText);
+            myData.forEach((item)=>{
+                add_playlist(vid_list,item);
+            });
+          
+       }
+       
+    };
+    xmlhttp.open("GET", "api/Storage/GetFiles/Playlist", true);
+    xmlhttp.send();
+}
+var myModal;
+var vtitle_modal;
+function video_dialog_show(id,title)
+{
+    const vid = document.getElementById('video_id_modal');
+    const vtitle = document.getElementById('video_title_modal');
+    vid.value = id;
+    vtitle.innerText=title;
+    vtitle_modal=title;
+    
+    myModal.show();
+ 
+}
+function play()
+{
+    const rbs = document.querySelectorAll('input[name="res"]');
+            let selectedValue;
+            for (const rb of rbs) {
+                if (rb.checked) {
+                    selectedValue = rb.value;
+                    break;
+                }
+            }
+            const vid = document.getElementById('video_id_modal');
+            
+            var ar = ["Converted","NotConverted","Audio"];
+           
+            window.open('/api/Storage/File/' + ar[parseInt(selectedValue)] + '/' + vid.value + '.mp4',
+            vtitle_modal,
+            "resizable,scrollbars"
+          );
+            close_modal();
+}
+function download()
+{
+    const rbs = document.querySelectorAll('input[name="res"]');
+    let selectedValue;
+    for (const rb of rbs) {
+        if (rb.checked) {
+            selectedValue = rb.value;
+            break;
+        }
+    }
+    const vid = document.getElementById('video_id_modal');
+    window.open('/api/Storage/VideoRes/' + selectedValue + '/' + vid.value,'_blank');
+    close_modal();
+}
+function add_video(vid_list,item)
+{
+    var vid_template = document.getElementById("video_template");
+    var xmlhttp2 = new XMLHttpRequest();
+                xmlhttp2.onreadystatechange = function() {
+                  if (this.readyState == 4 && this.status == 200) {
+                    var myData2 = JSON.parse(this.responseText);
+                        //this is a video
+                        var id = myData2.Id;
+                        var title=myData2.Title;
+                        var author = myData2.AuthorTitle;
+                        var views = get_view_count(myData2.Views) + " Views";
+                        var uploadDate= new Date(myData2.UploadDate);
+                        let myVid=id;
+                        let myTitle=title;
+
+                        var video_element = vid_template.content.cloneNode(true);
+                        var video_link=video_element.querySelector(".video_link");
+                        video_link.innerText = title;
+
+                        video_link.href="javascript:void";
+                        video_link.addEventListener('click',(e)=>{
+                            e.preventDefault();
+                            video_dialog_show(myVid,myTitle);
+                        });
+                        var video_thumbnail=video_element.querySelector(".image");
+                        if(settings.showThumbnails){
+                            video_thumbnail.setAttribute("src","api/Storage/File/Thumbnails/168x94/" + id + ".jpg");
+                            
+                        }else{
+                            //video_element.removeChild(video_thumbnail);
+                        }
+                        var video_views = video_element.querySelector(".views");
+                        video_views.innerText = views;
+                        var video_author = video_element.querySelector(".video_author");
+                        video_author.innerText = author;
+                        var video_date = video_element.querySelector(".date");
+                        video_date.innerText = (uploadDate.getMonth() + 1).toString() + '/' + uploadDate.getDate().toString() + '/' + uploadDate.getFullYear().toString();
+
+                        vid_list.appendChild(video_element);
+                       
+                  }
+                };
+                xmlhttp2.open("GET", "api/Storage/File/Info/" + item, true);
+                xmlhttp2.send();
+}
+function list_videos()
+{
+    console.log("list_videos");
+    var xmlhttp = new XMLHttpRequest();
+    var vid_list= document.getElementById("videos_list");
+    
+    removeAllChildNodes(vid_list);
+
+
+    xmlhttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+          console.log("got /api/Storage/GetFiles/Info");
+        var myData = JSON.parse(this.responseText);
+            myData.forEach((item)=>{
+                add_video(vid_list,item);
+            });
+          
+       }
+       
+    };
+    xmlhttp.open("GET", "api/Storage/GetFiles/Info", true);
+    xmlhttp.send();
+}
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+      navigator.serviceWorker.register('sw.js').then(function(registration) {
+        // Registration was successful
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+      }, function(err) {
+        // registration failed :(
+        console.log('ServiceWorker registration failed: ', err);
+      });
+    });
+  }
+document.addEventListener("DOMContentLoaded",app.init);
--- a/legacy.html
+++ b/legacy.html
@ -0,0 +1,60 @@
+<!DOCTYPE html> 
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css" crossorigin="use-credentials">
+    <link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
+    <title>Tesses YouTube Downloader</title>
+
+</head>
+<body>
+        <div class="download_box" id="download_box">
+            <input type="text" class="download_text_box" id="download_text_box"  placeholder="https://www.youtube.com/watch?v=il9nqWw9W3Y"/>
+             <select class="selector" id="selector">
+                <option value=0>Video</option>
+                <option value=1>Playlist</option>
+                <option value=2>Channel</option>
+                <option value=3>User</option>
+            </select>
+            <select class="res_selector" id="res_selector">
+                <option value=1>Default Resolution</option>
+                <option value=0>Max Resolution</option>
+                <option value=2>Audio Only</option>
+            </select>
+            <button class="download_button" id="download_button">Download</button>
+            
+            <br>
+            <a href="javascript:play_video();">Play Video</a>|
+            <a href="/search.html">Search</a>|
+            <a href="/upload.html">Upload</a>|
+            <a href="/">Modern</a>
+            
+            <br>
+            <hr>
+            <progress class="progress_bar" id="progress_bar" value="0" max="100"></progress>
+            
+            <span class="progress_value" id="progress_value">0%</span>
+            
+            <br>
+            
+            <hr>
+            <a id="video_link" href="/"><h2 id="video_title" class="video_title">No Title</h2></a>
+            <a id="channel_link" href="/"><h4 id="channel_name" class="channel_name">No Channel</h4></a>
+            <hr>
+            <h3 id="date">00/00/0000</h3> 
+            <!--<h3 id="size_len">0MB - 00:00:00</h3>-->
+            <h3 id="views">42 views - 0 likes - 0 dislikes</h3>
+            
+            <hr>
+            Keywords: <span id="keywords"></span>
+            <hr>
+            <p id="description">
+                
+            </p>
+        </div>
+             <script src="js/main.js"></script>
+      
+</body>
+</html>
--- a/manifest.webmanifest
+++ b/manifest.webmanifest
@ -0,0 +1,59 @@
+{
+  "name": "TYTD on Mikes Wii",
+  "short_name": "TYTD Wii",
+  "start_url": "./",
+  "display": "standalone",
+  "background_color": "#ff0000",
+  "description": "Download YouTube Videos",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
--- a/search.html
+++ b/search.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css" crossorigin="use-credentials">
+  
+    <title>Search Tesses YouTube Downloader</title>
+</head>
+
+<body>
+    
+    <input id="text_field" style="width:75%" type="text" placeholder="Search YouTube"/><button id="search_button">Search</button>
+    <br>
+    <br>
+    <hr>
+
+    <table style="width:100%">
+        <tr>
+            <th>Thumbnail</th>
+            <th>Title</th>
+            <th>Type</th>
+            <th>Id</th>
+            <th>Other Resolutions</th>
+        </tr>
+        <div id="search_list">
+      
+        
+        </div>
+    </table>
+    <script src="js/search.js"></script>
+</body>
+</html>
--- a/sw.js
+++ b/sw.js
@ -0,0 +1,41 @@
+var CACHE_NAME = 'tytd-cache-v1';
+var urlsToCache = [
+  './',
+  './css/styles.css',
+  './css/bootstrap.min.css',
+  './js/bootstrap.min.js',
+  './js/main.js',
+  './js/new_main.js',
+  './js/search.js',
+  './js/spa.js',
+  './js/jquery.js',
+  './search.html',
+  './upload.html',
+  './legacy.html'
+];
+
+self.addEventListener('install', function(event) {
+  // Perform install steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache.map(url => new Request(url,{credentials: 'same-origin'})));
+      })
+  );
+});
+self.addEventListener('fetch',function(event) {
+    event.respondWith(
+
+      caches.match(event.request)
+        .then(function(response) {
+          // Cache hit - return response
+          
+          if (response) {
+            return response;
+          }
+          return fetch(event.request);
+        }
+      )
+    );
+  });
--- a/upload.html
+++ b/upload.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
+    <title>Upload Files</title>
+</head>
+<body>
+        <h1>Upload random files</h1>
+        <form id = "uploadbanner" method = "post" action = "api/upload/">
+        <input id = "fileupload" type = "file" />
+        <input type = "submit" value = "submit" id = "submit" />
+        </form>
+        <h1>Upload downloadlist</h1>
+         <form id = "uploadbanner2" method = "post" action = "api/AddItems">
+        <input id = "fileupload" type = "file" />
+        <input type = "submit" value = "submit" id = "submit" />
+        </form>
+
+</body>
+</html>