180 lines
4.7 KiB
Plaintext
180 lines
4.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Download DocTracker</title>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: Inter, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
/* align-items: center; */
|
|
height: 100vh;
|
|
background: #ffffff;
|
|
color: #111;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.container {
|
|
max-width: 630px;
|
|
}
|
|
|
|
h1 span {
|
|
color: #1a168b;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 17px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.os-select {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 18px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.os-btn {
|
|
padding: 12px 22px;
|
|
border-radius: 30px;
|
|
border: 2px solid #ddd;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
background: white;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.os-btn img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.active img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.os-btn.active {
|
|
background: #0a0670;
|
|
color: #fff;
|
|
border-color: #0a0670;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
|
|
|
|
.download-btn {
|
|
margin: 0 auto;
|
|
padding: 14px 25px;
|
|
background: #d4d7f7;
|
|
color: #0a0670;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.download-btn img {
|
|
filter: brightness(0) invert(1);
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
#downloadBtn {
|
|
background: none;
|
|
border: none;
|
|
font-size: 15px;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
background: #c5c8f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>Download <span>DocTracker</span></h1>
|
|
|
|
<p class="desc">
|
|
Let your clients see your real-time work logs, ensuring<br />
|
|
you get paid accurately for every minute you've put in.
|
|
</p>
|
|
|
|
<div class="os-select">
|
|
<div class="os-btn active" data-os="windows">
|
|
<img src="/public/images/windows.png" alt="windows">
|
|
<span>Windows</span>
|
|
</div>
|
|
<div class="os-btn" data-os="mac">
|
|
<img src="/public/images/mac-os-logo.png" alt="macos">
|
|
<span>MacOS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="download-btn">
|
|
<!-- <img src="/public/images/downloads.png" alt="macos" > -->
|
|
<button id="downloadBtn">
|
|
Download Windows version 3.2.1
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const osButtons = document.querySelectorAll(".os-btn");
|
|
const downloadBtn = document.getElementById("downloadBtn");
|
|
const version = "<%= version || '3.2.1' %>";
|
|
|
|
let selectedOS = "windows";
|
|
|
|
// -------- Auto OS Detection --------
|
|
const platform = navigator.userAgent.toLowerCase();
|
|
if (platform.includes("mac")) selectedOS = "mac";
|
|
else selectedOS = "windows";
|
|
|
|
// Apply pre-selection
|
|
osButtons.forEach(btn => {
|
|
btn.classList.toggle("active", btn.dataset.os === selectedOS);
|
|
});
|
|
|
|
// Update button text
|
|
downloadBtn.innerHTML =
|
|
`Download ${selectedOS === 'windows' ? 'Windows' : 'MacOS'} version ${version}`;
|
|
|
|
// -------- Manual Selection by User --------
|
|
osButtons.forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
osButtons.forEach(b => b.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
selectedOS = btn.dataset.os;
|
|
|
|
downloadBtn.innerHTML =
|
|
`Download ${selectedOS === 'windows' ? 'Windows' : 'MacOS'} version ${version}`;
|
|
});
|
|
});
|
|
|
|
// -------- Download --------
|
|
downloadBtn.addEventListener("click", () => {
|
|
window.location.href = `/download-file?os=${selectedOS}`;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |