Hugging Face's logo

Spaces:
Jangai
/
Solar
Runtime error

App Files Community
Jangai commited on
Commit
61a6d43
·
verified ·
1 Parent(s): f4108d0

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +19 -9
app.py CHANGED
@@ -10,19 +10,25 @@ html_code = """
10
  margin: 0;
11
  overflow: hidden;
12
  background: #000;
 
13
  }
14
  .solar-system {
15
  position: relative;
16
  width: 100vw;
17
- height: 100vh;
 
18
  }
19
  .planet {
20
  position: absolute;
21
  border-radius: 50%;
22
  cursor: pointer;
 
 
 
 
23
  }
24
  .tooltip {
25
- position: absolute;
26
  background: rgba(0, 0, 0, 0.7);
27
  color: #fff;
28
  padding: 10px;
@@ -36,10 +42,10 @@ html_code = """
36
  <body>
37
  <div class="solar-system" id="solar-system">
38
  <div class="planet" id="sun" style="width: 100px; height: 100px; background: yellow; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
39
- <div class="planet" id="mercury" style="width: 20px; height: 20px; background: gray; top: 40%; left: 60%;"></div>
40
- <div class="planet" id="venus" style="width: 30px; height: 30px; background: orange; top: 30%; left: 70%;"></div>
41
- <div class="planet" id="earth" style="width: 40px; height: 40px; background: blue; top: 50%; left: 80%;"></div>
42
- <div class="planet" id="mars" style="width: 30px; height: 30px; background: red; top: 60%; left: 70%;"></div>
43
  <div class="tooltip" id="tooltip"></div>
44
  </div>
45
  <script>
@@ -55,11 +61,15 @@ html_code = """
55
 
56
  planets.forEach(planet => {
57
  const element = document.getElementById(planet.id);
58
- element.addEventListener('mouseover', () => {
59
  tooltip.innerHTML = `<strong>${planet.name}</strong><br>${planet.facts}`;
60
  tooltip.style.opacity = 1;
61
- tooltip.style.top = `${element.offsetTop + element.offsetHeight / 2}px`;
62
- tooltip.style.left = `${element.offsetLeft + element.offsetWidth / 2}px`;
 
 
 
 
63
  });
64
  element.addEventListener('mouseout', () => {
65
  tooltip.style.opacity = 0;
 
10
  margin: 0;
11
  overflow: hidden;
12
  background: #000;
13
+ font-family: Arial, sans-serif;
14
  }
15
  .solar-system {
16
  position: relative;
17
  width: 100vw;
18
+ height: 50vh; /* Adjusted height for scrolling */
19
+ overflow: hidden;
20
  }
21
  .planet {
22
  position: absolute;
23
  border-radius: 50%;
24
  cursor: pointer;
25
+ transition: transform 0.3s;
26
+ }
27
+ .planet:hover {
28
+ transform: scale(1.2); /* Scale up the planet on hover */
29
  }
30
  .tooltip {
31
+ position: fixed;
32
  background: rgba(0, 0, 0, 0.7);
33
  color: #fff;
34
  padding: 10px;
 
42
  <body>
43
  <div class="solar-system" id="solar-system">
44
  <div class="planet" id="sun" style="width: 100px; height: 100px; background: yellow; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
45
+ <div class="planet" id="mercury" style="width: 20px; height: 20px; background: gray;"></div>
46
+ <div class="planet" id="venus" style="width: 30px; height: 30px; background: orange;"></div>
47
+ <div class="planet" id="earth" style="width: 40px; height: 40px; background: blue;"></div>
48
+ <div class="planet" id="mars" style="width: 30px; height: 30px; background: red;"></div>
49
  <div class="tooltip" id="tooltip"></div>
50
  </div>
51
  <script>
 
61
 
62
  planets.forEach(planet => {
63
  const element = document.getElementById(planet.id);
64
+ element.addEventListener('mouseover', (event) => {
65
  tooltip.innerHTML = `<strong>${planet.name}</strong><br>${planet.facts}`;
66
  tooltip.style.opacity = 1;
67
+ tooltip.style.top = `${event.clientY + 10}px`;
68
+ tooltip.style.left = `${event.clientX + 10}px`;
69
+ });
70
+ element.addEventListener('mousemove', (event) => {
71
+ tooltip.style.top = `${event.clientY + 10}px`;
72
+ tooltip.style.left = `${event.clientX + 10}px`;
73
  });
74
  element.addEventListener('mouseout', () => {
75
  tooltip.style.opacity = 0;