Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Compact Numbered 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: 500px; | |
| background-color: #fff; | |
| border: 2px solid #000; | |
| } | |
| .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: 50px; height: 60px; top: 5px; left: 75px; border-radius: 25px 25px 0 0; } /* Head */ | |
| #part2 { width: 40px; height: 12px; top: 35px; left: 80px; border-radius: 20px 20px 0 0; } /* Eyes */ | |
| #part3 { width: 20px; height: 25px; top: 47px; left: 90px; } /* Nose and Throat */ | |
| #part4 { width: 25px; height: 20px; top: 65px; left: 87px; } /* Neck */ | |
| #part5 { width: 40px; height: 12px; top: 72px; left: 80px; border-radius: 0 0 20px 20px; } /* Nape */ | |
| #part6 { width: 110px; height: 20px; top: 85px; left: 45px; } /* Shoulders */ | |
| #part7 { width: 25px; height: 80px; top: 105px; } /* Arms */ | |
| #part7.left { left: 20px; } | |
| #part7.right { right: 20px; } | |
| #part8 { width: 20px; height: 20px; top: 185px; } /* Elbows */ | |
| #part8.left { left: 22px; } | |
| #part8.right { right: 22px; } | |
| #part9 { width: 22px; height: 55px; top: 205px; } /* Forearms */ | |
| #part9.left { left: 21px; } | |
| #part9.right { right: 21px; } | |
| #part10 { width: 22px; height: 35px; top: 260px; } /* Hands */ | |
| #part10.left { left: 21px; } | |
| #part10.right { right: 21px; } | |
| #part11 { width: 25px; height: 15px; top: 295px; } /* Fingers */ | |
| #part11.left { left: 20px; } | |
| #part11.right { right: 20px; } | |
| #part12 { width: 80px; height: 55px; top: 105px; left: 60px; } /* Chest */ | |
| #part13 { width: 70px; height: 70px; top: 160px; left: 65px; } /* Abdomen */ | |
| #part14 { width: 80px; height: 40px; top: 230px; left: 60px; } /* Pelvis */ | |
| #part15 { width: 110px; height: 25px; top: 270px; left: 45px; } /* Hips */ | |
| #part16 { width: 40px; height: 80px; top: 295px; } /* Thighs */ | |
| #part16.left { left: 45px; } | |
| #part16.right { right: 45px; } | |
| #part17 { width: 35px; height: 25px; top: 375px; } /* Knees */ | |
| #part17.left { left: 47px; } | |
| #part17.right { right: 47px; } | |
| #part18 { width: 30px; height: 65px; top: 400px; } /* Calves */ | |
| #part18.left { left: 50px; } | |
| #part18.right { right: 50px; } | |
| #part19 { width: 25px; height: 15px; top: 465px; } /* Ankles */ | |
| #part19.left { left: 52px; } | |
| #part19.right { right: 52px; } | |
| #part20 { width: 35px; height: 20px; top: 480px; } /* Feet */ | |
| #part20.left { left: 47px; } | |
| #part20.right { right: 47px; } | |
| #part21 { width: 35px; height: 10px; top: 490px; } /* Toes */ | |
| #part21.left { left: 47px; } | |
| #part21.right { right: 47px; } | |
| #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" data-name="Nose and Throat">3</div> | |
| <div id="part4" class="body-part" data-name="Neck">4</div> | |
| <div id="part5" class="body-part" data-name="Nape">5</div> | |
| <div id="part6" class="body-part" data-name="Shoulders">6</div> | |
| <div id="part7" class="body-part left" data-name="Left Arm">7</div> | |
| <div id="part7" class="body-part right" data-name="Right Arm">7</div> | |
| <div id="part8" class="body-part left" data-name="Left Elbow">8</div> | |
| <div id="part8" class="body-part right" data-name="Right Elbow">8</div> | |
| <div id="part9" class="body-part left" data-name="Left Forearm">9</div> | |
| <div id="part9" class="body-part right" data-name="Right Forearm">9</div> | |
| <div id="part10" class="body-part left" data-name="Left Hand">10</div> | |
| <div id="part10" class="body-part right" data-name="Right Hand">10</div> | |
| <div id="part11" class="body-part left" data-name="Left Fingers">11</div> | |
| <div id="part11" class="body-part right" data-name="Right Fingers">11</div> | |
| <div id="part12" class="body-part" data-name="Chest">12</div> | |
| <div id="part13" class="body-part" data-name="Abdomen">13</div> | |
| <div id="part14" class="body-part" data-name="Pelvis">14</div> | |
| <div id="part15" class="body-part" data-name="Hips">15</div> | |
| <div id="part16" class="body-part left" data-name="Left Thigh">16</div> | |
| <div id="part16" class="body-part right" data-name="Right Thigh">16</div> | |
| <div id="part17" class="body-part left" data-name="Left Knee">17</div> | |
| <div id="part17" class="body-part right" data-name="Right Knee">17</div> | |
| <div id="part18" class="body-part left" data-name="Left Calf">18</div> | |
| <div id="part18" class="body-part right" data-name="Right Calf">18</div> | |
| <div id="part19" class="body-part left" data-name="Left Ankle">19</div> | |
| <div id="part19" class="body-part right" data-name="Right Ankle">19</div> | |
| <div id="part20" class="body-part left" data-name="Left Foot">20</div> | |
| <div id="part20" class="body-part right" data-name="Right Foot">20</div> | |
| <div id="part21" class="body-part left" data-name="Left Toes">21</div> | |
| <div id="part21" class="body-part right" data-name="Right Toes">21</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> |