Coder Social home page Coder Social logo

hihiqy1 / pride-overlay Goto Github PK

View Code? Open in Web Editor NEW
7.0 1.0 3.0 138 KB

Easily turn your profile picture into an LGBTQ+ profile picture!

Home Page: https://pride-pfp.xyz

License: Apache License 2.0

HTML 4.07% Svelte 68.35% TypeScript 27.19% JavaScript 0.39%
pride-flags pride-month profile-picture-generator

pride-overlay's Introduction

LGBTQ+ Profile Picture Overlay Generator (LPPPOG) (POG)

POG Logo

Easily turn your profile picture into an LGBTQ+ profile picture!


Demo

The site's available here.

pride-overlay's People

Contributors

hihiqy1 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

moehreag v1ckxy

pride-overlay's Issues

Offset rotation

Users should be able to offset the rotation of the flag if the export image is static (not animated).

GIF input

A user should be able to put in a GIF image, and export a GIF image as well.

Requirements:

  • The amount of input frames should also determine the amount of output frames.
  • The user should be able to select how many loops of the input GIF will be in the output GIF.
  • The preview should be working and showing all frames.
    • This would require extracting all frames from the input, then drawing them based on performance.now().

Nice to have:

  • The user can also export as a static image.
    • Therefore, the user should be able to select the specific input frame.

Select multiple flags

Users should be able to select multiple flags, to put besides each other.

Requirements:

  • Selector, just like the current flag selector, but with an "โž• Add another flag" button besides the selector or underneath the list of flags.
  • Rendering them the right way

Flag ratios

Some flags (e.g. the bisexual flag, or the paragender flag) do not have a standard ratio of colours. For example, the bisexual flag has a ratio of 2:1:2.

Fix:

  • A file with a map (just like /src/lib/constants/flagColours.ts), containing the ratios per flag.
    • Note that this should only contain flags which have ratios that are not all 1, for efficiency sake.
    • <String, number[]>
  • Use these ratios in drawToCanvas.

Flag cutoff when only one is selected

Rendering the flag with only one flag selected works fine, but when you apply rotation (no matter whether it comes from the animation or the rotation setting) the right side of the flag is cutoff (only rendered from -1/2 to 1, horizontally)

Stretched input image in output image

Currently, if the input image is not exactly square, the image will be stretched to a square ratio, to fill the available space. This is in almost 100% of the cases not what a user wants.

Possible fixes:

  • Center the input image
  • Let the user choose where the input image belongs in the image (requires more work, but may satisfy the user more)

Resize for export

Users should be able to resize the image before export (e.g. when they choose for the image to be animated, which may take a REALLY long time on low-power devices, but may become quicker if the image is first resized to a lower resolution / if the export resolution is lowered).

Note: currently, the export resolution gets limited to a hardcoded 256x256. Though this works okay-ish, the ideal situation would be as described above.

Add keyboard navigation

Currently, barely anything works with just the keyboard.

Requirement:

  • Everything on the page should be accessible with just the keyboard.

Dark mode

Aaaaaaaaaaah, my eyes!! Currently, there is no dark mode on this app.

Possible fixes:

  • Toggle switch
  • CSS media query (prefers-color-scheme)
  • (Both)

Export w/o input

A user should be able to export the image without an input image. This would mean that the exported image is just a pride flag.

Requirements:

  • A message above the export button saying that it is just the pride flag without any input.

Preview while scrolling

Currently, the preview is only on the bottom of the page, just below the exporting section. This makes it hard to see what you're changing, especially for mobile devices.

Possible fix:

  • Desktop: Side-panel
  • Mobile:
    • Floating section on mobile (e.g. top or bottom panel)
    • A panel you can click so it shows up maybe?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.