DEV Community

Ilker Ozturk
Ilker Ozturk

Posted on

X3NOS - Day 2

What's added?
2024-08-06 (Day 2)
Added brightness adjustment with full-screen overlay.
Implemented volume preview feature in settings dialog.
Improved CSS to prevent layout shifting during brightness changes.

https://github.com/xentzenith/x3nos
Live Version: https://x3nos.theilker.com
For login: username is 'admin' and password is 'demo'

X3NOS is a web application designed to mimic the aesthetic and functionality of an old-school operating system with a modern twist. The project features a dynamic loading screen, digital clock, and login interface, and includes interactive elements such as power-off dialogs and glitch effects.

Features

  • Loading Screen: Displays a customizable loading bar and a placeholder message.
  • Digital Clock: Shows current time and date with a retro look.
  • Login Screen: Simulates a login interface with form validation.
  • Power-Off Dialog: Offers a simulated power-off sequence with glitch effects.
  • Error Handling: Displays error messages for incorrect login attempts.

Technologies Used

  • HTML5: Structure of the pages.
  • CSS3: Styling with animations and effects.
  • JavaScript: Interactivity and dynamic updates.
  • Font Awesome: Icons for UI elements.

Installation

  1. Clone the repository:
   git clone https://github.com/xentzenith/x3nos.git
   cd x3nos
Enter fullscreen mode Exit fullscreen mode
  1. Open index.html to visit the page

Usage

  • Loading Screen: Initially, a loading screen will appear with a progress bar and an image. After a few seconds, the loading screen will transition to the login screen.
  • Login Screen: Use the credentials admin / demo to log in. Incorrect credentials will trigger an error message.
  • Power Off: Use the power-off button to bring up a dialog asking if you want to turn off the system. Confirming will simulate a power-off sequence with a glitch effect.

LICENCE

This project is licensed under the MIT License - visit the LICENSE file for details.

Contact

For any questions or feedback, you can reach out via GitHub Issues or email (contact@theilker.com)

Image description

Image description

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More