Skip to content

Commit dfee425

Browse files
shengyuanshengyuan
committed
[feat] change images
1 parent a51032d commit dfee425

File tree

6 files changed

+268
-127
lines changed

6 files changed

+268
-127
lines changed

‎css/main.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,3 +470,12 @@ body {
470470
line-height:1.8;
471471
}
472472

473+
.noselect {
474+
-webkit-touch-callout: none; /* iOS Safari */
475+
-webkit-user-select: none; /* Safari */
476+
-khtml-user-select: none; /* Konqueror HTML */
477+
-moz-user-select: none; /* Old versions of Firefox */
478+
-ms-user-select: none; /* Internet Explorer/Edge */
479+
user-select: none; /* Non-prefixed version, currently
480+
supported by Chrome, Edge, Opera and Firefox */
481+
}

‎index.html‎

Lines changed: 11 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
77
<meta name="author" content="oxxo.studio">
88
<meta name="copyright" content="oxxo.studio">
9-
<title>Webduino 遙控器</title>
9+
<title>萬用遙控器</title>
1010

1111
<meta name="description" content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。">
1212
<meta itemprop="description" content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。">
@@ -31,128 +31,12 @@
3131
</svg>
3232
</div>
3333
<div id="s2" class="hide">
34-
<svg viewBox="0 0 73.3 72.2">
35-
<path style="fill:#fff;" d="M56,57.6c0,13.1-8.7,14.6-19.4,14.6c-10.7,0-19.4-1.6-19.4-14.6c0-5.1,1.7-9.8,5.3-13.2
36-
c-7.7-2.8-12.9-8.9-12.9-21C9.6,4.9,21.7,0,36.6,0c14.9,0,27,4.9,27,23.4c0,12.1-5.2,18.2-13,21C54.2,47.8,56,52.5,56,57.6z
37-
M13.5,43c-2.8-1.9-5.8-0.3-8.1,4.4c-3.5,7.1-4.3,11.6,0,12.8c2,0.5,3.5,0.4,4.7-0.3c0,0,0,0,0,0s0.2-0.1,0.4-0.3
38-
c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1-0.1,0.1-0.1c1.9-1.5,2.9-4.4,4-7.3C16.9,46.6,16.3,44.9,13.5,43z M67.6,47.5
39-
c-2.3-4.7-5.2-6.3-8.1-4.4s-3.4,3.6-1.4,9.2c1.1,3,2.1,5.8,4,7.3c0,0,0.1,0.1,0.1,0.1c0.1,0,0.1,0.1,0.2,0.1
40-
c0.3,0.2,0.4,0.3,0.4,0.3s0,0,0,0c1.2,0.6,2.7,0.8,4.7,0.3C71.9,59.1,71.1,54.6,67.6,47.5z" />
41-
</svg>
34+
<img src="./media/control.svg"/>
4235
</div>
43-
<div id="main01" class="panel">
44-
<div id="svgKebbi">
45-
<svg viewBox="0 0 291 275.4">
46-
<path style="fill:#F2F2F2;" d="M224.5,215.2c0,47.1-35.3,52.8-78.9,52.8s-78.9-5.6-78.9-52.8c0-34.3,23.8-65,78.9-65
47-
C199.4,150.1,224.5,180.9,224.5,215.2z" />
48-
<path style="fill:#D3E3E5;" d="M202.9,165.4c0,11.7-25.5,13.1-57.1,13.1s-57.1-1.4-57.1-13.1c0-8.5,17.2-16.2,57.1-16.2
49-
C184.7,149.1,202.9,156.8,202.9,165.4z" />
50-
<path
51-
style="fill:none;stroke:#D1D1D1;stroke-width:1.0512;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
52-
d="
53-
M130,190.9" />
54-
<path
55-
style="fill:none;stroke:#D1D1D1;stroke-width:1.0512;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
56-
d="
57-
M157,190.9" />
58-
<g id="hand-right">
59-
<g>
60-
<path style="fill:#F2F2F2;" d="M62,195.7c-7.2,17.8-13.6,34.9-38.4,29.1c-17.5-4.1-14.2-20.4-0.1-46.1c9.3-17.1,21.3-22.9,32.9-16
61-
S70.2,175.6,62,195.7z" />
62-
<g>
63-
<defs>
64-
<path id="SVGID_21_" d="M62,195.7c-7.2,17.8-13.6,34.9-38.4,29.1c-17.5-4.1-14.2-20.4-0.1-46.1c9.3-17.1,21.3-22.9,32.9-16
65-
S70.2,175.6,62,195.7z" />
66-
</defs>
67-
<clipPath id="SVGID_2_">
68-
<use xlink:href="#SVGID_21_" style="overflow:visible;" />
69-
</clipPath>
70-
</g>
71-
<path style="fill:#D1D1D1;" d="M33.3,186.5c-0.1,0-0.1,0-0.2,0l-10.7-3.9c-0.3-0.1-0.4-0.4-0.3-0.7s0.4-0.4,0.7-0.3l10.7,3.9
72-
c0.3,0.1,0.4,0.4,0.3,0.7C33.7,186.4,33.5,186.5,33.3,186.5z" />
73-
</g>
74-
<path style="fill:#A9E0ED;"
75-
d="M55,211.1c3.1-6.7-12.9-6.7-17.7,1.5s5.6,11.4,5.6,11.4S50.6,220.3,55,211.1z" />
76-
</g>
77-
<g id="hand-left">
78-
<g>
79-
<path style="fill:#F2F2F2;" d="M228.5,195.7c7.2,17.8,13.6,34.9,38.4,29.1c17.5-4.1,14.2-20.4,0.1-46.1
80-
c-9.3-17.1-21.3-22.9-32.9-16S220.4,175.6,228.5,195.7z" />
81-
<g>
82-
<defs>
83-
<path id="SVGID_1_" d="M228.5,195.7c7.2,17.8,13.6,34.9,38.4,29.1c17.5-4.1,14.2-20.4,0.1-46.1c-9.3-17.1-21.3-22.9-32.9-16
84-
S220.4,175.6,228.5,195.7z" />
85-
</defs>
86-
<clipPath id="SVGID_3_">
87-
<use xlink:href="#SVGID_1_" style="overflow:visible;" />
88-
</clipPath>
89-
</g>
90-
<path style="fill:#D1D1D1;" d="M257.2,186.5c0.1,0,0.1,0,0.2,0l10.7-3.9c0.3-0.1,0.4-0.4,0.3-0.7s-0.4-0.4-0.7-0.3l-10.7,3.9
91-
c-0.3,0.1-0.4,0.4-0.3,0.7C256.8,186.4,257,186.5,257.2,186.5z" />
92-
</g>
93-
<path style="fill:#A9E0ED;"
94-
d="M235.6,211.1c-3.1-6.7,12.9-6.7,17.7,1.5c4.8,8.1-5.6,11.4-5.6,11.4S239.9,220.3,235.6,211.1z" />
95-
</g>
96-
<path
97-
style="fill:none;stroke:#D1D1D1;stroke-width:1.1194;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
98-
d="
99-
M72.6,177.6" />
100-
<g>
101-
<path style="fill:#D1D1D1;"
102-
d="M145.6,199.9c-7.5,0-13.7-5.9-14-13.4c0-0.3,0.2-0.5,0.5-0.5c0.3,0,0.5,0.2,0.5,0.5
103-
c0.3,7,6,12.4,13,12.4s12.7-5.5,13-12.4c0-0.3,0.2-0.5,0.5-0.5c0.3,0,0.5,0.3,0.5,0.5C159.3,194,153.1,199.9,145.6,199.9z" />
104-
<circle style="opacity:0.6;fill:#00B5E2;" cx="145.6" cy="185.9" r="5" />
105-
<path style="fill:#D1D1D1;" d="M132.1,186.7C132.1,186.7,132.1,186.7,132.1,186.7c-7.6-0.7-14.8-1.9-20.7-3.6
106-
c-0.3-0.1-0.4-0.4-0.4-0.7c0.1-0.3,0.4-0.4,0.7-0.4c5.9,1.7,12.9,2.9,20.5,3.6c0.3,0,0.5,0.3,0.5,0.6
107-
C132.6,186.5,132.4,186.7,132.1,186.7z" />
108-
<path style="fill:#D1D1D1;"
109-
d="M159.1,186.7c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.6c7.5-0.7,14.6-1.9,20.5-3.6
110-
c0.3-0.1,0.6,0.1,0.7,0.4s-0.1,0.6-0.4,0.7C173.8,184.8,166.7,186.1,159.1,186.7C159.1,186.7,159.1,186.7,159.1,186.7z" />
111-
</g>
112-
<path style="fill:#F2F2F2;" d="M197.3,152.1" />
113-
<g>
114-
<path style="fill:#F2F2F2;" d="M255.5,91.9c0,66.8-49.2,82.9-109.9,82.9S35.7,158.7,35.7,91.9S84.9,7.4,145.6,7.4
115-
S255.5,25.2,255.5,91.9z" />
116-
</g>
117-
<path style="fill:#2B2B2B;" d="M250.3,91.9c0,63.6-46.9,78.9-104.6,78.9S41,155.4,41,91.9s46.9-80.5,104.6-80.5
118-
S250.3,28.3,250.3,91.9z" />
119-
<path style="fill:#2B2B2B;" d="M232.3,91.8c0,52.7-38.8,65.4-86.7,65.4s-86.7-12.7-86.7-65.4s38.8-66.7,86.7-66.7
120-
S232.3,39.1,232.3,91.8z" />
121-
<g>
122-
<path style="fill:#F2F2F2;"
123-
d="M252.8,85.6c0,0-15.5-4.5-29.8,15c-12.1,16.5-7.9,59.1-7.9,59.1S256.1,151.6,252.8,85.6z" />
124-
<path style="fill:#F2F2F2;"
125-
d="M38.4,85.6c0,0,15.5-4.5,29.8,15c12.1,16.5,7.9,59.1,7.9,59.1S35.1,151.6,38.4,85.6z" />
126-
</g>
127-
<g id="face-01">
128-
<g>
129-
<path id="XMLID_44_" style="fill:#00B5E2;" d="M113.8,103.7L113.8,103.7c-7.4,0-13.4-6-13.4-13.4V80c0-7.4,6-13.4,13.4-13.4h0
130-
c7.4,0,13.4,6,13.4,13.4v10.3C127.2,97.7,121.2,103.7,113.8,103.7z" />
131-
<path id="XMLID_40_" style="fill:#00B5E2;" d="M177.4,103.7L177.4,103.7c-7.4,0-13.4-6-13.4-13.4V80c0-7.4,6-13.4,13.4-13.4h0
132-
c7.4,0,13.4,6,13.4,13.4v10.3C190.8,97.7,184.8,103.7,177.4,103.7z" />
133-
</g>
134-
<path style="fill:#00B5E2;" d="M143.7,122.7c-4.4,0-7.5-0.7-7.8-0.7c-2-0.4-3.2-2.4-2.8-4.4c0.4-2,2.4-3.2,4.4-2.8l0,0
135-
c0.2,0,15.3,3.1,23.9-5.9c1.4-1.5,3.7-1.5,5.2-0.1c1.5,1.4,1.5,3.7,0.1,5.2C159.7,121.2,150.3,122.7,143.7,122.7z" />
136-
</g>
137-
<g id="face-02">
138-
<g>
139-
<path style="fill:#00B5E2;" d="M122.4,79.1c-7.6,0-13.7-6.1-13.7-13.7v-7.8c0-7.6,6.1-13.7,13.7-13.7c7.6,0,13.7,6.1,13.7,13.7
140-
v7.8C136.1,73,130,79.1,122.4,79.1z M122.4,50.9c-3.7,0-6.7,3-6.7,6.7v7.8c0,3.7,3,6.7,6.7,6.7c3.7,0,6.7-3,6.7-6.7v-7.8
141-
C129.1,53.9,126.1,50.9,122.4,50.9z" />
142-
<path style="fill:#00B5E2;" d="M170.8,79.1c-7.6,0-13.7-6.1-13.7-13.7v-7.8c0-7.6,6.1-13.7,13.7-13.7c7.6,0,13.7,6.1,13.7,13.7
143-
v7.8C184.5,73,178.3,79.1,170.8,79.1z M170.8,50.9c-3.7,0-6.7,3-6.7,6.7v7.8c0,3.7,3,6.7,6.7,6.7h0c3.7,0,6.7-3,6.7-6.7v-7.8
144-
C177.5,53.9,174.5,50.9,170.8,50.9z" />
145-
</g>
146-
<path style="fill:#00B5E2;" d="M136.2,139.2c-3.6,0-7.4-0.8-10.9-3.5c-6.8-5.2-10.2-15.5-10.2-31.6c0-8,2-13.4,6-16.4
147-
c6-4.6,14.6-2.1,20.8-0.4c2.2,0.6,4.4,1.3,5.5,1.3v7c-2.1,0-4.5-0.7-7.4-1.5c-5.1-1.4-11.4-3.2-14.6-0.8c-2.7,2-3.2,7-3.2,10.9
148-
c0,13.4,2.6,22.4,7.4,26.1c4.6,3.5,10.8,1.7,14.5,0.7c1.5-0.4,2.4-0.7,3.4-0.7v7c0.1,0,0.1,0,0.2,0c-0.2,0-1,0.3-1.6,0.4
149-
C143.6,138.2,140.1,139.2,136.2,139.2z" />
150-
<path style="fill:#00B5E2;" d="M158.5,139.2c-3.9,0-7.5-1-9.7-1.6c-0.6-0.2-1.4-0.4-1.6-0.4c0.1,0,0.1,0,0.2,0v-7
151-
c0.9,0,1.9,0.3,3.4,0.7c3.7,1,9.9,2.8,14.5-0.7c4.8-3.7,7.4-12.7,7.4-26.1c0-3.8-0.6-8.8-3.2-10.9c-3.3-2.5-9.6-0.7-14.6,0.8
152-
c-2.9,0.8-5.4,1.5-7.4,1.5v-7c1.1,0,3.3-0.6,5.5-1.3c6.2-1.8,14.7-4.2,20.8,0.4c4.1,3.1,6,8.4,6,16.4c0,16.1-3.3,26.5-10.2,31.6
153-
C166,138.4,162.1,139.2,158.5,139.2z" />
154-
</g>
155-
</svg>
36+
<div id="main01" class="panel noselect">
37+
<div id="svgKebbi" class="noselect">
38+
<img id="face-01" src="./media/aicar1.svg"/>
39+
<img id="face-02" src="./media/aicar2.svg"/>
15640
</div>
15741
<div class="circle">
15842
<svg viewBox="0 0 47.9 46.6" style="width:80%; fill:#fff; display:block; margin:10% auto;">
@@ -516,23 +400,23 @@ <h3>廣播頻道</h3>
516400
<h3>怪獸廣播訊息</h3>
517401
<table>
518402
<tr>
519-
<th>Kebbi 中間</th>
403+
<th>小車中間</th>
520404
<td><input m="kebbiReset"></td>
521405
</tr>
522406
<tr>
523-
<th>Kebbi 往上</th>
407+
<th>小車往上</th>
524408
<td><input m="kebbiTop"></td>
525409
</tr>
526410
<tr>
527-
<th>Kebbi 往下</th>
411+
<th>小車往下</th>
528412
<td><input m="kebbiBottom"></td>
529413
</tr>
530414
<tr>
531-
<th>Kebbi 往左</th>
415+
<th>小車往左</th>
532416
<td><input m="kebbiLeft"></td>
533417
</tr>
534418
<tr>
535-
<th>Kebbi 往右</th>
419+
<th>小車往右</th>
536420
<td><input m="kebbiRight"></td>
537421
</tr>
538422
<tr>

‎js/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,7 @@
297297
}
298298
};
299299
const target = function (evt) {
300+
evt.preventDefault();
300301
kebbi.classList.remove('reset');
301302
let touches = evt.changedTouches;
302303
if (touches) {

0 commit comments

Comments
 (0)