Show thankyou and links after clicking download

xPaw · xPaw · commit 123296d1be6d · 2026-03-05T11:32:10.000+02:00
diff --git a/index.html b/index.html
@@ -111,6 +111,16 @@
 					d="M137.85 33.08c.21.71.26 1.89-.03 2.48a2.3 2.3 0 0 1-1.44 1.23l-14.56 4.05c-4.59.83-6.59-2.59-5.54-5.66s9.05-15.2 9.55-15.77 1.03-1.54.78-2.4a3.8 3.8 0 0 0-2.08-2.54 4.6 4.6 0 0 0-3.33-.2 4.2 4.2 0 0 0-2.64 1.98 6 6 0 0 0-.72 3.12c0 .07.02.84-.02 1.14l-.01.07a3.1 3.1 0 0 1-2.11 2.47c-1.56.45-3.22-.55-3.79-2.25l-.07-.21a11.23 11.23 0 0 1 .16-4.72 10.72 10.72 0 0 1 7.53-7.41q2.76-.8 5.43-.22 2.69.57 4.71 2.38a10 10 0 0 1 2.86 4.59c.62 2.04.64 4.09-.05 5.7s-8.63 12.3-8.45 12.91l10.66-2.94c.79-.23 1.62 0 2.24.55a4 4 0 0 1 .93 1.62Z"
 				/>
 			</symbol>
+			<symbol id="icon-discord" viewBox="0 0 16 16">
+				<path
+					d="M13.54 2.9a13.2 13.2 0 00-3.25-1c-.02 0-.04 0-.05.02-.15.25-.3.58-.41.83a12.18 12.18 0 00-3.66 0 8.4 8.4 0 00-.41-.83.05.05 0 00-.05-.02 13.16 13.16 0 00-3.28 1.03 13.5 13.5 0 00-2.34 9.14c1.37 1 2.7 1.61 4 2.02.01 0 .04 0 .05-.02.3-.42.58-.86.82-1.33a.05.05 0 00-.03-.07 8.76 8.76 0 01-1.25-.6.05.05 0 010-.08l.24-.2a.05.05 0 01.05 0 9.46 9.46 0 008.05 0h.05l.25.2c.03.02.02.07 0 .09-.4.23-.82.43-1.26.59a.05.05 0 00-.02.07c.24.47.51.91.81 1.33.02.02.04.03.06.02a13.23 13.23 0 004.02-2.06 13.41 13.41 0 00-2.39-9.12zm-8.2 7.31c-.78 0-1.43-.72-1.43-1.6 0-.9.64-1.62 1.44-1.62.8 0 1.45.73 1.43 1.61 0 .89-.63 1.61-1.43 1.61zm5.32 0c-.79 0-1.43-.72-1.43-1.6 0-.9.63-1.62 1.43-1.62.81 0 1.45.73 1.44 1.61 0 .89-.63 1.61-1.44 1.61z"
+				/>
+			</symbol>
+			<symbol id="icon-github" viewBox="0 0 16 16">
+				<path
+					d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+				/>
+			</symbol>
 		</svg>
 		<nav class="floating-nav" id="js-nav">
 			<a href="#" class="nav-home" aria-label="Source 2 Viewer - Back to top">
@@ -122,18 +132,14 @@
 			<a href="#features">Features</a>
 			<a href="#changelog">Changelog</a>
 			<a href="https://discord.gg/s9QQ7Wg7r4">
-				<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
-					<path
-						d="M13.54 2.9a13.2 13.2 0 00-3.25-1c-.02 0-.04 0-.05.02-.15.25-.3.58-.41.83a12.18 12.18 0 00-3.66 0 8.4 8.4 0 00-.41-.83.05.05 0 00-.05-.02 13.16 13.16 0 00-3.28 1.03 13.5 13.5 0 00-2.34 9.14c1.37 1 2.7 1.61 4 2.02.01 0 .04 0 .05-.02.3-.42.58-.86.82-1.33a.05.05 0 00-.03-.07 8.76 8.76 0 01-1.25-.6.05.05 0 010-.08l.24-.2a.05.05 0 01.05 0 9.46 9.46 0 008.05 0h.05l.25.2c.03.02.02.07 0 .09-.4.23-.82.43-1.26.59a.05.05 0 00-.02.07c.24.47.51.91.81 1.33.02.02.04.03.06.02a13.23 13.23 0 004.02-2.06 13.41 13.41 0 00-2.39-9.12zm-8.2 7.31c-.78 0-1.43-.72-1.43-1.6 0-.9.64-1.62 1.44-1.62.8 0 1.45.73 1.43 1.61 0 .89-.63 1.61-1.43 1.61zm5.32 0c-.79 0-1.43-.72-1.43-1.6 0-.9.63-1.62 1.43-1.62.81 0 1.45.73 1.44 1.61 0 .89-.63 1.61-1.44 1.61z"
-					/>
+				<svg aria-hidden="true" width="16" height="16">
+					<use href="#icon-discord" />
 				</svg>
 				Discord
 			</a>
 			<a href="https://github.com/ValveResourceFormat/ValveResourceFormat" aria-label="GitHub repository">
