I want to understand how to use the DM and make a web page that can load up new data with out going to the server so basically like a menu. Another goal was to make the side bar responsive as a side. the DOM should load everything and change dynamically. this can be used for a app or main website.
Practice! This was my first login page, and I did it because I had to.
For Users: For Programmers:
- Don't use this code, bro. Seriously.
- I used vanilla HTML, CSS, and JS—no frameworks. I know, right?
- You can replace all images and links.
- Check the "Bugs" section for any issues I’m aware of.
- The JS code handles the moving animation. If you want to adjust it, I’ve included test code for animations using keyframes.
Coding with Strangers, aka Heero
- Night Mode: Automatically switches to a night mode page based on the time of day.
- Responsive Design: Adapts to different screen sizes.
- Sun and Moon Animation: The position of the sun and moon changes according to the user's system time.
- Easter Eggs:
- Stranger Flip: Triggers when the email field contains "do a barrel roll".
- Moon Change: Changes the moon when the user types "soul".
- Password Visibility Toggle: Allows users to show/hide their password.
Files Included:
index.html– Main HTML file for the login template.styles.css– CSS file for styling the template.script.js– JavaScript file for interactive features and animations.imagefolder – You can change images if you like.
Before running the project, ensure you have the following:
- A modern web browser (e.g., Google Chrome, Mozilla Firefox, Safari).
Feel free to submit issues, fork the repository, and make pull requests. Your contributions are welcome! Since I might not address these bugs myself, I’ll probably try to rebuild this in React. Here are the known bugs:
- Not Responsive
- Links don't work
- Show password icon missing
- Login box not centered
- Background transition doesn’t fade from day to night (and vice versa)
- Second moon is too small and facing the wrong way