vndangkhoa/kv-netflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(branding): Red SVG icons and updated APK

Browse source
This commit is contained in:
Khoa.vo 2025-12-24 17:36:43 +07:00
parent 4c71c4853a
commit 3341f20256
11 changed files with 118 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
backend/static/StreamFlix-Universal-v1.0.8.apk
View file

Binary file not shown.

14
backend/static/assets/apple-touch-icon.svg Normal file
View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<linearGradient id="appleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
</defs>
<!-- Apple touch icon background -->
<rect width="180" height="180" fill="#141414"/>
<!-- Play circle -->
<circle cx="90" cy="90" r="60" fill="url(#appleGrad)"/>
<!-- Play triangle -->
<polygon points="75,60 75,120 120,90" fill="#141414"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 543 B

11
backend/static/assets/favicon.svg Normal file
View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<defs>
<linearGradient id="fav" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
</defs>
<rect width="32" height="32" rx="6" fill="#141414"/>
<circle cx="16" cy="16" r="10" fill="url(#fav)"/>
<polygon points="13,11 13,21 23,16" fill="#141414"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 445 B

18
backend/static/assets/icon.svg Normal file
View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a1a2e"/>
<stop offset="100%" style="stop-color:#0f0f1a"/>
</linearGradient>
<linearGradient id="playGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="512" height="512" rx="100" fill="url(#bgGrad)"/>
<!-- Play circle -->
<circle cx="256" cy="256" r="160" fill="url(#playGrad)"/>
<!-- Play triangle -->
<polygon points="210,170 210,342 370,256" fill="#141414"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 744 B

37
backend/static/assets/logo.svg
View file

@ -1,32 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<defs>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF0000;stop-opacity:1" />
<stop offset="100%" style="stop-color:#B30000;stop-opacity:1" />
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
<feOffset dx="0" dy="2" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- S Icon/Mark -->
<path d="M40 20 L60 20 L60 40 L40 40 L40 60 L60 60 L60 80 L40 80" fill="none" stroke="url(#logoGradient)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" filter="url(#shadow)" />
<!-- StreamFlix Text -->
<text x="80" y="70" font-family="Arial, sans-serif" font-weight="900" font-size="52" fill="white" style="letter-spacing: -2px;">
STREAM<tspan fill="url(#logoGradient)">FLIX</tspan>
</text>
<!-- Subtitle -->
<text x="82" y="90" font-family="Arial, sans-serif" font-weight="400" font-size="12" fill="#888" style="letter-spacing: 4px; text-transform: uppercase;">
Premium Cinema Experience
</text>
<!-- Play button icon -->
<circle cx="25" cy="30" r="22" fill="url(#goldGradient)"/>
<polygon points="20,20 20,40 38,30" fill="#141414"/>
<!-- Text -->
<text x="55" y="40" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#ffffff">Stream<tspan fill="url(#goldGradient)">Flix</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 615 B

4
backend/static/index.html
View file

@ -9,6 +9,10 @@
<meta name="theme-color" content="#141414">
<meta name="referrer" content="no-referrer">
<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="apple-touch-icon" href="assets/apple-touch-icon.svg">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />

14
frontend/assets/apple-touch-icon.svg Normal file
View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<linearGradient id="appleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
</defs>
<!-- Apple touch icon background -->
<rect width="180" height="180" fill="#141414"/>
<!-- Play circle -->
<circle cx="90" cy="90" r="60" fill="url(#appleGrad)"/>
<!-- Play triangle -->
<polygon points="75,60 75,120 120,90" fill="#141414"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 543 B

11
frontend/assets/favicon.svg Normal file
View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<defs>
<linearGradient id="fav" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
</defs>
<rect width="32" height="32" rx="6" fill="#141414"/>
<circle cx="16" cy="16" r="10" fill="url(#fav)"/>
<polygon points="13,11 13,21 23,16" fill="#141414"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 445 B

18
frontend/assets/icon.svg Normal file
View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a1a2e"/>
<stop offset="100%" style="stop-color:#0f0f1a"/>
</linearGradient>
<linearGradient id="playGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="512" height="512" rx="100" fill="url(#bgGrad)"/>
<!-- Play circle -->
<circle cx="256" cy="256" r="160" fill="url(#playGrad)"/>
<!-- Play triangle -->
<polygon points="210,170 210,342 370,256" fill="#141414"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 744 B

37
frontend/assets/logo.svg
View file

@ -1,32 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<defs>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF0000;stop-opacity:1" />
<stop offset="100%" style="stop-color:#B30000;stop-opacity:1" />
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e50914"/>
<stop offset="100%" style="stop-color:#b2070f"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
<feOffset dx="0" dy="2" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- S Icon/Mark -->
<path d="M40 20 L60 20 L60 40 L40 40 L40 60 L60 60 L60 80 L40 80" fill="none" stroke="url(#logoGradient)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" filter="url(#shadow)" />
<!-- StreamFlix Text -->
<text x="80" y="70" font-family="Arial, sans-serif" font-weight="900" font-size="52" fill="white" style="letter-spacing: -2px;">
STREAM<tspan fill="url(#logoGradient)">FLIX</tspan>
</text>
<!-- Subtitle -->
<text x="82" y="90" font-family="Arial, sans-serif" font-weight="400" font-size="12" fill="#888" style="letter-spacing: 4px; text-transform: uppercase;">
Premium Cinema Experience
</text>
<!-- Play button icon -->
<circle cx="25" cy="30" r="22" fill="url(#goldGradient)"/>
<polygon points="20,20 20,40 38,30" fill="#141414"/>
<!-- Text -->
<text x="55" y="40" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#ffffff">Stream<tspan fill="url(#goldGradient)">Flix</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 615 B

4
frontend/index.html
View file

@ -9,6 +9,10 @@
<meta name="theme-color" content="#141414">
<meta name="referrer" content="no-referrer">
<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="apple-touch-icon" href="assets/apple-touch-icon.svg">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />