Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b95b9a1

Browse files
Merge pull request #566 from Aloneking789/Aloneking
Added a new project named 3d Solar System
2 parents 9110fe0 + cb7b788 commit b95b9a1

File tree

5 files changed

+2367
-0
lines changed

5 files changed

+2367
-0
lines changed

‎Project Explorer/style.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
min-height: 100vh; /* Ensure the body takes at least the full viewport height */
5+
margin: 0;
6+
padding: 0;
7+
font-family: Arial, sans-serif;
8+
background: linear-gradient(to right, black, grey, white);
9+
background-repeat: no-repeat;
10+
background-attachment: fixed;
11+
color: #fff;
12+
}
13+
14+
header {
15+
background-color: #333;
16+
color: #fff;
17+
text-align: center;
18+
padding: 1rem 0;
19+
border-bottom: #77A6F7 3px solid;
20+
}
21+
22+
header .container {
23+
display: flex;
24+
justify-content: space-between;
25+
align-items: center;
26+
padding: 0 20px;
27+
}
28+
29+
header h1 {
30+
margin: 0;
31+
font-size: 1.5rem;
32+
}
33+
34+
header nav ul {
35+
padding: 0;
36+
list-style: none;
37+
display: flex;
38+
}
39+
40+
header nav ul li {
41+
margin-left: 40px;
42+
}
43+
44+
header nav ul li a {
45+
color: #fff;
46+
text-decoration: none;
47+
text-transform: uppercase;
48+
font-size: 16px;
49+
}
50+
51+
.container {
52+
width: 100%;
53+
max-width: 1200px;
54+
margin: auto;
55+
padding: 20px;
56+
flex: 1; /* Expand to fill remaining space */
57+
}
58+
59+
section {
60+
margin-bottom: 40px;
61+
}
62+
63+
form {
64+
display: flex;
65+
align-items: center;
66+
gap: 10px;
67+
margin-bottom: 20px;
68+
}
69+
70+
input[type="text"],
71+
button {
72+
padding: 10px;
73+
font-size: 1rem;
74+
border: 1px solid #ccc;
75+
border-radius: 4px;
76+
}
77+
78+
input[type="text"] {
79+
width: 100%; /* Make search bars take full width */
80+
max-width: 400px; /* Limit maximum width */
81+
}
82+
83+
button {
84+
background-color: #777;
85+
color: #fff;
86+
border: none;
87+
cursor: pointer;
88+
transition: background-color 0.3s ease;
89+
}
90+
91+
button:hover {
92+
background-color: #999;
93+
}
94+
.projects {
95+
display: flex;
96+
flex-wrap: wrap;
97+
gap: 40px;
98+
justify-content: space-around;
99+
}
100+
101+
.project {
102+
flex: 1 1 300px;
103+
padding: 15px;
104+
border: 1px solid #ccc;
105+
border-radius: 8px;
106+
background-color: #333;
107+
color: #fff;
108+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
109+
display: flex;
110+
flex-direction: column;
111+
justify-content: space-between;
112+
}
113+
114+
.project h3 {
115+
margin: 0;
116+
font-size: 1.2rem;
117+
}
118+
119+
.project p {
120+
margin: 10px 0 0;
121+
font-size: 1rem;
122+
overflow: hidden;
123+
text-overflow: ellipsis;
124+
display: -webkit-box;
125+
-webkit-line-clamp: 2;
126+
-webkit-box-orient: vertical;
127+
}
128+
129+
.project a {
130+
align-self: flex-end;
131+
text-decoration: none;
132+
color: #77A6F7;
133+
transition: color 0.3s ease;
134+
}
135+
136+
.project a:hover {
137+
color: #99c2f5;
138+
}
139+
140+
footer {
141+
margin-top: auto; /* Push the footer to the bottom */
142+
color: #fff;
143+
background-color: #333;
144+
text-align: center;
145+
position: relative;
146+
147+
}
148+
149+
/* Loading bar */
150+
#loading-bar {
151+
width: 100%;
152+
height: 4px;
153+
background-color: rgb(234, 159, 234);
154+
position: fixed;
155+
top: 0;
156+
left: 0;
157+
z-index: 1000;
158+
transform: scaleX(0);
159+
transform-origin: left;
160+
transition: transform 0.3s ease;
161+
}

‎solarsystem3d/README.MD‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
## A Brief of the Prototype:
2+
# Solar System Visualization
3+
4+
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.
5+
6+
## Features
7+
8+
- Realistic representation of the Sun, planets, and their orbits
9+
- Animated planetary motion with varying speeds
10+
- Asteroid belts (Main Asteroid Belt, Earth's Asteroid Belt, and Kuiper Belt)
11+
- Earth's moon (satellite)
12+
- Saturn's rings
13+
- Interactive zoom functionality
14+
- Click-to-view planet information
15+
- Responsive design that adapts to different screen sizes
16+
17+
## How to Use
18+
19+
1. Open the index.html file in a modern web browser.
20+
2. The solar system will automatically start animating.
21+
3. Use the zoom controls in the top-right corner to zoom in and out:
22+
- Click the "+" button to zoom in
23+
- Click the "-" button to zoom out
24+
4. Click on any planet to view its name and orbit radius.
25+
5. Click anywhere else to close the planet information popup.
26+
##Just install live server extension on vs code and run the index.htmnl file on it and enjoy
27+
28+
29+
## Technical Details
30+
31+
- The visualization is built using HTML5 Canvas for rendering.
32+
- JavaScript is used for animation and interactivity.
33+
- Planet images are loaded dynamically (ensure the images folder is present with appropriate planet images).
34+
- The project uses a custom zoom implementation to allow users to explore the solar system in detail.
35+
36+
## Customization
37+
38+
You can easily customize various aspects of the visualization:
39+
40+
- Adjust planet sizes, colors, and orbit radii in the planets array.
41+
- Modify the number and properties of asteroids in the asteroidBelt, earthAsteroidBelt, and kuiperBelt arrays.
42+
- Change the appearance of Saturn's rings by modifying the saturnRings object.
43+
- Adjust the zoom limits by changing the maxZoom and minZoom variables.
44+
45+
## Browser Compatibility
46+
47+
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.
48+
49+
## Known Issues
50+
51+
- 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.
52+
53+
## Future Improvements
54+
55+
- Add more detailed information for each planet
56+
- Implement touch controls for mobile devices
57+
- Add options to adjust animation speed
58+
- Include more celestial bodies like dwarf planets and comets
59+
60+
## Credits
61+
62+
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.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /