This commit is contained in:
thePR0M3TH3AN committed 2025-10-21 12:51:01 -04:00
1 parent b33f7f5f23
commit b85a101749
271 files changed
+51743 -9272

No files matched your search

@@ -3,136 +3,14 @@
<head>
<meta charset="utf-8" />
<title>bitvid Whitelist Application Form</title>
<script type="module" src="./theme-sync.js"></script>
<!-- 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" />
<!-- Load nostr‑tools v2.10.4 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
</head>
<body>
<body class="iframe-form" data-ds="new">
<div class="container">
<div class="form-container">
<p>
@@ -146,6 +24,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 +35,7 @@
>Preferred Contact Method (if applicable):</label
>
<input
class="form-control"
type="text"
id="contactMethod"
placeholder="Nostr DM, email, or other"
@@ -163,6 +43,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 +56,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 +75,7 @@
>
<label
><input
class="checkbox"
type="checkbox"
name="contentType"
value="News & Journalism"
@@ -196,6 +84,7 @@
>
<label
><input
class="checkbox"
type="checkbox"
name="contentType"
value="Creative Works"
@@ -204,6 +93,7 @@
>
<label
><input
class="checkbox"
type="checkbox"
name="contentType"
value="Discussions & Opinions"
@@ -211,12 +101,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 +120,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 +129,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 +139,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 +150,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 +160,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 +171,7 @@
community?</label
>
<textarea
class="textarea"
id="communityContribution"
rows="3"
placeholder="Explain your approach"
@@ -285,6 +184,7 @@
bitvid?</label
>
<textarea
class="textarea"
id="specialSkills"
rows="3"
placeholder="e.g., software development, moderation, design, advocacy"
@@ -293,7 +193,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,17 +209,32 @@
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>
</div>
<script>
// Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
const noopLogger = {
log: () => {},
info: () => {},
warn: () => {},
error: () => {},
};
const dev = window.bitvidLogger?.dev || noopLogger;
const user = window.bitvidLogger?.user || noopLogger;
document.addEventListener("DOMContentLoaded", () => {
// Logging functions for both on-page and console output.
function log(msg, type = "info") {
@@ -330,7 +245,18 @@
if (type === "warn") div.classList.add("warn");
div.textContent = msg;
document.getElementById("status").appendChild(div);
console.log(`[${type.toUpperCase()}] ${msg}`);
const formatted = `[${type.toUpperCase()}] ${msg}`;
if (type === "error") {
user.error(formatted);
} else if (type === "warn") {
user.warn(formatted);
} else if (type === "success") {
user.log(formatted);
} else if (type === "info") {
dev.info(formatted);
} else {
dev.log(formatted);
}
}
function clear() {
document.getElementById("status").innerHTML = "";
@@ -553,10 +479,11 @@ For further questions, contact us through bitvid’s Nostr support channels.
);
} catch (err) {
log("Error: " + err.message, "error");
console.error(err);
user.error(err);
}
});
});
</script>
<div id="uiOverlay" data-overlay-root aria-hidden="true"></div>
</body>
</html>
+73 -137
View File
@@ -3,136 +3,13 @@
<head>
<meta charset="utf-8" />
<title>bitvid Bug Report Form</title>
<script type="module" src="./theme-sync.js"></script>
<!-- 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" />
<!-- Load nostr‑tools v2.10.4 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
</head>
<body>
<body class="iframe-form" data-ds="new">
<div class="container">
<div class="form-container">
<p>
@@ -146,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)"
@@ -153,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"
@@ -174,24 +63,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 +95,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 +139,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 +151,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 +160,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 +176,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 +186,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,17 +195,28 @@
>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>
</div>
<script>
// Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
const noopLogger = {
log: () => {},
info: () => {},
warn: () => {},
error: () => {},
};
const dev = window.bitvidLogger?.dev || noopLogger;
const user = window.bitvidLogger?.user || noopLogger;
document.addEventListener("DOMContentLoaded", () => {
// Logging functions for both on-page and console output.
function log(msg, type = "info") {
@@ -303,7 +227,18 @@
if (type === "warn") div.classList.add("warn");
div.textContent = msg;
document.getElementById("status").appendChild(div);
console.log(`[${type.toUpperCase()}] ${msg}`);
const formatted = `[${type.toUpperCase()}] ${msg}`;
if (type === "error") {
user.error(formatted);
} else if (type === "warn") {
user.warn(formatted);
} else if (type === "success") {
user.log(formatted);
} else if (type === "info") {
dev.info(formatted);
} else {
dev.log(formatted);
}
}
function clear() {
document.getElementById("status").innerHTML = "";
@@ -524,10 +459,11 @@ For urgent issues, contact us through bitvid’s Nostr support channels.
);
} catch (err) {
log("Error: " + err.message, "error");
console.error(err);
user.error(err);
}
});
});
</script>
<div id="uiOverlay" data-overlay-root aria-hidden="true"></div>
</body>
</html>
@@ -3,129 +3,13 @@
<head>
<meta charset="utf-8" />
<title>bitvid Content Appeals Form</title>
<script type="module" src="./theme-sync.js"></script>
<!-- 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" />
<!-- Load nostr‑tools v2.10.4 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
</head>
<body>
<body class="iframe-form" data-ds="new">
<div class="container">
<div class="form-container">
<p>
@@ -138,6 +22,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 +31,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 +39,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 +62,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 +72,7 @@
>If yes, which guideline(s) support your appeal?</label
>
<textarea
class="textarea"
id="guidelinesCited"
rows="2"
placeholder="Cite the specific guidelines"
@@ -192,7 +81,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 +89,7 @@
<label for="changesMade">If yes, what changes were made?</label>
<textarea
class="textarea"
id="changesMade"
rows="2"
placeholder="Describe the modifications"
@@ -210,6 +100,7 @@
>Was there any misunderstanding or misclassification?</label
>
<textarea
class="textarea"
id="misunderstanding"
rows="2"
placeholder="Provide context"
@@ -219,6 +110,7 @@
>Are there external references that validate your appeal?</label
>
<textarea
class="textarea"
id="externalReferences"
rows="2"
placeholder="Links, citations, or additional info"
@@ -233,17 +125,32 @@
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>
</div>
<script>
// Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
const noopLogger = {
log: () => {},
info: () => {},
warn: () => {},
error: () => {},
};
const dev = window.bitvidLogger?.dev || noopLogger;
const user = window.bitvidLogger?.user || noopLogger;
document.addEventListener("DOMContentLoaded", () => {
// Logging functions for both on-page and console output.
function log(msg, type = "info") {
@@ -254,7 +161,18 @@
if (type === "warn") div.classList.add("warn");
div.textContent = msg;
document.getElementById("status").appendChild(div);
console.log(`[${type.toUpperCase()}] ${msg}`);
const formatted = `[${type.toUpperCase()}] ${msg}`;
if (type === "error") {
user.error(formatted);
} else if (type === "warn") {
user.warn(formatted);
} else if (type === "success") {
user.log(formatted);
} else if (type === "info") {
dev.info(formatted);
} else {
dev.log(formatted);
}
}
function clear() {
document.getElementById("status").innerHTML = "";
@@ -457,10 +375,11 @@ For further questions, reach out through bitvid’s Nostr support channels.
);
} catch (err) {
log("Error: " + err.message, "error");
console.error(err);
user.error(err);
}
});
});
</script>
<div id="uiOverlay" data-overlay-root aria-hidden="true"></div>
</body>
</html>
+48 -139
View File
@@ -3,143 +3,13 @@
<head>
<meta charset="utf-8" />
<title>bitvid General Feedback Form</title>
<script type="module" src="./theme-sync.js"></script>
<!-- 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" />
<!-- Load nostr‑tools v2.10.4 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
</head>
<body>
<body class="iframe-form" data-ds="new">
<div class="container">
<div class="form-container">
<p>
@@ -152,6 +22,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 +30,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 +85,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 +102,7 @@
use?</label
>
<textarea
class="textarea"
id="confusingFeatures"
rows="3"
placeholder="Explain any challenges you’ve encountered"
@@ -229,6 +114,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 +122,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,17 +131,28 @@
>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>
</div>
<script>
// Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
const noopLogger = {
log: () => {},
info: () => {},
warn: () => {},
error: () => {},
};
const dev = window.bitvidLogger?.dev || noopLogger;
const user = window.bitvidLogger?.user || noopLogger;
document.addEventListener("DOMContentLoaded", () => {
// Logging function for on-page and console output.
function log(msg, type = "info") {
@@ -266,7 +163,18 @@
if (type === "warn") div.classList.add("warn");
div.textContent = msg;
document.getElementById("status").appendChild(div);
console.log(`[${type.toUpperCase()}] ${msg}`);
const formatted = `[${type.toUpperCase()}] ${msg}`;
if (type === "error") {
user.error(formatted);
} else if (type === "warn") {
user.warn(formatted);
} else if (type === "success") {
user.log(formatted);
} else if (type === "info") {
dev.info(formatted);
} else {
dev.log(formatted);
}
}
function clear() {
document.getElementById("status").innerHTML = "";
@@ -450,10 +358,11 @@ For additional discussions, reach out via bitvid’s Nostr support channels.
);
} catch (err) {
log("Error: " + err.message, "error");
console.error(err);
user.error(err);
}
});
});
</script>
<div id="uiOverlay" data-overlay-root aria-hidden="true"></div>
</body>
</html>
+69 -132
View File
@@ -3,133 +3,13 @@
<head>
<meta charset="utf-8" />
<title>bitvid Feature Request Form</title>
<script type="module" src="./theme-sync.js"></script>
<!-- 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" />
<!-- Load nostr‑tools v2.10.4 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
</head>
<body>
<body class="iframe-form" data-ds="new">
<div class="container">
<div class="form-container">
<p>
@@ -142,6 +22,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 +30,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 +62,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 +70,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 +96,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 +112,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 +123,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,17 +155,28 @@
>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>
</div>
<script>
// Provide no-op fallback loggers so embeds stay functional if bitvidLogger is unavailable.
const noopLogger = {
log: () => {},
info: () => {},
warn: () => {},
error: () => {},
};
const dev = window.bitvidLogger?.dev || noopLogger;
const user = window.bitvidLogger?.user || noopLogger;
document.addEventListener("DOMContentLoaded", () => {
// Logging function
function log(msg, type = "info") {
@@ -262,7 +187,18 @@
if (type === "warn") div.classList.add("warn");
div.textContent = msg;
document.getElementById("status").appendChild(div);
console.log(`[${type.toUpperCase()}] ${msg}`);
const formatted = `[${type.toUpperCase()}] ${msg}`;
if (type === "error") {
user.error(formatted);
} else if (type === "warn") {
user.warn(formatted);
} else if (type === "success") {
user.log(formatted);
} else if (type === "info") {
dev.info(formatted);
} else {
dev.log(formatted);
}
}
function clear() {
document.getElementById("status").innerHTML = "";
@@ -465,10 +401,11 @@ For further discussions, reach out through bitvid’s Nostr support channels.
);
} catch (err) {
log("Error: " + err.message, "error");
console.error(err);
user.error(err);
}
});
});
</script>
<div id="uiOverlay" data-overlay-root aria-hidden="true"></div>
</body>
</html>
+192
View File
@@ -0,0 +1,192 @@
import { THEME_ACCENT_OVERRIDES } from "../../config/instance-config.js";
(() => {
const VALID_THEMES = new Set(["light", "dark"]);
const STORAGE_KEY = "bitvid:theme";
const FALLBACK_THEME = "dark";
const ACCENT_CSS_VARIABLES = Object.freeze({
accent: "--color-accent",
accentStrong: "--color-accent-strong",
accentPressed: "--color-accent-pressed",
});
const ACCENT_TOKENS = Object.keys(ACCENT_CSS_VARIABLES);
const { documentElement: root } = document;
if (!(root instanceof HTMLElement)) {
return;
}
const sanitizeConfigOverrides = (overrides) => {
if (!overrides || typeof overrides !== "object") {
return {};
}
const sanitized = {};
Object.entries(overrides).forEach(([theme, themeOverrides]) => {
if (!VALID_THEMES.has(theme) || typeof themeOverrides !== "object") {
return;
}
const normalized = {};
ACCENT_TOKENS.forEach((token) => {
const value = themeOverrides[token];
if (typeof value === "string") {
const trimmed = value.trim();
if (trimmed !== "") {
normalized[token] = trimmed;
}
}
});
if (Object.keys(normalized).length > 0) {
sanitized[theme] = normalized;
}
});
return sanitized;
};
const CONFIG_ACCENT_OVERRIDES = sanitizeConfigOverrides(
THEME_ACCENT_OVERRIDES
);
const normalizeTheme = (value) => {
if (typeof value !== "string") {
return null;
}
const normalized = value.trim().toLowerCase();
if (normalized === "" || normalized === "default") {
return FALLBACK_THEME;
}
return VALID_THEMES.has(normalized) ? normalized : null;
};
const getParentRoot = () => {
try {
if (window.parent && window.parent !== window) {
const parentDocument = window.parent.document;
const parentRoot = parentDocument?.documentElement;
return parentRoot instanceof HTMLElement ? parentRoot : null;
}
} catch (error) {
return null;
}
return null;
};
const readParentTheme = () => {
const parentRoot = getParentRoot();
if (!parentRoot) {
return null;
}
return normalizeTheme(parentRoot.dataset?.theme);
};
const readStoredTheme = () => {
try {
return normalizeTheme(window.localStorage.getItem(STORAGE_KEY));
} catch (error) {
return null;
}
};
const applyTheme = (theme) => {
if (theme && VALID_THEMES.has(theme)) {
root.dataset.theme = theme;
} else {
root.removeAttribute("data-theme");
}
};
const readParentAccentOverrides = () => {
const parentRoot = getParentRoot();
if (!parentRoot) {
return null;
}
const overrides = {};
let hasOverride = false;
Object.values(ACCENT_CSS_VARIABLES).forEach((cssVariable) => {
try {
const value = parentRoot.style.getPropertyValue(cssVariable);
if (typeof value === "string") {
const trimmed = value.trim();
if (trimmed !== "") {
overrides[cssVariable] = trimmed;
hasOverride = true;
}
}
} catch (error) {
/* noop */
}
});
return hasOverride ? overrides : null;
};
const applyAccentOverrides = (theme) => {
const parentOverrides = readParentAccentOverrides();
const configOverrides = CONFIG_ACCENT_OVERRIDES[theme] || null;
ACCENT_TOKENS.forEach((token) => {
const cssVariable = ACCENT_CSS_VARIABLES[token];
const parentValue = parentOverrides?.[cssVariable];
const configValue = configOverrides?.[token];
const nextValue = parentValue || configValue || "";
if (typeof nextValue === "string" && nextValue.trim() !== "") {
root.style.setProperty(cssVariable, nextValue.trim());
} else {
root.style.removeProperty(cssVariable);
}
});
};
const syncTheme = () => {
const resolvedTheme =
readParentTheme() ?? readStoredTheme() ?? FALLBACK_THEME;
applyTheme(resolvedTheme);
applyAccentOverrides(resolvedTheme);
};
syncTheme();
const parentRoot = getParentRoot();
let observer;
if (parentRoot && typeof MutationObserver !== "undefined") {
observer = new MutationObserver(syncTheme);
observer.observe(parentRoot, {
attributes: true,
attributeFilter: ["data-theme", "style"],
});
}
window.addEventListener("storage", (event) => {
if (event?.key === STORAGE_KEY) {
syncTheme();
}
});
window.addEventListener(
"pageshow",
() => {
syncTheme();
},
{ once: true }
);
window.addEventListener(
"beforeunload",
() => {
if (observer) {
observer.disconnect();
}
},
{ once: true }
);
})();