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

59
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-header bg-secondary bg-gradient ml-0 py-3">
<div class="row">
<div class="col-12 text-center">
<div class="card-header bg-secondary bg-gradient text-center py-3">
<h1 class="text-white">Pokémon Calculator</h1>
</div>
</div>
</div>
<div class="card-body p-4">
<!-- Pokémon Selection -->
<div class="row pb-3">
<div class="col-6">
<label>Select Pokemon</label>
<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)
@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>
<!-- 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" width="100" height="100" class="me-3">
<img id="pokemonImage" src="" alt="Pokemon Image" class="me-3" style="width: 200px; height: 200px; object-fit: contain;">
<div>
<h3 id="pokemonName"></h3>
<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="row">
<div class="col-4">
<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">
<!-- 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>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<h4>Final Score: <span id="finalScore">0</span></h4>
</div>
</div>
</div>
</div>
<script>
console.log("Script Loaded Successfully!");
var modelData = {