replace PDF iframe with download links, remove main.js

eurkey-macos.eu/index.html

@@ -71,17 +71,11 @@
 		<div class="container">
 			<h2>Layout Preview</h2>
 			<p class="section-sub">The complete key map for each version, showing all modifier layers and dead key compositions.</p>
-			<div class="layout-tabs">
+			<div class="layout-downloads">
-				<button class="tab active" data-version="v1.3">v1.3</button>
+				<a href="pdf/eurkey-v1.3-layout.pdf" class="layout-link">v1.3 <span>PDF</span></a>
-				<button class="tab" data-version="v1.2">v1.2</button>
+				<a href="pdf/eurkey-v1.2-layout.pdf" class="layout-link">v1.2 <span>PDF</span></a>
-				<button class="tab" data-version="v1.4">v1.4</button>
+				<a href="pdf/eurkey-v1.4-layout.pdf" class="layout-link">v1.4 <span>PDF</span></a>
-				<button class="tab" data-version="v2.0">v2.0</button>
+				<a href="pdf/eurkey-v2.0-layout.pdf" class="layout-link">v2.0 <span>PDF</span></a>
-			</div>
-			<div class="layout-viewer">
-				<iframe id="pdf-viewer" src="pdf/eurkey-v1.3-layout.pdf" title="EurKEY layout PDF"></iframe>
-				<p class="layout-fallback">
-					<a id="pdf-download" href="pdf/eurkey-v1.3-layout.pdf">Download layout PDF</a>
-				</p>
 			</div>
 		</div>
 	</section>
@@ -142,6 +136,5 @@
 		</div>
 	</footer>
 
-	<script src="main.js"></script>
 </body>
 </html>

eurkey-macos.eu/main.js

@@ -1,16 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-	const tabs = document.querySelectorAll(".tab");
-	const viewer = document.getElementById("pdf-viewer");
-	const download = document.getElementById("pdf-download");
-
-	tabs.forEach(tab => {
-		tab.addEventListener("click", () => {
-			tabs.forEach(t => t.classList.remove("active"));
-			tab.classList.add("active");
-			const version = tab.dataset.version;
-			const url = `pdf/eurkey-${version}-layout.pdf`;
-			viewer.src = url;
-			download.href = url;
-		});
-	});
-});

eurkey-macos.eu/style.css

@@ -207,55 +207,40 @@ img {
 	margin-bottom: 2rem;
 }
 
-.layout-tabs {
+.layout-downloads {
 	display: flex;
 	justify-content: center;
-	gap: 0.5rem;
+	gap: 1rem;
-	margin-bottom: 1.5rem;
+	flex-wrap: wrap;
 }
 
-.tab {
+.layout-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
 	background: #fff;
 	border: 1px solid rgba(0, 0, 0, 0.1);
 	border-radius: 8px;
-	padding: 0.5rem 1.25rem;
+	padding: 0.75rem 1.5rem;
-	font-size: 0.9rem;
+	font-size: 1rem;
-	font-weight: 500;
+	font-weight: 600;
-	cursor: pointer;
+	color: #1a1a2e;
+	text-decoration: none;
 	transition: all 0.15s;
-	color: #5a6178;
 }
 
-.tab:hover {
+.layout-link span {
+	font-size: 0.75rem;
+	font-weight: 500;
+	color: #5a6178;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.layout-link:hover {
 	border-color: #003399;
 	color: #003399;
-}
+	text-decoration: none;
-
-.tab.active {
-	background: #003399;
-	border-color: #003399;
-	color: #fff;
-}
-
-.layout-viewer {
-	background: #fff;
-	border: 1px solid rgba(0, 0, 0, 0.08);
-	border-radius: 12px;
-	overflow: hidden;
-}
-
-.layout-viewer iframe {
-	width: 100%;
-	height: 600px;
-	border: none;
-}
-
-.layout-fallback {
-	text-align: center;
-	padding: 0.75rem;
-	font-size: 0.875rem;
-	color: #5a6178;
-	border-top: 1px solid rgba(0, 0, 0, 0.06);
 }
 
 /* Installation */
@@ -372,9 +357,6 @@ img {
 		grid-template-columns: repeat(2, 1fr);
 	}
 
-	.layout-viewer iframe {
-		height: 400px;
-	}
 }
 
 @media (max-width: 480px) {
@@ -394,10 +376,6 @@ img {
 		grid-template-columns: 1fr;
 	}
 
-	.layout-viewer iframe {
-		height: 300px;
-	}
-
 	.install-screenshots {
 		grid-template-columns: 1fr;
 	}