STOP BEING ON MASTER. Anyways made the temp blanket visualizer fit in a bootstrap grid :)

Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor

@@ -9,10 +9,13 @@
     else
     {
 
-        <div>
+        <h3 class="text-xl font-bold mb-4">Temperature Blanket Visualizer</h3>
-            <h3 class="text-xl font-bold mb-4">Temperature Blanket Reviewer</h3>
 
-            <div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
+        <div>
+            <div class="row">
+                <div class="col-10">
+                    <div class="d-flex">
+                        <div class="temperature-blanket">
                             @foreach (var day in TemperatureDays)
                             {
                                 var color = GetColorForTemp(day.AvgTemp);
@@ -21,9 +24,13 @@
                                 </div>
                             }
                         </div>
-
+                    </div>
+                </div>
+                <div class="col">
                     <TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
                 </div>
+            </div>
+        </div>
     }
 </div>
 

Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.cs

@@ -20,7 +20,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Crochet_Components
                 new() { Min = 35, Max = 42, Color = "#add8e6" },
                 new() { Min = 42, Max = 49, Color = "#00008b" },
                 new() { Min = 49, Max = 56, Color = "#006400" },
-                new() { Min = 56, Max = 63, Color = "#90ee90" },
+                new() { Min = 56, Max = 63, Color = "#07ed07" },
                 new() { Min = 63, Max = 70, Color = "#ffff00" },
                 new() { Min = 70, Max = 77, Color = "#ffa500" },
                 new() { Min = 77, Max = 84, Color = "#ff0000" },

Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.css

@@ -0,0 +1,9 @@
+body {
+}
+
+.temperature-blanket {
+    display: flex;
+    overflow-x: auto;
+    background-color: black;
+    padding: 10px;
+}

Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor

@@ -4,11 +4,11 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<div class="relative w-full h-24 px-4" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
+<div class="container" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
     <!-- Base number line -->
-    <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div>
+    @* <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div> *@
 
-    <!-- Draggable nodes for adjusting range breakpoints -->
+@*     <!-- Draggable nodes for adjusting range breakpoints -->
     @for (int i = 0; i < TempRanges.Count; i++)
     {
         var left = i == 0 ? 0 : TempRanges[i - 1].Max;
@@ -19,16 +19,75 @@
              @onmousedown="(e) => OnMouseDown(i, e)"
              title="@left°F">
         </div>
-    }
+    } *@
 
     <!-- Color pickers for each range -->
-    <div class="flex gap-2 mt-6">
+    <div class="card rounded-3">
+        <div class="card-header mb-3 text-center fw-bold">
+            Temperature Blanket Colors
+        </div>
+
         @for (int i = 0; i < TempRanges.Count; i++)
         {
             var localIndex = i;
+@*             if (i == 0)
+            {
+                <div class="row align-items-center mb-2">
+                    <div class="col-6 text-end pe-2">
+                        <label class="form-label mb-0">
+                              @TempRanges[i].Max&deg;
+                        </label>
+                    </div>
+                    <div class="col-6 ps-2">
                         <input type="color"
                                value="@TempRanges[i].Color"
                                @onchange="e => HandleColorChange(e, localIndex)" />
+                    </div>
+                </div>
+            }
+            else if (i == 10)
+            {
+                <div class="row align-items-center mb-2">
+                    <div class="col-6 text-end pe-2">
+                        <label class="form-label mb-0">
+                            @TempRanges[i].Min&deg; +
+                        </label>
+                    </div>
+                    <div class="col-6 ps-2">
+                        <input type="color"
+                               value="@TempRanges[i].Color"
+                               @onchange="e => HandleColorChange(e, localIndex)" />
+                    </div>
+                </div>
+            }
+            else
+            {
+                <div class="row align-items-center mb-2">
+                    <div class="col-6 text-end pe-2">
+                        <label class="form-label mb-0">
+                            @TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
+                        </label>
+                    </div>
+                    <div class="col-6 ps-2">
+                        <input type="color"
+                               value="@TempRanges[i].Color"
+                               @onchange="e => HandleColorChange(e, localIndex)" />
+                    </div>
+                </div>
+            } *@
+
+            <div class="row align-items-center mb-2 ms-1">
+                <div class="col-6 text-end pe-2">
+                    <label class="form-label mb-0">
+                        @TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
+                    </label>
+                </div>
+                <div class="col-6 ps-2">
+                    <input type="color"
+                           value="@TempRanges[i].Color"
+                           @onchange="e => HandleColorChange(e, localIndex)" />
+                </div>
+            </div> 
         }
     </div>
 </div>

Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor.css

@@ -0,0 +1,6 @@
+input[type="color"] {
+    width: 2.5rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+}

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor

@@ -1,4 +1,4 @@
-<div class="pokemon-rating-panel container">
+<div class="pokemon-rating-panel">
 
      <!-- Dropdown Selects -->
     <div class="ratings bg-light-subtle col">

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css

@@ -3,7 +3,7 @@
     flex-direction: column;
     gap: 1.5rem;
     width: 100%;
-
+    height: 70vh;
 }
 
 

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css

