forked from PrivateCoffee/transfer.coffee
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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Transfer.coffee</title>
|
<title>Transfer.coffee</title>
|
||||||
<style>
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
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>
|
|
||||||
<script src="/dist/js/webtorrent.min.js"></script>
|
<script src="/dist/js/webtorrent.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -88,94 +27,6 @@
|
||||||
<div class="result" id="downloadResult"></div>
|
<div class="result" id="downloadResult"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script src="/js/index.js"></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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue