PrivateCoffee/transfer.coffee
4
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ui): Add logo and header styling enhancements

Browse source 
Included the Transfer.coffee logo to enhance branding and updated header styles for improved visual appeal. Adjusted overall layout to center elements and ensure consistent presentation across the app.
This commit is contained in:
Kumi 2024-06-15 16:38:03 +02:00
parent eb557648f4
commit 1ba7beaa36
Signed by: kumi
GPG key ID: ECBCC9082395383F
4 changed files with 98 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -4,6 +4,8 @@
[![Matrix](https://shields.private.coffee/badge/Matrix-join%20us!-blue?logo=matrix)](https://matrix.to/#/#private.coffee:private.coffee)
[![Latest Git Commit](https://shields.private.coffee/gitea/last-commit/privatecoffee/transfer.coffee?gitea_url=https://git.private.coffee)](https://git.private.coffee/privatecoffee/transfer.coffee)
<img src="public/img/logo.png" alt="Transfer.coffee Logo" width="200" align="right">
Transfer.coffee is a simple Node.js web application that allows users to share files using WebTorrent. Users can upload files, generate mnemonic seeds, and share these seeds with others to download the files directly via peer-to-peer connections. The application supports optional configuration of STUN and TURN servers to facilitate NAT traversal.
## Features

155
public/css/style.css
View file

@ -1,64 +1,93 @@
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;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.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;
}
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.logo {
max-height: 60px;
margin-right: 15px;
}
h1 {
color: #5a5a5a;
font-size: 2.5em;
text-align: center;
margin-bottom: 20px;
}
header a {
text-decoration: none;
}
.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;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.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;
}

BIN
public/img/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 198 KiB

5
views/index.ejs
View file

@ -7,7 +7,10 @@
</head>
<body>
<div class="container">
<h1>Transfer.coffee</h1>
<header>
<a href="/" class="home"><img src="/img/logo.png" alt="Transfer.coffee Logo" class="logo" /></a>
<a href="/"><h1>Transfer.coffee</h1></a>
</header>
<div class="section" id="intro">
<p>
Transfer.coffee is a simple way to share files between devices. Just