optical-breacher icon indicating copy to clipboard operation
optical-breacher copied to clipboard

Published 20 hours ago • verified publisher icon govizlora

Visual overhaul

Open rozmy opened this issue 4 years ago • 5 comments

Revamp

Made some updates and random graphic elements to fit this app to the Cyberpunk 2077 universe. If you're in, I will write a checklist and upload all assets here.

  • Added clipboard paste and file upload's actions to main screen
  • App border is a more complicated shape
  • Added an error icon and other decoration

rozmy avatar Jan 02 '21 14:01 rozmy

Thank you so much for your contribution! I just updated the app with a new screenshot mode. Depending on the user agent, PC users will land to the screenshot mode and mobile user will land to the camera mode, which I think will suit most cases.

I want to make the app look cooler and like your suggestions! Here are some issues I can think of for now:

  1. To make the outer border of the app a more complicated shape, can it be done using CSS? If not, by using SVG, how can we make sure it is not stretched / squeezed when the window is resized?
  2. The same question for the button
  3. The error icon is close, but I still think it can be made to the same level as the game, or even better. Do you by any chance have some screenshots in the game with system error so we can refer and compare?

I'm trying to improve the usability and OCR accuracy first, so the styling might not go in very soon. But it's good that you started it and it will be better!

govizlora avatar Jan 02 '21 22:01 govizlora

As for 1 and 2: border-image CSS property can accept svg images and there's an option to avoid stretching

wysiwyg generator: https://border-image.com/

rozmy avatar Jan 03 '21 09:01 rozmy

@rozmy That sounds nice! Can you try a bit for the button and maybe put it to a jsfiddle or codesandbox? If it works, I'll include it into the app, thanks!

govizlora avatar Jan 04 '21 06:01 govizlora

@govizlora It works perfectly for me at least on firefox and safari (macos). Using inline svg causes some issues so use file paths in url() props instead.

border-test.zip

rozmy avatar Jan 07 '21 20:01 rozmy

Revamp

Made some updates and random graphic elements to fit this app to the Cyberpunk 2077 universe. If you're in, I will write a checklist and upload all assets here.

  • Added clipboard paste and file upload's actions to main screen
  • App border is a more complicated shape
  • Added an error icon and other decoration

👍

marksman4103 avatar Jun 03 '21 09:06 marksman4103