337 lines
18 KiB
HTML
337 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>NordaGPT - Propozycje ikon v3</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
color: white;
|
|
}
|
|
h1 { text-align: center; margin-bottom: 0.5rem; font-weight: 300; }
|
|
h2 { text-align: center; margin: 2rem 0 1rem; font-weight: 400; color: #22c55e; font-size: 1.3rem; }
|
|
.subtitle { text-align: center; margin-bottom: 2rem; color: rgba(255,255,255,0.6); }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.2rem;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
.icon-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 16px;
|
|
padding: 1.2rem;
|
|
text-align: center;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
position: relative;
|
|
}
|
|
.icon-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
|
|
border-color: rgba(34, 197, 94, 0.4);
|
|
}
|
|
.icon-container {
|
|
width: 90px;
|
|
height: 90px;
|
|
margin: 0 auto 0.8rem;
|
|
}
|
|
.icon-container svg { width: 100%; height: 100%; }
|
|
.icon-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; color: #4ade80; }
|
|
.icon-desc { font-size: 0.75rem; color: rgba(255,255,255,0.5); line-height: 1.3; }
|
|
.icon-number {
|
|
position: absolute;
|
|
top: 0.6rem;
|
|
left: 0.6rem;
|
|
background: #22c55e;
|
|
color: #0a0a1a;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 0.7rem;
|
|
}
|
|
.section-divider {
|
|
border: none;
|
|
border-top: 1px solid rgba(255,255,255,0.08);
|
|
margin: 2rem 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>NordaGPT - Propozycje ikon v3</h1>
|
|
<p class="subtitle">Warianty R4 (Nowoczesny Robot) + N5 (Neonowe N)</p>
|
|
|
|
<h2>🤖 Warianty: Nowoczesny Robot z Wizjerem</h2>
|
|
<div class="grid">
|
|
|
|
<!-- R4-A: Zielony wizjer -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">A</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="rA" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#22c55e"/>
|
|
<stop offset="100%" style="stop-color:#14b8a6"/>
|
|
</linearGradient>
|
|
<filter id="glowA"><feGaussianBlur stdDeviation="2" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#1a1a2e"/>
|
|
<path d="M50 18 L50 8" stroke="url(#rA)" stroke-width="3" stroke-linecap="round"/>
|
|
<circle cx="50" cy="6" r="3" fill="#fbbf24" filter="url(#glowA)"/>
|
|
<rect x="20" y="22" width="60" height="52" rx="14" fill="url(#rA)"/>
|
|
<rect x="28" y="38" width="44" height="14" rx="7" fill="#0a0a1a"/>
|
|
<rect x="32" y="41" width="12" height="8" rx="4" fill="#4ade80" filter="url(#glowA)"/>
|
|
<rect x="56" y="41" width="12" height="8" rx="4" fill="#4ade80" filter="url(#glowA)"/>
|
|
<rect x="38" y="60" width="24" height="4" rx="2" fill="#0a0a1a"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Zielony INPI</div>
|
|
<div class="icon-desc">Kolory INPI, świecące oczy</div>
|
|
</div>
|
|
|
|
<!-- R4-B: Niebieski gradient -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">B</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="rB" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
|
<stop offset="100%" style="stop-color:#6366f1"/>
|
|
</linearGradient>
|
|
<filter id="glowB"><feGaussianBlur stdDeviation="2" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#1a1a2e"/>
|
|
<path d="M50 18 L50 8" stroke="url(#rB)" stroke-width="3" stroke-linecap="round"/>
|
|
<circle cx="50" cy="6" r="3" fill="#fbbf24" filter="url(#glowB)"/>
|
|
<rect x="20" y="22" width="60" height="52" rx="14" fill="url(#rB)"/>
|
|
<rect x="26" y="36" width="48" height="16" rx="8" fill="#0a0a1a"/>
|
|
<circle cx="38" cy="44" r="5" fill="#22c55e" filter="url(#glowB)"/>
|
|
<circle cx="62" cy="44" r="5" fill="#22c55e" filter="url(#glowB)"/>
|
|
<path d="M40 62 Q50 68, 60 62" stroke="#0a0a1a" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Niebieski + Uśmiech</div>
|
|
<div class="icon-desc">Okrągłe oczy, delikatny uśmiech</div>
|
|
</div>
|
|
|
|
<!-- R4-C: Granat Norda -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">C</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="rC" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#233e6d"/>
|
|
<stop offset="100%" style="stop-color:#1e3a5f"/>
|
|
</linearGradient>
|
|
<filter id="glowC"><feGaussianBlur stdDeviation="1.5" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#0f172a"/>
|
|
<circle cx="50" cy="50" r="42" fill="none" stroke="#233e6d" stroke-width="1" opacity="0.5"/>
|
|
<path d="M50 16 L50 6" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="50" cy="4" r="3" fill="#fbbf24" filter="url(#glowC)"/>
|
|
<rect x="18" y="20" width="64" height="54" rx="12" fill="url(#rC)" stroke="#22c55e" stroke-width="1.5"/>
|
|
<rect x="26" y="36" width="48" height="14" rx="7" fill="#0a0a1a"/>
|
|
<rect x="30" y="39" width="14" height="8" rx="4" fill="#22c55e" filter="url(#glowC)"/>
|
|
<rect x="56" y="39" width="14" height="8" rx="4" fill="#22c55e" filter="url(#glowC)"/>
|
|
<rect x="36" y="58" width="28" height="6" rx="3" fill="#0a0a1a"/>
|
|
<text x="50" y="64" text-anchor="middle" fill="#22c55e" font-size="6" font-weight="bold">GPT</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Norda Navy</div>
|
|
<div class="icon-desc">Granat Norda + GPT w ustach</div>
|
|
</div>
|
|
|
|
<!-- R4-D: Minimalistyczny -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">D</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#1a1a2e"/>
|
|
<circle cx="50" cy="6" r="3" fill="#fbbf24"/>
|
|
<line x1="50" y1="9" x2="50" y2="18" stroke="#22c55e" stroke-width="2"/>
|
|
<rect x="22" y="22" width="56" height="48" rx="10" fill="none" stroke="#22c55e" stroke-width="2.5"/>
|
|
<rect x="30" y="38" width="40" height="12" rx="6" fill="#22c55e" opacity="0.2"/>
|
|
<circle cx="40" cy="44" r="4" fill="#22c55e"/>
|
|
<circle cx="60" cy="44" r="4" fill="#22c55e"/>
|
|
<line x1="40" y1="58" x2="60" y2="58" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Line Art</div>
|
|
<div class="icon-desc">Minimalistyczny kontur</div>
|
|
</div>
|
|
|
|
<!-- R4-E: Z badge GPT -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">E</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="rE" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#8b5cf6"/>
|
|
<stop offset="100%" style="stop-color:#a855f7"/>
|
|
</linearGradient>
|
|
<filter id="glowE"><feGaussianBlur stdDeviation="2" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#1a1a2e"/>
|
|
<path d="M50 18 L50 8" stroke="url(#rE)" stroke-width="3" stroke-linecap="round"/>
|
|
<circle cx="50" cy="6" r="3" fill="#fbbf24" filter="url(#glowE)"/>
|
|
<rect x="20" y="22" width="60" height="48" rx="14" fill="url(#rE)"/>
|
|
<rect x="28" y="36" width="44" height="14" rx="7" fill="#0a0a1a"/>
|
|
<rect x="32" y="39" width="10" height="8" rx="4" fill="#22c55e" filter="url(#glowE)"/>
|
|
<rect x="58" y="39" width="10" height="8" rx="4" fill="#22c55e" filter="url(#glowE)"/>
|
|
<line x1="40" y1="58" x2="60" y2="58" stroke="#0a0a1a" stroke-width="3" stroke-linecap="round"/>
|
|
<!-- GPT Badge -->
|
|
<circle cx="75" cy="70" r="14" fill="#22c55e"/>
|
|
<text x="75" y="74" text-anchor="middle" fill="white" font-size="8" font-weight="bold">GPT</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Fiolet + Badge</div>
|
|
<div class="icon-desc">Fioletowy z badge GPT</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<h2>✨ Warianty: Neonowe N</h2>
|
|
<div class="grid">
|
|
|
|
<!-- N5-A: Zielony neon -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">A</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<filter id="neonA" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="2.5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#0a0a1a"/>
|
|
<path d="M28 75 L28 25 L72 75 L72 25" stroke="#22c55e" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#neonA)"/>
|
|
<circle cx="50" cy="50" r="38" fill="none" stroke="#22c55e" stroke-width="1" opacity="0.3" filter="url(#neonA)"/>
|
|
<text x="50" y="94" text-anchor="middle" fill="#22c55e" font-size="11" font-weight="bold" filter="url(#neonA)">GPT</text>
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24" filter="url(#neonA)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Zielony Neon</div>
|
|
<div class="icon-desc">Klasyczny zielony, styl INPI</div>
|
|
</div>
|
|
|
|
<!-- N5-B: Cyan neon -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">B</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<filter id="neonB" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#0a0a1a"/>
|
|
<path d="M28 75 L28 25 L72 75 L72 25" stroke="#06b6d4" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#neonB)"/>
|
|
<circle cx="50" cy="50" r="36" fill="none" stroke="#06b6d4" stroke-width="1.5" opacity="0.4" filter="url(#neonB)"/>
|
|
<text x="50" y="94" text-anchor="middle" fill="#06b6d4" font-size="11" font-weight="bold" filter="url(#neonB)">GPT</text>
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24" filter="url(#neonB)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Cyan Neon</div>
|
|
<div class="icon-desc">Turkusowy, futurystyczny</div>
|
|
</div>
|
|
|
|
<!-- N5-C: Multi-color -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">C</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="neonGradC" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#22c55e"/>
|
|
<stop offset="50%" style="stop-color:#06b6d4"/>
|
|
<stop offset="100%" style="stop-color:#8b5cf6"/>
|
|
</linearGradient>
|
|
<filter id="neonC" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#0a0a1a"/>
|
|
<path d="M28 75 L28 25 L72 75 L72 25" stroke="url(#neonGradC)" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#neonC)"/>
|
|
<text x="50" y="94" text-anchor="middle" fill="url(#neonGradC)" font-size="11" font-weight="bold" filter="url(#neonC)">GPT</text>
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24" filter="url(#neonC)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Gradient Neon</div>
|
|
<div class="icon-desc">Zielono-fioletowy gradient</div>
|
|
</div>
|
|
|
|
<!-- N5-D: Pink neon -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">D</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<filter id="neonD" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="2.5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#0a0a1a"/>
|
|
<path d="M28 75 L28 25 L72 75 L72 25" stroke="#ec4899" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#neonD)"/>
|
|
<circle cx="50" cy="50" r="36" fill="none" stroke="#ec4899" stroke-width="1" opacity="0.3" filter="url(#neonD)"/>
|
|
<text x="50" y="94" text-anchor="middle" fill="#ec4899" font-size="11" font-weight="bold" filter="url(#neonD)">GPT</text>
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24" filter="url(#neonD)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Różowy Neon</div>
|
|
<div class="icon-desc">Magenta, wyrazisty</div>
|
|
</div>
|
|
|
|
<!-- N5-E: Double outline -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">E</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<filter id="neonE" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#0a0a1a"/>
|
|
<!-- Outer N -->
|
|
<path d="M25 78 L25 22 L75 78 L75 22" stroke="#22c55e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.4" filter="url(#neonE)"/>
|
|
<!-- Inner N -->
|
|
<path d="M30 73 L30 27 L70 73 L70 27" stroke="#22c55e" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#neonE)"/>
|
|
<!-- GPT badge -->
|
|
<rect x="60" y="75" width="30" height="16" rx="4" fill="#22c55e" filter="url(#neonE)"/>
|
|
<text x="75" y="87" text-anchor="middle" fill="#0a0a1a" font-size="9" font-weight="bold">GPT</text>
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24" filter="url(#neonE)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Podwójne N</div>
|
|
<div class="icon-desc">Efekt głębi z badge</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr class="section-divider">
|
|
<p style="text-align: center; color: rgba(255,255,255,0.4); margin-top: 1rem; font-size: 0.9rem;">
|
|
Podaj kombinację np. "R4-C" lub "N5-A" do wdrożenia
|
|
</p>
|
|
|
|
</body>
|
|
</html> |