mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2025-09-08 06:58:43 +00:00
updated modals, forms, UI flow
This commit is contained in:
Keep Creating Online
56
src/components/bug-fix-form.html
Normal file
56
src/components/bug-fix-form.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!-- components/general-feedback-form.html -->
|
||||
<div
|
||||
id="bugFixModal"
|
||||
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>
|
||||
|
||||
<div
|
||||
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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
|
||||
>
|
||||
<!-- Header bar (sticky) with exit button -->
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<h2 class="text-2xl font-bold text-white mb-0">Bug Fix Form</h2>
|
||||
<button
|
||||
id="closeBugFixModal"
|
||||
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>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="w-full" style="height: 80vh">
|
||||
<iframe></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
56
src/components/content-appeals-form.html
Normal file
56
src/components/content-appeals-form.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!-- components/content-appeals-form.html -->
|
||||
<div
|
||||
id="contentAppealsModal"
|
||||
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>
|
||||
|
||||
<div
|
||||
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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
|
||||
>
|
||||
<!-- Header bar (sticky) with exit button -->
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<h2 class="text-2xl font-bold text-white mb-0">Content Appeals Form</h2>
|
||||
<button
|
||||
id="closeContentAppealsModal"
|
||||
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>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="w-full" style="height: 80vh">
|
||||
<iframe></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
56
src/components/feature-request-form.html
Normal file
56
src/components/feature-request-form.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!-- components/feature-request-form.html -->
|
||||
<div
|
||||
id="featureRequestModal"
|
||||
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>
|
||||
|
||||
<div
|
||||
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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
|
||||
>
|
||||
<!-- Header bar (sticky) with exit button -->
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<h2 class="text-2xl font-bold text-white mb-0">Feature Request Form</h2>
|
||||
<button
|
||||
id="closeFeatureRequestModal"
|
||||
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>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="w-full" style="height: 80vh">
|
||||
<iframe></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
58
src/components/general-feedback-form.html
Normal file
58
src/components/general-feedback-form.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!-- components/general-feedback-form.html -->
|
||||
<div
|
||||
id="generalFeedbackModal"
|
||||
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>
|
||||
|
||||
<div
|
||||
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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
|
||||
>
|
||||
<!-- Header bar (sticky) with exit button -->
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<h2 class="text-2xl font-bold text-white mb-0">
|
||||
General Feedback Form
|
||||
</h2>
|
||||
<button
|
||||
id="closeGeneralFeedbackModal"
|
||||
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>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="w-full" style="height: 80vh">
|
||||
<iframe></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -323,7 +323,7 @@ footer a:hover {
|
||||
inset: 0;
|
||||
background-color: rgb(0 0 0 / 0.9);
|
||||
z-index: 50;
|
||||
display: none; /* hidden by default */
|
||||
/* remove display: none; */
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
@@ -331,7 +331,6 @@ footer a:hover {
|
||||
|
||||
#disclaimerModal .modal-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg);
|
||||
@@ -376,16 +375,6 @@ footer a:hover {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#disclaimerModal .modal-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 42rem;
|
||||
max-height: 90vh;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#disclaimerModal .modal-scroll {
|
||||
max-height: calc(90vh - 5rem);
|
||||
}
|
||||
|
||||
358
src/index.html
358
src/index.html
@@ -95,6 +95,7 @@
|
||||
id="errorContainer"
|
||||
class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
|
||||
></div>
|
||||
|
||||
<!-- Success Container -->
|
||||
<div
|
||||
id="successContainer"
|
||||
@@ -114,101 +115,162 @@
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Disclaimer Modal (inline markup; adjust as needed) -->
|
||||
<div id="disclaimerModal" class="hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-scroll">
|
||||
<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 mb-4 text-center text-white">
|
||||
Welcome to bitvid
|
||||
</h2>
|
||||
<!-- Warning Alert -->
|
||||
<!-- 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="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<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"
|
||||
<!-- 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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<div class="space-y-6 text-gray-300">
|
||||
<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.
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<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 class="button-container">
|
||||
<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-gray-900 transition-colors duration-200"
|
||||
>
|
||||
I Understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -343,15 +405,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Load the login modal and application form modal
|
||||
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 (login-modal, application-form)");
|
||||
console.log("Modals loaded.");
|
||||
|
||||
//
|
||||
// 1) Top nav login button => open the login modal
|
||||
// 1) Login button => open login modal
|
||||
//
|
||||
const loginNavBtn = document.getElementById("loginButton");
|
||||
if (loginNavBtn) {
|
||||
@@ -364,7 +432,7 @@
|
||||
}
|
||||
|
||||
//
|
||||
// 2) Close button on the login modal
|
||||
// 2) Close login modal
|
||||
//
|
||||
const closeLoginBtn = document.getElementById("closeLoginModal");
|
||||
if (closeLoginBtn) {
|
||||
@@ -377,7 +445,7 @@
|
||||
}
|
||||
|
||||
//
|
||||
// 3) “Application Form” button inside the login modal => open the application form
|
||||
// 3) “Application Form” button => open application form
|
||||
//
|
||||
const openAppFormBtn = document.getElementById("openApplicationModal");
|
||||
if (openAppFormBtn) {
|
||||
@@ -396,7 +464,7 @@
|
||||
}
|
||||
|
||||
//
|
||||
// 4) Close button on the application form modal
|
||||
// 4) Close application form
|
||||
//
|
||||
const closeNostrFormBtn = document.getElementById(
|
||||
"closeNostrFormModal"
|
||||
@@ -409,6 +477,114 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 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");
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 6) Close content appeals modal
|
||||
//
|
||||
const closeAppealsBtn = document.getElementById(
|
||||
"closeContentAppealsModal"
|
||||
);
|
||||
if (closeAppealsBtn) {
|
||||
closeAppealsBtn.addEventListener("click", () => {
|
||||
const appealsModal = document.getElementById("contentAppealsModal");
|
||||
if (appealsModal) {
|
||||
appealsModal.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// 7) Show disclaimer modal on page load, hide on "I Understand"
|
||||
//
|
||||
const disclaimerModal = document.getElementById("disclaimerModal");
|
||||
const acceptDisclaimerBtn = document.getElementById("acceptDisclaimer");
|
||||
if (disclaimerModal) {
|
||||
// Show immediately
|
||||
disclaimerModal.classList.remove("hidden");
|
||||
if (acceptDisclaimerBtn) {
|
||||
acceptDisclaimerBtn.addEventListener("click", () => {
|
||||
disclaimerModal.classList.add("hidden");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 8) Query param checks for the three new forms
|
||||
//
|
||||
// ?modal=feedback => open generalFeedbackModal
|
||||
// ?modal=feature => open featureRequestModal
|
||||
// ?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>
|
||||
|
||||
|
||||
@@ -2,28 +2,35 @@ class DisclaimerModal {
|
||||
constructor() {
|
||||
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() {
|
||||
const closeModal = () => {
|
||||
this.modal.style.display = "none";
|
||||
document.body.style.overflow = "unset";
|
||||
localStorage.setItem("hasSeenDisclaimer", "true");
|
||||
};
|
||||
|
||||
// Only keep the accept button event listener
|
||||
this.acceptButton.addEventListener("click", closeModal);
|
||||
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");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
// Only show it if the user hasn't seen it before
|
||||
if (!this.hasSeenDisclaimer) {
|
||||
this.modal.style.display = "flex";
|
||||
document.body.style.overflow = "hidden";
|
||||
if (this.modal) {
|
||||
this.modal.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Export an instance that you can import in your main script
|
||||
export const disclaimerModal = new DisclaimerModal();
|
||||
|
||||
Reference in New Issue
Block a user