Team P’New

✨ SUPACHAI KHEAWJUY

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:hsl(var(--h),70%,90%);
        margin:1em;
        font-family:sans-serif;
        --h:320;
      }
      #panel{
        height:100%;
        width:50%;
        background:hsl(var(--h),70%,70%);
        position:fixed;
        left:0;
        top:0;
        padding:1em;
        box-sizing:border-box;
        transition:all .3s;
        left:-50%;
      }
      #panel[data-open="-1"]{
        left:-0%;
      }
      .btn{
        background:hsl(var(--h),80%,40%);
        color:white;
        padding:.5em;
        display:inline-block;
        margin-bottom:1em;
        cursor:pointer;
      }
      #control{
        width:20%;
        text-align:center;
        background:hsl(var(--h),70%,70%);
        position:fixed;
        bottom:0;
        padding:.5em;
        box-sizing:border-box;
        transition:all .3s;
        right:0;
      }
    </style>
  </head>
  <body id="content">
    <div class="open">
      <div class="btn" onclick=toggle()>
        Open Panel
      </div>
    </div>
    <div id="panel" data-open="1">
      <div class="btn" onclick=toggle()>
        Close
      </div>
      <div>
        คอร์รัปชันแทคติคเปียโน เซอร์วิสเอ็กซ์โปแจ๊กเก็ตอึ๋ม ออดิทอเรียม ม้ง ต่อรองโปรเจ็คท์แช่แข็งแบรนด์ไฮเอนด์ ตัวตนจัมโบ้ฮันนีมูนงี้ไตรมาส เรตมาร์ชอ่อนด้อยสปาย ภควัมปติอิออน ไนท์คลิปแรงดูดซิมโฟนี วีนแพลนซิมโฟนีพุดดิ้งซูโม่ วิดีโอผู้นำปาสเตอร์โชว์รูม ปาสเตอร์เบบี้แป๋ว แซลมอนโพลล์แอคทีฟ จุ๊ยละตินเหมย โอเปร่าภควัทคีตา แจ็กพ็อตพาร์ทเนอร์
      </div>
    </div>
    <div id="control">
      <div class="btn" onclick=toggle()>
        Toggle
      </div>
      <br>
      <div class="menu">
        Hue
      </div>
      <input id="h" type="range" min="0" max="360" value="100" oninput=color()>
    </div>
  </body>
  <script>
    function color(){
		var slide = document.getElementById("h").value;
      document.querySelector('#content').style.setProperty('--h', slide);
    }
    
    function toggle(){
		var state = document.querySelector("#panel");
      state.dataset.open *= -1;
    }
  </script>
</html>