thePR0M3TH3AN/bitvid
1
0
Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2025-09-08 15:08:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

added application form and adjusted modal flow

Browse Source
This commit is contained in:
Keep Creating Online
2025-02-01 21:37:30 -05:00
parent a7ff33b6e9
commit ed7e904abe
6 changed files with 132 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/application-form.html
View File

@@ -8,23 +8,13 @@
<link href="css/tailwind.min.css" rel="stylesheet" /> <link href="css/tailwind.min.css" rel="stylesheet" />
</head> </head>
<body class="bg-gray-900 text-gray-100"> <body class="bg-gray-900 text-gray-100">
<!-- Button to open the modal --> <!-- Application Form Modal -->
<div class="p-4">
<button
id="openNostrForm"
class="bg-blue-500 px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Open Nostr Form
</button>
</div>
<!-- Modal Container -->
<div <div
id="nostrFormModal" id="nostrFormModal"
class="fixed inset-0 z-50 hidden" class="fixed inset-0 z-50 hidden"
style="background: transparent" style="background: transparent"
> >
<!-- Overlay Layer with dark background and blur --> <!-- Dark/blur overlay (same approach as your other modals) -->
<div <div
class="absolute inset-0 z-10" class="absolute inset-0 z-10"
style=" style="
@@ -34,18 +24,19 @@
" "
></div> ></div>
<!-- Modal Container --> <!-- Outer container with same sizing as your video modal -->
<div <div
class="relative modal-container h-full w-full flex items-center justify-center overflow-y-auto z-20" class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
> >
<!-- Inner content: wide layout, matching .max-w-[90%] lg:max-w-6xl -->
<div <div
class="modal-content bg-gray-900 w-full max-w-lg md:max-w-2xl my-0 rounded-lg overflow-hidden relative max-h-[90vh]" class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
> >
<!-- Top Bar --> <!-- Header bar (sticky) with exit button on the right -->
<div <div
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300 p-4 flex items-center justify-between" class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
> >
<h2 class="text-xl font-bold text-white">My Nostr Form</h2> <h2 class="text-2xl font-bold text-white mb-0">Application Form</h2>
<button <button
id="closeNostrFormModal" id="closeNostrFormModal"
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" 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"
@@ -67,19 +58,15 @@
</button> </button>
</div> </div>
<!-- Modal Content --> <!-- Main Content -->
<div class="p-6"> <div class="p-6">
<div class="flex justify-center"> <!-- Flexible container for the iframe -->
<div class="w-full" style="height: 80vh">
<iframe <iframe
src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpcf63zey4c02lz9x4zkn2ny5kmz3g8v8fj9hvehyps5tuj7u272gqythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsky6t5we5kgh6hdp5hgetvd9ehgh6pwpcxc6trv96xjmmwtarx7und0qc765?hideTitleImage=true" src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpcf63zey4c02lz9x4zkn2ny5kmz3g8v8fj9hvehyps5tuj7u272gqythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsky6t5we5kgh6hdp5hgetvd9ehgh6pwpcxc6trv96xjmmwtarx7und0qc765?hideTitleImage=true"
height="700px" class="w-full h-full"
width="480px"
frameborder="0" frameborder="0"
style=" style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
border-style: none;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
"
cellspacing="0"
></iframe> ></iframe>
</div> </div>
</div> </div>
@@ -87,19 +74,25 @@
</div> </div>
</div> </div>
<!-- Script to toggle modal --> <!-- Optional Script for Opening/Closing (if you have a dedicated button) -->
<script> <script>
const openBtn = document.getElementById("openNostrForm"); const openBtn = document.getElementById("openNostrForm");
const modal = document.getElementById("nostrFormModal"); const appModal = document.getElementById("nostrFormModal");
const closeBtn = document.getElementById("closeNostrFormModal"); const closeBtn = document.getElementById("closeNostrFormModal");
openBtn.addEventListener("click", () => { // Open the modal
modal.classList.remove("hidden"); if (openBtn) {
}); openBtn.addEventListener("click", () => {
appModal.classList.remove("hidden");
});
}
closeBtn.addEventListener("click", () => { // Close the modal
modal.classList.add("hidden"); if (closeBtn) {
}); closeBtn.addEventListener("click", () => {
appModal.classList.add("hidden");
});
}
</script> </script>
</body> </body>
</html> </html>

24
src/components/login-modal.html
View File

