Hugging Face's logo

Spaces:
awacke1
/
BodyMap2-HTML5
Running

App Files Community
awacke1 commited on
Commit
7cd30bc
·
verified ·
1 Parent(s): bd0aafc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +12 -12
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>Anatomical Body Map with Ears</title>
7
  <style>
8
  body, html {
9
  height: 100%;
@@ -39,12 +39,12 @@
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: 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: 15px; height: 25px; top: 30px; border-radius: 0 0 50% 50%; } /* Ears */
46
- #part6.left { left: 60px; }
47
- #part6.right { right: 60px; }
48
  #part7 { width: 120px; height: 25px; top: 95px; left: 40px; border-radius: 50px 50px 0 0; } /* Shoulders */
49
  #part8 { width: 30px; height: 90px; top: 115px; border-radius: 15px 15px 10px 10px; } /* Arms */
50
  #part8.left { left: 15px; transform: rotate(5deg); }
@@ -99,11 +99,11 @@
99
  <div class="body-map">
100
  <div id="part1" class="body-part" data-name="Head">1</div>
101
  <div id="part2" class="body-part" data-name="Eyes">2</div>
102
- <div id="part3" class="body-part" data-name="Nose and Throat">3</div>
103
- <div id="part4" class="body-part" data-name="Mouth">4</div>
104
- <div id="part5" class="body-part" data-name="Neck">5</div>
105
- <div id="part6" class="body-part left" data-name="Left Ear">6</div>
106
- <div id="part6" class="body-part right" data-name="Right Ear">6</div>
107
  <div id="part7" class="body-part" data-name="Shoulders">7</div>
108
  <div id="part8" class="body-part left" data-name="Left Arm">8</div>
109
  <div id="part8" class="body-part right" data-name="Right Arm">8</div>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Reordered Anatomical Body Map</title>
7
  <style>
8
  body, html {
9
  height: 100%;
 
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: 15px; height: 25px; top: 30px; border-radius: 0 0 50% 50%; } /* Ears */
43
+ #part3.left { left: 60px; }
44
+ #part3.right { right: 60px; }
45
+ #part4 { width: 20px; height: 25px; top: 50px; left: 90px; border-radius: 0 0 10px 10px; } /* Nose */
46
+ #part5 { width: 30px; height: 10px; top: 65px; left: 85px; border-radius: 0 0 15px 15px; } /* Mouth */
47
+ #part6 { width: 40px; height: 20px; top: 75px; left: 80px; border-radius: 5px; } /* Neck */
48
  #part7 { width: 120px; height: 25px; top: 95px; left: 40px; border-radius: 50px 50px 0 0; } /* Shoulders */
49
  #part8 { width: 30px; height: 90px; top: 115px; border-radius: 15px 15px 10px 10px; } /* Arms */
50
  #part8.left { left: 15px; transform: rotate(5deg); }
 
99
  <div class="body-map">
100
  <div id="part1" class="body-part" data-name="Head">1</div>
101
  <div id="part2" class="body-part" data-name="Eyes">2</div>
102
+ <div id="part3" class="body-part left" data-name="Left Ear">3</div>
103
+ <div id="part3" class="body-part right" data-name="Right Ear">3</div>
104
+ <div id="part4" class="body-part" data-name="Nose">4</div>
105
+ <div id="part5" class="body-part" data-name="Mouth">5</div>
106
+ <div id="part6" class="body-part" data-name="Neck">6</div>
107
  <div id="part7" class="body-part" data-name="Shoulders">7</div>
108
  <div id="part8" class="body-part left" data-name="Left Arm">8</div>
109
  <div id="part8" class="body-part right" data-name="Right Arm">8</div>