Merge pull request #17 from SnowSE/master

final changes
SnowSE · Jul 2, 2024 · 172189f · 172189f
2 parents 7d16dc0 + 78423ad
commit 172189f
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 75 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/SanpetePantry/.DS_Store b/SanpetePantry/.DS_Store
diff --git a/SanpetePantry/Pages/Contact.razor b/SanpetePantry/Pages/Contact.razor
@@ -64,7 +64,7 @@
     @if (DisplayForm) {
         <div class="row">
             <div class="container col col-md-6" style="margin: auto;">
-                <EditForm Model=@contactModel OnValidSubmit=@HandleValidSubmit>
+                <EditForm Model=@contactModel OnValidSubmit=@HandleValidSubmit FormName="contactForm">
                     <label style="font-family: 'Franklin Gothic Medium';" class="form-label">Name:</label>
                     <InputText @bind-Value=contactModel.Name class="form-control mb-3" />
 

diff --git a/SanpetePantry/Pages/Index.razor b/SanpetePantry/Pages/Index.razor
@@ -1,24 +1,22 @@
 @page "/"
+@inject IJSRuntime JS
+@rendermode InteractiveServer
 
-@* <script>
+<script>
     function initializeCounters() {
         const counters = document.querySelectorAll('.count');
 
         const animateCounter = (counter) => {
             const updateCount = () => {
                 const target = +counter.getAttribute('data-value');
                 let count = +counter.innerText;
-
-                console.log(`Animating counter with target: ${target}, current count: ${count}`);
-
                 const increment = target / 200;
 
                 if (count < target) {
                     counter.innerText = Math.ceil(count + increment);
-                    setTimeout(updateCount, 10);
+                    setTimeout(updateCount, 20);
                 } else {
                     counter.innerText = target;
-                    console.log(`Final count for target ${target} is ${counter.innerText}`);
                 }
             };
 
@@ -28,29 +26,20 @@
         const observer = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    console.log(`Counter ${entry.target} is intersecting`);
-                    animateCounter(entry.target); // Pass the observed element to animateCounter
-                    observer.unobserve(entry.target); // Optional: Unobserve the element after animation
+                    animateCounter(entry.target); 
+                    observer.unobserve(entry.target); 
                 }
             });
         });
 
         counters.forEach(counter => {
-            counter.innerText = '0'; // Ensure counters start from 0
+            counter.innerText = '0'; 
             observer.observe(counter);
         });
     }
 
-    document.addEventListener("DOMContentLoaded", initializeCounters);
-    window.addEventListener("onload", initializeCounters);
+</script>
 
-    window.addEventListener("pageshow", function() {
-    alert('Page equide');
-
-    // image is loaded at this time
-    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
-  });
-</script> *@
 
 
 <div class="video-container">
@@ -82,7 +71,7 @@
         </div>
     </div>
 
-    @* <div class="stats">
+    <div class="stats">
         <div>
             <span class="count" data-value="3340">0</span>
             <p id="not-percent">residents are food insecure</p>
@@ -99,7 +88,7 @@
             <span class="count" data-value="241">0</span>
             <p>% increase in food orders from 2021 to 2023</p>
         </div>
-    </div> *@
+    </div>
 
 
     <div class="four-pic-ctn">
@@ -166,4 +155,12 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("initializeCounters");
+    }
+
+}
diff --git a/SanpetePantry/Pages/Index.razor.css b/SanpetePantry/Pages/Index.razor.css
@@ -73,42 +73,48 @@
 
 .stats {
 
-    animation: fadeInAnimation ease 5s;
+    animation: fadeInAnimation ease 10s;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
 
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+
     align-items: center;
+    justify-content: center;
 
-    font-family: Arial, sans-serif;
     line-height: 1.5;
+
+    flex-wrap: wrap;
+
+    font-weight: 200;
 }
 
 .stats div {
     display: flex;
+    flex-direction: column;
+    align-items: center; 
+    justify-content: center;
 
     margin-top: 4em;
 
+    flex: 50%;
+
 }
 
 .count {
-    font-weight: bold;
-    color: darkgreen; 
-    display: inline-block;
-    min-width: 50px;
-    text-align: right;
 
-    font-size: 3em;
+    flex: 0 1 90%;
+
+    font-size: 8em;
 }
 
 .stats p {
-    font-size: 3em;
+    font-size: 1.8em;
 
     font-family: "Futura Bk BT-Book", Helvetica;
 
-    font-weight: 700;
-    color: darkgreen; 
+    font-weight: 200;
 }
 
 #not-percent {

diff --git a/SanpetePantry/Pages/KidPacks.razor b/SanpetePantry/Pages/KidPacks.razor
@@ -15,7 +15,7 @@
 <div class="img-ctn">
     <img class="kids-img" src="/img/HappyKids.jpg">
     <div style="transform: rotate(7deg);">
-        We are averaging 350 Kid-Packs per week. The cost per Kid Pack is 10$. The weekly cost is 3500
+        We are averaging 350 Kid-Packs per week. The cost per Kid Pack is $10. The weekly cost is $3500
     </div>
 </div>
 
