iulian/streamflow
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit: StreamFlow IPTV platform

Browse source
This commit is contained in:
aiulian25 2025-12-17 00:42:43 +00:00
commit 73a8ae9ffd
1240 changed files with 278451 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

292
frontend/public/icons-preview.html Normal file
View file

@ -0,0 +1,292 @@
<!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>