-				<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
-					<path
-						d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-					/>
+				<svg aria-hidden="true" width="16" height="16">
+					<use href="#icon-github" />
 				</svg>
 				GitHub
 			</a>
@@ -244,6 +250,31 @@ <h3>Fully open-source and reverse-engineered.</h3>
 					alt="Screenshot of Source 2 Viewer displaying a 3D rendered map of Inferno Night with detailed lighting and textures"
 					class="hero-screenshot"
 				>
+				<div class="thank-you-banner" id="js-thank-you">
+					<h2>Thanks for downloading!</h2>
+					<div class="thank-you-links">
+						<a href="https://github.com/ValveResourceFormat/ValveResourceFormat" target="_blank">
+							<svg aria-hidden="true" viewBox="0 0 16 16" width="20" height="20">
+								<path
+									d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
+								/>
+							</svg>
+							Star on GitHub
+						</a>
+						<a href="https://discord.gg/s9QQ7Wg7r4" target="_blank">
+							<svg aria-hidden="true" width="20" height="20">
+								<use href="#icon-discord" />
+							</svg>
+							Join Discord
+						</a>
+						<a href="https://github.com/ValveResourceFormat/ValveResourceFormat/issues" target="_blank">
+							<svg aria-hidden="true" width="20" height="20">
+								<use href="#icon-github" />
+							</svg>
+							Report Issues
+						</a>
+					</div>
+				</div>
 				<div class="hero-screenshot-author">
 					<svg
 						width="16"
diff --git a/static/main.js b/static/main.js
@@ -286,4 +286,8 @@ function OpenMediaModal(src, type) {
 	modal.showModal();
 }
 
+document.getElementById('js-download').addEventListener('click', () => {
+	document.getElementById('js-thank-you').classList.add('visible');
+});
+
 LoadReleases();
diff --git a/static/style.css b/static/style.css
@@ -253,6 +253,7 @@ a {
 	}
 
 	.hero-right {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		align-self: center;
@@ -286,6 +287,80 @@ a {
 				color: inherit;
 			}
 		}
+
+		.hero-screenshot,
+		.hero-screenshot-author {
+			transition: opacity 0.4s ease;
+		}
+
+		&:has(.thank-you-banner.visible) {
+			.hero-screenshot,
+			.hero-screenshot-author {
+				opacity: 0;
+				pointer-events: none;
+			}
+		}
+
+		.thank-you-banner {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 1.5rem;
+			text-align: center;
+			padding: 2rem;
+			opacity: 0;
+			pointer-events: none;
+			transition: opacity 0.4s ease;
+
+			svg {
+				fill: currentColor;
+				flex-shrink: 0;
+			}
+
+			&.visible {
+				opacity: 1;
+				pointer-events: auto;
+			}
+
+			h2 {
+				margin: 0;
+				font-size: 3rem;
+				color: #fff;
+			}
+		}
+
+		.thank-you-links {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			gap: 1rem;
+
+			a {
+				display: flex;
+				align-items: center;
+				gap: 0.6rem;
+				padding: 0.75rem 1.5rem;
+				font-size: 1.2rem;
+				border: 1px solid rgb(255 255 255 / 15%);
+				border-radius: 0.5rem;
+				color: hsl(216 30% 80%);
+				text-decoration: none;
+				font-weight: 500;
+				transition:
+					border-color 0.2s,
+					color 0.2s,
+					background 0.2s;
+
+				&:hover {
+					border-color: var(--color-accent);
+					color: var(--color-accent);
+					background: rgb(255 255 255 / 5%);
+				}
+			}
+		}
 	}
 
 	@media (max-width: 1300px) {

Original file line number	Diff line number	Diff line change
`@@ -286,4 +286,8 @@ function OpenMediaModal(src, type) {`
`286`	`286`	`modal.showModal();`
`287`	`287`	`}`
`288`	`288`
	`289`	`+document.getElementById('js-download').addEventListener('click', () => {`
	`290`	`+ document.getElementById('js-thank-you').classList.add('visible');`
	`291`	`+});`
	`292`	`+`
`289`	`293`	`LoadReleases();`