improve first page with logo and footer
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"name": "poster-picker",
|
||||
"version": "1.0.0",
|
||||
"homepage": "/",
|
||||
"dependencies": {
|
||||
|
||||
13
public/icon.svg
Normal file
13
public/icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
||||
@@ -7,6 +7,8 @@ import {
|
||||
Button,
|
||||
CircularProgress,
|
||||
TextField,
|
||||
Box,
|
||||
Link,
|
||||
} from "@material-ui/core";
|
||||
import { CloudUploadOutlined } from "@material-ui/icons";
|
||||
import CloudDoneOutlinedIcon from "@mui/icons-material/CloudDoneOutlined";
|
||||
@@ -14,6 +16,7 @@ import { useDropzone } from "react-dropzone";
|
||||
import axios from "axios";
|
||||
|
||||
const apiUrl = process.env.REACT_APP_API_URL;
|
||||
const VERSION = require("../../package.json").version;
|
||||
|
||||
const UploadDiary = () => {
|
||||
const [file, setFile] = useState(null);
|
||||
@@ -50,8 +53,6 @@ const UploadDiary = () => {
|
||||
setUploading(true);
|
||||
try {
|
||||
if (username) {
|
||||
console.log(`Fetching diary for user: ${username}`);
|
||||
// Call backend to fetch diary from username
|
||||
const response = await axios.post(
|
||||
`${apiUrl}/api/fetch-diary`,
|
||||
{ username },
|
||||
@@ -84,8 +85,12 @@ const UploadDiary = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Container className="upload-diary">
|
||||
<div className="upload-card">
|
||||
<div className="logo-container">
|
||||
<img src="/icon.svg" alt="logo" className="logo" />
|
||||
</div>
|
||||
<Typography variant="h4" className="title">
|
||||
Upload Letterboxd Diary
|
||||
</Typography>
|
||||
@@ -141,8 +146,8 @@ const UploadDiary = () => {
|
||||
This tool allows you to easily import your Letterboxd diary and select
|
||||
your favorite movie poster. Follow these simple steps:
|
||||
<br />
|
||||
<strong>1. Enter Your Letterboxd Username:</strong> Type your Letterboxd
|
||||
username to automatically fetch your diary.
|
||||
<strong>1. Enter Your Letterboxd Username:</strong> Type your
|
||||
Letterboxd username to automatically fetch your diary.
|
||||
<br />
|
||||
<strong>2. Or Upload Your CSV File:</strong> If you prefer, you can
|
||||
still upload your diary.csv file directly.
|
||||
@@ -151,10 +156,36 @@ const UploadDiary = () => {
|
||||
application will process your diary.
|
||||
<br />
|
||||
<strong>4. Poster Selection:</strong> After processing, you'll be
|
||||
redirected to the Poster Selector page, where you can browse and choose
|
||||
your favorite movie poster based on your Letterboxd diary.
|
||||
redirected to the Poster Selector page, where you can browse and
|
||||
choose your favorite movie poster based on your Letterboxd diary.
|
||||
</Typography>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -8,9 +8,8 @@ $border-color: #667788;
|
||||
$hover-color: rgba(102, 119, 136, 0.2);
|
||||
|
||||
.poster-selector {
|
||||
padding: 0 2rem;
|
||||
max-width: 100% !important; // Override MUI Container
|
||||
margin: 2rem auto 4rem !important;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.content-paper {
|
||||
padding: 1.5rem;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.upload-diary {
|
||||
padding: 3rem;
|
||||
background-color: #14181c;
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - 60px);
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -14,6 +14,23 @@
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
|
||||
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 {
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -110,3 +127,22 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user