!

GrossesMitaines/GrossesMitaines/Controllers/HomeController.cs

@@ -15,10 +15,28 @@ namespace GrossesMitaines.Controllers {
             _logger = logger;
         }
 
+        [HttpGet]
         public IActionResult Index() {
             return View();
         }
 
+        // POST : LogIn
+        [HttpPost]
+        public async Task<IActionResult> Demande(RequestViewModel model, string returnurl)
+        {
+
+            if (!ModelState.IsValid)
+            {
+                return LocalRedirect(returnurl);
+            }
+
+            else
+            {
+
+                return LocalRedirect(returnurl);
+            }
+        }
+
         public IActionResult Privacy() {
             return View();
         }
@@ -31,12 +49,6 @@ namespace GrossesMitaines.Controllers {
             return View();
         }
 
-        public class ContactModel { }; // À DELETER QUAND LA CLASSE/FORMULAIRE SERONT FAIT.
-        [HttpPost]
-        public IActionResult ContactUs(ContactModel model) {
-            return View(model);
-        }
-
         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
         public IActionResult Error() {
             return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });

GrossesMitaines/GrossesMitaines/GrossesMitaines.csproj

@@ -5,13 +5,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <Compile Remove="ViewModels\**" />
-    <Content Remove="ViewModels\**" />
-    <EmbeddedResource Remove="ViewModels\**" />
-    <None Remove="ViewModels\**" />
-  </ItemGroup>
-
-  <ItemGroup>
+    <PackageReference Include="FluentValidation" Version="11.2.2" />
+    <PackageReference Include="FluentValidation.AspNetCore" Version="11.2.2" />
     <PackageReference Include="FontAwesome" Version="4.7.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="5.0.17" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="5.0.17" />
@@ -22,8 +17,8 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="wwwroot\img\" />
     <Folder Include="wwwroot\audio\" />
+    <Folder Include="wwwroot\img\partenaires\" />
   </ItemGroup>
 
 </Project>

GrossesMitaines/GrossesMitaines/Models/RequestViewModel.cs

@@ -0,0 +1,39 @@
+using FluentValidation;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace GrossesMitaines.Models
+{
+    public class RequestViewModel
+    {
+        [Display(Prompt ="NOM COMPLET")]
+        public string Name { get; set; }
+        [Display(Prompt = "COURRIEL")]
+        public string Email { get; set; }
+        [Display(Prompt = "TÉLÉPHONE")]
+        public string Phone { get; set; }
+        [Display(Prompt = "VOS COMMENTAIRES")]
+        public string Message { get; set; }
+    }
+
+    public class RequestValidator : AbstractValidator<RequestViewModel>
+    {
+        public RequestValidator()
+        {
+            RuleFor(x => x.Name)
+                .NotEmpty().WithMessage("Vous devez entrer votre nom")
+                .MinimumLength(2).WithMessage("Votre nom doit être de 2 lettres minimum");
+
+            RuleFor(x => x.Email)
+                .NotEmpty().WithMessage("Une adresse courriel est requise")
+                .EmailAddress().WithMessage("Format non valide!");
+
+            RuleFor(x => x.Phone)
+                .NotEmpty().WithMessage("Vous devez entrer votre téléphone")
+                .Matches("^\\s*(?:\\+?(\\d{1}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})$").WithMessage("Téléphone non valide!");
+        }
+    }
+}

GrossesMitaines/GrossesMitaines/Startup.cs

