This project is a fun and interactive login form featuring a cartoon panda character that reacts to user actions. The panda’s eyes and hands move dynamically when the user focuses on different input fields. When typing a username, the panda looks attentively, and when entering a password, it covers its eyes for privacy. The entire character is built using pure HTML and CSS shapes. Overall, the project demonstrates creative UI interaction using animations and simple JavaScript logic.
HTML
<div class="panda">
<div class="face"></div>
</div>The HTML structure builds both the login form and the panda character side by side. The panda is composed of multiple nested div elements representing ears, eyes, nose, mouth, hands, and paws. Each facial feature is a separate element so it can be animated independently. The login form is kept simple with username and password inputs and a button.
Font Awesome icons are used to visually enhance input fields. The panda container is positioned behind the form to make it feel interactive. No canvas or SVG is used; everything is created with regular HTML elements. This approach keeps the structure lightweight and accessible. The HTML focuses entirely on layout and component hierarchy. Overall, it provides a playful and animation-ready foundation.
CSS
.handl, .handr {
transition: 1s all;
}The CSS is responsible for drawing and styling the panda character using basic shapes and positioning. Rounded borders and background colors create the panda’s face, ears, and paws. The hands are positioned absolutely so they can move over the eyes smoothly. Transition properties allow movements to animate naturally instead of snapping instantly.
The login form is styled to contrast clearly against the background. Colors are chosen to match the panda theme and maintain visual harmony. Shadows and borders give depth to facial elements. The layout uses relative positioning to keep parts aligned correctly. Overall, CSS acts as both the illustration tool and animation engine.
JavaScript
$(":password").focus(function(){
$(".handl").css({ transform: 'rotate(-150deg)' });
});The JavaScript controls the panda’s reactions to user interaction. It listens for focus events on the username and password fields using jQuery. When the username field is focused, the panda’s eyes move toward the input, giving the illusion of attention. When the password field is focused, the panda raises its hands to cover its eyes. CSS properties like position, rotation, and size are dynamically updated to animate these reactions.
Smooth transitions are handled by CSS, while JavaScript only triggers state changes. An alert message explains the interaction to the user on page load. The logic is simple but effective in creating personality. Overall, JavaScript acts as the behavioral layer connecting user input with character animation.
