mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2025-09-08 06:58:43 +00:00
added side bar
This commit is contained in:
Keep Creating Online
5
bitvid_logo/home-icon.svg
Normal file
5
bitvid_logo/home-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M12,6.453L21,14.828L21,24L15,24L15,18L9,18L9,24L3,24L3,14.828L12,6.453ZM24,12.148L12,1L0,12.133L1.361,13.598L12,3.73L22.639,13.613L24,12.148Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 656 B |
5
src/assets/svg/about-icon.svg
Normal file
5
src/assets/svg/about-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M12,0C5.373,0 0,5.373 0,12C0,18.627 5.373,24 12,24C18.627,24 24,18.627 24,12C24,5.373 18.627,0 12,0ZM9.967,16.01C10.531,14.221 11.599,12.078 11.788,11.536C12.061,10.749 11.577,10.4 10.048,11.745L9.708,11.105C11.452,9.208 15.043,8.779 13.821,11.718C13.058,13.553 12.512,14.792 12.2,15.748C11.745,17.141 12.894,16.576 14.019,15.537C14.172,15.787 14.222,15.868 14.375,16.156C11.877,18.534 9.104,18.744 9.967,16.01ZM14.709,7.841C14.177,8.294 13.389,8.284 12.948,7.819C12.507,7.354 12.581,6.611 13.112,6.158C13.644,5.705 14.432,5.716 14.873,6.18C15.312,6.646 15.24,7.389 14.709,7.841Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
5
src/assets/svg/default-profile.svg
Normal file
5
src/assets/svg/default-profile.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M12,0C5.373,0 0,5.373 0,12C0,18.627 5.373,24 12,24C18.627,24 24,18.627 24,12C24,5.373 18.627,0 12,0ZM12,22C8.877,22 6.086,20.559 4.251,18.31C4.51,17.722 5.034,17.315 6.118,17.064C8.362,16.546 10.577,16.083 9.511,14.119C6.356,8.299 8.612,5 12,5C15.322,5 17.634,8.177 14.489,14.119C13.454,16.071 15.589,16.535 17.882,17.064C18.964,17.314 19.492,17.719 19.753,18.305C17.917,20.558 15.125,22 12,22Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 909 B |
5
src/assets/svg/explore-icon.svg
Normal file
5
src/assets/svg/explore-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M12,0C18.623,0 24,5.377 24,12C24,18.623 18.623,24 12,24C5.377,24 0,18.623 0,12C0,5.377 5.377,0 12,0ZM12,2C17.519,2 22,6.481 22,12C22,17.519 17.519,22 12,22C6.481,22 2,17.519 2,12C2,6.481 6.481,2 12,2ZM13.476,14.955C14.464,14.55 15.233,13.744 15.592,12.739L18,6L11.328,8.387C10.322,8.747 9.517,9.518 9.112,10.506L6.047,18L13.476,14.955ZM13.354,10.669C13.905,11.22 13.905,12.115 13.354,12.665C12.803,13.216 11.909,13.216 11.358,12.665C10.807,12.115 10.807,11.22 11.358,10.669C11.909,10.118 12.803,10.118 13.354,10.669Z" style="fill:rgb(92,111,138);"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1013 B |
5
src/assets/svg/getting-started-icon.svg
Normal file
5
src/assets/svg/getting-started-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M6.676,9.18C5.25,9.171 3.459,9.944 2.093,11.31C1.572,11.831 1.114,12.439 0.76,13.122C1.992,12.189 3.307,11.897 4.846,12.761C5.299,11.562 5.902,10.343 6.676,9.18ZM14.83,17.323C13.566,18.149 12.324,18.745 11.249,19.165C12.112,20.705 11.82,22.018 10.888,23.25C11.572,22.897 12.179,22.438 12.7,21.916C14.07,20.547 14.844,18.751 14.83,17.323ZM19.957,4.035C19.613,4.011 19.276,4 18.946,4C11.777,4 7.697,9.465 6.213,13.86L10.152,17.8C14.677,16.18 20,12.251 20,5.158C20,4.792 19.986,4.418 19.957,4.035ZM11.717,12.293C11.391,11.968 11.391,11.44 11.717,11.115C12.042,10.789 12.57,10.789 12.895,11.115C13.221,11.441 13.221,11.968 12.895,12.293C12.569,12.619 12.042,12.619 11.717,12.293ZM14.073,9.937C13.422,9.287 13.422,8.231 14.073,7.58C14.724,6.929 15.779,6.929 16.429,7.58C17.08,8.231 17.08,9.286 16.429,9.937C15.779,10.587 14.725,10.587 14.073,9.937ZM1.641,20.315L0.886,19.56L5.226,15.237L5.981,15.992L1.641,20.315ZM5.79,21.862L5.035,21.107L8.064,18.053L8.819,18.808L5.79,21.862ZM0.755,24L-0,23.245L5.373,17.881L6.129,18.636L0.755,24ZM21.838,9.709C21.65,10.327 21.165,10.811 20.547,11C21.165,11.188 21.65,11.672 21.838,12.291C22.027,11.672 22.511,11.188 23.129,11C22.511,10.812 22.027,10.328 21.838,9.709ZM7.183,3.205C6.936,4.015 6.302,4.648 5.493,4.895C6.303,5.142 6.936,5.776 7.183,6.585C7.431,5.776 8.064,5.142 8.873,4.895C8.063,4.648 7.431,4.015 7.183,3.205ZM5.356,0C5.157,0.649 4.65,1.157 4,1.355C4.65,1.554 5.157,2.062 5.356,2.71C5.554,2.061 6.062,1.553 6.71,1.355C6.062,1.157 5.555,0.649 5.356,0ZM10.743,0C10.427,1.035 9.616,1.846 8.58,2.163C9.616,2.479 10.427,3.289 10.743,4.326C11.059,3.29 11.87,2.48 12.905,2.163C11.87,1.846 11.06,1.035 10.743,0ZM21.838,13.64C21.522,14.676 20.711,15.486 19.675,15.803C20.711,16.119 21.522,16.965 21.838,18C22.154,16.964 22.965,16.119 24,15.803C22.965,15.486 22.154,14.676 21.838,13.64Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
5
src/assets/svg/github-icon.svg
Normal file
5
src/assets/svg/github-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M12,0C5.374,0 0,5.373 0,12C0,17.302 3.438,21.8 8.207,23.387C8.806,23.498 9,23.126 9,22.81L9,20.576C5.662,21.302 4.967,19.16 4.967,19.16C4.421,17.773 3.634,17.404 3.634,17.404C2.545,16.659 3.717,16.675 3.717,16.675C4.922,16.759 5.556,17.912 5.556,17.912C6.626,19.746 8.363,19.216 9.048,18.909C9.155,18.134 9.466,17.604 9.81,17.305C7.145,17 4.343,15.971 4.343,11.374C4.343,10.063 4.812,8.993 5.579,8.153C5.455,7.85 5.044,6.629 5.696,4.977C5.696,4.977 6.704,4.655 8.997,6.207C9.954,5.941 10.98,5.808 12,5.803C13.02,5.808 14.047,5.941 15.006,6.207C17.297,4.655 18.303,4.977 18.303,4.977C18.956,6.63 18.545,7.851 18.421,8.153C19.191,8.993 19.656,10.064 19.656,11.374C19.656,15.983 16.849,16.998 14.177,17.295C14.607,17.667 15,18.397 15,19.517L15,22.81C15,23.129 15.192,23.504 15.801,23.386C20.566,21.797 24,17.3 24,12C24,5.373 18.627,0 12,0Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
5
src/assets/svg/home-icon.svg
Normal file
5
src/assets/svg/home-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M12,6.453L21,14.828L21,24L15,24L15,18L9,18L9,24L3,24L3,14.828L12,6.453ZM24,12.148L12,1L0,12.133L1.361,13.598L12,3.73L22.639,13.613L24,12.148Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 656 B |
5
src/assets/svg/mobile-sidebar-menu-icon.svg
Normal file
5
src/assets/svg/mobile-sidebar-menu-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M22,16.75C22,16.336 21.664,16 21.25,16L2.75,16C2.336,16 2,16.336 2,16.75C2,17.164 2.336,17.5 2.75,17.5L21.25,17.5C21.664,17.5 22,17.164 22,16.75ZM22,11.75C22,11.336 21.664,11 21.25,11L2.75,11C2.336,11 2,11.336 2,11.75C2,12.164 2.336,12.5 2.75,12.5L21.25,12.5C21.664,12.5 22,12.164 22,11.75ZM22,6.75C22,6.336 21.664,6 21.25,6L2.75,6C2.336,6 2,6.336 2,6.75C2,7.164 2.336,7.5 2.75,7.5L21.25,7.5C21.664,7.5 22,7.164 22,6.75Z" style="fill:rgb(17,24,39);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 933 B |
5
src/assets/svg/roadmap-icon.svg
Normal file
5
src/assets/svg/roadmap-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M23.961,8.429C23.13,9.411 22.347,10.347 22,12.204L22,18.887L18,21.366L18,12.205C17.653,10.348 16.87,9.412 16.039,8.43C15.131,7.355 14,6.019 14,3.801L14.019,3.456L12,2L6.455,6L0,2L0,20L6.455,24L12,20L17.545,24L24,20L24,8.382L23.961,8.429ZM11,18.255L7,21.14L7,8.073L11,5.187L11,18.255ZM20,0C17.9,0 16,1.702 16,3.801C16,6.922 19.188,7.252 20,12C20.812,7.252 24,6.922 24,3.801C24,1.702 22.1,0 20,0ZM20,5.5C19.172,5.5 18.5,4.829 18.5,4C18.5,3.171 19.172,2.5 20,2.5C20.828,2.5 21.5,3.171 21.5,4C21.5,4.829 20.828,5.5 20,5.5Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
5
src/assets/svg/subscriptions-icon.svg
Normal file
5
src/assets/svg/subscriptions-icon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M21.698,10.658L24,12L11.998,19L0,12L2.301,10.658L11.998,16.316L21.698,10.658ZM11.998,21.315L2.301,15.657L0,17L11.998,24L24,17L21.698,15.658L11.998,21.315ZM24,7L11.998,-0L0,7L11.998,14L24,7Z" style="fill:rgb(92,111,138);fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 704 B |
151
src/components/disclaimer.html
Normal file
151
src/components/disclaimer.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!-- Disclaimer Modal (wide, matching other modals) -->
|
||||
<div
|
||||
id="disclaimerModal"
|
||||
class="fixed inset-0 z-50 hidden"
|
||||
style="background: transparent"
|
||||
>
|
||||
<!-- Dark/blur overlay -->
|
||||
<div
|
||||
class="absolute inset-0 z-10"
|
||||
style="
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- Outer container with wide layout, just like content-appeals-form -->
|
||||
<div
|
||||
class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
|
||||
>
|
||||
<!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
|
||||
<div
|
||||
class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
|
||||
>
|
||||
<!-- Sticky top bar, if you want a top heading or 'X' button up here -->
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<!-- If you want an X to close, you can add it here, for example:
|
||||
<button
|
||||
id="closeDisclaimerBtn"
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-gray-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-6">
|
||||
<!-- Scrollable disclaimers area -->
|
||||
<div
|
||||
class="space-y-6 text-gray-300"
|
||||
style="max-height: 70vh; overflow-y: auto"
|
||||
>
|
||||
<!-- Example: Insert your disclaimers here -->
|
||||
|
||||
<div class="flex justify-center mb-8">
|
||||
<img
|
||||
src="assets/svg/bitvid-logo-dark-mode.svg"
|
||||
alt="BitVid Logo"
|
||||
class="h-16"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-white mb-0">Welcome to bitvid</h2>
|
||||
<!-- Warning Alert -->
|
||||
<div
|
||||
class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-yellow-200">
|
||||
This platform is currently in development and only supports Chrome
|
||||
and Firefox-based browsers. Other browsers are not supported at
|
||||
this time. You may encounter bugs or missing features. Give it a
|
||||
sec. Videos might take 10 to 60 seconds to load initially.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
bitvid is a decentralized video platform where content is shared
|
||||
directly between users. We want you to understand a few important
|
||||
points before you continue:
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">Early Access Status</h3>
|
||||
<p class="text-gray-400">
|
||||
Currently, video posting is invite-only as we carefully scale
|
||||
our platform. While anyone can watch videos, content creation is
|
||||
limited to approved creators. This helps us maintain quality
|
||||
content during our early stages.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">
|
||||
Content Responsibility & Moderation
|
||||
</h3>
|
||||
<p class="text-gray-400">
|
||||
While we don't host videos directly, we maintain community
|
||||
standards through access control. Users who violate our
|
||||
guidelines may be blocked from accessing the platform. All
|
||||
content must follow local laws and platform guidelines.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">Platform Status</h3>
|
||||
<p class="text-gray-400">
|
||||
bitvid is a work in progress. Features may change or break, and
|
||||
security improvements are ongoing. Your feedback and patience
|
||||
help us build a better platform.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">Get Involved</h3>
|
||||
<p class="text-gray-400">
|
||||
Are you a developer? We'd love your help! Visit our GitHub
|
||||
repository to contribute to building the future of decentralized
|
||||
video sharing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button at bottom -->
|
||||
<div class="mt-6">
|
||||
<button
|
||||
id="acceptDisclaimer"
|
||||
class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
|
||||
>
|
||||
I Understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
76
src/components/sidebar.html
Normal file
76
src/components/sidebar.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<aside
|
||||
id="sidebar"
|
||||
class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-full -translate-x-full hidden md:translate-x-0 md:block"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<nav class="mt-4">
|
||||
<a
|
||||
href="#view=most-recent-videos"
|
||||
class="flex items-center py-2 px-4 hover:bg-gray-800"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/home-icon.svg"
|
||||
alt="Home"
|
||||
class="w-6 h-6 mr-3 flex-shrink-0"
|
||||
/>
|
||||
<span class="sidebar-text">Home</span>
|
||||
</a>
|
||||
<a
|
||||
href="#view=explore"
|
||||
class="flex items-center py-2 px-4 hover:bg-gray-800"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/explore-icon.svg"
|
||||
alt="Explore"
|
||||
class="w-6 h-6 mr-3 flex-shrink-0"
|
||||
/>
|
||||
<span class="sidebar-text">Explore</span>
|
||||
</a>
|
||||
<a
|
||||
href="#view=subscriptions"
|
||||
class="flex items-center py-2 px-4 hover:bg-gray-800"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/subscriptions-icon.svg"
|
||||
alt="Subscriptions"
|
||||
class="w-6 h-6 mr-3 flex-shrink-0"
|
||||
/>
|
||||
<span class="sidebar-text">Subscriptions</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<hr class="border-gray-700" />
|
||||
<div class="p-4">
|
||||
<nav class="space-y-2">
|
||||
<a
|
||||
href="about.html"
|
||||
class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/about-icon.svg"
|
||||
alt="About"
|
||||
class="w-5 h-5 mr-3"
|
||||
/>
|
||||
<span class="sidebar-text">About</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/PR0M3TH3AN/bitvid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/github-icon.svg"
|
||||
alt="GitHub"
|
||||
class="w-5 h-5 mr-3"
|
||||
/>
|
||||
<span class="sidebar-text">GitHub</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -470,3 +470,48 @@ footer a:hover {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
447
src/index.html
447
src/index.html
@@ -39,13 +39,36 @@
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div
|
||||
id="app"
|
||||
class="container mx-auto px-4 py-8 min-h-screen flex flex-col"
|
||||
>
|
||||
<!--
|
||||
SIDEBAR CONTAINER:
|
||||
The <aside id="sidebar"> inside handles visibility.
|
||||
By default, no special position or z-index on #sidebarContainer.
|
||||
-->
|
||||
<div id="sidebarContainer">
|
||||
<!-- components/sidebar.html gets injected here -->
|
||||
</div>
|
||||
|
||||
<!--
|
||||
MAIN CONTENT:
|
||||
md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
|
||||
On mobile, we also toggle .sidebar-open to shift the entire content.
|
||||
-->
|
||||
<div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="mb-8 flex items-center">
|
||||
<!-- Logo on the left -->
|
||||
<header class="mb-8 flex items-center w-full">
|
||||
<!-- Mobile hamburger button (hidden on md+) -->
|
||||
<!-- New button -->
|
||||
<button
|
||||
id="mobileMenuBtn"
|
||||
class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60]"
|
||||
>
|
||||
<img
|
||||
src="assets/svg/mobile-sidebar-menu-icon.svg"
|
||||
alt="Mobile Sidebar Menu Icon"
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</button>
|
||||
<!-- Logo -->
|
||||
<img
|
||||
src="assets/svg/bitvid-logo-light-mode.svg"
|
||||
alt="BitVid Logo"
|
||||
@@ -77,7 +100,6 @@
|
||||
id="profileButton"
|
||||
class="hidden inline-flex items-center justify-center w-12 h-12 rounded-full bg-black text-white text-sm leading-none hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
|
||||
>
|
||||
<!-- This inner DIV is just an avatar container, if you like -->
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden">
|
||||
<img
|
||||
id="profileAvatar"
|
||||
@@ -102,10 +124,10 @@
|
||||
class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
|
||||
></div>
|
||||
|
||||
<!-- Main container for dynamic views (most-recent-videos.html, etc.) -->
|
||||
<!-- Dynamic views (like most-recent-videos.html, etc.) -->
|
||||
<main id="viewContainer" class="flex-grow mb-8"></main>
|
||||
|
||||
<!-- Modal Container (external modals will be injected here) -->
|
||||
<!-- Modal Container (external modals) -->
|
||||
<div id="modalContainer"></div>
|
||||
|
||||
<!-- Tagline / Slogan -->
|
||||
@@ -115,165 +137,6 @@
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Disclaimer Modal (wide, matching other modals) -->
|
||||
<div
|
||||
id="disclaimerModal"
|
||||
class="fixed inset-0 z-50 hidden"
|
||||
style="background: transparent"
|
||||
>
|
||||
<!-- Dark/blur overlay -->
|
||||
<div
|
||||
class="absolute inset-0 z-10"
|
||||
style="
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- Outer container with wide layout, just like content-appeals-form -->
|
||||
<div
|
||||
class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
|
||||
>
|
||||
<!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
|
||||
<div
|
||||
class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
|
||||
>
|
||||
<!-- Sticky top bar, if you want a top heading or 'X' button up here -->
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<!-- If you want an X to close, you can add it here, for example:
|
||||
<button
|
||||
id="closeDisclaimerBtn"
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-gray-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-6">
|
||||
<!-- Scrollable disclaimers area -->
|
||||
<div
|
||||
class="space-y-6 text-gray-300"
|
||||
style="max-height: 70vh; overflow-y: auto"
|
||||
>
|
||||
<!-- Example: Insert your disclaimers here -->
|
||||
|
||||
<div class="flex justify-center mb-8">
|
||||
<img
|
||||
src="assets/svg/bitvid-logo-dark-mode.svg"
|
||||
alt="BitVid Logo"
|
||||
class="h-16"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-white mb-0">
|
||||
Welcome to bitvid
|
||||
</h2>
|
||||
<!-- Warning Alert -->
|
||||
<div
|
||||
class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-yellow-200">
|
||||
This platform is currently in development and only supports
|
||||
Chrome and Firefox-based browsers. Other browsers are not
|
||||
supported at this time. You may encounter bugs or missing
|
||||
features. Give it a sec. Videos might take 10 to 60 seconds
|
||||
to load initially.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
bitvid is a decentralized video platform where content is
|
||||
shared directly between users. We want you to understand a few
|
||||
important points before you continue:
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">
|
||||
Early Access Status
|
||||
</h3>
|
||||
<p class="text-gray-400">
|
||||
Currently, video posting is invite-only as we carefully
|
||||
scale our platform. While anyone can watch videos, content
|
||||
creation is limited to approved creators. This helps us
|
||||
maintain quality content during our early stages.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">
|
||||
Content Responsibility & Moderation
|
||||
</h3>
|
||||
<p class="text-gray-400">
|
||||
While we don't host videos directly, we maintain community
|
||||
standards through access control. Users who violate our
|
||||
guidelines may be blocked from accessing the platform. All
|
||||
content must follow local laws and platform guidelines.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">
|
||||
Platform Status
|
||||
</h3>
|
||||
<p class="text-gray-400">
|
||||
bitvid is a work in progress. Features may change or
|
||||
break, and security improvements are ongoing. Your
|
||||
feedback and patience help us build a better platform.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<h3 class="text-white font-semibold mb-2">Get Involved</h3>
|
||||
<p class="text-gray-400">
|
||||
Are you a developer? We'd love your help! Visit our GitHub
|
||||
repository to contribute to building the future of
|
||||
decentralized video sharing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button at bottom -->
|
||||
<div class="mt-6">
|
||||
<button
|
||||
id="acceptDisclaimer"
|
||||
class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
|
||||
>
|
||||
I Understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="mt-auto pb-8 text-center px-4">
|
||||
<a
|
||||
@@ -387,251 +250,7 @@
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Load external modal components + attach event listeners -->
|
||||
<script>
|
||||
async function loadModal(url) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load " + url);
|
||||
}
|
||||
const html = await response.text();
|
||||
document
|
||||
.getElementById("modalContainer")
|
||||
.insertAdjacentHTML("beforeend", html);
|
||||
console.log(url, "loaded");
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
Promise.all([
|
||||
// Existing modals
|
||||
loadModal("components/login-modal.html"),
|
||||
loadModal("components/application-form.html"),
|
||||
loadModal("components/content-appeals-form.html"),
|
||||
|
||||
// New forms
|
||||
loadModal("components/general-feedback-form.html"),
|
||||
loadModal("components/feature-request-form.html"),
|
||||
loadModal("components/bug-fix-form.html"),
|
||||
]).then(() => {
|
||||
console.log("Modals loaded.");
|
||||
|
||||
//
|
||||
// 1) Login button => open login modal
|
||||
//
|
||||
const loginNavBtn = document.getElementById("loginButton");
|
||||
if (loginNavBtn) {
|
||||
loginNavBtn.addEventListener("click", () => {
|
||||
const loginModal = document.getElementById("loginModal");
|
||||
if (loginModal) {
|
||||
loginModal.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 2) Close login modal
|
||||
//
|
||||
const closeLoginBtn = document.getElementById("closeLoginModal");
|
||||
if (closeLoginBtn) {
|
||||
closeLoginBtn.addEventListener("click", () => {
|
||||
const loginModal = document.getElementById("loginModal");
|
||||
if (loginModal) {
|
||||
loginModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 3) “Application Form” button => open application form
|
||||
//
|
||||
const openAppFormBtn = document.getElementById("openApplicationModal");
|
||||
if (openAppFormBtn) {
|
||||
openAppFormBtn.addEventListener("click", () => {
|
||||
// Hide the login modal first
|
||||
const loginModal = document.getElementById("loginModal");
|
||||
if (loginModal) {
|
||||
loginModal.classList.add("hidden");
|
||||
}
|
||||
// Now show the application form modal
|
||||
const appModal = document.getElementById("nostrFormModal");
|
||||
if (appModal) {
|
||||
appModal.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 4) Close application form
|
||||
//
|
||||
const closeNostrFormBtn = document.getElementById(
|
||||
"closeNostrFormModal"
|
||||
);
|
||||
if (closeNostrFormBtn) {
|
||||
closeNostrFormBtn.addEventListener("click", () => {
|
||||
const appModal = document.getElementById("nostrFormModal");
|
||||
if (appModal) {
|
||||
appModal.classList.add("hidden");
|
||||
}
|
||||
// ADDED: If user has not seen disclaimer yet, show it after application modal is closed
|
||||
if (!localStorage.getItem("hasSeenDisclaimer")) {
|
||||
const disclaimerModal =
|
||||
document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 5) ?modal=appeals => open content appeals form
|
||||
// ?modal=application => open application form
|
||||
//
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const modalParam = urlParams.get("modal");
|
||||
|
||||
if (modalParam === "appeals") {
|
||||
const appealsModal = document.getElementById("contentAppealsModal");
|
||||
if (appealsModal) {
|
||||
appealsModal.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// ADDED: After user closes appeals, show disclaimer if needed
|
||||
const closeAppealsBtn = document.getElementById(
|
||||
"closeContentAppealsModal"
|
||||
);
|
||||
if (closeAppealsBtn) {
|
||||
closeAppealsBtn.addEventListener("click", () => {
|
||||
appealsModal.classList.add("hidden");
|
||||
if (!localStorage.getItem("hasSeenDisclaimer")) {
|
||||
const disclaimerModal =
|
||||
document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (modalParam === "application") {
|
||||
// Show application form, but DO NOT show disclaimer until user closes
|
||||
const appModal = document.getElementById("nostrFormModal");
|
||||
if (appModal) {
|
||||
appModal.classList.remove("hidden");
|
||||
}
|
||||
// Note: The close event above (closeNostrFormBtn) handles the disclaimer after closing.
|
||||
} else {
|
||||
// If there's no special param in the URL, we can consider showing the disclaimer right away
|
||||
const hasSeenDisclaimer = localStorage.getItem("hasSeenDisclaimer");
|
||||
if (!hasSeenDisclaimer) {
|
||||
const disclaimerModal = document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 6) Close content appeals modal (needed if user navigates w/o param, then opens appeals)
|
||||
//
|
||||
const closeAppealsBtn = document.getElementById(
|
||||
"closeContentAppealsModal"
|
||||
);
|
||||
if (closeAppealsBtn) {
|
||||
closeAppealsBtn.addEventListener("click", () => {
|
||||
const appealsModal = document.getElementById("contentAppealsModal");
|
||||
if (appealsModal) {
|
||||
appealsModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 7) Disclaimer 'I Understand' Button
|
||||
//
|
||||
const acceptDisclaimerBtn = document.getElementById("acceptDisclaimer");
|
||||
if (acceptDisclaimerBtn) {
|
||||
acceptDisclaimerBtn.addEventListener("click", () => {
|
||||
// Hide disclaimer
|
||||
const disclaimerModal = document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.add("hidden");
|
||||
}
|
||||
// Store the fact that user has seen it
|
||||
localStorage.setItem("hasSeenDisclaimer", "true");
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 8) Query param checks for the three new forms
|
||||
// https://bitvid.network?modal=feedback => open generalFeedbackModal
|
||||
// https://bitvid.network?modal=feature => open featureRequestModal
|
||||
// https://bitvid.network?modal=bug => open bugFixModal
|
||||
//
|
||||
if (modalParam === "feedback") {
|
||||
const feedbackModal = document.getElementById("generalFeedbackModal");
|
||||
if (feedbackModal) {
|
||||
feedbackModal.classList.remove("hidden");
|
||||
}
|
||||
} else if (modalParam === "feature") {
|
||||
const featureModal = document.getElementById("featureRequestModal");
|
||||
if (featureModal) {
|
||||
featureModal.classList.remove("hidden");
|
||||
}
|
||||
} else if (modalParam === "bug") {
|
||||
const bugModal = document.getElementById("bugFixModal");
|
||||
if (bugModal) {
|
||||
bugModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 9) Close buttons for the three new forms
|
||||
//
|
||||
// general feedback
|
||||
const closeFeedbackBtn = document.getElementById(
|
||||
"closeGeneralFeedbackModal"
|
||||
);
|
||||
if (closeFeedbackBtn) {
|
||||
closeFeedbackBtn.addEventListener("click", () => {
|
||||
const feedbackModal = document.getElementById(
|
||||
"generalFeedbackModal"
|
||||
);
|
||||
if (feedbackModal) {
|
||||
feedbackModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// feature request
|
||||
const closeFeatureBtn = document.getElementById(
|
||||
"closeFeatureRequestModal"
|
||||
);
|
||||
if (closeFeatureBtn) {
|
||||
closeFeatureBtn.addEventListener("click", () => {
|
||||
const featureModal = document.getElementById("featureRequestModal");
|
||||
if (featureModal) {
|
||||
featureModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// bug fix
|
||||
const closeBugBtn = document.getElementById("closeBugFixModal");
|
||||
if (closeBugBtn) {
|
||||
closeBugBtn.addEventListener("click", () => {
|
||||
const bugModal = document.getElementById("bugFixModal");
|
||||
if (bugModal) {
|
||||
bugModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Other Scripts -->
|
||||
<!-- Additional Scripts -->
|
||||
<script src="js/libs/nostr.bundle.js"></script>
|
||||
<script type="module">
|
||||
import { nip19, SimplePool } from "https://esm.sh/nostr-tools@1.8.3";
|
||||
@@ -644,5 +263,7 @@
|
||||
<script type="module" src="js/nostr.js"></script>
|
||||
<script type="module" src="js/viewManager.js"></script>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
<script type="module" src="js/disclaimer.js"></script>
|
||||
<script type="module" src="js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { loadView } from "./viewManager.js";
|
||||
import { nostrClient } from "./nostr.js";
|
||||
import { torrentClient } from "./webtorrent.js";
|
||||
import { isDevMode } from "./config.js";
|
||||
import { disclaimerModal } from "./disclaimer.js";
|
||||
import disclaimerModal from "./disclaimer.js";
|
||||
import { initialBlacklist, initialEventBlacklist } from "./lists.js";
|
||||
|
||||
/**
|
||||
@@ -724,12 +724,19 @@ class bitvidApp {
|
||||
/**
|
||||
* Subscribe to videos (older + new) and render them as they come in.
|
||||
*/
|
||||
async loadVideos() {
|
||||
console.log("Starting loadVideos...");
|
||||
async loadVideos(forceFetch = false) {
|
||||
console.log("Starting loadVideos... (forceFetch =", forceFetch, ")");
|
||||
|
||||
// We do NOT decode initialEventBlacklist here.
|
||||
// That happens once in the constructor, creating this.blacklistedEventIds.
|
||||
// If forceFetch is true, unsubscribe from the old subscription to start fresh
|
||||
if (forceFetch && this.videoSubscription) {
|
||||
// If you have a specific unsubscribe method, call it here.
|
||||
// For example:
|
||||
nostrClient.unsubscribeVideos(this.videoSubscription);
|
||||
|
||||
this.videoSubscription = null;
|
||||
}
|
||||
|
||||
// The rest of your existing logic:
|
||||
if (!this.videoSubscription) {
|
||||
if (this.videoList) {
|
||||
this.videoList.innerHTML = `
|
||||
@@ -738,7 +745,7 @@ class bitvidApp {
|
||||
</p>`;
|
||||
}
|
||||
|
||||
// Create a single subscription
|
||||
// Create a new subscription
|
||||
this.videoSubscription = nostrClient.subscribeVideos(() => {
|
||||
const updatedAll = nostrClient.getActiveVideos();
|
||||
|
||||
@@ -749,7 +756,7 @@ class bitvidApp {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 2) Check author (if you’re also blacklisting authors by npub)
|
||||
// 2) Check author if you’re blacklisting authors by npub
|
||||
const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
|
||||
if (initialBlacklist.includes(authorNpub)) {
|
||||
return false;
|
||||
|
||||
@@ -1,36 +1,39 @@
|
||||
// js/disclaimer.js
|
||||
|
||||
class DisclaimerModal {
|
||||
constructor() {
|
||||
// Initialize elements when the disclaimer HTML is in the DOM.
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.modal = document.getElementById("disclaimerModal");
|
||||
this.acceptButton = document.getElementById("acceptDisclaimer");
|
||||
// If user previously dismissed the disclaimer, we'll store "true" in localStorage:
|
||||
this.hasSeenDisclaimer = localStorage.getItem("hasSeenDisclaimer");
|
||||
|
||||
// Set up the click event for the "I Understand" button
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
if (this.acceptButton) {
|
||||
this.acceptButton.addEventListener("click", () => {
|
||||
// Hide the disclaimer by adding the "hidden" class
|
||||
if (this.modal) {
|
||||
this.modal.classList.add("hidden");
|
||||
}
|
||||
// Mark that the user has seen the disclaimer, so we don't show it again
|
||||
localStorage.setItem("hasSeenDisclaimer", "true");
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
// Only show it if the user hasn't seen it before
|
||||
if (!this.hasSeenDisclaimer) {
|
||||
hide() {
|
||||
if (this.modal) {
|
||||
this.modal.classList.remove("hidden");
|
||||
this.modal.classList.add("hidden");
|
||||
}
|
||||
localStorage.setItem("hasSeenDisclaimer", "true");
|
||||
}
|
||||
|
||||
show() {
|
||||
// In case the modal hasn't been initialized yet.
|
||||
if (!this.modal) {
|
||||
this.init();
|
||||
}
|
||||
if (!localStorage.getItem("hasSeenDisclaimer") && this.modal) {
|
||||
this.modal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Export an instance that you can import in your main script
|
||||
export const disclaimerModal = new DisclaimerModal();
|
||||
// Create and export a default instance.
|
||||
const disclaimerModal = new DisclaimerModal();
|
||||
export default disclaimerModal;
|
||||
|
||||
258
src/js/index.js
Normal file
258
src/js/index.js
Normal file
@@ -0,0 +1,258 @@
|
||||
// js/index.js
|
||||
|
||||
// 1) Load modals (login, application, etc.)
|
||||
async function loadModal(url) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load " + url);
|
||||
}
|
||||
const html = await response.text();
|
||||
document
|
||||
.getElementById("modalContainer")
|
||||
.insertAdjacentHTML("beforeend", html);
|
||||
console.log(url, "loaded");
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
// 2) Load sidebar
|
||||
async function loadSidebar(url, containerId) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load " + url);
|
||||
}
|
||||
const html = await response.text();
|
||||
document.getElementById(containerId).innerHTML = html;
|
||||
console.log(url, "loaded into", containerId);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
// 3) Load the disclaimer (now separate)
|
||||
async function loadDisclaimer(url, containerId) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load " + url);
|
||||
}
|
||||
const html = await response.text();
|
||||
document.getElementById(containerId).insertAdjacentHTML("beforeend", html);
|
||||
console.log(url, "disclaimer loaded into", containerId);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
// 4) Load everything: modals, sidebar, disclaimers
|
||||
Promise.all([
|
||||
// Existing modals
|
||||
loadModal("components/login-modal.html"),
|
||||
loadModal("components/application-form.html"),
|
||||
loadModal("components/content-appeals-form.html"),
|
||||
|
||||
// New forms
|
||||
loadModal("components/general-feedback-form.html"),
|
||||
loadModal("components/feature-request-form.html"),
|
||||
loadModal("components/bug-fix-form.html"),
|
||||
])
|
||||
.then(() => {
|
||||
console.log("Modals loaded.");
|
||||
return loadSidebar("components/sidebar.html", "sidebarContainer");
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Sidebar loaded.");
|
||||
|
||||
const mobileMenuBtn = document.getElementById("mobileMenuBtn");
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
const app = document.getElementById("app"); // <-- new
|
||||
|
||||
if (mobileMenuBtn && sidebar && app) {
|
||||
mobileMenuBtn.addEventListener("click", () => {
|
||||
sidebar.classList.toggle("hidden");
|
||||
sidebar.classList.toggle("-translate-x-full");
|
||||
// Toggle the class on #app so it shifts right
|
||||
app.classList.toggle("sidebar-open");
|
||||
});
|
||||
}
|
||||
|
||||
return import("./sidebar.js").then((module) => {
|
||||
module.setupSidebarNavigation();
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
// Now load the disclaimer
|
||||
return loadDisclaimer("components/disclaimer.html", "modalContainer");
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Disclaimer loaded.");
|
||||
|
||||
// 1) Login button => open login modal
|
||||
const loginNavBtn = document.getElementById("loginButton");
|
||||
if (loginNavBtn) {
|
||||
loginNavBtn.addEventListener("click", () => {
|
||||
const loginModal = document.getElementById("loginModal");
|
||||
if (loginModal) {
|
||||
loginModal.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 2) Close login modal
|
||||
const closeLoginBtn = document.getElementById("closeLoginModal");
|
||||
if (closeLoginBtn) {
|
||||
closeLoginBtn.addEventListener("click", () => {
|
||||
const loginModal = document.getElementById("loginModal");
|
||||
if (loginModal) {
|
||||
loginModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 3) “Application Form” => open application form
|
||||
const openAppFormBtn = document.getElementById("openApplicationModal");
|
||||
if (openAppFormBtn) {
|
||||
openAppFormBtn.addEventListener("click", () => {
|
||||
const loginModal = document.getElementById("loginModal");
|
||||
if (loginModal) {
|
||||
loginModal.classList.add("hidden");
|
||||
}
|
||||
const appModal = document.getElementById("nostrFormModal");
|
||||
if (appModal) {
|
||||
appModal.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 4) Close application form
|
||||
const closeNostrFormBtn = document.getElementById("closeNostrFormModal");
|
||||
if (closeNostrFormBtn) {
|
||||
closeNostrFormBtn.addEventListener("click", () => {
|
||||
const appModal = document.getElementById("nostrFormModal");
|
||||
if (appModal) {
|
||||
appModal.classList.add("hidden");
|
||||
}
|
||||
// If user hasn't seen disclaimer, show it
|
||||
if (!localStorage.getItem("hasSeenDisclaimer")) {
|
||||
const disclaimerModal = document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 5) ?modal=appeals => open content appeals form
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const modalParam = urlParams.get("modal");
|
||||
|
||||
if (modalParam === "appeals") {
|
||||
const appealsModal = document.getElementById("contentAppealsModal");
|
||||
if (appealsModal) {
|
||||
appealsModal.classList.remove("hidden");
|
||||
}
|
||||
const closeAppealsBtn = document.getElementById(
|
||||
"closeContentAppealsModal"
|
||||
);
|
||||
if (closeAppealsBtn) {
|
||||
closeAppealsBtn.addEventListener("click", () => {
|
||||
appealsModal.classList.add("hidden");
|
||||
if (!localStorage.getItem("hasSeenDisclaimer")) {
|
||||
const disclaimerModal = document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (modalParam === "application") {
|
||||
const appModal = document.getElementById("nostrFormModal");
|
||||
if (appModal) {
|
||||
appModal.classList.remove("hidden");
|
||||
}
|
||||
} else {
|
||||
// If there's no special param, disclaimers can show if user hasn't seen them
|
||||
const hasSeenDisclaimer = localStorage.getItem("hasSeenDisclaimer");
|
||||
if (!hasSeenDisclaimer) {
|
||||
const disclaimerModal = document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 6) Close content appeals modal if needed
|
||||
const closeAppealsBtn = document.getElementById("closeContentAppealsModal");
|
||||
if (closeAppealsBtn) {
|
||||
closeAppealsBtn.addEventListener("click", () => {
|
||||
const appealsModal = document.getElementById("contentAppealsModal");
|
||||
if (appealsModal) {
|
||||
appealsModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 7) Disclaimer 'I Understand' Button
|
||||
const acceptDisclaimerBtn = document.getElementById("acceptDisclaimer");
|
||||
if (acceptDisclaimerBtn) {
|
||||
acceptDisclaimerBtn.addEventListener("click", () => {
|
||||
const disclaimerModal = document.getElementById("disclaimerModal");
|
||||
if (disclaimerModal) {
|
||||
disclaimerModal.classList.add("hidden");
|
||||
}
|
||||
localStorage.setItem("hasSeenDisclaimer", "true");
|
||||
});
|
||||
}
|
||||
|
||||
// 8) Query param checks for the three new forms
|
||||
if (modalParam === "feedback") {
|
||||
const feedbackModal = document.getElementById("generalFeedbackModal");
|
||||
if (feedbackModal) {
|
||||
feedbackModal.classList.remove("hidden");
|
||||
}
|
||||
} else if (modalParam === "feature") {
|
||||
const featureModal = document.getElementById("featureRequestModal");
|
||||
if (featureModal) {
|
||||
featureModal.classList.remove("hidden");
|
||||
}
|
||||
} else if (modalParam === "bug") {
|
||||
const bugModal = document.getElementById("bugFixModal");
|
||||
if (bugModal) {
|
||||
bugModal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// 9) Close buttons for the new forms
|
||||
const closeFeedbackBtn = document.getElementById(
|
||||
"closeGeneralFeedbackModal"
|
||||
);
|
||||
if (closeFeedbackBtn) {
|
||||
closeFeedbackBtn.addEventListener("click", () => {
|
||||
const feedbackModal = document.getElementById("generalFeedbackModal");
|
||||
if (feedbackModal) {
|
||||
feedbackModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
const closeFeatureBtn = document.getElementById("closeFeatureRequestModal");
|
||||
if (closeFeatureBtn) {
|
||||
closeFeatureBtn.addEventListener("click", () => {
|
||||
const featureModal = document.getElementById("featureRequestModal");
|
||||
if (featureModal) {
|
||||
featureModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
const closeBugBtn = document.getElementById("closeBugFixModal");
|
||||
if (closeBugBtn) {
|
||||
closeBugBtn.addEventListener("click", () => {
|
||||
const bugModal = document.getElementById("bugFixModal");
|
||||
if (bugModal) {
|
||||
bugModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
46
src/js/sidebar.js
Normal file
46
src/js/sidebar.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import { loadView } from "./viewManager.js";
|
||||
|
||||
/**
|
||||
* Wire up the sidebar links.
|
||||
* Home => loads the "most-recent-videos" partial and re-renders videos
|
||||
* Explore => loads explore.html with a "Coming Soon" message
|
||||
* Subscriptions => loads subscriptions.html with a "Coming Soon" message
|
||||
*/
|
||||
export function setupSidebarNavigation() {
|
||||
// 1) Home
|
||||
const homeLink = document.querySelector('a[href="#view=most-recent-videos"]');
|
||||
if (homeLink) {
|
||||
homeLink.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
loadView("views/most-recent-videos.html").then(() => {
|
||||
// Once the partial is loaded, reassign #videoList + call loadVideos
|
||||
if (window.app && window.app.loadVideos) {
|
||||
window.app.videoList = document.getElementById("videoList");
|
||||
window.app.loadVideos();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 2) Explore
|
||||
const exploreLink = document.querySelector('a[href="#view=explore"]');
|
||||
if (exploreLink) {
|
||||
exploreLink.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
loadView("views/explore.html");
|
||||
// We just show the partial. No dynamic videos needed yet.
|
||||
});
|
||||
}
|
||||
|
||||
// 3) Subscriptions
|
||||
const subscriptionsLink = document.querySelector(
|
||||
'a[href="#view=subscriptions"]'
|
||||
);
|
||||
if (subscriptionsLink) {
|
||||
subscriptionsLink.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
loadView("views/subscriptions.html");
|
||||
// Also "Coming Soon" in that partial for now.
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -175,7 +175,7 @@ export class TorrentClient {
|
||||
return reject(new Error("No compatible video file found in torrent"));
|
||||
}
|
||||
|
||||
videoElement.muted = true;
|
||||
videoElement.muted = false;
|
||||
videoElement.crossOrigin = "anonymous";
|
||||
|
||||
videoElement.addEventListener("error", (e) => {
|
||||
|
||||
5
src/views/explore.html
Normal file
5
src/views/explore.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<!-- views/explore.html -->
|
||||
<section>
|
||||
<h2 class="text-xl mb-4 text-gray-700">Explore</h2>
|
||||
<p class="text-gray-600">Coming Soon...</p>
|
||||
</section>
|
||||
5
src/views/subscriptions.html
Normal file
5
src/views/subscriptions.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<!-- views/subscriptions.html -->
|
||||
<section>
|
||||
<h2 class="text-xl mb-4 text-gray-700">Subscriptions</h2>
|
||||
<p class="text-gray-600">Coming Soon...</p>
|
||||
</section>
|
||||
@@ -1 +0,0 @@
|
||||
<iframe src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpkha64cj06g8sk2hqgq0yn4gqalgxxsta7x8lmvy8jr7pqfm5l9yqy2hwumn8ghj7un9d3shjtnyv9kh2uewd9hj7qppvf5hganfvss9w6rfw3jkc6tnwssyzursd35kxct5d9hkugzxdaex6udmmth" height="700px" width="480px" frameborder="0" style="border-style:none;box-shadow:0px 0px 2px 2px rgba(0,0,0,0.2);" cellspacing="0" ></iframe>
|
||||
Reference in New Issue
Block a user