292 lines
8.7 KiB
HTML
292 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>StreamFlow Icons Preview</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 40px 20px;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
h1 {
|
||
color: white;
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
font-size: 2.5rem;
|
||
}
|
||
.subtitle {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
font-size: 1.1rem;
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 30px;
|
||
margin-bottom: 60px;
|
||
}
|
||
.icon-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
text-align: center;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.icon-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.icon-card img {
|
||
width: 100%;
|
||
max-width: 150px;
|
||
height: auto;
|
||
margin-bottom: 15px;
|
||
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
|
||
}
|
||
.icon-size {
|
||
font-weight: 700;
|
||
color: #a855f7;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 5px;
|
||
}
|
||
.icon-type {
|
||
color: #666;
|
||
font-size: 0.875rem;
|
||
}
|
||
.color-palette {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
margin-bottom: 40px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.color-palette h2 {
|
||
color: #333;
|
||
margin-bottom: 25px;
|
||
font-size: 1.8rem;
|
||
}
|
||
.colors {
|
||
display: flex;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.color-swatch {
|
||
flex: 1;
|
||
min-width: 150px;
|
||
text-align: center;
|
||
}
|
||
.color-box {
|
||
height: 100px;
|
||
border-radius: 12px;
|
||
margin-bottom: 10px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.color-name {
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
}
|
||
.color-hex {
|
||
font-family: 'Courier New', monospace;
|
||
color: #666;
|
||
font-size: 0.875rem;
|
||
}
|
||
.usage-section {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.usage-section h2 {
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
font-size: 1.8rem;
|
||
}
|
||
.usage-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
.usage-card {
|
||
border: 2px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
.usage-card img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
.usage-info h3 {
|
||
color: #333;
|
||
font-size: 1rem;
|
||
margin-bottom: 5px;
|
||
}
|
||
.usage-info p {
|
||
color: #666;
|
||
font-size: 0.875rem;
|
||
}
|
||
.gradient-demo {
|
||
background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
|
||
height: 120px;
|
||
border-radius: 12px;
|
||
margin: 20px 0;
|
||
box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🎬 StreamFlow Logo & Icons</h1>
|
||
<p class="subtitle">Professional IPTV Application Branding</p>
|
||
|
||
<!-- Color Palette -->
|
||
<div class="color-palette">
|
||
<h2>🎨 Brand Colors</h2>
|
||
<div class="colors">
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #a855f7;"></div>
|
||
<div class="color-name">Purple Primary</div>
|
||
<div class="color-hex">#a855f7</div>
|
||
</div>
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #3b82f6;"></div>
|
||
<div class="color-name">Blue Secondary</div>
|
||
<div class="color-hex">#3b82f6</div>
|
||
</div>
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #c084fc;"></div>
|
||
<div class="color-name">Purple Light</div>
|
||
<div class="color-hex">#c084fc</div>
|
||
</div>
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #9333ea;"></div>
|
||
<div class="color-name">Purple Dark</div>
|
||
<div class="color-hex">#9333ea</div>
|
||
</div>
|
||
</div>
|
||
<div class="gradient-demo"></div>
|
||
<p style="text-align: center; color: #666; margin-top: 10px;">
|
||
<strong>Gradient:</strong> linear-gradient(135deg, #a855f7 0%, #3b82f6 100%)
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Icon Sizes -->
|
||
<h2 style="color: white; text-align: center; margin-bottom: 30px; font-size: 2rem;">📱 PWA Icons (Rounded)</h2>
|
||
<div class="grid">
|
||
<div class="icon-card">
|
||
<img src="icons/icon-72x72.svg" alt="72x72">
|
||
<div class="icon-size">72×72</div>
|
||
<div class="icon-type">Mobile Small</div>
|
||
</div>
|
||
<div class="icon-card">
|
||
<img src="icons/icon-96x96.svg" alt="96x96">
|
||
<div class="icon-size">96×96</div>
|
||
<div class="icon-type">Mobile Medium</div>
|
||
</div>
|
||
<div class="icon-card">
|
||
<img src="icons/icon-128x128.svg" alt="128x128">
|
||
<div class="icon-size">128×128</div>
|
||
<div class="icon-type">Tablet</div>
|
||
</div>
|
||
<div class="icon-card">
|
||
<img src="icons/icon-144x144.svg" alt="144x144">
|
||
<div class="icon-size">144×144</div>
|
||
<div class="icon-type">Mobile High-Res</div>
|
||
</div>
|
||
<div class="icon-card">
|
||
<img src="icons/icon-152x152.svg" alt="152x152">
|
||
<div class="icon-size">152×152</div>
|
||
<div class="icon-type">iPad Touch</div>
|
||
</div>
|
||
<div class="icon-card">
|
||
<img src="icons/icon-192x192.svg" alt="192x192">
|
||
<div class="icon-size">192×192</div>
|
||
<div class="icon-type">Standard PWA</div>
|
||
</div>
|
||
<div class="icon-card">
|
||
<img src="icons/icon-384x384.svg" alt="384x384">
|
||
<div class="icon-size">384×384</div>
|
||
<div class="icon-type">High-DPI</div>
|
||
</div>
|
||
<div class="icon-card">
|
||
<img src="icons/icon-512x512.svg" alt="512x512">
|
||
<div class="icon-size">512×512</div>
|
||
<div class="icon-type">Desktop / Splash</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Usage Examples -->
|
||
<div class="usage-section">
|
||
<h2>🚀 Platform Usage</h2>
|
||
<div class="usage-grid">
|
||
<div class="usage-card">
|
||
<img src="favicon.svg" alt="Favicon">
|
||
<div class="usage-info">
|
||
<h3>Browser Tab</h3>
|
||
<p>favicon.svg (32×32)</p>
|
||
</div>
|
||
</div>
|
||
<div class="usage-card">
|
||
<img src="icons/icon-192x192.svg" alt="Android">
|
||
<div class="usage-info">
|
||
<h3>Android Home Screen</h3>
|
||
<p>192×192 maskable icon</p>
|
||
</div>
|
||
</div>
|
||
<div class="usage-card">
|
||
<img src="icons/icon-192x192.svg" alt="iOS">
|
||
<div class="usage-info">
|
||
<h3>iOS Home Screen</h3>
|
||
<p>Apple touch icon</p>
|
||
</div>
|
||
</div>
|
||
<div class="usage-card">
|
||
<img src="icons/icon-512x512.svg" alt="Desktop">
|
||
<div class="usage-info">
|
||
<h3>Desktop PWA</h3>
|
||
<p>512×512 for shortcuts</p>
|
||
</div>
|
||
</div>
|
||
<div class="usage-card">
|
||
<img src="icons/icon-512x512.svg" alt="Linux">
|
||
<div class="usage-info">
|
||
<h3>Linux AppImage</h3>
|
||
<p>512×512 app icon</p>
|
||
</div>
|
||
</div>
|
||
<div class="usage-card">
|
||
<img src="icons/icon-192x192.svg" alt="APK">
|
||
<div class="usage-info">
|
||
<h3>Android APK</h3>
|
||
<p>Adaptive icon resource</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 30px; padding: 20px; background: #f9fafb; border-radius: 12px; border-left: 4px solid #a855f7;">
|
||
<h3 style="color: #333; margin-bottom: 10px;">✅ All icons feature:</h3>
|
||
<ul style="color: #666; line-height: 1.8; margin-left: 20px;">
|
||
<li><strong>Rounded corners</strong> for modern aesthetics (~22% radius)</li>
|
||
<li><strong>Purple-blue gradient</strong> matching brand identity</li>
|
||
<li><strong>SVG format</strong> for crisp rendering at any scale</li>
|
||
<li><strong>Maskable safe zone</strong> for adaptive launcher icons</li>
|
||
<li><strong>Flow lines</strong> suggesting streaming motion</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|