index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="oxxo.studio">
  <meta name="copyright" content="oxxo.studio">
  <title>Webduino 遙控器</title>

  <meta name="description" content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。">
  <meta itemprop="description" content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。">
  <meta itemprop="image" content="https://www.oxxostudio.tw/webduino-remote/media/snapshot.jpg">
  <meta property="og:description" content="這是針對 Webduino 所設計的萬用遙控器，可以透過虛擬機器人搖桿或十顆按鈕發送網路廣播訊號，輕鬆串連物聯網的各種生活體驗。">
  <meta property="og:title" content="Webduino 遙控器">
  <meta property="og:url" content="https://www.oxxostudio.tw/webduino-remote/index.html">
  <meta property="og:image" content="https://www.oxxostudio.tw/webduino-remote/media/snapshot.jpg">
  <link rel="canonical" href="https://www.oxxostudio.tw/webduino-remote/index.html">

  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="content loading">
    <div id="menu"></div>
    <div id="s1">
      <svg viewBox="0 0 73.3 72.2">
        <path style="fill:#fff;" d="M18.8,19.1H2.5V2.9h16.2V19.1z M44.6,2.9H28.4v16.2h16.2V2.9z M70.5,2.9H54.2v16.2h16.2V2.9z M18.8,27.9H2.5v16.2h16.2V27.9
	z M44.6,27.9H28.4v16.2h16.2V27.9z M70.5,27.9H54.2v16.2h16.2V27.9z M18.8,52.9H2.5v16.2h16.2V52.9z M44.6,52.9H28.4v16.2h16.2V52.9
	z M70.5,52.9H54.2v16.2h16.2V52.9z" />
      </svg>
    </div>
    <div id="s2" class="hide">
      <svg viewBox="0 0 73.3 72.2">
        <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
     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
      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
     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
     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
     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" />
      </svg>
    </div>
    <div id="main01" class="panel">
      <div id="svgKebbi">
        <svg viewBox="0 0 291 275.4">
          <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
	C199.4,150.1,224.5,180.9,224.5,215.2z" />
          <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
	C184.7,149.1,202.9,156.8,202.9,165.4z" />
          <path
            style="fill:none;stroke:#D1D1D1;stroke-width:1.0512;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
            d="
	M130,190.9" />
          <path
            style="fill:none;stroke:#D1D1D1;stroke-width:1.0512;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
            d="
	M157,190.9" />
          <g id="hand-right">
            <g>
              <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
			S70.2,175.6,62,195.7z" />
              <g>
                <defs>
                  <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
					S70.2,175.6,62,195.7z" />
                </defs>
                <clipPath id="SVGID_2_">
                  <use xlink:href="#SVGID_21_" style="overflow:visible;" />
                </clipPath>
              </g>
              <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
			c0.3,0.1,0.4,0.4,0.3,0.7C33.7,186.4,33.5,186.5,33.3,186.5z" />
            </g>
            <path style="fill:#A9E0ED;"
              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" />
          </g>
          <g id="hand-left">
            <g>
              <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
			c-9.3-17.1-21.3-22.9-32.9-16S220.4,175.6,228.5,195.7z" />
              <g>
                <defs>
                  <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
					S220.4,175.6,228.5,195.7z" />
                </defs>
                <clipPath id="SVGID_3_">
                  <use xlink:href="#SVGID_1_" style="overflow:visible;" />
                </clipPath>
              </g>
              <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
			c-0.3,0.1-0.4,0.4-0.3,0.7C256.8,186.4,257,186.5,257.2,186.5z" />
            </g>
            <path style="fill:#A9E0ED;"
              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" />
          </g>
          <path
            style="fill:none;stroke:#D1D1D1;stroke-width:1.1194;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"
            d="
	M72.6,177.6" />
          <g>
            <path style="fill:#D1D1D1;"
              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
		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" />
            <circle style="opacity:0.6;fill:#00B5E2;" cx="145.6" cy="185.9" r="5" />
            <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
		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
		C132.6,186.5,132.4,186.7,132.1,186.7z" />
            <path style="fill:#D1D1D1;"
              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
		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" />
          </g>
          <path style="fill:#F2F2F2;" d="M197.3,152.1" />
          <g>
            <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
		S255.5,25.2,255.5,91.9z" />
          </g>
          <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
	S250.3,28.3,250.3,91.9z" />
          <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
	S232.3,39.1,232.3,91.8z" />
          <g>
            <path style="fill:#F2F2F2;"
              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" />
            <path style="fill:#F2F2F2;"
              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" />
          </g>
          <g id="face-01">
            <g>
              <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
			c7.4,0,13.4,6,13.4,13.4v10.3C127.2,97.7,121.2,103.7,113.8,103.7z" />
              <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
			c7.4,0,13.4,6,13.4,13.4v10.3C190.8,97.7,184.8,103.7,177.4,103.7z" />
            </g>
            <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
		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" />
          </g>
          <g id="face-02">
            <g>
              <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
                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
                C129.1,53.9,126.1,50.9,122.4,50.9z" />
              <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
                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
                C177.5,53.9,174.5,50.9,170.8,50.9z" />
            </g>
            <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
              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
              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
              C143.6,138.2,140.1,139.2,136.2,139.2z" />
            <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
              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
              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
              C166,138.4,162.1,139.2,158.5,139.2z" />
          </g>
        </svg>
      </div>
      <div class="circle">
        <svg viewBox="0 0 47.9 46.6" style="width:80%; fill:#fff; display:block; margin:10% auto;">
          <path d="M36.7,8l8.9,21.8h-6l-6-14.7l-4.1,10l-1.9,4.7h-1.7h-0.3h-0.2l-6-14.7l-4.1,10l-1.9,4.7h-1.8h-0.2h-0.2L2.3,8h6l6,14.7
         l4.1-10l0,0l0.2-0.4L20.3,8h1.5h0.5h0.2l6.1,15l-0.1-0.3l4.1-10v0L34.5,8H36h0.5H36.7z M33.6,22.7l-2.8,7.1h5.6L33.6,22.7z
          M7.4,36.4L6.6,33H5.1l-0.8,3.5L3.8,33H2.3l1.1,6.2H5l0.9-3.9l0.9,3.9h1.5L9.4,33H7.9L7.4,36.4z M11.5,36.6h2.4v-1.3h-2.4v-1h2.6
         V33H9.9v6.2h4.3v-1.4h-2.7V36.6z M19.4,36.4c0.2,0.3,0.3,0.6,0.3,1c0,0.3-0.1,0.6-0.2,0.9c-0.1,0.3-0.3,0.5-0.5,0.6
         c-0.1,0.1-0.3,0.2-0.6,0.2c-0.4,0.1-0.6,0.1-0.7,0.1H15V33h2.9c0.5,0,0.9,0.1,1.1,0.4c0.3,0.3,0.4,0.7,0.4,1.1
         c0,0.4-0.1,0.7-0.3,0.9c-0.1,0.2-0.3,0.3-0.5,0.4C19,36,19.3,36.2,19.4,36.4z M16.6,35.4h0.7c0.2,0,0.4-0.1,0.5-0.2
         c0.1-0.1,0.1-0.3,0.1-0.4c0-0.2,0-0.3-0.1-0.4c-0.1-0.1-0.3-0.2-0.5-0.2h-0.7V35.4z M18.1,37.2c0-0.2-0.1-0.3-0.2-0.4
         c-0.1-0.1-0.3-0.2-0.6-0.2h-0.8v1.3h0.8c0.3,0,0.5-0.1,0.6-0.2C18.1,37.6,18.1,37.4,18.1,37.2z M25.1,34.9c0.1,0.4,0.1,0.8,0.1,1.2
         c0,0.7-0.1,1.2-0.2,1.5c-0.1,0.4-0.3,0.7-0.5,0.9c-0.2,0.2-0.5,0.4-0.7,0.5c-0.3,0.1-0.7,0.2-0.9,0.2h-2.3V33h2.3
         c0.5,0,0.8,0.1,1.1,0.2c0.3,0.2,0.5,0.4,0.7,0.7C24.8,34.2,25,34.5,25.1,34.9z M23.6,36.1c0-0.7-0.1-1.1-0.3-1.3
         c-0.2-0.2-0.5-0.4-0.9-0.4h-0.4v3.4h0.4c0.3,0,0.6,0,0.7-0.1c0.1-0.1,0.2-0.2,0.3-0.5C23.6,37,23.6,36.6,23.6,36.1z M29.3,36.8
         c0,0.3-0.1,0.6-0.2,0.8c-0.2,0.2-0.4,0.3-0.6,0.3c-0.3,0-0.5-0.1-0.6-0.3c-0.2-0.2-0.2-0.5-0.2-0.8V33H26v3.7c0,0.3,0,0.7,0.1,1
         c0.1,0.2,0.2,0.5,0.3,0.7c0.2,0.2,0.3,0.4,0.5,0.5c0.2,0.1,0.4,0.2,0.7,0.3c0.3,0,0.6,0.1,0.8,0.1c0.4,0,0.8-0.1,1.1-0.2
         c0.2-0.1,0.4-0.3,0.6-0.5c0.2-0.2,0.3-0.5,0.4-0.9c0.1-0.3,0.1-0.7,0.1-1V33h-1.6V36.8z M32,39.2h1.6V33H32V39.2z M38,36.4L36.1,33
         h-1.5v6.2h1.5v-3.4l1.9,3.4h1.5V33H38V36.4z M44.9,33.7c0.5,0.6,0.7,1.3,0.7,2.3c0,0.7-0.1,1.3-0.3,1.8c-0.2,0.5-0.5,0.8-0.9,1.1
         c-0.4,0.3-0.8,0.4-1.4,0.4c-0.6,0-1-0.1-1.4-0.3c-0.4-0.2-0.7-0.6-0.9-1.1c-0.2-0.5-0.3-1.1-0.3-1.8c0-1,0.2-1.8,0.7-2.4
         c0.5-0.6,1.1-0.8,1.9-0.8C43.8,32.9,44.5,33.2,44.9,33.7z M44,36c0-0.6-0.1-1-0.3-1.3c-0.2-0.3-0.5-0.4-0.8-0.4
         c-0.3,0-0.6,0.1-0.8,0.4c-0.2,0.3-0.3,0.7-0.3,1.4c0,0.6,0.1,1.1,0.3,1.3c0.2,0.3,0.4,0.4,0.8,0.4c0.3,0,0.6-0.1,0.8-0.4
         C43.9,37.2,44,36.7,44,36z M41.6,8.1h-0.7v4h0.7V8.1z M42.6,11.6c-0.3-0.4-0.5-0.9-0.5-1.5c0-0.4,0.1-0.7,0.2-1
         c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.2,0.3-0.3,0.5-0.4C43.3,8.1,43.6,8,43.9,8c0.5,0,0.9,0.2,1.3,0.5c0.3,0.4,0.5,0.9,0.5,1.5
         c0,0.6-0.2,1.2-0.5,1.5c-0.3,0.4-0.7,0.5-1.3,0.5C43.4,12.2,42.9,12,42.6,11.6z M42.9,10.1c0,0.5,0.1,0.8,0.3,1
         c0.2,0.2,0.4,0.4,0.7,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.6,0.3-1c0-0.5-0.1-0.8-0.3-1c-0.2-0.2-0.4-0.3-0.7-0.3
         c-0.3,0-0.5,0.1-0.7,0.3C43,9.3,42.9,9.6,42.9,10.1z" />
        </svg>
      </div>
      <footer>
        <div id="svgGreen" class="monster-btn">
          <svg viewBox="0 0 249.6 251.4">
            <path style="fill:#AFC62A;" d="M144.8,217.7c0,0-3.7,6.4,2,9.3c5.7,3,19,3.2,12.6,10.7c-6.4,7.6-8,1.6-8,1.6
	s5.6,11.3-8,9.9c-13.6-1.4-9.8-10.5-9.8-10.5l2-9.6l-1.9-9.3" />
            <g>
              <path style="fill:#B4D62B;" d="M99.4,218.7c0,0,5,7.5,0,10.9c-5,3.3-14.9,6.7-7.1,11.6c7.8,5,8.2,0,8.2,0s-3.2,10,9.8,6.7
		c13.1-3.3,7.3-10,7.3-10l-7.2-8.3v-10.9" />
            </g>
            <g>
              <path style="fill:#3F3F3F;" d="M218,120.6c0,0,14.3-1.3,2,8.4C218.3,130.3,218,120.6,218,120.6z" />
              <path style="fill:#3F3F3F;" d="M212,112.9c0,0,12.1-7.3,5.3,6.8L212,112.9z" />
              <path style="fill:#3F3F3F;" d="M202.1,113.9c0,0-1.4-14,8.4-1.9L202.1,113.9z" />
              <path style="fill:#B4D62B;" d="M159,161.3c16.7,11.4,84.4-23.2,53.9-47.6c-11.9-9.5-18.3,14.6-20.2,20.9
		c-5.2,17.1-26,27.2-35.2,20.8C148.4,148.9,157.2,160,159,161.3z" />
              <path style="fill:#A9BF2B;" d="M213.6,136.6c-0.6,1.7-2.1,2.7-3.2,2.3c-1.1-0.4-1.5-2.1-0.8-3.8c0.6-1.7,2.1-2.7,3.2-2.3
		C213.9,133.2,214.3,134.9,213.6,136.6z" />
              <path style="fill:#A9BF2B;" d="M203.7,139.7c-0.3,0.7-0.9,1.1-1.3,0.9c-0.5-0.2-0.6-0.9-0.3-1.6c0.3-0.7,0.9-1.1,1.3-0.9
		C203.8,138.3,204,139,203.7,139.7z" />
            </g>
            <g>
              <path style="fill:#3F3F3F;" d="M26,141.3c0,0-17.4-1.8-0.5-10.4C27.9,129.7,26,141.3,26,141.3z" />
              <path style="fill:#3F3F3F;" d="M24.9,130.9c0,0-12-12.2,6.5-8.2L24.9,130.9z" />
              <path style="fill:#3F3F3F;" d="M31.2,122.3c0,0,1.2-17.1,10.4-0.6L31.2,122.3z" />
              <path style="fill:#B4D62B;" d="M89.9,161.7c0,0-81.7-7.2-63.3-34.1c14.3-21,23.5,4.6,28.1,11.2c5.9,8.3,36.2,24.9,46,15.6
		C110.6,145,89.9,161.7,89.9,161.7z" />
              <path style="fill:#A9BF2B;" d="M52.3,150.3c-1-0.7-2.1-0.7-2.5,0c-0.4,0.6,0,1.7,1,2.3c1,0.7,2.1,0.7,2.5,0
		C53.7,152,53.2,150.9,52.3,150.3z" />
              <path style="fill:#A9BF2B;" d="M42.3,141.2c-1.8-1.2-4-1.3-4.8-0.1c-0.8,1.2,0,3.2,1.8,4.4c1.8,1.2,4,1.3,4.8,0.1
		C44.9,144.4,44.1,142.4,42.3,141.2z" />
              <path style="fill:#A9BF2B;" d="M40.5,149.2c0.6-0.8,2-0.8,3.3,0.1c1.2,0.8,1.8,2.2,1.3,3c-0.1,0.1-0.2,0.2-0.3,0.3
		c-1.4-0.5-2.8-1-4.1-1.5C40.2,150.4,40.2,149.7,40.5,149.2z" />
            </g>
            <g>
              <g id="角2_1_">
                <path style="fill:#EAE4C7;" d="M65,65.4c0,0-49-53.3,17.2-22.4L65,65.4z" />
                <path style="fill:#D8D2BA;"
                  d="M62.8,35.1c0,0,20.7,13.7,13.5,23.1c-4.5,5.9,10.1-10.7,6.9-13.7C79.3,40.6,62.8,35.1,62.8,35.1z" />
              </g>
              <g>
                <path style="fill:#EAE4C7;" d="M172.3,44.2c0,0,63-34.2,17.3,21.9L172.3,44.2z" />
                <path style="fill:#D8D2BA;" d="M205.2,42.3c0,0-24.5,24.8-31.1,14.9c-4.1-6.2,3.1,11.2,7.4,11.8C192.3,70.7,205.2,42.3,205.2,42.3
			z" />
              </g>
              <g>
                <path style="fill:#B4D62B;" d="M84.2,144.8c-28.6-5-31.6-40.2-29.6-55.1c5.6-42.6,27.7-62.6,79.1-62.6c43.2,0,61.9,37.1,61.9,64.4
			c0,34.3-12.5,52-32.9,53.8c0,0,13.5,50.2-2.3,66.8s-63.2,19.1-78.2-10c-3.6-7.1-5.4-14.1-6-20.7C74.5,160.9,84.2,144.8,84.2,144.8
			z" />
                <path style="opacity:0.5;fill:#ABC12B;" d="M191.8,69.1c0,0,16.6,67-47.9,76c0,0,25.9,40.7,4,74.2c0,0,33.7-4.2,14.6-74.5
			c0,0,34.9,1.6,33.1-56.3C195.5,82.8,193.1,76.1,191.8,69.1z" />
                <path style="fill:#A9BF2B;" d="M152.7,200.7c0,5.1-4.8,8.3-8.1,8.3s-6.1-4.1-6.1-9.2c0-5.1,2.7-9.2,6.1-9.2
			S152.7,195.6,152.7,200.7z" />
                <path style="fill:#A9BF2B;" d="M155,175.2c0,4.4-3.9,8.2-5.8,8.2c-2,0-3.6-3.5-3.6-7.9s1.6-7.9,3.6-7.9
			C151.1,167.6,155,170.9,155,175.2z" />
                <path style="fill:#A9BF2B;" d="M161.9,188.8c0,3-3.4,5.4-4.7,5.4c-1.3,0-2.3-2.4-2.3-5.4c0-3,1-5.4,2.3-5.4
			C158.5,183.4,161.9,185.8,161.9,188.8z" />
              </g>
              <g>
                <path style="fill:#EAE4C7;"
                  d="M111,32.5c-0.6-2.1,11.6-69,30.9-2.4c0,0,0,4.8-14.4,6.7C118.7,38,111.5,34.6,111,32.5z" />
                <path style="fill:#D8D2BA;"
                  d="M128.6,36.6c0,0,13.2-1,13.2-6.5c0-11-11.6-26.4-11.6-26.4c0-0.1,12.5,28.1-5.4,33.3L128.6,36.6z" />
              </g>
            </g>
            <g>
              <g>
                <path style="fill:#BA5A73;" d="M88.9,92.4c0,0,30.6,22.3,68.3,0c16.2-9.6,15.8,8,12.9,14.2c-5.9,12.4-14.6,26.4-36.7,28.7
			c-16.3,1.7-34-4.4-42.7-14C72.2,101,81.9,88.2,88.9,92.4z" />
                <path style="fill:#FFFFFF;"
                  d="M165.3,93.6c-1.7-2.2-3.5-2.8-4.6-3c-1.1,0.4-2.3,1-3.6,1.8c-30.2,17.8-55.8,7.1-64.8,2.1
			c-0.1,0-0.2-0.1-0.3-0.1c0,0-7.8,8.8-4.7,11.7c3,2.9,4.5-3.3,4.5-3.3s-0.2,3.3,0.3,4.1c0.5,0.8,2.5,1.3,2.5-2.4
			c0,0,41.7,16.3,60-3.1c0,0,0.5-0.3,1.9,1.8c1.4,2.1,3.9,3.6,3.5-2.2c0,0,0.7-4.2,2.9,0C165.1,105.3,171,100.6,165.3,93.6z" />
                <path style="fill:#F792B7;" d="M105.7,131.3c4.7-5.6,34.3-13.6,46-1.9c0,0-6.6,5.3-21.6,6.2C115.1,136.4,105.7,131.3,105.7,131.3z
			" />
              </g>
              <g>
                <path style="fill:#A3B72A;" d="M175.9,76.5c0,11.6-8.4,6.2-18.9,6.2c-10.6,0-19.3,5.4-19.3-6.2c0-11.6,8.6-21,19.1-21
			C167.3,55.5,175.9,64.9,175.9,76.5z" />
                <path style="fill:#FFFFFF;" d="M175.9,74.8c0,10.6-7.8,4.4-18.4,4.4c-10.6,0-19.9,6.2-19.9-4.4c0-10.6,8.6-19.1,19.1-19.1
			C167.3,55.6,175.9,64.2,175.9,74.8z" />
                <g>
                  <path style="fill:#424141;" d="M156.3,68.7c3.4,0.2,6.4-2.3,6.7-5.6c0.3-3.3-2.2-6.2-5.5-6.4c-3.4-0.2-6.4,2.3-6.7,5.6
				C150.4,65.6,152.9,68.5,156.3,68.7z" />
                  <path style="fill:#FFFFFF;" d="M152.9,65.5c0.8,0.1,1.4-0.5,1.5-1.3c0.1-0.8-0.5-1.4-1.2-1.5c-0.8-0.1-1.4,0.5-1.5,1.3
				C151.6,64.8,152.2,65.4,152.9,65.5z" />
                </g>
              </g>
              <g>
                <path style="fill:#A3B72A;" d="M117.2,76.5c0,11.6-8.4,6.2-18.9,6.2c-10.6,0-19.3,5.4-19.3-6.2c0-11.6,8.6-21,19.1-21
			C108.6,55.5,117.2,64.9,117.2,76.5z" />
                <path style="fill:#FFFFFF;" d="M117.2,74.8c0,10.6-7.8,4.4-18.4,4.4c-10.6,0-19.9,6.2-19.9-4.4c0-10.6,8.6-19.1,19.1-19.1
			C108.6,55.6,117.2,64.2,117.2,74.8z" />
                <g>
                  <path style="fill:#424141;" d="M97.5,68.7c3.4,0.2,6.4-2.3,6.7-5.6c0.3-3.3-2.2-6.2-5.5-6.4c-3.4-0.2-6.4,2.3-6.7,5.6
				C91.7,65.6,94.2,68.5,97.5,68.7z" />
                  <path style="fill:#FFFFFF;" d="M94.2,65.5c0.8,0.1,1.4-0.5,1.5-1.3c0.1-0.8-0.5-1.4-1.2-1.5C93.7,62.7,93,63.3,93,64
				C92.9,64.8,93.5,65.4,94.2,65.5z" />
                </g>
              </g>
            </g>
          </svg>
        </div>
        <div id="svgRed" class="monster-btn">
          <svg viewBox="0 0 249.6 251.4">
            <path style="fill:#ED70A8;" d="M238.5,109.7c0,0-6.5-15.1-13.3-6.9c-2.2,2.6-3,4.5-3.2,6c-1.7-3-4.6-6.3-8.4-3.5
	c-4.2,3-7,7.3-5.4,10.4c-1.8-0.5-3.7-0.5-5.5,0.6c-5.1,3.2-4.3,11.3,5.2,13.9c0,0-12.3,13-22,7.5l-0.8,10.5
	C196.7,147.5,246.5,136.6,238.5,109.7z" />
            <path style="fill:#ED70A8;" d="M46.7,145c9.5-2.5,10.3-10.6,5.3-13.8c-1.7-1.1-3.7-1.1-5.5-0.6
	c1.6-3.1-1.2-7.4-5.4-10.4c-3.8-2.8-6.8,0.5-8.5,3.5c-0.2-1.5-1-3.4-3.2-6c-6.8-8.2-13.4,6.8-13.4,6.8
	c-8.3,26.8,29.5,40.2,52.4,37.2l0.2-8.9C58.9,158.1,46.7,145,46.7,145z" />
            <g>
              <path style="fill:#DD66A2;" d="M199.2,220.5c0,0,16.1,1.2,8.5,12.5c-6.6,9.8-14,0.6-14,0.6s11.5,7.5-2.9,10
		c-14.4,2.5-9.9-12.1-9.9-12.1" />
              <path style="fill:#ED70A8;" d="M71.1,239.4c0,0,3.7,14.9-10.6,11.6c-14.3-3.3-2.4-10.2-2.4-10.2s-2.6,10.4-12.4,3.7
		c-9.8-6.7,6.7-15.3,6.7-15.3" />
              <g>
                <g>
                  <path style="fill:#EAE4C7;" d="M174.8,70.8c55.1-4.9-8.3-70.8-8.3-70.8c26.9,63.6-8.3,44.1-8.3,44.1" />
                  <path style="fill:#D8D1B6;"
                    d="M171.6,12.9c0,0,21.1,41.9,4.1,46.3l-6.4-11.6C169.3,47.5,184.8,47.5,171.6,12.9z" />
                </g>
                <g>
                  <g>
                    <path style="fill:#ED70A8;" d="M52.1,147.4c14.3-17.3,4.1-44.5,3.5-59.3c-1-23.5,11-63,70.3-62.7c49.5,0.2,60.7,55.2,69.5,93.8
					c0,0,21.2,46.9,8.9,88.8S72.9,254.3,48.9,231C24.9,207.6,26.2,178.7,52.1,147.4z" />
                    <path style="fill:#DD66A2;"
                      d="M114.5,245c0,0,82.8-0.3,92.2-38.8c10-40.8-9-81.9-9-81.9S218.6,228.8,114.5,245z" />
                  </g>
                  <path style="fill:#D8669F;" d="M78.1,208.2c1.2,4.5-4.1,9.8-11.8,11.8c-7.7,2-14.9-0.1-16-4.6c-1.2-4.5,1.9-13.6,9.6-15.6
				C67.6,197.8,77,203.7,78.1,208.2z" />
                  <path style="fill:#D8669F;" d="M84.4,191.1c0.5,2.5-3.3,5.5-8.7,6.6c-5.3,1.1-10.1-0.1-10.6-2.6c-0.5-2.5,4.3-8.3,9.6-9.4
				C80.1,184.6,83.8,188.5,84.4,191.1z" />
                  <path style="fill:#D8669F;" d="M95.4,221c1.4,3.7-1.8,8.4-7.3,10.5c-5.4,2-6.9,1.2-8.3-2.5c-1.4-3.7-2.2-9,3.2-11
				C88.5,215.9,94,217.3,95.4,221z" />
                </g>
                <path style="fill:#EAE4C7;" d="M58.5,80.9C3.2,82.5,73.7,11.3,73.7,11.3c-33,60.7,4,44.7,4,44.7S82.4,80.2,58.5,80.9z
			" />
              </g>
              <g>
                <g>
                  <path style="fill:#9E4963;" d="M98.4,141.4c-0.1,1.5-0.3,2.8-0.3,4.1c14.4-9.7,45.3-15.1,64.5-6.3c-0.7-2.6-0.3-4.4,2.7-4.3
				c5,0.3,8.3,2,9.6,2.8c6.3-8.7,9.1-18,6.3-24.4c-4-9.1-9.6-8.8-17.1-5.6c1.3,2.6,4.9,10.1,1.6,10.7c-3.4,0.7-9-4.8-10.5-6.4
				c-7,3.5-15.2,7.2-24.7,7.9c-10.1,0.7-19.3-2.3-27.2-4.9c-1.7,1.9-4.5,4.8-7.9,6.4c-4.4,2.2-4.8-4.6-3.5-9.8
				c-6.5-1.2-11.4,0-14.5,8.1c-2.1,5.6,1.1,14.1,8.1,21.9C93.1,136.8,99.1,134.5,98.4,141.4z" />
                  <path style="fill:#FFFFFF;"
                    d="M95.4,121.3c3.3-1.7,6.2-4.6,7.9-6.4c-4.2-1.4-8-2.8-11.4-3.4C90.7,116.7,91,123.5,95.4,121.3z" />
                  <path style="fill:#FFFFFF;" d="M165.7,118.3c3.3-0.6-0.2-8.1-1.6-10.7c-2.7,1.2-5.7,2.7-9,4.3C156.8,113.5,162.3,119,165.7,118.3
				z" />
                  <path style="fill:#F792B7;" d="M98.1,145.5c-0.2,2.8-0.3,4.8-0.4,6.1c9.6,6.1,22,10.2,35.9,9.6c12.5-0.6,24.1-6.5,32.8-14.2
				c-1.4-2.4-3.1-5.4-3.8-7.9C143.4,130.4,112.5,135.7,98.1,145.5z" />
                  <path style="fill:#FFFFFF;" d="M85.6,141.4c2.4,2.6,5.1,5.2,8.3,7.5c1.2,0.9,2.5,1.8,3.8,2.6c0.1-1.3,0.2-3.4,0.4-6.1
				c0.1-1.2,0.2-2.6,0.3-4.1C99.1,134.5,93.1,136.8,85.6,141.4z" />
                  <path style="fill:#FFFFFF;" d="M165.3,134.9c-3-0.2-3.4,1.7-2.7,4.3c0.7,2.4,2.3,5.4,3.8,7.9c1.2-1.1,2.4-2.2,3.5-3.3
				c1.9-1.9,3.6-4,5.1-6C173.7,136.8,170.4,135.2,165.3,134.9z" />
                </g>
              </g>
            </g>
            <g>
              <path style="fill:#CE5F9C;" d="M158.9,83.7c0,17-12.2,7.6-29.3,7.6c-17,0-32.4,9.4-32.4-7.6c0-17,13.8-30.8,30.8-30.8
		C145.1,53,158.9,66.7,158.9,83.7z" />
              <path style="fill:#FFFFFF;" d="M158.7,79.6c0,16.8-12,8.8-28.8,8.8c-16.8,0-31.9,7.9-31.9-8.8s13.6-30.3,30.3-30.3
		C145.1,49.3,158.7,62.9,158.7,79.6z" />
              <g>

                <ellipse transform="matrix(0.2331 -0.9724 0.9724 0.2331 32.2063 176.728)" style="fill:#424141;"
                  cx="128.2" cy="67.9" rx="4.8" ry="4.8" />
                <circle style="fill:#FFFFFF;" cx="129.5" cy="65.1" r="1.1" />
              </g>
            </g>
          </svg>
        </div>
        <div id="svgYellow" class="monster-btn">
          <svg viewBox="0 0 249.6 251.4">
            <path style="fill:#FFD731;" d="M116.2,174.4c0,0-16.9,29.7-13.1,35.9c0,0,17,1.2,13.1,8.6c-2.9,5.3-9.6,0-9.6,0s3.1,8.3-7.7,7.1
         s-6.6-4.6-4.7-6.4c1.8-1.8-7.6,5.5-11.9,0.6c-4.4-4.9,0.9-6.1,0.9-6.1l10.4-4.3l8.6-35.2" />
            <path style="fill:#CEB034;" d="M146.9,177.9c0,0,16.9,29.7,13.1,35.9c0,0-17,1.2-13.1,8.6c2.9,5.3,9.6,0,9.6,0s-3.1,8.3,7.7,7.1
         c10.9-1.2,6.6-4.6,4.7-6.4c-1.8-1.8,7.6,5.5,11.9,0.6c4.4-4.9-0.9-6.1-0.9-6.1l-10.4-4.3l-8.6-35.2" />
            <path style="fill:#FFD731;" d="M206.7,142.9c0,0,21.4,1.2,23.9-11.7c2.5-12.9-2-24.5-2-24.5s-5.2,1.5-9.6-3.9
         c-4.4-5.4,5.1-9.8,9.6-6.7c0,0-6-8,2-8.9c8-0.9,8.2,8.9,8.2,8.9s2.3-11,6.9-6.1c4.6,4.9,2.3,8.7,0.3,10.2c-1.6,1.2-7.2,3.4-7.2,3.4
         s15.4,47.8-30.4,47.1" />
            <path style="fill:#FFD731;" d="M61.8,142c0,0-17.8,12-26.5,2.2c-8.7-9.8-10.8-22.1-10.8-22.1
         s5.3-1.4,6.3-8.2c1-6.8-9.4-5.8-11.7-0.8c0,0,1.1-10-6.2-6.6c-7.3,3.3-2.5,11.8-2.5,11.8s-7.6-8.3-9.1-1.7c-1.5,6.6,2.4,8.6,5,9
         c2,0.3,8-0.8,8-0.8s10.2,49.5,49.3,25.6" />
            <g>
              <path style="fill:#FFD731;" d="M209.4,145c0,34-34.8,42.2-77.7,42.2c-42.9,0-77.7-8.2-77.7-42.2s34.8-61.5,77.7-61.5
           C174.6,83.5,209.4,111,209.4,145z" />
              <path style="fill:#EABD00;" d="M202.2,119.1c0,0-1.6,22.4-21.7,37.7c-30.1,23-77.3,28.8-77.3,28.8l14.4,1c0,0,46.1,4.1,73.3-9.9
           C222.1,160.5,204.8,122.4,202.2,119.1z" />
              <path style="fill:#D6AD00;" d="M197.4,125.3c0,4.9-4.9,6-8.6,6c-3.7,0-6.7-4-6.7-8.8c0-4.9,3-8.8,6.7-8.8
           C192.5,113.5,197.4,120.4,197.4,125.3z" />
              <path style="fill:#D6AD00;" d="M206.7,139.3c0,3.2-4.8,3.3-6.9,3.3c-2.1,0-3.8-2.6-3.8-5.8c0-3.2,1.7-5.8,3.8-5.8
           C201.9,131.1,206.7,136.1,206.7,139.3z" />
              <path style="fill:#D6AD00;" d="M197.7,148.4c0,2.1-4.1,2.4-5.2,2.4c-1.1,0-2-1.7-2-3.8c0-2.1,0.9-3.8,2-3.8
           C193.6,143.1,197.7,146.3,197.7,148.4z" />
            </g>
            <g>
              <g>
                <path style="fill:#BA5A73;" d="M183.7,125.7c-2.2,9.3-19.5,27.4-51.8,33.9c-30,6.1-43.4-4-51.5-9c-12.3-7.5-11.9-30.6,8.2-21.2
             c22.6,10.6,41.2-2.9,62.3-12.6C171.3,107.5,189.6,100.1,183.7,125.7z" />
                <path style="fill:#E27194;" d="M161.8,146.7c0.4,6.6-18.8,35.1-22,43.3c-6.5,16.4,1.5,40.1-26.3,46.2c-10.9,2.4-33-1.1-36.1-24.6
             c-1.7-13.1,4.5-32.4,13.7-52.9C99.6,139.9,160.9,133.5,161.8,146.7z" />
                <path style="fill:none;stroke:#BA5A73;stroke-width:13;stroke-linecap:round;stroke-miterlimit:10;" d="M131.7,138.1
             c-19.8,10.3-28.8,35.6-31.4,69.4" />
              </g>
              <g>
                <path style="fill:#FFD731;" d="M151.4,52.7c-8-3.2-12.4-11.1-9.8-17.7c2.6-6.5,11.3-9.2,19.3-5.9c8,3.2,12.4,11.1,9.8,17.7
             c-1.9,4.7-6.8,7.4-12.4,7.3l-9.7,37.2c0,0-2.8,4.8-6.7-2.3L151.4,52.7z" />
                <path style="fill:#D6AD00;" d="M167.7,45.6c-1.6,4.4-7.6,6.3-13.3,4.1c-5.7-2.1-9.1-7.4-7.4-11.8c1.6-4.4,7.6-6.3,13.3-4.1
             C166,36,169.4,41.2,167.7,45.6z" />
                <path style="fill:#FFFFFF;" d="M167.2,44.3c-1.6,4.4-7.6,6.3-13.3,4.1c-5.7-2.1-9.1-7.4-7.4-11.8c1.6-4.4,7.6-6.3,13.3-4.1
             C165.5,34.6,168.8,39.9,167.2,44.3z" />
                <g>
                  <path style="fill:#424141;" d="M155.1,42.3c-2.5-1-3.7-3.8-2.7-6.2c1-2.5,3.8-3.7,6.2-2.7c2.5,1,3.7,3.8,2.7,6.2
               C160.3,42.1,157.5,43.3,155.1,42.3z" />
                  <path style="fill:#FFFFFF;" d="M159,40.8c-0.3-0.1-0.4-0.5-0.3-0.8c0.1-0.3,0.5-0.4,0.8-0.3c0.3,0.1,0.4,0.5,0.3,0.8
               C159.6,40.8,159.3,41,159,40.8z" />
                </g>
              </g>
              <g>
                <path style="fill:#FFD731;" d="M115.5,51.7c-8.6-0.3-15.4-6.3-15.2-13.3c0.3-7,7.5-12.5,16.1-12.1c8.6,0.3,15.4,6.3,15.2,13.3
             c-0.2,5-3.9,9.2-9.2,11.1l3.5,38.3c0,0-1,5.4-7,0.1L115.5,51.7z" />
                <path style="fill:#D6AD00;" d="M118.3,49.1c-5.6,0.4-10.3-3.1-10.7-7.9c-0.4-4.8,3.9-8.9,9.4-9.4c5.6-0.4,10.3,3.1,10.7,7.9
             C128.1,44.5,123.9,48.7,118.3,49.1z" />
                <path style="fill:#FFFFFF;" d="M127,39.1c0,4.7-5,8.5-11.1,8.5c-6.1,0-11.1-3.8-11.1-8.5c0-4.7,5-8.5,11.1-8.5
             C122.1,30.6,127,34.4,127,39.1z" />
                <g>
                  <path style="fill:#424141;" d="M111.2,36.2c0.5-2.6,3-4.3,5.6-3.9c2.6,0.5,4.3,3,3.9,5.6c-0.5,2.6-3,4.3-5.6,3.9
               C112.4,41.3,110.7,38.8,111.2,36.2z" />
                  <path style="fill:#FFFFFF;" d="M113.4,39.8c0.1-0.3,0.4-0.5,0.7-0.5c0.3,0.1,0.5,0.4,0.5,0.7c-0.1,0.3-0.4,0.5-0.7,0.5
               C113.5,40.4,113.3,40.1,113.4,39.8z" />
                </g>
              </g>
              <g>
                <path style="fill:#FFD731;" d="M82.9,60.5c-8.2,2.8-16.7-0.3-18.9-7c-2.3-6.7,2.5-14.3,10.7-17.1c8.2-2.8,16.7,0.3,18.9,7
             c1.6,4.8-0.3,10-4.6,13.7l17,34.5c0,0,1,5.4-6.5,2.7L82.9,60.5z" />
                <path style="fill:#D6AD00;" d="M76.7,58.6c-5.6-0.8-9.5-5.3-8.9-10c0.7-4.7,5.7-7.9,11.3-7.1c5.6,0.8,9.5,5.3,8.9,10
             C87.4,56.3,82.3,59.4,76.7,58.6z" />
                <path style="fill:#FFFFFF;" d="M88.9,43.8c1.9,4.3-1.2,9.8-6.8,12.2c-5.6,2.4-11.7,0.9-13.5-3.4c-1.9-4.3,1.2-9.8,6.8-12.2
             C80.9,37.9,87,39.5,88.9,43.8z" />
                <g>
                  <path style="fill:#424141;" d="M77.8,41.8c2.1-1.5,5.1-1.1,6.7,1.1c1.5,2.1,1.1,5.1-1.1,6.7c-2.1,1.5-5.1,1.1-6.7-1.1
               C75.2,46.4,75.6,43.4,77.8,41.8z" />
                  <path style="fill:#FFFFFF;" d="M76.9,45.9c0.3-0.2,0.6-0.1,0.8,0.1c0.2,0.3,0.1,0.6-0.1,0.8C77.3,47,77,47,76.8,46.7
               C76.6,46.4,76.7,46.1,76.9,45.9z" />
                </g>
              </g>
            </g>
          </svg>
        </div>
        <div id="svgBlue" class="monster-btn">
          <svg viewBox="0 0 249.6 251.4">
            <path style="fill:#168DD4;" d="M35.6,49.6c0,0,11.4,9.7,17.4,0.4c6-9.2-14.9-12.5-14.9-12.5s14.2-3.5,8.5-11.3
         c-6.5-8.8-14.7,0.8-14.7,0.8s-3.3-6.4-11.4,0c-9.2,7.2,2.8,14.9,2.8,14.9S6.3,85.6,10.5,111c3.2,19.4,12.3,53.7,43.6,69.7L49,164.2
         C49,164.2-2.1,125.2,35.6,49.6z" />
            <path style="fill:#168DD4;" d="M197,12.6c0,0,4.9-10.7-4.2-12.4c-9-1.8-6.2,12.4-6.2,12.4s-2.1-11.3-11.9-7.2
         c-9.8,4.2,5.1,14,5.1,14s-18.5,2.7-8.5,11.7c8.5,7.6,18,0,18,0s40.6,18.2,43,69.9c1.8,39.6-34,67.7-34,67.7l-1.5,14.8
         c0,0,44.6-25.5,47.3-82.4C246.9,44.1,197,12.6,197,12.6z" />
            <g>
              <path style="fill:#168DD4;" d="M182.8,221c0,0,37.4-66.6,9-120.6C163.4,46.3,58.1,51.1,48.2,138.5c-7.6,67.2,42.4,92.9,42.4,92.9
           s-14,6.2-9.7,15.3c4.3,9,18.4-4.3,18.4-4.3s9,21.6,28.6-2c0,0,17.5,22.9,31.4-5.5c0,0,34.5,27,43.2,2.1
           C211.2,212,191.1,241.8,182.8,221z" />
              <path style="fill:#1581B7;" d="M182.8,87.2c0,0,23.2,79.8-15.6,122.7c0,0,4.8,35.2,27.8,18.8c0,0-11.4,2-11.7-8.4
           C183.2,220.2,225.8,142.3,182.8,87.2z" />
              <path style="fill:#227A96;" d="M182.1,139.5c0,2.9-4.9,3.6-7.4,3.6c-2.5,0-4.6-2.3-4.6-5.2c0-2.9,2.1-5.2,4.6-5.2
           C177.2,132.6,182.1,136.6,182.1,139.5z" />
              <path style="fill:#227A96;" d="M194.2,130.5c0,4-1.9,7.2-4.2,7.2c-2.3,0-7.9-3.6-7.9-7.5c0-4,5.5-6.8,7.9-6.8
           C192.3,123.4,194.2,126.6,194.2,130.5z" />
              <path style="fill:#227A96;" d="M194.9,150.4c0,2.8-2.1,2.9-4.7,2.9c-2.6,0-4.7-0.1-4.7-2.9c0-2.8,2.1-5.2,4.7-5.2
           C192.8,145.2,194.9,147.5,194.9,150.4z" />
              <path style="fill:none;stroke:#46ADE0;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;" d="M56.9,139.5
           c0,0-1-37.4,35.9-58.9" />

              <line style="fill:none;stroke:#46ADE0;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;" x1="53.9"
                y1="147.3" x2="53.9" y2="150.3" />
            </g>
            <g>
              <g>
                <path style="fill:#1B709B;" d="M166,122.4c-0.7,19.1-18.8,10.2-42.3,9.3c-23.5-0.9-38.2,4.3-37.5-14.7
             C87,98,106.6,83.3,130.1,84.2C153.6,85,166.7,103.4,166,122.4z" />
                <path style="fill:#FFFFFF;" d="M164.3,117.2c-0.7,19.1-16.5,7.8-40,6.9c-23.5-0.9-40.4,6.7-39.7-12.3
             c0.7-19.1,20.3-33.8,43.8-32.9C151.9,79.8,165,98.2,164.3,117.2z" />
                <g>
                  <path style="fill:#424141;" d="M134.3,89c5.5,3.6,7,11,3.4,16.4c-3.6,5.5-11,7-16.4,3.4c-5.5-3.6-7-11-3.4-16.4
               C121.5,87,128.9,85.4,134.3,89z" />
                  <path style="fill:#FFFFFF;" d="M124.1,90.6c0.7,0.4,0.9,1.3,0.4,2c-0.4,0.7-1.3,0.9-2,0.4c-0.7-0.4-0.9-1.3-0.4-2
               C122.6,90.4,123.5,90.2,124.1,90.6z" />
                </g>
              </g>
              <g>
                <path style="fill:#BA5A73;" d="M171.5,190.8c7-6.3,11-14.9,11.8-22c1.2-9.9-4.5-19.6-14.6-27.3c0,0.1,0,0.2,0,0.2
             c-3.2,14.1-22.2,24.4-46.6,21.4c-22-2.7-39.2-14.9-41.9-27.2c-7.2,4.9-11.9,11.3-12.8,18.7c-2.4,19.3,19.8,46.8,51.8,50.7
             c7.3,0.9,14.5,0.5,21.3-0.9l4.2-1.6c0,0,2.7,5.3,3.3,9.3c0.9,5.8,6.6,6.6,7.2-2.4c0.4-7,3.2-3.4,4.8,2.3c0.8,2.8,2,6.3,3.2,7.2
             c2.4,1.9,12.3-4.6,8.8-24.4" />
                <path style="fill:#FFFFFF;" d="M85.6,146.4c0,0-8,12.9-5,16.1c3,3.2,5.3-2.6,5.3-2.6s-0.6,3.1-0.1,4c0.4,0.8,2.6,1.6,3.1-2
             c0,0,44.6,19.7,67.2,3.6c0,0,0.4,1.4,1.7,3.6c1.3,2.2,3.9,4,4.2-1.6c0,0,1.3-4,3.2,0.4s8.6,0.9,3.5-6.8c-5.1-7.7-5.8-9.5-5.8-9.5
             S130.1,181.7,85.6,146.4z" />
                <path style="fill:#E27194;" d="M163.2,219.2c2.4,1.9,12.3-4.6,8.8-24.4l-0.5-4c-1.8-1.1-3.8-1.8-5.9-3
             c-43.4-24-79.6-15.2-92.2-10.8c8.6,13.5,25.1,25.8,45.6,28.3c7.3,0.9,14.5,0.5,21.3-0.9l4.2-1.2c0,0,2.7,4.9,3.4,8.9
             c0.9,5.8,6.6,6.6,7.2-2.4c0.4-7,3.2-3.4,4.8,2.3C160.8,214.7,162.1,218.2,163.2,219.2z" />
              </g>
            </g>
          </svg>
        </div>
      </footer>
    </div>
    <div id="main02" class="panel hide">
      <div id="btn0n" msg="btn0" class="btn"></div>
      <div id="btn1n" msg="btn1" class="btn"></div>
      <div id="btn2n" msg="btn2" class="btn"></div>
      <div id="btn3n" msg="btn3" class="btn"></div>
      <div id="btn4n" msg="btn4" class="btn"></div>
      <div id="btn5n" msg="btn5" class="btn"></div>
      <div id="btn6n" msg="btn6" class="btn"></div>
      <div id="btn7n" msg="btn7" class="btn"></div>
      <div id="btn8n" msg="btn8" class="btn"></div>
      <div id="btn9n" msg="btn9" class="btn"></div>
    </div>
    <div id="setting" class="panel">
      <div class="msg-div topic">
        <h3>廣播頻道</h3>
        <table>
          <tr>
            <th>發送</th>
            <td><input m="topic1"></td>
          </tr>
          <tr>
            <th>接收</th>
            <td><input m="topic2"></td>
          </tr>
        </table>
      </div>
      <div class="msg-div monster">
        <h3>怪獸廣播訊息</h3>
        <table>
          <tr>
            <th>Kebbi 中間</th>
            <td><input m="kebbiReset"></td>
          </tr>
          <tr>
            <th>Kebbi 往上</th>
            <td><input m="kebbiTop"></td>
          </tr>
          <tr>
            <th>Kebbi 往下</th>
            <td><input m="kebbiBottom"></td>
          </tr>
          <tr>
            <th>Kebbi 往左</th>
            <td><input m="kebbiLeft"></td>
          </tr>
          <tr>
            <th>Kebbi 往右</th>
            <td><input m="kebbiRight"></td>
          </tr>
          <tr>
            <th>綠色怪獸</th>
            <td><input m="svgGreen"></td>
          </tr>
          <tr>
            <th>紅色怪獸</th>
            <td><input m="svgRed"></td>
          </tr>
          <tr>
            <th>黃色怪獸</th>
            <td><input m="svgYellow"></td>
          </tr>
          <tr>
            <th>藍色怪獸</th>
            <td><input m="svgBlue"></td>
          </tr>
        </table>
      </div>
      <div class="msg-div">
        <h3>按鈕廣播訊息</h3>
        <table>
          <tr>
            <th><input class="btn-name" m="btn0n"></th>
            <td><input class="btn-msg" m="btn0"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn1n"></th>
            <td><input class="btn-msg" m="btn1"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn2n"></th>
            <td><input class="btn-msg" m="btn2"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn3n"></th>
            <td><input class="btn-msg" m="btn3"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn4n"></th>
            <td><input class="btn-msg" m="btn4"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn5n"></th>
            <td><input class="btn-msg" m="btn5"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn6n" placeholder="按鈕 7"></th>
            <td><input class="btn-msg" m="btn6"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn7n" placeholder="按鈕 8"></th>
            <td><input class="btn-msg" m="btn7"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn8n" placeholder="按鈕 9"></th>
            <td><input class="btn-msg" m="btn8"></td>
          </tr>
          <tr>
            <th><input class="btn-name" m="btn9n" placeholder="按鈕 910"></th>
            <td><input class="btn-msg" m="btn9"></td>
          </tr>
        </table>
      </div>
      <div id="saveBtn">儲存分享連結</div>
    </div>
    <div id="message">
      <h4>1234567</h4>
    </div>
    <div id="popup">
      <div id="popupClose"></div>
      <h4>儲存成功</h4>
      <div id="saveUrl"></div>
      <div id="copy" data-clipboard-target="#saveUrl">複製連結</div>
    </div>
  </div>

  <script src="https://webbit.webduino.io/blockly/dist/lib/webduino-all.min.js"></script>
  <script src="https://webbit.webduino.io/blockly/custom-blocks/radio/mqttClient.min.js"></script>
  <script src="js/clipboard.min.js "></script>
  <script src="js/firebase.js"></script>
  <script src="js/main.js"></script>

  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2708968-11"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-2708968-11');
  </script>

</body>

</html>