mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Align iframe forms with design tokens
This commit is contained in:
thePR0M3TH3AN committed
1 parent
72a6a6357c
commit
2153d3f74c
6 files changed
+314
-648
No files matched your search
@@ -6,129 +6,8 @@
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
/* Remove width constraints from body so our container can be full width */
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Override the .container to use the full available width */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Card-like container for the form */
|
||||
.form-container {
|
||||
background-color: #111827; /* Tailwind's bg-gray-900 */
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Labels in a light gray */
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
color: #e5e7eb; /* Tailwind's text-gray-200 */
|
||||
}
|
||||
|
||||
/* Input, textarea, select mimic modal field styles */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75em;
|
||||
background-color: #1f2937; /* Tailwind's bg-gray-800 */
|
||||
color: #f3f4f6; /* Tailwind's text-gray-100 */
|
||||
border: 1px solid #374151; /* Tailwind's border-gray-700 */
|
||||
padding: 0.5em;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #3b82f6; /* blue-500 */
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
/* Style for checkboxes – display inline with a label */
|
||||
.checkbox-group label {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Button styled similarly to modal publish button */
|
||||
button {
|
||||
padding: 0.5em 1em;
|
||||
background: #3b82f6; /* blue-500 */
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Status log area */
|
||||
#status {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
background: #111827;
|
||||
white-space: pre-wrap;
|
||||
min-height: 80px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.status-line {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.error {
|
||||
color: #f87171; /* a red tint */
|
||||
}
|
||||
.success {
|
||||
color: #3b82f6; /* blue-500 */
|
||||
}
|
||||
.warn {
|
||||
color: #facc15; /* a yellow tone */
|
||||
}
|
||||
|
||||
/* Custom Scrollbar styling for WebKit browsers */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
/* Custom Scrollbar styling for Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
@@ -146,6 +25,7 @@
|
||||
<h2>1. Applicant Information</h2>
|
||||
<label for="applicantNpub">Nostr Public Key (npub):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="applicantNpub"
|
||||
placeholder="Enter your npub"
|
||||
@@ -156,6 +36,7 @@
|
||||
>Preferred Contact Method (if applicable):</label
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="contactMethod"
|
||||
placeholder="Nostr DM, email, or other"
|
||||
@@ -163,6 +44,7 @@
|
||||
|
||||
<label for="username">Username or Alias (if applicable):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Enter your preferred name"
|
||||
@@ -175,11 +57,17 @@
|
||||
</p>
|
||||
<div class="checkbox-group">
|
||||
<label
|
||||
><input type="checkbox" name="contentType" value="Educational" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="contentType"
|
||||
value="Educational"
|
||||
/>
|
||||
Educational</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="contentType"
|
||||
value="Entertainment"
|
||||
@@ -188,6 +76,7 @@
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="contentType"
|
||||
value="News & Journalism"
|
||||
@@ -196,6 +85,7 @@
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="contentType"
|
||||
value="Creative Works"
|
||||
@@ -204,6 +94,7 @@
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="contentType"
|
||||
value="Discussions & Opinions"
|
||||
@@ -211,12 +102,18 @@
|
||||
Discussions & Opinions</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="contentType" value="Other" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="contentType"
|
||||
value="Other"
|
||||
/>
|
||||
Other</label
|
||||
>
|
||||
</div>
|
||||
<label for="otherContent">Other (please specify):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="otherContent"
|
||||
placeholder="Describe if Other was selected"
|
||||
@@ -224,6 +121,7 @@
|
||||
|
||||
<label for="whyJoin">Why do you want to join bitvid?</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="whyJoin"
|
||||
rows="3"
|
||||
placeholder="Explain your motivation"
|
||||
@@ -232,7 +130,7 @@
|
||||
<label for="priorExperience"
|
||||
>Have you created content on other platforms before?</label
|
||||
>
|
||||
<select id="priorExperience">
|
||||
<select class="select" id="priorExperience">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -242,6 +140,7 @@
|
||||
>If yes, provide links or references to your previous work:</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="experienceLinks"
|
||||
rows="2"
|
||||
placeholder="Paste links or describe your work"
|
||||
@@ -252,7 +151,7 @@
|
||||
<label for="familiarGuidelines"
|
||||
>Are you familiar with bitvid’s Community Guidelines?</label
|
||||
>
|
||||
<select id="familiarGuidelines">
|
||||
<select class="select" id="familiarGuidelines">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -262,7 +161,7 @@
|
||||
>Do you agree to follow the guidelines and respect decentralized
|
||||
moderation?</label
|
||||
>
|
||||
<select id="agreeGuidelines">
|
||||
<select class="select" id="agreeGuidelines">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -273,6 +172,7 @@
|
||||
community?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="communityContribution"
|
||||
rows="3"
|
||||
placeholder="Explain your approach"
|
||||
@@ -285,6 +185,7 @@
|
||||
bitvid?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="specialSkills"
|
||||
rows="3"
|
||||
placeholder="e.g., software development, moderation, design, advocacy"
|
||||
@@ -293,7 +194,7 @@
|
||||
<label for="testFeatures"
|
||||
>Would you be interested in helping test new features?</label
|
||||
>
|
||||
<select id="testFeatures">
|
||||
<select class="select" id="testFeatures">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -309,12 +210,17 @@
|
||||
revoked if guidelines are violated.
|
||||
</p>
|
||||
<label for="signature">Signature (Digital or Written):</label>
|
||||
<input type="text" id="signature" placeholder="Your signature" />
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="signature"
|
||||
placeholder="Your signature"
|
||||
/>
|
||||
|
||||
<label for="declarationDate">Date:</label>
|
||||
<input type="date" id="declarationDate" />
|
||||
<input class="form-control" type="date" id="declarationDate" />
|
||||
|
||||
<button type="submit">Submit Application</button>
|
||||
<button class="btn" type="submit">Submit Application</button>
|
||||
</form>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
|
||||
@@ -6,129 +6,8 @@
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
/* Remove width constraints from body so our container can be full width */
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Override the .container to use the full available width */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Card-like container for the form, similar to modal-content */
|
||||
.form-container {
|
||||
background-color: #111827; /* Tailwind's bg-gray-900 */
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Labels in a light gray */
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
color: #e5e7eb; /* Tailwind's text-gray-200 */
|
||||
}
|
||||
|
||||
/* Input, textarea, and select mimic modal field styles */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75em;
|
||||
background-color: #1f2937; /* Tailwind's bg-gray-800 */
|
||||
color: #f3f4f6; /* Tailwind's text-gray-100 */
|
||||
border: 1px solid #374151; /* Tailwind's border-gray-700 */
|
||||
padding: 0.5em;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #3b82f6; /* blue-500 */
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
/* Checkbox group styling */
|
||||
.checkbox-group label {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Button styled similarly to modal publish button */
|
||||
button {
|
||||
padding: 0.5em 1em;
|
||||
background: #3b82f6; /* blue-500 */
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Status log area */
|
||||
#status {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
background: #111827;
|
||||
white-space: pre-wrap;
|
||||
min-height: 80px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.status-line {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.error {
|
||||
color: #f87171; /* a red tint */
|
||||
}
|
||||
.success {
|
||||
color: #3b82f6; /* blue-500 */
|
||||
}
|
||||
.warn {
|
||||
color: #facc15; /* a yellow tone */
|
||||
}
|
||||
|
||||
/* Custom Scrollbar styling for WebKit browsers */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
/* Custom Scrollbar styling for Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
@@ -146,6 +25,7 @@
|
||||
<h2>1. User Information</h2>
|
||||
<label for="userNpub">Nostr Public Key (npub) (optional):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="userNpub"
|
||||
placeholder="Enter your npub (optional)"
|
||||
@@ -153,15 +33,26 @@
|
||||
<p>Are you a (check all that apply):</p>
|
||||
<div class="checkbox-group">
|
||||
<label
|
||||
><input type="checkbox" name="userRole" value="Viewer" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Viewer"
|
||||
/>
|
||||
Viewer</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="userRole" value="Content Creator" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Content Creator"
|
||||
/>
|
||||
Content Creator</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Developer/Contributor"
|
||||
@@ -174,24 +65,28 @@
|
||||
<h2>2. Bug Details</h2>
|
||||
<label for="issueDescription">Describe the issue:</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="issueDescription"
|
||||
rows="3"
|
||||
placeholder="Provide a clear and concise description of the problem"
|
||||
></textarea>
|
||||
<label for="stepsToReproduce">Steps to reproduce the bug:</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="stepsToReproduce"
|
||||
rows="3"
|
||||
placeholder="List the actions taken before encountering the issue"
|
||||
></textarea>
|
||||
<label for="expectedBehavior">Expected behavior:</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="expectedBehavior"
|
||||
rows="2"
|
||||
placeholder="What should have happened instead?"
|
||||
></textarea>
|
||||
<label for="actualBehavior">Actual behavior:</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="actualBehavior"
|
||||
rows="2"
|
||||
placeholder="What actually happened?"
|
||||
@@ -202,26 +97,43 @@
|
||||
<p>What device were you using? (check all that apply):</p>
|
||||
<div class="checkbox-group">
|
||||
<label
|
||||
><input type="checkbox" name="deviceUsed" value="Desktop" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="deviceUsed"
|
||||
value="Desktop"
|
||||
/>
|
||||
Desktop</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="deviceUsed" value="Mobile" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="deviceUsed"
|
||||
value="Mobile"
|
||||
/>
|
||||
Mobile</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="deviceUsed" value="Tablet" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="deviceUsed"
|
||||
value="Tablet"
|
||||
/>
|
||||
Tablet</label
|
||||
>
|
||||
</div>
|
||||
<label for="operatingSystem">Operating System:</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="operatingSystem"
|
||||
placeholder="e.g., Windows, macOS, Linux, iOS, Android"
|
||||
/>
|
||||
<label for="browserInfo">Browser (if applicable):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="browserInfo"
|
||||
placeholder="e.g., Chrome, Firefox, Safari"
|
||||
@@ -229,7 +141,7 @@
|
||||
<label for="usingVPN"
|
||||
>Are you using a VPN or privacy-focused browser settings?</label
|
||||
>
|
||||
<select id="usingVPN">
|
||||
<select class="select" id="usingVPN">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -241,6 +153,7 @@
|
||||
>Can you provide a screenshot or screen recording?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="screenshotInfo"
|
||||
rows="2"
|
||||
placeholder="Attach if possible (e.g., URL to screenshot)"
|
||||
@@ -249,12 +162,14 @@
|
||||
>Did the issue generate any error messages?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="errorMessages"
|
||||
rows="2"
|
||||
placeholder="Include the exact error messages, if any"
|
||||
></textarea>
|
||||
<label for="consoleLogs">Any relevant console logs?</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="consoleLogs"
|
||||
rows="2"
|
||||
placeholder="Paste any browser console logs if available"
|
||||
@@ -263,7 +178,7 @@
|
||||
<!-- Section 5: Additional Information -->
|
||||
<h2>5. Additional Information</h2>
|
||||
<label for="bugFrequency">How frequently does this bug occur?</label>
|
||||
<select id="bugFrequency">
|
||||
<select class="select" id="bugFrequency">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Every time">Every time</option>
|
||||
<option value="Occasionally">Occasionally</option>
|
||||
@@ -273,7 +188,7 @@
|
||||
>Does this bug impact core functionality (e.g., video playback,
|
||||
uploads, etc.)?</label
|
||||
>
|
||||
<select id="impactCore">
|
||||
<select class="select" id="impactCore">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -282,12 +197,13 @@
|
||||
>Any additional notes or suggestions?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="additionalNotes"
|
||||
rows="3"
|
||||
placeholder="Describe any other relevant details"
|
||||
></textarea>
|
||||
|
||||
<button type="submit">Submit Bug Report</button>
|
||||
<button class="btn" type="submit">Submit Bug Report</button>
|
||||
</form>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
|
||||
@@ -6,122 +6,8 @@
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
/* Remove width constraints from body so our container can be full width */
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Override the .container to use the full available width */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Card-like container for the form, similar to modal-content */
|
||||
.form-container {
|
||||
background-color: #111827; /* Tailwind's bg-gray-900 */
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Labels in a light gray */
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
color: #e5e7eb; /* Tailwind's text-gray-200 */
|
||||
}
|
||||
|
||||
/* Input, textarea, and select mimic modal field styles */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75em;
|
||||
background-color: #1f2937; /* Tailwind's bg-gray-800 */
|
||||
color: #f3f4f6; /* Tailwind's text-gray-100 */
|
||||
border: 1px solid #374151; /* Tailwind's border-gray-700 */
|
||||
padding: 0.5em;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #3b82f6; /* blue-500 */
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
/* Button styled similarly to modal publish button */
|
||||
button {
|
||||
padding: 0.5em 1em;
|
||||
background: #3b82f6; /* blue-500 */
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Status log area */
|
||||
#status {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
background: #111827;
|
||||
white-space: pre-wrap;
|
||||
min-height: 80px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.status-line {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.error {
|
||||
color: #f87171; /* a red tint */
|
||||
}
|
||||
.success {
|
||||
color: #3b82f6; /* blue-500 */
|
||||
}
|
||||
.warn {
|
||||
color: #facc15; /* a yellow tone */
|
||||
}
|
||||
|
||||
/* Custom Scrollbar styling for WebKit browsers */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
/* Custom Scrollbar styling for Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
@@ -138,6 +24,7 @@
|
||||
<h2>1. User Information</h2>
|
||||
<label for="contactMethod">Contact Method (if applicable):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="contactMethod"
|
||||
placeholder="Nostr DM, email, or other"
|
||||
@@ -146,6 +33,7 @@
|
||||
<h2>2. Content Details</h2>
|
||||
<label for="videoTitle">Title of the Video:</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="videoTitle"
|
||||
placeholder="Enter the exact title"
|
||||
@@ -153,19 +41,21 @@
|
||||
|
||||
<label for="magnetLink">Magnet Link:</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="magnetLink"
|
||||
placeholder="Enter the magnet link"
|
||||
/>
|
||||
|
||||
<label for="submissionDate">Date of Content Submission:</label>
|
||||
<input type="date" id="submissionDate" />
|
||||
<input class="form-control" type="date" id="submissionDate" />
|
||||
|
||||
<h2>3. Reason for Appeal</h2>
|
||||
<label for="reasonBlocked"
|
||||
>Why do you believe your content was unfairly blocked?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="reasonBlocked"
|
||||
rows="3"
|
||||
placeholder="Explain in detail"
|
||||
@@ -174,7 +64,7 @@
|
||||
<label for="fitsGuidelines"
|
||||
>Does your content fit within bitvid's Community Guidelines?</label
|
||||
>
|
||||
<select id="fitsGuidelines">
|
||||
<select class="select" id="fitsGuidelines">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -184,6 +74,7 @@
|
||||
>If yes, which guideline(s) support your appeal?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="guidelinesCited"
|
||||
rows="2"
|
||||
placeholder="Cite the specific guidelines"
|
||||
@@ -192,7 +83,7 @@
|
||||
<label for="editedContent"
|
||||
>Was this content edited after being blocked?</label
|
||||
>
|
||||
<select id="editedContent">
|
||||
<select class="select" id="editedContent">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -200,6 +91,7 @@
|
||||
|
||||
<label for="changesMade">If yes, what changes were made?</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="changesMade"
|
||||
rows="2"
|
||||
placeholder="Describe the modifications"
|
||||
@@ -210,6 +102,7 @@
|
||||
>Was there any misunderstanding or misclassification?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="misunderstanding"
|
||||
rows="2"
|
||||
placeholder="Provide context"
|
||||
@@ -219,6 +112,7 @@
|
||||
>Are there external references that validate your appeal?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="externalReferences"
|
||||
rows="2"
|
||||
placeholder="Links, citations, or additional info"
|
||||
@@ -233,12 +127,17 @@
|
||||
decisions are at the discretion of bitvid’s moderation process.
|
||||
</p>
|
||||
<label for="signature">Signature (Digital or Written):</label>
|
||||
<input type="text" id="signature" placeholder="Your signature" />
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="signature"
|
||||
placeholder="Your signature"
|
||||
/>
|
||||
|
||||
<label for="declarationDate">Date:</label>
|
||||
<input type="date" id="declarationDate" />
|
||||
<input class="form-control" type="date" id="declarationDate" />
|
||||
|
||||
<button type="submit">Submit Appeal</button>
|
||||
<button class="btn" type="submit">Submit Appeal</button>
|
||||
</form>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
|
||||
@@ -6,136 +6,8 @@
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
/* Remove width constraints from body so our container can be full width */
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Override the .container to use the full available width */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Card-like container for the form */
|
||||
.form-container {
|
||||
background-color: #111827; /* Tailwind's bg-gray-900 */
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Labels in a light gray */
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
color: #e5e7eb; /* Tailwind's text-gray-200 */
|
||||
}
|
||||
|
||||
/* Input, textarea, and select styling */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75em;
|
||||
background-color: #1f2937; /* Tailwind's bg-gray-800 */
|
||||
color: #f3f4f6; /* Tailwind's text-gray-100 */
|
||||
border: 1px solid #374151; /* Tailwind's border-gray-700 */
|
||||
padding: 0.5em;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #3b82f6; /* blue-500 */
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
/* Checkbox group styling */
|
||||
.checkbox-group label {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Radio group styling (for experience rating) */
|
||||
.radio-group label {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
button {
|
||||
padding: 0.5em 1em;
|
||||
background: #3b82f6; /* blue-500 */
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Status log area */
|
||||
#status {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
background: #111827;
|
||||
white-space: pre-wrap;
|
||||
min-height: 80px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.status-line {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.error {
|
||||
color: #f87171;
|
||||
}
|
||||
.success {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.warn {
|
||||
color: #facc15;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar styling for WebKit browsers */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
/* Custom Scrollbar styling for Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
@@ -152,6 +24,7 @@
|
||||
<h2>1. User Information</h2>
|
||||
<label for="userNpub">Nostr Public Key (npub) (optional):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="userNpub"
|
||||
placeholder="Enter your npub (optional)"
|
||||
@@ -159,15 +32,26 @@
|
||||
<p>Are you a (check all that apply):</p>
|
||||
<div class="checkbox-group">
|
||||
<label
|
||||
><input type="checkbox" name="userRole" value="Viewer" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Viewer"
|
||||
/>
|
||||
Viewer</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="userRole" value="Content Creator" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Content Creator"
|
||||
/>
|
||||
Content Creator</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Developer/Contributor"
|
||||
@@ -203,12 +87,14 @@
|
||||
</div>
|
||||
<label for="likeMost">What do you like most about bitvid?</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="likeMost"
|
||||
rows="3"
|
||||
placeholder="Describe the features, usability, or content you enjoy"
|
||||
></textarea>
|
||||
<label for="improvements">What would you like to see improved?</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="improvements"
|
||||
rows="3"
|
||||
placeholder="Provide specific areas for improvement"
|
||||
@@ -218,6 +104,7 @@
|
||||
use?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="confusingFeatures"
|
||||
rows="3"
|
||||
placeholder="Explain any challenges you’ve encountered"
|
||||
@@ -229,6 +116,7 @@
|
||||
>Do you have any other suggestions or thoughts about bitvid?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="otherSuggestions"
|
||||
rows="3"
|
||||
placeholder="Share any other feedback"
|
||||
@@ -236,7 +124,7 @@
|
||||
<label for="followUp"
|
||||
>Would you like to be contacted for follow-up discussions?</label
|
||||
>
|
||||
<select id="followUp">
|
||||
<select class="select" id="followUp">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -245,12 +133,13 @@
|
||||
>Preferred contact method (if applicable):</label
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="preferredContact"
|
||||
placeholder="Nostr DM, email, or other"
|
||||
/>
|
||||
|
||||
<button type="submit">Submit General Feedback</button>
|
||||
<button class="btn" type="submit">Submit General Feedback</button>
|
||||
</form>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
/* Shared styling for iframe-hosted forms so they match the modal design system. */
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family-sans);
|
||||
margin: var(--space-lg);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: var(--color-surface-alt);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.form-container > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
form > * + * {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
form h1,
|
||||
form h2 {
|
||||
color: var(--color-text);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--color-subtle-text);
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
label + .form-control,
|
||||
label + .textarea,
|
||||
label + .select {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
align-items: center;
|
||||
color: var(--color-subtle-text);
|
||||
display: inline-flex;
|
||||
font-weight: 500;
|
||||
gap: var(--space-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
align-items: center;
|
||||
color: var(--color-subtle-text);
|
||||
display: inline-flex;
|
||||
font-weight: 500;
|
||||
gap: var(--space-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.radio-group input[type="radio"] {
|
||||
accent-color: var(--color-info-strong);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.btn {
|
||||
align-self: flex-start;
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
#status {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: inset 0 0 0 1px var(--color-border-translucent);
|
||||
color: var(--color-subtle-text);
|
||||
min-height: 5rem;
|
||||
padding: var(--space-sm);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
color: var(--color-subtle-text);
|
||||
margin: var(--space-2xs) 0;
|
||||
}
|
||||
|
||||
.status-line.error {
|
||||
color: var(--color-critical-strong);
|
||||
}
|
||||
|
||||
.status-line.success {
|
||||
color: var(--color-info-strong);
|
||||
}
|
||||
|
||||
.status-line.warn {
|
||||
color: var(--color-warning-strong);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
margin: var(--space-md);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
}
|
||||
@@ -5,127 +5,8 @@
|
||||
<title>bitvid Feature Request Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
<style>
|
||||
/* Override for form page to match modal field styling */
|
||||
|
||||
/* Remove width constraints from body so our container can be full width */
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Full-width container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Card-like container for the form */
|
||||
.form-container {
|
||||
background-color: #111827;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Input, textarea, and select styling */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75em;
|
||||
background-color: #1f2937;
|
||||
color: #f3f4f6;
|
||||
border: 1px solid #374151;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.375rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #3b82f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
/* Checkbox group styling */
|
||||
.checkbox-group label {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
button {
|
||||
padding: 0.5em 1em;
|
||||
background: #3b82f6;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Status log area */
|
||||
#status {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
background: #111827;
|
||||
white-space: pre-wrap;
|
||||
min-height: 80px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.status-line {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.error {
|
||||
color: #f87171;
|
||||
}
|
||||
.success {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.warn {
|
||||
color: #facc15;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
@@ -142,6 +23,7 @@
|
||||
<h2>1. User Information</h2>
|
||||
<label for="userNpub">Nostr Public Key (npub) (optional):</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="userNpub"
|
||||
placeholder="Enter your npub (optional)"
|
||||
@@ -149,15 +31,26 @@
|
||||
<p>Are you a (check all that apply):</p>
|
||||
<div class="checkbox-group">
|
||||
<label
|
||||
><input type="checkbox" name="userRole" value="Viewer" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Viewer"
|
||||
/>
|
||||
Viewer</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="userRole" value="Content Creator" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Content Creator"
|
||||
/>
|
||||
Content Creator</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="userRole"
|
||||
value="Developer/Contributor"
|
||||
@@ -170,6 +63,7 @@
|
||||
<h2>2. Feature Request Details</h2>
|
||||
<label for="featureName">Feature Name:</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="featureName"
|
||||
placeholder="Short, descriptive title"
|
||||
@@ -177,18 +71,21 @@
|
||||
/>
|
||||
<label for="featureDescription">Describe the feature:</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="featureDescription"
|
||||
rows="3"
|
||||
placeholder="Explain in detail what the feature does and how it works"
|
||||
></textarea>
|
||||
<label for="featureImportance">Why is this feature important?</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="featureImportance"
|
||||
rows="2"
|
||||
placeholder="Describe how this will improve the platform and benefit users"
|
||||
></textarea>
|
||||
<label for="beneficiary">Who would benefit from this feature?</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="beneficiary"
|
||||
placeholder="e.g., Content Creators, Viewers, Both"
|
||||
@@ -200,12 +97,14 @@
|
||||
>Are there existing platforms that have this feature?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="existingPlatforms"
|
||||
rows="2"
|
||||
placeholder="Provide examples if applicable"
|
||||
></textarea>
|
||||
<label for="mockups">Do you have any mockups or examples?</label>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="mockups"
|
||||
rows="2"
|
||||
placeholder="Links, screenshots, or diagrams"
|
||||
@@ -214,7 +113,7 @@
|
||||
>Would you be willing to help test this feature if
|
||||
implemented?</label
|
||||
>
|
||||
<select id="willingToTest">
|
||||
<select class="select" id="willingToTest">
|
||||
<option value="">Select an option</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
@@ -225,15 +124,31 @@
|
||||
<p>How urgent is this feature?</p>
|
||||
<div class="checkbox-group">
|
||||
<label
|
||||
><input type="checkbox" name="featurePriority" value="High" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="featurePriority"
|
||||
value="High"
|
||||
/>
|
||||
High (Essential for platform success)</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="featurePriority" value="Medium" />
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="featurePriority"
|
||||
value="Medium"
|
||||
/>
|
||||
Medium (Would improve experience significantly)</label
|
||||
>
|
||||
<label
|
||||
><input type="checkbox" name="featurePriority" value="Low" /> Low
|
||||
><input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
name="featurePriority"
|
||||
value="Low"
|
||||
/>
|
||||
Low
|
||||
(Nice to have, but not urgent)</label
|
||||
>
|
||||
</div>
|
||||
@@ -241,12 +156,13 @@
|
||||
>Does this feature require technical expertise to implement?</label
|
||||
>
|
||||
<textarea
|
||||
class="textarea"
|
||||
id="techChallenges"
|
||||
rows="2"
|
||||
placeholder="Describe any dependencies or challenges"
|
||||
></textarea>
|
||||
|
||||
<button type="submit">Submit Feature Request</button>
|
||||
<button class="btn" type="submit">Submit Feature Request</button>
|
||||
</form>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user