Hugging Face's logo

Spaces:
awacke1
/
BodyMap2-HTML5
Running

App Files Community
awacke1 commited on
Commit
3051347
·
verified ·
1 Parent(s): c0a2b77

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +145 -19
index.html CHANGED
@@ -1,19 +1,145 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Compact Numbered 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
+ }
24
+ .body-part {
25
+ position: absolute;
26
+ background-color: #ddd;
27
+ border: 1px solid #999;
28
+ transition: background-color 0.3s;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ font-size: 10px;
33
+ font-weight: bold;
34
+ }
35
+ .body-part:hover {
36
+ background-color: #aaa;
37
+ cursor: pointer;
38
+ }
39
+ #part1 { width: 50px; height: 60px; top: 5px; left: 75px; border-radius: 25px 25px 0 0; } /* Head */
40
+ #part2 { width: 40px; height: 12px; top: 35px; left: 80px; border-radius: 20px 20px 0 0; } /* Eyes */
41
+ #part3 { width: 20px; height: 25px; top: 47px; left: 90px; } /* Nose and Throat */
42
+ #part4 { width: 25px; height: 20px; top: 65px; left: 87px; } /* Neck */
43
+ #part5 { width: 40px; height: 12px; top: 72px; left: 80px; border-radius: 0 0 20px 20px; } /* Nape */
44
+ #part6 { width: 110px; height: 20px; top: 85px; left: 45px; } /* Shoulders */
45
+ #part7 { width: 25px; height: 80px; top: 105px; } /* Arms */
46
+ #part7.left { left: 20px; }
47
+ #part7.right { right: 20px; }
48
+ #part8 { width: 20px; height: 20px; top: 185px; } /* Elbows */
49
+ #part8.left { left: 22px; }
50
+ #part8.right { right: 22px; }
51
+ #part9 { width: 22px; height: 55px; top: 205px; } /* Forearms */
52
+ #part9.left { left: 21px; }
53
+ #part9.right { right: 21px; }
54
+ #part10 { width: 22px; height: 35px; top: 260px; } /* Hands */
55
+ #part10.left { left: 21px; }
56
+ #part10.right { right: 21px; }
57
+ #part11 { width: 25px; height: 15px; top: 295px; } /* Fingers */
58
+ #part11.left { left: 20px; }
59
+ #part11.right { right: 20px; }
60
+ #part12 { width: 80px; height: 55px; top: 105px; left: 60px; } /* Chest */
61
+ #part13 { width: 70px; height: 70px; top: 160px; left: 65px; } /* Abdomen */
62
+ #part14 { width: 80px; height: 40px; top: 230px; left: 60px; } /* Pelvis */
63
+ #part15 { width: 110px; height: 25px; top: 270px; left: 45px; } /* Hips */
64
+ #part16 { width: 40px; height: 80px; top: 295px; } /* Thighs */
65
+ #part16.left { left: 45px; }
66
+ #part16.right { right: 45px; }
67
+ #part17 { width: 35px; height: 25px; top: 375px; } /* Knees */
68
+ #part17.left { left: 47px; }
69
+ #part17.right { right: 47px; }
70
+ #part18 { width: 30px; height: 65px; top: 400px; } /* Calves */
71
+ #part18.left { left: 50px; }
72
+ #part18.right { right: 50px; }
73
+ #part19 { width: 25px; height: 15px; top: 465px; } /* Ankles */
74
+ #part19.left { left: 52px; }
75
+ #part19.right { right: 52px; }
76
+ #part20 { width: 35px; height: 20px; top: 480px; } /* Feet */
77
+ #part20.left { left: 47px; }
78
+ #part20.right { right: 47px; }
79
+ #part21 { width: 35px; height: 10px; top: 490px; } /* Toes */
80
+ #part21.left { left: 47px; }
81
+ #part21.right { right: 47px; }
82
+ #info-panel {
83
+ position: absolute;
84
+ top: 10px;
85
+ left: 10px;
86
+ background-color: rgba(255, 255, 255, 0.8);
87
+ padding: 10px;
88
+ border-radius: 5px;
89
+ display: none;
90
+ font-size: 14px;
91
+ }
92
+ </style>
93
+ </head>
94
+ <body>
95
+ <div class="body-map">
96
+ <div id="part1" class="body-part" data-name="Head">1</div>
97
+ <div id="part2" class="body-part" data-name="Eyes">2</div>
98
+ <div id="part3" class="body-part" data-name="Nose and Throat">3</div>
99
+ <div id="part4" class="body-part" data-name="Neck">4</div>
100
+ <div id="part5" class="body-part" data-name="Nape">5</div>
101
+ <div id="part6" class="body-part" data-name="Shoulders">6</div>
102
+ <div id="part7" class="body-part left" data-name="Left Arm">7</div>
103
+ <div id="part7" class="body-part right" data-name="Right Arm">7</div>
104
+ <div id="part8" class="body-part left" data-name="Left Elbow">8</div>
105
+ <div id="part8" class="body-part right" data-name="Right Elbow">8</div>
106
+ <div id="part9" class="body-part left" data-name="Left Forearm">9</div>
107
+ <div id="part9" class="body-part right" data-name="Right Forearm">9</div>
108
+ <div id="part10" class="body-part left" data-name="Left Hand">10</div>
109
+ <div id="part10" class="body-part right" data-name="Right Hand">10</div>
110
+ <div id="part11" class="body-part left" data-name="Left Fingers">11</div>
111
+ <div id="part11" class="body-part right" data-name="Right Fingers">11</div>
112
+ <div id="part12" class="body-part" data-name="Chest">12</div>
113
+ <div id="part13" class="body-part" data-name="Abdomen">13</div>
114
+ <div id="part14" class="body-part" data-name="Pelvis">14</div>
115
+ <div id="part15" class="body-part" data-name="Hips">15</div>
116
+ <div id="part16" class="body-part left" data-name="Left Thigh">16</div>
117
+ <div id="part16" class="body-part right" data-name="Right Thigh">16</div>
118
+ <div id="part17" class="body-part left" data-name="Left Knee">17</div>
119
+ <div id="part17" class="body-part right" data-name="Right Knee">17</div>
120
+ <div id="part18" class="body-part left" data-name="Left Calf">18</div>
121
+ <div id="part18" class="body-part right" data-name="Right Calf">18</div>
122
+ <div id="part19" class="body-part left" data-name="Left Ankle">19</div>
123
+ <div id="part19" class="body-part right" data-name="Right Ankle">19</div>
124
+ <div id="part20" class="body-part left" data-name="Left Foot">20</div>
125
+ <div id="part20" class="body-part right" data-name="Right Foot">20</div>
126
+ <div id="part21" class="body-part left" data-name="Left Toes">21</div>
127
+ <div id="part21" class="body-part right" data-name="Right Toes">21</div>
128
+ </div>
129
+ <div id="info-panel"></div>
130
+
131
+ <script>
132
+ const bodyParts = document.querySelectorAll('.body-part');
133
+ const infoPanel = document.getElementById('info-panel');
134
+
135
+ bodyParts.forEach(part => {
136
+ part.addEventListener('click', () => {
137
+ const partName = part.getAttribute('data-name');
138
+ const partNumber = part.id.replace('part', '');
139
+ infoPanel.textContent = `${partNumber}. ${partName}`;
140
+ infoPanel.style.display = 'block';
141
+ });
142
+ });
143
+ </script>
144
+ </body>
145
+ </html>