Spaces:
Running
Running
File size: 8,091 Bytes
39742d3 7cd30bc 39742d3 7cd30bc 43cd67a 58ec653 43cd67a 39742d3 43cd67a 39742d3 7cd30bc 43cd67a 39742d3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
<!DOCTYPE html>
<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> |