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

175
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,77 +85,107 @@ const UploadDiary = () => {
}; };
return ( return (
<Container className="upload-diary"> <Box>
<div className="upload-card"> <Container className="upload-diary">
<Typography variant="h4" className="title"> <div className="upload-card">
Upload Letterboxd Diary <div className="logo-container">
</Typography> <img src="/icon.svg" alt="logo" className="logo" />
<TextField </div>
className="username-field" <Typography variant="h4" className="title">
label="Letterboxd Username" Upload Letterboxd Diary
variant="outlined" </Typography>
fullWidth <TextField
value={username} className="username-field"
onChange={(e) => setUsername(e.target.value)} label="Letterboxd Username"
onKeyUp={(e) => { variant="outlined"
if (e.key === "Enter") handleUpload(); fullWidth
}} value={username}
placeholder="Enter your Letterboxd username" onChange={(e) => setUsername(e.target.value)}
/> onKeyUp={(e) => {
<Typography variant="body2" className="or-text"> if (e.key === "Enter") handleUpload();
Or upload a CSV file: }}
</Typography> placeholder="Enter your Letterboxd username"
<div {...getRootProps()} className="dropzone"> />
<input {...getInputProps()} /> <Typography variant="body2" className="or-text">
{file ? ( Or upload a CSV file:
<> </Typography>
<CloudDoneOutlinedIcon className="dropzone-icon" /> <div {...getRootProps()} className="dropzone">
<Typography variant="h6" className="dropzone-text"> <input {...getInputProps()} />
Your file has been uploaded: {file.name} {file ? (
</Typography> <>
</> <CloudDoneOutlinedIcon className="dropzone-icon" />
) : ( <Typography variant="h6" className="dropzone-text">
<> Your file has been uploaded: {file.name}
<CloudUploadOutlined className="dropzone-icon" /> </Typography>
<Typography variant="h6" className="dropzone-text"> </>
Drag and drop a CSV file here or click to select ) : (
</Typography> <>
</> <CloudUploadOutlined className="dropzone-icon" />
)} <Typography variant="h6" className="dropzone-text">
Drag and drop a CSV file here or click to select
</Typography>
</>
)}
</div>
<Grid container justify="center" className="progress-container">
{uploading ? (
<CircularProgress />
) : (
<Button
className="submit-button"
variant="contained"
onClick={handleUpload}
disabled={!username && !file}
>
SUBMIT
</Button>
)}
</Grid>
</div> </div>
<Grid container justify="center" className="progress-container"> <Typography variant="body1" className="overview-text">
{uploading ? ( This tool allows you to easily import your Letterboxd diary and select
<CircularProgress /> your favorite movie poster. Follow these simple steps:
) : ( <br />
<Button <strong>1. Enter Your Letterboxd Username:</strong> Type your
className="submit-button" Letterboxd username to automatically fetch your diary.
variant="contained" <br />
onClick={handleUpload} <strong>2. Or Upload Your CSV File:</strong> If you prefer, you can
disabled={!username && !file} still upload your diary.csv file directly.
> <br />
SUBMIT <strong>3. Automatic Processing:</strong> Once submitted, the
</Button> application will process your diary.
)} <br />
</Grid> <strong>4. Poster Selection:</strong> After processing, you'll be
</div> redirected to the Poster Selector page, where you can browse and
<Typography variant="body1" className="overview-text"> choose your favorite movie poster based on your Letterboxd diary.
This tool allows you to easily import your Letterboxd diary and select </Typography>
your favorite movie poster. Follow these simple steps: </Container>
<br /> <Box
<strong>1. Enter Your Letterboxd Username:</strong> Type your Letterboxd component="footer"
username to automatically fetch your diary. className="footer"
<br /> >
<strong>2. Or Upload Your CSV File:</strong> If you prefer, you can <Box
still upload your diary.csv file directly. className="footer-text"
<br /> >
<strong>3. Automatic Processing:</strong> Once submitted, the <Typography variant="body2" style={{ opacity: 0.7 }}>
application will process your diary. v{VERSION}
<br /> </Typography>
<strong>4. Poster Selection:</strong> After processing, you'll be <Typography variant="body2" style={{ opacity: 0.5 }}>
redirected to the Poster Selector page, where you can browse and choose •
your favorite movie poster based on your Letterboxd diary. </Typography>
</Typography> <Link
</Container> 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
}
}
}