@@ -3,7 +3,7 @@
class="fixed inset-0 z-50 hidden" class="fixed inset-0 z-50 hidden"
style="background: transparent" style="background: transparent"
> >
<!-- Dark overlay --> <!-- Dark overlay with blur (unchanged) -->
<div <div
class="absolute inset-0 z-10" class="absolute inset-0 z-10"
style=" style="
@@ -13,14 +13,14 @@
" "
></div> ></div>
<!-- Modal container --> <!-- Outer container matching video modal's flex layout & wide sizing -->
<div <div
class="relative modal-container h-full w-full flex items-center justify-center overflow-y-auto z-20" class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
> >
<div <div
class="modal-content bg-gray-900 w-full max-w-md my-0 rounded-lg overflow-hidden relative max-h-[90vh]" class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
> >
<!-- Header --> <!-- Header with the special exit button (unchanged) -->
<div <div
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between" class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
> >
@@ -46,8 +46,20 @@
</button> </button>
</div> </div>
<!-- Body with login buttons --> <!-- Body with buttons (unchanged) -->
<div class="p-6 space-y-4"> <div class="p-6 space-y-4">
<!-- Application Form button -->
<button
id="openApplicationModal"
class="w-full bg-indigo-500 text-white px-4 py-2 rounded-md hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Application Form
</button>
<!-- Simple horizontal rule -->
<div class="my-2 border-t border-gray-700"></div>
<!-- Existing login buttons -->
<button <button
id="loginNIP07" id="loginNIP07"
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" 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"

8
src/components/profile-modal.html
View File

@@ -14,12 +14,14 @@
" "
></div> ></div>
<!-- Modal Container --> <!-- Outer container with the same sizing approach as your other modals -->
<div <div
class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20" class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
> >
<!-- Inner content: wide layout, matching your video modal -->
<div <div
class="modal-content bg-gray-900 w-full max-w-sm md:max-w-md my-0 rounded-lg overflow-hidden relative flex flex-col max-h-[90vh]" class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative flex flex-col"
style="max-height: 90vh"
> >
<!-- Modal Header --> <!-- Modal Header -->
<div <div

3
src/components/upload-modal.html
View File

@@ -19,7 +19,8 @@
class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20" class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20"
> >
<div <div
class="modal-content bg-gray-900 w-full max-w-lg md:max-w-2xl my-0 rounded-lg overflow-hidden relative max-h-[90vh]" class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
style="max-height: 90vh"
> >
<!-- Top Bar (similar to video-modal) --> <!-- Top Bar (similar to video-modal) -->
<div <div

72
src/index.html
View File

@@ -325,7 +325,7 @@
</footer> </footer>
</div> </div>
<!-- Load external modal components --> <!-- Load external modal components + attach event listeners -->
<script> <script>
async function loadModal(url) { async function loadModal(url) {
try { try {
@@ -343,24 +343,76 @@
} }
} }
// Just load the login modal (or any others), without adding event listeners here. // Load the login modal and application form modal
// The logic to open/close the modal is all in app.js now. Promise.all([
Promise.all([loadModal("components/login-modal.html")]).then(() => { loadModal("components/login-modal.html"),
console.log("Modals loaded (login-modal.html, etc.)"); loadModal("components/application-form.html"),
// Now that the login-modal is definitely in the DOM: ]).then(() => {
const closeBtn = document.getElementById("closeLoginModal"); console.log("Modals loaded (login-modal, application-form)");
if (closeBtn) {
closeBtn.addEventListener("click", () => { //
// 1) Top nav login button => open the 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 button on the login modal
//
const closeLoginBtn = document.getElementById("closeLoginModal");
if (closeLoginBtn) {
closeLoginBtn.addEventListener("click", () => {
const loginModal = document.getElementById("loginModal"); const loginModal = document.getElementById("loginModal");
if (loginModal) { if (loginModal) {
loginModal.classList.add("hidden"); loginModal.classList.add("hidden");
} }
}); });
} }
//
// 3) “Application Form” button inside the login modal => open the 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 button on the application form modal
//
const closeNostrFormBtn = document.getElementById(
"closeNostrFormModal"
);
if (closeNostrFormBtn) {
closeNostrFormBtn.addEventListener("click", () => {
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.add("hidden");
}
});
}
}); });
</script> </script>
<!-- Scripts --> <!-- Other Scripts -->
<script src="js/libs/nostr.bundle.js"></script> <script src="js/libs/nostr.bundle.js"></script>
<script type="module" src="js/config.js"></script> <script type="module" src="js/config.js"></script>
<script type="module" src="js/lists.js"></script> <script type="module" src="js/lists.js"></script>

17
src/js/app.js
View File

@@ -454,6 +454,23 @@ class bitvidApp {
console.log("[popstate] user navigated back/forward; cleaning modal..."); console.log("[popstate] user navigated back/forward; cleaning modal...");
await this.hideModal(); await this.hideModal();
}); });
// Event delegation for the “Application Form” button inside the login modal
document.addEventListener("click", (event) => {
if (event.target && event.target.id === "openApplicationModal") {
// 1) Hide the login modal
const loginModal = document.getElementById("loginModal");
if (loginModal) {
loginModal.classList.add("hidden");
}
// 2) Show the application modal
const appModal = document.getElementById("nostrFormModal");
if (appModal) {
appModal.classList.remove("hidden");
}
}
});
} }
/** /**