Samuel Gbafa
2 months ago
parent
b21e00fc79
commit
81db6207da
|
After Width: | Height: | Size: 446 B |
@ -0,0 +1,48 @@ |
||||
{ |
||||
"name": "Personal Network Manager", |
||||
"short_name": "Network Manager", |
||||
"description": "Build and manage your professional network with ease", |
||||
"start_url": "/", |
||||
"display": "standalone", |
||||
"background_color": "#ffffff", |
||||
"theme_color": "#1976d2", |
||||
"orientation": "portrait-primary", |
||||
"categories": ["social", "productivity", "business"], |
||||
"lang": "en", |
||||
"dir": "ltr", |
||||
"scope": "/", |
||||
"icons": [ |
||||
{ |
||||
"src": "/favicon.svg", |
||||
"sizes": "any", |
||||
"type": "image/svg+xml", |
||||
"purpose": "any maskable" |
||||
}, |
||||
{ |
||||
"src": "/icon-192.png", |
||||
"sizes": "192x192", |
||||
"type": "image/png", |
||||
"purpose": "any maskable" |
||||
}, |
||||
{ |
||||
"src": "/icon-512.png", |
||||
"sizes": "512x512", |
||||
"type": "image/png", |
||||
"purpose": "any maskable" |
||||
} |
||||
], |
||||
"screenshots": [ |
||||
{ |
||||
"src": "/og-image.svg", |
||||
"sizes": "1200x630", |
||||
"type": "image/svg+xml", |
||||
"form_factor": "wide" |
||||
} |
||||
], |
||||
"features": [ |
||||
"LinkedIn integration", |
||||
"Contact management", |
||||
"QR code invitations", |
||||
"Professional networking" |
||||
] |
||||
} |
||||
@ -0,0 +1,92 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<style> |
||||
body { |
||||
margin: 0; |
||||
padding: 0; |
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; |
||||
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); |
||||
width: 1200px; |
||||
height: 630px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.container { |
||||
text-align: center; |
||||
color: white; |
||||
padding: 60px; |
||||
} |
||||
.logo { |
||||
width: 80px; |
||||
height: 80px; |
||||
background: rgba(255, 255, 255, 0.2); |
||||
border-radius: 16px; |
||||
margin: 0 auto 30px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 36px; |
||||
font-weight: bold; |
||||
} |
||||
h1 { |
||||
font-size: 48px; |
||||
font-weight: 700; |
||||
margin: 0 0 20px 0; |
||||
line-height: 1.2; |
||||
} |
||||
.tagline { |
||||
font-size: 24px; |
||||
font-weight: 400; |
||||
margin: 0 0 40px 0; |
||||
opacity: 0.9; |
||||
line-height: 1.4; |
||||
} |
||||
.features { |
||||
display: flex; |
||||
justify-content: center; |
||||
gap: 40px; |
||||
margin-top: 40px; |
||||
} |
||||
.feature { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 12px; |
||||
font-size: 18px; |
||||
opacity: 0.9; |
||||
} |
||||
.icon { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: rgba(255, 255, 255, 0.3); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 12px; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div class="container"> |
||||
<div class="logo">🌐</div> |
||||
<h1>Personal Network Manager</h1> |
||||
<p class="tagline">Build and manage your professional network with ease</p> |
||||
<div class="features"> |
||||
<div class="feature"> |
||||
<div class="icon">📊</div> |
||||
<span>LinkedIn Integration</span> |
||||
</div> |
||||
<div class="feature"> |
||||
<div class="icon">👥</div> |
||||
<span>Contact Management</span> |
||||
</div> |
||||
<div class="feature"> |
||||
<div class="icon">📱</div> |
||||
<span>QR Invitations</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,46 @@ |
||||
// Simple script to generate OG image
|
||||
// This creates a placeholder - in production you'd use a proper image generation service
|
||||
|
||||
const fs = require('fs'); |
||||
const path = require('path'); |
||||
|
||||
// Create a simple SVG that can be used as OG image
|
||||
const svgContent = ` |
||||
<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg"> |
||||
<defs> |
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> |
||||
<stop offset="0%" style="stop-color:#1976d2;stop-opacity:1" /> |
||||
<stop offset="100%" style="stop-color:#1565c0;stop-opacity:1" /> |
||||
</linearGradient> |
||||
</defs> |
||||
|
||||
<!-- Background --> |
||||
<rect width="1200" height="630" fill="url(#grad)"/> |
||||
|
||||
<!-- Logo placeholder --> |
||||
<rect x="560" y="180" width="80" height="80" rx="16" fill="rgba(255,255,255,0.2)"/> |
||||
<text x="600" y="235" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="36" font-weight="bold">🌐</text> |
||||
|
||||
<!-- Title --> |
||||
<text x="600" y="320" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="48" font-weight="bold">Personal Network Manager</text> |
||||
|
||||
<!-- Tagline --> |
||||
<text x="600" y="370" text-anchor="middle" fill="rgba(255,255,255,0.9)" font-family="Arial, sans-serif" font-size="24">Build and manage your professional network with ease</text> |
||||
|
||||
<!-- Features --> |
||||
<g transform="translate(300, 430)"> |
||||
<text x="0" y="0" fill="rgba(255,255,255,0.9)" font-family="Arial, sans-serif" font-size="18">📊 LinkedIn Integration</text> |
||||
<text x="250" y="0" fill="rgba(255,255,255,0.9)" font-family="Arial, sans-serif" font-size="18">👥 Contact Management</text> |
||||
<text x="500" y="0" fill="rgba(255,255,255,0.9)" font-family="Arial, sans-serif" font-size="18">📱 QR Invitations</text> |
||||
</g> |
||||
|
||||
<!-- URL --> |
||||
<text x="600" y="550" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-family="Arial, sans-serif" font-size="16">nao-pnm-ui.pages.dev</text> |
||||
</svg> |
||||
`;
|
||||
|
||||
// Write the SVG file
|
||||
fs.writeFileSync(path.join(__dirname, '../public/og-image.svg'), svgContent); |
||||
|
||||
console.log('OG image generated successfully!'); |
||||
console.log('Note: For production, convert this SVG to PNG for better social media compatibility'); |
||||
Loading…
Reference in new issue