feat(ui): separate CSS and JS into external files
Moved inline CSS from index.ejs to a new style.css file for cleaner structure and maintainability. Extracted embedded JavaScript to index.js to streamline HTML and enhance script manageability. Benefits: - Improved readability and organization of HTML - Easier maintenance and updates for CSS and JS - Potential for CSS and JS caching, improving load times No functional changes were made. Refactors existing code for better practices.
This commit is contained in:
parent
c398a409b6
commit
a8019c01a4
GPG key ID:
ECBCC9082395383F
3 changed files with 142 additions and 151 deletions
60
public/css/style.css
Normal file
60
public/css/style.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
input[type="file"],
|
||||
input[type="text"],
|
||||
input[type="url"] {
|
||||
width: calc(100% - 22px);
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
.progress {
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.progress-bar {
|
||||
width: 0;
|
||||
height: 20px;
|
||||
background-color: #28a745;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
.result {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 4px;
|
||||
}
|
||||
80
public/js/index.js
Normal file
80
public/js/index.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
const client = new WebTorrent();
|
||||
|
||||
function uploadFile() {
|
||||
const fileInput = document.getElementById("fileInput");
|
||||
const file = fileInput.files[0];
|
||||
const uploadProgressBar = document.getElementById("uploadProgressBar");
|
||||
|
||||
if (!file) {
|
||||
alert("Please select a file to upload.");
|
||||
return;
|
||||
}
|
||||
|
||||
const opts = {
|
||||
announce: [trackerUrl],
|
||||
};
|
||||
|
||||
client.seed(file, opts, (torrent) => {
|
||||
fetch(`/generate-mnemonic/${torrent.infoHash}`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const uploadResult = document.getElementById("uploadResult");
|
||||
uploadResult.innerHTML = `Started sharing file. Share this mnemonic: <strong>${data.mnemonic}</strong>
|
||||
<br>Note that the file will be available for download as long as this page is open.
|
||||
`;
|
||||
});
|
||||
|
||||
torrent.on("upload", () => {
|
||||
const progress = Math.round((torrent.uploaded / torrent.length) * 100);
|
||||
uploadProgressBar.style.width = `${progress}%`;
|
||||
uploadProgressBar.textContent = `${progress}%`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function downloadFile() {
|
||||
const mnemonicInput = document.getElementById("mnemonicInput").value;
|
||||
const downloadProgressBar = document.getElementById("downloadProgressBar");
|
||||
|
||||
if (!mnemonicInput) {
|
||||
alert("Please enter a mnemonic.");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/get-infohash/${mnemonicInput}`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const torrentId = data.infoHash;
|
||||
|
||||
const opts = {
|
||||
announce: [trackerUrl],
|
||||
};
|
||||
|
||||
client.add(torrentId, opts, (torrent) => {
|
||||
torrent.files[0].getBlob((err, blob) => {
|
||||
if (err) {
|
||||
const downloadResult = document.getElementById("downloadResult");
|
||||
downloadResult.innerHTML = `Error: ${err.message}`;
|
||||
return;
|
||||
}
|
||||
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = torrent.files[0].name;
|
||||
a.click();
|
||||
|
||||
const downloadResult = document.getElementById("downloadResult");
|
||||
downloadResult.innerHTML = `File downloaded: <strong>${torrent.files[0].name}</strong>`;
|
||||
});
|
||||
|
||||
torrent.on("download", () => {
|
||||
const progress = Math.round(
|
||||
(torrent.downloaded / torrent.length) * 100
|
||||
);
|
||||
downloadProgressBar.style.width = `${progress}%`;
|
||||
downloadProgressBar.textContent = `${progress}%`;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
153
views/index.ejs
153
views/index.ejs
|
|
@ -2,68 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Transfer.coffee</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
input[type="file"],
|
||||
input[type="text"],
|
||||
input[type="url"] {
|
||||
width: calc(100% - 22px);
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
.progress {
|
||||
width: 100%;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.progress-bar {
|
||||
width: 0;
|
||||
height: 20px;
|
||||
background-color: #28a745;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
.result {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<script src="/dist/js/webtorrent.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -88,94 +27,6 @@
|
|||
<div class="result" id="downloadResult"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const client = new WebTorrent();
|
||||
const trackerUrl = "<%= trackerUrl %>";
|
||||
|
||||
function uploadFile() {
|
||||
const fileInput = document.getElementById("fileInput");
|
||||
const file = fileInput.files[0];
|
||||
const uploadProgressBar = document.getElementById("uploadProgressBar");
|
||||
|
||||
if (!file) {
|
||||
alert("Please select a file to upload.");
|
||||
return;
|
||||
}
|
||||
|
||||
const opts = {
|
||||
announce: [trackerUrl],
|
||||
};
|
||||
|
||||
client.seed(file, opts, (torrent) => {
|
||||
fetch(`/generate-mnemonic/${torrent.infoHash}`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const uploadResult = document.getElementById("uploadResult");
|
||||
uploadResult.innerHTML = `Started sharing file. Share this mnemonic: <strong>${data.mnemonic}</strong>
|
||||
<br>Note that the file will be available for download as long as this page is open.
|
||||
`;
|
||||
});
|
||||
|
||||
torrent.on("upload", () => {
|
||||
const progress = Math.round(
|
||||
(torrent.uploaded / torrent.length) * 100
|
||||
);
|
||||
uploadProgressBar.style.width = `${progress}%`;
|
||||
uploadProgressBar.textContent = `${progress}%`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function downloadFile() {
|
||||
const mnemonicInput = document.getElementById("mnemonicInput").value;
|
||||
const downloadProgressBar = document.getElementById(
|
||||
"downloadProgressBar"
|
||||
);
|
||||
|
||||
if (!mnemonicInput) {
|
||||
alert("Please enter a mnemonic.");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/get-infohash/${mnemonicInput}`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const torrentId = data.infoHash;
|
||||
|
||||
const opts = {
|
||||
announce: [trackerUrl],
|
||||
};
|
||||
|
||||
client.add(torrentId, opts, (torrent) => {
|
||||
torrent.files[0].getBlob((err, blob) => {
|
||||
if (err) {
|
||||
const downloadResult =
|
||||
document.getElementById("downloadResult");
|
||||
downloadResult.innerHTML = `Error: ${err.message}`;
|
||||
return;
|
||||
}
|
||||
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = torrent.files[0].name;
|
||||
a.click();
|
||||
|
||||
const downloadResult =
|
||||
document.getElementById("downloadResult");
|
||||
downloadResult.innerHTML = `File downloaded: <strong>${torrent.files[0].name}</strong>`;
|
||||
});
|
||||
|
||||
torrent.on("download", () => {
|
||||
const progress = Math.round(
|
||||
(torrent.downloaded / torrent.length) * 100
|
||||
);
|
||||
downloadProgressBar.style.width = `${progress}%`;
|
||||
downloadProgressBar.textContent = `${progress}%`;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue