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

also add a secound page that turn to another page of the same html list with the same animations and all of that stuff. but make it so I can add buttons for the games you know like secound page button below all the other game buttons.

and make it so when u click a game button it puts a custom made ui with css with a ui saying are you sure you wan't to open this game there will be a yes or no if yes is clicked a circle from the side of the screen closes in in the middle and when t closes it changes the website refreshes it to the game.

make sure everything has css and very good all functioned all buttons work and everything 500 line code please extended lots of functions

<!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);
}