updated directory structure to fix root Service Worker issues and performance improvements

css/markdown.css

@@ -0,0 +1,111 @@
+/* markdown.css */
+
+/* 
+  Give the markdown container a standard text color 
+  that is easy to read on a white background 
+*/
+#markdown-container {
+  color: #333;
+  line-height: 1.6;
+  /* Padding & border radius come from your inline Tailwind classes */
+}
+
+/* Headings */
+#markdown-container h1 {
+  font-size: 1.875rem; /* ~ text-2xl in Tailwind */
+  font-weight: 700;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem;
+  color: #111;
+}
+
+#markdown-container h2 {
+  font-size: 1.5rem; /* ~ text-xl */
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  margin-top: 1.25rem;
+  color: #222;
+}
+
+#markdown-container h3 {
+  font-size: 1.25rem; /* ~ text-lg */
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  margin-top: 1rem;
+}
+
+#markdown-container h4,
+#markdown-container h5,
+#markdown-container h6 {
+  font-weight: 600;
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Paragraphs */
+#markdown-container p {
+  margin-bottom: 1rem;
+}
+
+/* Lists */
+#markdown-container ul,
+#markdown-container ol {
+  margin-left: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+#markdown-container li {
+  margin-bottom: 0.5rem;
+}
+
+/* Blockquotes */
+#markdown-container blockquote {
+  border-left: 4px solid #ccc;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #555;
+}
+
+/* Inline code */
+#markdown-container code {
+  background-color: #f6f8fa;
+  color: #d63384;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-size: 0.875rem;
+}
+
+/* Code blocks */
+#markdown-container pre {
+  background-color: #f6f8fa;
+  color: #333;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+}
+
+/* Links */
+#markdown-container a {
+  color: #bf5af2; /* pick a link color or use var(--color-primary) if you like */
+  text-decoration: none;
+}
+
+#markdown-container a:hover {
+  text-decoration: underline;
+}
+
+/* Horizontal Rule */
+#markdown-container hr {
+  border: 0;
+  border-top: 1px solid #e5e7eb;
+  margin: 2rem 0;
+}
+
+/* Images */
+#markdown-container img {
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 1rem;
+}

css/style.css

