CSS-cockpit-control

Description

This project was about learning and discovering the true power of CSS by only using css selectors and no Javascript to see what you can do with it nowadays. I wanted to make a cockpit of an UFO that has working buttons, a working joystick and that you can move through space with different speeds all with css only (accept the js needed for the range input). Be aware that the animation of the UFO moving through space is pretty heavy for your machine, so I advice you to watch it at least on a decent laptop.

Process

Link to process (Dutch)

Table of contents

• Installation
• Use of features
• Whishlist
• License

Installation

1. Clone the repository:

   git clone https://github.com/JopMolenaar/CSS-cockpit-control.git
   

2. Open the cloned file with your code editor and start coding!

Use of features

• You can change the color of the ufo to a random color.
• You can adjust the speed of the UFO.
• Turn on turbo mode to go faster then light.
• Move the joystick to turn the UFO in space.
• Turn on the lights of the ufo.
• Hover over the dashboard to look in to space from different angles without changing the direction of the ufo.

Whishlist

• Animatie ufo border
• Speed control panel werkend krijgen die de omgeving beinvloed (snelheid aanpast)
• de joystick de omgeving laten beinvloeden
• Joystick maken die terug bounched (4 buttons met pijltjes eromheen en in het midden een joystick)
• sterren hemel als je stilstaat
• Kleine details op buttons en input elementen in de cockpit + radars toevoegen
• Op hover het perspectief laten veranderen zodat het lijkt dat je in de ufo zit
• Volledig responsive design (op een te klein scherm een alien die door de ruimte zweeft of scherm laten draaien)
• met een button het thema van de omgeving laten veranderen
• Als has of animation preference reduce aanstaat => maak dan een ufo op een planeet ofzo iets
• alienhand als cursor

License

My website is open-source and released under the MIT License.