317 lines
16 KiB
HTML
317 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>NordaGPT - Propozycje ikon</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: 2rem; font-weight: 300; }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
.icon-card {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.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: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.icon-container svg { width: 100%; height: 100%; }
|
|
.icon-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: #22c55e; }
|
|
.icon-desc { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
|
|
.icon-number {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
background: #22c55e;
|
|
color: #1a1a2e;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 0.9rem;
|
|
}
|
|
.icon-card { position: relative; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>NordaGPT - Propozycje ikon</h1>
|
|
<div class="grid">
|
|
|
|
<!-- 1. Minimalist North Star -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">1</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#22c55e"/>
|
|
<stop offset="100%" style="stop-color:#059669"/>
|
|
</linearGradient>
|
|
<filter id="glow1"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<path d="M50 10 L55 40 L85 50 L55 60 L50 90 L45 60 L15 50 L45 40 Z" fill="url(#g1)" filter="url(#glow1)"/>
|
|
<circle cx="50" cy="50" r="12" fill="#233e6d"/>
|
|
<circle cx="50" cy="50" r="8" fill="#22c55e" opacity="0.8"/>
|
|
<circle cx="50" cy="15" r="4" fill="#fbbf24"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Gwiazda Polarna</div>
|
|
<div class="icon-desc">Minimalistyczna 4-ramienna gwiazda z akcentem na północ</div>
|
|
</div>
|
|
|
|
<!-- 2. Friendly Chat Bubble -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">2</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
|
<stop offset="100%" style="stop-color:#8b5cf6"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="10" y="15" width="80" height="55" rx="12" fill="url(#g2)"/>
|
|
<polygon points="25,70 40,70 30,85" fill="url(#g2)"/>
|
|
<circle cx="35" cy="42" r="6" fill="white" opacity="0.9"/>
|
|
<circle cx="50" cy="42" r="6" fill="white" opacity="0.9"/>
|
|
<circle cx="65" cy="42" r="6" fill="white" opacity="0.9"/>
|
|
<path d="M50 20 L52 28 L50 26 L48 28 Z" fill="#fbbf24"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Przyjazny Chat</div>
|
|
<div class="icon-desc">Dymek czatu z animowanymi kropkami i wskaźnikiem północy</div>
|
|
</div>
|
|
|
|
<!-- 3. Glowing Compass -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">3</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<radialGradient id="g3" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.3"/>
|
|
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="48" fill="#233e6d"/>
|
|
<circle cx="50" cy="50" r="40" fill="url(#g3)"/>
|
|
<circle cx="50" cy="50" r="35" fill="none" stroke="#22c55e" stroke-width="2" opacity="0.5"/>
|
|
<circle cx="50" cy="50" r="25" fill="none" stroke="#22c55e" stroke-width="1.5" opacity="0.3"/>
|
|
<!-- Compass needle -->
|
|
<path d="M50 20 L55 50 L50 55 L45 50 Z" fill="#ef4444"/>
|
|
<path d="M50 80 L55 50 L50 45 L45 50 Z" fill="white" opacity="0.8"/>
|
|
<circle cx="50" cy="50" r="5" fill="#22c55e"/>
|
|
<text x="50" y="15" text-anchor="middle" fill="#fbbf24" font-size="10" font-weight="bold">N</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Świecący Kompas</div>
|
|
<div class="icon-desc">Klasyczny kompas z efektem świecenia i czerwoną igłą</div>
|
|
</div>
|
|
|
|
<!-- 4. Abstract Brain Wave -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">4</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<path d="M20 50 Q 30 30, 40 50 T 60 50 T 80 50" stroke="#22c55e" stroke-width="3" fill="none" opacity="0.6"/>
|
|
<path d="M20 50 Q 30 70, 40 50 T 60 50 T 80 50" stroke="#3b82f6" stroke-width="3" fill="none" opacity="0.6"/>
|
|
<path d="M25 50 Q 35 35, 45 50 T 65 50 T 85 50" stroke="#22c55e" stroke-width="2" fill="none"/>
|
|
<circle cx="50" cy="50" r="15" fill="#1a2d4f" stroke="#22c55e" stroke-width="2"/>
|
|
<text x="50" y="55" text-anchor="middle" fill="#22c55e" font-size="12" font-weight="bold">AI</text>
|
|
<circle cx="50" cy="12" r="4" fill="#fbbf24"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Fala Neuronowa</div>
|
|
<div class="icon-desc">Abstrakcyjne fale mózgowe symbolizujące AI</div>
|
|
</div>
|
|
|
|
<!-- 5. Lighthouse -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">5</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Light rays -->
|
|
<path d="M50 25 L30 10 M50 25 L50 5 M50 25 L70 10" stroke="#fbbf24" stroke-width="2" opacity="0.6"/>
|
|
<path d="M50 25 L25 15 M50 25 L75 15" stroke="#fbbf24" stroke-width="1.5" opacity="0.4"/>
|
|
<!-- Lighthouse -->
|
|
<path d="M40 85 L45 40 L55 40 L60 85 Z" fill="white"/>
|
|
<rect x="43" y="30" width="14" height="12" rx="2" fill="#22c55e"/>
|
|
<rect x="46" y="33" width="8" height="6" fill="#fbbf24"/>
|
|
<rect x="42" y="50" width="16" height="4" fill="#ef4444"/>
|
|
<rect x="42" y="65" width="16" height="4" fill="#ef4444"/>
|
|
<path d="M38 85 L62 85 L60 90 L40 90 Z" fill="#64748b"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Latarnia Morska</div>
|
|
<div class="icon-desc">Symbolizuje przewodnictwo i wskazywanie drogi w biznesie</div>
|
|
</div>
|
|
|
|
<!-- 6. Cute Robot -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">6</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="25" x2="50" y2="15" stroke="#22c55e" stroke-width="3"/>
|
|
<circle cx="50" cy="12" r="5" fill="#fbbf24"/>
|
|
<!-- Head -->
|
|
<rect x="25" y="28" width="50" height="45" rx="10" fill="#3b82f6"/>
|
|
<rect x="28" y="31" width="44" height="39" rx="8" fill="#60a5fa"/>
|
|
<!-- Eyes -->
|
|
<circle cx="38" cy="48" r="8" fill="white"/>
|
|
<circle cx="62" cy="48" r="8" fill="white"/>
|
|
<circle cx="40" cy="48" r="4" fill="#233e6d"/>
|
|
<circle cx="64" cy="48" r="4" fill="#233e6d"/>
|
|
<circle cx="41" cy="47" r="1.5" fill="white"/>
|
|
<circle cx="65" cy="47" r="1.5" fill="white"/>
|
|
<!-- Smile -->
|
|
<path d="M38 62 Q 50 72, 62 62" stroke="#233e6d" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<!-- Ears -->
|
|
<rect x="18" y="40" width="8" height="15" rx="3" fill="#22c55e"/>
|
|
<rect x="74" y="40" width="8" height="15" rx="3" fill="#22c55e"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Przyjazny Robot</div>
|
|
<div class="icon-desc">Uroczy robot z uśmiechem i anteną wskazującą północ</div>
|
|
</div>
|
|
|
|
<!-- 7. Magic Sparkle -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">7</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="g7" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#8b5cf6"/>
|
|
<stop offset="100%" style="stop-color:#ec4899"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Main sparkle -->
|
|
<path d="M50 15 L53 45 L83 50 L53 55 L50 85 L47 55 L17 50 L47 45 Z" fill="url(#g7)" opacity="0.8"/>
|
|
<!-- Small sparkles -->
|
|
<path d="M25 25 L27 32 L34 34 L27 36 L25 43 L23 36 L16 34 L23 32 Z" fill="#fbbf24"/>
|
|
<path d="M75 70 L76 74 L80 75 L76 76 L75 80 L74 76 L70 75 L74 74 Z" fill="#22c55e"/>
|
|
<path d="M78 25 L79 28 L82 29 L79 30 L78 33 L77 30 L74 29 L77 28 Z" fill="#fbbf24"/>
|
|
<circle cx="50" cy="50" r="8" fill="white"/>
|
|
<text x="50" y="54" text-anchor="middle" fill="#8b5cf6" font-size="10" font-weight="bold">AI</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Magiczna Iskra</div>
|
|
<div class="icon-desc">Błyszcząca gwiazda symbolizująca magię AI</div>
|
|
</div>
|
|
|
|
<!-- 8. Circle N -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">8</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="g8" 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(#g8)" stroke-width="3"/>
|
|
<!-- Letter N stylized -->
|
|
<path d="M32 70 L32 30 L68 70 L68 30" stroke="url(#g8)" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<!-- North dot -->
|
|
<circle cx="50" cy="8" r="5" fill="#fbbf24"/>
|
|
<!-- Small AI badge -->
|
|
<circle cx="75" cy="75" r="12" fill="#22c55e"/>
|
|
<text x="75" y="79" text-anchor="middle" fill="white" font-size="9" font-weight="bold">AI</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Litera N</div>
|
|
<div class="icon-desc">Stylizowana litera N (Norda) z badge AI</div>
|
|
</div>
|
|
|
|
<!-- 9. Orbit -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">9</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Orbits -->
|
|
<ellipse cx="50" cy="50" rx="35" ry="15" fill="none" stroke="#22c55e" stroke-width="1.5" opacity="0.5" transform="rotate(-30 50 50)"/>
|
|
<ellipse cx="50" cy="50" rx="35" ry="15" fill="none" stroke="#3b82f6" stroke-width="1.5" opacity="0.5" transform="rotate(30 50 50)"/>
|
|
<ellipse cx="50" cy="50" rx="35" ry="15" fill="none" stroke="#8b5cf6" stroke-width="1.5" opacity="0.5" transform="rotate(90 50 50)"/>
|
|
<!-- Center -->
|
|
<circle cx="50" cy="50" r="15" fill="#1a2d4f" stroke="#22c55e" stroke-width="2"/>
|
|
<text x="50" y="54" text-anchor="middle" fill="#22c55e" font-size="11" font-weight="bold">AI</text>
|
|
<!-- Orbit dots -->
|
|
<circle cx="50" cy="15" r="5" fill="#fbbf24"/>
|
|
<circle cx="80" cy="60" r="4" fill="#22c55e"/>
|
|
<circle cx="25" cy="35" r="4" fill="#3b82f6"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Orbita</div>
|
|
<div class="icon-desc">Orbity symbolizujące połączenia i sieć biznesową</div>
|
|
</div>
|
|
|
|
<!-- 10. Gradient Compass Simple -->
|
|
<div class="icon-card">
|
|
<div class="icon-number">10</div>
|
|
<div class="icon-container">
|
|
<svg viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="g10" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#22c55e"/>
|
|
<stop offset="50%" style="stop-color:#3b82f6"/>
|
|
<stop offset="100%" style="stop-color:#8b5cf6"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="45" fill="#233e6d"/>
|
|
<!-- Simple compass with gradient -->
|
|
<circle cx="50" cy="50" r="35" fill="none" stroke="url(#g10)" stroke-width="3"/>
|
|
<line x1="50" y1="20" x2="50" y2="35" stroke="#fbbf24" stroke-width="4" stroke-linecap="round"/>
|
|
<line x1="50" y1="65" x2="50" y2="80" stroke="url(#g10)" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="20" y1="50" x2="35" y2="50" stroke="url(#g10)" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="65" y1="50" x2="80" y2="50" stroke="url(#g10)" stroke-width="3" stroke-linecap="round"/>
|
|
<!-- Center dot -->
|
|
<circle cx="50" cy="50" r="12" fill="#1a2d4f"/>
|
|
<circle cx="50" cy="50" r="8" fill="url(#g10)"/>
|
|
<text x="50" y="10" text-anchor="middle" fill="#fbbf24" font-size="8" font-weight="bold">N</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-name">Prosty Kompas</div>
|
|
<div class="icon-desc">Elegancki, minimalistyczny kompas z gradientem</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |