83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
/**
|
|
* Icon Generation Script for Sentinel App
|
|
*
|
|
* This script documents the icon specifications for the Sentinel app.
|
|
* Use a design tool (Figma, Sketch) or image editor to create these icons.
|
|
*
|
|
* Design Guidelines:
|
|
* - Primary Color: #459E9E (Teal)
|
|
* - Background: #459E9E (Teal) or #1A3A4A (Deep Navy)
|
|
* - Icon: White anchor with star/compass element
|
|
* - Style: Clean, nautical, minimal
|
|
*/
|
|
|
|
const iconSpecs = {
|
|
// App Icon (used for app launcher)
|
|
'icon.png': {
|
|
size: '1024x1024',
|
|
background: '#459E9E',
|
|
borderRadius: '224px (22%)',
|
|
description: 'Main app icon with anchor logo'
|
|
},
|
|
|
|
// Adaptive Icon (Android)
|
|
'adaptive-icon.png': {
|
|
size: '1024x1024',
|
|
background: 'Transparent or #459E9E',
|
|
description: 'Foreground image for Android adaptive icons'
|
|
},
|
|
|
|
// Favicon (Web)
|
|
'favicon.png': {
|
|
size: '32x32',
|
|
background: '#459E9E',
|
|
borderRadius: '6px',
|
|
description: 'Web browser tab icon'
|
|
},
|
|
|
|
// Splash Screen
|
|
'splash.png': {
|
|
size: '1284x2778',
|
|
background: '#459E9E',
|
|
description: 'Full-screen splash with centered logo'
|
|
}
|
|
};
|
|
|
|
// SVG Template for the Sentinel Logo
|
|
const logoSVG = `
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Anchor Ring -->
|
|
<circle cx="50" cy="35" r="12" stroke="white" stroke-width="4" fill="none"/>
|
|
|
|
<!-- Anchor Shaft -->
|
|
<path d="M50 47V85" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
|
|
<!-- Anchor Flukes -->
|
|
<path d="M30 75C30 65 40 60 50 60C60 60 70 65 70 75" stroke="white" stroke-width="4" stroke-linecap="round" fill="none"/>
|
|
<path d="M35 80L50 85L65 80" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<!-- Compass Star (above anchor) -->
|
|
<path d="M50 15L52 22H59L53 26L55 33L50 29L45 33L47 26L41 22H48L50 15Z" fill="white"/>
|
|
</svg>
|
|
`;
|
|
|
|
console.log('Sentinel Icon Specifications');
|
|
console.log('============================\n');
|
|
|
|
Object.entries(iconSpecs).forEach(([filename, spec]) => {
|
|
console.log(`${filename}:`);
|
|
console.log(` Size: ${spec.size}`);
|
|
console.log(` Background: ${spec.background}`);
|
|
if (spec.borderRadius) console.log(` Border Radius: ${spec.borderRadius}`);
|
|
console.log(` Description: ${spec.description}`);
|
|
console.log('');
|
|
});
|
|
|
|
console.log('\nLogo SVG Template:');
|
|
console.log(logoSVG);
|
|
|
|
console.log('\nTo generate icons:');
|
|
console.log('1. Open logo.svg in assets/ folder');
|
|
console.log('2. Export at required sizes');
|
|
console.log('3. Replace placeholder files in assets/');
|