Hugging Face's logo

Spaces:
awacke1
/
BodyMap2-HTML5
Running

App Files Community
BodyMap2-HTML5
File size: 7,789 Bytes 
1c676ad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Realistic Curved 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;
            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: 20px; height: 25px; top: 50px; left: 90px; border-radius: 0 0 10px 10px; } /* Nose and Throat */
        #part4 { width: 30px; height: 20px; top: 75px; left: 85px; border-radius: 5px; } /* Neck */
        #part5 { width: 50px; height: 15px; top: 80px; left: 75px; border-radius: 0 0 25px 25px; } /* Nape */
        #part6 { width: 120px; height: 25px; top: 95px; left: 40px; border-radius: 50px 50px 0 0; } /* Shoulders */
        #part7 { width: 30px; height: 90px; top: 115px; border-radius: 15px 15px 10px 10px; } /* Arms */
        #part7.left { left: 15px; transform: rotate(5deg); }
        #part7.right { right: 15px; transform: rotate(-5deg); }
        #part8 { width: 25px; height: 25px; top: 200px; border-radius: 50%; } /* Elbows */
        #part8.left { left: 18px; }
        #part8.right { right: 18px; }
        #part9 { width: 25px; height: 65px; top: 220px; border-radius: 10px 10px 15px 15px; } /* Forearms */
        #part9.left { left: 18px; transform: rotate(-5deg); }
        #part9.right { right: 18px; transform: rotate(5deg); }
        #part10 { width: 28px; height: 40px; top: 280px; border-radius: 10px; } /* Hands */
        #part10.left { left: 15px; }
        #part10.right { right: 15px; }
        #part11 { width: 30px; height: 20px; top: 315px; border-radius: 0 0 10px 10px; } /* Fingers */
        #part11.left { left: 14px; }
        #part11.right { right: 14px; }
        #part12 { width: 90px; height: 65px; top: 115px; left: 55px; border-radius: 45px 45px 0 0; } /* Chest */
        #part13 { width: 80px; height: 80px; top: 180px; left: 60px; border-radius: 40px 40px 0 0; } /* Abdomen */
        #part14 { width: 90px; height: 50px; top: 260px; left: 55px; border-radius: 0 0 45px 45px; } /* Pelvis */
        #part15 { width: 120px; height: 30px; top: 290px; left: 40px; border-radius: 0 0 60px 60px; } /* Hips */
        #part16 { width: 45px; height: 90px; top: 310px; border-radius: 20px 20px 15px 15px; } /* Thighs */
        #part16.left { left: 40px; }
        #part16.right { right: 40px; }
        #part17 { width: 40px; height: 30px; top: 395px; border-radius: 20px; } /* Knees */
        #part17.left { left: 42px; }
        #part17.right { right: 42px; }
        #part18 { width: 35px; height: 75px; top: 420px; border-radius: 15px 15px 10px 10px; } /* Calves */
        #part18.left { left: 45px; }
        #part18.right { right: 45px; }
        #part19 { width: 30px; height: 20px; top: 490px; border-radius: 10px; } /* Ankles */
        #part19.left { left: 47px; }
        #part19.right { right: 47px; }
        #part20 { width: 40px; height: 20px; top: 505px; border-radius: 20px 20px 0 0; } /* Feet */
        #part20.left { left: 42px; transform: rotate(-5deg); }
        #part20.right { right: 42px; transform: rotate(5deg); }
        #part21 { width: 40px; height: 15px; top: 515px; border-radius: 0 0 20px 20px; } /* Toes */
        #part21.left { left: 42px; transform: rotate(-5deg); }
        #part21.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" 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>