From 37f7ccbb121b2f9589cde7b181236ed4f724ea93 Mon Sep 17 00:00:00 2001 From: Hugo Pierret Date: Sun, 9 Nov 2025 18:07:19 +0100 Subject: [PATCH] improve first page with logo and footer --- package.json | 2 +- public/icon.svg | 13 ++ public/index.html | 2 +- src/components/UploadDiary.js | 175 ++++++++++++++++----------- src/styles/scss/_posterSelector.scss | 5 +- src/styles/scss/_uploadDiary.scss | 38 +++++- 6 files changed, 157 insertions(+), 78 deletions(-) create mode 100644 public/icon.svg diff --git a/package.json b/package.json index 7411c4e..318be52 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "frontend", + "name": "poster-picker", "version": "1.0.0", "homepage": "/", "dependencies": { diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..621ccf4 --- /dev/null +++ b/public/icon.svg @@ -0,0 +1,13 @@ + + + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index c1adfb4..39a4134 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + { 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,77 +85,107 @@ const UploadDiary = () => { }; return ( - -
- - Upload Letterboxd Diary - - setUsername(e.target.value)} - onKeyUp={(e) => { - if (e.key === "Enter") handleUpload(); - }} - placeholder="Enter your Letterboxd username" - /> - - Or upload a CSV file: - -
- - {file ? ( - <> - - - Your file has been uploaded: {file.name} - - - ) : ( - <> - - - Drag and drop a CSV file here or click to select - - - )} + + +
+
+ logo +
+ + Upload Letterboxd Diary + + setUsername(e.target.value)} + onKeyUp={(e) => { + if (e.key === "Enter") handleUpload(); + }} + placeholder="Enter your Letterboxd username" + /> + + Or upload a CSV file: + +
+ + {file ? ( + <> + + + Your file has been uploaded: {file.name} + + + ) : ( + <> + + + Drag and drop a CSV file here or click to select + + + )} +
+ + {uploading ? ( + + ) : ( + + )} +
- - {uploading ? ( - - ) : ( - - )} - -
- - This tool allows you to easily import your Letterboxd diary and select - your favorite movie poster. Follow these simple steps: -
- 1. Enter Your Letterboxd Username: Type your Letterboxd - username to automatically fetch your diary. -
- 2. Or Upload Your CSV File: If you prefer, you can - still upload your diary.csv file directly. -
- 3. Automatic Processing: Once submitted, the - application will process your diary. -
- 4. Poster Selection: 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. - - + + This tool allows you to easily import your Letterboxd diary and select + your favorite movie poster. Follow these simple steps: +
+ 1. Enter Your Letterboxd Username: Type your + Letterboxd username to automatically fetch your diary. +
+ 2. Or Upload Your CSV File: If you prefer, you can + still upload your diary.csv file directly. +
+ 3. Automatic Processing: Once submitted, the + application will process your diary. +
+ 4. Poster Selection: 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. + + + + + + v{VERSION} + + + • + + (e.currentTarget.style.opacity = 1)} + onMouseLeave={(e) => (e.currentTarget.style.opacity = 0.7)} + > + Hugyouu + + + + ); }; diff --git a/src/styles/scss/_posterSelector.scss b/src/styles/scss/_posterSelector.scss index 451deab..96a4345 100644 --- a/src/styles/scss/_posterSelector.scss +++ b/src/styles/scss/_posterSelector.scss @@ -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; diff --git a/src/styles/scss/_uploadDiary.scss b/src/styles/scss/_uploadDiary.scss index 2455d56..778be6d 100644 --- a/src/styles/scss/_uploadDiary.scss +++ b/src/styles/scss/_uploadDiary.scss @@ -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 + } + } +} \ No newline at end of file