thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-29 00:42:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align iframe forms with design tokens

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-10 23:17:27 -04:00
1 parent 72a6a6357c
commit 2153d3f74c
6 files changed
+314 -648
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/iframe_forms/iframe-bug-fix-form.html
+48 -132
View File
@@ -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>