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>