Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Reordered Anatomical Body Map</title> | |
| <style> | |
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #f0f0f0; | |
| font-family: Arial, sans-serif; | |
| } | |
| .body-map { | |
| position: relative; | |
| width: 200px; | |
| height: 550px; | |
| background-color: #fff; | |
| border: 2px solid #000; | |
| border-radius: 100px 100px 0 0; | |
| } | |
| .body-part { | |
| position: absolute; | |
| background-color: #ddd; | |
| border: 1px solid #999; | |
| transition: background-color 0.3s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| font-weight: bold; | |
| } | |
| .body-part:hover { | |
| background-color: #aaa; | |
| cursor: pointer; | |
| } | |
| #part1 { width: 60px; height: 70px; top: 5px; left: 70px; border-radius: 30px 30px 25px 25px; } /* Head */ | |
| #part2 { width: 50px; height: 15px; top: 35px; left: 75px; border-radius: 25px 25px 0 0; } /* Eyes */ | |
| #part3 { width: 15px; height: 25px; top: 30px; border-radius: 0 0 50% 50%; } /* Ears */ | |
| #part3.left { left: 60px; } | |
| #part3.right { right: 60px; } | |
| #part4 { width: 20px; height: 25px; top: 50px; left: 90px; border-radius: 0 0 10px 10px; } /* Nose */ | |
| #part5 { width: 30px; height: 10px; top: 65px; left: 85px; border-radius: 0 0 15px 15px; } /* Mouth */ | |
| #part6 { width: 40px; height: 20px; top: 75px; left: 80px; border-radius: 5px; } /* Neck */ | |
| #part7 { width: 120px; height: 25px; top: 95px; left: 40px; border-radius: 50px 50px 0 0; } /* Shoulders */ | |
| #part8 { width: 30px; height: 90px; top: 115px; border-radius: 15px 15px 10px 10px; } /* Arms */ | |
| #part8.left { left: 15px; transform: rotate(5deg); } | |
| #part8.right { right: 15px; transform: rotate(-5deg); } | |
| #part9 { width: 25px; height: 25px; top: 200px; border-radius: 50%; } /* Elbows */ | |
| #part9.left { left: 18px; } | |
| #part9.right { right: 18px; } | |
| #part10 { width: 25px; height: 65px; top: 220px; border-radius: 10px 10px 15px 15px; } /* Forearms */ | |
| #part10.left { left: 18px; transform: rotate(-5deg); } | |
| #part10.right { right: 18px; transform: rotate(5deg); } | |
| #part11 { width: 28px; height: 40px; top: 280px; border-radius: 10px; } /* Hands */ | |
| #part11.left { left: 15px; } | |
| #part11.right { right: 15px; } | |
| #part12 { width: 30px; height: 20px; top: 315px; border-radius: 0 0 10px 10px; } /* Fingers */ | |
| #part12.left { left: 14px; } | |
| #part12.right { right: 14px; } | |
| #part13 { width: 100px; height: 65px; top: 115px; left: 50px; border-radius: 50px 50px 25px 25px; } /* Chest */ | |
| #part14 { width: 90px; height: 80px; top: 180px; left: 55px; border-radius: 20px; } /* Abdomen */ | |
| #part15 { width: 90px; height: 50px; top: 260px; left: 55px; border-radius: 45px 45px 0 0; } /* Pelvis */ | |
| #part16 { width: 120px; height: 30px; top: 290px; left: 40px; border-radius: 60px 60px 0 0; } /* Hips */ | |
| #part17 { width: 45px; height: 90px; top: 310px; border-radius: 20px 20px 15px 15px; } /* Thighs */ | |
| #part17.left { left: 40px; } | |
| #part17.right { right: 40px; } | |
| #part18 { width: 40px; height: 30px; top: 395px; border-radius: 20px; } /* Knees */ | |
| #part18.left { left: 42px; } | |
| #part18.right { right: 42px; } | |
| #part19 { width: 35px; height: 75px; top: 420px; border-radius: 15px 15px 10px 10px; } /* Calves */ | |
| #part19.left { left: 45px; } | |
| #part19.right { right: 45px; } | |
| #part20 { width: 30px; height: 20px; top: 490px; border-radius: 10px; } /* Ankles */ | |
| #part20.left { left: 47px; } | |
| #part20.right { right: 47px; } | |
| #part21 { width: 40px; height: 25px; top: 505px; border-radius: 20px 20px 0 0; } /* Feet */ | |
| #part21.left { left: 42px; transform: rotate(-5deg); } | |
| #part21.right { right: 42px; transform: rotate(5deg); } | |
| #part22 { width: 40px; height: 15px; top: 525px; border-radius: 20px 20px 0 0; } /* Toes */ | |
| #part22.left { left: 42px; transform: rotate(-5deg); } | |
| #part22.right { right: 42px; transform: rotate(5deg); } | |
| #info-panel { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| padding: 10px; | |
| border-radius: 5px; | |
| display: none; | |
| font-size: 14px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="body-map"> | |
| <div id="part1" class="body-part" data-name="Head">1</div> | |
| <div id="part2" class="body-part" data-name="Eyes">2</div> | |
| <div id="part3" class="body-part left" data-name="Left Ear">3</div> | |
| <div id="part3" class="body-part right" data-name="Right Ear">3</div> | |
| <div id="part4" class="body-part" data-name="Nose">4</div> | |
| <div id="part5" class="body-part" data-name="Mouth">5</div> | |
| <div id="part6" class="body-part" data-name="Neck">6</div> | |
| <div id="part7" class="body-part" data-name="Shoulders">7</div> | |
| <div id="part8" class="body-part left" data-name="Left Arm">8</div> | |
| <div id="part8" class="body-part right" data-name="Right Arm">8</div> | |
| <div id="part9" class="body-part left" data-name="Left Elbow">9</div> | |
| <div id="part9" class="body-part right" data-name="Right Elbow">9</div> | |
| <div id="part10" class="body-part left" data-name="Left Forearm">10</div> | |
| <div id="part10" class="body-part right" data-name="Right Forearm">10</div> | |
| <div id="part11" class="body-part left" data-name="Left Hand">11</div> | |
| <div id="part11" class="body-part right" data-name="Right Hand">11</div> | |
| <div id="part12" class="body-part left" data-name="Left Fingers">12</div> | |
| <div id="part12" class="body-part right" data-name="Right Fingers">12</div> | |
| <div id="part13" class="body-part" data-name="Chest">13</div> | |
| <div id="part14" class="body-part" data-name="Abdomen">14</div> | |
| <div id="part15" class="body-part" data-name="Pelvis">15</div> | |
| <div id="part16" class="body-part" data-name="Hips">16</div> | |
| <div id="part17" class="body-part left" data-name="Left Thigh">17</div> | |
| <div id="part17" class="body-part right" data-name="Right Thigh">17</div> | |
| <div id="part18" class="body-part left" data-name="Left Knee">18</div> | |
| <div id="part18" class="body-part right" data-name="Right Knee">18</div> | |
| <div id="part19" class="body-part left" data-name="Left Calf">19</div> | |
| <div id="part19" class="body-part right" data-name="Right Calf">19</div> | |
| <div id="part20" class="body-part left" data-name="Left Ankle">20</div> | |
| <div id="part20" class="body-part right" data-name="Right Ankle">20</div> | |
| <div id="part21" class="body-part left" data-name="Left Foot">21</div> | |
| <div id="part21" class="body-part right" data-name="Right Foot">21</div> | |
| <div id="part22" class="body-part left" data-name="Left Toes">22</div> | |
| <div id="part22" class="body-part right" data-name="Right Toes">22</div> | |
| </div> | |
| <div id="info-panel"></div> | |
| <script> | |
| const bodyParts = document.querySelectorAll('.body-part'); | |
| const infoPanel = document.getElementById('info-panel'); | |
| bodyParts.forEach(part => { | |
| part.addEventListener('click', () => { | |
| const partName = part.getAttribute('data-name'); | |
| const partNumber = part.id.replace('part', ''); | |
| infoPanel.textContent = `${partNumber}. ${partName}`; | |
| infoPanel.style.display = 'block'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |