kira
/
PokemonSleepTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better UI

This commit is contained in:
Kira Jiroux 2025-02-01 12:16:44 -05:00
parent efcdee701a
commit 241b7348a4
1 changed files with 42 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
PokemonSleep.Web/Views/Pokemon/PokemonIndex.cshtml
View File

@ -1,77 +1,65 @@
 @model PokemonSleepDto
@model PokemonSleepDto
<div class="card shadow border-0 mt-4"> <div class="card shadow border-0 mt-4">
<div class="card-header bg-secondary bg-gradient ml-0 py-3"> <div class="card-header bg-secondary bg-gradient text-center py-3">
<div class="row"> <h1 class="text-white">Pokémon Calculator</h1>
<div class="col-12 text-center">
<h1 class="text-white">Pokémon Calculator</h1>
</div>
</div>
</div> </div>
<div class="card-body p-4"> <div class="card-body p-4">
<!-- Pokémon Selection -->
<div class="row pb-3"> <div class="row pb-3">
<div class="col-6"> <div class="col-md-6">
<label>Select Pokemon</label> <label for="pokemonSelect">Select Pokémon</label>
<select class="form-control form-control-lg" id="pokemonSelect"> <select class="form-control form-control-lg" id="pokemonSelect">
<option value="" disabled selected>Choose your Pokémon...</option> <option value="" disabled selected>Choose your Pokémon...</option>
@foreach(var pokemon in Model.pokemonList) @foreach (var pokemon in Model.pokemonList)
{ {
<option value="@pokemon.Id">@pokemon.Id @pokemon.Name</option> <option value="@pokemon.Id">@pokemon.Id @pokemon.Name</option>
} }
</select> </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> </div>
</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> <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> <option value="" disabled selected>Choose Nature...</option>
@foreach (var nature in Model.natureList) @foreach (var nature in Model.natureList)
{ {
<option value="@nature.Id">@nature.Nature</option> <option value="@nature.Id">@nature.Nature</option>
} }
</select> </select>
</div>
<div class="col-4">
<label for="subskillSelect1">Select Sub Skill 1</label> <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> <option value="" disabled selected>Choose Sub Skill...</option>
@foreach (var subskill in Model.subskillList) @foreach (var subskill in Model.subskillList)
{ {
<option value="@subskill.Id">@subskill.SubSkill</option> <option value="@subskill.Id">@subskill.SubSkill</option>
} }
</select> </select>
</div>
<div class="col-4">
<label for="subskillSelect2">Select Sub Skill 2</label> <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> <option value="" disabled selected>Choose Sub Skill...</option>
@foreach (var subskill in Model.subskillList) @foreach (var subskill in Model.subskillList)
{ {
<option value="@subskill.Id">@subskill.SubSkill</option> <option value="@subskill.Id">@subskill.SubSkill</option>
} }
</select> </select>
</div>
<div class="col-4">
<label for="subskillSelect3">Select Sub Skill 3</label> <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> <option value="" disabled selected>Choose Sub Skill...</option>
@foreach (var subskill in Model.subskillList) @foreach (var subskill in Model.subskillList)
{ {
@ -81,20 +69,17 @@
</div> </div>
</div> </div>
<div class="row mt-3"> <!-- Score Calculation -->
<div class="col-12"> <div class="d-flex justify-content-between align-items-center mt-3">
<button id="calculateScore" class="btn btn-primary">Calculate Final Score</button> <button id="calculateScore" class="btn btn-primary">Calculate Final Score</button>
</div> <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>
</div> </div>
<script> <script>
console.log("Script Loaded Successfully!"); console.log("Script Loaded Successfully!");
var modelData = { var modelData = {