Dev-tanay · KhalkarYash · May 12, 2024 · May 12, 2024 · May 12, 2024 · May 12, 2024
diff --git a/Learn.md b/Learn.md
@@ -0,0 +1,62 @@
+# Learn to Build a Rubik's Cube Solver
+
+Welcome to the Rubik's Cube project! In this guide, you'll learn step-by-step how to build your own Rubik's Cube solver using HTML, CSS, and JavaScript.
+
+## Prerequisites
+
+Before you begin, make sure you have the following:
+
+- Basic understanding of HTML, CSS, and JavaScript
+- Code editor (e.g., Visual Studio Code, Sublime Text)
+- Web browser (e.g., Google Chrome, Mozilla Firefox)
+
+## Getting Started
+
+1. **Set Up Your Project:**
+   - Create a new directory for your project.
+   - Inside the directory, create `index.html`, `style.css`, and `script.js` files.
+
+2. **HTML Structure:**
+   - Open `index.html` in your code editor.
+   - Define the basic HTML structure:
+     ```html
+     <!DOCTYPE html>
+     <html lang="en">
+     <head>
+         <meta charset="UTF-8">
+         <title>Rubik's Cube Solver</title>
+         <!-- Link to your CSS file -->
+         <link rel="stylesheet" href="style.css">
+     </head>
+     <body>
+         <!-- Your content goes here -->
+         <script src="script.js"></script>
+     </body>
+     </html>
+     ```
+
+3. **Styling with CSS:**
+   - Open `style.css` and add styling rules to create the Rubik's Cube interface.
+   - Refer to the provided CSS code for styling inspiration and adapt it to your project's needs.
+
+4. **JavaScript Logic:**
+   - Open `script.js` and start writing JavaScript code to implement the Rubik's Cube functionality.
+   - Begin by defining variables to represent the cube and its movements.
+   - Implement functions to rotate the cube's layers and solve the cube.
+
+5. **Testing and Debugging:**
+   - Test your project in a web browser to ensure it behaves as expected.
+   - Use browser developer tools to debug any issues and refine your code.
+
+6. **Additional Features (Optional):**
+   - Once you have a working Rubik's Cube solver, consider adding extra features such as a timer, move counter, or customizable themes.
+
+7. **Documentation and Comments:**
+   - Document your code with clear comments to explain its purpose and functionality.
+   - Create a README.md file to provide an overview of your project and instructions for users.
+
+## Resources
+
+- [Rubik's Cube Solver Algorithm](https://ruwix.com/the-rubiks-cube/how-to-solve-the-rubiks-cube-beginners-method/)
+- [CSS Tricks - Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [MDN Web Docs - JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
diff --git a/README.md b/README.md
@@ -1,5 +1,55 @@
-# Rubik-Cube
+# Rubik's Cube Solver
 
-## Rubik-Cube using HTML , CSS , JS
+## Description
 
-Link -> https://dev-tanay.github.io/Rubik-Cube/
+The Rubik's Cube Solver is an open-source web-based application that allows users to solve Rubik's Cube puzzles interactively. Built using HTML, CSS, and JavaScript, this project provides a virtual Rubik's Cube interface where users can manipulate the cube's faces and receive step-by-step solutions to solve the puzzle.
+
+## Installation
+
+To install the Rubik's Cube Solver, follow these steps:
+
+1. Clone the repository: `git clone https://github.com/Dev-tanay/Rubik-Cube.git`
+2. Navigate to the project directory: `cd Rubik-Cube`
+3. Open `index.html` in your web browser or deploy the project to a web server
+
+## Usage
+
+To use the Rubik's Cube Solver, follow these steps:
+
+1. Open `index.html` in your web browser or navigate to the deployed URL
+2. Manipulate the virtual Rubik's Cube by clicking and dragging on the faces
+3. Use the provided buttons or controls to rotate specific cube layers
+4. Click the solve button to initiate the solving algorithm
+5. Follow the step-by-step instructions to solve the Rubik's Cube
+
+## Features
+
+- Interactive virtual Rubik's Cube interface
+- Step-by-step solving algorithm with visual instructions
+- Customizable cube size and colors
+- Responsive design for mobile and desktop devices
+
+## Contributing
+
+Contributions are welcome! Please follow these guidelines:
+
+1. Fork the repository
+2. Create a new branch: `git checkout -b feature-branch`
+3. Make your changes
+4. Commit your changes: `git commit -am 'Add new feature'`
+5. Push to the branch: `git push origin feature-branch`
+6. Submit a pull request
+
+
+## Credits
+
+- Tanay Das: Project Manager, Frontend Development
+- Contributors:
+- - Yash Khalkar - [@KhalkarYash](https://github.com/KhalkarYash)
+
+## Contact
+
+For questions or support, please contact Tanay Das at [@Dev-tanay](https://github.com/Dev-tanay/Rubik-Cube).
+
+## Demo
+Check out the live demo [here](https://dev-tanay.github.io/Rubik-Cube/)
diff --git a/index.html b/index.html
@@ -11,7 +11,6 @@
 
 
 <div class="ui">
-
   <div class="ui__background"></div>
 
   <div class="ui__game"></div>

diff --git a/style.css b/style.css
@@ -50,7 +50,7 @@ body {
   font-size: inherit;
   overflow: visible;
   vertical-align: -0.125em;
-  preserveAspectRatio: none;
+  aspect-ratio: none;
 }
 
 .range {
@@ -258,7 +258,7 @@ body {
   position: absolute;
   pointer-events: none;
   font-size: 1.2em;
-  color: rgba(0, 0, 0, 0.25);
+  color: rgba(0, 0, 0, 0.4);
   opacity: 0;
 }
 .btn:after {
@@ -342,4 +342,61 @@ body {
 }
 .ui__buttons {
   z-index: 5;
-}
+}
+html.light {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+html.light .range__track-line:after {
+  background: linear-gradient(to right, #ddd, #fff);
+}
+
+html.light .range--color-hue .range__track-line:after {
+  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+}
+
+html.light .range--color-saturation .range__track-line:after {
+  background: linear-gradient(to right, #ddd, #333);
+}
+
+html.light .range--color-lightness .range__track-line:after {
+  background: linear-gradient(to right, #333, #fff, #333);
+}
+
+html.light .text {
+  color: #333;
+}
+
+html.light .btn {
+  color: #333;
+}
+
+html.dark {
+  background-color: #333;
+  color: #ddd;
+}
+
+html.dark .range__track-line:after {
+  background: linear-gradient(to right, #333, #000);
+}
+
+html.dark .range--color-hue .range__track-line:after {
+  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+}
+
+html.dark .range--color-saturation .range__track-line:after {
+  background: linear-gradient(to right, #333, #ddd);
+}
+
+html.dark .range--color-lightness .range__track-line:after {
+  background: linear-gradient(to right, #ddd, #333, #ddd);
+}
+
+html.dark .text {
+  color: #ddd;
+}
+
+html.dark .btn {
+  color: #ddd;
+}