Website - STAMP page

[babalicious-io]

STAMP page

dev site

---

Stamp tool

• Has simple and advanced mode with toggle switch - default simple
• Input fields that turn lighter when active and 2 buttons on advanced mode
• BTC/USD toggle switch, fee selector, estimate, dropdown details, ToS and STAMP button
• The file type is present in the Details dropdown menu
• On click of STAMP button - should check all mandatory fields are filled out/checkbox is ticked

Simple mode

• Upload image field - click to browse files / dragDrop image
• Quantity input field - resizes and expands left when user inputs more than 2 digits
  1-2 digits - 48x48 // 3 digits 60x48 // 4 digits 72x48 // +12px pr digit
  Digits centered/centered

Advanced mode

• Toggle between Classic custom cpid# (default) and Posh named stamp
• Locked / unlocked button - default locked
• Input field - some kind of character check/limit
• Preview button - opens a popup modal - aspect ratio 1/1 - max size 800x800

Additional modules

• Instructions on how to stamp and info about the tool - simple/advanced/input fields/classic/named/character limits/locked/... - with a section link to the FAQ page for additional info
• Module with images of recent stamps

Advanced mode
Classic / cpid / locked / details dropdown expanded / 2 digits (quantity)

Advanced mode
Posh / name / unlocked / 4 digits

---

input:focus - background-color: #ccc;
btn.hover - STAMP - color: aa00ff; // FAQ - #ccc // PREVIEW (advanced mode) #660099 // LOCKED in figma file

---

Purple ToS - link to page

---

[babalicious-io]

In the figma old design mockups you have some optimisation tooling visualised.
Is this going to be a feature you'll be implementing ?

You could have a topic in the faq about optimisation with links to tools/websites that artists can use.
Leave it up to them to do the appropriate optimisation/minifying/compressing.

[reinamora137]

I do like the word editions instead of quantity or editions. Otherwise I say this is ready to roll. The only problem with using editions is that it diverges from the supply term on src-20 which I guess isn’t a big deal it kind of separates the two since issuance is much different than supply on src-20

[babalicious-io]

Definitely sounds better with editions, since we are using the wording on the Stamp Details page as well.
As you say it helps better distinguish between stamps and tokens.

[babalicious-io]

Mobile view

Simple mode

Advanced mode

[babalicious-io]

The figma mockup versions for desktop, tablet and mobile are ready.
Except for the module banner Latest Stamps - which is dimmed out on the mockups.

Probably better and easier just to keep the Quantity input field the same size: 48x48 - and have digits more than 2, scale down or some internal padding and overflow hidden so they don't all show.

The version layers are marked 🟠

https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=1348-7105&m=dev&t=bgN5CBywBwbrGlkz-1

[babalicious-io]

Mockup is finalised and marked for dev.

The version layers are marked 🟢

https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=1348-7105&m=dev&t=aco4aneCbwjH5F4P-1

[ARNLTony]

In dev there is a toggle that it seeems that has no function

[ARNLTony]

Details are visible by default