Use local live-demo SVG in READMEs

Add readme-assets/live-demo-button.svg and update README.md and sky_phone/README.md to reference the local SVG instead of the external shields.io badge. Replaces the remote badge with a bespoke SVG (larger, styled) and updates image paths/attributes for consistent appearance and offline reliability.
This commit is contained in:
Leon.Schmidt
2026-08-19 12:37:11 +02:00
parent 4df7f03901
commit c3f42410a1
3 changed files with 38 additions and 2 deletions
+1 -1
View File
@@ -11,7 +11,7 @@
<p align="center">
<a href="https://www.sky-systems.net/shop/phone#live-demo">
<img alt="Try the interactive Sky Phone live demo" src="https://img.shields.io/badge/TRY_THE_LIVE_DEMO-OPEN_NOW-7c3aed?style=for-the-badge" height="156">
<img alt="Try the interactive Sky Phone live demo" src="readme-assets/live-demo-button.svg" width="780">
</a>
</p>
+36
View File
@@ -0,0 +1,36 @@
<svg xmlns="http://www.w3.org/2000/svg" width="780" height="150" viewBox="0 0 780 150" role="img" aria-labelledby="title description">
<title id="title">Try the Sky Phone live demo</title>
<desc id="description">Open the complete interactive Sky Phone directly in your browser.</desc>
<defs>
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#6d28d9"/>
<stop offset="0.48" stop-color="#7c3aed"/>
<stop offset="1" stop-color="#2563eb"/>
</linearGradient>
<linearGradient id="shine" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.22"/>
<stop offset="0.5" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0.14"/>
</linearGradient>
<filter id="shadow" x="-10%" y="-30%" width="120%" height="170%">
<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#111827" flood-opacity="0.28"/>
</filter>
</defs>
<g filter="url(#shadow)">
<rect x="4" y="4" width="772" height="136" rx="30" fill="url(#background)"/>
<rect x="5" y="5" width="770" height="134" rx="29" fill="none" stroke="#c4b5fd" stroke-opacity="0.7" stroke-width="2"/>
<path d="M34 5H400L270 140H5V34A29 29 0 0 1 34 5Z" fill="url(#shine)"/>
<circle cx="72" cy="72" r="43" fill="#ffffff" fill-opacity="0.14"/>
<rect x="51" y="35" width="42" height="74" rx="10" fill="none" stroke="#ffffff" stroke-width="4"/>
<path d="M65 43h14M67 100h10" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<circle cx="86" cy="48" r="8" fill="#22d3ee"/>
<text x="132" y="66" fill="#ffffff" font-family="Segoe UI, Arial, sans-serif" font-size="32" font-weight="800" letter-spacing="0.8">TRY THE LIVE DEMO</text>
<text x="132" y="98" fill="#ede9fe" font-family="Segoe UI, Arial, sans-serif" font-size="17" font-weight="500">Experience the complete Sky Phone in your browser</text>
<rect x="590" y="48" width="156" height="50" rx="25" fill="#ffffff"/>
<text x="668" y="80" fill="#6d28d9" font-family="Segoe UI, Arial, sans-serif" font-size="16" font-weight="800" text-anchor="middle">OPEN NOW →</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

+1 -1
View File
@@ -11,7 +11,7 @@
<p align="center">
<a href="https://www.sky-systems.net/shop/phone#live-demo">
<img alt="Try the interactive Sky Phone live demo" src="https://img.shields.io/badge/TRY_THE_LIVE_DEMO-OPEN_NOW-7c3aed?style=for-the-badge" height="156">
<img alt="Try the interactive Sky Phone live demo" src="../readme-assets/live-demo-button.svg" width="780">
</a>
</p>