Hello World! (Branch 8210)

✨ Tiwat Parkpoompaisal

<html>
<head>
	<title>จีน ทิวัตถ์ ภาคภูมิไพศาล (63070068)</title>
  <style>
    body{
      background:#AADDE4;
      margin:0;
      font-family:sans-serif;
      transition: 1s;
    }
    svg{
		width: 100%;
    }
    .day{
      opacity: 0;
    }
    .pointer{
      cursor: pointer;
    }
    .change{
		fill:black;
    transition: 15s;
    }
    .change:hover{
		fill:#743E6D;
    transition: 0.5s;
    }
    .change2{
      fill:rgb(254,235,2);
      transition: 15s;
    }
    .change2:hover{
      fill:#A3CB37;
      transition: 0.5s;
    }
    .change3{
      fill:rgb(255,159,0);
      transition: 15s;
    }
    .change3:hover{
      fill:rgb(253,102,3);
      transition: 0.5s;
    }
    .change4{
      fill:#FEFECC;
      transition: 15s;
    }
    .change4:hover{
      fill:rgb(214,234,147);
      transition: 0.5s;
    }
    .change5{
      fill:#FFF775;
      transition: 15s;
    }
    .change5:hover{
      fill:rgb(181,212,8);
      transition: 0.5s;
    }
    .change6{
      fill:#DE5402;
      transition: 15s;
    }
    .change6:hover{
      fill:rgb(58,134,1);
      transition: 0.5s;
    }
    .change7{
      fill:#C34904;
      transition: 15s;
    }
    .change7:hover{
      fill:rgb(5,138,202);
      transition: 0.5s;
    }
    .change8{
      fill:#FC9100;
      transition: 15s;
    }
    .change8:hover{
      fill:#FD6401;
      transition: 0.5s;
    }
    .change9{
      fill:#FFDC4B;
      transition: 15s;
    }
    .change9:hover{
      fill:rgb(186,211,8);
      transition: 0.5s;
    }
    .change10{
      fill:#FFA503;
      transition: 15s;
    }
    .change10:hover{
      fill:rgb(186,211,8);
      transition: 0.5s;
    }
    @keyframes cloudd{
            0%{
                transform: translate(0px);
            }
            50% {
                transform: translate(900px);
            }
            100%{
                transform: translate(0px);
            }
    }
    .cloud{
      animation: cloudd 1s alternate infinite;
    }
  </style>