@@ -1,5 +1,5 @@
 .pokemon-selector {
-    height: 66vh;
+    height: 70vh;
     width: 20vw;
     border: 1px solid #ccc;
     border-radius: 5% / 3.5%;

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor

@@ -6,7 +6,7 @@
 @rendermode InteractiveServer
 
 <!-- Table A: Desktop View-->
-<div class="container d-none d-md-block ">
+<div class="container d-none d-md-block " style="height: 70vh;">
     <!-- Main UI -->
     <div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
         <!-- Table Header -->
@@ -16,20 +16,20 @@
                     <input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
 
                     <h2 class="text-info text-decoration-underline">Available Pokémon</h2>
-                    <div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
+                    <div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
                 </div>
             </div>
         </div>
 
         
-        <div class="tableFixHead bg-secondary table-responsive row">
+        <div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row">
             <table class="table col table-borderless border-0 table-secondary table-striped align-middle">
                 <!-- Table Head -->
                 <thead class="">
                     <tr class="">
                         <th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
                         <th class="text-white text-bg-info col-1" scope="col">#</th>
-                        <th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
+                        <th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
                         <th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
                         <th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
                         <th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
@@ -46,8 +46,11 @@
                 else
                 {
                     <!-- Table Body -->
-                    <tbody>
+                    <tbody class="">
                         <tr></tr>
+                        @if (FilteredPokemon != null && FilteredPokemon.Any())
+                        {
+                            
                             @foreach (var pokemon in FilteredPokemon)
                             {
                                 <tr class="flex-row">
@@ -112,6 +115,17 @@
 
                                 </tr>
                             }
+                        }
+                        else
+                        {
+                            <tr>
+                                <td colspan="100%">
+                                    <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
+                                        <p class="text-muted">Pokémon could not be found.</p>
+                                    </div>
+                                </td>
+                            </tr>
+                        }
                     </tbody>
                 }
                
@@ -131,7 +145,7 @@
         <div class="flex-row justify-content-between">
             <div class="text-center position-relative">
                 <h2 class="text-white text-decoration-underline">Pokémon</h2>
-                <div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count())</p></div>
+                <div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
             </div>
         </div>
     </div>
@@ -166,7 +180,7 @@
                                 </div>
                             </div>
 
-                            <div>
+                            <div class="">
                                 <!-- Number and Name -->
                                 <h5>
                                     @pokemon.PokemonId -

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css

@@ -20,6 +20,10 @@
         z-index: 10;
     }
 
+.align-top-tbody {
+    vertical-align: top;
+}
+
 .pokemon-name-style {
     cursor:pointer;
     font-size: 1.3rem;
@@ -78,7 +82,9 @@
         transform: rotateY(180deg);
     }
 
-
+.fixed-row-height {
+    height: 90px; /* or any height that suits your card style */
+}
 
 
 .pokeimage {

Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor

@@ -3,7 +3,14 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<h3 class="text-xl font-bold mb-4">Crochet</h3>
+<PageTitle>Crochet Tools</PageTitle>
+<head>
+    <link rel="stylesheet" href="bootstrap/bootstrap-cosmo.css" /> <!-- app.css -->
+</head>
 
+<h3 class="text-xl font-bold mb-4">Crochet</h3>
+<div class="">
 <TemperatureBlanketVisualizer TemperatureDays="temperatureDays" />
 
+</div>
+

Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor.cs

@@ -9,19 +9,60 @@ namespace Portfolio.WebUI.Server.Components.Pages.Crochet_Pages
     public partial class CrochetHome
     {
         public List<TemperatureDay> temperatureDays { get; set; }
+        public int YEAR = 2025;
 
         protected override async Task OnInitializedAsync()
         {
             // Placeholder for loading temperature data
             // Replace with actual API call 
-            temperatureDays = Enumerable.Range(0, 365).Select(i => new TemperatureDay
+            //temperatureDays = Enumerable.Range(0, 365).Select(i => new TemperatureDay
+            //{
+            //    Date = new DateTime(DateTime.Now.Year - 1, 1, 1).AddDays(i),
+            //    AvgTemp = Random.Shared.Next(10, 95)
+            //}).ToList();
+
+            temperatureDays = GenerateRealisticTemperatureDays(YEAR);
+
+
+
+        }
+
+        public static List<TemperatureDay> GenerateRealisticTemperatureDays(int year)
         {
-                Date = new DateTime(DateTime.Now.Year - 1, 1, 1).AddDays(i),
+            var temperatureDays = new List<TemperatureDay>();
-                AvgTemp = Random.Shared.Next(10, 95)
+            var startDate = new DateTime(year, 1, 1);
-            }).ToList();
+            int daysInYear = DateTime.IsLeapYear(year) ? 366 : 365;
 
+            // Adjusted parameters for desired range
+            double minAvgTemp = 20.0;
+            double maxAvgTemp = 84.0;
+            double amplitude = (maxAvgTemp - minAvgTemp) / 2.0;  // 32.5
+            double avgAnnualTemp = (maxAvgTemp + minAvgTemp) / 2.0;  // 52.5
+            double noiseMax = 3.0; // Small daily variation
 
+            for (int i = 0; i < daysInYear; i++)
+            {
+                var date = startDate.AddDays(i);
+                double dayOfYearRatio = (2 * Math.PI * i) / daysInYear;
 
+                // Peak is mid-summer, trough is mid-winter
+                double seasonalTemp = avgAnnualTemp + amplitude * Math.Sin(dayOfYearRatio - Math.PI / 2);
+
+                // Add gentle noise
+                double dailyNoise = Random.Shared.NextDouble() * noiseMax * 2 - noiseMax;
+
+                // Final temperature, clamped to min/max
+                double finalTemp = Math.Round(seasonalTemp + dailyNoise, 1);
+                finalTemp = Math.Clamp(finalTemp, minAvgTemp, maxAvgTemp);
+
+                temperatureDays.Add(new TemperatureDay
+                {
+                    Date = date,
+                    AvgTemp = finalTemp
+                });
+            }
+
+            return temperatureDays;
         }
 
     }

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor

@@ -62,4 +62,5 @@
 
         }
     </div>
+    <hr class="mt-5"/>
 </div>

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor

@@ -20,4 +20,7 @@
 
     <PokemonTable AllPokemon="pokemons"/>
 
+    <hr class="mt-5" />
+
+
 </div>