Here's my fixing up of it: main.js
async function getLatestRelease(repo) {
const response = await fetch(`https://api.github.com/repos/${repo}/releases/latest`);
const data = await response.json();
return data.tag_name;
}
function downloadFile(url, filename) {
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
async function showPopup(type) {
let popupText = '';
let downloadLink = '';
if (type === 'dev') {
popupText = 'Thank you for downloading Comp_V3 *dev*! This download link goes to the Github API. This is the source code. <br> <br> You will need my Custom SDK to use this. Check out my other download in the navbar.';
downloadLink = 'https://github.com/RanchoDVT/Comp-V5/archive/refs/heads/dev.zip';
document.getElementById('popup-title').innerText = 'Download Comp-V3 ' + type;
} else if (type === 'stable') {
const latestTag = await getLatestRelease('RanchoDVT/Comp-V5');
popupText = 'Thank you for downloading Comp_V3 stable! This download link goes to the Github API. This is the source code. <br> <br> You will need my Custom SDK to use this. Check out my other download in the navbar.';
downloadLink = `https://github.com/RanchoDVT/Comp-V5/archive/refs/tags/${latestTag}.zip`;
document.getElementById('popup-title').innerText = 'Download Comp-V3 ' + type + ' ' + latestTag;
} else if (type === 'sdk') {
const latestTag = await getLatestRelease('RanchoDVT/Vex-SDK');
popupText = 'Thank you for downloading my custom SDK. This is unofficial and in no way affiliated, endorsed, supported, or created by VEX Robotics. <br> <br> You will need this to install my Custom SDK (This) to use my Comp_V3 Program. This modifies Vex\'s robotics extension, so PLEASE don\'t go to them if you have problems with this. Please contact me. <br> <br>There is a PowerShell script for this to make it easier: ';
popupText += '<a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/RanchoDVT/Vex-SDK/blob/dev/Vex-SDK.updater.ps1">Powershell download</a>';
document.getElementById('popup-title').innerText = 'Download Custom ' + type + ' ' + latestTag;
downloadLink = `https://github.com/RanchoDVT/Vex-SDK/archive/refs/tags/${latestTag}.zip`;
}
document.getElementById('popup-text').innerHTML = popupText; // Use innerHTML to render HTML content
document.getElementById('download-link').href = downloadLink;
document.getElementById('popup').classList.add('active');
document.getElementById('overlay').classList.add('active');
}
function hidePopup() {
document.getElementById('popup').classList.remove('active');
document.getElementById('overlay').classList.remove('active');
}
the navbar:
<nav>
<li><a class="nav-link" data-page="index.html" href="index.html">Home</a></li>
<li class="dropdown">
<a class="nav-link" data-page="projects.html" href="projects.html">Projects</a>
<div class="dropdown-content">
<a target="_blank" href="https://github.com/Voidless7125/Comp-V5">Comp V3</a>
<a target="_blank" href="https://github.com/RanchoDVT/Vex-SDK">Custom SDK</a>
<a target="_blank" href="https://ranchodvt.github.io/Comp-V5/">This website!</a>
</div>
</li>
<li class="dropdown">
<a class="nav-link">Downloads</a>
<div class="dropdown-content">
<a onclick="showPopup('stable')">Comp_V3 Stable</a>
<a onclick="showPopup('dev')">Comp_V3 Dev</a>
<a onclick="showPopup('sdk')">Custom SDK Stable</a>
</div>
</li>
<li><a class="nav-link" data-page="features.html" href="features.html">Features</a></li>
<li><a class="nav-link" data-page="contact.html" href="contact.html">Contact</a></li>
<li style="float: right;"><a class="nav-link" data-page="about.html" href="about.html">About</a></li>
</nav>
<!-- Pop-Up Structure -->
<div id="popup" class="popup">
<div class="popup-header">
<h2 id="popup-title">Download</h2>
</div>
<p id="popup-text"></p>
<button class="cancel-btn" onclick="hidePopup()">Cancel</button>
<a id="download-link" class="download-btn" href="#" download>Download</a>
</div>
<div id="overlay" class="overlay" onclick="hidePopup()"></div>
and the css:
.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
border-radius: 8px;
}
.popup.active {
display: block;
background-color: black;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
background-color: black;
}
.popup-header h2 {
margin: 0;
font-size: 18px;
background-color: black;
}
.download-btn, .cancel-btn {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.download-btn {
background-color: #4CAF50;
color: white;
text-decoration: none;
text-align: center;
}
.cancel-btn {
background-color: #f44336;
color: white;
}
.overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.overlay.active {
display: block;
}