ey make the animations for this script better once the HTML is loaded make it slowly fades in the items. and make it have a bar on the top left bottom of the screen that has a animation when u hover over it slides up and when u click settings it opens a little UI screen the same like the css and there will be 3 settings. first setting
1 - dark mode and light mode toggle - this will have an animation fading to dark and light easily accessible please.
2 - particles theme - make it get that JavaScript site code for particles effect like snow and others please make it have a drop-down make all the settings have css to.
3 - make a setting called enable drag button to space. - this will enable drag buttons when u hold down on a button u can pick it up and drag it into between a button and it slides in the place with animation and it will save to local storage everytime u come here this is good for saving.
make sure css have settings for all of this and make it good please

<!DOCTYPE html>
<html>
<head>
<title>Games List</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<div class="box">
<input type="text" id="gsearchbar" onkeyup="document.querySelectorAll('#glist>a').forEach(l=>l.style.display=l.textContent.toUpperCase().includes(this.value.toUpperCase().replace(/ /g,''))?'block':'none')" autocomplete="off" spellcheck="false" placeholder="Search" />
<div id="glist">
<h2>HTML5 Games</h2>
<a href="./gfiles/html5/2048/index.html">2048</a>
<a href="./gfiles/html5/adarkroom/index.html">A Dark Room</a>
<a href="./gfiles/html5/asciispace/index.html">ASCII Space</a>
<a href="./gfiles/html5/asteroids/index.html">Asteroids</a>
<a href="./gfiles/html5/astray/index.html">Astray</a>
<a href="./gfiles/html5/Fnf/fnf.html">Friday Night Funkin'</a>
<a href="./gfiles/html5/blackholesquare/index.html">Black Hole Square</a>
<a href="./gfiles/html5/bounceback/index.html">Bounce Back</a>
<a href="./gfiles/html5/breaklock/index.html">Breaklock</a>
<a href="./gfiles/html5/breakout/index.html">Breakout</a>
<a href="./gfiles/html5/captaincallisto/index.html">Captain Callisto</a>
<a href="./gfiles/html5/chess/index.html">Chess</a>
<a href="./gfiles/html5/chromaincident/index.html">Chroma Incident</a>
<a href="./ChromeD.html">Chrome-Dino</a>
<a href="./gfiles/html5/connect3/index.html">Connect 3</a>
<a href="./Pacman.html">Pac-Man</a>
<a href="./gfiles/html5/cookieclicker/index.html">Cookie Clicker</a>
<a href="./gfiles/html5/edgenotfound/index.html">Edge not Found</a>
<a href="./gfiles/html5/evilglitch/index.html">Evil Glitch</a>
<a href="./gfiles/html5/factoryballsforever/index.html">Factory Balls Forever</a>
<a href="./gfiles/html5/flappybird/index.html">Flappy Bird</a>
<a href="./gfiles/html5/geometrydash/index.html">Geometry Dash</a>
<a href="./gfiles/html5/hextris/index.html">Hextris</a>
<a href="./Selecter.html">Five nights at freddys</a>
<a href="./gfiles/html5/konnekt/index.html">Konnekt</a>
<a href="./gfiles/html5/minecraft/index.html">Minecraft</a>
<a href="./gfiles/html5/ninjavsevilcorp/index.html">Ninja vs Evilcorp</a>
<a href="./gfiles/html5/packabunchas/index.html">Packabunchas</a>
<a href="./gfiles/html5/particleclicker/index.html">Particle Clicker</a>
<a href="./gfiles/html5/pushback/index.html">Push Back</a>
<a href="./gfiles/html5/q1k3/index.html">Q1k3</a>
<a href="./gfiles/html5/racer/index.html">Racer</a>
<a href="./Sponge.html">SpongeBob games</a>
<a href="./gfiles/html5/radiusraid/index.html">Radius Raid</a>
<a href="./gfiles/html5/retrohaunt/index.html">Retrohaunt</a>
<a href="./gfiles/html5/roadblocks/index.html">Road Blocks</a>
<a href="./gfiles/html5/shuttledeck/index.html">Shuttledeck</a>
<a href="./gfiles/html5/sleepingbeauty/index.html">Sleeping Beauty</a>
<a href="./gfiles/html5/spacecompany/index.html">Space Company</a>
<a href="./gfiles/html5/spacegarden/index.html">Space Garden</a>
<a href="./gfiles/html5/spacehuggers/index.html">Space Huggers</a>
<a href="./gfiles/html5/tetris/index.html">Tetris</a>
<a href="./gfiles/html5/themazeofspacegoblins/index.html">The Maze of Space Goblins</a>
<a href="./gfiles/html5/towermaster/index.html">Towermaster</a>
<a href="./gfiles/html5/trimps/index.html">Trimps</a>
<a href="./gfiles/html5/underrun/index.html">Underrun</a>
<a href="./gfiles/html5/xx142-b2exe/index.html">xx142-b2.exe</a>
<a href="./gfiles/html5/FullScreenMario-master/index.html">Super-Mario-Bros</a>
<a href="./gfiles/html5/MicrosoftEdge-SURF-master/index.html">Edge-Surf</a> 
<a href="./gfiles/html5/Awesome-tanks/awesome-tanks.html">Awesome-Tanks</a>
<h2>BM-Games</h2>
</div>
</div>
</div>
<script> </script>
</body>
</html>

here's my css make it seperate

body {
	background-color: black;
	color: white;
	font-family: sans-serif;
}

.container {
	padding: 20px;
}

.box {
	margin: auto;
	background-color: white;
	padding: 10px;
	width: 400px;
}

#glist {
	overflow-x: hidden;
	overflow-y: scroll;
	width: 400px;
	height: 520px;
	padding: 0;
	text-align: center;
}

#gsearchbar {
	outline: none;
	width: 374px;
	font-size: 16px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	padding: 12px;
	margin-bottom: 10px;
	transition: 0.2s ease;
}

#gsearchbar:focus {
	background-color: #eee;
	box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.4);
}

#glist h2 {
	display: block;
	color: white;
	font: 18px;
	border: 1px solid #060606;
	margin: -1px 0 0 0;
	background-color: #060606;
	padding: 12px;
	font-weight: bold;
	user-select: none;
}

#glist a {
	display: block;
	text-decoration: inherit;
	color: black;
	font-size: 18px;
	border: 1px solid #dddddd;
	margin-top: -1px;
	background-color: #f6f6f6;
	padding: 12px;
	transition: 0.2s ease;
}

#glist a:hover {
	background-color: #eeeeee;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}