replace PDF iframe with download links, remove main.js

This commit is contained in:
2026-03-05 14:23:58 +01:00
parent 57c8d56afa
commit a8f5cf4097
3 changed files with 27 additions and 72 deletions

View File

@@ -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">
<button class="tab active" data-version="v1.3">v1.3</button>
<button class="tab" data-version="v1.2">v1.2</button>
<button class="tab" data-version="v1.4">v1.4</button>
<button class="tab" data-version="v2.0">v2.0</button>
</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 class="layout-downloads">
<a href="pdf/eurkey-v1.3-layout.pdf" class="layout-link">v1.3 <span>PDF</span></a>
<a href="pdf/eurkey-v1.2-layout.pdf" class="layout-link">v1.2 <span>PDF</span></a>
<a href="pdf/eurkey-v1.4-layout.pdf" class="layout-link">v1.4 <span>PDF</span></a>
<a href="pdf/eurkey-v2.0-layout.pdf" class="layout-link">v2.0 <span>PDF</span></a>
</div>
</div>
</section>
@@ -142,6 +136,5 @@
</div>
</footer>
<script src="main.js"></script>
</body>
</html>

View File

@@ -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;
});
});
});

View File

@@ -207,55 +207,40 @@ img {
margin-bottom: 2rem;
}
.layout-tabs {
.layout-downloads {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
gap: 1rem;
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;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
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;
}
.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);
text-decoration: none;
}
/* 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;
}