Hugyouu/Letterboxd-Diary-Posters-Picker
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

improve first page with logo and footer

Browse Source
This commit is contained in:
Hugo Pierret
2025-11-09 18:07:19 +01:00
parent 88abed086f
commit 37f7ccbb12
6 changed files with 157 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,5 +1,5 @@
{ {
"name": "frontend", "name": "poster-picker",
"version": "1.0.0", "version": "1.0.0",
"homepage": "/", "homepage": "/",
"dependencies": { "dependencies": {

13
public/icon.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096" width="4096" height="4096">
<style>
.s0 { fill: #ff8000 }
.s1 { fill: #40bcf4 }
.s2 { fill: #00e054 }
.s3 { fill: #ffffff }
</style>
<path id="Forme 2 copy 3" fill-rule="evenodd" class="s0" d="m452.08 1293.69l678.89-145.27c163.64-35.01 324.68 69.26 359.69 232.9l282.79 1321.57c35.02 163.64-69.25 324.68-232.89 359.69l-678.9 145.27c-163.64 35.02-324.68-69.25-359.69-232.89l-282.79-1321.58c-35.01-163.63 69.26-324.67 232.9-359.69z"/>
<path id="Forme 2 copy 4" fill-rule="evenodd" class="s1" d="m2964.99 1139.1l679.01 144.72c163.66 34.89 268.06 195.84 233.17 359.51l-281.73 1321.79c-34.88 163.66-195.84 268.06-359.51 233.18l-679-144.73c-163.67-34.88-268.07-195.84-233.18-359.51l281.73-1321.78c34.89-163.67 195.84-268.07 359.51-233.18z"/>
<path id="Forme 2 copy 5" fill-rule="evenodd" class="s2" d="m1717.76 892.06h694.26c167.34 0 303 135.66 303 303v1351.48c0 167.34-135.66 303-303 303h-694.26c-167.34 0-303-135.66-303-303v-1351.48c0-167.34 135.66-303 303-303z"/>
<path id="Forme 2 copy 2" fill-rule="evenodd" class="s3" d="m2323.75 2694.06l281.73-1321.78c15.43-72.36 55.49-133.14 109.54-175.41v1349.67c0 167.34-135.66 303-303 303h-80.58c-15.61-48.65-19.11-101.92-7.69-155.48z"/>
<path id="Forme 2" fill-rule="evenodd" class="s3" d="m1490.66 1381.32l282.79 1321.57c10.77 50.33 8.36 100.41-4.89 146.65h-50.8c-167.34 0-303-135.66-303-303v-1309.82c36.88 38.99 63.85 88.28 75.9 144.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
public/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta

43
src/components/UploadDiary.js
View File

@@ -7,6 +7,8 @@ import {
Button, Button,
CircularProgress, CircularProgress,
TextField, TextField,
Box,
Link,
} from "@material-ui/core"; } from "@material-ui/core";
import { CloudUploadOutlined } from "@material-ui/icons"; import { CloudUploadOutlined } from "@material-ui/icons";
import CloudDoneOutlinedIcon from "@mui/icons-material/CloudDoneOutlined"; import CloudDoneOutlinedIcon from "@mui/icons-material/CloudDoneOutlined";
@@ -14,6 +16,7 @@ import { useDropzone } from "react-dropzone";
import axios from "axios"; import axios from "axios";
const apiUrl = process.env.REACT_APP_API_URL; const apiUrl = process.env.REACT_APP_API_URL;
const VERSION = require("../../package.json").version;
const UploadDiary = () => { const UploadDiary = () => {
const [file, setFile] = useState(null); const [file, setFile] = useState(null);
@@ -50,8 +53,6 @@ const UploadDiary = () => {
setUploading(true); setUploading(true);
try { try {
if (username) { if (username) {
console.log(`Fetching diary for user: ${username}`);
// Call backend to fetch diary from username
const response = await axios.post( const response = await axios.post(
`${apiUrl}/api/fetch-diary`, `${apiUrl}/api/fetch-diary`,
{ username }, { username },
@@ -84,8 +85,12 @@ const UploadDiary = () => {
}; };
return ( return (
<Box>
<Container className="upload-diary"> <Container className="upload-diary">
<div className="upload-card"> <div className="upload-card">
<div className="logo-container">
<img src="/icon.svg" alt="logo" className="logo" />
</div>
<Typography variant="h4" className="title"> <Typography variant="h4" className="title">
Upload Letterboxd Diary Upload Letterboxd Diary
</Typography> </Typography>
@@ -141,8 +146,8 @@ const UploadDiary = () => {
This tool allows you to easily import your Letterboxd diary and select This tool allows you to easily import your Letterboxd diary and select
your favorite movie poster. Follow these simple steps: your favorite movie poster. Follow these simple steps:
<br /> <br />
<strong>1. Enter Your Letterboxd Username:</strong> Type your Letterboxd <strong>1. Enter Your Letterboxd Username:</strong> Type your
username to automatically fetch your diary. Letterboxd username to automatically fetch your diary.
<br /> <br />
<strong>2. Or Upload Your CSV File:</strong> If you prefer, you can <strong>2. Or Upload Your CSV File:</strong> If you prefer, you can
still upload your diary.csv file directly. still upload your diary.csv file directly.
@@ -151,10 +156,36 @@ const UploadDiary = () => {
application will process your diary. application will process your diary.
<br /> <br />
<strong>4. Poster Selection:</strong> After processing, you'll be <strong>4. Poster Selection:</strong> After processing, you'll be
redirected to the Poster Selector page, where you can browse and choose redirected to the Poster Selector page, where you can browse and
your favorite movie poster based on your Letterboxd diary. choose your favorite movie poster based on your Letterboxd diary.
</Typography> </Typography>
</Container> </Container>
<Box
component="footer"
className="footer"
>
<Box
className="footer-text"
>
<Typography variant="body2" style={{ opacity: 0.7 }}>
v{VERSION}
</Typography>
<Typography variant="body2" style={{ opacity: 0.5 }}>
•
</Typography>
<Link
href="https://github.com/Hugyouu/Letterboxd-Diary-Posters-Picker"
target="_blank"
rel="noopener noreferrer"
className="link"
onMouseEnter={(e) => (e.currentTarget.style.opacity = 1)}
onMouseLeave={(e) => (e.currentTarget.style.opacity = 0.7)}
>
<span>Hugyouu</span>
</Link>
</Box>
</Box>
</Box>
); );
}; };

5
src/styles/scss/_posterSelector.scss
View File

@@ -8,9 +8,8 @@ $border-color: #667788;
$hover-color: rgba(102, 119, 136, 0.2); $hover-color: rgba(102, 119, 136, 0.2);
.poster-selector { .poster-selector {
padding: 0 2rem; margin-top: 2rem;
max-width: 100% !important; // Override MUI Container margin-bottom: 2rem;
margin: 2rem auto 4rem !important;
.content-paper { .content-paper {
padding: 1.5rem; padding: 1.5rem;

38
src/styles/scss/_uploadDiary.scss
View File

@@ -1,7 +1,7 @@
.upload-diary { .upload-diary {
padding: 3rem; padding: 3rem;
background-color: #14181c; background-color: #14181c;
min-height: 100vh; min-height: calc(100vh - 60px);
display: flex !important; display: flex !important;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -14,6 +14,23 @@
border-radius: 4px; border-radius: 4px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
padding: 2rem; padding: 2rem;
padding-top: 4rem;
position: relative;
.logo-container {
position: absolute;
top: -80px;
left: 50%;
transform: translate(-50%);
z-index: 10;
.logo {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
}
.title { .title {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -110,3 +127,22 @@
padding: 1.5rem; padding: 1.5rem;
} }
} }
.footer {
padding: 20px;
text-align: center;
color: #526e89;
.footer-text {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
.link {
text-decoration: none;
color: inherit
}
}
}