Hello World! (Branch 6045)

✨ [EPR] Legend

<!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>พล ทธรรษ ธีรชูวิวัฒน์ (63070065)</title>
  <style>
    body{
      margin: 0;
      background:#f1f6ff;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align:center;
      font-family:sans-serif;
    }
    svg{
      background: white;
      box-shadow:0 0 20px #0002;
      width:100%;
    }
    .tran{
          transition: 1s;
    }
    .svg{
      background-color: transparent;
      width:100%;
    }
    .psa{
          position: absolute;
    }
    .minidoraemon{
          margin-top: 22vw;
          width: 5.5vw;
          height: 5.5vw;
          border-radius: 100%;
    }
    .handdoraemon{
          fill: white;
          transition: 1s;
    }
    .handdoraemon:hover{
          fill: #FA8072;
    }
    .leg{
      fill: white;
      transition: 1s;
    }
    .leg:hover{
          fill: darkmagenta;
    }
    .cloud{
          animation: move 5s infinite;
    }
    .move{
          animation: move 2s ease;
    }
    .move1{
          animation: move1 1s infinite;
    }
    .op0{
          opacity: 0;
    }
    .hidebox{
          width: 0;
          height: 0;
    }
    .boxbird{
      width: 15vw;
      height: 15vw;
    }
    .divtext{
          margin-bottom: 25vw;
          margin-left: 40vw;
          width: 10vw;
          height: 10vw;
          font-size: 2vw;
    }
    .divtext1{
          margin-top: 48vw;
          margin-right: 68vw;
          width: 10vw;
          height: 10vw;
          font-size: 2vw;
    }
    .divarrow{
          margin-bottom: 12vw;
          margin-left: 40vw;
          background-repeat: no-repeat;
          width: 4vw;
          height: 4vw;
          background-size: 100% auto;
          background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbfycfPTZ1JAImIjCvsw68uCTKkgMbmzuhmPdfmOVwxVJE8gpQtdKpDbho5xXlQDaP-w0&usqp=CAU);
    }
    .divarrowup{
          margin-right: 68vw;
          margin-top: 35vw;
          background-repeat: no-repeat;
          width: 4vw;
          height: 4vw;
          background-size: 100% auto;
          background-image: url(https://w7.pngwing.com/pngs/319/880/png-transparent-two-black-upward-arrows-art-logo-graphic-design-up-arrow-angle-web-design-text.png);
    }
    .pointer{
      cursor: pointer;
    }
    .divdoor{
          margin-bottom: 11vw;
          margin-right: 69vw;
          width: 17vw;
          height: 27vw;
    }
    .img{
          width: 100vw;
          height: 60vw;
    }
    .divimg1{
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-image: url(https://i.pinimg.com/originals/6c/0f/26/6c0f2642a74579ffae32abc1db4a966a.jpg);
    }
    .divimg2{
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-image: url(https://i.pinimg.com/originals/ff/a1/4d/ffa14d90a14787f4ea45cf845476962b.jpg);
    }
    .divimg3{
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-image: url(https://i.pinimg.com/originals/e6/95/ee/e695ee2afa08aa4833acf2e86af0155a.jpg);
    }
    @keyframes move1 {
          0%{
                transform: translateY(0);
          }
          50%{
                transform: translateY(-5%);
          }
          100%{
                transform: translateY(0);
          }
    }
    @keyframes move {
          0%{
                transform: translateY(0);
          }
          50%{
                transform: translateY(-2%);
          }
          100%{
                transform: translateY(0);
          }
    }
    @keyframes cloud {
          0%{
            transform: translateZ(0);
          }
          50%{
            transform: translateZ(-50vw);
          }
          100%{
            transform: translateZ(0);
          }
    }
  </style>
</head>
<body>
      <svg viewBox="0 0 100 60">
            <path id="sky" d="M0,0 
                  h100 v20 h-100 v-20"
                  fill="#00BFFF"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M0,20 
                  h100 v40 h-100 v-40"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M0,20 
                  c0,0 -5,-12 15,-18 c0,0 10,-5 15,18"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <ellipse class="pointer" id="sunandmoon" onclick="moon()" cx="34" cy="6" rx="5" ry="5" fill="red" stroke="black" stroke-width="0.2"/>
            <animate 
                  xlink:href="#sunandmoon"
                  attributeName="rx"
                  from="5"
                  to="8" 
                  dur="5s"
                  begin="click"
                  fill="none"/>
            <path d="M0,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M10,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
                  <path d="M0,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M20,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="30,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M40,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M50,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M60,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M70,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M80,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M90,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M100,25 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M5,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M15,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M25,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M35,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M45,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M45,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M45,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M45,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
                  <path d="M45,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M55,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
                  <path d="M45,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M65,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M75,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M85,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M95,35 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M10,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M20,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M30,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M40,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M50,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M60,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M70,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M80,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M90,45 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M5,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M15,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M25,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M35,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M45,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M55,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M65,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M75,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M85,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path d="M95,55 
                  l0,0 1,1 l0,0 1,-1"
                  fill="#228B22"
                  stroke="black"
                  stroke-width="0.3"/>
            <path onclick="changecolor()" id="cloud" class="cloud tran pointer" d="M70,5 
                  c0,0 2,-3 5,0 c0,0 2,-3 5,0 c0,0 2,-3 5,0 c0,0 2,-3 5,0 c0,0 2,-3 5,0  c0,0 3,3 0,5 c0,0 -2,3 -5,0 c0,0 -2,3 -5,0 c0,0 -2,3 -5,0 c0,0 -2,3 -5,0 c0,0 -2,3 -5,0 c0,0 -2,-3 0,-5"
                  fill="white"
                  stroke="black"
                  stroke-width="0.3"/>
            <circle class="pointer" id="headdoraemon" r="15" fill="#4682B4" cx="50" cy="20" stroke="black" stroke-width="0.5"/>
            <animate 
                  xlink:href="#headdoraemon"
                  attributeName="fill"
                  from="#4682B4"
                  to="purple" 
                  dur="2s"
                  begin="click"
                  fill="none"/>
            <ellipse cx="50" cy="22" rx="13" ry="11" fill="white" stroke="black" stroke-width="0.5"/>
            <path class="pointer" id="bodydoraemon" d="M39,34
                  l 0,0 -8,8 l0,0 5,4 l0,0 4,-4 v8 h8 c0,0 1.5,-4  4,0 h8 v-8 l0,0 4,4 l0,0 5,-4 l0,0 -8,-8"
                  fill="#4682B4"
                  stroke="black"
                  stroke-width="0.5"/> />
            <animate 
                  xlink:href="#bodydoraemon"
                  attributeName="fill"
                  from="#4682B4"
                  to="pink" 
                  dur="3s"
                  begin="click"
                  fill="none"/>
            <circle r="4" fill="white" cx="46" cy="14" stroke="black" stroke-width="0.5"/>
            <circle r="4" fill="white" cx="54" cy="14" stroke="black" stroke-width="0.5"/>
            <circle r="0.5" fill="black" cx="48" cy="16" stroke="black" stroke-width="0.5"/>
            <circle r="0.5" fill="black" cx="52" cy="16" stroke="black" stroke-width="0.5"/>
            <circle r="1.5" fill="red" cx="50" cy="18" stroke="black" stroke-width="0.5"/>
            <circle class="handdoraemon" r="4" cx="34" cy="43" stroke="black" stroke-width="0.5"/>
            <circle class="handdoraemon" r="4" cx="66" cy="43" stroke="black" stroke-width="0.5"/>
            <circle r="7.5" fill="white" cx="50" cy="38.5" stroke="black" stroke-width="0.5"/>
            <circle r="1.5" fill="yellow" cx="50" cy="35" stroke="black" stroke-width="0.5"/>
            <circle r="0.3" fill="black" cx="50" cy="35.2" stroke="black" stroke-width="0.5"/>
            <path d="M67,31 
                  l0,0 1,-1 l0,0 3,-1 h0.5 l0,0 3,0.5 l0,0 2.5,4 l0,0 5,5.8 l0,0 16,6.6 l0,0 -3,-0.2 l0,0 3.5,3.6 l0,0 -14,-6 l0,0 1,1 l0,0 -1,1 l0,0 -3.2,-2 l0,0 -3,2.5 l0,0 -2.5,2.5 l0,0 2.5,0.7 h-5.5 l0,0 2,-1 l0,0 2,-2.5 l0,0 -4.2,-2 l0,0 -2.5,-3 l0,0 -2.5,-7.9 h-5 l0,0 5,-2"
                  fill="white"
                  stroke="black"
                  stroke-width="0.1"/>
            <path d="M39,31 
                  h22 c0,0 2,1 0,3 h-22 c-2,-2.5 1,-3 0,-3"
                  fill="red"
                  stroke="black"
                  stroke-width="0.5"/>
            <path class="leg" id="leg1" d="M48,50
                  c0,0 1,1 0,3 h-9 c0,0 -1,-2 1,-3 h8"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path class="leg" id="leg2" d="M52,50
                  c0,0 -1,2 0,3 h9 c0,0 1,-3 -1,-3 h-8"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path class="pointer" onclick="minidoraemon()" d="M45,38
                  h10 c0,0 0,6 -5,6 c0,0 -5,0 -4.9,-6.2"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M50,35.2
                  v1.1"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M43,25
                  c0,0 6,6 14,0"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M50,19.5
                  v8"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M45,20
                  l0,0 -6,-1.5"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M55,20
                  l0,0 6,-1.5"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M45,21
                  l0,0 -6,0"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M55,21
                  l0,0 6,0"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M45,22
                  l0,0 -6,1.5"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <path d="M55,22
                  l0,0 6,1.5"
                  fill="white"
                  stroke="black"
                  stroke-width="0.5"/>/>
            <polygon id="peek18" points="71,29 68,30 72,30" style="fill:rgb(255, 193, 0);" />
            <polygon id="peek4" points="71.5,29 72.5,30 74.5,29.5" style="fill:rgb(255, 193, 0);" />
            <polygon id="peek5" points="67,31 68,30 72,30" style="fill:rgb(161, 121, 1);" />
            <polygon id="peek6" points="68,32 63,32.5 67,31" style="fill:rgb(255, 193, 0);" />
            <polygon id="peek7" points="68,32 63,32.5 67.5,32.5" style="fill:rgb(48, 39, 11);" />
            <circle id="peek8" r="0.2" fill="black" cx="68.5" cy="31.5" stroke="black" stroke-width="0.1"/>
            <polygon id="peek9" points="68,33 69,34 72.5,33 72,30.5" style="fill:rgb(48, 39, 11);" />
            <polygon id="peek10" points="74.5,29.5 76,32 73,33 72.5,30" style="fill:rgb(128, 103, 30);" />
            <polygon id="peek11" points="71.5,33.7 73,39 73,42 69,34.5" style="fill:rgb(128, 103, 30);" />
            <polygon id="peek1" points="72,34 73.5,39 85,45" style="fill:rgb(255, 193, 0);" />
            <polygon id="peek2" points="72,33.5 80,37 85,44.5" style="fill:rgb(128, 103, 30);" />
            <polygon id="peek3" points="72,33.5 80,37 76,32.5" style="fill:rgb(255, 193, 0);" />
            <polygon id="bird1" points="82,39.5 84.5,43 92,44.5" style="fill:rgb(128, 103, 30);" />
            <polygon id="bird2" points="85,41 91.5,44.5 98,46" style="fill:rgb(255, 193, 0);" />
            <polygon id="bird3" points="88,44 95,46 98,49" style="fill:rgb(48, 39, 11);" />
            <polygon id="peek12" points="73.2,43 73.5,40 81,43" style="fill:rgb(88, 69, 11);" />
            <polygon id="peek13" points="68.7,35 70.5,41 73.2,43.5" style="fill:rgb(88, 69, 11);"/>
            <polygon id="peek14" points="73.2,43.5 78,45.5 81,43.5" style="fill:rgb(48, 39, 11);"/>
            <polygon id="peek15" points="78,46 77,45.5 75,48 75,49" style="fill:rgb(88, 69, 11);"/>
            <polygon id="peek16" points="73,49 75,49 75,48" style="fill:rgb(48, 39, 11);"/>
            <polygon id="peek17" points="78,49 75,49 75,48" style="fill:rgb(48, 39, 11);"/>

<path d="M3,5
                  h24 v2 c0,0 0,1 -1,1 h-22 c0,0 -1,0 -1,-1 v-2"
                  fill="#FF69B4"
                  stroke="black"
                  stroke-width="0.3"/>/>
            <path d="M4,8
                  v32 h22 v-32 h-22"
                  fill="#FF69B4"
                  stroke="black"
                  stroke-width="0.3"/>/>
            <path d="M4,40
                  h22 c0,0 1,0.5 1,3 h-3 v-1 h-18 v1 h-3 c0,0 -0.5,-2 1,-3"
                  fill="#FF69B4"
                  stroke="black"
                  stroke-width="0.3"/>/>
            <path d="M6,10
                  h18 v28 h-18 v-28"
                  fill="#C71585"
                  stroke="black"
                  stroke-width="0.2"/>/>
            <path d="M6.5,10.5
                  h17 v27 h-17 v-27"
                  fill="black"
                  stroke="black"
                  stroke-width="0.2"/>/>
            <circle r="8" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="7" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="6" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="5" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="4" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="3" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="2" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="1" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <circle r="0.1" fill="black" cx="15" cy="24" stroke="white" stroke-width="0.3"/>
            <path id="door"d="M6.5,10.5
                  h17 v27 h-17 v-27"
                  fill="#FF69B4"
                  stroke="black"
                  stroke-width="0.2"/>/>
            <path d="M6,10
                  l0,0 0.5,0.5"
                  fill="pink"
                  stroke="black"
                  stroke-width="0.2"/>/>
            <path d="M23.5,37.5
                  l0,0 0.5,0.5"
                  fill="pink"
                  stroke="black"
                  stroke-width="0.2"/>/>
            <path d="M23.5,10.5
                  l0,0 0.5,-0.5"
                  fill="pink"
                  stroke="black"
                  stroke-width="0.2"/>/>
            <path d="M6,38
                  l0,0 0.5,-0.5"
                  fill="pink"
                  stroke="black"
                  stroke-width="0.2"/>/>
            <circle id="lookbit1" r="1.2" fill="gray" cx="8" cy="26" stroke="black" stroke-width="0.2"/>
            <circle id="lookbit2" r="0.7" fill="gray" cx="8" cy="26" stroke="black" stroke-width="0.2"/>
      </svg>
  <div class="boxbird psa pointer" style="right: 15vw; margin-top: 16vw;" onclick="move()"></div>
  <div id="mini" onclick="minidoraemon1()" class="psa minidoraemon op0 hidebox pointer">
      <svg class="svg" viewBox="0 0 100 100">
            <circle r="40" fill="yellow" cx="50" cy="50" stroke="black" stroke-width="0.5"/>
            <ellipse cx="50" cy="60" rx="32" ry="30" fill="white" stroke="black" stroke-width="0.5"/>
            <path d="M30,85 
            h40 c0,0 2,2 0,5 h-40 c-2,-2.5 1,-6 0,-5"
            fill="red"
            stroke="black"
            stroke-width="0.5"/>
            <circle r="4" fill="yellow" cx="50" cy="92" stroke="black" stroke-width="0.5"/>
            <circle r="1" fill="black" cx="50" cy="92" stroke="black" stroke-width="0.5"/>
            <path d="M50,92
            v4"
            fill="white"
            stroke="black"
            stroke-width="1"/>/>
            <circle r="9" fill="white" cx="41" cy="32" stroke="black" stroke-width="0.5"/>
            <circle r="9" fill="white" cx="59" cy="32" stroke="black" stroke-width="0.5"/>
            <circle r="2" fill="black" cx="46" cy="34" stroke="black" stroke-width="0.5"/>
            <circle r="2" fill="black" cx="54" cy="34" stroke="black" stroke-width="0.5"/>
            <circle r="3" fill="red" cx="50" cy="44" stroke="black" stroke-width="0.5"/>
            <path d="M34,72
            c0,0 5,5 16,5 c0,0 7,0 16,-5"
            fill="white"
            stroke="black"
            stroke-width="0.5"/>/>
            <path d="M50,47
            v30"
            fill="white"
            stroke="black"
            stroke-width="0.5"/>/>
            <path d="M40,50
            l0,0 -15,-5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,50
            l0,0 15,-5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,54
            l0,0 15,0"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M40,54
            l0,0 -15,0"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M40,58
            l0,0 -15,5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,58
            l0,0 15,5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
      </svg>
  </div>
  <div id="mini1" onclick="minidoraemon2()" class="psa minidoraemon op0 hidebox pointer">
      <svg class="svg" viewBox="0 0 100 100">
            <circle r="40" fill="red" cx="50" cy="50" stroke="black" stroke-width="0.5"/>
            <ellipse cx="50" cy="60" rx="32" ry="30" fill="white" stroke="black" stroke-width="0.5"/>
            <path d="M30,85 
            h40 c0,0 2,2 0,5 h-40 c-2,-2.5 1,-6 0,-5"
            fill="red"
            stroke="black"
            stroke-width="0.5"/>
            <circle r="4" fill="yellow" cx="50" cy="92" stroke="black" stroke-width="0.5"/>
            <circle r="1" fill="black" cx="50" cy="92" stroke="black" stroke-width="0.5"/>
            <path d="M50,92
            v4"
            fill="white"
            stroke="black"
            stroke-width="1"/>/>
            <circle r="9" fill="white" cx="41" cy="32" stroke="black" stroke-width="0.5"/>
            <circle r="9" fill="white" cx="59" cy="32" stroke="black" stroke-width="0.5"/>
            <circle r="2" fill="black" cx="46" cy="34" stroke="black" stroke-width="0.5"/>
            <circle r="2" fill="black" cx="54" cy="34" stroke="black" stroke-width="0.5"/>
            <circle r="3" fill="red" cx="50" cy="44" stroke="black" stroke-width="0.5"/>
            <path d="M34,72
            c0,0 5,5 16,5 c0,0 7,0 16,-5"
            fill="white"
            stroke="black"
            stroke-width="0.5"/>/>
            <path d="M50,47
            v30"
            fill="white"
            stroke="black"
            stroke-width="0.5"/>/>
            <path d="M40,50
            l0,0 -15,-5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,50
            l0,0 15,-5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,54
            l0,0 15,0"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M40,54
            l0,0 -15,0"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M40,58
            l0,0 -15,5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,58
            l0,0 15,5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
      </svg>
  </div>
  <div id="mini2" class="psa minidoraemon op0 hidebox">
      <svg class="svg" viewBox="0 0 100 100">
            <circle r="40" fill="green" cx="50" cy="50" stroke="black" stroke-width="0.5"/>
            <ellipse cx="50" cy="60" rx="32" ry="30" fill="white" stroke="black" stroke-width="0.5"/>
            <path d="M30,85 
            h40 c0,0 2,2 0,5 h-40 c-2,-2.5 1,-6 0,-5"
            fill="red"
            stroke="black"
            stroke-width="0.5"/>
            <circle r="4" fill="yellow" cx="50" cy="92" stroke="black" stroke-width="0.5"/>
            <circle r="1" fill="black" cx="50" cy="92" stroke="black" stroke-width="0.5"/>
            <path d="M50,92
            v4"
            fill="white"
            stroke="black"
            stroke-width="1"/>/>
            <circle r="9" fill="white" cx="41" cy="32" stroke="black" stroke-width="0.5"/>
            <circle r="9" fill="white" cx="59" cy="32" stroke="black" stroke-width="0.5"/>
            <circle r="2" fill="black" cx="46" cy="34" stroke="black" stroke-width="0.5"/>
            <circle r="2" fill="black" cx="54" cy="34" stroke="black" stroke-width="0.5"/>
            <circle r="3" fill="red" cx="50" cy="44" stroke="black" stroke-width="0.5"/>
            <path d="M34,72
            c0,0 5,5 16,5 c0,0 7,0 16,-5"
            fill="white"
            stroke="black"
            stroke-width="0.5"/>/>
            <path d="M50,47
            v30"
            fill="white"
            stroke="black"
            stroke-width="0.5"/>/>
            <path d="M40,50
            l0,0 -15,-5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,50
            l0,0 15,-5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,54
            l0,0 15,0"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M40,54
            l0,0 -15,0"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M40,58
            l0,0 -15,5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
            <path d="M60,58
            l0,0 15,5.5"
            fill="white"
            stroke="black"
            stroke-width="0.7"/>/>
      </svg>
  </div>
  <div class="psa divtext move1">
        <h1 style="color: white;">Click</h1>
  </div>
  <div class="psa divarrow move1"></div>
  <div class="divdoor psa pointer" onclick="isekai()"></div>
  <div class="psa divarrowup move1"></div>
  <div class="psa divtext1 move1">
      <h1 style="color: white;">Click</h1>
  </div>
  <div id="img1" onclick="tran1()" class="divimg1 psa pointer"></div>
  <div id="img2" onclick="tran2()" class="divimg2 psa pointer"></div>
  <div id="img3" onclick="tran3()" class="divimg3 psa pointer"></div>
  <script>
        let color = 0;
        function changecolor(){
            console.log(color);
            if (color == 0){document.getElementById('cloud').style.fill='red'; color++;}
            else if (color == 1){document.getElementById('cloud').style.fill='orange'; color++;}
            else if (color == 2){document.getElementById('cloud').style.fill='purple'; color++;}
            else if (color == 3){document.getElementById('cloud').style.fill='cyan'; color++;}
            else if (color == 4){document.getElementById('cloud').style.fill='green'; color++;}
            else if (color == 5){document.getElementById('cloud').style.fill='yellow'; color++;}
            else if (color == 6){document.getElementById('cloud').style.fill='black'; color++;}
            else if (color == 7){document.getElementById('cloud').style.fill='white'; color=0;}
        }
        function isekai(){
              document.getElementById('lookbit1').remove();
              document.getElementById('lookbit2').remove();
              document.getElementById('door').remove();
              function tran(){
                  document.getElementById('img1').classList.add('img');
              }
              setTimeout(tran,2000)
        }
        function tran1(){
            document.getElementById('img1').classList.remove('img');
            document.getElementById('img2').classList.add('img');
        }
        function tran2(){
            document.getElementById('img2').classList.remove('img'); 
            document.getElementById('img3').classList.add('img');
        }
        function tran3(){
            document.getElementById('img3').classList.remove('img');  
        }
        function minidoraemon(){
              document.getElementById('mini').classList.remove('op0');
              document.getElementById('mini').classList.remove('hidebox');
        }
        function minidoraemon1(){
              document.getElementById('mini').remove();
              document.getElementById('mini1').classList.remove('op0');
              document.getElementById('mini1').classList.remove('hidebox');
        }
        function minidoraemon2(){
            document.getElementById('mini1').remove();
              document.getElementById('mini2').classList.remove('op0');
              document.getElementById('mini2').classList.remove('hidebox');
              function remove(){
                    document.getElementById('mini2').remove();
              }
              setTimeout(remove,2000);
        }
        function move(){
            document.getElementById('bird1').classList.add('move');
            document.getElementById('bird2').classList.add('move');
            document.getElementById('bird3').classList.add('move');
            document.getElementById('bird1').style.fill='greenyellow';
            document.getElementById('bird2').style.fill='pink';
            document.getElementById('bird3').style.fill='brown';
            document.getElementById('peek1').style.fill='cyan';
            document.getElementById('peek2').style.fill='purple';
            document.getElementById('peek3').style.fill='yellow';
            document.getElementById('peek4').style.fill='orange';
            document.getElementById('peek5').style.fill='blue';
            document.getElementById('peek6').style.fill='green';
            document.getElementById('peek7').style.fill='yellowgreen';
            document.getElementById('peek8').style.fill='pink';
            document.getElementById('peek9').style.fill='black';
            document.getElementById('peek10').style.fill='red';
            document.getElementById('peek12').style.fill='cyan';
            document.getElementById('peek12').style.fill='purple';
            document.getElementById('peek13').style.fill='yellow';
            document.getElementById('peek14').style.fill='orange';
            document.getElementById('peek15').style.fill='blue';
            document.getElementById('peek16').style.fill='green';
            document.getElementById('peek17').style.fill='red';
            document.getElementById('peek18').style.fill='brown';
            function remove(){
                  document.getElementById('bird1').classList.remove('move');
                  document.getElementById('bird2').classList.remove('move');
                  document.getElementById('bird3').classList.remove('move');
                  document.getElementById('bird1').style.fill='rgb(128, 103, 30)';
                  document.getElementById('bird2').style.fill='rgb(255, 193, 0)';
                  document.getElementById('bird3').style.fill='rgb(48, 39, 11)';
                  document.getElementById('peek1').style.fill='rgb(255, 193, 0)';
                  document.getElementById('peek2').style.fill='rgb(128, 103, 30)';
                  document.getElementById('peek3').style.fill='rgb(255, 193, 0)';
                  document.getElementById('peek4').style.fill='rgb(255, 193, 0)';
                  document.getElementById('peek5').style.fill='rgb(161, 121, 1)';
                  document.getElementById('peek6').style.fill='rgb(255, 193, 0)';
                  document.getElementById('peek7').style.fill='rgb(48, 39, 11)';
                  document.getElementById('peek8').style.fill='black';
                  document.getElementById('peek9').style.fill='rgb(48, 39, 11)';
                  document.getElementById('peek10').style.fill='rgb(128, 103, 30)';
                  document.getElementById('peek12').style.fill='rgb(128, 103, 30)';
                  document.getElementById('peek12').style.fill='rgb(88, 69, 11)';
                  document.getElementById('peek13').style.fill='rgb(88, 69, 11)';
                  document.getElementById('peek14').style.fill='rgb(48, 39, 11)';
                  document.getElementById('peek15').style.fill='rgb(88, 69, 11)';
                  document.getElementById('peek16').style.fill='rgb(48, 39, 11)';
                  document.getElementById('peek17').style.fill='rgb(48, 39, 11)';
                  document.getElementById('peek18').style.fill='rgb(255, 193, 0)';
            }
            setTimeout(remove,2000)
        }
        function moon(){
              document.getElementById('sunandmoon').style.fill='yellow';
              document.getElementById('sky').style.fill='black';
              document.getElementById('cloud').classList.add('op0');
              function time(){
                  document.getElementById('sunandmoon').style.fill='red';
                  document.getElementById('sky').style.fill='#00BFFF';
                  document.getElementById('cloud').classList.remove('op0');
              }
              setTimeout(time,5000);
        }
  </script>
</body>
</html>