@@ -1,3 +1,4 @@
+using FluentValidation.AspNetCore;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.HttpsPolicy;
@@ -19,6 +20,8 @@ namespace GrossesMitaines {
 
         public void ConfigureServices(IServiceCollection services) {
             services.AddControllersWithViews();
+
+            services.AddFluentValidation(option => option.RegisterValidatorsFromAssemblyContaining<Startup>());
         }
 
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {

GrossesMitaines/GrossesMitaines/Views/Home/AboutUs.cshtml

@@ -7,35 +7,94 @@
         <h1>À propos de nous:</h1>
     </div>
 </div>
-<br/>
+<br />
 <div class="row">
-    <div class="col col-sm-12 col-md-6 col-lg-4">
-        <img src="~/img/madamebrossard.jpg"/>
+    <div class="col col-12 col-md-6 col-lg-4 ">
+        <img class="border-quetaine" src="~/img/madamebrossard.jpg" style="max-width:300px;" />
     </div>
-    <div class="col col-sm-12 col-md-6 col-lg-8 text-light" style="font-family:Comic Sans MS;">
-        BLah BLahBLahBLahBLahBLah BLah BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLahBLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
+    <div class="col col-12 col-md-6 col-lg-8 text-light">
+        <br />
+        <h4>
+            Ginette - Co-Fondatrice
+        </h4>
+        <br />
+        <p>
+            Une forte femme de 83 ans qui travaille la laine depuis sa plus tendre enfance.
+            Ginette est avec Monique co-fondatrice des Grosses Mitaines&trade;.
+            Elle se fera un plaisir de créer de magnifiques chaussettes pour les petits et les grands.
+        </p>
     </div>
 </div>
+<br />
+<br />
+<br />
 <div class="row">
-    <div class="col-12" style="height:40px;" />
+    <div class="col col-12 col-md-6 col-lg-8 text-light">
+        <h4>
+            Monique - Autre Co-Fondatrice
+        </h4>
+        <br />
+        <p>
+            Dès ses 3 ans Monique était une prodige du crochet!
+            Il est même dit qu'elle aurait fait sa première paire de bas avant même de parler.
+            En 8ième année, elle était la reine de la laine et elle fonda - en 1953 avec Ginette, Les Grosses Mitaines&trade;.
+        </p>
+        <br />
+    </div>
+    <div class="col col-12 col-md-6 col-lg-4">
+        <img class="border-quetaine" src="~/img/moman.jpg" style="max-width:300px;"/>
+    </div>
 </div>
-<div class="row">
-    <div class="col col-sm-12 col-md-6 col-lg-8 text-light" style="font-family:Comic Sans MS;">
-        BLah BLahBLahBLahBLahBLah BLahBLah BLahBLahBLahBLahBLah BLahBLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLahBLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-        BLah BLahBLahBLahBLahBLah BLah
-    </div>
-    <div class="col col-sm-12 col-md-6 col-lg-4">
-        <img src="~/img/moman.jpg" />
-    </div>
+<br />
+<br />
+<br />
+<div class="row bg-dark text-light pt-3">
+    <ul style="list-style-type: none;">
+        <li>
+            <h5 style="font-family:Comic Sans MS;">
+                <span class="fa fa-location-dot"></span> Adresse:
+            </h5>
+            <a href="https://goo.gl/maps/B76oSoXg9FXuTmCD6" target="_blank">
+                <span class="fa fa-arrow-up-right-from-square"></span> 3005 Bd Laframboise, Saint-Hyacinthe, QC J2S 4Z6
+            </a>
+        </li>
+        <br />
+        <li>
+            <h5 style="font-family:Comic Sans MS;">
+                <span class="fa fa-envelope"></span> Courriel:
+            </h5>
+            <a href="mailto:grossesmitaines@example.com" >
+                <span class="fa fa-feather"></span> grossesmitaines@example.com
+            </a>
+        </li>
+        <br />
+        <li>
+            <h5 style="font-family:Comic Sans MS;">
+                <span class="fa fa-phone"></span> Appellez-nous:
+            </h5>
+            <a href="tel:666-666-6666">
+                <span class="fa fa-phone-volume"></span> 666-666-666
+            </a>
+        </li>
+        <br />
+        <li>
+            <h5 style="font-family:Comic Sans MS;">
+                Réseaux Sociaux:
+            </h5>
+            <div class="row">
+                <span class="col-4 fa fa-facebook"></span>
+                <span class="col-4 fa fa-etsy"></span>
+                <span class="col-4 fa fa-pinterest"></span>
+            </div>
+        </li>
+        <br />
+        <li>
+            <h5 style="font-family:Comic Sans MS;">
+                Question?
+            </h5>
+            <a asp-area="" asp-controller="Home" asp-action="ContactUs">
+                 Nous Contacter
+            </a>
+        </li>
+    </ul>
 </div>

GrossesMitaines/GrossesMitaines/Views/Home/Index.cshtml

@@ -1,4 +1,6 @@
-@{
+@model GrossesMitaines.Models.RequestViewModel
+
+@{
     ViewData["Title"] = "Maison";
 }
 
@@ -11,11 +13,63 @@
 
 <br>
 <br>
-<div class="container col-10 offset-1 text-primary text-right text-sm-right" style="font-family:Comic Sans MS;">
+<div class="row vedette-title">
+<div class="col-12 text-primary text-right text-sm-right rounded-right" style="font-family:Comic Sans MS;">
     <h1>Des produits bien commodes faits par des aînées d'expérience.</h1>
 </div>
+</div>
 <br>
 <br>
 <br>
 <br>
-<vc:en-vedette></vc:en-vedette>
+<vc:en-vedette></vc:en-vedette>
+<br>
+<br>
+<br>
+<br>
+<div class="row">
+    <div class="col-md-12 bg-info">
+        <section>
+            <form asp-controller="Home" asp-action="Demande" asp-route-returnurl="/Home/Index" method="post" class="form-horizontal" role="form">
+                <h4 class="text-center text-white">Demander une rencontre!</h4>
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <label class="text-white">Nom*</label>
+                        <input asp-for="Name" class="form-control"  />
+                        <span asp-validation-for="Name" class="text-danger"></span>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <label class="text-white">Email*</label>
+                        <input asp-for="Email" class="form-control" />
+                        <span asp-validation-for="Email" class="text-danger"></span>
+                    </div> 
+                </div>
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <label class="text-white">Téléphone*</label>
+                        <input asp-for="Phone" class="form-control" />
+                        <span asp-validation-for="Phone" class="text-danger"></span>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-md-12">
+                        <label class="text-white">Message</label>
+                        <input asp-for="Message" class="form-control" rows="3"/>
+                        <span asp-validation-for="Message" class="text-danger"></span>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-md-offset-2 col-md-12">
+                        <button type="submit" class="btn btn-default bg-success">Demande</button>
+                    </div>
+                </div>
+            </form>
+        </section>
+    </div>
+</div>
+
+@section Scripts {
+    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
+}

GrossesMitaines/GrossesMitaines/Views/Shared/Components/EnVedette/Default.cshtml

@@ -1,50 +1,53 @@
 <div style="height:280px;">
     <div class="row">
-        <div class="col-md-7 col-sm-12 offset-md-1 offset-sm-0 text-primary" style="font-family:Comic Sans MS;">
+        <div class="col-md-7 col-sm-12 offset-md-1 offset-sm-0 text-primary vedette-title" style="font-family:Comic Sans MS;">
             <h1>Nos produits vedettes:</h1>
         </div>
     </div>
-    <div class="carousel slide" data-ride="carousel">
-        <div class="carousel-inner">
-            <div class="carousel-item bg-secondary rounded active">
-                <div class="row text-primary" style="font-family:Arial;">
-                    <div class="col-6 my-auto">
-                        <img class="d-block w-100" src="img/ceintureflechee.jpg" style="width:auto;max-height:200px;">
-                    </div>
-                    <div class="col-6 text-white">
-                        <h3>Ceinture flèchée</h3>
-                        <p>Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.</p>
-                        <h5>Seulement</h5>
-                        <h4 class="offset-1 bg-white text-success">85,86$+tx</h4>
+    <div class="row bg-secondary my-auto" style="height:250px;">
+        <div class="carousel slide col-12" data-ride="carousel">
+            <div class="carousel-inner">
+                <div class="carousel-item rounded active">
+                    <div class="row text-primary" style="font-family:Arial;">
+                        <div class="col-6 my-auto">
+                            <img class="d-block w-100" src="~/img/ceintureflechee.jpg" style="width:auto;max-height:200px;">
+                        </div>
+                        <div class="col-6 text-white">
+                            <h3>Ceinture flèchée</h3>
+                            <p>Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.</p>
+                            <h5>Seulement</h5>
+                            <h4 class="offset-1 bg-white text-success pl-1">85,86$+tx</h4>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="carousel-item bg-secondary rounded">
-                <div class="row text-primary" style="font-family:Arial;">
-                    <div class="col-6 my-auto">
-                        <img class="d-block w-100" src="img/pantouflesCH.jpg" style="width:auto;max-height:200px;">
-                    </div>
-                    <div class="col-6 text-white">
-                        <h3>Pantoufles du Canadien en Phentex</h3>
-                        <p>Parce que ça sent la coupe!</p>
-                        <h5>Seulement</h5>
-                        <h4 class="offset-1 bg-white text-success">15,64$+tx</h4>
+                <div class="carousel-item bg-secondary rounded">
+                    <div class="row text-primary" style="font-family:Arial;">
+                        <div class="col-6 my-auto">
+                            <img class="d-block w-100" src="~/img/pantouflesCH.jpg" style="width:auto;max-height:200px;">
+                        </div>
+                        <div class="col-6 text-white">
+                            <h3>Pantoufles du Canadien en Phentex</h3>
+                            <p>Parce que ça sent la coupe!</p>
+                            <h5>Seulement</h5>
+                            <h4 class="offset-1 bg-white text-success pl-1">15,64$+tx</h4>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="carousel-item bg-secondary rounded">
-                <div class="row text-primary" style="font-family:Arial;">
-                    <div class="col-6 my-auto">
-                        <img class="d-block w-100" src="img/jeanlucmongrain.jpg" style="width:auto;max-height:200px;">
-                    </div>
-                    <div class="col-6 text-white">
-                        <h3>Jean-Luc Mongrain</h3>
-                        <p>On ne lui ferait pas mal, en tout cas!!</p>
-                        <h5>Seulement</h5>
-                        <h4 class="offset-1 bg-white text-success">1453,12$+tx</h4>
+                <div class="carousel-item bg-secondary rounded">
+                    <div class="row text-primary" style="font-family:Arial;">
+                        <div class="col-6 my-auto">
+                            <img class="d-block w-100" src="~/img/jeanlucmongrain.jpg" style="width:auto;max-height:200px;">
+                        </div>
+                        <div class="col-6 text-white">
+                            <h3>Jean-Luc Mongrain</h3>
+                            <p>On ne lui ferait pas mal, en tout cas!!</p>
+                            <h5>Seulement</h5>
+                            <h4 class="offset-1 bg-white text-success pl-1">1453,12$+tx</h4>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</div>
+<br />

GrossesMitaines/GrossesMitaines/Views/Shared/_Layout.cshtml

@@ -4,11 +4,12 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - GrossesMitaines</title>
+    <link rel="icon" type="image/x-icon" href="~/img/favicon.ico" />
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link rel="stylesheet" href="~/font-awesome/css/all.min.css" />
 </head>
-<body class="bg-dark">
+<body class="bg-image">
     <audio autoplay muted>
         <Source src="~/audio/poupee.mp3" type="audio/mpeg" />
     </audio>
@@ -35,32 +36,44 @@
         </nav>
     </header>
 
-
     <div class="container">
-
-        <main role="main" class="pb-3">
+        <main role="main">
             @RenderBody()
         </main>
     </div>
 
-    <div style="height:100px;"/>
+
+    <div style="min-height:100px;"/>
     <footer class="border-top footer text-light bg-primary">
-        <div class="container" style="font-family:Comic Sans MS;">
-            <div class="offset-1">
-                <div class="row">
-                    <div class="col">
-                        <a asp-area="" asp-controller="Home" asp-action="AboutUs" class="text-light" style="font-family:Comic Sans MS;">À Propos</a>
-                    </div>
-                    <div class="col">
-                        <a asp-area="" asp-controller="Home" asp-action="ContactUs" class="text-light" style="font-family:Comic Sans MS;">Nous Contacter</a>
-                    </div>
-                    <div class="col">
-                        <a asp-area="" asp-controller="Home" asp-action="Privacy" class="text-light" style="font-family:Comic Sans MS;">Vie Privée</a>
-                    </div>
-                </div>
+        <div class="row">
+            <div class="col-4">
+                <a asp-area="" asp-controller="Home" asp-action="AboutUs" class="text-light" style="font-family:Comic Sans MS;">À Propos</a>
+            </div>
+            <div class="col-4">
+                <a asp-area="" asp-controller="Home" asp-action="ContactUs" class="text-light" style="font-family:Comic Sans MS;">Nous Contacter</a>
+            </div>
+            <div class="col-4">
+                <a asp-area="" asp-controller="Home" asp-action="Privacy" class="text-light" style="font-family:Comic Sans MS;">Vie Privée</a>
             </div>
         </div>
-        <div class="container text-white" style="font-family:Comic Sans MS;">
+        <br />
+        <div class="row">
+            <h4 class="col-12">
+                Joignez les plus de 1 000 Québécois qui ont décidés d'acheter GM!
+            </h4>
+        </div>
+        <div class="row">
+            <h6 class="col-12">- Nos partenaires -</h6>
+        </div>
+        <div class="row">
+            <div class="col-4 logo-gouv">
+            </div>
+            <div class="col-4 logo-tg">
+            </div>
+            <div class="col-4 logo-sqdc">
+            </div>
+        </div>
+        <div class="row text-white" style="font-family:Comic Sans MS;">
             &copy; 2022 - Les Grosses Mitaines à Ginette et Monique, inc.
         </div>
     </footer>

GrossesMitaines/GrossesMitaines/wwwroot/css/site.css

@@ -1,6 +1,11 @@
 /* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
 for details on configuring this project to bundle and minify static web assets. */
 
+.border-quetaine{
+    border: 3px dotted;
+    border-color: hotpink;
+    padding:5px;
+}
 
 a.navbar-brand {
   white-space: normal;
@@ -31,6 +36,15 @@ html {
     font-size: 14px;
 }
 
+footer{
+    margin-top:50px;
+    padding-left:25px;
+}
+
+footer > div{
+    margin-top:10px;
+}
+
 @media (min-width: 768px) {
     html {
         font-size: 16px;
@@ -61,9 +75,13 @@ html {
   min-height: 100%;
 }
 
-body {
-    /* Margin bottom by footer height */
-    margin-bottom: 60px;
+.bg-image {
+    background-image: url(../img/blured_wool_carpet.png);
+
+    background-attachment:fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
 }
 
 #btn-search{
@@ -74,10 +92,33 @@ body {
     margin:auto;
 }
 
-.footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    white-space: nowrap;
-    line-height: 60px; /* Vertically center the text there */
+.vedette-title{
+    background-color:rgba(0, 0, 0,.75);
+}
+
+.logo-tg {
+    background-image: url(/img/partenaires/logo-guidelines-fy21-GTlogo-colour.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    height: 30px;
+    width: auto;
+}
+
+.logo-sqdc {
+    background-image: url(/img/partenaires/sqdc1.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    height:30px;
+    width:auto;
+}
+
+.logo-gouv {
+    background-image: url(/img/partenaires/Logo_du_le_gouvernement_du_Québec.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    height: 30px;
+    width: auto;
 }