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