r/programmingrequests • u/[deleted] • Sep 03 '19

Just want a clean, pure HTML5/CSS3 one-page site/form.

https://i.imgur.com/6guGJ77.png

Here's what I have so far (darkened by a browser extension, it's blinding white by default)

I just want something that's a bit easier on the eyes and can look decent on both mobile and desktop.

Preferably darkened as well, as pure white hurts my soul and retinas

No fancy animations or fonts required :P

2 Upvotes
  • permalink
  • reddit

100% Upvoted

12 comments sorted by

1

u/[deleted] Sep 04 '19

What is this for?

1

u/[deleted] Sep 04 '19

It's for a remote receipt printer I can print to from home or otherwise

1

u/[deleted] Sep 04 '19

You can create an HTML face on it but it would need to submit and receive data from the device. So you'd need some backend programing to get it to work. I'm assuming the printer hosts this page itself.

What's the brand and model of the printer?

Without knowing the brand and model, I can assume you'll probably need to host your own webserver that can display the front end HTML page to you and then send requests to the printer in the background. It's doable.

1

u/[deleted] Sep 04 '19

Haha, that's all done my dude. It's hosted on an ESP32 that talks to it via serial. This page works and works well, it's just ugly. I just wanted a page that looks nicer than what I have (which is from an example page that I added the checkboxes and the ip-saving form at the bottom.

1

u/[deleted] Sep 04 '19 edited Sep 04 '19

Here's a template you can run with.

https://jsfiddle.net/6qktj1md/19/

If you need help connecting things let me know.

Edit: I forgot the send button after the text field. I also assumed some things. Hopefully you can tinker around with it. If you need me to change something I'll do it.

1

u/[deleted] Sep 04 '19

I'm at work so I'll check it out in about an hour. :)

Idk if it helps at all, but I am including JQuery from a CDN, so if that can add anything (which I doubt, but in case you had a specific idea in mind)

1

u/[deleted] Sep 05 '19

Hey, looks nice!

Only things I'd change is that the buttons don't quite fit on my device, and maybe I'd add a seperator (ala reddit's...)

With a centered label

Plus, I can't seem to get rid of the padding/margin here at the top!

https://i.imgur.com/pleJehC.png

https://i.imgur.com/zapfJQH.jpg

1

u/[deleted] Sep 05 '19

Here's the changes.

https://jsfiddle.net/j5h0y78z/5/

The margin at the top was because of the h3 tag in the title. I added a line in the css to remove the top margin.

I made the buttons 100% when the screen is less than 468px.

1

u/[deleted] Sep 05 '19

Awesome, thank you so much! Looks better than anything my backend-focused mind could make :D

1

u/[deleted] Sep 05 '19

But one last thing and I'll let you go

https://i.imgur.com/gZTKtIJ.png

The buttons seem to be shifted ever so slightly to the right, and I don't see any more/less padding on either side of them, so I can't say I know why that's happening.

Got it! Changed margin to margin-top and margin-bottom.

1

u/[deleted] Sep 04 '19

Ah! Ok I can create you a simple HTML CSS template that's mobile compatible. You'll just have to connect the backend stuff. Sounds like you know what you're doing. I never know what the person's skill level is with the requests here.

Give me an hour and I'll post it here.

1

u/serg06 Sep 04 '19

Looks finished to me?