Hugging Face's logo

Spaces:
awacke1
/
BodyMap2-HTML5
Running

App Files Community
awacke1 commited on
Commit
43cd67a
·
verified ·
1 Parent(s): 12bc6ec

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +70 -70
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Anatomically Correct Body Map</title>
7
  <style>
8
  body, html {
9
  height: 100%;
@@ -40,47 +40,47 @@
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
- #part22 { width: 30px; height: 10px; top: 65px; left: 85px; border-radius: 0 0 15px 15px; } /* Mouth */
44
- #part4 { width: 40px; height: 20px; top: 75px; left: 80px; border-radius: 5px; } /* Neck */
45
- #part5 { width: 50px; height: 20px; top: 95px; left: 75px; border-radius: 25px 25px 0 0; } /* Nape */
46
- #part6 { width: 120px; height: 25px; top: 95px; left: 40px; border-radius: 50px 50px 0 0; } /* Shoulders */
47
- #part7 { width: 30px; height: 90px; top: 115px; border-radius: 15px 15px 10px 10px; } /* Arms */
48
- #part7.left { left: 15px; transform: rotate(5deg); }
49
- #part7.right { right: 15px; transform: rotate(-5deg); }
50
- #part8 { width: 25px; height: 25px; top: 200px; border-radius: 50%; } /* Elbows */
51
- #part8.left { left: 18px; }
52
- #part8.right { right: 18px; }
53
- #part9 { width: 25px; height: 65px; top: 220px; border-radius: 10px 10px 15px 15px; } /* Forearms */
54
- #part9.left { left: 18px; transform: rotate(-5deg); }
55
- #part9.right { right: 18px; transform: rotate(5deg); }
56
- #part10 { width: 28px; height: 40px; top: 280px; border-radius: 10px; } /* Hands */
57
- #part10.left { left: 15px; }
58
- #part10.right { right: 15px; }
59
- #part11 { width: 30px; height: 20px; top: 315px; border-radius: 0 0 10px 10px; } /* Fingers */
60
- #part11.left { left: 14px; }
61
- #part11.right { right: 14px; }
62
- #part12 { width: 90px; height: 65px; top: 115px; left: 55px; border-radius: 45px; } /* Chest */
63
- #part13 { width: 80px; height: 80px; top: 180px; left: 60px; border-radius: 40px; } /* Abdomen */
64
- #part14 { width: 90px; height: 50px; top: 260px; left: 55px; border-radius: 45px 45px 0 0; } /* Pelvis */
65
- #part15 { width: 120px; height: 30px; top: 290px; left: 40px; border-radius: 60px 60px 0 0; } /* Hips */
66
- #part16 { width: 45px; height: 90px; top: 310px; border-radius: 20px 20px 15px 15px; } /* Thighs */
67
- #part16.left { left: 40px; }
68
- #part16.right { right: 40px; }
69
- #part17 { width: 40px; height: 30px; top: 395px; border-radius: 20px; } /* Knees */
70
- #part17.left { left: 42px; }
71
- #part17.right { right: 42px; }
72
- #part18 { width: 35px; height: 75px; top: 420px; border-radius: 15px 15px 10px 10px; } /* Calves */
73
- #part18.left { left: 45px; }
74
- #part18.right { right: 45px; }
75
- #part19 { width: 30px; height: 20px; top: 490px; border-radius: 10px; } /* Ankles */
76
- #part19.left { left: 47px; }
77
- #part19.right { right: 47px; }
78
- #part20 { width: 40px; height: 25px; top: 505px; border-radius: 20px 20px 0 0; } /* Feet */
79
- #part20.left { left: 42px; transform: rotate(-5deg); }
80
- #part20.right { right: 42px; transform: rotate(5deg); }
81
- #part21 { width: 40px; height: 15px; top: 525px; border-radius: 20px 20px 0 0; } /* Toes */
82
  #part21.left { left: 42px; transform: rotate(-5deg); }
83
  #part21.right { right: 42px; transform: rotate(5deg); }
 
 
 
84
  #info-panel {
85
  position: absolute;
86
  top: 10px;
@@ -98,36 +98,36 @@
98
  <div id="part1" class="body-part" data-name="Head">1</div>
99
  <div id="part2" class="body-part" data-name="Eyes">2</div>
100
  <div id="part3" class="body-part" data-name="Nose and Throat">3</div>
101
- <div id="part22" class="body-part" data-name="Mouth">22</div>
102
- <div id="part4" class="body-part" data-name="Neck">4</div>
103
- <div id="part5" class="body-part" data-name="Nape">5</div>
104
- <div id="part6" class="body-part" data-name="Shoulders">6</div>
105
- <div id="part7" class="body-part left" data-name="Left Arm">7</div>
106
- <div id="part7" class="body-part right" data-name="Right Arm">7</div>
107
- <div id="part8" class="body-part left" data-name="Left Elbow">8</div>
108
- <div id="part8" class="body-part right" data-name="Right Elbow">8</div>
109
- <div id="part9" class="body-part left" data-name="Left Forearm">9</div>
110
- <div id="part9" class="body-part right" data-name="Right Forearm">9</div>
111
- <div id="part10" class="body-part left" data-name="Left Hand">10</div>
112
- <div id="part10" class="body-part right" data-name="Right Hand">10</div>
113
- <div id="part11" class="body-part left" data-name="Left Fingers">11</div>
114
- <div id="part11" class="body-part right" data-name="Right Fingers">11</div>
115
- <div id="part12" class="body-part" data-name="Chest">12</div>
116
- <div id="part13" class="body-part" data-name="Abdomen">13</div>
117
- <div id="part14" class="body-part" data-name="Pelvis">14</div>
118
- <div id="part15" class="body-part" data-name="Hips">15</div>
119
- <div id="part16" class="body-part left" data-name="Left Thigh">16</div>
120
- <div id="part16" class="body-part right" data-name="Right Thigh">16</div>
121
- <div id="part17" class="body-part left" data-name="Left Knee">17</div>
122
- <div id="part17" class="body-part right" data-name="Right Knee">17</div>
123
- <div id="part18" class="body-part left" data-name="Left Calf">18</div>
124
- <div id="part18" class="body-part right" data-name="Right Calf">18</div>
125
- <div id="part19" class="body-part left" data-name="Left Ankle">19</div>
126
- <div id="part19" class="body-part right" data-name="Right Ankle">19</div>
127
- <div id="part20" class="body-part left" data-name="Left Foot">20</div>
128
- <div id="part20" class="body-part right" data-name="Right Foot">20</div>
129
- <div id="part21" class="body-part left" data-name="Left Toes">21</div>
130
- <div id="part21" class="body-part right" data-name="Right Toes">21</div>
131
  </div>
132
  <div id="info-panel"></div>
133
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Renumbered Anatomical Body Map</title>
7
  <style>
8
  body, html {
9
  height: 100%;
 
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: 10px; top: 65px; left: 85px; border-radius: 0 0 15px 15px; } /* Mouth */
44
+ #part5 { width: 40px; height: 20px; top: 75px; left: 80px; border-radius: 5px; } /* Neck */
45
+ #part6 { width: 50px; height: 20px; top: 95px; left: 75px; border-radius: 25px 25px 0 0; } /* Nape */
46
+ #part7 { width: 120px; height: 25px; top: 95px; left: 40px; border-radius: 50px 50px 0 0; } /* Shoulders */
47
+ #part8 { width: 30px; height: 90px; top: 115px; border-radius: 15px 15px 10px 10px; } /* Arms */
48
+ #part8.left { left: 15px; transform: rotate(5deg); }
49
+ #part8.right { right: 15px; transform: rotate(-5deg); }
50
+ #part9 { width: 25px; height: 25px; top: 200px; border-radius: 50%; } /* Elbows */
51
+ #part9.left { left: 18px; }
52
+ #part9.right { right: 18px; }
53
+ #part10 { width: 25px; height: 65px; top: 220px; border-radius: 10px 10px 15px 15px; } /* Forearms */
54
+ #part10.left { left: 18px; transform: rotate(-5deg); }
55
+ #part10.right { right: 18px; transform: rotate(5deg); }
56
+ #part11 { width: 28px; height: 40px; top: 280px; border-radius: 10px; } /* Hands */
57
+ #part11.left { left: 15px; }
58
+ #part11.right { right: 15px; }
59
+ #part12 { width: 30px; height: 20px; top: 315px; border-radius: 0 0 10px 10px; } /* Fingers */
60
+ #part12.left { left: 14px; }
61
+ #part12.right { right: 14px; }
62
+ #part13 { width: 90px; height: 65px; top: 115px; left: 55px; border-radius: 45px; } /* Chest */
63
+ #part14 { width: 80px; height: 80px; top: 180px; left: 60px; border-radius: 40px; } /* Abdomen */
64
+ #part15 { width: 90px; height: 50px; top: 260px; left: 55px; border-radius: 45px 45px 0 0; } /* Pelvis */
65
+ #part16 { width: 120px; height: 30px; top: 290px; left: 40px; border-radius: 60px 60px 0 0; } /* Hips */
66
+ #part17 { width: 45px; height: 90px; top: 310px; border-radius: 20px 20px 15px 15px; } /* Thighs */
67
+ #part17.left { left: 40px; }
68
+ #part17.right { right: 40px; }
69
+ #part18 { width: 40px; height: 30px; top: 395px; border-radius: 20px; } /* Knees */
70
+ #part18.left { left: 42px; }
71
+ #part18.right { right: 42px; }
72
+ #part19 { width: 35px; height: 75px; top: 420px; border-radius: 15px 15px 10px 10px; } /* Calves */
73
+ #part19.left { left: 45px; }
74
+ #part19.right { right: 45px; }
75
+ #part20 { width: 30px; height: 20px; top: 490px; border-radius: 10px; } /* Ankles */
76
+ #part20.left { left: 47px; }
77
+ #part20.right { right: 47px; }
78
+ #part21 { width: 40px; height: 25px; top: 505px; border-radius: 20px 20px 0 0; } /* Feet */
 
 
 
79
  #part21.left { left: 42px; transform: rotate(-5deg); }
80
  #part21.right { right: 42px; transform: rotate(5deg); }
81
+ #part22 { width: 40px; height: 15px; top: 525px; border-radius: 20px 20px 0 0; } /* Toes */
82
+ #part22.left { left: 42px; transform: rotate(-5deg); }
83
+ #part22.right { right: 42px; transform: rotate(5deg); }
84
  #info-panel {
85
  position: absolute;
86
  top: 10px;
 
98
  <div id="part1" class="body-part" data-name="Head">1</div>
99
  <div id="part2" class="body-part" data-name="Eyes">2</div>
100
  <div id="part3" class="body-part" data-name="Nose and Throat">3</div>
101
+ <div id="part4" class="body-part" data-name="Mouth">4</div>
102
+ <div id="part5" class="body-part" data-name="Neck">5</div>
103
+ <div id="part6" class="body-part" data-name="Nape">6</div>
104
+ <div id="part7" class="body-part" data-name="Shoulders">7</div>
105
+ <div id="part8" class="body-part left" data-name="Left Arm">8</div>
106
+ <div id="part8" class="body-part right" data-name="Right Arm">8</div>
107
+ <div id="part9" class="body-part left" data-name="Left Elbow">9</div>
108
+ <div id="part9" class="body-part right" data-name="Right Elbow">9</div>
109
+ <div id="part10" class="body-part left" data-name="Left Forearm">10</div>
110
+ <div id="part10" class="body-part right" data-name="Right Forearm">10</div>
111
+ <div id="part11" class="body-part left" data-name="Left Hand">11</div>
112
+ <div id="part11" class="body-part right" data-name="Right Hand">11</div>
113
+ <div id="part12" class="body-part left" data-name="Left Fingers">12</div>
114
+ <div id="part12" class="body-part right" data-name="Right Fingers">12</div>
115
+ <div id="part13" class="body-part" data-name="Chest">13</div>
116
+ <div id="part14" class="body-part" data-name="Abdomen">14</div>
117
+ <div id="part15" class="body-part" data-name="Pelvis">15</div>
118
+ <div id="part16" class="body-part" data-name="Hips">16</div>
119
+ <div id="part17" class="body-part left" data-name="Left Thigh">17</div>
120
+ <div id="part17" class="body-part right" data-name="Right Thigh">17</div>
121
+ <div id="part18" class="body-part left" data-name="Left Knee">18</div>
122
+ <div id="part18" class="body-part right" data-name="Right Knee">18</div>
123
+ <div id="part19" class="body-part left" data-name="Left Calf">19</div>
124
+ <div id="part19" class="body-part right" data-name="Right Calf">19</div>
125
+ <div id="part20" class="body-part left" data-name="Left Ankle">20</div>
126
+ <div id="part20" class="body-part right" data-name="Right Ankle">20</div>
127
+ <div id="part21" class="body-part left" data-name="Left Foot">21</div>
128
+ <div id="part21" class="body-part right" data-name="Right Foot">21</div>
129
+ <div id="part22" class="body-part left" data-name="Left Toes">22</div>
130
+ <div id="part22" class="body-part right" data-name="Right Toes">22</div>
131
  </div>
132
  <div id="info-panel"></div>
133