chebser/MyDarling
0
0
Fork 0
Code Actions Packages

Add bundle cards

Browse Source
This commit is contained in:
Sergey Chebotar 2023-02-01 09:30:01 +03:00
parent 2a238d65e4
commit 910bb1d727
2 changed files with 183 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Controllers/HomeController.cs
View File

@ -1,12 +1,19 @@
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MyDarling.Models;
namespace MyDarling.Controllers namespace MyDarling.Controllers
{ {
public class HomeController : Controller public class HomeController : Controller
{ {
private DataContext context;
public HomeController(DataContext context)
{
this.context = context;
}
public IActionResult Index() public IActionResult Index()
{ {
return View(); return View(context.UnderwearBundles.Include(bundle => bundle.Figures).Where(x => x.Price != 0));
} }
} }
} }

87
Views/Home/Index.cshtml
View File

@ -1,5 +1,8 @@
@model IQueryable<MyDarling.Models.UnderwearBundle>;
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru-RU"> <html lang="ru-RU">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@ -10,12 +13,15 @@
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script> <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<link href="/css/styles.css" rel="stylesheet" /> <link href="/css/styles.css" rel="stylesheet" />
</head> </head>
<body id="page-top"> <body id="page-top">
<!-- Navigation--> <!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container px-4 px-lg-5"> <div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top"><img height="40" src="assets/img/logo.svg"></a> <a class="navbar-brand" href="#page-top"><img height="40" src="assets/img/logo.svg"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu Menu
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
@ -34,7 +40,8 @@
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<div class="text-center"> <div class="text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1> <h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2> <h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by
Start Bootstrap.</h2>
<a class="btn btn-primary" href="#about">Get Started</a> <a class="btn btn-primary" href="#about">Get Started</a>
</div> </div>
</div> </div>
@ -47,7 +54,8 @@
<div class="col-lg-8"> <div class="col-lg-8">
<h2 class="text-white mb-4">Built with Bootstrap 5</h2> <h2 class="text-white mb-4">Built with Bootstrap 5</h2>
<p class="text-white-50"> <p class="text-white-50">
Grayscale is a free Bootstrap theme created by Start Bootstrap. It can be yours right now, simply download the template on Grayscale is a free Bootstrap theme created by Start Bootstrap. It can be yours right now,
simply download the template on
<a href="https://startbootstrap.com/theme/grayscale/">the preview page.</a> <a href="https://startbootstrap.com/theme/grayscale/">the preview page.</a>
The theme is open source, and you can use it for any purpose, personal or commercial. The theme is open source, and you can use it for any purpose, personal or commercial.
</p> </p>
@ -58,46 +66,22 @@
</section> </section>
<!-- Projects--> <!-- Projects-->
<section class="projects-section bg-light" id="projects"> <section class="projects-section bg-light" id="projects">
<div class="container px-4 px-lg-5"> <div class="container px-3 px-lg-4 mt-4">
<!-- Featured Project Row--> <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="row gx-0 mb-4 mb-lg-5 align-items-center"> @foreach (var bundle in @Model)
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="assets/img/bg-masthead.jpg" alt="..." /></div> {
<div class="col-xl-4 col-lg-5"> <div class="col mb-5">
<div class="featured-text text-center text-lg-left"> <div class="card h-100">
<h4>Shoreline</h4> <img class="card-img-top" src="@bundle.Figures.FirstOrDefault().FilePath" alt="..." />
<p class="text-black-50 mb-0">Grayscale is open source and MIT licensed. This means you can use it for any project - even commercial projects! Download it, customize it, and publish your website!</p> <div class="card-body p-4">
</div> <div class="text-center">
</div> <h5 class="fw-bolder">@bundle.Name</h5>
</div> @bundle.Price.ToString("c0")
<!-- Project One Row-->
<div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-01.jpg" alt="..." /></div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Misty</h4>
<p class="mb-0 text-white-50">An example of where you can put an image of a project, or anything else, along with a description.</p>
<hr class="d-none d-lg-block mb-0 ms-0" />
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row-->
<div class="row gx-0 justify-content-center">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-02.jpg" alt="..." /></div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Mountains</h4>
<p class="mb-0 text-white-50">Another example of a project with its respective description. These sections work well responsively as well, try this theme on a small screen!</p>
<hr class="d-none d-lg-block mb-0 me-0" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
}
</div> </div>
</div> </div>
</section> </section>
@ -118,11 +102,16 @@
<form class="form-signup" id="contactForm" data-sb-form-api-token="API_TOKEN"> <form class="form-signup" id="contactForm" data-sb-form-api-token="API_TOKEN">
<!-- Email address input--> <!-- Email address input-->
<div class="row input-group-newsletter"> <div class="row input-group-newsletter">
<div class="col"><input class="form-control" id="emailAddress" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div> <div class="col"><input class="form-control" id="emailAddress" type="email"
<div class="col-auto"><button class="btn btn-primary disabled" id="submitButton" type="submit">Notify Me!</button></div> placeholder="Enter email address..." aria-label="Enter email address..."
data-sb-validations="required,email" /></div>
<div class="col-auto"><button class="btn btn-primary disabled" id="submitButton"
type="submit">Notify Me!</button></div>
</div>
<div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:required">An email is
required.</div>
<div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:email">Email is not valid.
</div> </div>
<div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:required">An email is required.</div>
<div class="invalid-feedback mt-2" data-sb-feedback="emailAddress:email">Email is not valid.</div>
<!-- Submit success message--> <!-- Submit success message-->
<!----> <!---->
<!-- This is what your users will see when the form--> <!-- This is what your users will see when the form-->
@ -132,14 +121,17 @@
<div class="fw-bolder">Form submission successful!</div> <div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at To activate this form, sign up at
<br /> <br />
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a> <a
href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
</div> </div>
</div> </div>
<!-- Submit error message--> <!-- Submit error message-->
<!----> <!---->
<!-- This is what your users will see when there is--> <!-- This is what your users will see when there is-->
<!-- an error submitting the form--> <!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div> <div class="d-none" id="submitErrorMessage">
<div class="text-center text-danger mb-3 mt-2">Error sending message!</div>
</div>
</form> </form>
</div> </div>
</div> </div>
@ -188,10 +180,13 @@
</div> </div>
</section> </section>
<!-- Footer--> <!-- Footer-->
<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; Your Website 2022</div></footer> <footer class="footer bg-black small text-center text-white-50">
<div class="container px-4 px-lg-5">Copyright &copy; Your Website 2022</div>
</footer>
<!-- Bootstrap core JS--> <!-- Bootstrap core JS-->
<script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS--> <!-- Core theme JS-->
<script src="/js/scripts.js"></script> <script src="/js/scripts.js"></script>
</body> </body>
</html> </html>