{"id":30690508,"url":"https://github.com/madhurimarawat/animated-solar-system","last_synced_at":"2025-09-02T02:42:43.924Z","repository":{"id":302095350,"uuid":"1011235927","full_name":"madhurimarawat/Animated-Solar-System","owner":"madhurimarawat","description":"This project is an interactive solar system visualization using pure HTML, CSS, and JavaScript. It creatively represents each planet with beautiful animations and dynamic UI elements.","archived":false,"fork":false,"pushed_at":"2025-06-30T14:26:32.000Z","size":2933,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-30T15:23:45.089Z","etag":null,"topics":["animation","beautiful-ui","contributions-welcome","creative-design","css-design","deployment","documentation","good-first-issue","html","html-css-javascript","mit-license","open-source","responsive-design","solar-system","solar-system-simulation","ui-design","ux-design","web-development","website"],"latest_commit_sha":null,"homepage":"https://madhurimarawat.github.io/Animated-Solar-System/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madhurimarawat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-30T14:02:40.000Z","updated_at":"2025-06-30T14:26:35.000Z","dependencies_parsed_at":"2025-06-30T15:24:01.192Z","dependency_job_id":"c8367cde-e9c8-4804-a603-7aee1da5e5f0","html_url":"https://github.com/madhurimarawat/Animated-Solar-System","commit_stats":null,"previous_names":["madhurimarawat/animated-solar-system"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/madhurimarawat/Animated-Solar-System","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FAnimated-Solar-System","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FAnimated-Solar-System/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FAnimated-Solar-System/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FAnimated-Solar-System/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madhurimarawat","download_url":"https://codeload.github.com/madhurimarawat/Animated-Solar-System/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhurimarawat%2FAnimated-Solar-System/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273222595,"owners_count":25066792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","beautiful-ui","contributions-welcome","creative-design","css-design","deployment","documentation","good-first-issue","html","html-css-javascript","mit-license","open-source","responsive-design","solar-system","solar-system-simulation","ui-design","ux-design","web-development","website"],"created_at":"2025-09-02T02:42:41.125Z","updated_at":"2025-09-02T02:42:43.908Z","avatar_url":"https://github.com/madhurimarawat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌌 Animated Solar System 🌌\r\n\r\nThis project is an **interactive solar system visualization** using pure **HTML, CSS, and JavaScript**. It creatively represents each planet with beautiful animations and dynamic UI elements.\r\n\r\n\u003c!-- GitHub Project Badges --\u003e\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/madhurimarawat/Animated-Solar-System/stargazers\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/stars/madhurimarawat/Animated-Solar-System?color=ffd700\u0026style=for-the-badge\" alt=\"GitHub stars\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/madhurimarawat/Animated-Solar-System/network/members\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/forks/madhurimarawat/Animated-Solar-System?color=ff69b4\u0026style=for-the-badge\" alt=\"GitHub forks\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/madhurimarawat/Animated-Solar-System/issues\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/issues/madhurimarawat/Animated-Solar-System?color=00ced1\u0026style=for-the-badge\" alt=\"GitHub issues\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/madhurimarawat/Animated-Solar-System/blob/main/LICENSE\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/license/madhurimarawat/Animated-Solar-System?color=8a2be2\u0026style=for-the-badge\" alt=\"MIT License\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/madhurimarawat/Animated-Solar-System/watchers\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/watchers/madhurimarawat/Animated-Solar-System?style=for-the-badge\u0026color=00bfff\" alt=\"Watchers\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/madhurimarawat/Animated-Solar-System\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/languages/top/madhurimarawat/Animated-Solar-System?style=for-the-badge\u0026color=20c997\" alt=\"Top language\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/madhurimarawat/Animated-Solar-System/commits/main\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/github/last-commit/madhurimarawat/Animated-Solar-System?style=for-the-badge\u0026color=f28500\" alt=\"Last commit\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003ca href=\"https://madhurimarawat.github.io/Animated-Solar-System\"\u003e\r\n\u003cimg src=\"snapshots/preview-themes.gif\" height=\"100%\"\u003e\u003c/a\u003e\r\n\u003ca href=\"https://madhurimarawat.github.io/Animated-Solar-System\"\u003e\r\n\u003cimg src =\"snapshots/preview-responsive.gif\" height=\"500px\"\u003e\r\n\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n* 🌞 Glowing Sun with realistic effects\r\n* 🪐 Animated planetary orbits with gradient styling\r\n* 🧠 Interactive cards showing info on hover\r\n* 🌗 Light/Dark mode toggle for user preference\r\n* 🎯 Fully responsive layout using Bootstrap\r\n* ⭐ Font Awesome icons for stylish visuals\r\n* 🖋️ Elegant typography using Google Fonts\r\n* 💻 Cross-device compatibility\r\n\r\n---\r\n\r\n## 🗂️ Directory Structure\r\n\r\n```bash\r\n📁 Animated-Solar-System/\r\n├── 📄 index.html                # Main HTML page 🌐\r\n├── 📁 css/\r\n│   ├── 🎨 index.css             # Core styling for layout \u0026 animations\r\n│   ├── 🌗 light-mode.css        # Styles for light theme\r\n│   ├── 🌑 dark-mode.css         # Styles for dark theme\r\n│   ├── 🪐 planets.css           # Orbit \u0026 planet-specific styles\r\n│   ├── 📱 responsive-styles.css # Additional responsive adjustments\r\n│   └── 🎯 targeted-devices.css  # Media queries for specific screen sizes\r\n├── 📁 js/\r\n│   └── 🧩 index.js              # JavaScript for interactivity \u0026 toggles\r\n│   └── 🧩 mobile-index.js       # JavaScript for interactivity \u0026 toggles (Mobile)\r\n├── 📁 snapshots/                # GIF previews and Static theme snapshots\r\n│   ├── 🖼️ preview.png\r\n│   └── 💡 preview-light.png\r\n├── 📄 README.md                 # You're here! 📘\r\n├── 📄 LICENSE                   # MIT License 📜\r\n└── 📄 CONTRIBUTING.md           # Contribution guidelines 🤝\r\n```\r\n\r\n---\r\n\r\n## 🛠️ Tech Stack \u0026 Dependencies\r\n\r\n* **HTML5** – Semantic structure\r\n* **CSS3** – Animations, themes, layout\r\n* **JavaScript** – Dynamic interactivity\r\n* **Bootstrap 4.5.2** – Grid and responsiveness 📦\r\n* **Font Awesome 5.15.4** – Icons ⭐\r\n* **Google Fonts (Marcellus)** – Clean typography 🖋️\r\n\r\n---\r\n\r\n## 🚀 Usage\r\n\r\n\u003e [!TIP]\r\n\u003e Just clone and open `index.html` in any browser!\r\n\r\n```bash\r\ngit clone https://github.com/madhurimarawat/Animated-Solar-System.git\r\ncd Animated-Solar-System\r\n```\r\n\r\n\u003e [!NOTE]\r\n\u003e 📘 [Read the Contribution Guide](CONTRIBUTING.md)\r\n\r\n### 🧩 Customize It\r\n\r\n* Modify planet data via `data-info` attributes in `index.html` 🪐\r\n* Tweak orbit styles and animations in `index.css` 🎨\r\n* Adjust theme logic and interactivity in `index.js` 🧠\r\n\r\n---\r\n\r\n## 🖼️ Preview\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003ca href=\"https://madhurimarawat.github.io/Animated-Solar-System\"\u003e\r\n\u003cimg src=\"snapshots/preview.png\"\u003e\r\n\u003cimg src =\"snapshots/preview-light.png\"\u003e\r\n\u003c/a\u003e\u003c/p\u003e\r\n\r\n---\r\n\r\n## 📌 Future Enhancements\r\n\r\n* Add moons and asteroid belts 🌑\r\n* 🔁 Planetary rotation animation - animate each planet to rotate around its own axis, mimicking the natural spin observed in real celestial bodies, in addition to their orbital motion around the Sun.\r\n* 🎧 Add interactive sound effects  \r\n* 🪐 Add hover cards for each planet and the Sun  \r\n  * Fix existing hover card layout (currently flows only for Neptune)\r\n* 💫 Saturn's ring tilt – Tilt Saturn’s rings by 45° to simulate a more realistic 3D appearance.\r\n* 🌍 Add 3D depth illusion – Enhance the planetary visuals with shading and gradients to give a more spherical, three-dimensional look.\r\n* 🧹 Refactor CSS – Use relative sizing (`max-height: 25%` for planet cards) instead of fixed pixel values for better scalability across devices.\r\n* 🧮 Dynamic orbit generation – Use JavaScript to calculate orbit sizes as a percentage of the viewport or container width, eliminating the need for separate responsive rules for each device and planet.\r\n \r\n\u003e [!TIP]\r\n\u003e Wanna implement this or add something yourself? Check out [contributing.md](contributing.md).\r\n\r\n---\r\n\r\n## 🪐 Live Demo\r\n\r\n\u003e [!NOTE]\r\n\u003e Hosted on GitHub Pages platform.\r\n\u003e \r\n\u003e [🔗 View it live](https://madhurimarawat.github.io/Animated-Solar-System)\r\n\r\n---\r\n\r\n## Thanks for Visiting 😄\r\n\r\n- Drop a 🌟 if you find this repository useful.\u003cbr\u003e\u003cbr\u003e\r\n- If you have any doubts or suggestions, feel free to reach me.\u003cbr\u003e\u003cbr\u003e\r\n📫 How to reach me:  \u0026nbsp; [![Linkedin Badge](https://img.shields.io/badge/-madhurima-blue?style=flat\u0026logo=Linkedin\u0026logoColor=white)](https://www.linkedin.com/in/madhurima-rawat/) \u0026nbsp; \u0026nbsp;\r\n\u003ca href =\"mailto:rawatmadhurima@gmail.com\"\u003e\u003cimg src=\"https://github.com/madhurimarawat/Machine-Learning-Using-Python/assets/105432776/b6a0873a-e961-42c0-8fbf-ab65828c961a\" height=35 width=30 title=\"Mail Illustration\" alt=\"Mail Illustration📫\" \u003e \u003c/a\u003e\u003cbr\u003e\u003cbr\u003e\r\n- **Contribute and Discuss:** Feel free to open \u003ca href= \"https://github.com/madhurimarawat/Animated-Solar-System/issues\"\u003eissues 🐛\u003c/a\u003e, submit \u003ca href = \"https://github.com/madhurimarawat/Animated-Solar-System/pulls\"\u003epull requests 🛠️\u003c/a\u003e, or start \u003ca href = \"https://github.com/madhurimarawat/Animated-Solar-System/discussions\"\u003ediscussions 💬\u003c/a\u003e to help improve this repository!\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhurimarawat%2Fanimated-solar-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadhurimarawat%2Fanimated-solar-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhurimarawat%2Fanimated-solar-system/lists"}