Caterpillar-Styled HTML Login Page
Budget: $15 – $25 CAD
I need a compact login page built with vanilla HTML, CSS and JavaScript that visually echoes Caterpillar mining equipment. Please lean on the classic CAT colour palette—yellow accents, deep black backgrounds and subtle greys—rather than logos or imagery.
Core markup is already decided:
• A form with id="login".
• Username input id="name" carrying data-defaultuser="admin" (I may swap this value or leave it empty).
• Password input id="password".
• A div id="error" reserved for feedback.
In the script, validate both fields on submit and present any problems inline, directly beneath the offending control, using the #error element for consistency. No pop-ups or external modals—just clear inline text that disappears once the user corrects the issue.
Deliverables
1. index.html incorporating the form above.
2. style.css reflecting the Caterpillar colour scheme.
3. script.js handling validation, error injection and simple success handling (e.g., console log or redirect placeholder).
4. Brief read-me (very short) noting where to change the default username if needed.
Keep the code clean, commented and free of external libraries; vanilla JS is enough for this straightforward task.
Core markup is already decided:
• A form with id="login".
• Username input id="name" carrying data-defaultuser="admin" (I may swap this value or leave it empty).
• Password input id="password".
• A div id="error" reserved for feedback.
In the script, validate both fields on submit and present any problems inline, directly beneath the offending control, using the #error element for consistency. No pop-ups or external modals—just clear inline text that disappears once the user corrects the issue.
Deliverables
1. index.html incorporating the form above.
2. style.css reflecting the Caterpillar colour scheme.
3. script.js handling validation, error injection and simple success handling (e.g., console log or redirect placeholder).
4. Brief read-me (very short) noting where to change the default username if needed.
Keep the code clean, commented and free of external libraries; vanilla JS is enough for this straightforward task.
Related categories:
JavaScript
Website Design
CSS
HTML
Web Development
Frontend Development
Web Application
Web Design