Merge pull request #566 from Aloneking789/Aloneking

Added a new project named 3d Solar System

Project Explorer/style.css

@@ -0,0 +1,161 @@
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh; /* Ensure the body takes at least the full viewport height */
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background: linear-gradient(to right, black, grey, white);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    color: #fff;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 1rem 0;
+    border-bottom: #77A6F7 3px solid;
+}
+
+header .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+}
+
+header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+header nav ul {
+    padding: 0;
+    list-style: none;
+    display: flex;
+}
+
+header nav ul li {
+    margin-left: 40px;
+}
+
+header nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 16px;
+}
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: auto;
+    padding: 20px;
+    flex: 1; /* Expand to fill remaining space */
+}
+
+section {
+    margin-bottom: 40px;
+}
+
+form {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+input[type="text"],
+button {
+    padding: 10px;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+input[type="text"] {
+    width: 100%; /* Make search bars take full width */
+    max-width: 400px; /* Limit maximum width */
+}
+
+button {
+    background-color: #777;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #999;
+}
+.projects {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    justify-content: space-around;
+}
+
+.project {
+    flex: 1 1 300px;
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #333;
+    color: #fff;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.project h3 {
+    margin: 0;
+    font-size: 1.2rem;
+}
+
+.project p {
+    margin: 10px 0 0;
+    font-size: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.project a {
+    align-self: flex-end;
+    text-decoration: none;
+    color: #77A6F7;
+    transition: color 0.3s ease;
+}
+
+.project a:hover {
+    color: #99c2f5;
+}
+
+footer {
+    margin-top: auto; /* Push the footer to the bottom */
+    color: #fff;
+    background-color: #333;
+    text-align: center;
+    position: relative;
+
+}
+
+/* Loading bar  */
+#loading-bar {
+    width: 100%;
+    height: 4px;
+    background-color: rgb(234, 159, 234);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease;
+}

solarsystem3d/README.MD

@@ -0,0 +1,62 @@
+## A Brief of the Prototype:
+# Solar System Visualization
+
+This project is an interactive, web-based visualization of our solar system, created using HTML5 Canvas and JavaScript. It provides an engaging and educational experience for users to explore the planets, asteroid belts, and other celestial bodies in our solar system.
+
+## Features
+
+- Realistic representation of the Sun, planets, and their orbits
+- Animated planetary motion with varying speeds
+- Asteroid belts (Main Asteroid Belt, Earth's Asteroid Belt, and Kuiper Belt)
+- Earth's moon (satellite)
+- Saturn's rings
+- Interactive zoom functionality
+- Click-to-view planet information
+- Responsive design that adapts to different screen sizes
+
+## How to Use
+
+1. Open the index.html file in a modern web browser.
+2. The solar system will automatically start animating.
+3. Use the zoom controls in the top-right corner to zoom in and out:
+   - Click the "+" button to zoom in
+   - Click the "-" button to zoom out
+4. Click on any planet to view its name and orbit radius.
+5. Click anywhere else to close the planet information popup.
+##Just install live server extension on vs code and run the index.htmnl file on it and enjoy
+
+
+## Technical Details
+
+- The visualization is built using HTML5 Canvas for rendering.
+- JavaScript is used for animation and interactivity.
+- Planet images are loaded dynamically (ensure the images folder is present with appropriate planet images).
+- The project uses a custom zoom implementation to allow users to explore the solar system in detail.
+
+## Customization
+
+You can easily customize various aspects of the visualization:
+
+- Adjust planet sizes, colors, and orbit radii in the planets array.
+- Modify the number and properties of asteroids in the asteroidBelt, earthAsteroidBelt, and kuiperBelt arrays.
+- Change the appearance of Saturn's rings by modifying the saturnRings object.
+- Adjust the zoom limits by changing the maxZoom and minZoom variables.
+
+## Browser Compatibility
+
+This visualization should work in all modern web browsers that support HTML5 Canvas. For the best experience, use the latest version of Chrome, Firefox, Safari, or Edge.
+
+## Known Issues
+
+- The background space sound may not autoplay in some browsers due to autoplay restrictions. Users may need to interact with the page first to start the audio.
+
+## Future Improvements
+
+- Add more detailed information for each planet
+- Implement touch controls for mobile devices
+- Add options to adjust animation speed
+- Include more celestial bodies like dwarf planets and comets
+
+## Credits
+
+This Solar System Visualization was created as an educational project. Planet images and astronomical data are based on publicly available information from NASA and other space agencies.