Hugging Face's logo

Spaces:
awacke1
/
BodyMap2-HTML5
Running

App Files Community
awacke1 commited on
Commit
1c676ad
·
verified ·
1 Parent(s): 4d05623

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +146 -0
index.html ADDED
@@ -0,0 +1,146 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Realistic Curved Anatomical Body Map</title>
7
+ <style>
8
+ body, html {
9
+ height: 100%;
10
+ margin: 0;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ background-color: #f0f0f0;
15
+ font-family: Arial, sans-serif;
16
+ }
17
+ .body-map {
18
+ position: relative;
19
+ width: 200px;
20
+ height: 500px;
21
+ background-color: #fff;
22
+ border: 2px solid #000;
23
+ border-radius: 100px 100px 0 0;
24
+ }
25
+ .body-part {
26
+ position: absolute;
27
+ background-color: #ddd;
28
+ border: 1px solid #999;
29
+ transition: background-color 0.3s;
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: center;
33
+ font-size: 10px;
34
+ font-weight: bold;
35
+ }
36
+ .body-part:hover {
37
+ background-color: #aaa;
38
+ cursor: pointer;
39
+ }
40
+ #part1 { width: 60px; height: 70px; top: 5px; left: 70px; border-radius: 30px 30px 25px 25px; } /* Head */
41
+ #part2 { width: 50px; height: 15px; top: 35px; left: 75px; border-radius: 25px 25px 0 0; } /* Eyes */
42
+ #part3 { width: 20px; height: 25px; top: 50px; left: 90px; border-radius: 0 0 10px 10px; } /* Nose and Throat */
43
+ #part4 { width: 30px; height: 20px; top: 75px; left: 85px; border-radius: 5px; } /* Neck */
44
+ #part5 { width: 50px; height: 15px; top: 80px; left: 75px; border-radius: 0 0 25px 25px; } /* Nape */
45
+ #part6 { width: 120px; height: 25px; top: 95px; left: 40px; border-radius: 50px 50px 0 0; } /* Shoulders */
46
+ #part7 { width: 30px; height: 90px; top: 115px; border-radius: 15px 15px 10px 10px; } /* Arms */
47
+ #part7.left { left: 15px; transform: rotate(5deg); }
48
+ #part7.right { right: 15px; transform: rotate(-5deg); }
49
+ #part8 { width: 25px; height: 25px; top: 200px; border-radius: 50%; } /* Elbows */
50
+ #part8.left { left: 18px; }
51
+ #part8.right { right: 18px; }
52
+ #part9 { width: 25px; height: 65px; top: 220px; border-radius: 10px 10px 15px 15px; } /* Forearms */
53
+ #part9.left { left: 18px; transform: rotate(-5deg); }
54
+ #part9.right { right: 18px; transform: rotate(5deg); }
55
+ #part10 { width: 28px; height: 40px; top: 280px; border-radius: 10px; } /* Hands */
56
+ #part10.left { left: 15px; }
57
+ #part10.right { right: 15px; }
58
+ #part11 { width: 30px; height: 20px; top: 315px; border-radius: 0 0 10px 10px; } /* Fingers */
59
+ #part11.left { left: 14px; }
60
+ #part11.right { right: 14px; }
61
+ #part12 { width: 90px; height: 65px; top: 115px; left: 55px; border-radius: 45px 45px 0 0; } /* Chest */
62
+ #part13 { width: 80px; height: 80px; top: 180px; left: 60px; border-radius: 40px 40px 0 0; } /* Abdomen */
63
+ #part14 { width: 90px; height: 50px; top: 260px; left: 55px; border-radius: 0 0 45px 45px; } /* Pelvis */
64
+ #part15 { width: 120px; height: 30px; top: 290px; left: 40px; border-radius: 0 0 60px 60px; } /* Hips */
65
+ #part16 { width: 45px; height: 90px; top: 310px; border-radius: 20px 20px 15px 15px; } /* Thighs */
66
+ #part16.left { left: 40px; }
67
+ #part16.right { right: 40px; }
68
+ #part17 { width: 40px; height: 30px; top: 395px; border-radius: 20px; } /* Knees */
69
+ #part17.left { left: 42px; }
70
+ #part17.right { right: 42px; }
71
+ #part18 { width: 35px; height: 75px; top: 420px; border-radius: 15px 15px 10px 10px; } /* Calves */
72
+ #part18.left { left: 45px; }
73
+ #part18.right { right: 45px; }
74
+ #part19 { width: 30px; height: 20px; top: 490px; border-radius: 10px; } /* Ankles */
75
+ #part19.left { left: 47px; }
76
+ #part19.right { right: 47px; }
77
+ #part20 { width: 40px; height: 20px; top: 505px; border-radius: 20px 20px 0 0; } /* Feet */
78
+ #part20.left { left: 42px; transform: rotate(-5deg); }
79
+ #part20.right { right: 42px; transform: rotate(5deg); }
80
+ #part21 { width: 40px; height: 15px; top: 515px; border-radius: 0 0 20px 20px; } /* Toes */
81
+ #part21.left { left: 42px; transform: rotate(-5deg); }
82
+ #part21.right { right: 42px; transform: rotate(5deg); }
83
+ #info-panel {
84
+ position: absolute;
85
+ top: 10px;
86
+ left: 10px;
87
+ background-color: rgba(255, 255, 255, 0.8);
88
+ padding: 10px;
89
+ border-radius: 5px;
90
+ display: none;
91
+ font-size: 14px;
92
+ }
93
+ </style>
94
+ </head>
95
+ <body>
96
+ <div class="body-map">
97
+ <div id="part1" class="body-part" data-name="Head">1</div>
98
+ <div id="part2" class="body-part" data-name="Eyes">2</div>
99
+ <div id="part3" class="body-part" data-name="Nose and Throat">3</div>
100
+ <div id="part4" class="body-part" data-name="Neck">4</div>
101
+ <div id="part5" class="body-part" data-name="Nape">5</div>
102
+ <div id="part6" class="body-part" data-name="Shoulders">6</div>
103
+ <div id="part7" class="body-part left" data-name="Left Arm">7</div>
104
+ <div id="part7" class="body-part right" data-name="Right Arm">7</div>
105
+ <div id="part8" class="body-part left" data-name="Left Elbow">8</div>
106
+ <div id="part8" class="body-part right" data-name="Right Elbow">8</div>
107
+ <div id="part9" class="body-part left" data-name="Left Forearm">9</div>
108
+ <div id="part9" class="body-part right" data-name="Right Forearm">9</div>
109
+ <div id="part10" class="body-part left" data-name="Left Hand">10</div>
110
+ <div id="part10" class="body-part right" data-name="Right Hand">10</div>
111
+ <div id="part11" class="body-part left" data-name="Left Fingers">11</div>
112
+ <div id="part11" class="body-part right" data-name="Right Fingers">11</div>
113
+ <div id="part12" class="body-part" data-name="Chest">12</div>
114
+ <div id="part13" class="body-part" data-name="Abdomen">13</div>
115
+ <div id="part14" class="body-part" data-name="Pelvis">14</div>
116
+ <div id="part15" class="body-part" data-name="Hips">15</div>
117
+ <div id="part16" class="body-part left" data-name="Left Thigh">16</div>
118
+ <div id="part16" class="body-part right" data-name="Right Thigh">16</div>
119
+ <div id="part17" class="body-part left" data-name="Left Knee">17</div>
120
+ <div id="part17" class="body-part right" data-name="Right Knee">17</div>
121
+ <div id="part18" class="body-part left" data-name="Left Calf">18</div>
122
+ <div id="part18" class="body-part right" data-name="Right Calf">18</div>
123
+ <div id="part19" class="body-part left" data-name="Left Ankle">19</div>
124
+ <div id="part19" class="body-part right" data-name="Right Ankle">19</div>
125
+ <div id="part20" class="body-part left" data-name="Left Foot">20</div>
126
+ <div id="part20" class="body-part right" data-name="Right Foot">20</div>
127
+ <div id="part21" class="body-part left" data-name="Left Toes">21</div>
128
+ <div id="part21" class="body-part right" data-name="Right Toes">21</div>
129
+ </div>
130
+ <div id="info-panel"></div>
131
+
132
+ <script>
133
+ const bodyParts = document.querySelectorAll('.body-part');
134
+ const infoPanel = document.getElementById('info-panel');
135
+
136
+ bodyParts.forEach(part => {
137
+ part.addEventListener('click', () => {
138
+ const partName = part.getAttribute('data-name');
139
+ const partNumber = part.id.replace('part', '');
140
+ infoPanel.textContent = `${partNumber}. ${partName}`;
141
+ infoPanel.style.display = 'block';
142
+ });
143
+ });
144
+ </script>
145
+ </body>
146
+ </html>