Hugging Face's logo

Spaces:
awacke1
/
BodyMap2-HTML5
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +7 -5
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>Refined Curved Anatomical Body Map</title>
7
  <style>
8
  body, html {
9
  height: 100%;
@@ -40,8 +40,9 @@
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: 40px; height: 20px; top: 75px; left: 80px; border-radius: 5px; } /* Neck */
44
- #part5 { width: 50px; height: 20px; top: 75px; 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); }
@@ -60,8 +61,8 @@
60
  #part11.right { right: 14px; }
61
  #part12 { width: 90px; height: 65px; top: 115px; left: 55px; border-radius: 45px; } /* Chest */
62
  #part13 { width: 80px; height: 80px; top: 180px; left: 60px; border-radius: 40px; } /* 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; }
@@ -77,7 +78,7 @@
77
  #part20 { width: 40px; height: 25px; 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: 525px; 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 {
@@ -97,6 +98,7 @@
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>
 
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
  #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); }
 
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; }
 
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 {
 
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>