-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
190 lines (181 loc) · 13 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>R0b-E (project3)</title>
<link rel="stylesheet" href="css/robot.css">
<script src="js/robot.js" defer></script>
</head>
<body>
<svg id="robot" width="248" height="271" viewBox="0 0 248 271" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="108" y="102" width="33" height="34" fill="url(#paint0_linear_2_40)"/>
<rect x="68.2326" y="159.411" width="48.7376" height="11.3721" fill="#D9D9D9"/>
<rect x="42.394" y="130.168" width="48.7376" height="11.3721" transform="rotate(46.7102 42.394 130.168)" fill="#D9D9D9"/>
<circle cx="69.0449" cy="163.472" r="10.5598" fill="black"/>
<rect x="34.1163" y="100.926" width="9.74751" height="24.3688" rx="4.87376" fill="#D9D9D9"/>
<rect x="6.76941" y="101.907" width="9.74751" height="34.6452" rx="4.87376" transform="rotate(-37.2992 6.76941 101.907)" fill="#D9D9D9"/>
<rect y="124.568" width="9.74751" height="31.2233" rx="4.87376" transform="rotate(-67.7355 0 124.568)" fill="#D9D9D9"/>
<circle cx="34.9286" cy="130.98" r="10.5598" fill="black"/>
<rect width="48.7375" height="11.3721" transform="matrix(-1 0 0 1 179.737 157.411)" fill="#D9D9D9"/>
<rect width="48.7375" height="11.3721" transform="matrix(-0.685689 0.727895 0.727894 0.685689 205.576 128.168)" fill="#D9D9D9"/>
<ellipse cx="10.5598" cy="10.5598" rx="10.5598" ry="10.5598" transform="matrix(-1 0 0 1 189.485 150.912)" fill="black"/>
<rect width="9.7475" height="24.3688" rx="4.87375" transform="matrix(-1 0 0 1 213.854 98.9255)" fill="#D9D9D9"/>
<rect width="9.7475" height="34.6452" rx="4.87375" transform="matrix(-0.795482 -0.605978 -0.605977 0.795482 241.201 99.9068)" fill="#D9D9D9"/>
<rect width="9.74751" height="31.2233" rx="4.87375" transform="matrix(-0.378882 -0.925445 -0.925445 0.378883 247.97 122.568)" fill="#D9D9D9"/>
<ellipse cx="10.5598" cy="10.5598" rx="10.5598" ry="10.5598" transform="matrix(-1 0 0 1 223.601 118.421)" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.251 31.9948C86.0667 14.2963 55 27.9037 55 54.0051V82.2978C55 105.681 73.9555 124.636 97.3383 124.636H113.53L124.5 105.636L135.47 124.636H152.528C175.433 124.636 194 106.069 194 83.1646V53.0347C194 27.7597 163.662 14.8591 145.458 32.3935C134.531 42.9189 117.294 43.1046 106.143 32.8171L105.251 31.9948Z" fill="#D9D9D9"/>
<g filter="url(#filter0_d_2_40)">
<circle cx="94" cy="67" r="19" fill="url(#paint1_radial_2_40)" shape-rendering="crispEdges"/>
<circle cx="94" cy="67" r="19" stroke="black" stroke-width="5" shape-rendering="crispEdges"/>
</g>
<g filter="url(#filter1_d_2_40)">
<circle cx="155" cy="70" r="19" fill="url(#paint2_radial_2_40)" shape-rendering="crispEdges"/>
<circle cx="155" cy="70" r="19" stroke="black" stroke-width="5" shape-rendering="crispEdges"/>
</g>
<path d="M85.2351 153.01C84.0409 141.785 92.8398 132 104.128 132H143.872C155.16 132 163.959 141.785 162.765 153.01L156.807 209.01C155.78 218.671 147.629 226 137.914 226H110.086C100.371 226 92.2203 218.671 91.1925 209.01L85.2351 153.01Z" fill="#D9D9D9"/>
<circle cx="170" cy="237" r="34" fill="url(#paint3_radial_2_40)"/>
<circle cx="83" cy="237" r="34" fill="url(#paint4_radial_2_40)"/>
<g filter="url(#filter2_d_2_40)">
<rect x="103" y="148" width="42" height="52" rx="6" fill="#11C70D"/>
</g>
<g filter="url(#filter3_d_2_40)">
<ellipse id="mouth" cx="124.5" cy="95.5" rx="13.5" ry="5.5" fill="url(#paint5_linear_2_40)" shape-rendering="crispEdges"/>
<path d="M136.5 95.5C136.5 95.7244 136.395 96.0826 135.898 96.5605C135.398 97.0425 134.595 97.5456 133.48 97.9999C131.257 98.9055 128.083 99.5 124.5 99.5C120.917 99.5 117.743 98.9055 115.52 97.9999C114.405 97.5456 113.602 97.0425 113.102 96.5605C112.605 96.0826 112.5 95.7244 112.5 95.5C112.5 95.2756 112.605 94.9174 113.102 94.4395C113.602 93.9575 114.405 93.4544 115.52 93.0001C117.743 92.0945 120.917 91.5 124.5 91.5C128.083 91.5 131.257 92.0945 133.48 93.0001C134.595 93.4544 135.398 93.9575 135.898 94.4395C136.395 94.9174 136.5 95.2756 136.5 95.5Z" stroke="black" stroke-width="3" shape-rendering="crispEdges"/>
</g>
<rect x="165" y="4" width="3" height="21" fill="#2E2E2E"/>
<ellipse cx="166.5" cy="5" rx="4.5" ry="5" fill="#D9D9D9"/>
<g filter="url(#filter4_d_2_40)">
<circle cx="124" cy="149" r="7" fill="url(#paint6_radial_2_40)"/>
</g>
<defs>
<filter id="filter0_d_2_40" x="64.5" y="41.5" width="59" height="59" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2_40"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0253169 0 0 0 0 0.0247588 0 0 0 0 0.0247588 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_40"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_40" result="shape"/>
</filter>
<filter id="filter1_d_2_40" x="125.5" y="44.5" width="59" height="59" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2_40"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0253169 0 0 0 0 0.0247588 0 0 0 0 0.0247588 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_40"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_40" result="shape"/>
</filter>
<filter id="filter2_d_2_40" x="99" y="148" width="50" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_40"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_40" result="shape"/>
</filter>
<filter id="filter3_d_2_40" x="107" y="90" width="35" height="19" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_40"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_40" result="shape"/>
</filter>
<filter id="filter4_d_2_40" x="110" y="135" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2_40"/>
<feOffset/>
<feGaussianBlur stdDeviation="3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375027 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_40"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_40" result="shape"/>
</filter>
<linearGradient id="paint0_linear_2_40" x1="124.5" y1="102" x2="141" y2="102" gradientUnits="userSpaceOnUse">
<stop offset="0.0520833" stop-color="#131313"/>
<stop offset="0.426983" stop-color="#6E5353"/>
<stop offset="0.614583" stop-color="#FFFDFD"/>
<stop offset="1" stop-color="#6E5353" stop-opacity="0.83"/>
</linearGradient>
<radialGradient id="paint1_radial_2_40" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(94 67) rotate(90) scale(19)">
<stop stop-color="#F314CF"/>
<stop offset="0.364583" stop-color="#0B7BFE" stop-opacity="0.635417"/>
<stop offset="1" stop-color="#BD4CC7" stop-opacity="0.68"/>
</radialGradient>
<radialGradient id="paint2_radial_2_40" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(155 70) rotate(90) scale(19)">
<stop stop-color="#F314CF"/>
<stop offset="0.364583" stop-color="#0B7BFE" stop-opacity="0.635417"/>
<stop offset="1" stop-color="#BD4CC7" stop-opacity="0.68"/>
</radialGradient>
<radialGradient id="paint3_radial_2_40" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(170 237) rotate(90) scale(34)">
<stop offset="0.447917"/>
<stop offset="1" stop-color="#6F6F6F"/>
</radialGradient>
<radialGradient id="paint4_radial_2_40" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(83 237) rotate(90) scale(34)">
<stop offset="0.447917"/>
<stop offset="1" stop-color="#6F6F6F"/>
</radialGradient>
<linearGradient id="paint5_linear_2_40" x1="124.154" y1="93.0938" x2="124.154" y2="101" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF9F0E"/>
<stop offset="0.490625" stop-color="#FC0000" stop-opacity="0.890625"/>
<stop offset="1" stop-color="#F7F393"/>
</linearGradient>
<radialGradient id="paint6_radial_2_40" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124 149) rotate(90) scale(7)">
<stop stop-color="#00FFF0"/>
<stop offset="1" stop-color="white"/>
</radialGradient>
</defs>
</svg>
<svg id="oven" width="208" height="244" viewBox="0 0 208 244" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="3" width="208" height="241" rx="10" fill="#D9D9D9"/>
<rect x="21" y="90" width="165" height="72" fill="url(#paint0_linear_4_20)"/>
<circle cx="34.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="34.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="69.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="69.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="104.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="104.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="139.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="139.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="174.5" cy="43.5" r="13.5" fill="#131313"/>
<circle cx="174.5" cy="43.5" r="13.5" fill="#131313"/>
<rect x="9" y="77" width="187" height="13" fill="#737373"/>
<rect x="31" y="34" width="7" height="18" fill="#636363"/>
<rect x="31" y="34" width="7" height="18" fill="#636363"/>
<rect x="66" y="34" width="7" height="18" fill="#636363"/>
<rect x="66" y="34" width="7" height="18" fill="#636363"/>
<rect x="101" y="34" width="7" height="18" fill="#636363"/>
<rect x="101" y="34" width="7" height="18" fill="#636363"/>
<rect x="136" y="34" width="7" height="18" fill="#636363"/>
<rect x="136" y="34" width="7" height="18" fill="#636363"/>
<rect x="171" y="34" width="7" height="18" fill="#636363"/>
<rect x="171" y="34" width="7" height="18" fill="#636363"/>
<rect x="26" width="72" height="3" fill="#505050"/>
<rect x="106" width="72" height="3" fill="#505050"/>
<rect y="66" width="208" height="3" fill="#9F9F9F"/>
<rect y="173" width="208" height="3" fill="#9F9F9F"/>
<defs>
<linearGradient id="paint0_linear_4_20" x1="90" y1="90" x2="103.5" y2="162" gradientUnits="userSpaceOnUse">
<stop stop-color="#060606" stop-opacity="0.25"/>
<stop offset="1"/>
</linearGradient>
</defs>
</svg>
<div id="move-left">←</div>
<div id="move-right">→</div>
<div id="move-up">↑</div>
<div id="move-down">↓</div>
</body>
</html>