@@ -0,0 +1,517 @@
+:root {
+  --color-bg: #0f172a;
+  --color-card: #1e293b;
+  --color-primary: #fe0032;
+  --color-secondary: #ff93a5;
+  --color-text: #f8fafc;
+  --color-muted: #94a3b8;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+/* Core Styles */
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+header {
+  margin-bottom: 2rem;
+  padding: 1rem 0;
+  display: flex;
+  justify-content: flex-start;
+}
+
+header img {
+  height: 6rem;
+  width: auto;
+  max-width: none;
+}
+
+.container {
+  max-width: 1480px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+/* Video Grid */
+#videoList {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 2rem;
+  padding: 1.5rem 0;
+}
+
+/* Video Cards */
+.video-card {
+  background-color: var(--color-card);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-md);
+}
+
+.video-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.video-card .thumbnail-container {
+  position: relative;
+  padding-top: 56.25%;
+  background-color: #0f172a;
+}
+
+.video-card img.thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-card .details {
+  padding: 1.25rem;
+}
+
+.video-card h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 0.75rem;
+}
+
+/* Modal Player */
+#playerModal {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.9); /* You can adjust opacity if needed */
+  z-index: 50;
+  display: none; /* Hidden by default */
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); /* For Safari support */
+}
+
+#nostrFormModal,
+#profileModal,
+#uploadModal {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); /* For Safari */
+}
+
+/* If you ever want to show it, add ".flex" class dynamically */
+#playerModal.flex {
+  display: flex;
+}
+
+/* Modal Content Container */
+.modal-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #0f172a;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Video Container */
+.video-container {
+  width: 100%;
+  background-color: black;
+  position: sticky;
+  top: 0;
+  z-index: 51;
+}
+
+/* Modal Video */
+#modalVideo {
+  width: 100%;
+  aspect-ratio: 16/9;
+  background-color: black;
+}
+
+/* Video Info Section */
+.video-info {
+  padding: 1rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Responsive Adjustments */
+@media (min-width: 768px) {
+  #playerModal {
+    padding: 2rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .modal-content {
+    max-width: 64rem;
+    max-height: calc(100vh - 4rem); /* Account for padding */
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .video-container {
+    position: relative;
+  }
+}
+
+/* Mobile-specific styles */
+@media (max-width: 767px) {
+  #playerModal {
+    padding: 0;
+  }
+
+  .modal-content {
+    border-radius: 0;
+  }
+}
+
+/* Custom Scrollbar */
+.video-info::-webkit-scrollbar {
+  width: 8px;
+}
+
+.video-info::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.video-info::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+.video-info::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* Progress Bars */
+.progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  background-color: rgb(255 255 255 / 0.1);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background-color: var(--color-primary);
+  transition: width 0.3s ease-out;
+}
+
+/* Forms & Inputs */
+input,
+textarea {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--color-bg);
+  border: 1px solid rgb(255 255 255 / 0.1);
+  border-radius: 0.5rem;
+  color: var(--color-text);
+  transition: border-color 0.2s;
+}
+
+input:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  ring: 2px var(--color-primary);
+}
+
+/* -------------------------------------------
+   COMMENTED OUT the 'button:not(.icon-button)' 
+   global rule that overrides your circles
+--------------------------------------------
+
+button:not(.icon-button) {
+  padding: 0.75rem 1.5rem;
+  background-color: var(--color-primary);
+  color: white;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+button:not(.icon-button):hover {
+  background-color: var(--color-secondary);
+  transform: translateY(-1px);
+}
+
+button:not(.icon-button):focus {
+  outline: none;
+  ring: 2px var(--color-primary);
+}
+*/
+
+/* Utility Classes */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Notifications */
+/* Base styling without a forced display */
+#errorContainer,
+#successContainer {
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  align-items: center; /* Keep the rest of your styling */
+}
+
+/* When not hidden, display as flex */
+#errorContainer:not(.hidden),
+#successContainer:not(.hidden) {
+  display: flex;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  #videoList {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .container {
+    padding: 0.75rem;
+  }
+}
+
+footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 4rem;
+  padding-top: 2rem;
+}
+
+footer a {
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
+/* Disclaimer Modal Styles */
+#disclaimerModal {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.9);
+  z-index: 50;
+  /* remove display: none; */
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+#disclaimerModal .modal-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg);
+}
+
+#disclaimerModal .modal-scroll {
+  padding: 1.5rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Disclaimer Modal Scrollbar */
+#disclaimerModal .modal-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+#disclaimerModal .modal-scroll::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+#disclaimerModal .modal-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+#disclaimerModal .modal-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* Disclaimer Modal Button Container */
+#disclaimerModal .button-container {
+  padding: 1rem 1.5rem;
+  background-color: #1a2234;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive Adjustments for Disclaimer Modal */
+@media (min-width: 768px) {
+  #disclaimerModal {
+    padding: 2rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #disclaimerModal .modal-scroll {
+    max-height: calc(90vh - 5rem);
+  }
+}
+
+/* Mobile-specific styles for Disclaimer Modal */
+@media (max-width: 767px) {
+  #disclaimerModal {
+    padding: 0;
+  }
+
+  #disclaimerModal .modal-content {
+    min-height: 100vh;
+    border-radius: 0;
+  }
+}
+
+/* Override default button styles for back button */
+.back-button {
+  background: rgba(0, 0, 0, 0.5) !important;
+  padding: 0 !important;
+  color: rgb(209 213 219) !important;
+  transform: none !important;
+}
+
+.back-button:hover {
+  background: rgba(0, 0, 0, 0.7) !important;
+  color: white !important;
+}
+
+/* Modal Container */
+.modal-container {
+  padding: 0;
+}
+
+@media (min-width: 768px) {
+  .modal-container {
+    padding: 2rem;
+  }
+}
+
+/* Video info cards */
+.video-info .bg-gray-800\/50 {
+  background-color: rgb(31 41 55 / 0.5);
+  backdrop-filter: blur(4px);
+}
+
+/* Circular Icon Buttons */
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem; /* 40px */
+  height: 2.5rem; /* 40px */
+  line-height: 0;
+  background-color: #3f3f46; /* Gray 700 */
+  color: #fff;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+.icon-button:hover {
+  background-color: #52525b; /* Gray 600 */
+}
+
+.icon-button:focus,
+.icon-button:active {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.6);
+}
+
+.icon-image {
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+  pointer-events: none;
+}
+
+/* Ratio 16:9 Container */
+.ratio-16-9 {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+  background-color: #1e293b;
+}
+
+.ratio-16-9 > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Sidebar default states */
+#sidebar {
+  /* You can set a default width here for 'expanded' state. */
+  width: 14rem; /* for example */
+}
+
+/* You could define a class for collapsed states on desktop if desired: */
+.sidebar-collapsed {
+  width: 4rem;
+}
+.sidebar-expanded {
+  width: 14rem;
+}
+
+/* Hide text when collapsed. 
+   If you add .sidebar-collapsed to #sidebar, you can hide text like this: */
+.sidebar-collapsed .sidebar-text {
+  display: none;
+}
+
+/* Basic scrolling for the sidebar if it's long */
+#sidebar {
+  overflow-y: auto;
+}
+
+/* The top-level container is already "flex min-h-screen" in index.html.
+   The main content (#app) has "flex-1", so it fills the rest of the space. */
+
+/* Example of customizing the border & background in the sidebar */
+#sidebar hr {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* If you want a smooth transition for showing/hiding the entire sidebar 
+   on mobile (via the "hidden" class), you can do so with a small fade, 
+   but you’ll need a separate approach with absolute positioning or something 
+   if you prefer a sliding effect. */
+
+@media (max-width: 767px) {
+  .sidebar-open {
+    transform: translateX(16rem);
+    transition: transform 0.3s ease;
+  }
+}

css/tailwind.min.css

@@ -0,0 +1 @@
+/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:-moz-focusring{outline:auto}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus-within\:sr-only:focus-within{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.focus-within\:not-sr-only:focus-within{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:sr-only:focus{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-1{top:.25rem;right:.25rem;bottom:.25rem;left:.25rem}.inset-2{top:.5rem;right:.5rem;bottom:.5rem;left:.5rem}.inset-3{top:.75rem;right:.75rem;bottom:.75rem;left:.75rem}.inset-4{top:1rem;right:1rem;bottom:1rem;left:1rem}.inset-5{top:1.25rem;right:1.25rem;bottom:1.25rem;left:1.25rem}.inset-6{top:1.5rem;right:1.5rem;bottom:1.5rem;left:1.5rem}.inset-7{top:1.75rem;right:1.75rem;bottom:1.75rem;left:1.75rem}.inset-8{top:2rem;right:2rem;bottom:2rem;left:2rem}.inset-9{top:2.25rem;right:2.25rem;bottom:2.25rem;left:2.25rem}.inset-10{top:2.5rem;right:2.5rem;bottom:2.5rem;left:2.5rem}.inset-11{top:2.75rem;right:2.75rem;bottom:2.75rem;left:2.75rem}.inset-12{top:3rem;right:3rem;bottom:3rem;left:3rem}.inset-14{topLine truncated