-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
68 lines (58 loc) · 5.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The little dude in the browser</title>
<link rel="stylesheet" href="css/app.css">
<script src="js/app.js" defer></script>
</head>
<body>
<img id="shell" src="img/Shell.svg">
<svg id="elf" width="196" height="340" viewBox="0 0 196 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="235" r="11" fill="#D9D9D9"/>
<rect y="233.287" width="15" height="5" rx="2.5" transform="rotate(-8.76813 0 233.287)" fill="#D9D9D9"/>
<rect x="7.68401" y="221.432" width="17.9213" height="5.97375" rx="2.5" transform="rotate(6.11228 7.68401 221.432)" fill="#D9D9D9"/>
<rect x="1.92474" y="242.378" width="15" height="5" rx="2.5" transform="rotate(-23.9804 1.92474 242.378)" fill="#D9D9D9"/>
<rect x="9.68039" y="250.623" width="15" height="5" rx="2.5" transform="rotate(-43.0322 9.68039 250.623)" fill="#D9D9D9"/>
<g id="left-hand">
<circle cx="11" cy="11" r="11" transform="matrix(-0.988425 -0.151707 -0.151707 0.988425 180.339 230.876)" fill="#D9D9D9"/>
<rect width="15" height="5" rx="2.5" transform="matrix(-0.953748 -0.300606 -0.300606 0.953748 190.791 241.876)" fill="#D9D9D9"/>
<rect width="17.9213" height="5.97375" rx="2.5" transform="matrix(-0.99896 -0.0456002 -0.0456002 0.99896 184.994 228.992)" fill="#D9D9D9"/>
<rect width="15" height="5" rx="2.5" transform="matrix(-0.841452 -0.540332 -0.540332 0.841452 187.509 250.57)" fill="#D9D9D9"/>
<rect width="15" height="5" rx="2.5" transform="matrix(-0.618983 -0.785404 -0.785404 0.618983 178.593 257.543)" fill="#D9D9D9"/>
</g>
<circle cx="102" cy="91" r="86" fill="#DCDCDC"/>
<circle cx="77" cy="91" r="13.5" fill="white" stroke="black" stroke-width="3"/>
<circle cx="136" cy="97" r="13.5" fill="white" stroke="black" stroke-width="3"/>
<path id="round-mouth" fill-rule="evenodd" clip-rule="evenodd" d="M95.8484 157.103C84.6802 156.274 74.3603 152.167 69 143.59L71.544 142C76.1837 149.423 85.3638 153.316 96.0706 154.112C106.741 154.904 118.601 152.582 128.115 147.947L129.429 150.643C119.443 155.508 107.053 157.936 95.8484 157.103Z" fill="black" stroke="black"/>
<path id="nose" fill-rule="evenodd" clip-rule="evenodd" d="M101.126 129.808C100.115 129.166 99.1841 128.408 98.6325 127.63L101.08 125.895C101.301 126.207 101.852 126.716 102.734 127.276C103.585 127.816 104.631 128.333 105.726 128.711C106.828 129.09 107.919 129.307 108.871 129.3C109.824 129.292 110.536 129.063 111.031 128.664C112.423 127.539 113.197 126.45 113.627 125.454C114.058 124.455 114.179 123.466 114.15 122.49C114.123 121.594 113.973 120.755 113.82 119.898C113.801 119.795 113.783 119.692 113.765 119.589L113.763 119.578C113.614 118.738 113.416 117.614 113.662 116.642L116.571 117.378C116.511 117.613 116.542 118.064 116.719 119.068C116.736 119.164 116.754 119.265 116.773 119.368C116.924 120.208 117.114 121.267 117.148 122.399C117.188 123.697 117.028 125.144 116.382 126.642C115.735 128.142 114.636 129.609 112.916 130.998C111.735 131.951 110.288 132.288 108.896 132.299C107.504 132.311 106.065 132 104.749 131.547C103.427 131.091 102.169 130.471 101.126 129.808Z" fill="black"/>
<rect x="79.3046" y="162.424" width="31" height="23" transform="rotate(6.07737 79.3046 162.424)" fill="#D9D9D9"/>
<g id="right-leg">
<rect x="81.8165" y="313.735" width="65" height="21" transform="rotate(-100.474 81.8165 313.735)" fill="#5A330F"/>
<rect x="73" y="310" width="23" height="22" fill="black"/>
<ellipse cx="73" cy="330.5" rx="20" ry="5.5" fill="black"/>
</g>
<g id="left-leg">
<rect x="95.7595" y="315.251" width="65" height="21" transform="rotate(-84.6696 95.7595 315.251)" fill="#5A330F"/>
<rect x="97" y="312" width="23" height="22" fill="black"/>
<ellipse cx="121" cy="334.5" rx="20" ry="5.5" fill="black"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M67.7687 176L119.293 184.097L119.354 184.435L168.66 226.775L154.979 242.707L125.179 217.117L134.219 267.83L56.51 268.403L63.5757 210.413L34.0023 237.098L19.934 221.507L67.4478 178.633L67.7687 176Z" fill="#2BA045"/>
<circle class="eyes" cx="79" cy="97" r="9" fill="black"/>
<circle class="eyes" cx="136" cy="103" r="9" fill="black"/>
<path d="M80.5 60.5001C60.1 82.5001 26.3333 91.6667 13.5 93.5C6.5 45.5 50.9 -1.19994 106.5 2.00006C176 6.00006 183 60.5 185.5 68C187.5 74 191.667 72.8334 193.5 71.5C193 74 186.9 78.9 166.5 78.5C146.915 78.116 113.781 49.1285 97.8915 32.95C98.65 36.2792 95.5639 44.2546 80.5 60.5001Z" fill="#5A330F" stroke="#5A330F" stroke-width="3"/>
<line id="flat-mouth" x1="70" y1="148" x2="129" y2="148" stroke="black" stroke-width="4"/>
</svg>
<div id="buttons">
<button id="food" onclick="feed()">Food</button>
<button id="play" onclick="play()">Play</button>
<button id="talk" onclick="recognition.start();">Talk</button>
<button id="learn" onclick="learn()">Learn</button>
</div>
<input type="text" name="" onchange="handleInput(this.value)" placeholder="type something" id="msg-input">
<div id="speech-bubble"></div>
<div id="hungry">hungry</div>
<div id="bored">bored</div>
</body>
</html>