Welcome to CODEBOX! (Branch 2207)

✨ Thanawat Jantawong

<!-- <html>
	<head>
		<meta charset="utf-8">
		<title>ScieCode</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
      <style>
        html, body {
           height: 100%;
          overflow: hidden;
          background-color: #000;
        }

body {
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
     </style>
	</head>
	<body>
		
	</body>
  <script>
  
    var c1,c2;
    var N = 150;
    var n = 100;
    var t = 80;
    var b = 60;
    var th = 0;

var back = [];
    var middle = [];
    var inter = [];
    var front = [];
    var points = [];

var planet, planet2;
    var sz, msz;

var viewport;
    
    function setup() {
       var density = displayDensity();
       pixelDensity(density);
       createCanvas(windowWidth, windowHeight);
       c1 = color("#140c35");
       c2 = color("#1dada4");
       c3 = color("#edf683");
       c4 = color("#fcfdef");

viewport = min( windowHeight, windowWidth );

planet = createVector(viewport/4.1, -viewport/5);

sz = viewport/7;
       msz = sz/4;

frameRate(60);

init();
    }

function windowResized() {
       resizeCanvas(windowWidth, windowHeight);

viewport = min( windowHeight, windowWidth );

planet = createVector(viewport/4.1, -viewport/5);

sz = viewport/7;
       msz = sz/4;
    }

function init() {

for ( var i = 0; i < N; i++ ) {
          var color;
          if ( i/(N-1) < 1/3 ){
             color = lerpColor( c1, c2, i/(N/3) );
          } else if ( i/(N-1) < 2/3 ) {
             color = lerpColor( c2, c3, (i-N/3)/(N/3) );
          } else {
             color = lerpColor( c3, c4, (i-2*N/3)/(N/3-1) );
          }
          color.setAlpha( 20 + 5*i/(N-1) );
          back.push([color]);
       }

for ( var i = 0; i < b; i++ ) {
          var color;
          if ( i/(b-1) < 1/3 ){
             color = lerpColor( c1, c2, min( i/(b/3) + random(0, 0.15), 1 ) );
          } else if ( i/(b-1) < 2/3 ) {
             color = lerpColor( c2, c3, min( (i-b/3)/(b/3) + random(0, 0.15), 1 ) );
          } else {
             color = lerpColor( c3, c4, min( (i-2*b/3)/(b/3-1) + random(0, 0.15), 1 ) );
          }

color.setAlpha( 70 + 5*i/(b-1) );
          r = random( 5, 9 );
          k = 0;
          middle.push([]);
          for ( var j = 0; j < r; j++ ) {
             var x = random( k, k+(TWO_PI-0.01)/r/2 );
             var y = random( k+(TWO_PI-0.01)/r/2, k+(TWO_PI-0.01)/r );
             if ( y < x ) {
                tmp = x;
                x = y;
                y = x;
             }
             var dir = 1;
             if ( random(0,1) < 0.5) 
                dir *= -1;
             middle[i].push([color, x, y, dir ]);
             k += (TWO_PI-0.01)/r;
          }
       }

for ( var i = 0; i < t; i++ ) {
          var color;
          if ( i/(t-1) < 1/3 ){
             color = lerpColor( c1, c2, max( i/(t/3) + random(0, -0.3), 0 ) );
          } else if ( i/(t-1) < 2/3 ) {
             color = lerpColor( c2, c3, max( (i-t/3)/(t/3) + random(0, -0.3), 0 ) );
          } else {
             color = lerpColor( c3, c4, max( (i-2*t/3)/(t/3-1) + random(0, -0.3), 0 ) );
          }

color.setAlpha( 70 + 5*i/(t-1) );
          r = random( 9, 15 );
          k = 0;
          inter.push([]);
          for ( var j = 0; j < r; j++ ) {
             var x = random( k, k+(TWO_PI-0.01)/r/2 );
             var y = random( k+(TWO_PI-0.01)/r/2, k+(TWO_PI-0.01)/r );
             if ( y < x ) {
                tmp = x;
                x = y;
                y = x;
             }
             var dir = 1;
             if ( random(0,1) < 0.5) 
                dir *= -1;
             inter[i].push([color, x, y, dir ]);
             k += (TWO_PI-0.01)/r;
          }
       }

for ( var i = 0; i < n; i++ ) {
          var color;
          if ( i/(n-1) < 1/3 ){
             color = lerpColor( c1, c2, min( i/(n/3) + random(0, 0.15), 1 ) );
          } else if ( i/(n-1) < 2/3 ) {
             color = lerpColor( c2, c3, min( (i-n/3)/(n/3) + random(0, 0.15), 1 ) );
          } else {
             color = lerpColor( c3, c4, min( (i-2*n/3)/(n/3-1) + random(0, 0.15), 1 ) );
          }

color.setAlpha( 155 + 100*i/(n-1) );

r = random( 3, 6 );
          k = 0;
          front.push([]);
          for ( var j = 0; j < r; j++ ) {
             var x = random( k, k+(TWO_PI-0.01)/r/2 );
             var y = random( k+(TWO_PI-0.01)/r/2, k+(TWO_PI-0.01)/r );
             if ( y < x ) {
                tmp = x;
                x = y;
                y = x;
             }
             if ( i % 4 < 1 ) continue;
             var dir = 1;
             if ( random(0,1) < 0.5) 
                dir *= -1;
             front[i].push([ color, x, y, dir ]);
             k += (TWO_PI-0.01)/r;
          }
       }

for ( var i = 0; i < n; i++ ) {
          var color;
          if ( i/(n-1) < 1/3 ){
             color = lerpColor( c1, c2, max( min( i/(n/3) + random(-0.3, 0.3), 1 ), 0) );
          } else if ( i/(n-1) < 2/3 ) {
             color = lerpColor( c2, c3, max( min( (i-n/3)/(n/3) + random(-0.3, 0.3), 1 ), 0) );
          } else {
             color = lerpColor( c3, c4, max( min( (i-2*n/3)/(n/3-1) + random(-0.3, 0.3), 1 ), 0) );
          }

color.setAlpha( 155 + 100*random(-1,1) );
          r = random( 8, 16 );
          k = 0;
          points.push([]);
          for ( var j = 0; j < r; j++ ) {
             var ang = random( k, k+(TWO_PI-0.01)/r );
             var dir = random(-1,1);
             points[i].push([ color, ang, dir ]);
             k += (TWO_PI-0.01)/r;
          }
       }
    }

function draw() {
       background("#140c25");

scale(1, -1);
       translate(0, -windowHeight);

translate( windowWidth/2 , windowHeight/2 );

noStroke();
       for ( var i = 0; i < N; i++ ) {
          item = back[i];
          fill( item[0] );
          ellipse( 0, 0, (viewport-40)*( 1-i/(N+1) ) );
       }

noFill();
       strokeWeight( (viewport-40)/2/(b+1) );
       for ( var i = 0; i < b; i++ ) {
          group = middle[i];
          for ( var j = 0; j < group.length; j++ ) {
             item = group[j];

stroke( item[0] );
             arc( 0, 0, (viewport-40)*( 1-i/(b+1) ), (viewport-40)*( 1-i/(b+1) ), item[1]+th/8*(1.5+(1 - i/(b+1)))*item[3], item[2]+th/8*(1.5+(1 - i/(b+1)))*item[3] );
          }
       }

strokeWeight( (viewport-40)/2/(t+1) );
       for ( var i = 0; i < t; i++ ) {
          group = inter[i];
          for ( var j = 0; j < group.length; j++ ) {
             item = group[j];
             stroke( item[0] );
             arc( 0, 0, (viewport-40)*( 1-i/(t+1) ), (viewport-40)*( 1-i/(t+1) ), item[1]+th/6*(1.5+(1 - i/(t+1)))*item[3], item[2]+th/6*(1.5+(1 - i/(t+1)))*item[3] );
          }
       }

strokeWeight( (viewport-40)/2/(n+1) );
       for ( var i = 0; i < n; i++ ) {
          group = front[i];
          for ( var j = 0; j < group.length; j++ ) {
             item = group[j];
             stroke( item[0] );
             arc( 0, 0, (viewport-40)*( 1-i/(n+1) ), (viewport-40)*( 1-i/(n+1) ), item[1] + th/2*(1.5+(1 - i/(n+1))/2)*item[3] , item[2]+th/2*(1.5+(1 - i/(n+1))/2)*item[3] );
          }
       }

strokeWeight( (viewport-40)/(n+1)/2 );
       for ( var i = 0; i < n; i++ ) {
          group = points[i];
          for ( var j = 0; j < group.length; j++ ) {
             item = group[j];
             stroke( item[0] );
             r = (viewport)*( 1-i/(n+1) );
             arc( 0, 0, r, r, item[1] + th/2*(1.5+(1 - i/(n+1))/2)*item[2] , item[1] + th/2*(1.5+(1 - i/(n+1))/2)*item[2] + 0.0001 );
          }
       }

push();
       noStroke();
       rotate(2*th/3);
       // planet.set( mouseX - windowWidth/2, -mouseY + windowHeight/2, 0 );
       for ( var i = 0; i < N; i++ ) {

var j = i/(N-1);
          push();
          translate( planet.x, planet.y );
          var norm = planet.copy().normalize();
          translate( norm.x*msz*j/2+0.1, norm.y*msz*j/2+0.1 );
          rotate( planet.heading() );
          var k1 = lerpColor( c2, c3, 0.5);
          var k2 = lerpColor( c1, c2, 0.2);
          var s = map ( 1-(planet.mag()/viewport), 0, 0.999, 0, 0.5 ) ;
          var k = lerpColor( k1, k2, pow(j, s) );
          k.setAlpha( 25 );
          fill( k );
          ellipse( 0, 0, sz-msz*j, sz-msz*j*0.36 );
          pop();
       }
       pop();

th += 0.01;

}

window.addEventListener('orientationchange', windowResized);
  </script>
</html> -->

<!-- 
<style>
  *{
	margin: 0;
    padding:0;
    box-sizing: border-box;
  }
  :root{
	 --white: #fff;
    --black: #000;
  }
  
  body {
height: 100vh;
  	background-color: var(--black);
    display: flex;
    align-items: center;
    justify-content:center;
    color: var(--white);
  }
  
  .dark{
	--white: #000;
    --black: #fff;
  }
</style>
<html>
  <body class="">
    
  
  <div>
    Hello World
    <button id="dark-mode-toggle" style="margin-left: 10px">
      darkmode
    </button>
  </div>
 </body>
</html>
<script>
let darkMode = localStorage.getItem('dark')
const darkModeToggle = document.querySelector('#dark-mode-toggle');
  
  console.log(darkMode)
  
const enableDarkMode = () => {
	document.body.classList.add("dark");
  
  localStorage.setItem("darkMode", "enabled")
}

const disableDarkMode = () => {
	document.body.classList.remove("dark");
  
  localStorage.setItem("darkMode", null)
}

darkModeToggle.addEventListener("click", ()=>{
	// console.log("test")
  darkMode = localStorage.getItem("darkMode");
  if(darkMode !== "enabled"){
		enableDarkMode();
    console.log(darkMode)
  } else {
		disableDarkMode();
    console.log(darkMode)
  }
})
</script> -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebar</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
  </head>
  <body class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;">
    <div>
      <div x-data="{ sidebarOpen: false }">
        <div class="flex h-screen bg-gray-100 font-roboto">
          <div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false" class="fixed z-20 inset-0 bg-black opacity-50 xl:hidden"></div>

<div :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" class="fixed z-30 inset-y-0 left-0 w-56 transition duration-300 transform bg-white overflow-y-auto xl:translate-x-0 xl:static xl:inset-0">
            <div class="flex items-center justify-center mt-8">
              <div class="flex items-center">
                <span class="text-gray-800 text-2xl font-semibold">Dashboard</span>
              </div>
            </div>

<nav class="flex flex-col mt-10 px-4 text-center">
              <a href="#"
              class="py-2 text-sm text-gray-700 dark:text-gray-100 bg-gray-200 dark:bg-gray-800 rounded">Overview</a>
              <a href="#"
              class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100  hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Tickets</a>
              <a href="#"
              class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Ideas</a>
              <a href="#"
              class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Contacts</a>
              <a href="#"
              class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Settings</a>
            </nav>
          </div>

<div class="relative w-full flex flex-col h-screen overflow-x-hidden">
            
            <header class="flex justify-between items-center p-6">
              <div class="flex items-center space-x-4 xl:space-x-0">
                <button @click="sidebarOpen = true" class="text-gray-500 focus:outline-none xl:hidden">
                  <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </button>

<div>
                  <h1 class="text-2xl font-medium text-red-800">MHorizontal</h1>
                </div>
              </div>

<div x-data="{ dropdownOpen: false }" class="relative">
                  <button @click="dropdownOpen = ! dropdownOpen" class="flex items-center space-x-2 relative focus:outline-none">
                    <h2 class="text-gray-700 text-sm hidden sm:block">Super Admin</h2>
                      <img class="h-9 w-9 rounded-full border-2 border-purple-500 object-cover"
                      src="https://images.unsplash.com/photo-1553267751-1c148a7280a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                      alt="Your avatar">
                  </button>

<div class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-10"
                    x-show="dropdownOpen"
                    x-transition:enter="transition ease-out duration-100 transform"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75 transform"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                    @click.away="dropdownOpen = false">
                    <a href="#"
                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-600 hover:text-white">Profile</a>
                    <a href="#"
                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-600 hover:text-white">Tickets</a>
                    <a href=""
                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-600 hover:text-white">Logout</a>
                  </div>
                </div>
              </div>
            </header>

<main class="flex-1 overflow-x-hidden overflow-y-auto">
              <div class="container mx-auto px-6 py-8">
                <div class="grid place-items-center h-96 text-gray-500 text-xl">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque id dignissimos sapiente dolore tempore commodi sequi aliquam similique exercitationem nemo nostrum cupiditate, laudantium debitis adipisci facere explicabo distinctio vitae maxime voluptas et repellat magni. Odit nihil placeat similique aperiam sunt? Vitae, aliquam architecto voluptate exercitationem amet deserunt recusandae harum quam!

<p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque id dignissimos sapiente dolore tempore commodi sequi aliquam similique exercitationem nemo nostrum cupiditate, laudantium debitis adipisci facere explicabo distinctio vitae maxime voluptas et repellat magni. Odit nihil placeat similique aperiam sunt? Vitae, aliquam architecto voluptate exercitationem amet deserunt recusandae harum quam!
                    </p>