feat: initial release of Protocol Droid v0.2.0
A tool for authoring, sharing, and curating social protocols. Features: - Protocol library with search, tag filtering, and sort by date/relevance - Protocol authoring with structured fields (title, description, steps, outcome, practice, source, tags) - Protocol forking with provenance tracking - Collection creation with searchable protocol picker and ordering - User accounts with roles (admin, member, viewer) - YAML import/export for portability - Self-hostable on LAMP/Cloudron, works in subdirectories - Responsive design with hamburger menu on mobile - About page Security: - CSRF protection via Origin/Referer validation - Session regeneration on login/register - Secure session cookie params (HttpOnly, SameSite, Secure) - Visibility enforcement on private/unlisted items - YAML object injection hardening - Login rate limiting - Path traversal protection - Input validation and length clamping - Vote value constraining Stack: PHP 8.x + MySQL/MariaDB, vanilla JS frontend, no external dependencies. Hippocratic License (HL3-CORE).
This commit is contained in:
Protocolbot
Executable
+838
@@ -0,0 +1,838 @@
|
||||
/* Protocol Droid — Frontend Application */
|
||||
|
||||
const API = '/api';
|
||||
let currentUser = null;
|
||||
let siteConfig = {};
|
||||
let allTags = [];
|
||||
let activeFilter = 'ALL';
|
||||
let editingSlug = null;
|
||||
let editingCollectionSlug = null;
|
||||
let collectionSelectedProtocols = [];
|
||||
let pickerProtocolList = [];
|
||||
let currentTags = [];
|
||||
let allExistingTags = [];
|
||||
|
||||
// --- API helpers ---
|
||||
async function api(path, options = {}) {
|
||||
const res = await fetch(API + path, {
|
||||
...options,
|
||||
headers: { 'Content-Type': 'application/json', ...options.headers },
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || 'Request failed');
|
||||
return data;
|
||||
}
|
||||
|
||||
// --- Init ---
|
||||
async function init() {
|
||||
// Route immediately — don't wait for API calls
|
||||
route();
|
||||
window.addEventListener('hashchange', route);
|
||||
|
||||
try {
|
||||
siteConfig = await api('/config');
|
||||
var tagline = document.getElementById('libTagline');
|
||||
if (tagline) tagline.textContent = siteConfig.tagline || '';
|
||||
document.title = siteConfig.name || 'Protocol Droid';
|
||||
} catch (e) {}
|
||||
|
||||
try {
|
||||
const { user } = await api('/auth/me');
|
||||
currentUser = user;
|
||||
} catch (e) {}
|
||||
renderAuth();
|
||||
|
||||
// Re-route after auth loads so auth-dependent UI renders correctly
|
||||
if (location.hash && location.hash !== '#library') {
|
||||
route();
|
||||
}
|
||||
}
|
||||
|
||||
function route() {
|
||||
const hash = location.hash.slice(1) || 'library';
|
||||
if (hash.startsWith('protocols/')) {
|
||||
showDetail(hash.split('/')[1]);
|
||||
} else if (hash.startsWith('users/') || hash.startsWith('user/')) {
|
||||
showUser(hash.split('/')[1]);
|
||||
} else if (hash.startsWith('collections/')) {
|
||||
showCollectionDetail(hash.split('/')[1]);
|
||||
} else if (hash === 'create') {
|
||||
navigate('create');
|
||||
} else if (hash === 'create-collection') {
|
||||
navigate('create-collection');
|
||||
} else if (hash === 'collections') {
|
||||
navigate('collections');
|
||||
} else if (hash === 'about') {
|
||||
navigate('about');
|
||||
} else {
|
||||
navigate('library');
|
||||
}
|
||||
}
|
||||
|
||||
let searchTimer = null;
|
||||
let currentRoute = '';
|
||||
|
||||
function navigate(view) {
|
||||
// Prevent double navigation from hashchange
|
||||
if (currentRoute === view) return;
|
||||
currentRoute = view;
|
||||
document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
|
||||
document.getElementById('view-' + view).style.display = 'block';
|
||||
document.querySelectorAll('header nav a').forEach(a => a.classList.toggle('active', a.dataset.view === view));
|
||||
document.querySelectorAll('.mobile-panel a').forEach(a => a.classList.toggle('active', a.dataset.view === view));
|
||||
closeMenu();
|
||||
updateBreadcrumb(view);
|
||||
if (view === 'library') { location.hash = 'library'; loadProtocols(); }
|
||||
if (view === 'collections') { location.hash = 'collections'; loadCollections(); }
|
||||
if (view === 'create') { editingSlug = null; resetForm(); }
|
||||
if (view === 'create-collection') { editingCollectionSlug = null; resetCollectionForm(); }
|
||||
if (view === 'about') { location.hash = 'about'; }
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
// --- Mobile menu ---
|
||||
function updateBreadcrumb(view) {
|
||||
const path = document.getElementById('crumbPath');
|
||||
const map = { library: '', create: 'create', collections: 'collections/', 'create-collection': 'collections/create', about: 'about' };
|
||||
path.textContent = map[view] || '';
|
||||
}
|
||||
|
||||
// --- Mobile menu ---
|
||||
function toggleMenu() {
|
||||
document.getElementById('mobilePanel').classList.toggle('open');
|
||||
}
|
||||
function closeMenu() {
|
||||
document.getElementById('mobilePanel').classList.remove('open');
|
||||
}
|
||||
function mobileNav(view) {
|
||||
navigate(view);
|
||||
}
|
||||
|
||||
// --- Auth ---
|
||||
function renderAuth() {
|
||||
const area = document.getElementById('authArea');
|
||||
const mobileAuth = document.getElementById('mobileAuth');
|
||||
if (currentUser) {
|
||||
area.innerHTML = '<a href="#user/' + currentUser.username + '" class="user-link">@' + currentUser.username + '</a>' +
|
||||
'<button class="auth-btn" onclick="logout()">Sign Out</button>';
|
||||
mobileAuth.innerHTML = '<a href="#user/' + currentUser.username + '" onclick="closeMenu()">@' + currentUser.username + '</a>' +
|
||||
'<button class="auth-btn" onclick="logout()">Sign Out</button>';
|
||||
} else {
|
||||
area.innerHTML = '<button class="auth-btn" onclick="openAuthModal(\'login\')">Sign In</button>' +
|
||||
'<button class="auth-btn" onclick="openAuthModal(\'register\')">Register</button>';
|
||||
mobileAuth.innerHTML = '<button class="auth-btn" onclick="closeMenu(); openAuthModal(\'login\')">Sign In</button>' +
|
||||
'<button class="auth-btn" onclick="closeMenu(); openAuthModal(\'register\')">Register</button>';
|
||||
}
|
||||
}
|
||||
|
||||
let authMode = 'login';
|
||||
function openAuthModal(mode) {
|
||||
authMode = mode;
|
||||
document.getElementById('authModal').style.display = 'flex';
|
||||
document.getElementById('authModalTitle').textContent = mode === 'register' ? 'Create Account' : 'Sign In';
|
||||
document.getElementById('authSubmit').textContent = mode === 'register' ? 'Register' : 'Sign In';
|
||||
document.getElementById('displayNameGroup').style.display = mode === 'register' ? 'block' : 'none';
|
||||
document.getElementById('authToggle').innerHTML = mode === 'register'
|
||||
? 'Already have an account? <a onclick="openAuthModal(\'login\')">Sign in</a>'
|
||||
: 'No account? <a onclick="openAuthModal(\'register\')">Register</a>';
|
||||
}
|
||||
function closeAuthModal() { document.getElementById('authModal').style.display = 'none'; }
|
||||
|
||||
async function handleAuth(e) {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('authUsername').value;
|
||||
const password = document.getElementById('authPassword').value;
|
||||
const displayName = document.getElementById('authDisplayName').value;
|
||||
try {
|
||||
let data;
|
||||
if (authMode === 'register') {
|
||||
data = await api('/auth/register', { method: 'POST', body: JSON.stringify({ username, password, display_name: displayName }) });
|
||||
} else {
|
||||
data = await api('/auth/login', { method: 'POST', body: JSON.stringify({ username, password }) });
|
||||
}
|
||||
currentUser = data;
|
||||
renderAuth();
|
||||
closeAuthModal();
|
||||
toast('Welcome, @' + data.username + '!');
|
||||
} catch (err) {
|
||||
toast(err.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
await api('/auth/logout', { method: 'POST' });
|
||||
currentUser = null;
|
||||
renderAuth();
|
||||
toast('Signed out');
|
||||
}
|
||||
|
||||
// --- Protocols ---
|
||||
let allProtocols = [];
|
||||
let sortBy = 'date';
|
||||
|
||||
function debouncedLoadProtocols() {
|
||||
if (searchTimer) clearTimeout(searchTimer);
|
||||
searchTimer = setTimeout(loadProtocols, 200);
|
||||
}
|
||||
|
||||
async function loadProtocols() {
|
||||
const q = document.getElementById('searchInput') ? document.getElementById('searchInput').value : '';
|
||||
try {
|
||||
// Fetch all protocols — we do priority-weighted search client-side
|
||||
allProtocols = await api('/protocols');
|
||||
const tagSet = new Set();
|
||||
allProtocols.forEach(p => (p.tags || []).forEach(t => tagSet.add(t)));
|
||||
allTags = [...tagSet].sort();
|
||||
renderFilters();
|
||||
|
||||
// Filter by tag
|
||||
let filtered = allProtocols;
|
||||
if (activeFilter !== 'ALL') {
|
||||
filtered = filtered.filter(p => (p.tags || []).some(t => t.toLowerCase() === activeFilter.toLowerCase()));
|
||||
}
|
||||
|
||||
// Filter + score by search query
|
||||
if (q.trim()) {
|
||||
var query = q.toLowerCase().trim();
|
||||
var scored = filtered.map(function(p) {
|
||||
var score = 0;
|
||||
if ((p.title || '').toLowerCase().includes(query)) score += 100;
|
||||
if ((p.tags || []).some(function(t) { return t.toLowerCase().includes(query); })) score += 50;
|
||||
if ((p.source || '').toLowerCase().includes(query)) score += 30;
|
||||
if ((p.author || '').toLowerCase().includes(query)) score += 30;
|
||||
if ((p.description || '').toLowerCase().includes(query)) score += 10;
|
||||
if ((p.steps || []).some(function(s) {
|
||||
return (s.headline || '').toLowerCase().includes(query) || (s.description || '').toLowerCase().includes(query);
|
||||
})) score += 5;
|
||||
if ((p.outcome || '').toLowerCase().includes(query)) score += 3;
|
||||
if ((p.practice || '').toLowerCase().includes(query)) score += 3;
|
||||
return { p: p, score: score };
|
||||
}).filter(function(item) { return item.score > 0; });
|
||||
if (sortBy === 'relevance') {
|
||||
scored.sort(function(a, b) { return b.score - a.score; });
|
||||
} else {
|
||||
scored.sort(function(a, b) { return (b.p.created_at || '').localeCompare(a.p.created_at || ''); });
|
||||
}
|
||||
filtered = scored.map(function(item) { return item.p; });
|
||||
} else {
|
||||
// No search query — sort by date (newest first)
|
||||
filtered = filtered.slice().sort(function(a, b) {
|
||||
return (b.created_at || '').localeCompare(a.created_at || '');
|
||||
});
|
||||
}
|
||||
|
||||
renderProtocolGrid(filtered);
|
||||
renderSortToggle();
|
||||
} catch (e) {
|
||||
document.getElementById('protocolGrid').innerHTML = '<div class="empty">No protocols found. ' + escapeHtml(e.message) + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function setSort(mode) {
|
||||
sortBy = mode;
|
||||
document.querySelectorAll('.sort-option').forEach(function(el) {
|
||||
el.classList.toggle('active', el.textContent.trim().startsWith(mode === 'date' ? 'date' : 'relevance'));
|
||||
});
|
||||
loadProtocols();
|
||||
}
|
||||
|
||||
function renderSortToggle() {
|
||||
// Update active state based on current sortBy
|
||||
document.querySelectorAll('.sort-option').forEach(function(el) {
|
||||
var isDate = el.textContent.trim().startsWith('date');
|
||||
el.classList.toggle('active', (sortBy === 'date' && isDate) || (sortBy === 'relevance' && !isDate));
|
||||
});
|
||||
}
|
||||
|
||||
function renderFilters() {
|
||||
const bar = document.getElementById('filterBar');
|
||||
if (!bar) return;
|
||||
var q = document.getElementById('tagSearch') ? document.getElementById('tagSearch').value.toLowerCase().trim() : '';
|
||||
var tags = allTags.slice().sort();
|
||||
if (q) {
|
||||
tags = tags.filter(function(t) { return t.toLowerCase().includes(q); });
|
||||
} else {
|
||||
tags = tags.slice(0, 10); // Show top 10 tags by default
|
||||
}
|
||||
tags = ['all', ...tags];
|
||||
bar.innerHTML = tags.map(function(t) {
|
||||
var display = t === 'all' ? 'all' : t;
|
||||
return '<span class="filter-pill ' + (t === activeFilter.toLowerCase() ? 'active' : '') + '" onclick="setFilter(\'' + t + '\')">' + escapeHtml(display) + '</span>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function toggleFilterPanel() {
|
||||
var panel = document.getElementById('filterPanel');
|
||||
var toggle = document.querySelector('.filter-toggle');
|
||||
panel.classList.toggle('open');
|
||||
toggle.classList.toggle('active', panel.classList.contains('open'));
|
||||
}
|
||||
|
||||
function renderFilteredTags() {
|
||||
renderFilters();
|
||||
}
|
||||
|
||||
function setFilter(tag) {
|
||||
activeFilter = tag;
|
||||
loadProtocols();
|
||||
}
|
||||
|
||||
function renderProtocolGrid(protocols) {
|
||||
const grid = document.getElementById('protocolGrid');
|
||||
if (!protocols.length) {
|
||||
grid.innerHTML = '<div class="empty">No protocols yet. <a href="#create" onclick="navigate(\'create\');return false">Create one</a></div>';
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = protocols.map(function(p) {
|
||||
var sourceLabel = p.source || (p.author ? '@' + p.author : '');
|
||||
var tags = (p.tags || []).map(function(t) { return '<span class="tag">' + escapeHtml(t) + '</span>'; }).join('');
|
||||
return '<div class="protocol-pill" onclick="showDetail(\'' + p.slug + '\')">' +
|
||||
'<div class="info"><h3>' + escapeHtml(p.title) + '</h3>' +
|
||||
'<p>' + escapeHtml(p.description || '') + '</p>' +
|
||||
(tags ? '<div class="tag-row">' + tags + '</div>' : '') + '</div>' +
|
||||
'<div class="meta"><div class="steps">' + (p.steps || []).length + ' steps</div>' +
|
||||
'<div>' + escapeHtml(sourceLabel) + '</div></div></div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// (iconFor removed — icons are no longer used)
|
||||
|
||||
// --- Detail ---
|
||||
async function showDetail(slug) {
|
||||
location.hash = 'protocols/' + slug;
|
||||
document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
|
||||
document.getElementById('view-detail').style.display = 'block';
|
||||
document.querySelectorAll('header nav a').forEach(a => a.classList.remove('active'));
|
||||
document.querySelectorAll('.mobile-panel a').forEach(a => a.classList.remove('active'));
|
||||
document.getElementById('crumbPath').textContent = 'protocols/' + slug;
|
||||
closeMenu();
|
||||
|
||||
try {
|
||||
const p = await api('/protocols/' + slug);
|
||||
document.getElementById('detailContent').innerHTML = renderDetail(p);
|
||||
renderDetailActions(p);
|
||||
} catch (e) {
|
||||
document.getElementById('detailContent').innerHTML = '<div class="empty">Protocol not found</div>';
|
||||
document.getElementById('detailActions').innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function renderDetail(p) {
|
||||
const tags = (p.tags || []).map(t => '<span class="tag">' + escapeHtml(t) + '</span>').join('');
|
||||
const steps = (p.steps || []).map(function(s, i) {
|
||||
return '<div class="step"><div class="number">' + String(i+1).padStart(2,'0') + '</div>' +
|
||||
'<div class="content"><h4>' + escapeHtml(s.headline) + '</h4><p>' + escapeHtml(s.description || '') + '</p></div></div>';
|
||||
}).join('');
|
||||
const forkNotice = p.forked_from ? '<div class="fork-notice">forked from: <a href="#protocol/' + p.forked_from + '" onclick="showDetail(\'' + p.forked_from + '\');return false">' + p.forked_from + '</a></div>' : '';
|
||||
const sourceLine = p.source ? 'SOURCE: ' + escapeHtml(p.source) : '';
|
||||
var sourceLink = p.source_url ? ' · <a href="' + escapeHtml(p.source_url) + '" target="_blank">view_original</a>' : '';
|
||||
var authorLine = p.author ? ' · authored by <a href="#user/' + p.author + '" onclick="showUser(\'' + p.author + '\');return false">@' + escapeHtml(p.author) + '</a>' : '';
|
||||
var dateLine = p.created_at ? ' · added ' + formatDate(p.created_at) : '';
|
||||
|
||||
return '<div class="detail-header"><div class="tag-row">' + tags + '</div>' +
|
||||
'<h1>' + escapeHtml(p.title) + '</h1>' +
|
||||
'<p class="description">' + escapeHtml(p.description || '') + '</p>' +
|
||||
'<div class="source">' + sourceLine + sourceLink + authorLine + dateLine + '</div>' +
|
||||
forkNotice + '</div>' +
|
||||
(steps ? '<div class="detail-section"><h2>Steps</h2>' + steps + '</div>' : '') +
|
||||
(p.outcome ? '<div class="detail-section"><h2>Outcome</h2><p class="outcome">' + escapeHtml(p.outcome) + '</p></div>' : '') +
|
||||
(p.practice ? '<div class="detail-section"><h2>Practice</h2><p class="practice">' + escapeHtml(p.practice) + '</p></div>' : '');
|
||||
}
|
||||
|
||||
function renderDetailActions(p) {
|
||||
const actions = document.getElementById('detailActions');
|
||||
const canEdit = currentUser && (p.author_id == currentUser.id || currentUser.role === 'admin');
|
||||
let html = '<button class="btn primary" onclick="forkProtocol(\'' + p.slug + '\')">Fork Protocol</button>' +
|
||||
'<button class="btn" onclick="exportYaml(\'' + p.slug + '\')">Export YAML</button>';
|
||||
if (canEdit) {
|
||||
html += '<button class="btn" onclick="editProtocol(\'' + p.slug + '\')">Edit</button>' +
|
||||
'<button class="btn danger" onclick="deleteProtocol(\'' + p.slug + '\')">Delete</button>';
|
||||
}
|
||||
actions.innerHTML = html;
|
||||
}
|
||||
|
||||
function forkProtocol(slug) {
|
||||
if (!currentUser) { toast('Sign in to fork protocols', true); return; }
|
||||
api('/protocols/' + slug).then(function(p) {
|
||||
navigate('create');
|
||||
editingSlug = null;
|
||||
document.querySelector('[name=title]').value = p.title + ' (Fork)';
|
||||
document.querySelector('[name=description]').value = p.description || '';
|
||||
currentTags = [...(p.tags || [])];
|
||||
renderTagChips();
|
||||
loadExistingTags();
|
||||
document.querySelector('[name=source]').value = '@' + currentUser.username;
|
||||
document.querySelector('[name=source_url]').value = p.source_url || '';
|
||||
document.querySelector('[name=outcome]').value = p.outcome || '';
|
||||
document.querySelector('[name=practice]').value = p.practice || '';
|
||||
editingSlug = '__fork__' + slug;
|
||||
document.getElementById('stepsEditor').innerHTML = '';
|
||||
(p.steps || []).forEach(function(s) { addStep(s.headline, s.description); });
|
||||
toast('Forking protocol — edit and save to create your version');
|
||||
});
|
||||
}
|
||||
|
||||
function editProtocol(slug) {
|
||||
api('/protocols/' + slug).then(function(p) {
|
||||
navigate('create');
|
||||
editingSlug = slug;
|
||||
document.querySelector('[name=title]').value = p.title;
|
||||
document.querySelector('[name=description]').value = p.description || '';
|
||||
currentTags = [...(p.tags || [])];
|
||||
renderTagChips();
|
||||
loadExistingTags();
|
||||
document.querySelector('[name=source]').value = p.source || '';
|
||||
document.querySelector('[name=source_url]').value = p.source_url || '';
|
||||
document.querySelector('[name=outcome]').value = p.outcome || '';
|
||||
document.querySelector('[name=practice]').value = p.practice || '';
|
||||
document.querySelector('[name=visibility]').value = p.visibility || 'public';
|
||||
document.getElementById('stepsEditor').innerHTML = '';
|
||||
(p.steps || []).forEach(function(s) { addStep(s.headline, s.description); });
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteProtocol(slug) {
|
||||
if (!confirm('Delete this protocol? This cannot be undone.')) return;
|
||||
try {
|
||||
await api('/protocols/' + slug, { method: 'DELETE' });
|
||||
toast('Protocol deleted');
|
||||
navigate('library');
|
||||
} catch (e) { toast(e.message, true); }
|
||||
}
|
||||
|
||||
function exportYaml(slug) {
|
||||
window.open(API + '/protocols/' + slug + '/yaml', '_blank');
|
||||
}
|
||||
|
||||
// --- Tag management ---
|
||||
async function loadExistingTags() {
|
||||
try {
|
||||
var protocols = await api('/protocols');
|
||||
var tagSet = new Set();
|
||||
protocols.forEach(function(p) { (p.tags || []).forEach(function(t) { tagSet.add(t); }); });
|
||||
allExistingTags = [...tagSet].sort();
|
||||
} catch (e) { allExistingTags = []; }
|
||||
}
|
||||
|
||||
function renderTagChips() {
|
||||
var container = document.getElementById('tagChips');
|
||||
container.innerHTML = currentTags.map(function(t, i) {
|
||||
return '<span class="tag-chip">' + escapeHtml(t) + '<button type="button" class="tag-remove" onclick="removeTag(' + i + ')">×</button></span>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function addTag(tag) {
|
||||
tag = tag.trim().toLowerCase();
|
||||
if (!tag || currentTags.includes(tag)) return;
|
||||
currentTags.push(tag);
|
||||
renderTagChips();
|
||||
document.getElementById('tagInput').value = '';
|
||||
hideTagSuggestions();
|
||||
}
|
||||
|
||||
function removeTag(i) {
|
||||
currentTags.splice(i, 1);
|
||||
renderTagChips();
|
||||
}
|
||||
|
||||
function handleTagKeydown(e) {
|
||||
if (e.key === 'Enter' || e.key === ',') {
|
||||
e.preventDefault();
|
||||
var val = e.target.value.trim();
|
||||
if (val) addTag(val);
|
||||
} else if (e.key === 'Backspace' && !e.target.value && currentTags.length) {
|
||||
removeTag(currentTags.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
function showTagSuggestions() {
|
||||
var q = document.getElementById('tagInput').value.trim().toLowerCase();
|
||||
if (!q) { hideTagSuggestions(); return; }
|
||||
var matches = allExistingTags.filter(function(t) { return t.includes(q) && !currentTags.includes(t); }).slice(0, 6);
|
||||
var el = document.getElementById('tagSuggestions');
|
||||
if (!matches.length) { hideTagSuggestions(); return; }
|
||||
el.innerHTML = matches.map(function(t) {
|
||||
return '<div class="tag-suggestion" onclick="addTag(\'' + escapeHtml(t) + '\')">' + escapeHtml(t) + '</div>';
|
||||
}).join('');
|
||||
el.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideTagSuggestions() {
|
||||
document.getElementById('tagSuggestions').style.display = 'none';
|
||||
}
|
||||
|
||||
// --- Create/Edit ---
|
||||
function resetForm() {
|
||||
document.getElementById('protocolForm').reset();
|
||||
document.getElementById('stepsEditor').innerHTML = '';
|
||||
editingSlug = null;
|
||||
currentTags = [];
|
||||
renderTagChips();
|
||||
loadExistingTags();
|
||||
}
|
||||
|
||||
function addStep(headline, description) {
|
||||
headline = headline || '';
|
||||
description = description || '';
|
||||
const editor = document.getElementById('stepsEditor');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'step-editor';
|
||||
const num = editor.children.length + 1;
|
||||
div.innerHTML =
|
||||
'<div class="step-num">> step ' + String(num).padStart(2,'0') + '</div>' +
|
||||
'<div class="step-field"><label>Headline</label>' +
|
||||
'<input type="text" class="step-headline" value="' + escapeHtml(headline) + '" placeholder="Step headline"></div>' +
|
||||
'<div class="step-field"><label>Description</label>' +
|
||||
'<input type="text" class="step-desc" value="' + escapeHtml(description) + '" placeholder="One-sentence description"></div>' +
|
||||
'<button class="remove-step" onclick="this.closest(\'.step-editor\').remove(); renumberSteps();">remove step</button>';
|
||||
editor.appendChild(div);
|
||||
renumberSteps();
|
||||
}
|
||||
|
||||
function renumberSteps() {
|
||||
document.querySelectorAll('#stepsEditor .step-editor').forEach(function(el, i) {
|
||||
el.querySelector('.step-num').textContent = '> step ' + String(i+1).padStart(2,'0');
|
||||
});
|
||||
}
|
||||
|
||||
async function saveProtocol(e) {
|
||||
e.preventDefault();
|
||||
if (!currentUser) { toast('Sign in to create protocols', true); openAuthModal('login'); return; }
|
||||
|
||||
const form = e.target;
|
||||
const forkedFrom = editingSlug && editingSlug.startsWith('__fork__') ? editingSlug.replace('__fork__', '') : null;
|
||||
const isEdit = editingSlug && !forkedFrom;
|
||||
|
||||
const data = {
|
||||
title: form.title.value,
|
||||
description: form.description.value,
|
||||
tags: currentTags.slice(),
|
||||
source: form.source.value || '@' + currentUser.username,
|
||||
source_url: form.source_url.value,
|
||||
outcome: form.outcome.value,
|
||||
practice: form.practice.value,
|
||||
visibility: form.visibility.value,
|
||||
forked_from: forkedFrom,
|
||||
steps: [...document.querySelectorAll('#stepsEditor .step-editor')].map(function(el) {
|
||||
return {
|
||||
headline: el.querySelector('.step-headline').value,
|
||||
description: el.querySelector('.step-desc').value,
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
await api('/protocols/' + editingSlug, { method: 'PUT', body: JSON.stringify(data) });
|
||||
toast('Protocol updated');
|
||||
showDetail(editingSlug);
|
||||
} else {
|
||||
const created = await api('/protocols', { method: 'POST', body: JSON.stringify(data) });
|
||||
toast('Protocol created');
|
||||
showDetail(created.slug);
|
||||
}
|
||||
} catch (err) { toast(err.message, true); }
|
||||
}
|
||||
|
||||
// --- Collections ---
|
||||
async function loadCollections() {
|
||||
try {
|
||||
var collections = await api('/collections');
|
||||
var q = document.getElementById('collectionSearch') ? document.getElementById('collectionSearch').value.toLowerCase().trim() : '';
|
||||
if (q) {
|
||||
collections = collections.filter(function(c) {
|
||||
return (c.title || '').toLowerCase().includes(q) || (c.description || '').toLowerCase().includes(q) || (c.author || '').toLowerCase().includes(q);
|
||||
});
|
||||
}
|
||||
var grid = document.getElementById('collectionsGrid');
|
||||
if (!collections.length) {
|
||||
grid.innerHTML = '<div class="empty">No collections yet. <a href="#" onclick="navigate(\'create-collection\');return false">Create one</a></div>';
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = collections.map(function(c) {
|
||||
var sourceLabel = c.author ? '@' + c.author : (c.source || '');
|
||||
return '<div class="protocol-pill collection" onclick="showCollectionDetail(\'' + c.slug + '\')">' +
|
||||
'<div class="info"><h3>' + escapeHtml(c.title) + '</h3><p>' + escapeHtml(c.description || '') + '</p></div>' +
|
||||
'<div class="meta"><div class="steps">' + (c.item_count || 0) + ' protocols</div><div>' + escapeHtml(sourceLabel) + '</div></div></div>';
|
||||
}).join('');
|
||||
} catch (e) {
|
||||
document.getElementById('collectionsGrid').innerHTML = '<div class="empty">' + escapeHtml(e.message) + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function resetCollectionForm() {
|
||||
document.getElementById('collectionForm').reset();
|
||||
collectionSelectedProtocols = [];
|
||||
loadProtocolPicker();
|
||||
}
|
||||
|
||||
async function loadProtocolPicker(selectedSlugs) {
|
||||
selectedSlugs = selectedSlugs || [];
|
||||
collectionSelectedProtocols = [...selectedSlugs];
|
||||
const picker = document.getElementById('collProtocolPicker');
|
||||
picker.innerHTML =
|
||||
'<div class="selected-list" id="selectedList"></div>' +
|
||||
'<div class="search-bar" style="margin-bottom:12px"><span class="prompt">></span><input type="text" id="pickerSearch" placeholder="search protocols to add..." oninput="filterPickerProtocols()"></div>' +
|
||||
'<div id="pickerList"><div class="empty">Search for protocols above to add them.</div></div>';
|
||||
try {
|
||||
pickerProtocolList = await api('/protocols');
|
||||
} catch (e) {
|
||||
pickerProtocolList = [];
|
||||
}
|
||||
// Don't render the list — it starts empty, user searches to add
|
||||
}
|
||||
|
||||
function renderPickerList(protocols) {
|
||||
const list = document.getElementById('pickerList');
|
||||
if (!protocols.length) {
|
||||
list.innerHTML = '<div class="empty">No matching protocols found.</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = '<div class="protocol-grid">' + protocols.map(function(p) {
|
||||
var selected = collectionSelectedProtocols.includes(p.slug);
|
||||
var sourceLabel = p.source || (p.author ? '@' + p.author : '');
|
||||
var tags = (p.tags || []).map(function(t) { return '<span class="tag">' + escapeHtml(t) + '</span>'; }).join('');
|
||||
return '<div class="protocol-pill picker-pill' + (selected ? ' selected' : '') + '" data-slug="' + escapeHtml(p.slug) + '" onclick="toggleProtocolSelectClick(\'' + escapeHtml(p.slug) + '\', this)">' +
|
||||
'<div class="info"><h3>' + escapeHtml(p.title) + '</h3>' +
|
||||
'<p>' + escapeHtml(p.description || '') + '</p>' +
|
||||
(tags ? '<div class="tag-row">' + tags + '</div>' : '') + '</div>' +
|
||||
'<div class="meta"><div class="steps">' + (p.steps || []).length + ' steps</div>' +
|
||||
'<div>' + escapeHtml(sourceLabel) + '</div></div></div>';
|
||||
}).join('') + '</div>';
|
||||
}
|
||||
|
||||
function toggleProtocolSelectClick(slug, el) {
|
||||
var i = collectionSelectedProtocols.indexOf(slug);
|
||||
if (i >= 0) {
|
||||
collectionSelectedProtocols.splice(i, 1);
|
||||
el.classList.remove('selected');
|
||||
} else {
|
||||
collectionSelectedProtocols.push(slug);
|
||||
el.classList.add('selected');
|
||||
}
|
||||
renderSelectedList();
|
||||
}
|
||||
|
||||
function renderSelectedList() {
|
||||
var container = document.getElementById('selectedList');
|
||||
if (!container) return;
|
||||
if (!collectionSelectedProtocols.length) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = '<div class="selected-list-header">Selected protocols (' + collectionSelectedProtocols.length + ')</div>' +
|
||||
collectionSelectedProtocols.map(function(slug, i) {
|
||||
// Find protocol in the cached list for display
|
||||
var p = pickerProtocolList.find(function(proto) { return proto.slug === slug; });
|
||||
var title = p ? escapeHtml(p.title) : escapeHtml(slug);
|
||||
return '<div class="selected-item" data-slug="' + escapeHtml(slug) + '">' +
|
||||
'<span class="selected-position">' + (i + 1) + '</span>' +
|
||||
'<span class="selected-title">' + title + '</span>' +
|
||||
'<button type="button" class="selected-move" onclick="moveSelected(' + i + ', -1)" title="move up">▲</button>' +
|
||||
'<button type="button" class="selected-move" onclick="moveSelected(' + i + ', 1)" title="move down">▼</button>' +
|
||||
'<button type="button" class="selected-remove" onclick="removeSelected(' + i + ')" title="remove">×</button>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function moveSelected(i, dir) {
|
||||
var j = i + dir;
|
||||
if (j < 0 || j >= collectionSelectedProtocols.length) return;
|
||||
var tmp = collectionSelectedProtocols[i];
|
||||
collectionSelectedProtocols[i] = collectionSelectedProtocols[j];
|
||||
collectionSelectedProtocols[j] = tmp;
|
||||
renderSelectedList();
|
||||
// Update picker highlight if visible
|
||||
refreshPickerHighlight();
|
||||
}
|
||||
|
||||
function removeSelected(i) {
|
||||
var slug = collectionSelectedProtocols[i];
|
||||
collectionSelectedProtocols.splice(i, 1);
|
||||
renderSelectedList();
|
||||
refreshPickerHighlight();
|
||||
}
|
||||
|
||||
function refreshPickerHighlight() {
|
||||
document.querySelectorAll('.picker-pill').forEach(function(el) {
|
||||
var slug = el.dataset.slug;
|
||||
if (slug) {
|
||||
el.classList.toggle('selected', collectionSelectedProtocols.includes(slug));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function filterPickerProtocols() {
|
||||
var q = document.getElementById('pickerSearch').value.toLowerCase().trim();
|
||||
var filtered = pickerProtocolList.filter(function(p) {
|
||||
return !q || p.title.toLowerCase().includes(q) || (p.description || '').toLowerCase().includes(q) || (p.tags || []).some(function(t) { return t.toLowerCase().includes(q); });
|
||||
});
|
||||
renderPickerList(filtered);
|
||||
}
|
||||
|
||||
// (checkbox-based toggle removed — now using toggleProtocolSelectClick)
|
||||
|
||||
async function saveCollection(e) {
|
||||
e.preventDefault();
|
||||
if (!currentUser) { toast('Sign in to create collections', true); openAuthModal('login'); return; }
|
||||
|
||||
const form = e.target;
|
||||
var data = {
|
||||
title: form['coll-title'].value,
|
||||
description: form['coll-description'].value,
|
||||
source: form['coll-source'].value || '@' + currentUser.username,
|
||||
visibility: form['coll-visibility'].value,
|
||||
items: collectionSelectedProtocols.map(function(slug) { return { type: 'protocol', slug: slug }; }),
|
||||
};
|
||||
|
||||
try {
|
||||
if (editingCollectionSlug) {
|
||||
await api('/collections/' + editingCollectionSlug, { method: 'PUT', body: JSON.stringify(data) });
|
||||
toast('Collection updated');
|
||||
showCollectionDetail(editingCollectionSlug);
|
||||
} else {
|
||||
var created = await api('/collections', { method: 'POST', body: JSON.stringify(data) });
|
||||
toast('Collection created');
|
||||
showCollectionDetail(created.slug);
|
||||
}
|
||||
} catch (err) { toast(err.message, true); }
|
||||
}
|
||||
|
||||
async function showCollectionDetail(slug) {
|
||||
location.hash = 'collections/' + slug;
|
||||
document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
|
||||
document.getElementById('view-collection-detail').style.display = 'block';
|
||||
document.querySelectorAll('header nav a').forEach(a => a.classList.remove('active'));
|
||||
document.querySelectorAll('.mobile-panel a').forEach(a => a.classList.remove('active'));
|
||||
document.getElementById('crumbPath').textContent = 'collections/' + slug;
|
||||
closeMenu();
|
||||
|
||||
try {
|
||||
var c = await api('/collections/' + slug);
|
||||
var itemsHtml = '';
|
||||
for (var i = 0; i < (c.items || []).length; i++) {
|
||||
var item = c.items[i];
|
||||
if (item.type === 'protocol') {
|
||||
try {
|
||||
var p = await api('/protocols/' + item.slug);
|
||||
itemsHtml += '<div class="protocol-pill" onclick="showDetail(\'' + p.slug + '\')">' +
|
||||
'<div class="info"><h3>' + escapeHtml(p.title) + '</h3>' +
|
||||
'<p>' + escapeHtml(p.description || '') + '</p>' +
|
||||
(p.tags && p.tags.length ? '<div class="tag-row">' + p.tags.map(function(t) { return '<span class="tag">' + escapeHtml(t) + '</span>'; }).join('') + '</div>' : '') + '</div>' +
|
||||
'<div class="meta"><div class="steps">' + (p.steps || []).length + ' steps</div></div></div>';
|
||||
} catch (e2) {
|
||||
itemsHtml += '<div class="protocol-pill"><div class="info"><h3>' + escapeHtml(item.slug) + '</h3><p>Protocol not found</p></div></div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
var sourceLine = c.source ? 'SOURCE: ' + escapeHtml(c.source) : '';
|
||||
var authorLine = c.author ? ' · authored by <a href="#user/' + c.author + '" onclick="showUser(\'' + c.author + '\');return false">@' + escapeHtml(c.author) + '</a>' : '';
|
||||
var dateLine = c.created_at ? ' · added ' + formatDate(c.created_at) : '';
|
||||
|
||||
document.getElementById('collectionDetailContent').innerHTML =
|
||||
'<div class="detail-header"><h1>' + escapeHtml(c.title) + '</h1>' +
|
||||
'<p class="description">' + escapeHtml(c.description || '') + '</p>' +
|
||||
'<div class="source">' + sourceLine + authorLine + dateLine + '</div></div>' +
|
||||
(itemsHtml ? '<div class="detail-section"><h2>Protocols (' + (c.items || []).length + ')</h2><div class="protocol-grid">' + itemsHtml + '</div></div>' : '<div class="empty">No protocols in this collection yet.</div>');
|
||||
|
||||
var canEdit = currentUser && (c.author_id == currentUser.id || currentUser.role === 'admin');
|
||||
var actionsHtml = '';
|
||||
if (canEdit) {
|
||||
actionsHtml += '<button class="btn" onclick="editCollection(\'' + c.slug + '\')">Edit</button>' +
|
||||
'<button class="btn danger" onclick="deleteCollection(\'' + c.slug + '\')">Delete</button>';
|
||||
}
|
||||
document.getElementById('collectionDetailActions').innerHTML = actionsHtml;
|
||||
} catch (e) {
|
||||
document.getElementById('collectionDetailContent').innerHTML = '<div class="empty">Collection not found</div>';
|
||||
document.getElementById('collectionDetailActions').innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function editCollection(slug) {
|
||||
api('/collections/' + slug).then(function(c) {
|
||||
navigate('create-collection');
|
||||
editingCollectionSlug = slug;
|
||||
document.querySelector('[name=coll-title]').value = c.title;
|
||||
document.querySelector('[name=coll-description]').value = c.description || '';
|
||||
document.querySelector('[name=coll-source]').value = c.source || '';
|
||||
document.querySelector('[name=coll-visibility]').value = c.visibility || 'public';
|
||||
var selectedSlugs = (c.items || []).filter(function(i) { return i.type === 'protocol'; }).map(function(i) { return i.slug; });
|
||||
loadProtocolPicker(selectedSlugs).then(function() { renderSelectedList(); });
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteCollection(slug) {
|
||||
if (!confirm('Delete this collection? This cannot be undone.')) return;
|
||||
try {
|
||||
await api('/collections/' + slug, { method: 'DELETE' });
|
||||
toast('Collection deleted');
|
||||
navigate('collections');
|
||||
} catch (e) { toast(e.message, true); }
|
||||
}
|
||||
|
||||
// --- User Profile ---
|
||||
async function showUser(username) {
|
||||
document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
|
||||
document.getElementById('view-detail').style.display = 'block';
|
||||
document.querySelectorAll('header nav a').forEach(a => a.classList.remove('active'));
|
||||
document.querySelectorAll('.mobile-panel a').forEach(a => a.classList.remove('active'));
|
||||
document.getElementById('crumbPath').textContent = 'users/' + username;
|
||||
closeMenu();
|
||||
try {
|
||||
const data = await api('/users/' + username);
|
||||
const p = data.protocols || [];
|
||||
const c = data.collections || [];
|
||||
document.getElementById('detailContent').innerHTML =
|
||||
'<div class="profile-card"><h2>@' + escapeHtml(data.user.username) + '</h2>' +
|
||||
(data.user.display_name ? '<div class="bio">' + escapeHtml(data.user.display_name) + '</div>' : '') +
|
||||
(data.user.bio ? '<div class="bio">' + escapeHtml(data.user.bio) + '</div>' : '') + '</div>' +
|
||||
(p.length ? '<div class="detail-section"><h2>Protocols (' + p.length + ')</h2>' +
|
||||
p.map(function(proto) {
|
||||
return '<div class="protocol-pill" onclick="showDetail(\'' + proto.slug + '\')">' +
|
||||
'<div class="info"><h3>' + escapeHtml(proto.title) + '</h3>' +
|
||||
'<p>' + escapeHtml(proto.description||'') + '</p>' +
|
||||
(proto.tags && proto.tags.length ? '<div class="tag-row">' + proto.tags.map(function(t) { return '<span class="tag">' + escapeHtml(t) + '</span>'; }).join('') + '</div>' : '') + '</div>' +
|
||||
'<div class="meta"><div class="steps">' + (proto.steps || []).length + ' steps</div></div></div>';
|
||||
}).join('') +
|
||||
'</div>' : '') +
|
||||
(c.length ? '<div class="detail-section"><h2>Collections (' + c.length + ')</h2>' +
|
||||
c.map(function(col) {
|
||||
return '<div class="protocol-pill collection" onclick="showCollectionDetail(\'' + col.slug + '\')"><div class="icon">[+]</div>' +
|
||||
'<div class="info"><h3>' + escapeHtml(col.title) + '</h3><p>' + escapeHtml(col.description||'') + '</p></div></div>';
|
||||
}).join('') +
|
||||
'</div>' : '');
|
||||
document.getElementById('detailActions').innerHTML = '';
|
||||
} catch (e) {
|
||||
document.getElementById('detailContent').innerHTML = '<div class="empty">User not found</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// --- Toast ---
|
||||
let toastTimer = null;
|
||||
function toast(msg, isError) {
|
||||
const el = document.getElementById('toast');
|
||||
el.textContent = msg;
|
||||
el.style.display = 'block';
|
||||
el.style.borderColor = isError ? '#c0392b' : 'var(--accent-bright)';
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(function() { el.style.display = 'none'; }, 3000);
|
||||
}
|
||||
|
||||
// --- Util ---
|
||||
function escapeHtml(s) {
|
||||
if (s === null || s === undefined) return '';
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');
|
||||
}
|
||||
|
||||
function formatDate(s) {
|
||||
if (!s) return '';
|
||||
// Normalize MySQL DATETIME format (space-separated) to ISO
|
||||
var d = new Date(String(s).replace(' ', 'T'));
|
||||
if (isNaN(d)) return s;
|
||||
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
|
||||
}
|
||||
|
||||
// --- Boot ---
|
||||
init();
|
||||
Executable
+237
@@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Protocol Droid</title>
|
||||
<link rel="stylesheet" href="/frontend/style.css">
|
||||
<meta name="theme-color" content="#0a1929">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="breadcrumb" onclick="navigate('library')">
|
||||
<span><span class="prompt">$</span> protocol-droid</span>
|
||||
<span class="crumb-path" id="crumbPath"></span>
|
||||
</div>
|
||||
<nav id="navBar">
|
||||
<a href="#library" class="active" data-view="library">PROTOCOLS</a>
|
||||
<a href="#collections" data-view="collections">COLLECTIONS</a>
|
||||
<a href="#about" data-view="about">ABOUT</a>
|
||||
</nav>
|
||||
<div class="auth-area" id="authArea"></div>
|
||||
<button class="hamburger" id="hamburger" onclick="toggleMenu()">☰</button>
|
||||
</header>
|
||||
|
||||
<div class="mobile-panel" id="mobilePanel">
|
||||
<a href="#library" data-view="library" class="active" onclick="mobileNav('library')">PROTOCOLS</a>
|
||||
<a href="#collections" data-view="collections" onclick="mobileNav('collections')">COLLECTIONS</a>
|
||||
<a href="#about" data-view="about" onclick="mobileNav('about')">ABOUT</a>
|
||||
<div class="mobile-auth" id="mobileAuth"></div>
|
||||
</div>
|
||||
|
||||
<main class="main">
|
||||
|
||||
<!-- LIBRARY VIEW -->
|
||||
<section class="view" id="view-library" style="display:none">
|
||||
<div class="toolbar">
|
||||
<div class="search-bar">
|
||||
<span class="prompt">></span>
|
||||
<input type="text" id="searchInput" placeholder="search protocols..." oninput="debouncedLoadProtocols()">
|
||||
</div>
|
||||
<button class="btn create-btn" onclick="navigate('create')"><span class="create-text">+ Create</span><span class="create-plus">+</span></button>
|
||||
</div>
|
||||
<div class="sort-bar" id="sortBar">
|
||||
<span class="sort-label">sort:</span>
|
||||
<span class="sort-option active" onclick="setSort('date')">date added</span>
|
||||
<span class="sort-option" onclick="setSort('relevance')">relevance</span>
|
||||
<span class="filter-toggle" onclick="toggleFilterPanel()">☰ filter</span>
|
||||
</div>
|
||||
<div class="filter-panel" id="filterPanel">
|
||||
<div class="search-bar" style="margin-bottom:10px">
|
||||
<span class="prompt">></span>
|
||||
<input type="text" id="tagSearch" placeholder="search tags..." oninput="renderFilteredTags()">
|
||||
</div>
|
||||
<div class="filters" id="filterBar"></div>
|
||||
</div>
|
||||
<div class="protocol-grid" id="protocolGrid"></div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT VIEW -->
|
||||
<section class="view" id="view-about" style="display:none">
|
||||
<div class="detail-header">
|
||||
<h1>About Protocol Droid</h1>
|
||||
<p class="description">A tool for authoring, sharing, and curating social protocols.</p>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<p class="outcome">Protocol Droid is a project of the <a href="https://MEDLab.host" target="_blank">Media Economies Design Lab</a> at the University of Colorado Boulder. The name is inspired by the class of droids in Star Wars known as protocol droids, which help facilitate cross-cultural interactions.</p>
|
||||
<p class="outcome" style="margin-top:12px">This project is inspired by RegenHub's <a href="https://library.regenhub.xyz/" target="_blank">Protocol Library</a>, developed by Kevin Owocki, and draws on the experience of MEDLab's <a href="https://communityrule.info" target="_blank">CommunityRule</a> platform.</p>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h2>What is a protocol?</h2>
|
||||
<p class="outcome">A protocol is a pattern of interaction among people, generally in the form of a particular sequence of actions. Protocols are micro-practices — more specific than patterns and more interaction-focused than rules. A rule says "decisions are made by consensus." A protocol says "here's the step-by-step process for reaching consensus in a meeting."</p>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h2>Features</h2>
|
||||
<p class="outcome">Browse a library of protocols contributed by the community. Author your own protocols with structured fields — steps, outcomes, practice tips. Fork existing protocols and adapt them to your context. Curate collections of protocols and share them. Tag protocols for discoverability. Export and import protocols as portable YAML files.</p>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h2>Self-hosting</h2>
|
||||
<p class="outcome">Protocol Droid is designed to be self-hostable and whitelabel-able. It runs on a standard LAMP stack with no external dependencies — no web fonts, no CDNs, no tracking. Deploy on Cloudron, any LAMP server, or your own infrastructure. Configure your site name, tagline, and theme through a simple config file.</p>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h2>Sister project</h2>
|
||||
<p class="outcome">Protocol Droid has a sister project: the <a href="https://git.medlab.host/ntnsndr/protocol-bicorder" target="_blank">Protocol Bicorder</a> — a diagnostic tool for evaluating protocols along a series of gradients between opposing terms. Where Protocol Droid is for documenting and sharing protocols, the Bicorder is for analyzing and comparing them.</p>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h2>License</h2>
|
||||
<p class="outcome">Hippocratic License (HL3-CORE) — do no harm. See <a href="https://firstdonoharm.dev/" target="_blank">firstdonoharm.dev</a>. Source code available on <a href="https://git.medlab.host/ntnsndr/protocol-droid" target="_blank">Gitea</a>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROTOCOL DETAIL VIEW -->
|
||||
<section class="view" id="view-detail" style="display:none">
|
||||
<div id="detailContent"></div>
|
||||
<div class="actions" id="detailActions"></div>
|
||||
</section>
|
||||
|
||||
<!-- CREATE/EDIT PROTOCOL VIEW -->
|
||||
<section class="view" id="view-create" style="display:none">
|
||||
<form id="protocolForm" onsubmit="saveProtocol(event)">
|
||||
<div class="form-group">
|
||||
<label>Title</label>
|
||||
<input type="text" name="title" required maxlength="255" placeholder="Round Robin Check-In">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<textarea name="description" rows="2" maxlength="280" placeholder="A sentence or two about its context and purpose"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Tags</label>
|
||||
<div class="tag-input-wrapper">
|
||||
<div class="tag-chips" id="tagChips"></div>
|
||||
<input type="text" id="tagInput" placeholder="type a tag and press enter..." onkeydown="handleTagKeydown(event)" oninput="showTagSuggestions()">
|
||||
<div class="tag-suggestions" id="tagSuggestions"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Source</label>
|
||||
<input type="text" name="source" placeholder="Group Works Deck (or @username)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Source URL</label>
|
||||
<input type="text" name="source_url" placeholder="https://...">
|
||||
</div>
|
||||
<div id="stepsEditor"></div>
|
||||
<button type="button" class="btn add-step" onclick="addStep()">+ Add Step</button>
|
||||
<div class="form-group">
|
||||
<label>Outcome</label>
|
||||
<textarea name="outcome" rows="2" placeholder="What should happen if it is done right"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Practice</label>
|
||||
<textarea name="practice" rows="3" placeholder="Tips for learning to do it better"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Visibility</label>
|
||||
<select name="visibility">
|
||||
<option value="public">Public — visible in the library</option>
|
||||
<option value="unlisted">Unlisted — accessible by URL only</option>
|
||||
<option value="private">Private — only visible to you</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save Protocol</button>
|
||||
<button type="button" class="btn" onclick="navigate('library')">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- COLLECTIONS VIEW -->
|
||||
<section class="view" id="view-collections" style="display:none">
|
||||
<div class="toolbar">
|
||||
<div class="search-bar">
|
||||
<span class="prompt">></span>
|
||||
<input type="text" id="collectionSearch" placeholder="search collections..." oninput="loadCollections()">
|
||||
</div>
|
||||
<button class="btn create-btn" onclick="navigate('create-collection')"><span class="create-text">+ Create</span><span class="create-plus">+</span></button>
|
||||
</div>
|
||||
<div class="protocol-grid" id="collectionsGrid"></div>
|
||||
</section>
|
||||
|
||||
<!-- CREATE/EDIT COLLECTION VIEW -->
|
||||
<section class="view" id="view-create-collection" style="display:none">
|
||||
<form id="collectionForm" onsubmit="saveCollection(event)">
|
||||
<div class="form-group">
|
||||
<label>Title</label>
|
||||
<input type="text" name="coll-title" required maxlength="255" placeholder="Protocols for Mutual Aid Groups">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<textarea name="coll-description" rows="2" maxlength="280" placeholder="A sentence or two about the collection's context and purpose"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Source</label>
|
||||
<input type="text" name="coll-source" placeholder="Author or community (or @username)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Visibility</label>
|
||||
<select name="coll-visibility">
|
||||
<option value="public">Public — visible in the library</option>
|
||||
<option value="unlisted">Unlisted — accessible by URL only</option>
|
||||
<option value="private">Private — only visible to you</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Add protocols to this collection</label>
|
||||
<div id="collProtocolPicker"></div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save Collection</button>
|
||||
<button type="button" class="btn" onclick="navigate('collections')">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- COLLECTION DETAIL VIEW -->
|
||||
<section class="view" id="view-collection-detail" style="display:none">
|
||||
<div id="collectionDetailContent"></div>
|
||||
<div class="actions" id="collectionDetailActions"></div>
|
||||
</section>
|
||||
|
||||
<!-- AUTH MODAL -->
|
||||
<div class="modal-overlay" id="authModal" style="display:none">
|
||||
<div class="modal">
|
||||
<h2 id="authModalTitle">Sign In</h2>
|
||||
<form onsubmit="handleAuth(event)">
|
||||
<div id="authFormArea">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" id="authUsername" required pattern="[a-zA-Z0-9_]{3,32}" placeholder="username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" id="authPassword" required minlength="6" placeholder="••••••••">
|
||||
</div>
|
||||
<div class="form-group" id="displayNameGroup">
|
||||
<label>Display Name (optional)</label>
|
||||
<input type="text" id="authDisplayName" placeholder="Jane Doe">
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary" id="authSubmit">Sign In</button>
|
||||
<button type="button" class="btn" onclick="closeAuthModal()">Cancel</button>
|
||||
</div>
|
||||
<div class="auth-toggle" id="authToggle"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TOAST -->
|
||||
<div class="toast" id="toast" style="display:none"></div>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="/frontend/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+530
@@ -0,0 +1,530 @@
|
||||
/* Protocol Droid — R2-Rebel Blend Stylesheet */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--bg: #f0f4f8;
|
||||
--bg-grid: #e2e8f0;
|
||||
--surface: #ffffff;
|
||||
--panel: #e8edf2;
|
||||
--ink: #0a1929;
|
||||
--ink-soft: #4a5568;
|
||||
--ink-dim: #8896a8;
|
||||
--accent: #0066cc;
|
||||
--accent-bright: #00aaff;
|
||||
--accent-deep: #003d7a;
|
||||
--green: #00875a;
|
||||
--green-bright: #00cc88;
|
||||
--border: #b0bec5;
|
||||
--border-light: #d0d8e0;
|
||||
--shadow: 0 2px 8px rgba(0,50,100,0.06);
|
||||
--shadow-hover: 0 4px 16px rgba(0,102,204,0.10);
|
||||
--mono: 'SF Mono', 'Courier New', 'Courier', monospace;
|
||||
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
body {
|
||||
font-family: var(--sans);
|
||||
background: var(--bg);
|
||||
background-image:
|
||||
linear-gradient(var(--bg-grid) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
color: var(--ink);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
padding: 0 16px;
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-bottom: 2px solid var(--accent-bright);
|
||||
position: relative;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0; right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--green-bright), var(--accent-bright), transparent);
|
||||
}
|
||||
/* Breadcrumb — two-line header: logo on top, location below */
|
||||
header .breadcrumb {
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
color: var(--accent-bright);
|
||||
cursor: pointer;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; }
|
||||
header .breadcrumb:hover { text-decoration: none; }
|
||||
header .crumb-path {
|
||||
font-size: 11px;
|
||||
color: var(--ink-dim);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Desktop nav — inline */
|
||||
header nav {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
header nav a {
|
||||
color: #8896a8;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-family: var(--mono);
|
||||
padding: 6px 12px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.15s;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
header nav a:hover { color: #fff; border-color: rgba(255,255,255,0.15); }
|
||||
header nav a.active { color: var(--accent-bright); border-color: rgba(0,170,255,0.3); background: rgba(0,170,255,0.08); }
|
||||
|
||||
.auth-area { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
.auth-area .user-link {
|
||||
color: var(--green-bright);
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.auth-area .auth-btn {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.auth-area .auth-btn:hover { background: rgba(255,255,255,0.1); }
|
||||
|
||||
/* Hamburger button — hidden on desktop */
|
||||
.hamburger {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Mobile dropdown panel */
|
||||
.mobile-panel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--ink);
|
||||
border-bottom: 2px solid var(--accent-bright);
|
||||
padding: 12px 16px;
|
||||
z-index: 50;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.mobile-panel.open { display: flex; }
|
||||
.mobile-panel a {
|
||||
color: #8896a8;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-family: var(--mono);
|
||||
padding: 10px 14px;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.mobile-panel a:hover { color: #fff; background: rgba(255,255,255,0.08); }
|
||||
.mobile-panel a.active { color: var(--accent-bright); background: rgba(0,170,255,0.08); }
|
||||
.mobile-panel .mobile-auth { display: flex; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); }
|
||||
.mobile-panel .mobile-auth .auth-btn {
|
||||
font-family: var(--mono); font-size: 12px; padding: 6px 12px;
|
||||
border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #fff;
|
||||
cursor: pointer; border-radius: 4px; white-space: nowrap;
|
||||
}
|
||||
.mobile-panel .mobile-auth .auth-btn:hover { background: rgba(255,255,255,0.1); }
|
||||
.mobile-panel .mobile-auth .user-link {
|
||||
color: var(--green-bright); font-family: var(--mono); font-size: 12px; text-decoration: none; white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main { max-width: 920px; margin: 0 auto; padding: 24px 16px; }
|
||||
|
||||
/* Tagline under header */
|
||||
.tagline { color: var(--ink-soft); font-size: 14px; margin-bottom: 20px; }
|
||||
|
||||
/* Search */
|
||||
.search-bar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: var(--surface); border: 1px solid var(--border-light);
|
||||
border-radius: 8px; padding: 8px 14px; margin-bottom: 20px;
|
||||
}
|
||||
.search-bar .prompt { font-family: var(--mono); font-size: 13px; color: var(--green); flex-shrink: 0; }
|
||||
.search-bar input {
|
||||
border: none; outline: none; background: transparent;
|
||||
font-family: var(--mono); font-size: 13px; color: var(--ink); flex: 1; min-width: 0;
|
||||
}
|
||||
.search-bar input::placeholder { color: var(--ink-dim); }
|
||||
|
||||
/* Sort bar */
|
||||
.sort-bar {
|
||||
display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
|
||||
font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
|
||||
}
|
||||
.sort-label { letter-spacing: 0.5px; }
|
||||
.sort-option {
|
||||
padding: 3px 10px; border-radius: 3px; cursor: pointer;
|
||||
border: 1px solid transparent; color: var(--ink-soft); transition: all 0.15s;
|
||||
}
|
||||
.sort-option:hover { border-color: var(--border-light); }
|
||||
.sort-option.active { background: var(--panel); color: var(--ink); border-color: var(--border-light); }
|
||||
.filter-toggle {
|
||||
margin-left: auto; padding: 3px 10px; border-radius: 3px; cursor: pointer;
|
||||
color: var(--ink-soft); border: 1px solid transparent; transition: all 0.15s;
|
||||
}
|
||||
.filter-toggle:hover { border-color: var(--border-light); }
|
||||
.filter-toggle.active { background: var(--panel); color: var(--ink); border-color: var(--border-light); }
|
||||
|
||||
/* Filter panel — collapsed by default */
|
||||
.filter-panel { display: none; margin-bottom: 16px; }
|
||||
.filter-panel.open { display: block; }
|
||||
|
||||
/* Filters */
|
||||
.filters { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
|
||||
.filter-pill {
|
||||
padding: 5px 12px; font-size: 11px; font-family: var(--mono);
|
||||
background: var(--surface); border: 1px solid var(--border-light);
|
||||
color: var(--ink-soft); cursor: pointer; transition: all 0.15s;
|
||||
border-radius: 3px; letter-spacing: 0.5px; white-space: nowrap;
|
||||
}
|
||||
.filter-pill:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
|
||||
/* Protocol grid */
|
||||
.protocol-grid { display: flex; flex-direction: column; gap: 10px; }
|
||||
.protocol-pill {
|
||||
background: var(--surface); border: 1px solid var(--border-light);
|
||||
border-radius: 16px; padding: 14px 20px; display: flex; align-items: flex-start;
|
||||
gap: 14px; cursor: pointer; transition: all 0.15s; box-shadow: var(--shadow);
|
||||
}
|
||||
.protocol-pill:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateX(2px); }
|
||||
.protocol-pill .icon {
|
||||
width: 38px; height: 38px; border-radius: 10px; background: var(--panel);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px; font-family: var(--mono); color: var(--accent);
|
||||
flex-shrink: 0; border: 1px solid var(--border-light);
|
||||
}
|
||||
.protocol-pill .info { flex: 1; min-width: 0; }
|
||||
.protocol-pill .info h3 { font-size: 14px; font-weight: bold; margin-bottom: 2px; font-family: var(--mono); word-break: break-word; }
|
||||
.protocol-pill .info p {
|
||||
font-size: 13px; color: var(--ink-soft); font-family: var(--sans);
|
||||
word-break: break-word; line-height: 1.4;
|
||||
}
|
||||
.protocol-pill .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); text-align: right; flex-shrink: 0; white-space: nowrap; }
|
||||
.protocol-pill .meta .steps { color: var(--accent); font-weight: bold; }
|
||||
.protocol-pill.collection {
|
||||
background: var(--ink); color: #fff; border-color: var(--accent-deep);
|
||||
}
|
||||
.protocol-pill.collection .icon { background: rgba(0,135,90,0.15); border-color: var(--green-bright); color: var(--green-bright); }
|
||||
.protocol-pill.collection .info p { color: #8896a8; }
|
||||
.protocol-pill.collection .meta { color: #8896a8; }
|
||||
.protocol-pill.collection .meta .steps { color: var(--green-bright); }
|
||||
|
||||
/* Detail view */
|
||||
.back-link { color: var(--accent); text-decoration: none; font-size: 12px; font-family: var(--mono); margin-bottom: 20px; display: inline-block; }
|
||||
.back-link:hover { text-decoration: underline; }
|
||||
|
||||
.detail-header {
|
||||
background: var(--surface); border-radius: 16px; padding: 24px 20px;
|
||||
margin-bottom: 16px; border: 1px solid var(--border-light); box-shadow: var(--shadow);
|
||||
}
|
||||
.detail-header .tag-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.detail-header .tag {
|
||||
font-family: var(--mono); font-size: 10px; padding: 3px 10px; border-radius: 3px;
|
||||
background: var(--panel); color: var(--ink-soft); letter-spacing: 0.5px;
|
||||
}
|
||||
.detail-header h1 {
|
||||
font-size: 22px; font-weight: bold; margin-bottom: 8px; letter-spacing: -0.3px;
|
||||
font-family: var(--mono); word-break: break-word;
|
||||
}
|
||||
.detail-header .description { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; font-family: var(--sans); }
|
||||
.detail-header .source {
|
||||
font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
|
||||
border-top: 1px solid var(--border-light); padding-top: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.detail-header .source a { color: var(--accent); text-decoration: none; }
|
||||
.detail-header .fork-notice {
|
||||
font-family: var(--mono); font-size: 11px; color: var(--green);
|
||||
background: rgba(0,135,90,0.06); border: 1px solid rgba(0,135,90,0.15);
|
||||
border-radius: 4px; padding: 6px 12px; margin-top: 12px; display: inline-block;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
background: var(--surface); border-radius: 16px; padding: 20px;
|
||||
margin-bottom: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow);
|
||||
}
|
||||
.detail-section h2 {
|
||||
font-size: 12px; font-family: var(--mono); text-transform: uppercase;
|
||||
letter-spacing: 1.5px; color: var(--accent); margin-bottom: 16px;
|
||||
}
|
||||
.detail-section h2::before { content: '// '; color: var(--ink-dim); }
|
||||
|
||||
.step { display: flex; gap: 14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); }
|
||||
.step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
|
||||
.step .number { font-family: var(--mono); font-weight: bold; font-size: 13px; color: var(--green); flex-shrink: 0; min-width: 32px; padding-top: 1px; }
|
||||
.step .number::before { content: '> '; color: var(--ink-dim); }
|
||||
.step .content h4 { font-size: 14px; font-weight: bold; margin-bottom: 3px; font-family: var(--mono); word-break: break-word; }
|
||||
.step .content p { font-size: 13px; color: var(--ink-soft); font-family: var(--sans); word-break: break-word; }
|
||||
.outcome, .practice { font-size: 14px; line-height: 1.6; font-family: var(--sans); }
|
||||
|
||||
/* Buttons */
|
||||
.actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
|
||||
.btn {
|
||||
padding: 9px 18px; border-radius: 8px; font-family: var(--mono); font-size: 12px;
|
||||
border: 1px solid var(--border); background: var(--surface); color: var(--ink);
|
||||
cursor: pointer; transition: all 0.15s; letter-spacing: 0.5px;
|
||||
}
|
||||
.btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
.btn.primary:hover { background: var(--accent-deep); }
|
||||
.btn.danger { border-color: #c0392b; color: #c0392b; }
|
||||
.btn.danger:hover { background: #c0392b; color: #fff; }
|
||||
.btn.add-step { margin: 12px 0; font-size: 12px; color: var(--green); border-color: var(--green); }
|
||||
.btn.add-step:hover { background: var(--green); color: #fff; }
|
||||
|
||||
/* Forms */
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group label { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.form-group input, .form-group textarea, .form-group select {
|
||||
width: 100%; padding: 10px 14px; border: 1px solid var(--border-light); border-radius: 8px;
|
||||
font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--surface);
|
||||
}
|
||||
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
|
||||
outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
|
||||
}
|
||||
.form-group textarea { resize: vertical; }
|
||||
|
||||
/* Step editor */
|
||||
.step-editor {
|
||||
background: var(--surface); border: 1px solid var(--border-light);
|
||||
border-radius: 8px; padding: 16px; margin-bottom: 12px;
|
||||
}
|
||||
.step-editor .step-num {
|
||||
font-family: var(--mono); font-size: 12px; color: var(--green);
|
||||
margin-bottom: 10px; font-weight: bold;
|
||||
}
|
||||
.step-editor .step-field { margin-bottom: 10px; }
|
||||
.step-editor .step-field label {
|
||||
display: block; font-family: var(--mono); font-size: 11px;
|
||||
color: var(--ink-soft); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px;
|
||||
}
|
||||
.step-editor .step-field input {
|
||||
width: 100%; padding: 8px 12px; border: 1px solid var(--border-light);
|
||||
border-radius: 6px; font-family: var(--sans); font-size: 14px; color: var(--ink);
|
||||
background: var(--surface);
|
||||
}
|
||||
.step-editor .step-field input:focus {
|
||||
outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
|
||||
}
|
||||
.step-editor .remove-step {
|
||||
font-size: 11px; color: #c0392b; cursor: pointer; background: none;
|
||||
border: none; font-family: var(--mono); margin-top: 4px;
|
||||
}
|
||||
.step-editor .remove-step:hover { text-decoration: underline; }
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200;
|
||||
padding: 20px;
|
||||
}
|
||||
.modal { background: var(--surface); border-radius: 16px; padding: 28px; max-width: 400px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
|
||||
.modal h2 { font-family: var(--mono); font-size: 18px; margin-bottom: 20px; }
|
||||
.auth-toggle { margin-top: 16px; font-size: 12px; font-family: var(--mono); color: var(--ink-soft); }
|
||||
.auth-toggle a { color: var(--accent); cursor: pointer; text-decoration: none; }
|
||||
.auth-toggle a:hover { text-decoration: underline; }
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
|
||||
background: var(--ink); color: #fff; padding: 12px 24px; border-radius: 8px;
|
||||
font-family: var(--mono); font-size: 13px; z-index: 300;
|
||||
border: 1px solid var(--accent-bright); max-width: 90vw; text-align: center;
|
||||
animation: toast-in 0.3s ease;
|
||||
}
|
||||
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; } }
|
||||
|
||||
/* Toolbar — search + create button on one line */
|
||||
.toolbar {
|
||||
display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
|
||||
}
|
||||
.toolbar .search-bar { flex: 1; margin-bottom: 0; }
|
||||
.create-btn {
|
||||
font-family: var(--mono); font-size: 13px; padding: 8px 16px;
|
||||
border: 1px solid var(--accent); color: var(--accent); background: var(--surface);
|
||||
border-radius: 8px; cursor: pointer; transition: all 0.15s; letter-spacing: 0.5px;
|
||||
white-space: nowrap; flex-shrink: 0;
|
||||
}
|
||||
.create-btn:hover { background: var(--accent); color: #fff; }
|
||||
.create-plus { display: none; }
|
||||
|
||||
/* Profile */
|
||||
.profile-card {
|
||||
background: var(--surface); border-radius: 16px; padding: 24px 20px;
|
||||
margin-bottom: 16px; border: 1px solid var(--border-light); box-shadow: var(--shadow);
|
||||
}
|
||||
.profile-card h2 { font-family: var(--mono); font-size: 20px; margin-bottom: 8px; }
|
||||
.profile-card .bio { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
|
||||
|
||||
/* Collection detail — inverted header to match collection modules */
|
||||
#view-collection-detail .detail-header {
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
border: 2px solid var(--accent-deep);
|
||||
box-shadow: 0 4px 12px rgba(0,50,100,0.12);
|
||||
}
|
||||
#view-collection-detail .detail-header h1 { color: var(--accent-bright); }
|
||||
#view-collection-detail .detail-header .description { color: #a0aec0; }
|
||||
#view-collection-detail .detail-header .source { border-top-color: rgba(255,255,255,0.1); color: #8896a8; }
|
||||
#view-collection-detail .detail-header .source a { color: var(--accent-bright); }
|
||||
#view-collection-detail .detail-section {
|
||||
border: 2px solid var(--border);
|
||||
box-shadow: 0 3px 10px rgba(0,50,100,0.08);
|
||||
}
|
||||
#view-collection-detail .detail-section h2 { color: var(--ink); }
|
||||
#view-collection-detail .detail-section h2::before { content: '// '; color: var(--ink-dim); }
|
||||
|
||||
/* Empty state */
|
||||
.empty { color: var(--ink-dim); font-family: var(--mono); font-size: 13px; padding: 20px; text-align: center; }
|
||||
.empty a { color: var(--accent); text-decoration: none; }
|
||||
|
||||
/* Tag input with chips */
|
||||
.tag-input-wrapper { position: relative; }
|
||||
.tag-chips {
|
||||
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
.tag-chips:empty { display: none; }
|
||||
.tag-chip {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
background: var(--panel); border: 1px solid var(--border-light);
|
||||
border-radius: 4px; padding: 4px 10px;
|
||||
font-family: var(--mono); font-size: 12px; color: var(--ink);
|
||||
}
|
||||
.tag-remove {
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-size: 14px; color: var(--ink-dim); padding: 0; line-height: 1;
|
||||
}
|
||||
.tag-remove:hover { color: #c0392b; }
|
||||
#tagInput {
|
||||
width: 100%; padding: 8px 12px; border: 1px solid var(--border-light);
|
||||
border-radius: 8px; font-family: var(--sans); font-size: 14px;
|
||||
color: var(--ink); background: var(--surface);
|
||||
}
|
||||
#tagInput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,102,204,0.1); }
|
||||
.tag-suggestions {
|
||||
display: none; position: absolute; top: 100%; left: 0; right: 0;
|
||||
background: var(--surface); border: 1px solid var(--border-light);
|
||||
border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
z-index: 10; max-height: 200px; overflow-y: auto;
|
||||
}
|
||||
.tag-suggestion {
|
||||
padding: 8px 14px; font-family: var(--mono); font-size: 13px;
|
||||
cursor: pointer; color: var(--ink-soft);
|
||||
}
|
||||
.tag-suggestion:hover { background: var(--panel); color: var(--accent); }
|
||||
|
||||
/* Tags on protocol pills */
|
||||
.protocol-pill .tag-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.protocol-pill .tag {
|
||||
font-family: var(--mono); font-size: 10px; padding: 2px 8px;
|
||||
border-radius: 3px; background: var(--panel); color: var(--ink-dim);
|
||||
}
|
||||
|
||||
/* Selected protocols list in collection creator */
|
||||
.selected-list { margin-bottom: 16px; }
|
||||
.selected-list:empty { display: none; }
|
||||
.selected-list-header {
|
||||
font-family: var(--mono); font-size: 12px; color: var(--green);
|
||||
margin-bottom: 8px; font-weight: bold;
|
||||
}
|
||||
.selected-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 8px;
|
||||
margin-bottom: 6px; background: var(--surface); transition: all 0.15s;
|
||||
}
|
||||
.selected-item:hover { border-color: var(--green); }
|
||||
.selected-position {
|
||||
font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
|
||||
flex-shrink: 0; min-width: 20px; text-align: center;
|
||||
}
|
||||
.selected-title {
|
||||
flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.selected-move {
|
||||
background: none; border: 1px solid var(--border-light); border-radius: 4px;
|
||||
cursor: pointer; font-size: 10px; color: var(--ink-dim); padding: 2px 6px; line-height: 1;
|
||||
}
|
||||
.selected-move:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.selected-remove {
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-size: 16px; color: var(--ink-dim); padding: 0 4px; line-height: 1;
|
||||
}
|
||||
.selected-remove:hover { color: #c0392b; }
|
||||
|
||||
/* Protocol picker for collections — click to select, highlight when selected */
|
||||
.picker-pill { cursor: pointer; transition: all 0.15s; }
|
||||
.picker-pill:hover { border-color: var(--accent); transform: none; }
|
||||
.picker-pill.selected { border-color: var(--green); background: rgba(0,135,90,0.06); }
|
||||
.picker-pill.selected:hover { border-color: var(--green-bright); }
|
||||
|
||||
/* Mobile breakpoint */
|
||||
@media (max-width: 640px) {
|
||||
/* Hide desktop nav and auth, show hamburger */
|
||||
header nav { display: none; }
|
||||
.auth-area { display: none; }
|
||||
.hamburger { display: block; }
|
||||
|
||||
/* Create button shows just + on mobile */
|
||||
.create-text { display: none; }
|
||||
.create-plus { display: inline; }
|
||||
|
||||
.main { padding: 16px 12px; }
|
||||
|
||||
/* Protocol pills: info takes full width, meta goes below */
|
||||
.protocol-pill { flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 6px; }
|
||||
.protocol-pill .info { width: 100%; }
|
||||
.protocol-pill .meta { text-align: left; display: flex; gap: 12px; align-items: center; }
|
||||
.protocol-pill .meta .steps { }
|
||||
.protocol-pill .meta > div:not(.steps) { font-size: 10px; }
|
||||
|
||||
.detail-header, .detail-section { padding: 16px 14px; border-radius: 12px; }
|
||||
}
|
||||
Reference in New Issue
Block a user