@@ -30,11 +30,11 @@
     <img class="kids-img" src="/img/HappyGirl.jpg">
     <div style="transform: rotate(-5deg);">
         <div>
-            A monthly donation of 10$ will provide a student with a kid-pack for a weekend
+            A monthly donation of $10 will provide a student with a kid-pack for a weekend
         </div>
         <br>
         <div>
-            A monthly donation of 20$ will feed a family of four 10 times!
+            A monthly donation of $20 will feed a family of four 10 times!
         </div>
     </div>
 </div>

diff --git a/SanpetePantry/Pages/MobileDrop.razor b/SanpetePantry/Pages/MobileDrop.razor
@@ -42,21 +42,23 @@
 <style>
     .main-title {
         position: absolute;
-        top: 20%;
-        left: 20%;
+        top: 50%;
+        left: 50%;
         transform: translate(-50%, -50%);
         z-index: 1;
 
         font-size: 5em;
-        font-weight: 300;
-        color: darkgreen
+        color: white;
+        font-weight: 200;
     }
 
     .main-img {
         width: 100%;
         clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
         z-index: -1;
 
+        filter: brightness(50%);
+
     }
 
     .container {
@@ -87,7 +89,7 @@
     .section p {
         margin: 0;
         flex: 1;
-        font-size: large;
+        font-size: 1.5em;
     }
 
     .btn-ctn {

diff --git a/SanpetePantry/Pages/Testimonies.razor b/SanpetePantry/Pages/Testimonies.razor
@@ -4,22 +4,30 @@
 <h1>Community Testimonies</h1>
 
 <div id="intro-p">
-    At the Sanpete Pantry, we are committed to providing vital support to those in need. The stories shared here reflect the positive impact our services have on the community. Each testimonial highlights the difference that access to nutritious food can make. Thank you for your support in helping us fight hunger and build a stronger community.
+    At the Sanpete Pantry, we are committed to providing vital support to those in need. The stories shared here reflect
+    the positive impact our services have on the community. Each testimonial highlights the difference that access to
+    nutritious food can make. Thank you for your support in helping us fight hunger and build a stronger community.
 </div>
 
 <div class="vid-test">
     <div>
-        <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FSanpetePantry%2Fvideos%2F2162051310860757%2F&show_text=false&width=560&t=0" allow="autoplay"></iframe>
+        <iframe
+            src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FSanpetePantry%2Fvideos%2F2162051310860757%2F&show_text=false&width=560&t=0"
+            allow="autoplay"></iframe>
         <span class="title">Helping Families</span>
         <p>"We're really grateful we have a pantry here"</p>
     </div>
     <div>
-        <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FSanpetePantry%2Fvideos%2F462577876712773%2F&show_text=false&width=560&t=0" allow="autoplay"></iframe>
+        <iframe
+            src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FSanpetePantry%2Fvideos%2F462577876712773%2F&show_text=false&width=560&t=0"
+            allow="autoplay"></iframe>
         <span class="title">Helping our community</span>
         <p>"We're thankful this place is here"</p>
     </div>
     <div>
-        <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FSanpetePantry%2Fvideos%2F1016214606693654%2F&show_text=false&width=560&t=0"  allow="autoplay"></iframe>
+        <iframe
+            src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FSanpetePantry%2Fvideos%2F1016214606693654%2F&show_text=false&width=560&t=0"
+            allow="autoplay"></iframe>
         <span class="title">Making a difference</span>
         <p>"The food bank is a good help but they need more donations"</p>
     </div>
@@ -104,10 +112,10 @@
         justify-content: center;
 
         display: grid;
-        grid-template-areas: 
-        'image'
-        'story'
-        'name'
+        grid-template-areas:
+            'image'
+            'story'
+            'name'
         ;
 
         transition: 0.3s;
@@ -153,7 +161,7 @@
 
         align-self: center;
 
-        border-radius: 50% 50% 50% 50%; 
+        border-radius: 50% 50% 50% 50%;
 
         background-color: #89726E;
     }
@@ -171,22 +179,22 @@
         padding: 1em;
     }
 
- .vid-test {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap; 
-}
+    .vid-test {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
 
-.vid-test div {
-    flex: 0 1 45%;
-    margin: 1em;
-    align-items: center;
-    box-sizing: border-box; 
-}
+    .vid-test div {
+        flex: 0 1 45%;
+        margin: 1em;
+        align-items: center;
+        box-sizing: border-box;
+    }
 
 
-    .vid-test div *{
+    .vid-test div * {
         margin: 0.5em;
     }
 
@@ -203,7 +211,7 @@
 
     iframe {
 
-        height: 20em;
+        height: 24em;
         width: 100%;
 
     }

diff --git a/SanpetePantry/Shared/MainLayout.razor.css b/SanpetePantry/Shared/MainLayout.razor.css
@@ -121,9 +121,23 @@ a div{
     }
 }
 
-@media (max-width: 1060px) {
+@media (max-width: 1155px) {
     .sidebar {
         width: 100%;
-        font-size: small;
+        font-size: 100px;
+        position: sticky;
+
+    }
+}
+
+@media (max-width: 630px){
+    .page{
+        width: 100%;
+        padding: 0;
     }
+
+    body{
+        width: 100%;
+    }
+
 }