frontend first version

scripts/generate-icons.js

@@ -0,0 +1,82 @@
+/**
+ * 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/');