https://github.com/cominatyou/drop

A frontend for uploading files, written with Tailwind.
https://github.com/cominatyou/drop

Last synced: about 1 month ago
JSON representation

A frontend for uploading files, written with Tailwind.

• Host: GitHub
• URL: https://github.com/cominatyou/drop
• Owner: CominAtYou
• License: apache-2.0
• Created: 2023-01-18T03:26:13.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-10-08T01:12:36.000Z (about 1 year ago)
• Last Synced: 2023-10-08T02:23:45.700Z (about 1 year ago)
• Language: HTML
• Homepage:
• Size: 44.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Drop

A frontend for uploading files written with Tailwind.

See a demo here: https://codepen.io/CominAtYou/full/WNKZbZR

## Running it Yourself

### Requirements

- Node.js 16+

### Steps

- Clone the repo

- Open a terminal in the repo

- Run the following:

```

$ npm i

$ npx tailwindcss -i ./src/css/styles.css -o ./out/output.css

```

The resulting CSS will be in `./out/output.css`. Pop open the HTML file in a web browser, and you're all done!

> **Note**

> `./src/css/styles.css` is *not* the CSS file for the final product. It is a file that contains custom styles for Tailwind to copy over when it is building the actual CSS file. When running Drop, ensure that you are using `output.css` and not `styles.css`.

> **Note**

> Drop's HTML contains several missing elements that are designed to be inserted server-side. They are:

> - `#avatar-img`: This is the img element to the right of the title text. Ideally, this should contain the profile picture of the user currently signed in. If you're not hosting behind any authentication mechanism, you can remove this element, but this will make it impossible to bring up the `#popup-modal` modal.

> - `#location-select`: This is the location dropdown. The option values for this element were designed to be added server-side, though there is no harm in adding them to the HTML file itself.

> - `#modal-avatar-img`: Image in the modal that is displayed when clicking on `#avatar-img`. This is supposed to be the profile picture of the user that is currently signed in, but it doesn't have to be.

> - `#modal-username`: The username of the user currently signed in. This can be ignored if you're not using any authentication, or set to anything else.