please create this as a .html file with html js and css all in one file. Generate complete, self-contained HTML (no code snippets) Use the Canvas/Artifact output (not just code blocks) Display it in preview/visual mode (not as code to copy)
Instructions how the window will look like
- Please look at: https://getdarkmatter.dev/ esp the app window illustrations. how they are styled etc. we want to mimick this look and feel.
- I also added pictures as attachments of the website, so you understand what I mean, which parts of the website to use styles from etc. the website should have all the correct colors and sizes and spacing, fonts etc. so use the styles from the website, they are the source of truth
- rounded corners top-left and top-right
- rounded corners bottom-left and bottom-right
- Positioned to the left. the leftside should go all the way down to the bottom of the app window edge. and use 50% of app width
- The first item in the left-bar is text: "Before"
- I the next row bellow we have a multiline text area with: "fix: update user validation logic - Modified validateUser() in auth.ts - Added null check for email field - Updated regex pattern for password"
- Positioned to the right. the rightside should go all the way down to the bottom of the app window edge. and use 50% of app width
- The first item in the left-bar is text: "After"
- In the next row bellow we have a multiline text area with: "fix: prevent lockouts from OAuth migration\nUsers migrating from 2023 OAuth1 system hit validationerrors—emails with uppercase were rejected.\n\nCaused 340+ support tickets last week.\nRelaxed email validation to case-insensitive. Addedfallback for pre-2024 password requirements.\n\nCloses #1847"