63070186

✨ Taifhoon unakul

<html>
<head>
    <title>
        ไต้ฝุ่น อริยพล อูนากูล (63070186)
    </title>
</head>
    <style>
        body{
            margin:0;
        }
        svg#all{
            background-color: #40ffc64d;
            width:100%;
        }
/*       .all:hover{
        animation:roly 3s infinite;
        background-color:;
      } */
      #dark{
        position:absolute;
        left:35%;
        top:10%;
        width:80px;
        height:40px;
      }
      #happy{
        position:absolute;
        left:55%;
        top:10%;
        width:80px;
        height:40px;
      }
        #posi{
          position:absolute;
          left:25%;
          top:25%;
          -webkit-appearance: none;
          width: 50%;
          height: 10px;
          background: #000;
          outline: none;
          border: 3px solid #56EDFF;
          border-radius: 8px;
			}
      #posi::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 10px;
          height: 30px;
          background: #000;
          cursor: pointer;
          border: 2px solid #56EDFF;
          border-radius: 4px;
        }
        #dark {
          background-color: #180033; 
          color: white; 
          border: 2px solid #70E9FF;
        }
      #happy {
          background-color: #70E9FF; 
          color: black; 
          border: 2px solid #000556;
        }

#dark:hover{
          background-color: #70E9FF;
          color: white;
        }
      #happy:hover {
          background-color: #000556;
          color: white;
        }
      
  </style>
    <body>
      <button class="" id="dark" onclick="chdark()">Dark</button>
      <button id="happy" onclick="chhappy()">Normal</button>
      <input type="range" id="posi" name="posi" min="-50" max="50" value="0" width="100%">
      <svg viewBox="0 0 200 200" id="all">
        
        <path id="green" d="m0 140 l200 0 l0 200 l-200 0 z"  fill="#56FF65"></path>
        <path id="cloud" d="m50 60
                 q-10 -10 0 -20
                 q10 -10 20 0
                 q15 -15 30 0
                 q10 -10 20 0
                 q10 10 0 20
                 q-10 10 -20 0
                 q-10 10 -20 0
                 q-10 5 -15 0
                 q-10 5 -15 0
                 " fill="#56EDFF">
          <animate attributeName="d" values="
					  m-50 60 
                 q-10 -10 0 -20
                 q10 -10 20 0
                 q15 -15 30 0
                 q10 -10 20 0
                 q10 10 0 20
                 q-10 10 -20 0
                 q-10 10 -20 0
                 q-10 5 -15 0
                 q-10 5 -15 0;
                 m50 60 
                 q-10 -10 0 -20
                 q10 -10 20 0
                 q15 -15 30 0
                 q10 -10 20 0
                 q10 10 0 20
                 q-10 10 -20 0
                 q-10 10 -20 0
                 q-10 5 -15 0
                 q-10 5 -15 0;
                 m120 60 
                 q-10 -10 0 -20
                 q10 -10 20 0
                 q15 -15 30 0
                 q10 -10 20 0
                 q10 10 0 20
                 q-10 10 -20 0
                 q-10 10 -20 0
                 q-10 5 -15 0
                 q-10 5 -15 0;
                 m220 60 
                 q-10 -10 0 -20
                 q10 -10 20 0
                 q15 -15 30 0
                 q10 -10 20 0
                 q10 10 0 20
                 q-10 10 -20 0
                 q-10 10 -20 0
                 q-10 5 -15 0
                 q-10 5 -15 0;
                                             " dur="8s" repeatCount="indefinite" />
        </path>

        <path id="soil" d="M0 230 
                 q40 10 80 0 
                 q40 -10 80 0
                 q40 10 80 0
                 l0 -60 
                 q-40 10 -80 0 
                 q-40 -10 -80 0
                 q-40 10 -80 0 z" fill="#7C3E00"></path>
		

        
        <path id="grass" d="m-20 145
                 q0 -20 20 -10
                 q0 -20 20 -10
                 q10 -30 20 0
                 q10 -10 20 0
                 q10 -10 20 20z
                 "fill="green"></path>
				<svg viewBox="-50 -80 200 200">
              <path  id="fox" d="M40 10 L38 16 L43 16 z" fill="#de7b4a"></path> 
              <path  id="fox" d="M40 10 L42 11 L43 16 z" fill="#7b3e39"></path>
              <path  id="fox" d="M43 16 L52 19 L40 22 z" fill="#de7b4a"></path>
              <path  id="fox" d="M43 16 L38 16 L40 22 z" fill="#f1984b"></path>
              <path  id="fox" d="M38 16 L32 17 L40 22 z" fill="#de7b4a"></path>
              <path  id="fox" d="M32 17 L40 22 L30 24 z" fill="#f1984b"></path>
              <path  id="fox" d="M32 17 L30 24 L20 16 z" fill="#de7b4a"></path>
              <path  id="fox" d="M20 16 L22 14 L24 16.5 z" fill="#5a2d29"></path>
              <path  id="fox" d="M22 14 L32 17 L24 16.5 z" fill="#d95a3d"></path>
              <path  id="fox" d="M20 16 L21 24 L30 24 z" fill="#d95a3d"></path>
              <path  id="fox" d="M21 24 L36 30 L30 24 z" fill="#de7b4a"></path>
              <path  id="fox" d="M21 24 L36 36 L36 30 z" fill="#7b3e39">
              <animate attributeName="d" values="M21 32 L36 36 L36 30;M21 24 L36 36 L36 30;M21 32 L36 36 L36 30;" dur="2s" repeatCount="indefinite" /></path>
              
              <path id="fox" d="M30 24 L40 22 L36 30 z" fill="#d95a3d"></path>
              <path  id="fox" class="eye" d="M40 22 L38 26 L46 27 z" fill="#5a2d29"></path>
              <path id="fox"  d="M40 22 L46 27 L52 19 z" fill="#f1984b"></path>
              <path id="fox"  d="M38 26 L36 30 L46 27 z" fill="#f1984b"></path>
              <path id="fox"  d="M52 19 L70 18 L56 25 z" fill="#7b3e39"></path>
              <path id="fox"  d="M52 19 L56 25 L46 27 z" fill="#de7b4a "></path>
              <path id="fox"  d="M36 36 L36 30 L55 38 z" fill="#d7d9dc "></path>
              <path id="fox"  d="M36 30 L46 27 L55 38 z" fill="#de7b4a "></path>
              <path id="fox"  d="M46 27 L56 25 L55 38 z" fill="#f1984b "></path>
              <path id="fox"  d="M70 18 L56 25 L55 38 z" fill="#de7b4a "></path>
              <path id="fox"  d="M55 38 L36 36 L46 48 z" fill="#d6dcda "></path>
              <path id="fox"  d="M36 36 L35 48 L46 58 L46 48 z" fill="#ad9d8d "></path>
              <path id="fox"  d="M70 18 L64 34 L55 38 z" fill="#f1984b "></path>
              <path id="fox"  d="M64 34 L60 42 L55 38 z" fill="#de7b4a "></path>
              <path id="fox"  d="M55 38 L60 42 L58 50 L46 48 z" fill="#c5bcb7 "></path>
              <path id="fox"  d="M46 48 L58 50 L46 58 z" fill="#c5bcb7 "></path>
              <path id="fox"  d="M35 48 L42 54.5 L32 66 L26 56 z" fill="#bc592b "></path>
              <path id="fox"  d="M26 56 L22 62 L20 70 L32 66 z" fill="#a55027 "></path>
              <path id="fox"  d="M20 70 L20 82 L32 66 z" fill="#9e4924 "></path>
              <path id="fox"  d="M20 82 L32 66 L38 78 z" fill="#9e4924 "></path>
              <path id="fox"  d="M28 96 L22 92 L36 86 z" fill="#9e4924 "></path>
              <path id="fox"  d="M20 82 L22 92 L36 86 L38 78 z" fill="#9e4924 "></path>
              <path id="fox"  d="M46 58 L58 50 L54 68 z" fill="#bb5e2a "></path>
              <path id="fox"  d="M42 54.5 L44 74.5 L46 58 z" fill="#b25127"></path>
              <path id="fox"  d="M44 74.5 L42 54.5 L32 66 L38 78 z" fill="#b25127 "></path>
              <path id="fox"  d="M44 74.5 L46 58 L54 68 z" fill="#bb5e2a"></path>
              <path id="fox"  d="M54 68 L54 84 L44 74.5 z" fill="#b85828"></path>
              <path id="fox"  d="M54 84 L54 81 L66 80 L60 88 z" fill="#a04b26"></path>
              <path id="fox"  d="M66 80 L60 88 L84 90 L78 84 z" fill="#a55125"></path>
              <path id="fox"  d="M84 90 L86 98 L79 96 L74 89.2 z" fill="#cebaaf"></path>
              <path id="fox"  d="M60 88 L79 96 L74 89.2 z" fill="#843a1f  "></path>
              <path id="fox"  d="M60 88 L79 96 L50 96 z" fill="#7d3620"></path>
              <path id="fox"  d="M54 84 L44 74.5 L38 78 z" fill="#aa4c26"></path>
              <path id="fox"  d="M38 78 L36 86 L28 96 L54 84  z" fill="#a04b26"></path>
              <path id="fox"  d="M60 88 L50 96 L28 96 L54 84 z" fill="#843a1f"></path>
      		 </svg>
        
        </svg>
      
        <img src="https://i.pinimg.com/564x/dc/66/d1/dc66d1e842643fb7dfc42eeb6144914d.jpg">
      <script>
        var dark = document.getElementById("dark");
        var eye = document.querySelector(".eye");
        var grass = document.getElementById("grass");
        var soil = document.getElementById("soil");
        var green = document.getElementById("green");
        var cloud = document.getElementById("cloud");
        var back = document.getElementById("all");
        
        var posi = document.getElementById("posi")
        function chdark(){
          eye.style.fill = "red";
          grass.style.fill = "#0E0429";
          soil.style.fill = "#2E1B00";
          green.style.fill = "#113013";
          cloud.style.fill = "#0F007E";
          back.style.backgroundColor = "#1F152A";
          fox.style.transform = 'translatex('+ value + 'px)';
        }
        
        function chhappy(){
          eye.style.fill = "#5a2d29";
          grass.style.fill = "green";
          soil.style.fill = "#7C3E00";
          green.style.fill = "#56FF65";
          cloud.style.fill = "#56EDFF";
          back.style.backgroundColor = "#40ffc64d";
        }
        function move(){
          let value = posi.value;
          var fox = document.querySelectorAll("#fox");
          for(var i=0; i<fox.length; i++) {
            fox[i].style.transform = 'translatex(' + value + 'px)';
          }
        }
        posi.addEventListener('input',move);
      </script>
    </body>
  
</html>