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

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

@@ -8,23 +8,13 @@
<link href="css/tailwind.min.css" rel="stylesheet" />
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Button to open the 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 -->
<!-- Application Form Modal -->
<div
id="nostrFormModal"
class="fixed inset-0 z-50 hidden"
style="background: transparent"
>
<!-- Overlay Layer with dark background and blur -->
<!-- Dark/blur overlay (same approach as your other modals) -->
<div
class="absolute inset-0 z-10"
style="
@@ -34,18 +24,19 @@
"
></div>
<!-- Modal Container -->
<!-- Outer container with same sizing as your video modal -->
<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
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
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
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"
@@ -67,19 +58,15 @@
</button>
</div>
<!-- Modal Content -->
<!-- Main Content -->
<div class="p-6">
<div class="flex justify-center">
<!-- Flexible container for the iframe -->
<div class="w-full" style="height: 80vh">
<iframe
src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpcf63zey4c02lz9x4zkn2ny5kmz3g8v8fj9hvehyps5tuj7u272gqythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsky6t5we5kgh6hdp5hgetvd9ehgh6pwpcxc6trv96xjmmwtarx7und0qc765?hideTitleImage=true"
height="700px"
width="480px"
class="w-full h-full"
frameborder="0"
style="
border-style: none;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
"
cellspacing="0"
style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
></iframe>
</div>
</div>
@@ -87,19 +74,25 @@
</div>
</div>
<!-- Script to toggle modal -->
<!-- Optional Script for Opening/Closing (if you have a dedicated button) -->
<script>
const openBtn = document.getElementById("openNostrForm");
const modal = document.getElementById("nostrFormModal");
const appModal = document.getElementById("nostrFormModal");
const closeBtn = document.getElementById("closeNostrFormModal");
// Open the modal
if (openBtn) {
openBtn.addEventListener("click", () => {
modal.classList.remove("hidden");
appModal.classList.remove("hidden");
});
}
// Close the modal
if (closeBtn) {
closeBtn.addEventListener("click", () => {
modal.classList.add("hidden");
appModal.classList.add("hidden");
});
}
</script>
</body>
</html>

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

@@ -3,7 +3,7 @@
class="fixed inset-0 z-50 hidden"
style="background: transparent"
>
<!-- Dark overlay -->
<!-- Dark overlay with blur (unchanged) -->
<div
class="absolute inset-0 z-10"
style="
@@ -13,14 +13,14 @@
"
></div>
<!-- Modal container -->
<!-- Outer container matching video modal's flex layout & wide sizing -->
<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
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
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>
</div>
<!-- Body with login buttons -->
<!-- Body with buttons (unchanged) -->
<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
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"

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

@@ -14,12 +14,14 @@
"
></div>
<!-- Modal Container -->
<!-- Outer container with the same sizing approach as your other modals -->
<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
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 -->
<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"
>
<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) -->
<div

72
src/index.html
View File

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