ntnsndr/protocol-droid
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add logo, PWA manifest, favicon

Browse Source 
- Geometric Companion logo: rounded head, blue outline, green eyes,
  green antenna tip. SVG for crisp rendering at any size.
- Logo appears in header next to site name
- PWA manifest (manifest.json) with 192px and 512px PNG icons
- Favicon (favicon.ico) for browser tab
- Apple touch icon for iOS home screen
- README: logo replacement instructions for whitelabeling

To replace the logo for whitelabeling, just swap frontend/logo.svg
and the icon PNGs. Update <link> tags in index.html if filename changes.
This commit is contained in:
Protocolbot
2026-07-08 18:41:53 -06:00
parent 31492d55d3
commit e9ccb7d3b1
8 changed files with 61 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+13 -2
View File
@@ -73,7 +73,7 @@ protocol-droid/
```
4. The database schema auto-initializes on first API request (creates `data/protocol_droid.db`)
5. Visit the site and register — the **first user to register becomes admin**
5. Optionally load seed protocols: Go to your **profile page** (click your @username) and click **"Load Seed Protocols"** (visible to admins only). This loads 100 example protocols into your library. Can be repeated to re-import seeds.
6. Optionally load seed protocols: Go to the **About** page and click **"Load seed protocols"** (visible to admins only). This loads 6 example protocols into your library in one click. No curl needed.
**No default admin credentials exist.** A fresh deployment has an empty database. The first registration creates the admin account. Seed protocols are optional and must be explicitly loaded.
@@ -122,7 +122,7 @@ cd protocol-droid
php -S localhost:8000
```
The SQLite database is created automatically at `data/protocol_droid.db`. The first registration creates the admin account. To load the 100 sample protocols, go to your **profile page** (click your @username) and click **"Load Seed Protocols"** (admins only).
The SQLite database is created automatically at `data/protocol_droid.db`. The first registration creates the admin account. To load the 6 sample protocols (Round Robin Check-In, Consent Decision-Making, etc.):
```bash
# After registering as admin:
@@ -171,6 +171,17 @@ curl -b cookies.txt -X DELETE http://localhost:8000/api/protocols/round-robin-ch
Protocol Droid is designed to be fully whitelabel-able. Here's how to customize it for your deployment:
### Logo
The logo is an SVG file at `frontend/logo.svg`. It appears in the header next to the site name and as the browser/PWA icon.
To replace it:
1. Create your own SVG logo (or PNG)
2. Replace `frontend/logo.svg` (and `frontend/favicon.ico`, `frontend/icon-192.png`, `frontend/icon-512.png` for PWA icons)
3. If using a different filename, update the `<link>` tags in `frontend/index.html`
For PWA icons, generate 192x192 and 512x512 PNG versions of your logo and save them as `frontend/icon-192.png` and `frontend/icon-512.png`. The web manifest is at `manifest.json` in the project root.
### Site name and tagline
Edit `config.yaml` in the project root:
frontend/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 678 B

frontend/icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

frontend/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

frontend/index.html
+6 -26
View File
@@ -4,13 +4,18 @@
<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">
<link rel="icon" type="image/svg+xml" href="frontend/logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="frontend/favicon.ico">
<link rel="apple-touch-icon" href="frontend/icon-192.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="frontend/style.css">
<meta name="theme-color" content="#0a1929">
</head>
<body>
<header>
<div class="breadcrumb" onclick="navigate('library')">
<img src="frontend/logo.svg" class="header-logo" alt="Protocol Droid">
<span><span class="prompt">$</span> protocol-droid</span>
<span class="crumb-path" id="crumbPath"></span>
</div>
@@ -230,31 +235,6 @@
<!-- TOAST -->
<div class="toast" id="toast" style="display:none"></div>
<!-- PASSWORD CHANGE MODAL -->
<div class="modal-overlay" id="pwModal" style="display:none">
<div class="modal">
<h2>Change Password</h2>
<form id="pwForm" onsubmit="handleChangePassword(event)">
<div class="form-group">
<label>Current Password</label>
<input type="password" id="pwCurrent" required placeholder="••••••••">
</div>
<div class="form-group">
<label>New Password</label>
<input type="password" id="pwNew" required minlength="8" placeholder="••••••••">
</div>
<div class="form-group">
<label>Confirm New Password</label>
<input type="password" id="pwConfirm" required minlength="8" placeholder="••••••••">
</div>
<div class="actions">
<button type="submit" class="btn primary">Change Password</button>
<button type="button" class="btn" onclick="closePwModal()">Cancel</button>
</div>
</form>
</div>
</div>
</main>
<script src="/frontend/app.js"></script>
frontend/logo.svg
+13
View File
@@ -0,0 +1,13 @@
<svg width="128" height="128" viewBox="0 0 120 140" xmlns="http://www.w3.org/2000/svg">
<line x1="60" y1="5" x2="60" y2="20" stroke="#6db5ff" stroke-width="2.5"/>
<circle cx="60" cy="5" r="3.5" fill="#00ff88"/>
<rect x="30" y="20" width="60" height="65" rx="12" fill="none" stroke="#6db5ff" stroke-width="2.5"/>
<circle cx="45" cy="42" r="6.5" fill="#0a1929" stroke="#6db5ff" stroke-width="2"/>
<circle cx="45" cy="42" r="3" fill="#00ff88"/>
<circle cx="75" cy="42" r="6.5" fill="#0a1929" stroke="#6db5ff" stroke-width="2"/>
<circle cx="75" cy="42" r="3" fill="#00ff88"/>
<rect x="48" y="60" width="24" height="3" rx="1" fill="#6db5ff" opacity="0.7"/>
<rect x="50" y="66" width="20" height="3" rx="1" fill="#6db5ff" opacity="0.4"/>
<rect x="48" y="85" width="24" height="8" fill="none" stroke="#6db5ff" stroke-width="2"/>
<path d="M 25 93 Q 60 100 95 93" fill="none" stroke="#6db5ff" stroke-width="2.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 934 B

frontend/style.css
+3 -2
View File
@@ -71,6 +71,7 @@ header .breadcrumb {
}
header .breadcrumb .prompt { color: var(--green-bright); font-weight: normal; }
header .breadcrumb:hover { text-decoration: none; }
.header-logo { width: 22px; height: 26px; flex-shrink: 0; margin-right: 2px; }
header .crumb-path {
font-size: 11px;
color: var(--ink-dim);
@@ -246,8 +247,8 @@ header nav a.active { color: var(--accent-bright); border-color: rgba(0,170,255,
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: 0 0 auto; max-width: 140px; }
.protocol-pill .meta .steps { color: var(--accent); font-weight: bold; white-space: nowrap; }
.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);
}
manifest.json
+26
View File
@@ -0,0 +1,26 @@
{
"name": "Protocol Droid",
"short_name": "Protocol Droid",
"description": "A tool for authoring, sharing, and curating social protocols",
"start_url": "./",
"display": "standalone",
"background_color": "#0a1929",
"theme_color": "#0a1929",
"icons": [
{
"src": "frontend/logo.svg",
"sizes": "any",
"type": "image/svg+xml"
},
{
"src": "frontend/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "frontend/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}