Fixes #12- Enhanced the User Interface of Project

[vaibhav-katyal]

Closes #12

PR Description

This pull request focuses on enhancing the User Interface (UI) of the Memory Map.

Previous State

• The UI was misaligned, unappealing, and not responsive.
• Layout issues affected the overall user experience on different devices.

Enhancements Made

• Redesigned the UI to be clean, modern, and visually appealing.
• Improved alignment and spacing for better readability.
• Made the interface fully responsive across various screen sizes.

Result

A polished, user-friendly, and responsive Memory Map interface that provides a better visual experience while keeping all the functionalities and sections intact.

-->

[0zXD]

The UI looks amazing, good work.
But i'm confused about one thing, why did you delete almost all the functionality of the site?

Here are some examples:

1. The site, can't load existing memories, because you deleted that entire function:

2. Cannot save any image to the database, because you deleted the POST function as well:

3. Can't delete any memory because you deleted that function as well:

---

The frontend looks amazing. But in the back-end the entire functionality of the site is deleted.

---

And the issue you addressed about the form not being visible, it's because of a change you made in the showMemoryForm logic. Lemme show u.

Your code snippet:

showMemoryForm() {
    const form = document.getElementById('memoryForm');
    if (form) {
        form.classList.remove('hidden');
        form.classList.add('show-fixed');
        setTimeout(() => {
            const titleInput = document.getElementById('memoryTitle');
            if (titleInput) {
                titleInput.focus();
            }
        }, 100);
    }
}

Fixed code snipped:

showMemoryForm() {
    const form = document.getElementById('memoryForm');
    if (form) {
        form.classList.remove('hidden');
        form.style.transform = 'translateX(0)';
        form.style.opacity = '1';
        setTimeout(() => {
            const titleInput = document.getElementById('memoryTitle');
            if (titleInput) {
                titleInput.focus();
            }
        }, 100);
    }
}

The output should look something like this:

---

Kindly resolve the issue.

[vaibhav-katyal]

Oh, sorry about that — I shouldn’t have interfered with the JS file.
I wasn’t able to add memory or test it properly at that time; otherwise, I would’ve fixed it in place.
No worries though, I’ll fix it right away.

[0zXD]

It'll be better if you could see the site's working first, then you'll be able to relate more to it.
If you needed any help to get the site to run, make sure to reach out.

[vaibhav-katyal]

Can you please check once now, is every functionality working ?

[0zXD]

Perfect, that sure is a job well done.
Just want one more improvements:

---

The Memory Form touches the bottom of the computer screen, can you make it look better?

---

The PR will be merged as soon as this requirement is satisfied.

[vaibhav-katyal]

I have fixed the the memory form touching bottom issue.

[vaibhav-katyal]

Please merge the PR and add hacktoberfest-accepted label to the PR as currently your repository is not officially participating in hacktoberfest as shown on hacktoberfest.com

[0zXD]

Sure, I'll make sure to implement the necessary changes.
Thank you for your contribution @vaibhav-katyal : )