Created icon for PWA and web

This commit is contained in:
Nathan Schneider
2025-11-29 17:05:15 -05:00
parent d278e8998a
commit af52f32330
4 changed files with 65 additions and 16 deletions

View File

@@ -2,11 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" sizes="192x192" href="/icon-192.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="A diagnostic tool for the study of protocols" /> <meta name="description" content="A diagnostic tool for the study of protocols" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#1a1a2e" />
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
<title>Protocol Bicorder</title> <title>Protocol Bicorder</title>
</head> </head>
<body> <body>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 B

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@@ -1,11 +1,47 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<rect width="100" height="100" fill="#ffffff"/> <defs>
<text x="50" y="35" font-family="monospace" font-size="16" fill="#000000" text-anchor="middle"> <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
Protocol <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
</text> <stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
<text x="50" y="55" font-family="monospace" font-size="20" fill="#000000" text-anchor="middle" font-weight="bold"> </linearGradient>
BICORDER <linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
</text> <stop offset="0%" style="stop-color:#0f4c75;stop-opacity:1" />
<rect x="20" y="65" width="60" height="10" fill="none" stroke="#000000" stroke-width="2"/> <stop offset="100%" style="stop-color:#3282b8;stop-opacity:1" />
<rect x="22" y="67" width="20" height="6" fill="#000000"/> </linearGradient>
</defs>
<!-- Background -->
<rect width="512" height="512" fill="url(#bgGradient)" rx="80"/>
<!-- Outer frame -->
<rect x="64" y="64" width="384" height="384" fill="none" stroke="url(#accentGradient)" stroke-width="8" rx="20"/>
<!-- Bicorder pattern "|#|" in monospace style -->
<g font-family="'Courier New', monospace" font-weight="bold" text-anchor="middle">
<!-- Left bar -->
<text x="180" y="300" font-size="180" fill="#3282b8">|</text>
<!-- Center hash -->
<text x="256" y="300" font-size="180" fill="#bbe1fa">#</text>
<!-- Right bar -->
<text x="332" y="300" font-size="180" fill="#3282b8">|</text>
</g>
<!-- Decorative scan lines -->
<line x1="96" y1="140" x2="416" y2="140" stroke="#3282b8" stroke-width="2" opacity="0.3"/>
<line x1="96" y1="372" x2="416" y2="372" stroke="#3282b8" stroke-width="2" opacity="0.3"/>
<!-- Corner accents -->
<rect x="80" y="80" width="30" height="4" fill="#bbe1fa" opacity="0.8"/>
<rect x="80" y="80" width="4" height="30" fill="#bbe1fa" opacity="0.8"/>
<rect x="402" y="80" width="30" height="4" fill="#bbe1fa" opacity="0.8"/>
<rect x="428" y="80" width="4" height="30" fill="#bbe1fa" opacity="0.8"/>
<rect x="80" y="428" width="30" height="4" fill="#bbe1fa" opacity="0.8"/>
<rect x="80" y="402" width="4" height="30" fill="#bbe1fa" opacity="0.8"/>
<rect x="402" y="428" width="30" height="4" fill="#bbe1fa" opacity="0.8"/>
<rect x="428" y="402" width="4" height="30" fill="#bbe1fa" opacity="0.8"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -15,15 +15,27 @@ export default defineConfig({
svelte(), svelte(),
VitePWA({ VitePWA({
registerType: 'autoUpdate', registerType: 'autoUpdate',
includeAssets: ['favicon.ico'], includeAssets: ['favicon.ico', 'favicon.svg', 'icon-192.png', 'icon-512.png'],
manifest: { manifest: {
name: 'Protocol Bicorder', name: 'Protocol Bicorder',
short_name: 'Bicorder', short_name: 'Bicorder',
description: 'A diagnostic tool for the study of protocols', description: 'A diagnostic tool for the study of protocols',
theme_color: '#ffffff', theme_color: '#1a1a2e',
background_color: '#ffffff', background_color: '#1a1a2e',
display: 'standalone', display: 'standalone',
icons: [ icons: [
{
src: '/icon-192.png',
sizes: '192x192',
type: 'image/png',
purpose: 'any'
},
{
src: '/icon-512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any'
},
{ {
src: '/icon.svg', src: '/icon.svg',
sizes: 'any', sizes: 'any',