Guess the Song HTML page code. Tutorial at https://youtu.be/ljD3y925zIg

gts.jsp

<%{
	%>
<link
href="https://aorborc.github.io/bootstrap5/css/main.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<div class="container m-1 mx-auto p-2" id="aorborc">
<div class="row">
<%
	//Get the song list and count 
	songs_list = Songs_List[Played == false].ID.getAll();
	songs_count = songs_list.size();
	if(songs_count > 0)
	{
		//Get a random song from the songs list and set it as the currently played
		random_song_index = randomNumber(1,songs_count) - 1;
		random_song_id = songs_list.get(random_song_index);
		random_song = Songs_List[ID == random_song_id];
		random_song.Played=true;
		//Split the random song into words and create a list of the words
		words_list = random_song.Title.toList(" ");
		words_count = words_list.size();
		custom_list = leftpad(" ",words_count - 1).toList(" ");
		%>
<!-- Words in random boxes -->
            <div class="row order-2">
<%
		//Loop through the custom dummy list and create a box for each word
		counter = 0;
		for each  dummy_value in custom_list
		{
			random_word_index = randomNumber(1,words_list.size()) - 1;
			random_word = words_list.get(random_word_index);
			random_word = random_word.replaceAll(" ","").trim();
			words_list.remove(random_word_index);
			if(random_word != "")
			{
				%>
<div class="col-lg-4 mb-3 flex align-items-stretch mx-auto">
					<div class="card">
						<div class="card-body d-flex flex-column bg-red text-white">
						<input id="<%=counter%>" type="checkbox" />
						<h1 class="card-title display-6 fw-bolder text-center">
							<%=random_word%>
						</h1>
						<label for="<%=counter%>" class="text-white m-auto btn-label"
							><span class="btn"
							><img
								class="img-thumbnail"
								src="https://www.freepnglogos.com/uploads/gift-png/gift-present-prize-icon-24.png"
							/></span>
						</label>
						</div>
					</div>
					</div>
<%
				counter = counter + 1;
			}
		}
		%>
</div>
		<!-- Number of Words-->
            <h1 class="bg-green text-white text-center order-1">
                <%=counter%> words
            </h1>
        <!-- Song Title -->
            <div class="mb-3 flex align-items-stretch order-3">
                <div class="card">
                <div class="card-body d-flex flex-column bg-green text-white">
                    <input id="<%=counter%>" type="checkbox" />
                    <h1 class="card-title display-6 fw-bolder text-center">
                    <%=random_song.Title%>
                    </h1>
                    <label for="<%=counter%>" class="bg-yellow text-white m-auto btn-label"
                    ><span class="btn">Show Song name</span></label
                    >
                </div>
                </div>
            </div>
        <!-- Next Song -->
            <div class="text-center order-4">
                <a href="#Script:page.refresh" class="btn btn-info text-white fw-bolder fs-5">Next Song</a>
            </div>
<%
	}
	else
	{
		%>
<div class="mx-auto">
            <h1 class="bg-green text-white text-center">
                No more songs to play
            </h1>
            <div class="text-center">
                <a href="#Form:Songs_List" class="btn btn-info text-white fw-bolder fs-5">Add a new Song</a>
            </div>
        </div>
<%
	}
	%>
</div>
</div>
<!-- Custom Styles -->
<style>
#aorborc {
font-family: "Public Sans", sans-serif;
}
#aorborc input[type="checkbox"] {
display: none;
}
#aorborc .btn {
text-shadow: none;
box-shadow: none;
}
#aorborc .card {
border: none !important;
}
.card-title {
opacity: 0;
}
input[type="checkbox"]:checked + .card-title {
animation: fadeIn 5s;
opacity: 1;
}
input[type="checkbox"]:checked + label {
display: none;
}
.btn-label {
border-radius: 0.25rem;
}
@keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
</style>
<%

}%>