From 241b7348a42e8abc48a065a2d29fe07e7772af07 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Sat, 1 Feb 2025 12:16:44 -0500
Subject: [PATCH] Better UI

---
 .../Views/Pokemon/PokemonIndex.cshtml         | 99 ++++++++-----------
 1 file changed, 42 insertions(+), 57 deletions(-)

diff --git a/PokemonSleep.Web/Views/Pokemon/PokemonIndex.cshtml b/PokemonSleep.Web/Views/Pokemon/PokemonIndex.cshtml
index 0fe1173..26635ff 100644
--- a/PokemonSleep.Web/Views/Pokemon/PokemonIndex.cshtml
+++ b/PokemonSleep.Web/Views/Pokemon/PokemonIndex.cshtml
@@ -1,77 +1,65 @@
-
-@model PokemonSleepDto
+@model PokemonSleepDto
 <div class="card shadow border-0 mt-4">
-	<div class="card-header bg-secondary bg-gradient ml-0 py-3">
-		<div class="row">
-			<div class="col-12 text-center">
-				<h1 class="text-white">Pokémon Calculator</h1>
-			</div>
-		</div>
+	<div class="card-header bg-secondary bg-gradient text-center py-3">
+		<h1 class="text-white">Pokémon Calculator</h1>
 	</div>
 	<div class="card-body p-4">
+		<!-- Pokémon Selection -->
 		<div class="row pb-3">
-			<div class="col-6">
-				<label>Select Pokemon</label>
-			<select class="form-control form-control-lg" id="pokemonSelect">
-				<option value="" disabled selected>Choose your Pokémon...</option>
-				@foreach(var pokemon in Model.pokemonList)
-				{
-					<option value="@pokemon.Id">@pokemon.Id @pokemon.Name</option>
-				}
-			</select>
-			</div>
-			<div class="col-6 text-end">
-				<a class="btn btn-outline-primary"><i class="bi bi-plus-square"></i> Add Pokemon</a>
-
-			</div>
-	</div>
-
-
-
-	<div id="pokemonDetails" class="mt-4 p-3 border rounded" style="display: none;">
-		<div class="d-flex align-items-center">
-			<img id="pokemonImage" src="" alt="Pokemon Image" width="100" height="100" class="me-3">
-			<div>
-				<h3 id="pokemonName"></h3>
-				<p><strong>Pokédex #:</strong> <span id="pokemonId"></span></p>
-				<p><strong>Sleep Type:</strong> <span id="pokemonSleepType"></span></p>
-				<p><strong>Specialty:</strong> <span id="pokemonSpecialty"></span></p>
+			<div class="col-md-6">
+				<label for="pokemonSelect">Select Pokémon</label>
+				<select class="form-control form-control-lg" id="pokemonSelect">
+					<option value="" disabled selected>Choose your Pokémon...</option>
+					@foreach (var pokemon in Model.pokemonList)
+					{
+						<option value="@pokemon.Id">@pokemon.Id @pokemon.Name</option>
+					}
+				</select>
 			</div>
 		</div>
-			<div class="row">
-				<div class="col-4">
+
+		<!-- Pokémon Details (Initially Hidden) -->
+		<div id="pokemonDetails" class="mt-4 p-3 border rounded" style="display: none;">
+			<div class="d-flex align-items-center">
+				<img id="pokemonImage" src="" alt="Pokemon Image" class="me-3" style="width: 200px; height: 200px; object-fit: contain;">
+				<div>
+					<h2 id="pokemonName" class="mb-2"></h2>
+					<p><strong>Pokédex #:</strong> <span id="pokemonId"></span></p>
+					<p><strong>Sleep Type:</strong> <span id="pokemonSleepType"></span></p>
+					<p><strong>Specialty:</strong> <span id="pokemonSpecialty"></span></p>
+				</div>
+			</div>
+
+			<div class="d-flex mt-3">
+				<!-- Nature & Subskills Selection -->
+				<div class="me-4" style="flex: 1;">
+					<h4 class="mb-3">Select Nature & Subskills</h4>
 					<label for="natureSelect">Select Nature</label>
-					<select id="natureSelect" class="form-control form-control-lg">
+					<select id="natureSelect" class="form-control form-control-lg mb-2">
 						<option value="" disabled selected>Choose Nature...</option>
 						@foreach (var nature in Model.natureList)
 						{
 							<option value="@nature.Id">@nature.Nature</option>
 						}
 					</select>
-				</div>
-				<div class="col-4">
 					<label for="subskillSelect1">Select Sub Skill 1</label>
-					<select id="subskillSelect1" class="form-control form-control-lg">
+					<select id="subskillSelect1" class="form-control form-control-lg mb-2">
 						<option value="" disabled selected>Choose Sub Skill...</option>
 						@foreach (var subskill in Model.subskillList)
 						{
 							<option value="@subskill.Id">@subskill.SubSkill</option>
 						}
 					</select>
-				</div>
-				<div class="col-4">
 					<label for="subskillSelect2">Select Sub Skill 2</label>
-					<select id="subskillSelect2" class="form-control form-control-lg">
+					<select id="subskillSelect2" class="form-control form-control-lg mb-2">
 						<option value="" disabled selected>Choose Sub Skill...</option>
 						@foreach (var subskill in Model.subskillList)
 						{
 							<option value="@subskill.Id">@subskill.SubSkill</option>
 						}
 					</select>
-				</div>
-				<div class="col-4">
 					<label for="subskillSelect3">Select Sub Skill 3</label>
-					<select id="subskillSelect3" class="form-control form-control-lg">
+					<select id="subskillSelect3" class="form-control form-control-lg mb-2">
 						<option value="" disabled selected>Choose Sub Skill...</option>
 						@foreach (var subskill in Model.subskillList)
 						{
@@ -81,20 +69,17 @@
 				</div>
 			</div>
 
-			<div class="row mt-3">
-				<div class="col-12">
-					<button id="calculateScore" class="btn btn-primary">Calculate Final Score</button>
-				</div>
+			<!-- Score Calculation -->
+			<div class="d-flex justify-content-between align-items-center mt-3">
+				<button id="calculateScore" class="btn btn-primary">Calculate Final Score</button>
+				<h4>Final Score: <span id="finalScore">0</span></h4>
 			</div>
-
-			<div class="row mt-3">
-				<div class="col-12">
-					<h4>Final Score: <span id="finalScore">0</span></h4>
-				</div>
-			</div>
-	</div>	
+		</div>
+	</div>
 </div>
 
+
+
 <script>
 	console.log("Script Loaded Successfully!");
 	var modelData = {