</head>
<body style="margin: 0;";background: #AADDE4>
	<svg viewbox="0 0 1300 1300">
    <svg class="cloud" width="600px" height="600px">
      <circle cx="200" cy="80" r="45" fill="#d4d4d4"/>
      <circle cx="180" cy="120" r="45" fill="#d4d4d4"/>
      <circle cx="140" cy="100" r="40" fill="#d4d4d4"/>
      <circle cx="230" cy="125" r="35" fill="#d4d4d4"/>
      <circle cx="270" cy="115" r="45" fill="#d4d4d4"/>
    </svg>
    <circle id="moon" class="pointer" onclick="night()" cx="590" cy="150" r="100" fill="#F29021" />
    <circle id="sun" class="pointer" onclick="day()" cx="590" cy="150" r="100" fill="#F84A01" />
    <path id="1" d="M -120 520 Q190 -200 800 500 z " fill="#7bb3b4" ></path>
     <path id="2" d="M 200 600 Q1100 -300 1400 600 z " fill="#3c857e" ></path>
     <path d="M -150 737 Q300 -100 900 737 z " fill="#306a5e" ></path>
     <path d="M 400 737 Q1100 -300 1700 737 z " fill="#254f43" ></path>
     <path class="change" d="M471 489 l60 5 l-1 60 l-80 41 l-65 79 l1 -95 z"/>
     <path d="M386 579 l59 -94 l98 -70 l-72 74 z" fill="rgb(253,64,40)"/>
     <path d="M471 489 l72 -74 l188 -83 l49 -2 l-61 13 l-139 58 z" fill="rgb(255,160,146)"/>
     <path class="change2"d="M471 489 l109 -88 l123 -21 l-19 42 l-153 72 z"/>
     <path class="change3"d="M530 554 l1 -60 l153 -72 l-49 86 z"/>
     <path class="change7"d="M385 674 l65 -79 l80 -41 l105 -46 l-23 53 l-141 51 z" fill=""/>
     <path class="change6"d="M612 561 l23 -53 l104 -38 l88 10 l-100 74 l-71 4 z" fill=""/>
     <path class="change8"d="M635 508 l49 -86 l107 -34 l36 92 l-88 -10 z" fill=""/>
     <path class="change10"d="M827 480 l-36 -92 l36 -43 z" fill=""/>
     <path class="change5" d="M703 380 l-19 42 l107 -34 l-16 -41 z" fill=""/>
     <path class="change4" d="M580 401 l139 -58 l56 4 l-72 33 z" fill=""/>
     <path class="change9"d="M780 330 l-61 13 l56 4 l16 41 l36 -43 z" fill=""/>
     <path d="M827 345 l0 135 l21 -107 z" fill="#576586"/>
     <path d="M780 330 l69 -11 l60 18 l37 34 l-75 1 l-23 1 l-21 -28 z" fill="#353A41"/>
     <path d="M946 371 l-75 1 l40 27 l4 44 l32 24 l4 51 l32 50 l-8 -130 z" fill="#030305"/>
     <path d="M915 443 l32 24 l4 51 l32 50 l-107 -31 l3 -23 l15 -16 l18 -29 l-25 -8 z" fill="#E4E9ED"/>
     <path d="M887 461 l25 8 l-18 29 l-61 7 l14 -27 l15 -12 z" fill="#DADADB"/>
     <path d="M848 373 l14 93 l-29 39 l-38 30 l-68 19 l100 -74 z" fill="#FEFCFD"/>
     <path d="M795 535 l38 -30 l61 -7 l-15 16 l-3 23 l-85 52 l-16 -27 l-48 -8 z" fill="#948868"/>
     <path d="M876 537 l-85 52 l-16 -27 l-48 -8 l3 44 l20 8 l68 71 z" fill="#C8CECC"/>
     <path d="M818 677 l58 -140 l107 31 l11 115 l-119 54 z" fill="#EEF4F2"/>
     <path d="M994 683 l6 21 l3 32 l-52 -3 z" fill="#010103"/>
     <path d="M994 683 l-43 50 l-76 4 z" fill="#BEC6BA"/>
     <path d="M727 554 l-71 4 l-122 82 l35 -3 l32 -7 l129 -32 z" fill="#46546A"/>
     <path d="M818 677 l-68 -71 l-20 -8 l-129 32 l-32 7 l-53 39 l20 -2 l54 2 l70 2 l112 -19 z" fill="#1E3646"/>
     <path d="M875 737 l-57 -60 l-46 -18 l-112 19 l-70 -2 l-54 -2 l-65 62 z" fill="#000104"/>

     <path d="M848 373 l23 -1 l40 27 l4 44 l-28 18 l-25 5 l-15 12 z" fill="#FBCC9B"/>
     <path d="M889 406 l12 7 l2 25 l-20 15 l-17 0 l-1 -41 z" fill="#053C91"/>
     <path d="M892 418 l-15 2 l-3 17 l15 -5 z" fill="#020200"/>
  </svg>
  <img src="https://image.freepik.com/free-vector/poly-art-animal-design_10250-4508.jpg">
  <script>
    function day(){
      document.getElementById('sun').classList.add('day');
      document.body.style.backgroundColor='#001A33';
      document.getElementById('sun').style.r='0';
    }
    function night(){
      document.getElementById('sun').classList.remove('day');
      document.body.style.backgroundColor='#AADDE4';
      document.getElementById('sun').style.r='100';
    }
  </script>
</body>
</html>