Merge pull request #30 from web3dev1337/feat/add-sponsor-links-shaderbrew

feat: add sponsor links to ShaderBrew website and README

Author: web3dev1337

README.md

@@ -1,9 +1,13 @@
 # ShaderBrew
 
+[![Sponsor](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white)](https://github.com/sponsors/web3dev1337)
+
 Professional WebGL procedural texture generator. Multi-layer compositing, PBR map generation, 3D material preview, 52 custom GLSL shaders, and 65+ procedural effects — all running in your browser with zero dependencies.
 
 **[Live Showcase](https://web3dev1337.github.io/shaderbrew/showcase.html)** | **[Open Editor](https://web3dev1337.github.io/shaderbrew/editor.html)** | **[Material Forge](https://web3dev1337.github.io/shaderbrew/demos.html)**
 
+Support ongoing development: **[github.com/sponsors/web3dev1337](https://github.com/sponsors/web3dev1337)**
+
 <p align="center">
 <img src="docs/media/material-forge-3d.png" width="800" alt="Procedural Material Forge — 8 animated 3D materials with PBR lighting">
 </p>

src/ui/top-nav.js

@@ -67,6 +67,16 @@ function initTopNav() {
 		#top-nav .nav-spacer { flex: 1; }
 		#top-nav .nav-right a { color: #8888aa; font-size: 12px; padding: 5px 10px; }
 		#top-nav .nav-right a:hover { color: #ddd; background: rgba(255,255,255,0.05); }
+		#top-nav .nav-right a.nav-sponsor {
+			color: #ffd5ef;
+			background: rgba(236, 72, 153, 0.16);
+			box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.45);
+		}
+		#top-nav .nav-right a.nav-sponsor:hover {
+			color: #fff;
+			background: rgba(236, 72, 153, 0.28);
+			box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.7);
+		}
 		#site-footer {
 			border-top: 1px solid #1a1a2e; padding: 18px 24px; margin-top: 40px;
 			display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
@@ -125,6 +135,14 @@ function initTopNav() {
 	ghLink.textContent = "GitHub";
 	rightGroup.appendChild(ghLink);
 
+	const sponsorLink = document.createElement("a");
+	sponsorLink.href = "https://github.com/sponsors/web3dev1337";
+	sponsorLink.target = "_blank";
+	sponsorLink.rel = "noopener";
+	sponsorLink.textContent = "Sponsor";
+	sponsorLink.className = "nav-sponsor";
+	rightGroup.appendChild(sponsorLink);
+
 	nav.appendChild(rightGroup);
 
 	if (!isEditor) document.body.classList.add("has-top-nav");
@@ -133,7 +151,7 @@ function initTopNav() {
 	if (!isEditor && path !== "credits.html") {
 		const footer = document.createElement("div");
 		footer.id = "site-footer";
-		footer.innerHTML = `<span class="footer-credit">Shader library: <a href="https://github.com/mebiusbox/pixy.js" target="_blank">pixy.js</a> by <a href="https://github.com/mebiusbox" target="_blank">mebiusbox</a> (MIT) · Includes <a href="credits.html">Shadertoy community shaders</a></span><span><a href="credits.html">Credits</a> · <a href="https://github.com/web3dev1337/shaderbrew" target="_blank">GitHub</a></span>`;
+		footer.innerHTML = `<span class="footer-credit">Shader library: <a href="https://github.com/mebiusbox/pixy.js" target="_blank">pixy.js</a> by <a href="https://github.com/mebiusbox" target="_blank">mebiusbox</a> (MIT) · Includes <a href="credits.html">Shadertoy community shaders</a></span><span><a href="credits.html">Credits</a> · <a href="https://github.com/web3dev1337/shaderbrew" target="_blank">GitHub</a> · <a href="https://github.com/sponsors/web3dev1337" target="_blank" rel="noopener">Sponsor</a></span>`;
 		document.body.appendChild(footer);
 	}