353 lines
17 KiB
HTML
353 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>NordaGPT - Propozycje ikon v2</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, #1a1a2e 0%, #16213e 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(220px, 1fr));
|
|
gap: 1.5rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.icon-card {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
position: relative;
|
|
}
|
|
.icon-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
|
|
border-color: rgba(34, 197, 94, 0.5);
|
|
}
|
|
.icon-container {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.icon-container svg { width: 100%; height: 100%; }
|
|
.icon-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; color: #22c55e; }
|
|
.icon-desc { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.3; }
|
|
.icon-number {
|
|
position: absolute;
|
|
top: 0.8rem;
|
|
left: 0.8rem;
|
|
background: #22c55e;
|
|
color: #1a1a2e;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
}
|
|
.section-divider {
|
|
border: none;
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
|
margin: 2rem 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>NordaGPT - Propozycje ikon v2</h1>
|
|
<p class="subtitle">5 wariantów robota + 5 wariantów litery N</p>
|
|
|
|
<h2>🤖 Warianty: Przyjazny Robot</h2>
|
|
<div class="grid">
|
|
|
|
<!-- Robot 1: Okrągły, minimalistyczny -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">R1</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Antenna -->
|
|
<line x1="50" y1="22" x2="50" y2="12" stroke="#22c55e" stroke-width="3" stroke-linecap="round"/>
|
|
<circle cx="50" cy="10" r="4" fill="#fbbf24"/>
|
|
<!-- Face circle -->
|
|
<circle cx="50" cy="52" r="28" fill="#3b82f6"/>
|
|
<circle cx="50" cy="52" r="24" fill="#60a5fa"/>
|
|
<!-- Eyes - happy crescents -->
|
|
<path d="M35 48 Q 40 42, 45 48" stroke="#233e6d" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M55 48 Q 60 42, 65 48" stroke="#233e6d" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<!-- Smile -->
|
|
<path d="M38 58 Q 50 68, 62 58" stroke="#233e6d" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Uśmiechnięty Krąg</div>
|
|
<div class="icon-desc">Minimalistyczny, zamknięte oczy = szczęście</div>
|
|
</div>
|
|
|
|
<!-- Robot 2: Z dużymi oczami -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">R2</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Antenna with glow -->
|
|
<line x1="50" y1="20" x2="50" y2="8" stroke="#22c55e" stroke-width="2"/>
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24"/>
|
|
<circle cx="50" cy="6" r="6" fill="#fbbf24" opacity="0.3"/>
|
|
<!-- Head -->
|
|
<rect x="22" y="24" width="56" height="50" rx="12" fill="#22c55e"/>
|
|
<rect x="26" y="28" width="48" height="42" rx="9" fill="#4ade80"/>
|
|
<!-- Big cute eyes -->
|
|
<ellipse cx="38" cy="48" rx="10" ry="12" fill="white"/>
|
|
<ellipse cx="62" cy="48" rx="10" ry="12" fill="white"/>
|
|
<circle cx="40" cy="48" r="6" fill="#233e6d"/>
|
|
<circle cx="64" cy="48" r="6" fill="#233e6d"/>
|
|
<circle cx="42" cy="46" r="2" fill="white"/>
|
|
<circle cx="66" cy="46" r="2" fill="white"/>
|
|
<!-- Small smile -->
|
|
<path d="M44 62 Q 50 67, 56 62" stroke="#233e6d" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Duże Oczy</div>
|
|
<div class="icon-desc">Zielony robot z dużymi, uroczymi oczami</div>
|
|
</div>
|
|
|
|
<!-- Robot 3: Pixel art style -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">R3</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Pixel antenna -->
|
|
<rect x="47" y="12" width="6" height="10" fill="#22c55e"/>
|
|
<rect x="44" y="8" width="12" height="6" fill="#fbbf24"/>
|
|
<!-- Pixel head -->
|
|
<rect x="24" y="26" width="52" height="48" rx="4" fill="#8b5cf6"/>
|
|
<rect x="28" y="30" width="44" height="40" fill="#a78bfa"/>
|
|
<!-- Pixel eyes -->
|
|
<rect x="34" y="40" width="10" height="10" fill="white"/>
|
|
<rect x="56" y="40" width="10" height="10" fill="white"/>
|
|
<rect x="38" y="44" width="4" height="4" fill="#233e6d"/>
|
|
<rect x="60" y="44" width="4" height="4" fill="#233e6d"/>
|
|
<!-- Pixel smile -->
|
|
<rect x="38" y="58" width="4" height="4" fill="#233e6d"/>
|
|
<rect x="42" y="62" width="16" height="4" fill="#233e6d"/>
|
|
<rect x="58" y="58" width="4" height="4" fill="#233e6d"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Pixel Robot</div>
|
|
<div class="icon-desc">Styl retro/pixel art, fioletowy</div>
|
|
</div>
|
|
|
|
<!-- Robot 4: Sleek modern -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">R4</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="robotGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
|
<stop offset="100%" style="stop-color:#8b5cf6"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Sleek antenna -->
|
|
<path d="M50 18 L50 8" stroke="url(#robotGrad)" stroke-width="3" stroke-linecap="round"/>
|
|
<circle cx="50" cy="6" r="3" fill="#fbbf24"/>
|
|
<!-- Modern rounded head -->
|
|
<rect x="20" y="22" width="60" height="52" rx="16" fill="url(#robotGrad)"/>
|
|
<!-- Visor style eye -->
|
|
<rect x="28" y="38" width="44" height="14" rx="7" fill="#1a1a2e"/>
|
|
<rect x="32" y="41" width="10" height="8" rx="4" fill="#22c55e"/>
|
|
<rect x="58" y="41" width="10" height="8" rx="4" fill="#22c55e"/>
|
|
<!-- Subtle mouth line -->
|
|
<path d="M40 62 L60 62" stroke="#1a1a2e" stroke-width="3" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Nowoczesny</div>
|
|
<div class="icon-desc">Sleek design z wizjerem</div>
|
|
</div>
|
|
|
|
<!-- Robot 5: Okrągły z sercem -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">R5</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Antenna -->
|
|
<line x1="50" y1="18" x2="50" y2="10" stroke="#f472b6" stroke-width="2"/>
|
|
<circle cx="50" cy="8" r="4" fill="#fbbf24"/>
|
|
<!-- Round head -->
|
|
<circle cx="50" cy="50" r="32" fill="#ec4899"/>
|
|
<circle cx="50" cy="50" r="28" fill="#f472b6"/>
|
|
<!-- Happy eyes -->
|
|
<circle cx="38" cy="45" r="6" fill="white"/>
|
|
<circle cx="62" cy="45" r="6" fill="white"/>
|
|
<circle cx="39" cy="45" r="3" fill="#233e6d"/>
|
|
<circle cx="63" cy="45" r="3" fill="#233e6d"/>
|
|
<!-- Heart mouth -->
|
|
<path d="M45 58 L50 65 L55 58 Q 55 54, 50 58 Q 45 54, 45 58" fill="#233e6d"/>
|
|
<!-- Blush -->
|
|
<circle cx="30" cy="52" r="5" fill="#fb7185" opacity="0.5"/>
|
|
<circle cx="70" cy="52" r="5" fill="#fb7185" opacity="0.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Różowy z Sercem</div>
|
|
<div class="icon-desc">Przyjazny, ciepły, z rumieńcami</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr class="section-divider">
|
|
|
|
<h2>🅽 Warianty: Litera N + GPT</h2>
|
|
<div class="grid">
|
|
|
|
<!-- N1: Klasyczny z GPT -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">N1</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="nGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#22c55e"/>
|
|
<stop offset="100%" style="stop-color:#14b8a6"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<circle cx="50" cy="50" r="38" fill="none" stroke="url(#nGrad1)" stroke-width="2.5"/>
|
|
<!-- Letter N -->
|
|
<path d="M30 72 L30 28 L70 72 L70 28" stroke="url(#nGrad1)" stroke-width="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<!-- North indicator -->
|
|
<circle cx="50" cy="8" r="4" fill="#fbbf24"/>
|
|
<!-- GPT badge -->
|
|
<rect x="58" y="68" width="28" height="16" rx="4" fill="#22c55e"/>
|
|
<text x="72" y="80" text-anchor="middle" fill="white" font-size="9" font-weight="bold">GPT</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Klasyczne N</div>
|
|
<div class="icon-desc">Oryginalna wersja z badge GPT</div>
|
|
</div>
|
|
|
|
<!-- N2: Outline style -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">N2</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- N as outline -->
|
|
<path d="M28 75 L28 25 L72 75 L72 25" stroke="#22c55e" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M28 75 L28 25 L72 75 L72 25" stroke="#4ade80" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5,5"/>
|
|
<!-- North star -->
|
|
<polygon points="50,5 52,12 50,10 48,12" fill="#fbbf24"/>
|
|
<circle cx="50" cy="5" r="3" fill="#fbbf24"/>
|
|
<!-- GPT text below -->
|
|
<text x="50" y="95" text-anchor="middle" fill="#22c55e" font-size="11" font-weight="bold">GPT</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">N Outline</div>
|
|
<div class="icon-desc">Konturowe N z GPT na dole</div>
|
|
</div>
|
|
|
|
<!-- N3: Bold chunky -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">N3</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="nGrad3" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
|
<stop offset="100%" style="stop-color:#8b5cf6"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Bold N -->
|
|
<path d="M25 78 L25 22 L75 78 L75 22" stroke="url(#nGrad3)" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<!-- Glow effect -->
|
|
<path d="M25 78 L25 22 L75 78 L75 22" stroke="#3b82f6" stroke-width="16" fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.2"/>
|
|
<!-- GPT chip -->
|
|
<rect x="60" y="60" width="30" height="20" rx="4" fill="#1a1a2e" stroke="#22c55e" stroke-width="1.5"/>
|
|
<text x="75" y="74" text-anchor="middle" fill="#22c55e" font-size="10" font-weight="bold">GPT</text>
|
|
<!-- North -->
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Bold N</div>
|
|
<div class="icon-desc">Grube N z chipem GPT</div>
|
|
</div>
|
|
|
|
<!-- N4: Geometric -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">N4</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Geometric N made of shapes -->
|
|
<rect x="25" y="25" width="10" height="50" rx="2" fill="#22c55e"/>
|
|
<rect x="65" y="25" width="10" height="50" rx="2" fill="#22c55e"/>
|
|
<polygon points="25,25 35,25 75,75 65,75" fill="#22c55e"/>
|
|
<!-- GPT in center -->
|
|
<circle cx="50" cy="50" r="15" fill="#1a1a2e"/>
|
|
<text x="50" y="54" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="bold">GPT</text>
|
|
<!-- North arrow -->
|
|
<polygon points="50,5 54,12 50,9 46,12" fill="#fbbf24"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Geometryczne N</div>
|
|
<div class="icon-desc">N z prostokątów z GPT w środku</div>
|
|
</div>
|
|
|
|
<!-- N5: Neon style -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">N5</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<filter id="neon" 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="#0f172a"/>
|
|
<!-- Neon N -->
|
|
<path d="M28 75 L28 25 L72 75 L72 25" stroke="#22c55e" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#neon)"/>
|
|
<!-- Neon circle -->
|
|
<circle cx="50" cy="50" r="40" fill="none" stroke="#22c55e" stroke-width="1.5" opacity="0.5" filter="url(#neon)"/>
|
|
<!-- GPT neon -->
|
|
<text x="50" y="92" text-anchor="middle" fill="#f472b6" font-size="12" font-weight="bold" filter="url(#neon)">GPT</text>
|
|
<!-- North glow -->
|
|
<circle cx="50" cy="6" r="4" fill="#fbbf24" filter="url(#neon)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Neonowe N</div>
|
|
<div class="icon-desc">Efekt neonu, nocny vibe</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr class="section-divider">
|
|
<p style="text-align: center; color: rgba(255,255,255,0.4); margin-top: 1rem;">
|
|
Wybierz numer ikony do wdrożenia
|
|
</p>
|
|
|
|
</body>
|
|
</html> |