├── .gitignore
├── src
    ├── routes
    │   ├── backend
    │   │   ├── customer
    │   │   │   ├── mod.rs
    │   │   │   └── address.rs
    │   │   ├── items
    │   │   │   ├── mod.rs
    │   │   │   └── list_items.rs
    │   │   ├── reviews
    │   │   │   ├── mod.rs
    │   │   │   ├── list.rs
    │   │   │   └── new_review.rs
    │   │   ├── logout.rs
    │   │   ├── mod.rs
    │   │   ├── register.rs
    │   │   └── login.rs
    │   ├── admin_backend
    │   │   ├── mod.rs
    │   │   └── create_products.rs
    │   ├── mod.rs
    │   └── frontend
    │   │   ├── contact.rs
    │   │   ├── shop.rs
    │   │   ├── handlers.rs
    │   │   └── mod.rs
    ├── utils
    │   ├── mod.rs
    │   ├── app_state.rs
    │   ├── hash.rs
    │   ├── app_error.rs
    │   ├── custom_middleware.rs
    │   ├── custom_frontend_middleware.rs
    │   └── jwt.rs
    ├── database
    │   ├── mod.rs
    │   ├── prelude.rs
    │   ├── product_review.rs
    │   ├── address.rs
    │   ├── categories.rs
    │   ├── customer.rs
    │   ├── colors.rs
    │   ├── sizes.rs
    │   └── product.rs
    ├── lib.rs
    └── main.rs
├── env_example
├── README.md
├── todo.md
├── Cargo.toml
├── templates
    ├── components
    │   ├── thankyou.html
    │   ├── products.html
    │   ├── footer.html
    │   ├── topbar.html
    │   └── navbar.html
    ├── base.html
    ├── contact.html
    ├── cart.html
    ├── checkout.html
    ├── shop.html
    ├── detail.html
    └── index.html
├── database_setup
    └── init.sql
└── docs
    └── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | **/target
2 | **/dist
3 | **/.env
4 | 


--------------------------------------------------------------------------------
/src/routes/backend/customer/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod address;
2 | 


--------------------------------------------------------------------------------
/src/routes/backend/items/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod list_items;
2 | 


--------------------------------------------------------------------------------
/src/routes/backend/reviews/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod new_review;
2 | pub mod list;
3 | 


--------------------------------------------------------------------------------
/env_example:
--------------------------------------------------------------------------------
1 | PORT="3000"
2 | BASE_ADDRESS="0.0.0.0"
3 | DATABASE_URL=postgresql://postgres:password@localhost:5432/e_commerce
4 | JWT_SECRET="NEW_SECRET"
5 | 


--------------------------------------------------------------------------------
/src/utils/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod app_state;
2 | pub mod app_error;
3 | pub mod jwt;
4 | pub mod hash;
5 | pub mod custom_middleware;
6 | pub mod custom_frontend_middleware;
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## E-Commerce Website
2 | 
3 | > **DISCLAIMER:** My Initial idea was to use `yew` for the frontend but shit happened so I just used `Askama` to render the `HTML` templates. 
4 | 


--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
1 | ## TODO:
2 | - [ ] finish up review listing API
3 | - [ ] The API should be able to list one review
4 | - [ ] The api should be able to list all items.
5 | 
6 | - [ ] Start creating the customer address part.
7 | 


--------------------------------------------------------------------------------
/src/database/mod.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | pub mod prelude;
 4 | 
 5 | pub mod address;
 6 | pub mod categories;
 7 | pub mod colors;
 8 | pub mod customer;
 9 | pub mod product;
10 | pub mod product_review;
11 | pub mod sizes;
12 | 


--------------------------------------------------------------------------------
/src/routes/admin_backend/mod.rs:
--------------------------------------------------------------------------------
 1 | pub mod create_products;
 2 | 
 3 | use axum::{routing::post, Router};
 4 | 
 5 | use crate::utils::app_state::AppState;
 6 | 
 7 | use self::create_products::create_products;
 8 | 
 9 | pub fn admin_routes(app_state: AppState) -> Router{
10 |     Router::new()
11 |         .route("/create_products", post(create_products))
12 |         .with_state(app_state)
13 | 
14 | }
15 | 


--------------------------------------------------------------------------------
/src/database/prelude.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | pub use super::address::Entity as Address;
 4 | pub use super::categories::Entity as Categories;
 5 | pub use super::colors::Entity as Colors;
 6 | pub use super::customer::Entity as Customer;
 7 | pub use super::product::Entity as Product;
 8 | pub use super::product_review::Entity as ProductReview;
 9 | pub use super::sizes::Entity as Sizes;
10 | 


--------------------------------------------------------------------------------
/src/utils/app_state.rs:
--------------------------------------------------------------------------------
 1 | use axum::extract::FromRef;
 2 | use sea_orm::DatabaseConnection;
 3 | 
 4 | 
 5 | #[derive(Clone, FromRef)]
 6 | pub struct AppState{
 7 |     pub database: DatabaseConnection,
 8 |     pub base_url: Wrapper,
 9 |     pub jwt_secret: TokenWrapper
10 | }
11 | 
12 | #[derive(Clone)]
13 | pub struct Wrapper{
14 |     pub url: String,
15 |     pub port: String
16 | }
17 | 
18 | #[derive(Clone)]
19 | pub struct TokenWrapper(pub String);
20 | 


--------------------------------------------------------------------------------
/src/database/product_review.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | use sea_orm::entity::prelude::*;
 4 | 
 5 | #[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
 6 | #[sea_orm(table_name = "product_review")]
 7 | pub struct Model {
 8 |     #[sea_orm(primary_key)]
 9 |     pub id: i32,
10 |     pub customer_id: i32,
11 |     pub product_id: i32,
12 |     pub rating: i32,
13 |     pub review_text: String,
14 |     pub review_date: DateTime,
15 | }
16 | 
17 | #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
18 | pub enum Relation {}
19 | 
20 | impl ActiveModelBehavior for ActiveModel {}
21 | 


--------------------------------------------------------------------------------
/src/database/address.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | use sea_orm::entity::prelude::*;
 4 | 
 5 | #[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
 6 | #[sea_orm(table_name = "address")]
 7 | pub struct Model {
 8 |     #[sea_orm(primary_key)]
 9 |     pub id: i32,
10 |     pub country: String,
11 |     pub state: String,
12 |     pub town: String,
13 |     pub zip: String,
14 |     pub address_line_1: String,
15 |     pub address_line_2: Option<String>,
16 | }
17 | 
18 | #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
19 | pub enum Relation {}
20 | 
21 | impl ActiveModelBehavior for ActiveModel {}
22 | 


--------------------------------------------------------------------------------
/src/database/categories.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | use sea_orm::entity::prelude::*;
 4 | 
 5 | #[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
 6 | #[sea_orm(table_name = "categories")]
 7 | pub struct Model {
 8 |     #[sea_orm(primary_key)]
 9 |     pub id: i32,
10 |     #[sea_orm(unique)]
11 |     pub name: String,
12 | }
13 | 
14 | #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
15 | pub enum Relation {
16 |     #[sea_orm(has_many = "super::product::Entity")]
17 |     Product,
18 | }
19 | 
20 | impl Related<super::product::Entity> for Entity {
21 |     fn to() -> RelationDef {
22 |         Relation::Product.def()
23 |     }
24 | }
25 | 
26 | impl ActiveModelBehavior for ActiveModel {}
27 | 


--------------------------------------------------------------------------------
/src/routes/mod.rs:
--------------------------------------------------------------------------------
 1 | use axum::Router;
 2 | use tower_http::services::ServeDir;
 3 | 
 4 | use crate::utils::app_state::AppState;
 5 | 
 6 | use self::{admin_backend::admin_routes, backend::backend_routes, frontend::frontend_routes};
 7 | 
 8 | pub mod backend;
 9 | pub mod frontend;
10 | pub mod admin_backend;
11 | 
12 | pub fn create_route(app_state: AppState) -> Router {
13 |     
14 |     let asset_path = std::env::current_dir().unwrap();
15 |     Router::new()
16 |         .nest("/api/v1", backend_routes(app_state.clone()))
17 |         .nest("/api/admin/v1", admin_routes(app_state.clone()))
18 |         .nest("/", frontend_routes(app_state.clone()))
19 |         .nest_service("/assets", ServeDir::new(format!("{}/assets", asset_path.to_str().unwrap())))
20 | }
21 | 


--------------------------------------------------------------------------------
/src/routes/backend/logout.rs:
--------------------------------------------------------------------------------
 1 | use axum::{extract::State, http::StatusCode, Extension};
 2 | use sea_orm::{ActiveModelTrait, DatabaseConnection, IntoActiveModel, Set};
 3 | 
 4 | use crate::{database::customer, utils::app_error::AppError};
 5 | 
 6 | 
 7 | pub async fn logout(
 8 |     State(database): State<DatabaseConnection>,
 9 |     Extension(user): Extension<customer::Model>
10 |     )-> Result<StatusCode, AppError>{
11 | 
12 |     let mut user = user.into_active_model();
13 |     user.token = Set(None);
14 |     user.save(&database)
15 |         .await
16 |         .map_err(|error|{
17 |             eprintln!("Error login out: {}", error);
18 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Error login out, please try again later")
19 |         })?;
20 |     Ok(StatusCode::OK)
21 | }
22 | 


--------------------------------------------------------------------------------
/src/utils/hash.rs:
--------------------------------------------------------------------------------
 1 | use axum::http::StatusCode;
 2 | use bcrypt::{hash, verify};
 3 | 
 4 | use super::app_error::AppError;
 5 | 
 6 | pub fn create_hash(password: String) -> Result<String, AppError>{
 7 |     hash(password, 13)
 8 |         .map_err(|error| {
 9 |             eprint!("error while hashing password: {}", error);
10 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Error occured while hashing password")
11 |         })
12 | }
13 | 
14 | pub fn verifiy_pass(password: String, hash: &str) -> Result<bool, AppError> {
15 |     
16 |     verify(password, hash)
17 |         .map_err(|error|{
18 |             eprintln!("Error verifying your password: {}", error);
19 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong while verifying your password")
20 |         })
21 | }
22 | 
23 | 


--------------------------------------------------------------------------------
/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "ecommerce"
 3 | version = "0.1.0"
 4 | edition = "2021"
 5 | 
 6 | [dependencies]
 7 | askama = { version = "0.12.1", features = ["serde", "serde-json"] }
 8 | axum = { version = "0.7.5", features = ["macros"] }
 9 | axum-extra = { version = "0.9.3", features = ["typed-header"] }
10 | bcrypt = "0.15.1"
11 | chrono = { version = "0.4.38", features = ["serde"] }
12 | dotenvy = "0.15.7"
13 | dotenvy_macro = "0.15.7"
14 | hyper = "1.3.1"
15 | jsonwebtoken = "9.3.0"
16 | reqwest = { version = "0.12.5", features = ["json"] }
17 | sea-orm = { version = "0.12.15", features = ["sqlx-postgres", "runtime-tokio-rustls"] }
18 | serde = { version = "1.0.198", features = ["derive"] }
19 | tokio = { version = "1.37.0", features = ["macros", "rt-multi-thread", "net"] }
20 | tower-http = { version = "0.5.2", features = ["fs"] }
21 | 


--------------------------------------------------------------------------------
/src/utils/app_error.rs:
--------------------------------------------------------------------------------
 1 | use axum::{http::StatusCode, response::IntoResponse, Json};
 2 | use serde::{Deserialize, Serialize};
 3 | 
 4 | #[derive(Debug)]
 5 | pub struct AppError{
 6 |     code: StatusCode,
 7 |     message: String
 8 | }
 9 | 
10 | impl AppError {
11 |     
12 |     pub fn new( code: StatusCode, message: impl Into<String>) -> Self {
13 |         
14 |         Self{
15 |             code,
16 |             message: message.into()
17 |         }
18 |     }
19 | }
20 | 
21 | impl IntoResponse for AppError {
22 |     fn into_response(self) -> axum::response::Response {
23 |         (
24 |             self.code,
25 |             Json(ErrorResponse{ error: self.message.clone()})
26 |         ).into_response()
27 |     }
28 |     
29 | }
30 | 
31 | #[derive(Serialize, Deserialize)]
32 | struct ErrorResponse{
33 |     error: String
34 | }
35 | 


--------------------------------------------------------------------------------
/src/database/customer.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | use sea_orm::entity::prelude::*;
 4 | 
 5 | #[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
 6 | #[sea_orm(table_name = "customer")]
 7 | pub struct Model {
 8 |     #[sea_orm(primary_key)]
 9 |     pub id: i32,
10 |     #[sea_orm(unique)]
11 |     pub username: String,
12 |     pub first_name: String,
13 |     pub last_name: String,
14 |     pub email: String,
15 |     pub telephone: String,
16 |     #[sea_orm(unique)]
17 |     pub default_address_id: Option<i32>,
18 |     #[sea_orm(unique)]
19 |     pub salt: String,
20 |     pub password_hash: String,
21 |     #[sea_orm(column_type = "Text", nullable)]
22 |     pub token: Option<String>,
23 | }
24 | 
25 | #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
26 | pub enum Relation {}
27 | 
28 | impl ActiveModelBehavior for ActiveModel {}
29 | 


--------------------------------------------------------------------------------
/src/database/colors.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | use sea_orm::entity::prelude::*;
 4 | 
 5 | #[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
 6 | #[sea_orm(table_name = "colors")]
 7 | pub struct Model {
 8 |     #[sea_orm(primary_key)]
 9 |     pub id: i32,
10 |     pub product_id: i32,
11 |     pub color: String,
12 |     pub quantity: i32,
13 | }
14 | 
15 | #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
16 | pub enum Relation {
17 |     #[sea_orm(
18 |         belongs_to = "super::product::Entity",
19 |         from = "Column::ProductId",
20 |         to = "super::product::Column::Id",
21 |         on_update = "NoAction",
22 |         on_delete = "Cascade"
23 |     )]
24 |     Product,
25 | }
26 | 
27 | impl Related<super::product::Entity> for Entity {
28 |     fn to() -> RelationDef {
29 |         Relation::Product.def()
30 |     }
31 | }
32 | 
33 | impl ActiveModelBehavior for ActiveModel {}
34 | 


--------------------------------------------------------------------------------
/src/database/sizes.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | use sea_orm::entity::prelude::*;
 4 | 
 5 | #[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
 6 | #[sea_orm(table_name = "sizes")]
 7 | pub struct Model {
 8 |     #[sea_orm(primary_key)]
 9 |     pub id: i32,
10 |     pub product_id: i32,
11 |     pub size: String,
12 |     pub quantity: i32,
13 | }
14 | 
15 | #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
16 | pub enum Relation {
17 |     #[sea_orm(
18 |         belongs_to = "super::product::Entity",
19 |         from = "Column::ProductId",
20 |         to = "super::product::Column::Id",
21 |         on_update = "NoAction",
22 |         on_delete = "Cascade"
23 |     )]
24 |     Product,
25 | }
26 | 
27 | impl Related<super::product::Entity> for Entity {
28 |     fn to() -> RelationDef {
29 |         Relation::Product.def()
30 |     }
31 | }
32 | 
33 | impl ActiveModelBehavior for ActiveModel {}
34 | 


--------------------------------------------------------------------------------
/src/lib.rs:
--------------------------------------------------------------------------------
 1 | pub mod utils;
 2 | pub mod database;
 3 | mod routes;
 4 | 
 5 | use axum::http::StatusCode;
 6 | use routes::create_route;
 7 | use utils::{app_error::AppError, app_state::AppState};
 8 | 
 9 | pub async fn launch(app_state: AppState)-> Result<(), AppError>{
10 |     let apps_state = app_state.clone();
11 |     let app = create_route(app_state);
12 | 
13 |     let address = format!("{}:{}", apps_state.base_url.url, apps_state.base_url.port);
14 |     let listenter = tokio::net::TcpListener::bind(&address)
15 |         .await
16 |         .map_err(|error|{
17 |             eprintln!("There was an issue with the bind address {}, {}", address, error);
18 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Could not connect with the address and port")
19 |         })?;
20 | 
21 |     axum::serve(listenter, app)
22 |         .await
23 |         .map_err(|error|{
24 |             eprintln!("Could not start the server: {}", error);
25 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Could not start the server")
26 |         })
27 | 
28 | }
29 | 
30 | 


--------------------------------------------------------------------------------
/templates/components/thankyou.html:
--------------------------------------------------------------------------------
 1 | 
 2 | {% extends "base.html" %}
 3 | {% block content %}
 4 |     <!-- Topbar Start -->
 5 |     {% include "components/topbar.html" %}
 6 |     <!-- Topbar End -->
 7 | 
 8 | 
 9 |     <!-- Navbar Start -->
10 |     {% include "components/navbar.html" %}
11 |     <!-- Navbar End -->
12 | 
13 | 
14 |     <!-- Breadcrumb Start -->
15 |     <div class="container-fluid">
16 |         <div class="row px-xl-5">
17 |             <div class="col-12">
18 |                 <nav class="breadcrumb bg-light mb-30">
19 |                     <a class="breadcrumb-item text-dark" href="/">Home</a>
20 |                     <span class="breadcrumb-item active">Contact</span>
21 |                 </nav>
22 |             </div>
23 |         </div>
24 |     </div>
25 |     <!-- Breadcrumb End -->
26 | 
27 |     <div class="container-fluid">
28 | 	    <h1> Thankyou! </h1>
29 | 	    <p> {{ message }}</p>
30 |     </div>
31 | 
32 | 
33 | 
34 |     <!-- Footer Start -->
35 |     {% include "components/footer.html" %}
36 |     <!-- Footer End -->
37 | 
38 | {% endblock %}
39 | 


--------------------------------------------------------------------------------
/src/main.rs:
--------------------------------------------------------------------------------
 1 | use axum::http::StatusCode;
 2 | use ecommerce::{launch, utils::{app_error::AppError, app_state::{AppState, TokenWrapper, Wrapper}}};
 3 | use dotenvy_macro::dotenv;
 4 | use sea_orm::Database;
 5 | 
 6 | 
 7 | #[tokio::main]
 8 | async fn main() -> Result<(), AppError> {
 9 |     
10 |     dotenvy::dotenv().ok();
11 |     let port = dotenv!("PORT").to_string();
12 |     let base_url = dotenv!("BASE_ADDRESS").to_string();
13 |     let database_url = dotenv!("DATABASE_URL");
14 |     let jwt_secret = dotenv!("JWT_SECRET").to_string();
15 |     let database = Database::connect(database_url)
16 |         .await
17 |         .map_err(|error|{
18 |             eprintln!("Error could not connect to the database: {}", error);
19 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Could not connect to the database")
20 |         })?;
21 |     let app_state = AppState{
22 |         database,
23 |         base_url: Wrapper { url: base_url, port },
24 |         jwt_secret: TokenWrapper(jwt_secret)
25 | 
26 |     };
27 |     launch(app_state).await?;
28 |     Ok(())
29 | }
30 | 


--------------------------------------------------------------------------------
/src/routes/frontend/contact.rs:
--------------------------------------------------------------------------------
 1 | use axum::{extract::rejection::FormRejection, response::{Html, IntoResponse}, Form};
 2 | use serde::{Deserialize, Serialize};
 3 | 
 4 | use crate::routes::frontend::{handlers::{ContactTemplate, ThankyouTemplate}, HtmlTemplate};
 5 | 
 6 | #[derive(Serialize, Deserialize, Debug)]
 7 | pub struct ContactDetails{
 8 |     name: String,
 9 |     email: String,
10 |     subject: String,
11 |     message: String
12 | }
13 | 
14 | pub async fn contact_us(form_res: Result<Form<ContactDetails>, FormRejection> ) -> impl IntoResponse {
15 |     dbg!(&form_res);
16 |     match form_res {
17 |         Ok(Form(details)) => {
18 | 
19 |             dbg!(&details);
20 |             let message = format!("Thankyou {}, Your form has been submitted successfull", details.name);
21 |             let temp = ThankyouTemplate{
22 |                 message
23 |             };
24 |             HtmlTemplate(temp)
25 | 
26 |         }
27 |         Err(e) => {
28 |             eprintln!("something went wrong: {}:", e);
29 |             let message = format!("Something went wrong");
30 |             let temp = ThankyouTemplate{
31 |                 message
32 |             };
33 |             HtmlTemplate(temp)
34 |         }
35 |         
36 |     }
37 |     
38 | 
39 | 
40 | }
41 | 


--------------------------------------------------------------------------------
/src/routes/frontend/shop.rs:
--------------------------------------------------------------------------------
 1 | use askama::Template;
 2 | use axum::{extract::{Request, State}, http::HeaderValue, response::IntoResponse};
 3 | use hyper::{header::AUTHORIZATION, HeaderMap};
 4 | use reqwest::Client;
 5 | use sea_orm::prelude::Decimal;
 6 | use serde::{Deserialize, Serialize};
 7 | 
 8 | use crate::utils::{app_state::AppState, custom_frontend_middleware::frontend_guard};
 9 | 
10 | use super::HtmlTemplate;
11 | 
12 | #[derive(Template)]
13 | #[template(path="shop.html")]
14 | pub struct ShopTemplate{
15 |     token: String,
16 | }
17 | 
18 | #[derive(Serialize, Deserialize, Debug)]
19 | pub struct Items{
20 |     product_name: String,
21 |     description: String,
22 |     image_name: String,
23 |     price: Decimal,
24 |     quantity: String,
25 |     date_added: String,
26 | }
27 | 
28 | pub async fn shop(State(client): State<Client>, mut req: Request) -> impl IntoResponse{
29 |     let url = "http://localhost:3000/api/v1/list";
30 |     let jwt_token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MjA1NDMzODcsImlhdCI6MTcyMDU0Mjc4N30.969xF0E3uLS-VFYgGD34lI0vTQo9dfzs2cyYKwSFfRc";
31 | 
32 |     let tkn = format!("Bearer {}", jwt_token).parse().unwrap();
33 |     req.headers_mut().insert("Authorization", tkn);
34 | 
35 |     let temp = ShopTemplate{
36 |         token: jwt_token.to_string()
37 |     };
38 |     HtmlTemplate(temp)
39 | 
40 | }
41 | 


--------------------------------------------------------------------------------
/src/routes/backend/mod.rs:
--------------------------------------------------------------------------------
 1 | mod register;
 2 | mod login;
 3 | mod logout;
 4 | mod items;
 5 | mod reviews;
 6 | mod customer;
 7 | use axum::{middleware, routing::{get, post}, Router};
 8 | use serde::{Deserialize, Serialize};
 9 | 
10 | use crate::utils::{app_state::AppState, custom_middleware::guard_routes};
11 | use self::{customer::address::create_address, items::list_items::{list_all_items, list_one_item}, login::login, logout::logout, register::register, reviews::{list::{list_all_reviews, list_reviews}, new_review::create_review}};
12 | 
13 | pub fn backend_routes(app_state: AppState) -> Router{
14 |     Router::new()
15 |         .route("/address", post(create_address))
16 |         .route("/review", post(create_review))
17 |         .route("/review/:id", get(list_reviews))
18 |         .route("/review", get(list_all_reviews))
19 |         .route("/logout", post(logout))
20 |         .route("/list/:id", get(list_one_item))
21 |         .route("/list", get(list_all_items))
22 |         .route_layer(middleware::from_fn_with_state(app_state.clone(), guard_routes))
23 |         .route("/register", post(register))
24 |         .route("/login", post(login))
25 |         .with_state(app_state)
26 | 
27 | }
28 | 
29 | 
30 | #[derive(Serialize, Deserialize)]
31 | pub struct RespondUser{
32 |     user_id: i32,
33 |     username: String,
34 |     telephone: String,
35 |     email: String,
36 |     pub token: Option<String>
37 | }
38 | 


--------------------------------------------------------------------------------
/src/routes/frontend/handlers.rs:
--------------------------------------------------------------------------------
 1 | use askama::Template;
 2 | use axum::{response::IntoResponse, Form};
 3 | use serde::{Deserialize, Serialize};
 4 | 
 5 | use super::{contact::ContactDetails, HtmlTemplate};
 6 | 
 7 | #[derive(Template)]
 8 | #[template(path="index.html")]
 9 | pub struct HomeTemplate{}
10 | 
11 | pub async fn home() -> impl IntoResponse{
12 |     let temp = HomeTemplate{};
13 |     HtmlTemplate(temp)
14 | 
15 | }
16 | 
17 | #[derive(Template)]
18 | #[template(path="contact.html")]
19 | pub struct ContactTemplate{}
20 | 
21 | 
22 | pub async fn contact() -> impl IntoResponse{
23 |     let temp = ContactTemplate{};
24 |     HtmlTemplate(temp)
25 | 
26 | }
27 | 
28 | #[derive(Template)]
29 | #[template(path="detail.html")]
30 | pub struct DetailTemplate{}
31 | 
32 | pub async fn detail() -> impl IntoResponse{
33 |     let temp = DetailTemplate{};
34 |     HtmlTemplate(temp)
35 | 
36 | }
37 | 
38 | #[derive(Template)]
39 | #[template(path="checkout.html")]
40 | pub struct CheckoutTemplate{}
41 | 
42 | pub async fn checkout() -> impl IntoResponse{
43 |     let temp = CheckoutTemplate{};
44 |     HtmlTemplate(temp)
45 | 
46 | }
47 | 
48 | 
49 | 
50 | #[derive(Template)]
51 | #[template(path="cart.html")]
52 | pub struct CartTemplate{}
53 | 
54 | pub async fn cart() -> impl IntoResponse{
55 |     let temp = CartTemplate{};
56 |     HtmlTemplate(temp)
57 | 
58 | }
59 | 
60 | #[derive(Template)]
61 | #[template(path="components/thankyou.html")]
62 | pub struct ThankyouTemplate{
63 |     pub message: String
64 | }
65 | 
66 | 


--------------------------------------------------------------------------------
/src/utils/custom_middleware.rs:
--------------------------------------------------------------------------------
 1 | use axum::{extract::{Request, State}, http::StatusCode, middleware::Next, response::Response};
 2 | use axum_extra::headers::{authorization::Bearer, Authorization, HeaderMapExt};
 3 | use sea_orm::{ColumnTrait, DatabaseConnection, EntityTrait, QueryFilter};
 4 | 
 5 | use super::{app_error::AppError, app_state::TokenWrapper};
 6 | use crate::{database::customer::{self, Entity as Users}, utils::jwt::validate_jwt};
 7 | 
 8 | pub async fn guard_routes(
 9 |     State(database): State<DatabaseConnection>,
10 |     State(jwt_secret): State<TokenWrapper>,
11 |     mut request: Request,
12 |     next: Next
13 |     )-> Result<Response, AppError> {
14 |     
15 |     let token = request.headers().typed_get::<Authorization<Bearer>>()
16 |         .ok_or_else(||AppError::new(StatusCode::BAD_REQUEST, "Not authenticated Please login"))?
17 |         .token()
18 |         .to_owned();
19 | 
20 |     let user = Users::find()
21 |         .filter(customer::Column::Token.eq(&token))
22 |         .one(&database)
23 |         .await
24 |         .map_err(|error|{
25 |             eprintln!("Error finding user: {}", error);
26 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
27 |         })?;
28 |     validate_jwt(&jwt_secret.0, &token)?;
29 | 
30 |     if let Some(user) = user{
31 |         request.extensions_mut().insert(user);
32 | 
33 |     }else {
34 |         return Err( AppError::new(StatusCode::UNAUTHORIZED, "You are not authorized"));
35 |     }
36 |     Ok(next.run(request).await)
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/src/utils/custom_frontend_middleware.rs:
--------------------------------------------------------------------------------
 1 | 
 2 | use axum::{body::Body, extract::{Request, State}, middleware::Next, response::Response};
 3 | use axum_extra::headers::{authorization::{self, Bearer}, Authorization, HeaderMapExt};
 4 | use reqwest::{StatusCode};
 5 | use sea_orm::{ColumnTrait, DatabaseConnection, EntityTrait, QueryFilter};
 6 | 
 7 | use super::{app_error::AppError, app_state::TokenWrapper, jwt::validate_jwt};
 8 | use crate::database::customer::{self, Entity as Users};
 9 | 
10 | pub async fn frontend_guard(
11 |     State(database): State<DatabaseConnection>,
12 | 
13 |     State(jwt_secret): State<TokenWrapper>,
14 |     mut req: Request,
15 |     next: Next,
16 | ) -> Result<Response, AppError> {
17 | 
18 |     let token = req.headers().typed_get::<Authorization<Bearer>>()
19 |         .ok_or(AppError::new(StatusCode::UNAUTHORIZED, "No token found"))?
20 |         .token()
21 |         .to_owned();
22 | 
23 |     let user = Users::find()
24 |         .filter(customer::Column::Token.eq(&token))
25 |         .one(&database)
26 |         .await
27 |         .map_err(|error|{
28 |             eprintln!("Error finding user: {}", error);
29 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
30 |         })?;
31 |     validate_jwt(&jwt_secret.0, &token)?;
32 | 
33 |     if let Some(user) = user{
34 |         req.extensions_mut().insert(user);
35 | 
36 |     }else {
37 |         return Err( AppError::new(StatusCode::UNAUTHORIZED, "You are not authorized"));
38 |     }
39 | 
40 | 
41 |     Ok(next.run(req).await)
42 | 
43 | 
44 | }
45 | 


--------------------------------------------------------------------------------
/src/database/product.rs:
--------------------------------------------------------------------------------
 1 | //! `SeaORM` Entity. Generated by sea-orm-codegen 0.12.15
 2 | 
 3 | use sea_orm::entity::prelude::*;
 4 | 
 5 | #[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
 6 | #[sea_orm(table_name = "product")]
 7 | pub struct Model {
 8 |     #[sea_orm(primary_key)]
 9 |     pub id: i32,
10 |     pub product_name: String,
11 |     #[sea_orm(column_type = "Decimal(Some((10, 2)))")]
12 |     pub price: Decimal,
13 |     pub star: Option<i32>,
14 |     pub image_name: String,
15 |     pub date_added: DateTime,
16 |     pub category_id: i32,
17 |     #[sea_orm(column_type = "Text")]
18 |     pub description: String,
19 |     pub quantity: i32,
20 | }
21 | 
22 | #[derive(Copy, Clone, Debug, EnumIter, DeriveRelation)]
23 | pub enum Relation {
24 |     #[sea_orm(
25 |         belongs_to = "super::categories::Entity",
26 |         from = "Column::CategoryId",
27 |         to = "super::categories::Column::Id",
28 |         on_update = "NoAction",
29 |         on_delete = "NoAction"
30 |     )]
31 |     Categories,
32 |     #[sea_orm(has_many = "super::colors::Entity")]
33 |     Colors,
34 |     #[sea_orm(has_many = "super::sizes::Entity")]
35 |     Sizes,
36 | }
37 | 
38 | impl Related<super::categories::Entity> for Entity {
39 |     fn to() -> RelationDef {
40 |         Relation::Categories.def()
41 |     }
42 | }
43 | 
44 | impl Related<super::colors::Entity> for Entity {
45 |     fn to() -> RelationDef {
46 |         Relation::Colors.def()
47 |     }
48 | }
49 | 
50 | impl Related<super::sizes::Entity> for Entity {
51 |     fn to() -> RelationDef {
52 |         Relation::Sizes.def()
53 |     }
54 | }
55 | 
56 | impl ActiveModelBehavior for ActiveModel {}
57 | 


--------------------------------------------------------------------------------
/src/utils/jwt.rs:
--------------------------------------------------------------------------------
 1 | use axum::http::StatusCode;
 2 | use chrono::{Duration, Utc};
 3 | use jsonwebtoken::{decode, encode, Algorithm, DecodingKey, EncodingKey, Header, Validation};
 4 | use serde::{Deserialize, Serialize};
 5 | 
 6 | use super::app_error::AppError;
 7 | 
 8 | #[derive(Debug, Serialize, Deserialize)]
 9 | struct Claims{
10 |     exp: usize,
11 |     iat: usize
12 | }
13 | pub fn create_jwt(jwt_secret: &str) -> Result<String, AppError> {
14 |     
15 |     let now = Utc::now();
16 |     let iat = now.timestamp() as usize;
17 |     let exp_time = Duration::try_minutes(10).expect("Enter valid number");
18 |     let exp = (now + exp_time).timestamp() as usize;
19 | 
20 |     let claims = Claims{
21 |         iat,
22 |         exp
23 | 
24 |     };
25 |     let key = &EncodingKey::from_secret(jwt_secret.as_bytes());
26 |     encode(&Header::default(), &claims, key)
27 |         .map_err(|error|{
28 |             eprintln!("Could not create jwt {}", error);
29 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Error occured when creating jwt token, Please try again later")
30 |         })
31 | 
32 | }
33 | pub fn validate_jwt(jwt_secret: &str, token: &str) -> Result<bool, AppError>{
34 |     let key = DecodingKey::from_secret(jwt_secret.as_bytes());
35 |     let validation = &Validation::new(Algorithm::HS256);
36 | 
37 |     decode::<Claims>(token, &key, &validation)
38 |         .map_err(|error|
39 |                  match error.kind() {
40 |                     jsonwebtoken::errors::ErrorKind::ExpiredSignature => AppError::new(StatusCode::UNAUTHORIZED, "Your session has expired"),
41 |                     _=> {
42 |                         eprintln!("Error validating token: {}", error);
43 |                         AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong please try again later")
44 |                     }
45 | 
46 |                  })?;
47 |     
48 |     Ok(true)
49 | }
50 | 


--------------------------------------------------------------------------------
/templates/base.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Collo shop</title>
 6 |     <meta content="width=device-width, initial-scale=1.0" name="viewport">
 7 |     <meta content="E-Commerce " name="keywords">
 8 |     <meta content="E-Commerce " name="description">
 9 | 
10 |     <!-- Favicon -->
11 |     <link href="assets/img/favicon.ico" rel="icon">
12 | 
13 |     <!-- Google Web Fonts -->
14 |     <link rel="preconnect" href="https://fonts.gstatic.com">
15 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">  
16 | 
17 |     <!-- Font Awesome -->
18 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
19 | 
20 |     <!-- Libraries Stylesheet -->
21 |     <link href="../assets/lib/animate/animate.min.css" rel="stylesheet">
22 |     <link href="../assets/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
23 | 
24 |     <!-- Customized Bootstrap Stylesheet -->
25 |     <link href="../assets/css/style.css" rel="stylesheet">
26 | </head>
27 | 
28 |   <body>
29 | 
30 |       {% block content %}
31 | 
32 |       {% endblock %}
33 | 
34 |    <!-- Back to Top -->
35 |     <a href="#" class="btn btn-primary back-to-top"><i class="fa fa-angle-double-up"></i></a>
36 | 
37 |     <!-- JavaScript Libraries -->
38 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
39 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
40 |     <script src="assets/lib/easing/easing.min.js"></script>
41 |     <script src="assets/lib/owlcarousel/owl.carousel.min.js"></script>
42 | 
43 |     <!-- Contact Javascript File -->
44 |     <script src="assets/mail/jqBootstrapValidation.min.js"></script>
45 |     <script src="assets/mail/contact.js"></script>
46 | 
47 |     <!-- Template Javascript -->
48 |     <script src="assets/js/main.js"></script>
49 |   </body>
50 | </html>
51 | 
52 | 


--------------------------------------------------------------------------------
/src/routes/backend/customer/address.rs:
--------------------------------------------------------------------------------
 1 | use axum::http::StatusCode;
 2 | use axum::{extract::State, Json};
 3 | use sea_orm::{ActiveModelTrait, DatabaseConnection, Set, TryIntoModel};
 4 | use serde::{Deserialize, Serialize};
 5 | 
 6 | use crate::utils::app_error::AppError;
 7 | use crate::database::address as Address;
 8 | 
 9 | #[derive(Serialize, Deserialize)]
10 | pub struct RequestAddress{
11 |     country: String,
12 |     state: String,
13 |     town: String,
14 |     zip: String,
15 |     address_line_1: String,
16 |     address_line_2: Option<String>
17 | }
18 | 
19 | #[derive(Serialize, Deserialize)]
20 | pub struct RespondAddress{
21 |     id: i32,
22 |     country: String,
23 |     state: String,
24 |     town: String,
25 |     zip: String,
26 |     address_line_1: String,
27 |     address_line_2: Option<String>
28 | 
29 | }
30 | 
31 | pub async fn create_address(
32 |     State(database): State<DatabaseConnection>,
33 |     Json(request_address): Json<RequestAddress>
34 |     ) -> Result<Json<RespondAddress>, AppError> {
35 |     
36 |     let address = Address::ActiveModel{
37 |         country: Set(request_address.country),
38 |         state: Set(request_address.state),
39 |         town: Set(request_address.town),
40 |         zip: Set(request_address.zip),
41 |         address_line_1: Set(request_address.address_line_1),
42 |         address_line_2: Set(request_address.address_line_2),
43 |         ..Default::default()
44 |     }.save(&database)
45 |     .await
46 |     .map_err(|error|{
47 |         eprintln!("[*] Error adding address to the database: {}", error);
48 |         AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
49 |     })?;
50 | 
51 |     let address_new_model = address.try_into_model()
52 |         .map_err(|error|{
53 |             eprintln!("[*] Error converting into model {}", error);
54 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
55 |         })?;
56 | 
57 |     Ok(Json(RespondAddress { id: address_new_model.id, country: address_new_model.country, state: address_new_model.state, town: address_new_model.town, zip: address_new_model.zip, address_line_1: address_new_model.address_line_1, address_line_2: address_new_model.address_line_2 }))
58 | }
59 | 


--------------------------------------------------------------------------------
/templates/components/products.html:
--------------------------------------------------------------------------------
 1 | 			{% for product in products %}
 2 |                     <div class="col-lg-4 col-md-6 col-sm-6 pb-1">
 3 |                         <div class="product-item bg-light mb-4">
 4 |                             <div class="product-img position-relative overflow-hidden">
 5 | 				    <img class="img-fluid w-100" src="assets/img/{{ product.image_name}}" alt="">
 6 |                                 <div class="product-action">
 7 |                                     <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
 8 |                                     <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
 9 |                                     <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
10 |                                     <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
11 |                                 </div>
12 |                             </div>
13 |                             <div class="text-center py-4">
14 | 				    <a class="h6 text-decoration-none text-truncate" href="">{{ product.product_name }}</a>
15 |                                 <div class="d-flex align-items-center justify-content-center mt-2">
16 | 					<h5>KSH {{ product.price }}</h5> <!-- <h6 class="text-muted ml-2"> <del>KSH 12,999</del></h6> -->
17 |                                 </div>
18 |                                 <div class="d-flex align-items-center justify-content-center mb-1">
19 |                                     <small class="fa fa-star text-primary mr-1"></small>
20 |                                     <small class="fa fa-star text-primary mr-1"></small>
21 |                                     <small class="fa fa-star text-primary mr-1"></small>
22 |                                     <small class="fa fa-star text-primary mr-1"></small>
23 |                                     <small class="fa fa-star text-primary mr-1"></small>
24 | 				    <small>({{ product.quantity}})</small>
25 |                                 </div>
26 |                             </div>
27 |                         </div>
28 |                     </div>
29 | 			    {% endfor %}
30 | 
31 | 


--------------------------------------------------------------------------------
/database_setup/init.sql:
--------------------------------------------------------------------------------
 1 | CREATE TABLE categories (
 2 |     id SERIAL PRIMARY KEY,
 3 |     name VARCHAR(255) NOT NULL UNIQUE
 4 | );
 5 | 
 6 | CREATE TABLE product (
 7 |     id SERIAL PRIMARY KEY,
 8 |     product_name VARCHAR(255) NOT NULL UNIQUE,
 9 |     price DECIMAL(10, 2) NOT NULL,
10 |     star INTEGER CHECK (star >= 0 AND star <= 5),
11 |     image_name VARCHAR(255) NOT NULL,
12 |     date_added TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL,
13 |     category_id INTEGER NOT NULL,
14 |     description TEXT NOT NULL,
15 |     quantity INTEGER NOT NULL CHECK (quantity >= 0),
16 |     FOREIGN KEY (category_id) REFERENCES categories(id)
17 | );
18 | 
19 | CREATE TABLE colors (
20 |     id SERIAL PRIMARY KEY,
21 |     product_id INTEGER NOT NULL,
22 |     color VARCHAR(50) NOT NULL,
23 |     quantity INTEGER NOT NULL CHECK (quantity >= 0),
24 |     FOREIGN KEY (product_id) REFERENCES product(id) ON DELETE CASCADE
25 | );
26 | 
27 | CREATE TABLE sizes (
28 |     id SERIAL PRIMARY KEY,
29 |     product_id INTEGER NOT NULL,
30 |     size VARCHAR(50) NOT NULL,
31 |     quantity INTEGER NOT NULL CHECK (quantity >= 0),
32 |     FOREIGN KEY (product_id) REFERENCES product(id) ON DELETE CASCADE
33 | );
34 | 
35 | create table customer (
36 | 	id int generated always as identity primary key,
37 | 	username varchar(50) not null unique,
38 | 	first_name varchar(50) not null,
39 | 	last_name varchar(50) not null,
40 | 	email varchar(320) not null,
41 | 	telephone varchar(320) not null,
42 | 	default_address_id int unique,
43 | 	salt varchar(64) unique not null,
44 | 	password_hash varchar(64) not null,
45 | 	token text default null
46 | );
47 | 
48 | create table address (
49 | 	id int generated always as identity primary key,
50 | 	country varchar(50) not null,
51 | 	state varchar(50) not null,
52 | 	town varchar(50) not null,
53 | 	zip varchar(20) not null,
54 | 	address_line_1 varchar(100) not null,
55 | 	address_line_2 varchar(100)
56 | );
57 | 
58 | 
59 | create table product_review (
60 | 	id int generated always as identity primary key,
61 | 	customer_id int not null,
62 | 	product_id int not null,
63 | 	rating int not null,
64 | 	review_text varchar(1000) not null,
65 | 	review_date timestamp without time zone default current_timestamp not null
66 | );
67 | 


--------------------------------------------------------------------------------
/src/routes/backend/reviews/list.rs:
--------------------------------------------------------------------------------
 1 | use axum::{extract::{Path, State}, http::StatusCode, Json};
 2 | use chrono::NaiveDateTime;
 3 | use sea_orm::{DatabaseConnection, EntityTrait};
 4 | use serde::{Deserialize, Serialize};
 5 | 
 6 | use crate::utils::app_error::AppError;
 7 | use crate::database::product_review::Entity as Review;
 8 | 
 9 | #[derive(Serialize, Deserialize)]
10 | pub struct PostReviews{
11 |     review_id: i32,
12 |     product_id: i32,
13 |     customer_id: i32,
14 |     rating: i32,
15 |     review_message: String,
16 |     review_date: NaiveDateTime
17 | 
18 | 
19 | }
20 | pub async fn list_reviews(
21 |     State(database): State<DatabaseConnection>,
22 |     Path(id): Path<i32>
23 |     ) -> Result<Json<PostReviews>, AppError>{
24 |     let review = Review::find_by_id(id)
25 |         .one(&database)
26 |         .await
27 |         .map_err(|error|{
28 |             eprintln!("[*] Error finding the review {}", error);
29 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Review not found")
30 |         })?;
31 |     if let Some(review) = review{
32 |         return Ok(Json(PostReviews { review_id: review.id, product_id: review.product_id, customer_id: review.customer_id, rating: review.rating, review_message: review.review_text, review_date: review.review_date }));
33 |     }else {
34 |       Err(AppError::new(StatusCode::NOT_FOUND, "Review not found"))  
35 |     }
36 |     
37 | }
38 | 
39 | pub async fn list_all_reviews(
40 |     State(database): State<DatabaseConnection>
41 |     ) -> Result<Json<Vec<PostReviews>>, AppError>{
42 | 
43 |     let reviews = Review::find()
44 |         .all(&database)
45 |         .await
46 |         .map_err(|error|{
47 |             eprintln!("[*] Error finding the review, {}", error);
48 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
49 |         })?;
50 | 
51 |    let post: Vec<PostReviews> = reviews.iter()
52 |         .map(|rev| PostReviews{
53 |             review_id: rev.id,
54 |             product_id: rev.product_id,
55 |             customer_id: rev.customer_id,
56 |             rating: rev.rating,
57 |             review_message: rev.clone().review_text,
58 |             review_date: rev.review_date
59 |         }).collect();
60 | 
61 |    Ok(Json(post)) 
62 | }
63 | 


--------------------------------------------------------------------------------
/src/routes/backend/items/list_items.rs:
--------------------------------------------------------------------------------
 1 | use axum::{extract::{Path, State}, http::StatusCode, Json};
 2 | use sea_orm::{prelude::Decimal, DatabaseConnection, EntityTrait };
 3 | use serde::Serialize;
 4 | 
 5 | use crate::{database::product::Entity as Product, utils::app_error::AppError};
 6 | 
 7 | #[derive(Serialize)]
 8 | pub struct Items{
 9 |     product_name: String,
10 |     description: String,
11 |     image_name: String,
12 |     price: Decimal,
13 |     quantity: i32,
14 |     date_added: String,
15 | 
16 | }
17 | pub async fn list_one_item(
18 |     State(database): State<DatabaseConnection>,
19 |     Path(id): Path<i32>
20 |     ) -> Result<Json<Items>, AppError> {
21 |     
22 |     let item = Product::find_by_id(id)
23 |         .one(&database)
24 |         .await
25 |         .map_err(|error|{
26 |             eprintln!("Error: Getting tasks from the database, {}", error);
27 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "There was something that went wrong")
28 |         })?;
29 |     if let Some(item) = item{
30 |         return Ok(Json(Items {
31 |             product_name: item.product_name, 
32 |             description: item.description, 
33 |             image_name: item.image_name, 
34 |             price: item.price, 
35 |             quantity: item.quantity,
36 |             date_added: item.date_added.to_string()
37 |         }));
38 |     }else {
39 |         
40 |         Err(AppError::new(StatusCode::NOT_FOUND, "product not found"))
41 |     }
42 | 
43 | }
44 | 
45 | 
46 | pub async fn list_all_items(
47 |     State(database): State<DatabaseConnection>
48 |     ) -> Result<Json<Vec<Items>>, AppError>{
49 |     
50 |     let items: Vec<Items> = Product::find()
51 |         .all(&database)
52 |         .await
53 |         .map_err(|error|{
54 |             eprintln!("Error getting all tasks, {}", error);
55 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
56 |         })?
57 |     .into_iter()
58 |     .map(|db_item| Items{
59 |         product_name: db_item.product_name,
60 |         description: db_item.description,
61 |         image_name: db_item.image_name,
62 |         price: db_item.price,
63 |         quantity: db_item.quantity,
64 |         date_added: db_item.date_added.to_string()
65 |     })
66 |     .collect();
67 | 
68 |     Ok(Json(items))
69 | }
70 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # E-Commerce backend
 2 | 
 3 | ## Features
 4 | 
 5 | - [ ] Create
 6 |     - [x] User account
 7 |         - [x] Being able to create new user account
 8 |         - [x] The user being able to login to their account
 9 |         - [x] The user would be logged out after a certain period of time
10 |         - [x] The user should be able to logout
11 |     - [ ] Admin account
12 |         - [ ] Account Setup
13 |             - [ ] Create new admin account
14 |             - [ ] Admin should be able to login to their account
15 |             - [ ] Admin would be logged out after a certain period of time
16 |             - [ ] Admin should be able to logout
17 |         - [ ] Products
18 |             - [ ] Be able to create new products
19 | 
20 | - [ ] Read
21 |     - [x] Get a list of all products with:
22 |         - [x] All corresponding price
23 |         - [x] All corresponding number of items in stock
24 |     - [x] Get one product
25 |         - [x] With the corresponding price, description of the product and number of items in stock
26 |     - [ ] Get a list of all users accounts (only admin)
27 |         - [ ] with Username, First Name, Last Name and Telephone Number
28 |     - [ ] Get individual user account (admin only)
29 |         - [ ] with Username, First Name, Last Name and Telephone Number
30 | 
31 | 
32 | 
33 | - [ ] Update
34 | 
35 | 
36 | - [ ] Delete
37 | 
38 | ### APIs
39 | 
40 | Users endpoints:
41 | - `POST /api/v1/user/create_account` 
42 | - `POST /api/v1/user/login`
43 | - `POST /api/v1/user/logout`
44 | 
45 | Admin endpoints:
46 | - `POST /api/v1/admin/create_account`
47 | - `POST /api/v1/admin/login`
48 | - `POST /api/v1/admin/logout`
49 | - `POST /api/v1/admin/new_product` - create product
50 | - `GET /api/v1/users` - list all users
51 | - `GET /api/v1/users/:id` - list one user
52 | 
53 | Other endpoints:
54 | - `GET /api/v1/products` - List all product
55 | - `GET /api/v1/products/:id` - List one product
56 | 
57 | 
58 | ## Tech
59 | 
60 | -  Axum 0.7.5
61 |     - Features:
62 |         - macros
63 | 
64 | - Tokio v1.37.0
65 |     - Features:
66 |         - macros
67 |         - rt-multi-thread
68 |         - net
69 | - dotenvy v0.15.7
70 | - dotenvy_macro v0.15.7
71 | - serde v1.0.198
72 |     - Features:
73 |         - derive
74 | ## Setup
75 | 
76 | 
77 | ## Database
78 | 
79 | 
80 | ## Testing
81 | 
82 | > Using curl
83 | 


--------------------------------------------------------------------------------
/src/routes/backend/register.rs:
--------------------------------------------------------------------------------
 1 | use axum::extract::State;
 2 | use axum::http::StatusCode;
 3 | use axum::Json;
 4 | use sea_orm::{ActiveModelTrait, DatabaseConnection, Set, TryIntoModel};
 5 | use serde::{Deserialize, Serialize};
 6 | 
 7 | use crate::utils::app_error::AppError;
 8 | use crate::database::customer as User;
 9 | use crate::utils::hash::create_hash;
10 | 
11 | use super::RespondUser;
12 | 
13 | #[derive(Serialize, Deserialize)]
14 | pub struct RequestUser{
15 |     username: String,
16 |     first_name: String,
17 |     last_name: String,
18 |     email: String,
19 |     telephone: String,
20 |     default_address_id: Option<i32>,
21 |     password: String,
22 |     salt: String,
23 |     password_hash: String,
24 | }
25 | 
26 | 
27 | pub async fn register(
28 |     State(database): State<DatabaseConnection>,
29 |     Json(request_user): Json<RequestUser>
30 |     ) -> Result<Json<RespondUser>, AppError>{
31 | 
32 |     let new_user = User::ActiveModel{
33 |         username: Set(request_user.username),
34 |         first_name: Set(request_user.first_name),
35 |         last_name: Set(request_user.last_name),
36 |         email: Set(request_user.email),
37 |         telephone: Set(request_user.telephone),
38 |         default_address_id: Set(request_user.default_address_id),
39 |         password_hash: Set(create_hash(request_user.password)?),
40 |         salt: Set(request_user.salt),
41 |         ..Default::default()
42 |     }.save(&database)
43 |         .await
44 |         .map_err(|error|{
45 |             let error_mess = error.to_string();
46 |             if error_mess.contains("duplicate key value violates unique constraint"){
47 |                 return AppError::new(StatusCode::BAD_REQUEST, "Another user having those details");
48 |             }
49 |             eprintln!("Error could not create new user: {} ", error);
50 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Could not create the account, Please try again later")
51 |         })?;
52 |    let user = new_user.try_into_model()
53 |         .map_err(|error|{
54 |             eprintln!("Error, could not convert users into model: {}", error);
55 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
56 |         })?;
57 | 
58 |     Ok(Json(RespondUser { user_id: user.id, username: user.username, telephone: user.telephone, email: user.email, token: user.token }))
59 |     
60 | }
61 | 
62 | 


--------------------------------------------------------------------------------
/src/routes/backend/login.rs:
--------------------------------------------------------------------------------
 1 | use axum::http::StatusCode;
 2 | use axum::{extract::State, Json};
 3 | use sea_orm::{ActiveModelTrait, ColumnTrait, DatabaseConnection, EntityTrait, IntoActiveModel, QueryFilter, Set, TryIntoModel};
 4 | use serde::{Deserialize, Serialize};
 5 | 
 6 | use crate::utils::app_error::AppError;
 7 | use crate::database::customer::{self, Entity as User};
 8 | use crate::utils::app_state::TokenWrapper;
 9 | use crate::utils::hash::verifiy_pass;
10 | use crate::utils::jwt::create_jwt;
11 | 
12 | use super::RespondUser;
13 | 
14 | #[derive(Serialize, Deserialize)]
15 | pub struct RequestLoginUser{
16 |     pub username: String,
17 |     pub password: String
18 | }
19 | pub async fn login(
20 |     State(database): State<DatabaseConnection>,
21 |     State(jwt_secret): State<TokenWrapper>,
22 |     Json(requet_user): Json<RequestLoginUser>
23 |     )-> Result<Json<RespondUser>, AppError> {
24 |     
25 |     let user = User::find()
26 |         .filter(customer::Column::Username.eq(requet_user.username))
27 |         .one(&database)
28 |         .await
29 |         .map_err(|error|{
30 |             eprintln!("Error finding the user {}", error);
31 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Error login in, Please try again later")
32 |         })?;
33 |     if let Some(user) = user{
34 |         // verify password
35 |         if !verifiy_pass(requet_user.password, &user.password_hash)?{
36 |             return Err(AppError::new(StatusCode::UNAUTHORIZED, "Bad username OR password"));
37 |         }
38 | 
39 |         // generate jwt
40 |         let token = create_jwt(&jwt_secret.0)?;
41 |         
42 |         let mut user = user.into_active_model();
43 |         user.token = Set(Some(token));
44 |         let saved_user = user.save(&database)
45 |             .await
46 |             .map_err(|error|{
47 |                 eprintln!("Error, could not save the token: {}", error);
48 |                 AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
49 |             })?;
50 |         let user = saved_user.try_into_model()
51 |             .map_err(|error|{
52 |                 eprintln!("Error, Could not convert into model: {}", error);
53 |                 AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
54 |             })?;
55 |         Ok(Json(RespondUser{email: user.email, telephone: user.telephone, user_id: user.id, username:user.username, token: user.token}))
56 | 
57 |     }else {
58 |         return Err(AppError::new(StatusCode::NOT_FOUND, "Bad username OR password"));
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/routes/frontend/mod.rs:
--------------------------------------------------------------------------------
 1 | pub mod handlers;
 2 | pub mod contact;
 3 | pub mod shop;
 4 | 
 5 | use askama::Template;
 6 | use axum::{extract::{Request, State}, middleware::{self, Next}, response::{Html, IntoResponse, Response}, routing::{get, post}, Router};
 7 | use hyper::StatusCode;
 8 | use reqwest::Client;
 9 | 
10 | use crate::utils::{app_error::AppError, app_state::AppState, custom_frontend_middleware::{self, frontend_guard}, custom_middleware::guard_routes};
11 | 
12 | use self::{contact::contact_us, handlers::{cart, checkout, contact, detail, home}, shop::shop};
13 | 
14 | use super::backend::RespondUser;
15 | 
16 | 
17 | pub fn frontend_routes(app_state: AppState) -> Router{
18 |     let client = Client::new();
19 | 
20 |     Router::new()
21 |         .route("/contact", get(contact))
22 |         .route("/contact", post(contact_us))
23 |         .route("/detail", get(detail))
24 |         .route("/checkout", get(checkout))
25 |         .route("/shop", get(shop))
26 |         .route("/cart", get(cart))
27 |         .route_layer(middleware::from_fn_with_state(app_state.clone(), frontend_guard))
28 |         .route("/", get(home))
29 |         .layer(
30 |             middleware::from_fn(inject_token)
31 |             )
32 |         //.route_layer(middleware::from_fn_with_state(app_state.clone(), frontend_guard))
33 |         .with_state(client)
34 |         .with_state(app_state)
35 |         
36 | }
37 | 
38 | 
39 | pub struct HtmlTemplate<T>(T);
40 | 
41 | /// Allows us to convert Askama HTML templates into valid HTML for axum to serve in the response.
42 | impl<T> IntoResponse for HtmlTemplate<T>
43 |     where
44 |         T: Template,
45 | {
46 |     fn into_response(self) -> Response {
47 |         // Attempt to render the template with askama
48 |         match self.0.render() {
49 |             // If we're able to successfully parse and aggregate the template, serve it
50 |             Ok(html) => Html(html).into_response(),
51 |             // If we're not, return an error or some bit of fallback HTML
52 |             Err(err) => (
53 |                 StatusCode::INTERNAL_SERVER_ERROR,
54 |                 format!("Failed to render template. Error: {}", err),
55 |             )
56 |                 .into_response(),
57 |         }
58 |     }
59 | }
60 | 
61 | 
62 | async fn inject_token(
63 |    mut req: Request,
64 |     next: Next
65 |     ) -> Result<Response, AppError>{
66 | 
67 |     let token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MjA1MjUwNDAsImlhdCI6MTcyMDUyNDQ0MH0.P-k6mtl0XERRBLE7-WX6dxH2AFAIdXLNnoz47F-vlTU".to_string();
68 |     let tkn = format!("Bearer {}", token).parse().unwrap();
69 |    req.headers_mut().insert("Authorization", tkn);
70 | 
71 |     Ok(next.run(req).await)
72 | }
73 | 
74 | 


--------------------------------------------------------------------------------
/src/routes/backend/reviews/new_review.rs:
--------------------------------------------------------------------------------
 1 | use axum::http::StatusCode;
 2 | use axum::{extract::State, Json};
 3 | use chrono::{NaiveDateTime, Utc};
 4 | use sea_orm::{ActiveModelTrait, ColumnTrait, EntityTrait, QueryFilter, Set, TryIntoModel};
 5 | use sea_orm::DatabaseConnection;
 6 | use serde::{Deserialize, Serialize};
 7 | 
 8 | use crate::utils::app_error::AppError;
 9 | use crate::database::{customer, product, product_review as Product_review};
10 | use crate::database::customer::Entity as User;
11 | use crate::database::product::Entity as Product;
12 | 
13 | #[derive(Serialize, Deserialize)]
14 | pub struct GetReview{
15 |     username: String,
16 |     message: String,
17 |     rating: i32,
18 |     product_id: i32
19 | 
20 | }
21 | #[derive(Serialize, Deserialize)]
22 | pub struct RespondReview{
23 |     review_id: i32,
24 |     customer_id: i32,
25 |     product_id: i32,
26 |     rating: i32,
27 |     rev_message: String,
28 |     review_date: NaiveDateTime
29 | }
30 | 
31 | pub async fn create_review(
32 |     State(database): State<DatabaseConnection>,
33 |     Json(review): Json<GetReview>
34 |     ) -> Result<Json<RespondReview>, AppError>{
35 | 
36 |     let user = User::find()
37 |         .filter(customer::Column::Username.eq(review.username))
38 |         .one(&database)
39 |         .await
40 |         .map_err(|error|{
41 |             eprintln!("error finding user: {}", error);
42 |             AppError::new(StatusCode::NOT_FOUND, "User not found")
43 |         })?;
44 |     let product = Product::find()
45 |         .filter(product::Column::Id.eq(review.product_id))
46 |         .one(&database)
47 |         .await
48 |         .map_err(|error|{
49 |             eprintln!("error finding the product: {}", error);
50 |             AppError::new(StatusCode::NOT_FOUND, "Product NOT_FOUND")
51 |         })?;
52 |     let now = Utc::now();
53 | 
54 |     let rev_date = now.naive_utc();
55 | 
56 |     let product = Product_review::ActiveModel{
57 |         review_text: Set(review.message),
58 |         rating: Set(review.rating),
59 |         customer_id: if let Some(user) = user{
60 |             Set(user.id)
61 |         }else{return Err(AppError::new(StatusCode::NOT_FOUND, "User not found"));},
62 |         product_id: if let Some(product) = product{
63 |             Set(product.id)
64 |         }else {return Err(AppError::new(StatusCode::NOT_FOUND, "product not found"));},
65 |         review_date: Set(rev_date),
66 |         ..Default::default()
67 |     }.save(&database)
68 |     .await
69 |     .map_err(|error|{
70 |         eprintln!("Error saving review: {}", error);
71 |         AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong")
72 |     })?;
73 |     
74 |    let final_product = product.try_into_model()
75 |         .map_err(|error| {
76 |             eprintln!("Error converting into model: {}", error);
77 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Something went wrong")
78 |         })?;
79 | 
80 |     Ok(Json(RespondReview { 
81 |         review_id: final_product.id, 
82 |         customer_id: final_product.customer_id, 
83 |         product_id: final_product.product_id, 
84 |         rating: final_product.rating, 
85 |         rev_message: final_product.review_text,
86 |         review_date: final_product.review_date
87 |     }))
88 | }
89 | 


--------------------------------------------------------------------------------
/templates/components/footer.html:
--------------------------------------------------------------------------------
 1 |     <div class="container-fluid bg-dark text-secondary mt-5 pt-5">
 2 |         <div class="row px-xl-5 pt-5">
 3 |             <div class="col-lg-4 col-md-12 mb-5 pr-3 pr-xl-5">
 4 |                 <h5 class="text-secondary text-uppercase mb-4">Get In Touch</h5>
 5 |                 <p class="mb-4">We love hearing from our customers! Whether you have a question about our products, need assistance with an order, or just want to share your shopping experience, we’re here to help.</p>
 6 |                 <p class="mb-2"><i class="fa fa-map-marker-alt text-primary mr-3"></i>Eldoret, Kenya</p>
 7 |                 <p class="mb-2"><i class="fa fa-envelope text-primary mr-3"></i>yrncollo@gmail.com</p>
 8 |                 <p class="mb-0"><i class="fa fa-phone-alt text-primary mr-3"></i>+254 7863 3575</p>
 9 |             </div>
10 |             <div class="col-lg-8 col-md-12">
11 |                 <div class="row">
12 |                     <div class="col-md-5 mb-5">
13 |                         <h5 class="text-secondary text-uppercase mb-4">Quick Shop</h5>
14 |                         <div class="d-flex flex-column justify-content-start">
15 |                             <a class="text-secondary mb-2" href="/"><i class="fa fa-angle-right mr-2"></i>Home</a>
16 |                             <a class="text-secondary mb-2" href="/shop"><i class="fa fa-angle-right mr-2"></i>Our Shop</a>
17 |                             <a class="text-secondary mb-2" href="/detail"><i class="fa fa-angle-right mr-2"></i>Shop Detail</a>
18 |                             <a class="text-secondary mb-2" href="/cart"><i class="fa fa-angle-right mr-2"></i>Shopping Cart</a>
19 |                             <a class="text-secondary mb-2" href="/checkout"><i class="fa fa-angle-right mr-2"></i>Checkout</a>
20 |                             <a class="text-secondary" href="/contact"><i class="fa fa-angle-right mr-2"></i>Contact Us</a>
21 |                         </div>
22 |                     </div>
23 |                     <div class="col-md-5 mb-5">
24 |                         <h5 class="text-secondary text-uppercase mb-4">Newsletter</h5>
25 |                         <p>Subscribe to our newsletter for exclusive deals, new arrivals, and insider updates!</p>
26 |                         <form action="" method="">
27 |                             <div class="input-group">
28 |                                 <input type="text" class="form-control" placeholder="Your Email Address">
29 |                                 <div class="input-group-append">
30 |                                     <button class="btn btn-primary">Sign Up</button>
31 |                                 </div>
32 |                             </div>
33 |                         </form>
34 |                         <h6 class="text-secondary text-uppercase mt-4 mb-3">Follow Us</h6>
35 |                         <div class="d-flex">
36 |                             <a class="btn btn-primary btn-square mr-2" href="#"><i class="fab fa-twitter"></i></a>
37 |                             <a class="btn btn-primary btn-square mr-2" href="#"><i class="fab fa-facebook-f"></i></a>
38 |                             <a class="btn btn-primary btn-square mr-2" href="#"><i class="fab fa-linkedin-in"></i></a>
39 |                             <a class="btn btn-primary btn-square" href="#"><i class="fab fa-instagram"></i></a>
40 |                         </div>
41 |                     </div>
42 |                 </div>
43 |             </div>
44 |         </div>
45 |         <div class="row border-top mx-xl-5 py-4" style="border-color: rgba(256, 256, 256, .1) !important;">
46 |             <div class="col-md-6 px-xl-0">
47 |                 <p class="mb-md-0 text-center text-md-left text-secondary">
48 |                     &copy; <a class="text-primary" href="#">yrncollo.me</a>. All Rights Reserved. Designed
49 |                     by
50 |                     <a class="text-primary" href="https://yrncollo.me">YrnCollo</a>
51 |                 </p>
52 |             </div>
53 |             <div class="col-md-6 px-xl-0 text-center text-md-right">
54 |                 <img class="img-fluid" src="assets/img/payments.png" alt="">
55 |             </div>
56 |         </div>
57 |     </div>
58 |  
59 | 


--------------------------------------------------------------------------------
/templates/contact.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% block content %}
 3 |     <!-- Topbar Start -->
 4 |     {% include "components/topbar.html" %}
 5 |     <!-- Topbar End -->
 6 | 
 7 | 
 8 |     <!-- Navbar Start -->
 9 |     {% include "components/navbar.html" %}
10 |     <!-- Navbar End -->
11 | 
12 | 
13 |     <!-- Breadcrumb Start -->
14 |     <div class="container-fluid">
15 |         <div class="row px-xl-5">
16 |             <div class="col-12">
17 |                 <nav class="breadcrumb bg-light mb-30">
18 |                     <a class="breadcrumb-item text-dark" href="/">Home</a>
19 |                     <span class="breadcrumb-item active">Contact</span>
20 |                 </nav>
21 |             </div>
22 |         </div>
23 |     </div>
24 |     <!-- Breadcrumb End -->
25 | 
26 | 
27 |     <!-- Contact Start -->
28 |     <div class="container-fluid">
29 |         <h2 class="section-title position-relative text-uppercase mx-xl-5 mb-4"><span class="bg-secondary pr-3">Contact Us</span></h2>
30 |         <div class="row px-xl-5">
31 |             <div class="col-lg-7 mb-5">
32 |                 <div class="contact-form bg-light p-30">
33 |                     <div id="success"></div>
34 |                     <form id="" action="/contact" method="post">
35 |                         <div class="control-group">
36 |                             <input type="text" class="form-control" id="name" name="name" placeholder="Your Name"
37 |                                 required="required" data-validation-required-message="Please enter your name" />
38 |                             <p class="help-block text-danger"></p>
39 |                         </div>
40 |                         <div class="control-group">
41 |                             <input type="email" class="form-control" id="email" name="email" placeholder="Your Email"
42 |                                 required="required" data-validation-required-message="Please enter your email" />
43 |                             <p class="help-block text-danger"></p>
44 |                         </div>
45 |                         <div class="control-group">
46 |                             <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject"
47 |                                 required="required" data-validation-required-message="Please enter a subject" />
48 |                             <p class="help-block text-danger"></p>
49 |                         </div>
50 |                         <div class="control-group">
51 |                             <textarea class="form-control" rows="8" id="message" name="message" placeholder="Message"
52 |                                 required="required"
53 |                                 data-validation-required-message="Please enter your message"></textarea>
54 |                             <p class="help-block text-danger"></p>
55 |                         </div>
56 |                         <div>
57 |                             <button class="btn btn-primary py-2 px-4" type="submit" id="">Send
58 |                                 Message</button>
59 |                         </div>
60 |                     </form>
61 |                 </div>
62 |             </div>
63 |             <div class="col-lg-5 mb-5">
64 |                 <div class="bg-light p-30 mb-30">
65 |                     <iframe style="width: 100%; height: 250px;"
66 |                     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3001156.4288297426!2d-78.01371936852176!3d42.72876761954724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4ccc4bf0f123a5a9%3A0xddcfc6c1de189567!2sNew%20York%2C%20USA!5e0!3m2!1sen!2sbd!4v1603794290143!5m2!1sen!2sbd"
67 |                     frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
68 |                 </div>
69 |                 <div class="bg-light p-30 mb-3">
70 |                     <p class="mb-2"><i class="fa fa-map-marker-alt text-primary mr-3"></i>Eldoret, Kenya</p>
71 |                     <p class="mb-2"><i class="fa fa-envelope text-primary mr-3"></i>yrncollo.com</p>
72 |                     <p class="mb-2"><i class="fa fa-phone-alt text-primary mr-3"></i>+254-7563-3575</p>
73 |                 </div>
74 |             </div>
75 |         </div>
76 |     </div>
77 |     <!-- Contact End -->
78 | 
79 | 
80 |     <!-- Footer Start -->
81 |     {% include "components/footer.html" %}
82 |     <!-- Footer End -->
83 | 
84 | {% endblock %}
85 | 


--------------------------------------------------------------------------------
/templates/components/topbar.html:
--------------------------------------------------------------------------------
 1 |     <div class="container-fluid">
 2 |         <div class="row bg-secondary py-1 px-xl-5">
 3 |             <div class="col-lg-6 d-none d-lg-block">
 4 |                 <div class="d-inline-flex align-items-center h-100">
 5 |                     <a class="text-body mr-3" href="/about">About</a>
 6 |                     <a class="text-body mr-3" href="/contact">Contact</a>
 7 |                     <a class="text-body mr-3" href="/help">Help</a>
 8 |                     <a class="text-body mr-3" href="/faq">FAQs</a>
 9 |                 </div>
10 |             </div>
11 |             <div class="col-lg-6 text-center text-lg-right">
12 |                 <div class="d-inline-flex align-items-center">
13 |                     <div class="btn-group">
14 |                         <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown">My Account</button>
15 |                         <div class="dropdown-menu dropdown-menu-right">
16 |                             <button class="dropdown-item" type="button">Sign in</button>
17 |                             <button class="dropdown-item" type="button">Sign up</button>
18 |                         </div>
19 |                     </div>
20 |                     <div class="btn-group mx-2">
21 |                         <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown">USD</button>
22 |                         <div class="dropdown-menu dropdown-menu-right">
23 |                             <button class="dropdown-item" type="button">KSH</button>
24 |                             <button class="dropdown-item" type="button">EUR</button>
25 |                             <button class="dropdown-item" type="button">GBP</button>
26 |                             <button class="dropdown-item" type="button">CAD</button>
27 |                         </div>
28 |                     </div>
29 |                     <div class="btn-group">
30 |                         <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown">EN</button>
31 |                         <div class="dropdown-menu dropdown-menu-right">
32 |                             <button class="dropdown-item" type="button">FR</button>
33 |                             <button class="dropdown-item" type="button">AR</button>
34 |                             <button class="dropdown-item" type="button">RU</button>
35 |                         </div>
36 |                     </div>
37 |                 </div>
38 |                 <div class="d-inline-flex align-items-center d-block d-lg-none">
39 |                     <a href="" class="btn px-0 ml-2">
40 |                         <i class="fas fa-heart text-dark"></i>
41 |                         <span class="badge text-dark border border-dark rounded-circle" style="padding-bottom: 2px;">0</span>
42 |                     </a>
43 |                     <a href="" class="btn px-0 ml-2">
44 |                         <i class="fas fa-shopping-cart text-dark"></i>
45 |                         <span class="badge text-dark border border-dark rounded-circle" style="padding-bottom: 2px;">0</span>
46 |                     </a>
47 |                 </div>
48 |             </div>
49 |         </div>
50 |         <div class="row align-items-center bg-light py-3 px-xl-5 d-none d-lg-flex">
51 |             <div class="col-lg-4">
52 |                 <a href="/" class="text-decoration-none">
53 |                     <span class="h1 text-uppercase text-primary bg-dark px-2">Collo</span>
54 |                     <span class="h1 text-uppercase text-dark bg-primary px-2 ml-n1">Shop</span>
55 |                 </a>
56 |             </div>
57 |             <div class="col-lg-4 col-6 text-left">
58 |                 <form action="">
59 |                     <div class="input-group">
60 |                         <input type="text" class="form-control" placeholder="Search for products">
61 |                         <div class="input-group-append">
62 |                             <span class="input-group-text bg-transparent text-primary">
63 |                                 <i class="fa fa-search"></i>
64 |                             </span>
65 |                         </div>
66 |                     </div>
67 |                 </form>
68 |             </div>
69 |             <div class="col-lg-4 col-6 text-right">
70 |                 <p class="m-0">Customer Service</p>
71 |                 <h5 class="m-0">+254 7863 3575</h5>
72 |             </div>
73 |         </div>
74 |     </div>
75 |  
76 | 


--------------------------------------------------------------------------------
/templates/components/navbar.html:
--------------------------------------------------------------------------------
 1 |     <div class="container-fluid bg-dark mb-30">
 2 |         <div class="row px-xl-5">
 3 |             <div class="col-lg-3 d-none d-lg-block">
 4 |                 <a class="btn d-flex align-items-center justify-content-between bg-primary w-100" data-toggle="collapse" href="#navbar-vertical" style="height: 65px; padding: 0 30px;">
 5 |                     <h6 class="text-dark m-0"><i class="fa fa-bars mr-2"></i>Categories</h6>
 6 |                     <i class="fa fa-angle-down text-dark"></i>
 7 |                 </a>
 8 |                 <nav class="collapse position-absolute navbar navbar-vertical navbar-light align-items-start p-0 bg-light" id="navbar-vertical" style="width: calc(100% - 30px); z-index: 999;">
 9 |                     <div class="navbar-nav w-100">
10 |                         <div class="nav-item dropdown dropright">
11 |                             <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dresses <i class="fa fa-angle-right float-right mt-1"></i></a>
12 |                             <div class="dropdown-menu position-absolute rounded-0 border-0 m-0">
13 |                                 <a href="" class="dropdown-item">Men's Dresses</a>
14 |                                 <a href="" class="dropdown-item">Women's Dresses</a>
15 |                                 <a href="" class="dropdown-item">Baby's Dresses</a>
16 |                             </div>
17 |                         </div>
18 |                         <a href="" class="nav-item nav-link">Shirts</a>
19 |                         <a href="" class="nav-item nav-link">Jeans</a>
20 |                         <a href="" class="nav-item nav-link">Swimwear</a>
21 |                         <a href="" class="nav-item nav-link">Sleepwear</a>
22 |                         <a href="" class="nav-item nav-link">Sportswear</a>
23 |                         <a href="" class="nav-item nav-link">Jumpsuits</a>
24 |                         <a href="" class="nav-item nav-link">Blazers</a>
25 |                         <a href="" class="nav-item nav-link">Jackets</a>
26 |                         <a href="" class="nav-item nav-link">Shoes</a>
27 |                     </div>
28 |                 </nav>
29 |             </div>
30 |             <div class="col-lg-9">
31 |                 <nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 py-lg-0 px-0">
32 |                     <a href="" class="text-decoration-none d-block d-lg-none">
33 |                         <span class="h1 text-uppercase text-dark bg-light px-2">Collo</span>
34 |                         <span class="h1 text-uppercase text-light bg-primary px-2 ml-n1">Shop</span>
35 |                     </a>
36 |                     <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
37 |                         <span class="navbar-toggler-icon"></span>
38 |                     </button>
39 |                     <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
40 |                         <div class="navbar-nav mr-auto py-0">
41 |                             <a href="/" class="nav-item nav-link active">Home</a>
42 |                             <a href="/shop" class="nav-item nav-link">Shop</a>
43 |                             <a href="/detail" class="nav-item nav-link">Shop Detail</a>
44 |                             <div class="nav-item dropdown">
45 |                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down mt-1"></i></a>
46 |                                 <div class="dropdown-menu bg-primary rounded-0 border-0 m-0">
47 |                                     <a href="/cart" class="dropdown-item">Shopping Cart</a>
48 |                                     <a href="/checkout" class="dropdown-item">Checkout</a>
49 |                                 </div>
50 |                             </div>
51 |                             <a href="/contact" class="nav-item nav-link">Contact</a>
52 |                         </div>
53 |                         <div class="navbar-nav ml-auto py-0 d-none d-lg-block">
54 |                             <a href="" class="btn px-0">
55 |                                 <i class="fas fa-heart text-primary"></i>
56 |                                 <span class="badge text-secondary border border-secondary rounded-circle" style="padding-bottom: 2px;">0</span>
57 |                             </a>
58 |                             <a href="/cart" class="btn px-0 ml-3">
59 |                                 <i class="fas fa-shopping-cart text-primary"></i>
60 |                                 <span class="badge text-secondary border border-secondary rounded-circle" style="padding-bottom: 2px;">0</span>
61 |                             </a>
62 |                         </div>
63 |                     </div>
64 |                 </nav>
65 |             </div>
66 |         </div>
67 |     </div>
68 | 


--------------------------------------------------------------------------------
/src/routes/admin_backend/create_products.rs:
--------------------------------------------------------------------------------
  1 | use axum::{extract::State, Json};
  2 | use chrono::Utc;
  3 | use hyper::StatusCode;
  4 | use sea_orm::prelude::Decimal;
  5 | use sea_orm::{ActiveModelTrait, ActiveValue, ColumnTrait, DbErr, EntityTrait, QueryFilter, TryIntoModel};
  6 | use sea_orm::{prelude::DateTimeUtc, DatabaseConnection};
  7 | use serde::{Deserialize, Serialize};
  8 | use sea_orm::Set;
  9 | 
 10 | use crate::utils::app_error::AppError;
 11 | use crate::database::product as ProductDB;
 12 | use crate::database::categories::{self as CategoryDB, Model};
 13 | use crate::database::colors as ColorDB;
 14 | 
 15 | #[derive(Serialize, Deserialize, Clone)]
 16 | pub struct GetProducts{
 17 |     product_name: String,
 18 |     price: Decimal,
 19 |     image_name: String,
 20 |     total_quantity: i32,
 21 |     category: String,
 22 |     description: String,
 23 |     color: String,
 24 |     quantity_per_color: i32
 25 | }
 26 | 
 27 | 
 28 | #[derive(Serialize, Deserialize)]
 29 | pub struct ProductsResponse{
 30 |     product_name: String,
 31 |     price: String,
 32 |     image_name: String,
 33 |     date_added: String,
 34 |     total_quantity: String,
 35 |     category: String,
 36 |     color: String,
 37 |     color_quantity: String,
 38 |     size: String,
 39 |     size_quantity: String,
 40 | }
 41 | 
 42 | pub async fn create_products( State(database): State<DatabaseConnection>,
 43 | Json(raw_products): Json<GetProducts>
 44 | ) ->  Result<Json<ProductsResponse>, AppError>{
 45 | 
 46 |     let find_category = CategoryDB::Entity::find()
 47 |         .filter(CategoryDB::Column::Name.eq(&raw_products.category))
 48 |         .one(&database)
 49 |         .await
 50 |         .map_err(|error|{
 51 |             eprintln!("error finding category: {}", error);
 52 |             AppError::new(StatusCode::NOT_FOUND, "category not found")
 53 |         })?;
 54 | 
 55 | 
 56 |     if find_category.is_none(){
 57 | 
 58 |         let category = CategoryDB::ActiveModel{
 59 |             name: Set(raw_products.category.clone()),
 60 |             ..Default::default()
 61 |         }.save(&database)
 62 |         .await
 63 |             .map_err(|error|{
 64 |                 let error_mess = error.to_string();
 65 | 
 66 |                 if error_mess.contains("duplicate key value violates unique constraint"){
 67 |                     eprintln!("category already added");
 68 |                     return AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "kjsafdlk");
 69 |                 }
 70 | 
 71 |                 eprintln!("Error saving category {}", error);
 72 |                 return AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong");
 73 |             })?;
 74 | 
 75 |         let category_db_id = category.try_into_model()
 76 |             .map_err(|error|{
 77 |                 eprintln!("Error converting category into model {}", error);
 78 |                 AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong")
 79 |             })?;
 80 | 
 81 |         finish_building(database, category_db_id, raw_products).await
 82 | 
 83 |     }else{
 84 | 
 85 |         let category_db_id = find_category.unwrap().try_into_model()
 86 |             .map_err(|error|{
 87 |                 eprintln!("Error converting category into model {}", error);
 88 |                 AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong")
 89 |             })?;
 90 | 
 91 |         finish_building(database, category_db_id, raw_products).await
 92 |     }
 93 | }
 94 | 
 95 | 
 96 | async fn finish_building(database: DatabaseConnection, 
 97 |     category_db_id:Model, raw_products: GetProducts) -> Result<Json<ProductsResponse>, AppError>{
 98 | 
 99 | 
100 |     let now = Utc::now();
101 |     let date_product_added = now.naive_utc();
102 | 
103 |     let product = ProductDB::ActiveModel{
104 |         category_id:  Set(category_db_id.id),
105 |         product_name: Set(raw_products.product_name),
106 |         description: Set(raw_products.description),
107 |         image_name: Set(raw_products.image_name),
108 |         price: Set(raw_products.price),
109 |         quantity: Set(raw_products.total_quantity),
110 |         date_added: Set(date_product_added),
111 |         ..Default::default()
112 |     }.save(&database)
113 |     .await
114 |         .map_err(|error|{
115 |                 let error_mess = error.to_string();
116 | 
117 |                 if error_mess.contains("duplicate key value violates unique constraint"){
118 |                     eprintln!("Product already exist");
119 |                     return AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "Product already exist");
120 |                 }
121 |                 eprintln!("Error saving the product {}", error);
122 |                 AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong")
123 |         })?;
124 | 
125 |     let final_product = product.try_into_model()
126 |         .map_err(|error|{
127 |             eprintln!("Error converting product into model{}", error);
128 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong")
129 |         })?;
130 | 
131 |     let color = ColorDB::ActiveModel{
132 |         color: Set(raw_products.color),
133 |         quantity: Set(raw_products.quantity_per_color),
134 |         product_id: Set(final_product.id),
135 |         ..Default::default()
136 |     }.save(&database)
137 |     .await
138 |     .map_err(|error|{
139 |         eprintln!("Error saving color: {}", error);
140 |         AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong")
141 |     })?;
142 |     let color = color.try_into_model()
143 |         .map_err(|error|{
144 |             eprintln!("Error converting product into model{}", error);
145 |             AppError::new(StatusCode::INTERNAL_SERVER_ERROR, "something went wrong")
146 |         })?;
147 | 
148 | 
149 |     Ok(Json(ProductsResponse { 
150 |         product_name: final_product.product_name,
151 |         price: final_product.price.to_string(),
152 |         image_name: final_product.image_name,
153 |         date_added: final_product.date_added.to_string(),
154 |         total_quantity: final_product.quantity.to_string(),
155 |         category: category_db_id.name,
156 |         color: color.color,
157 |         color_quantity: color.quantity.to_string(),
158 |         size: "to be checked".to_string(),
159 |         size_quantity: "to be checked".to_string()
160 |     }
161 |     ))
162 | 
163 | 
164 | }
165 | 


--------------------------------------------------------------------------------
/templates/cart.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% block content %}
  3 |     <!-- Topbar Start -->
  4 |     {% include "components/topbar.html" %}
  5 |     <!-- Topbar End -->
  6 | 
  7 | 
  8 |     <!-- Navbar Start -->
  9 |     {% include "components/navbar.html" %}
 10 |     <!-- Navbar End -->
 11 | 
 12 | 
 13 |     <!-- Breadcrumb Start -->
 14 |     <div class="container-fluid">
 15 |         <div class="row px-xl-5">
 16 |             <div class="col-12">
 17 |                 <nav class="breadcrumb bg-light mb-30">
 18 |                     <a class="breadcrumb-item text-dark" href="/">Home</a>
 19 |                     <a class="breadcrumb-item text-dark" href="/shop">Shop</a>
 20 |                     <span class="breadcrumb-item active">Shopping Cart</span>
 21 |                 </nav>
 22 |             </div>
 23 |         </div>
 24 |     </div>
 25 |     <!-- Breadcrumb End -->
 26 | 
 27 | 
 28 |     <!-- Cart Start -->
 29 |     <div class="container-fluid">
 30 |         <div class="row px-xl-5">
 31 |             <div class="col-lg-8 table-responsive mb-5">
 32 |                 <table class="table table-light table-borderless table-hover text-center mb-0">
 33 |                     <thead class="thead-dark">
 34 |                         <tr>
 35 |                             <th>Products</th>
 36 |                             <th>Price</th>
 37 |                             <th>Quantity</th>
 38 |                             <th>Total</th>
 39 |                             <th>Remove</th>
 40 |                         </tr>
 41 |                     </thead>
 42 |                     <tbody class="align-middle">
 43 |                         <tr>
 44 |                             <td class="align-middle"><img src="img/product-1.jpg" alt="" style="width: 50px;"> Product Name</td>
 45 |                             <td class="align-middle">$150</td>
 46 |                             <td class="align-middle">
 47 |                                 <div class="input-group quantity mx-auto" style="width: 100px;">
 48 |                                     <div class="input-group-btn">
 49 |                                         <button class="btn btn-sm btn-primary btn-minus" >
 50 |                                         <i class="fa fa-minus"></i>
 51 |                                         </button>
 52 |                                     </div>
 53 |                                     <input type="text" class="form-control form-control-sm bg-secondary border-0 text-center" value="1">
 54 |                                     <div class="input-group-btn">
 55 |                                         <button class="btn btn-sm btn-primary btn-plus">
 56 |                                             <i class="fa fa-plus"></i>
 57 |                                         </button>
 58 |                                     </div>
 59 |                                 </div>
 60 |                             </td>
 61 |                             <td class="align-middle">$150</td>
 62 |                             <td class="align-middle"><button class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button></td>
 63 |                         </tr>
 64 |                         <tr>
 65 |                             <td class="align-middle"><img src="img/product-2.jpg" alt="" style="width: 50px;"> Product Name</td>
 66 |                             <td class="align-middle">$150</td>
 67 |                             <td class="align-middle">
 68 |                                 <div class="input-group quantity mx-auto" style="width: 100px;">
 69 |                                     <div class="input-group-btn">
 70 |                                         <button class="btn btn-sm btn-primary btn-minus" >
 71 |                                         <i class="fa fa-minus"></i>
 72 |                                         </button>
 73 |                                     </div>
 74 |                                     <input type="text" class="form-control form-control-sm bg-secondary border-0 text-center" value="1">
 75 |                                     <div class="input-group-btn">
 76 |                                         <button class="btn btn-sm btn-primary btn-plus">
 77 |                                             <i class="fa fa-plus"></i>
 78 |                                         </button>
 79 |                                     </div>
 80 |                                 </div>
 81 |                             </td>
 82 |                             <td class="align-middle">$150</td>
 83 |                             <td class="align-middle"><button class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button></td>
 84 |                         </tr>
 85 |                         <tr>
 86 |                             <td class="align-middle"><img src="img/product-3.jpg" alt="" style="width: 50px;"> Product Name</td>
 87 |                             <td class="align-middle">$150</td>
 88 |                             <td class="align-middle">
 89 |                                 <div class="input-group quantity mx-auto" style="width: 100px;">
 90 |                                     <div class="input-group-btn">
 91 |                                         <button class="btn btn-sm btn-primary btn-minus" >
 92 |                                         <i class="fa fa-minus"></i>
 93 |                                         </button>
 94 |                                     </div>
 95 |                                     <input type="text" class="form-control form-control-sm bg-secondary border-0 text-center" value="1">
 96 |                                     <div class="input-group-btn">
 97 |                                         <button class="btn btn-sm btn-primary btn-plus">
 98 |                                             <i class="fa fa-plus"></i>
 99 |                                         </button>
100 |                                     </div>
101 |                                 </div>
102 |                             </td>
103 |                             <td class="align-middle">$150</td>
104 |                             <td class="align-middle"><button class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button></td>
105 |                         </tr>
106 |                         <tr>
107 |                             <td class="align-middle"><img src="img/product-4.jpg" alt="" style="width: 50px;"> Product Name</td>
108 |                             <td class="align-middle">$150</td>
109 |                             <td class="align-middle">
110 |                                 <div class="input-group quantity mx-auto" style="width: 100px;">
111 |                                     <div class="input-group-btn">
112 |                                         <button class="btn btn-sm btn-primary btn-minus" >
113 |                                         <i class="fa fa-minus"></i>
114 |                                         </button>
115 |                                     </div>
116 |                                     <input type="text" class="form-control form-control-sm bg-secondary border-0 text-center" value="1">
117 |                                     <div class="input-group-btn">
118 |                                         <button class="btn btn-sm btn-primary btn-plus">
119 |                                             <i class="fa fa-plus"></i>
120 |                                         </button>
121 |                                     </div>
122 |                                 </div>
123 |                             </td>
124 |                             <td class="align-middle">$150</td>
125 |                             <td class="align-middle"><button class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button></td>
126 |                         </tr>
127 |                         <tr>
128 |                             <td class="align-middle"><img src="img/product-5.jpg" alt="" style="width: 50px;"> Product Name</td>
129 |                             <td class="align-middle">$150</td>
130 |                             <td class="align-middle">
131 |                                 <div class="input-group quantity mx-auto" style="width: 100px;">
132 |                                     <div class="input-group-btn">
133 |                                         <button class="btn btn-sm btn-primary btn-minus" >
134 |                                         <i class="fa fa-minus"></i>
135 |                                         </button>
136 |                                     </div>
137 |                                     <input type="text" class="form-control form-control-sm bg-secondary border-0 text-center" value="1">
138 |                                     <div class="input-group-btn">
139 |                                         <button class="btn btn-sm btn-primary btn-plus">
140 |                                             <i class="fa fa-plus"></i>
141 |                                         </button>
142 |                                     </div>
143 |                                 </div>
144 |                             </td>
145 |                             <td class="align-middle">$150</td>
146 |                             <td class="align-middle"><button class="btn btn-sm btn-danger"><i class="fa fa-times"></i></button></td>
147 |                         </tr>
148 |                     </tbody>
149 |                 </table>
150 |             </div>
151 |             <div class="col-lg-4">
152 |                 <form class="mb-30" action="">
153 |                     <div class="input-group">
154 |                         <input type="text" class="form-control border-0 p-4" placeholder="Coupon Code">
155 |                         <div class="input-group-append">
156 |                             <button class="btn btn-primary">Apply Coupon</button>
157 |                         </div>
158 |                     </div>
159 |                 </form>
160 |                 <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Cart Summary</span></h5>
161 |                 <div class="bg-light p-30 mb-5">
162 |                     <div class="border-bottom pb-2">
163 |                         <div class="d-flex justify-content-between mb-3">
164 |                             <h6>Subtotal</h6>
165 |                             <h6>$150</h6>
166 |                         </div>
167 |                         <div class="d-flex justify-content-between">
168 |                             <h6 class="font-weight-medium">Shipping</h6>
169 |                             <h6 class="font-weight-medium">$10</h6>
170 |                         </div>
171 |                     </div>
172 |                     <div class="pt-2">
173 |                         <div class="d-flex justify-content-between mt-2">
174 |                             <h5>Total</h5>
175 |                             <h5>$160</h5>
176 |                         </div>
177 |                         <button class="btn btn-block btn-primary font-weight-bold my-3 py-3">Proceed To Checkout</button>
178 |                     </div>
179 |                 </div>
180 |             </div>
181 |         </div>
182 |     </div>
183 |     <!-- Cart End -->
184 | 
185 | 
186 |     <!-- Footer Start -->
187 |     {% include "components/footer.html" %}
188 |     <!-- Footer End -->
189 | 
190 | {% endblock %}
191 | 


--------------------------------------------------------------------------------
/templates/checkout.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% block content %}
  3 |     <!-- Topbar Start -->
  4 |     {% include "components/topbar.html" %}
  5 |     <!-- Topbar End -->
  6 | 
  7 | 
  8 |     <!-- Navbar Start -->
  9 |     {% include "components/navbar.html" %}
 10 |     <!-- Navbar End -->
 11 | 
 12 | 
 13 |     <!-- Breadcrumb Start -->
 14 |     <div class="container-fluid">
 15 |         <div class="row px-xl-5">
 16 |             <div class="col-12">
 17 |                 <nav class="breadcrumb bg-light mb-30">
 18 |                     <a class="breadcrumb-item text-dark" href="/">Home</a>
 19 |                     <a class="breadcrumb-item text-dark" href="/shop">Shop</a>
 20 |                     <span class="breadcrumb-item active">Checkout</span>
 21 |                 </nav>
 22 |             </div>
 23 |         </div>
 24 |     </div>
 25 |     <!-- Breadcrumb End -->
 26 | 
 27 | 
 28 |     <!-- Checkout Start -->
 29 |     <div class="container-fluid">
 30 |         <div class="row px-xl-5">
 31 |             <div class="col-lg-8">
 32 |                 <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Billing Address</span></h5>
 33 |                 <div class="bg-light p-30 mb-5">
 34 |                     <div class="row">
 35 |                         <div class="col-md-6 form-group">
 36 |                             <label>First Name</label>
 37 |                             <input class="form-control" type="text" placeholder="John">
 38 |                         </div>
 39 |                         <div class="col-md-6 form-group">
 40 |                             <label>Last Name</label>
 41 |                             <input class="form-control" type="text" placeholder="Doe">
 42 |                         </div>
 43 |                         <div class="col-md-6 form-group">
 44 |                             <label>E-mail</label>
 45 |                             <input class="form-control" type="text" placeholder="example@email.com">
 46 |                         </div>
 47 |                         <div class="col-md-6 form-group">
 48 |                             <label>Mobile No</label>
 49 |                             <input class="form-control" type="text" placeholder="+123 456 789">
 50 |                         </div>
 51 |                         <div class="col-md-6 form-group">
 52 |                             <label>Address Line 1</label>
 53 |                             <input class="form-control" type="text" placeholder="123 Street">
 54 |                         </div>
 55 |                         <div class="col-md-6 form-group">
 56 |                             <label>Address Line 2</label>
 57 |                             <input class="form-control" type="text" placeholder="123 Street">
 58 |                         </div>
 59 |                         <div class="col-md-6 form-group">
 60 |                             <label>Country</label>
 61 |                             <select class="custom-select">
 62 |                                 <option selected>United States</option>
 63 |                                 <option>Afghanistan</option>
 64 |                                 <option>Albania</option>
 65 |                                 <option>Algeria</option>
 66 |                             </select>
 67 |                         </div>
 68 |                         <div class="col-md-6 form-group">
 69 |                             <label>City</label>
 70 |                             <input class="form-control" type="text" placeholder="New York">
 71 |                         </div>
 72 |                         <div class="col-md-6 form-group">
 73 |                             <label>State</label>
 74 |                             <input class="form-control" type="text" placeholder="New York">
 75 |                         </div>
 76 |                         <div class="col-md-6 form-group">
 77 |                             <label>ZIP Code</label>
 78 |                             <input class="form-control" type="text" placeholder="123">
 79 |                         </div>
 80 |                         <div class="col-md-12 form-group">
 81 |                             <div class="custom-control custom-checkbox">
 82 |                                 <input type="checkbox" class="custom-control-input" id="newaccount">
 83 |                                 <label class="custom-control-label" for="newaccount">Create an account</label>
 84 |                             </div>
 85 |                         </div>
 86 |                         <div class="col-md-12">
 87 |                             <div class="custom-control custom-checkbox">
 88 |                                 <input type="checkbox" class="custom-control-input" id="shipto">
 89 |                                 <label class="custom-control-label" for="shipto"  data-toggle="collapse" data-target="#shipping-address">Ship to different address</label>
 90 |                             </div>
 91 |                         </div>
 92 |                     </div>
 93 |                 </div>
 94 |                 <div class="collapse mb-5" id="shipping-address">
 95 |                     <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Shipping Address</span></h5>
 96 |                     <div class="bg-light p-30">
 97 |                         <div class="row">
 98 |                             <div class="col-md-6 form-group">
 99 |                                 <label>First Name</label>
100 |                                 <input class="form-control" type="text" placeholder="John">
101 |                             </div>
102 |                             <div class="col-md-6 form-group">
103 |                                 <label>Last Name</label>
104 |                                 <input class="form-control" type="text" placeholder="Doe">
105 |                             </div>
106 |                             <div class="col-md-6 form-group">
107 |                                 <label>E-mail</label>
108 |                                 <input class="form-control" type="text" placeholder="example@email.com">
109 |                             </div>
110 |                             <div class="col-md-6 form-group">
111 |                                 <label>Mobile No</label>
112 |                                 <input class="form-control" type="text" placeholder="+123 456 789">
113 |                             </div>
114 |                             <div class="col-md-6 form-group">
115 |                                 <label>Address Line 1</label>
116 |                                 <input class="form-control" type="text" placeholder="123 Street">
117 |                             </div>
118 |                             <div class="col-md-6 form-group">
119 |                                 <label>Address Line 2</label>
120 |                                 <input class="form-control" type="text" placeholder="123 Street">
121 |                             </div>
122 |                             <div class="col-md-6 form-group">
123 |                                 <label>Country</label>
124 |                                 <select class="custom-select">
125 |                                     <option selected>United States</option>
126 |                                     <option>Afghanistan</option>
127 |                                     <option>Albania</option>
128 |                                     <option>Algeria</option>
129 |                                 </select>
130 |                             </div>
131 |                             <div class="col-md-6 form-group">
132 |                                 <label>City</label>
133 |                                 <input class="form-control" type="text" placeholder="New York">
134 |                             </div>
135 |                             <div class="col-md-6 form-group">
136 |                                 <label>State</label>
137 |                                 <input class="form-control" type="text" placeholder="New York">
138 |                             </div>
139 |                             <div class="col-md-6 form-group">
140 |                                 <label>ZIP Code</label>
141 |                                 <input class="form-control" type="text" placeholder="123">
142 |                             </div>
143 |                         </div>
144 |                     </div>
145 |                 </div>
146 |             </div>
147 |             <div class="col-lg-4">
148 |                 <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Order Total</span></h5>
149 |                 <div class="bg-light p-30 mb-5">
150 |                     <div class="border-bottom">
151 |                         <h6 class="mb-3">Products</h6>
152 |                         <div class="d-flex justify-content-between">
153 |                             <p>Product Name 1</p>
154 |                             <p>$150</p>
155 |                         </div>
156 |                         <div class="d-flex justify-content-between">
157 |                             <p>Product Name 2</p>
158 |                             <p>$150</p>
159 |                         </div>
160 |                         <div class="d-flex justify-content-between">
161 |                             <p>Product Name 3</p>
162 |                             <p>$150</p>
163 |                         </div>
164 |                     </div>
165 |                     <div class="border-bottom pt-3 pb-2">
166 |                         <div class="d-flex justify-content-between mb-3">
167 |                             <h6>Subtotal</h6>
168 |                             <h6>$150</h6>
169 |                         </div>
170 |                         <div class="d-flex justify-content-between">
171 |                             <h6 class="font-weight-medium">Shipping</h6>
172 |                             <h6 class="font-weight-medium">$10</h6>
173 |                         </div>
174 |                     </div>
175 |                     <div class="pt-2">
176 |                         <div class="d-flex justify-content-between mt-2">
177 |                             <h5>Total</h5>
178 |                             <h5>$160</h5>
179 |                         </div>
180 |                     </div>
181 |                 </div>
182 |                 <div class="mb-5">
183 |                     <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Payment</span></h5>
184 |                     <div class="bg-light p-30">
185 |                         <div class="form-group">
186 |                             <div class="custom-control custom-radio">
187 |                                 <input type="radio" class="custom-control-input" name="payment" id="paypal">
188 |                                 <label class="custom-control-label" for="paypal">Paypal</label>
189 |                             </div>
190 |                         </div>
191 |                         <div class="form-group">
192 |                             <div class="custom-control custom-radio">
193 |                                 <input type="radio" class="custom-control-input" name="payment" id="directcheck">
194 |                                 <label class="custom-control-label" for="directcheck">Direct Check</label>
195 |                             </div>
196 |                         </div>
197 |                         <div class="form-group mb-4">
198 |                             <div class="custom-control custom-radio">
199 |                                 <input type="radio" class="custom-control-input" name="payment" id="banktransfer">
200 |                                 <label class="custom-control-label" for="banktransfer">Bank Transfer</label>
201 |                             </div>
202 |                         </div>
203 |                         <button class="btn btn-block btn-primary font-weight-bold py-3">Place Order</button>
204 |                     </div>
205 |                 </div>
206 |             </div>
207 |         </div>
208 |     </div>
209 |     <!-- Checkout End -->
210 | 
211 | 
212 |     <!-- Footer Start -->
213 |     {% include "components/footer.html" %}
214 |     <!-- Footer End -->
215 | 
216 | {% endblock %}
217 | 
218 | 


--------------------------------------------------------------------------------
/templates/shop.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% block content %}
  3 |     <!-- Topbar Start -->
  4 |     {% include "components/topbar.html" %}
  5 |     <!-- Topbar End -->
  6 | 
  7 | 
  8 |     <!-- Navbar Start -->
  9 |     {% include "components/navbar.html" %}
 10 |     <!-- Navbar End -->
 11 | 
 12 | 
 13 |     <!-- Breadcrumb Start -->
 14 |     <div class="container-fluid">
 15 |         <div class="row px-xl-5">
 16 |             <div class="col-12">
 17 |                 <nav class="breadcrumb bg-light mb-30">
 18 |                     <a class="breadcrumb-item text-dark" href="/">Home</a>
 19 |                     <a class="breadcrumb-item text-dark" href="/shop">Shop</a>
 20 |                     <span class="breadcrumb-item active">Shop List</span>
 21 |                 </nav>
 22 |             </div>
 23 |         </div>
 24 |     </div>
 25 |     <!-- Breadcrumb End -->
 26 | 
 27 | 
 28 |     <!-- Shop Start -->
 29 |     <div class="container-fluid">
 30 |         <div class="row px-xl-5">
 31 |             <!-- Shop Sidebar Start -->
 32 |             <div class="col-lg-3 col-md-4">
 33 |                 <!-- Price Start -->
 34 |                 <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Filter by price</span></h5>
 35 |                 <div class="bg-light p-4 mb-30">
 36 |                     <form>
 37 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 38 |                             <input type="checkbox" class="custom-control-input" checked id="price-all">
 39 |                             <label class="custom-control-label" for="price-all">All Price</label>
 40 |                             <span class="badge border font-weight-normal">1000</span>
 41 |                         </div>
 42 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 43 |                             <input type="checkbox" class="custom-control-input" id="price-1">
 44 |                             <label class="custom-control-label" for="price-1">$0 - $100</label>
 45 |                             <span class="badge border font-weight-normal">150</span>
 46 |                         </div>
 47 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 48 |                             <input type="checkbox" class="custom-control-input" id="price-2">
 49 |                             <label class="custom-control-label" for="price-2">$100 - $200</label>
 50 |                             <span class="badge border font-weight-normal">295</span>
 51 |                         </div>
 52 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 53 |                             <input type="checkbox" class="custom-control-input" id="price-3">
 54 |                             <label class="custom-control-label" for="price-3">$200 - $300</label>
 55 |                             <span class="badge border font-weight-normal">246</span>
 56 |                         </div>
 57 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 58 |                             <input type="checkbox" class="custom-control-input" id="price-4">
 59 |                             <label class="custom-control-label" for="price-4">$300 - $400</label>
 60 |                             <span class="badge border font-weight-normal">145</span>
 61 |                         </div>
 62 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between">
 63 |                             <input type="checkbox" class="custom-control-input" id="price-5">
 64 |                             <label class="custom-control-label" for="price-5">$400 - $500</label>
 65 |                             <span class="badge border font-weight-normal">168</span>
 66 |                         </div>
 67 |                     </form>
 68 |                 </div>
 69 |                 <!-- Price End -->
 70 |                 
 71 |                 <!-- Color Start -->
 72 |                 <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Filter by color</span></h5>
 73 |                 <div class="bg-light p-4 mb-30">
 74 |                     <form>
 75 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 76 |                             <input type="checkbox" class="custom-control-input" checked id="color-all">
 77 |                             <label class="custom-control-label" for="price-all">All Color</label>
 78 |                             <span class="badge border font-weight-normal">1000</span>
 79 |                         </div>
 80 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 81 |                             <input type="checkbox" class="custom-control-input" id="color-1">
 82 |                             <label class="custom-control-label" for="color-1">Black</label>
 83 |                             <span class="badge border font-weight-normal">150</span>
 84 |                         </div>
 85 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 86 |                             <input type="checkbox" class="custom-control-input" id="color-2">
 87 |                             <label class="custom-control-label" for="color-2">White</label>
 88 |                             <span class="badge border font-weight-normal">295</span>
 89 |                         </div>
 90 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 91 |                             <input type="checkbox" class="custom-control-input" id="color-3">
 92 |                             <label class="custom-control-label" for="color-3">Red</label>
 93 |                             <span class="badge border font-weight-normal">246</span>
 94 |                         </div>
 95 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
 96 |                             <input type="checkbox" class="custom-control-input" id="color-4">
 97 |                             <label class="custom-control-label" for="color-4">Blue</label>
 98 |                             <span class="badge border font-weight-normal">145</span>
 99 |                         </div>
100 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between">
101 |                             <input type="checkbox" class="custom-control-input" id="color-5">
102 |                             <label class="custom-control-label" for="color-5">Green</label>
103 |                             <span class="badge border font-weight-normal">168</span>
104 |                         </div>
105 |                     </form>
106 |                 </div>
107 |                 <!-- Color End -->
108 | 
109 |                 <!-- Size Start -->
110 |                 <h5 class="section-title position-relative text-uppercase mb-3"><span class="bg-secondary pr-3">Filter by size</span></h5>
111 |                 <div class="bg-light p-4 mb-30">
112 |                     <form>
113 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
114 |                             <input type="checkbox" class="custom-control-input" checked id="size-all">
115 |                             <label class="custom-control-label" for="size-all">All Size</label>
116 |                             <span class="badge border font-weight-normal">1000</span>
117 |                         </div>
118 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
119 |                             <input type="checkbox" class="custom-control-input" id="size-1">
120 |                             <label class="custom-control-label" for="size-1">XS</label>
121 |                             <span class="badge border font-weight-normal">150</span>
122 |                         </div>
123 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
124 |                             <input type="checkbox" class="custom-control-input" id="size-2">
125 |                             <label class="custom-control-label" for="size-2">S</label>
126 |                             <span class="badge border font-weight-normal">295</span>
127 |                         </div>
128 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
129 |                             <input type="checkbox" class="custom-control-input" id="size-3">
130 |                             <label class="custom-control-label" for="size-3">M</label>
131 |                             <span class="badge border font-weight-normal">246</span>
132 |                         </div>
133 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
134 |                             <input type="checkbox" class="custom-control-input" id="size-4">
135 |                             <label class="custom-control-label" for="size-4">L</label>
136 |                             <span class="badge border font-weight-normal">145</span>
137 |                         </div>
138 |                         <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between">
139 |                             <input type="checkbox" class="custom-control-input" id="size-5">
140 |                             <label class="custom-control-label" for="size-5">XL</label>
141 |                             <span class="badge border font-weight-normal">168</span>
142 |                         </div>
143 |                     </form>
144 |                 </div>
145 |                 <!-- Size End -->
146 |             </div>
147 |             <!-- Shop Sidebar End -->
148 | 
149 | 
150 |             <!-- Shop Product Start -->
151 |             <div class="col-lg-9 col-md-8">
152 |                 <div class="row pb-3">
153 |                     <div class="col-12 pb-1">
154 |                         <div class="d-flex align-items-center justify-content-between mb-4">
155 |                             <div>
156 |                                 <button class="btn btn-sm btn-light"><i class="fa fa-th-large"></i></button>
157 |                                 <button class="btn btn-sm btn-light ml-2"><i class="fa fa-bars"></i></button>
158 |                             </div>
159 |                             <div class="ml-2">
160 |                                 <div class="btn-group">
161 |                                     <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown">Sorting</button>
162 |                                     <div class="dropdown-menu dropdown-menu-right">
163 |                                         <a class="dropdown-item" href="#">Latest</a>
164 |                                         <a class="dropdown-item" href="#">Popularity</a>
165 |                                         <a class="dropdown-item" href="#">Best Rating</a>
166 |                                     </div>
167 |                                 </div>
168 |                                 <div class="btn-group ml-2">
169 |                                     <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown">Showing</button>
170 |                                     <div class="dropdown-menu dropdown-menu-right">
171 |                                         <a class="dropdown-item" href="#">10</a>
172 |                                         <a class="dropdown-item" href="#">20</a>
173 |                                         <a class="dropdown-item" href="#">30</a>
174 |                                     </div>
175 |                                 </div>
176 |                             </div>
177 |                         </div>
178 |                     </div>
179 | 
180 |     {% include "components/products.html" %}
181 |                     <div class="col-12">
182 |                         <nav>
183 |                           <ul class="pagination justify-content-center">
184 | 				  {% for page_num in 1..=total_pages %}
185 |                             <li class="page-item"><a class="page-link" href="{{ page_num }}">{{ page_num }}</a></li>
186 | 				{% endfor %}
187 |                             <li class="page-item"><a class="page-link" href="{{ current_page + 1 }}">Next</a></li>
188 |                           </ul>
189 | 
190 |                         </nav>
191 |                     </div>
192 |                 </div>
193 |             </div>
194 |             <!-- Shop Product End -->
195 |         </div>
196 |     </div>
197 |     <!-- Shop End -->
198 | 
199 | 
200 |     <!-- Footer Start -->
201 |     {% include "components/footer.html" %}
202 |     <!-- Footer End -->
203 | 
204 | {% endblock %}
205 | 
206 | 


--------------------------------------------------------------------------------
/templates/detail.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% block content %}
  3 |     <!-- Topbar Start -->
  4 |     {% include "components/topbar.html" %}
  5 |     <!-- Topbar End -->
  6 | 
  7 | 
  8 |     <!-- Navbar Start -->
  9 |     {% include "components/navbar.html" %}
 10 |     <!-- Navbar End -->
 11 | 
 12 | 
 13 |     <!-- Breadcrumb Start -->
 14 |     <div class="container-fluid">
 15 |         <div class="row px-xl-5">
 16 |             <div class="col-12">
 17 |                 <nav class="breadcrumb bg-light mb-30">
 18 |                     <a class="breadcrumb-item text-dark" href="/">Home</a>
 19 |                     <a class="breadcrumb-item text-dark" href="/shop">Shop</a>
 20 |                     <span class="breadcrumb-item active">Shop Detail</span>
 21 |                 </nav>
 22 |             </div>
 23 |         </div>
 24 |     </div>
 25 |     <!-- Breadcrumb End -->
 26 | 
 27 | 
 28 |     <!-- Shop Detail Start -->
 29 |     <div class="container-fluid pb-5">
 30 |         <div class="row px-xl-5">
 31 |             <div class="col-lg-5 mb-30">
 32 |                 <div id="product-carousel" class="carousel slide" data-ride="carousel">
 33 |                     <div class="carousel-inner bg-light">
 34 |                         <div class="carousel-item active">
 35 |                             <img class="w-100 h-100" src="assets/img/product-1.jpg" alt="Image">
 36 |                         </div>
 37 |                         <div class="carousel-item">
 38 |                             <img class="w-100 h-100" src="assets/img/product-2.jpg" alt="Image">
 39 |                         </div>
 40 |                         <div class="carousel-item">
 41 |                             <img class="w-100 h-100" src="assets/img/product-3.jpg" alt="Image">
 42 |                         </div>
 43 |                         <div class="carousel-item">
 44 |                             <img class="w-100 h-100" src="assets/img/product-4.jpg" alt="Image">
 45 |                         </div>
 46 |                     </div>
 47 |                     <a class="carousel-control-prev" href="#product-carousel" data-slide="prev">
 48 |                         <i class="fa fa-2x fa-angle-left text-dark"></i>
 49 |                     </a>
 50 |                     <a class="carousel-control-next" href="#product-carousel" data-slide="next">
 51 |                         <i class="fa fa-2x fa-angle-right text-dark"></i>
 52 |                     </a>
 53 |                 </div>
 54 |             </div>
 55 | 
 56 |             <div class="col-lg-7 h-auto mb-30">
 57 |                 <div class="h-100 bg-light p-30">
 58 |                     <h3>Product Name Goes Here</h3>
 59 |                     <div class="d-flex mb-3">
 60 |                         <div class="text-primary mr-2">
 61 |                             <small class="fas fa-star"></small>
 62 |                             <small class="fas fa-star"></small>
 63 |                             <small class="fas fa-star"></small>
 64 |                             <small class="fas fa-star-half-alt"></small>
 65 |                             <small class="far fa-star"></small>
 66 |                         </div>
 67 |                         <small class="pt-1">(99 Reviews)</small>
 68 |                     </div>
 69 |                     <h3 class="font-weight-semi-bold mb-4">$150.00</h3>
 70 |                     <p class="mb-4">Volup erat ipsum diam elitr rebum et dolor. Est nonumy elitr erat diam stet sit
 71 |                         clita ea. Sanc ipsum et, labore clita lorem magna duo dolor no sea
 72 |                         Nonumy</p>
 73 |                     <div class="d-flex mb-3">
 74 |                         <strong class="text-dark mr-3">Sizes:</strong>
 75 |                         <form>
 76 |                             <div class="custom-control custom-radio custom-control-inline">
 77 |                                 <input type="radio" class="custom-control-input" id="size-1" name="size">
 78 |                                 <label class="custom-control-label" for="size-1">XS</label>
 79 |                             </div>
 80 |                             <div class="custom-control custom-radio custom-control-inline">
 81 |                                 <input type="radio" class="custom-control-input" id="size-2" name="size">
 82 |                                 <label class="custom-control-label" for="size-2">S</label>
 83 |                             </div>
 84 |                             <div class="custom-control custom-radio custom-control-inline">
 85 |                                 <input type="radio" class="custom-control-input" id="size-3" name="size">
 86 |                                 <label class="custom-control-label" for="size-3">M</label>
 87 |                             </div>
 88 |                             <div class="custom-control custom-radio custom-control-inline">
 89 |                                 <input type="radio" class="custom-control-input" id="size-4" name="size">
 90 |                                 <label class="custom-control-label" for="size-4">L</label>
 91 |                             </div>
 92 |                             <div class="custom-control custom-radio custom-control-inline">
 93 |                                 <input type="radio" class="custom-control-input" id="size-5" name="size">
 94 |                                 <label class="custom-control-label" for="size-5">XL</label>
 95 |                             </div>
 96 |                         </form>
 97 |                     </div>
 98 |                     <div class="d-flex mb-4">
 99 |                         <strong class="text-dark mr-3">Colors:</strong>
100 |                         <form>
101 |                             <div class="custom-control custom-radio custom-control-inline">
102 |                                 <input type="radio" class="custom-control-input" id="color-1" name="color">
103 |                                 <label class="custom-control-label" for="color-1">Black</label>
104 |                             </div>
105 |                             <div class="custom-control custom-radio custom-control-inline">
106 |                                 <input type="radio" class="custom-control-input" id="color-2" name="color">
107 |                                 <label class="custom-control-label" for="color-2">White</label>
108 |                             </div>
109 |                             <div class="custom-control custom-radio custom-control-inline">
110 |                                 <input type="radio" class="custom-control-input" id="color-3" name="color">
111 |                                 <label class="custom-control-label" for="color-3">Red</label>
112 |                             </div>
113 |                             <div class="custom-control custom-radio custom-control-inline">
114 |                                 <input type="radio" class="custom-control-input" id="color-4" name="color">
115 |                                 <label class="custom-control-label" for="color-4">Blue</label>
116 |                             </div>
117 |                             <div class="custom-control custom-radio custom-control-inline">
118 |                                 <input type="radio" class="custom-control-input" id="color-5" name="color">
119 |                                 <label class="custom-control-label" for="color-5">Green</label>
120 |                             </div>
121 |                         </form>
122 |                     </div>
123 |                     <div class="d-flex align-items-center mb-4 pt-2">
124 |                         <div class="input-group quantity mr-3" style="width: 130px;">
125 |                             <div class="input-group-btn">
126 |                                 <button class="btn btn-primary btn-minus">
127 |                                     <i class="fa fa-minus"></i>
128 |                                 </button>
129 |                             </div>
130 |                             <input type="text" class="form-control bg-secondary border-0 text-center" value="1">
131 |                             <div class="input-group-btn">
132 |                                 <button class="btn btn-primary btn-plus">
133 |                                     <i class="fa fa-plus"></i>
134 |                                 </button>
135 |                             </div>
136 |                         </div>
137 |                         <button class="btn btn-primary px-3"><i class="fa fa-shopping-cart mr-1"></i> Add To
138 |                             Cart</button>
139 |                     </div>
140 |                     <div class="d-flex pt-2">
141 |                         <strong class="text-dark mr-2">Share on:</strong>
142 |                         <div class="d-inline-flex">
143 |                             <a class="text-dark px-2" href="">
144 |                                 <i class="fab fa-facebook-f"></i>
145 |                             </a>
146 |                             <a class="text-dark px-2" href="">
147 |                                 <i class="fab fa-twitter"></i>
148 |                             </a>
149 |                             <a class="text-dark px-2" href="">
150 |                                 <i class="fab fa-linkedin-in"></i>
151 |                             </a>
152 |                             <a class="text-dark px-2" href="">
153 |                                 <i class="fab fa-pinterest"></i>
154 |                             </a>
155 |                         </div>
156 |                     </div>
157 |                 </div>
158 |             </div>
159 |         </div>
160 |         <div class="row px-xl-5">
161 |             <div class="col">
162 |                 <div class="bg-light p-30">
163 |                     <div class="nav nav-tabs mb-4">
164 |                         <a class="nav-item nav-link text-dark active" data-toggle="tab" href="#tab-pane-1">Description</a>
165 |                         <a class="nav-item nav-link text-dark" data-toggle="tab" href="#tab-pane-2">Information</a>
166 |                         <a class="nav-item nav-link text-dark" data-toggle="tab" href="#tab-pane-3">Reviews (0)</a>
167 |                     </div>
168 |                     <div class="tab-content">
169 |                         <div class="tab-pane fade show active" id="tab-pane-1">
170 |                             <h4 class="mb-3">Product Description</h4>
171 |                             <p>Eos no lorem eirmod diam diam, eos elitr et gubergren diam sea. Consetetur vero aliquyam invidunt duo dolores et duo sit. Vero diam ea vero et dolore rebum, dolor rebum eirmod consetetur invidunt sed sed et, lorem duo et eos elitr, sadipscing kasd ipsum rebum diam. Dolore diam stet rebum sed tempor kasd eirmod. Takimata kasd ipsum accusam sadipscing, eos dolores sit no ut diam consetetur duo justo est, sit sanctus diam tempor aliquyam eirmod nonumy rebum dolor accusam, ipsum kasd eos consetetur at sit rebum, diam kasd invidunt tempor lorem, ipsum lorem elitr sanctus eirmod takimata dolor ea invidunt.</p>
172 |                             <p>Dolore magna est eirmod sanctus dolor, amet diam et eirmod et ipsum. Amet dolore tempor consetetur sed lorem dolor sit lorem tempor. Gubergren amet amet labore sadipscing clita clita diam clita. Sea amet et sed ipsum lorem elitr et, amet et labore voluptua sit rebum. Ea erat sed et diam takimata sed justo. Magna takimata justo et amet magna et.</p>
173 |                         </div>
174 |                         <div class="tab-pane fade" id="tab-pane-2">
175 |                             <h4 class="mb-3">Additional Information</h4>
176 |                             <p>Eos no lorem eirmod diam diam, eos elitr et gubergren diam sea. Consetetur vero aliquyam invidunt duo dolores et duo sit. Vero diam ea vero et dolore rebum, dolor rebum eirmod consetetur invidunt sed sed et, lorem duo et eos elitr, sadipscing kasd ipsum rebum diam. Dolore diam stet rebum sed tempor kasd eirmod. Takimata kasd ipsum accusam sadipscing, eos dolores sit no ut diam consetetur duo justo est, sit sanctus diam tempor aliquyam eirmod nonumy rebum dolor accusam, ipsum kasd eos consetetur at sit rebum, diam kasd invidunt tempor lorem, ipsum lorem elitr sanctus eirmod takimata dolor ea invidunt.</p>
177 |                             <div class="row">
178 |                                 <div class="col-md-6">
179 |                                     <ul class="list-group list-group-flush">
180 |                                         <li class="list-group-item px-0">
181 |                                             Sit erat duo lorem duo ea consetetur, et eirmod takimata.
182 |                                         </li>
183 |                                         <li class="list-group-item px-0">
184 |                                             Amet kasd gubergren sit sanctus et lorem eos sadipscing at.
185 |                                         </li>
186 |                                         <li class="list-group-item px-0">
187 |                                             Duo amet accusam eirmod nonumy stet et et stet eirmod.
188 |                                         </li>
189 |                                         <li class="list-group-item px-0">
190 |                                             Takimata ea clita labore amet ipsum erat justo voluptua. Nonumy.
191 |                                         </li>
192 |                                       </ul> 
193 |                                 </div>
194 |                                 <div class="col-md-6">
195 |                                     <ul class="list-group list-group-flush">
196 |                                         <li class="list-group-item px-0">
197 |                                             Sit erat duo lorem duo ea consetetur, et eirmod takimata.
198 |                                         </li>
199 |                                         <li class="list-group-item px-0">
200 |                                             Amet kasd gubergren sit sanctus et lorem eos sadipscing at.
201 |                                         </li>
202 |                                         <li class="list-group-item px-0">
203 |                                             Duo amet accusam eirmod nonumy stet et et stet eirmod.
204 |                                         </li>
205 |                                         <li class="list-group-item px-0">
206 |                                             Takimata ea clita labore amet ipsum erat justo voluptua. Nonumy.
207 |                                         </li>
208 |                                       </ul> 
209 |                                 </div>
210 |                             </div>
211 |                         </div>
212 |                         <div class="tab-pane fade" id="tab-pane-3">
213 |                             <div class="row">
214 |                                 <div class="col-md-6">
215 |                                     <h4 class="mb-4">1 review for "Product Name"</h4>
216 |                                     <div class="media mb-4">
217 |                                         <img src="/assets/img/user.jpg" alt="Image" class="img-fluid mr-3 mt-1" style="width: 45px;">
218 |                                         <div class="media-body">
219 |                                             <h6>John Doe<small> - <i>01 Jan 2045</i></small></h6>
220 |                                             <div class="text-primary mb-2">
221 |                                                 <i class="fas fa-star"></i>
222 |                                                 <i class="fas fa-star"></i>
223 |                                                 <i class="fas fa-star"></i>
224 |                                                 <i class="fas fa-star-half-alt"></i>
225 |                                                 <i class="far fa-star"></i>
226 |                                             </div>
227 |                                             <p>Diam amet duo labore stet elitr ea clita ipsum, tempor labore accusam ipsum et no at. Kasd diam tempor rebum magna dolores sed sed eirmod ipsum.</p>
228 |                                         </div>
229 |                                     </div>
230 |                                 </div>
231 |                                 <div class="col-md-6">
232 |                                     <h4 class="mb-4">Leave a review</h4>
233 |                                     <small>Your email address will not be published. Required fields are marked *</small>
234 |                                     <div class="d-flex my-3">
235 |                                         <p class="mb-0 mr-2">Your Rating * :</p>
236 |                                         <div class="text-primary">
237 |                                             <i class="far fa-star"></i>
238 |                                             <i class="far fa-star"></i>
239 |                                             <i class="far fa-star"></i>
240 |                                             <i class="far fa-star"></i>
241 |                                             <i class="far fa-star"></i>
242 |                                         </div>
243 |                                     </div>
244 |                                     <form>
245 |                                         <div class="form-group">
246 |                                             <label for="message">Your Review *</label>
247 |                                             <textarea id="message" cols="30" rows="5" class="form-control"></textarea>
248 |                                         </div>
249 |                                         <div class="form-group">
250 |                                             <label for="name">Your Name *</label>
251 |                                             <input type="text" class="form-control" id="name">
252 |                                         </div>
253 |                                         <div class="form-group">
254 |                                             <label for="email">Your Email *</label>
255 |                                             <input type="email" class="form-control" id="email">
256 |                                         </div>
257 |                                         <div class="form-group mb-0">
258 |                                             <input type="submit" value="Leave Your Review" class="btn btn-primary px-3">
259 |                                         </div>
260 |                                     </form>
261 |                                 </div>
262 |                             </div>
263 |                         </div>
264 |                     </div>
265 |                 </div>
266 |             </div>
267 |         </div>
268 |     </div>
269 |     <!-- Shop Detail End -->
270 | 
271 | 
272 |     <!-- Products Start -->
273 |     <div class="container-fluid py-5">
274 |         <h2 class="section-title position-relative text-uppercase mx-xl-5 mb-4"><span class="bg-secondary pr-3">You May Also Like</span></h2>
275 |         <div class="row px-xl-5">
276 |             <div class="col">
277 |                 <div class="owl-carousel related-carousel">
278 |                     <div class="product-item bg-light">
279 |                         <div class="product-img position-relative overflow-hidden">
280 |                             <img class="img-fluid w-100" src="assets/img/product-1.jpg" alt="">
281 |                             <div class="product-action">
282 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
283 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
284 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
285 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
286 |                             </div>
287 |                         </div>
288 |                         <div class="text-center py-4">
289 |                             <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
290 |                             <div class="d-flex align-items-center justify-content-center mt-2">
291 |                                 <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
292 |                             </div>
293 |                             <div class="d-flex align-items-center justify-content-center mb-1">
294 |                                 <small class="fa fa-star text-primary mr-1"></small>
295 |                                 <small class="fa fa-star text-primary mr-1"></small>
296 |                                 <small class="fa fa-star text-primary mr-1"></small>
297 |                                 <small class="fa fa-star text-primary mr-1"></small>
298 |                                 <small class="fa fa-star text-primary mr-1"></small>
299 |                                 <small>(99)</small>
300 |                             </div>
301 |                         </div>
302 |                     </div>
303 |                     <div class="product-item bg-light">
304 |                         <div class="product-img position-relative overflow-hidden">
305 |                             <img class="img-fluid w-100" src="assets/img/product-2.jpg" alt="">
306 |                             <div class="product-action">
307 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
308 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
309 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
310 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
311 |                             </div>
312 |                         </div>
313 |                         <div class="text-center py-4">
314 |                             <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
315 |                             <div class="d-flex align-items-center justify-content-center mt-2">
316 |                                 <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
317 |                             </div>
318 |                             <div class="d-flex align-items-center justify-content-center mb-1">
319 |                                 <small class="fa fa-star text-primary mr-1"></small>
320 |                                 <small class="fa fa-star text-primary mr-1"></small>
321 |                                 <small class="fa fa-star text-primary mr-1"></small>
322 |                                 <small class="fa fa-star text-primary mr-1"></small>
323 |                                 <small class="fa fa-star text-primary mr-1"></small>
324 |                                 <small>(99)</small>
325 |                             </div>
326 |                         </div>
327 |                     </div>
328 |                     <div class="product-item bg-light">
329 |                         <div class="product-img position-relative overflow-hidden">
330 |                             <img class="img-fluid w-100" src="assets/img/product-3.jpg" alt="">
331 |                             <div class="product-action">
332 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
333 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
334 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
335 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
336 |                             </div>
337 |                         </div>
338 |                         <div class="text-center py-4">
339 |                             <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
340 |                             <div class="d-flex align-items-center justify-content-center mt-2">
341 |                                 <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
342 |                             </div>
343 |                             <div class="d-flex align-items-center justify-content-center mb-1">
344 |                                 <small class="fa fa-star text-primary mr-1"></small>
345 |                                 <small class="fa fa-star text-primary mr-1"></small>
346 |                                 <small class="fa fa-star text-primary mr-1"></small>
347 |                                 <small class="fa fa-star text-primary mr-1"></small>
348 |                                 <small class="fa fa-star text-primary mr-1"></small>
349 |                                 <small>(99)</small>
350 |                             </div>
351 |                         </div>
352 |                     </div>
353 |                     <div class="product-item bg-light">
354 |                         <div class="product-img position-relative overflow-hidden">
355 |                             <img class="img-fluid w-100" src="assets/img/product-4.jpg" alt="">
356 |                             <div class="product-action">
357 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
358 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
359 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
360 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
361 |                             </div>
362 |                         </div>
363 |                         <div class="text-center py-4">
364 |                             <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
365 |                             <div class="d-flex align-items-center justify-content-center mt-2">
366 |                                 <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
367 |                             </div>
368 |                             <div class="d-flex align-items-center justify-content-center mb-1">
369 |                                 <small class="fa fa-star text-primary mr-1"></small>
370 |                                 <small class="fa fa-star text-primary mr-1"></small>
371 |                                 <small class="fa fa-star text-primary mr-1"></small>
372 |                                 <small class="fa fa-star text-primary mr-1"></small>
373 |                                 <small class="fa fa-star text-primary mr-1"></small>
374 |                                 <small>(99)</small>
375 |                             </div>
376 |                         </div>
377 |                     </div>
378 |                     <div class="product-item bg-light">
379 |                         <div class="product-img position-relative overflow-hidden">
380 |                             <img class="img-fluid w-100" src="assets/img/product-5.jpg" alt="">
381 |                             <div class="product-action">
382 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
383 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
384 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
385 |                                 <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
386 |                             </div>
387 |                         </div>
388 |                         <div class="text-center py-4">
389 |                             <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
390 |                             <div class="d-flex align-items-center justify-content-center mt-2">
391 |                                 <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
392 |                             </div>
393 |                             <div class="d-flex align-items-center justify-content-center mb-1">
394 |                                 <small class="fa fa-star text-primary mr-1"></small>
395 |                                 <small class="fa fa-star text-primary mr-1"></small>
396 |                                 <small class="fa fa-star text-primary mr-1"></small>
397 |                                 <small class="fa fa-star text-primary mr-1"></small>
398 |                                 <small class="fa fa-star text-primary mr-1"></small>
399 |                                 <small>(99)</small>
400 |                             </div>
401 |                         </div>
402 |                     </div>
403 |                 </div>
404 |             </div>
405 |         </div>
406 |     </div>
407 |     <!-- Products End -->
408 | 
409 | 
410 |     <!-- Footer Start -->
411 |     {% include "components/footer.html" %}
412 |    <!-- Footer End -->
413 | 
414 | {% endblock %}
415 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% block content %}
  3 |     <!-- Topbar Start -->
  4 |     {% include "components/topbar.html" %}
  5 |    <!-- Topbar End -->
  6 | 
  7 | 
  8 |     <!-- Navbar Start -->
  9 |     {% include "components/navbar.html" %}
 10 |     <!-- Navbar End -->
 11 | 
 12 | 
 13 |     <!-- Carousel Start -->
 14 |     <div class="container-fluid mb-3">
 15 |         <div class="row px-xl-5">
 16 |             <div class="col-lg-8">
 17 |                 <div id="header-carousel" class="carousel slide carousel-fade mb-30 mb-lg-0" data-ride="carousel">
 18 |                     <ol class="carousel-indicators">
 19 |                         <li data-target="#header-carousel" data-slide-to="0" class="active"></li>
 20 |                         <li data-target="#header-carousel" data-slide-to="1"></li>
 21 |                         <li data-target="#header-carousel" data-slide-to="2"></li>
 22 |                     </ol>
 23 |                     <div class="carousel-inner">
 24 |                         <div class="carousel-item position-relative active" style="height: 430px;">
 25 |                             <img class="position-absolute w-100 h-100" src="assets/img/carousel-1.jpg" style="object-fit: cover;">
 26 |                             <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
 27 |                                 <div class="p-3" style="max-width: 700px;">
 28 |                                     <h1 class="display-4 text-white mb-3 animate__animated animate__fadeInDown">Men Fashion</h1>
 29 |                                     <p class="mx-md-5 px-5 animate__animated animate__bounceIn">Lorem rebum magna amet lorem magna erat diam stet. Sadips duo stet amet amet ndiam elitr ipsum diam</p>
 30 |                                     <a class="btn btn-outline-light py-2 px-4 mt-3 animate__animated animate__fadeInUp" href="#">Shop Now</a>
 31 |                                 </div>
 32 |                             </div>
 33 |                         </div>
 34 |                         <div class="carousel-item position-relative" style="height: 430px;">
 35 |                             <img class="position-absolute w-100 h-100" src="assets/img/carousel-2.jpg" style="object-fit: cover;">
 36 |                             <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
 37 |                                 <div class="p-3" style="max-width: 700px;">
 38 |                                     <h1 class="display-4 text-white mb-3 animate__animated animate__fadeInDown">Women Fashion</h1>
 39 |                                     <p class="mx-md-5 px-5 animate__animated animate__bounceIn">Lorem rebum magna amet lorem magna erat diam stet. Sadips duo stet amet amet ndiam elitr ipsum diam</p>
 40 |                                     <a class="btn btn-outline-light py-2 px-4 mt-3 animate__animated animate__fadeInUp" href="#">Shop Now</a>
 41 |                                 </div>
 42 |                             </div>
 43 |                         </div>
 44 |                         <div class="carousel-item position-relative" style="height: 430px;">
 45 |                             <img class="position-absolute w-100 h-100" src="assets/img/carousel-3.jpg" style="object-fit: cover;">
 46 |                             <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
 47 |                                 <div class="p-3" style="max-width: 700px;">
 48 |                                     <h1 class="display-4 text-white mb-3 animate__animated animate__fadeInDown">Kids Fashion</h1>
 49 |                                     <p class="mx-md-5 px-5 animate__animated animate__bounceIn">Lorem rebum magna amet lorem magna erat diam stet. Sadips duo stet amet amet ndiam elitr ipsum diam</p>
 50 |                                     <a class="btn btn-outline-light py-2 px-4 mt-3 animate__animated animate__fadeInUp" href="#">Shop Now</a>
 51 |                                 </div>
 52 |                             </div>
 53 |                         </div>
 54 |                     </div>
 55 |                 </div>
 56 |             </div>
 57 |             <div class="col-lg-4">
 58 |                 <div class="product-offer mb-30" style="height: 200px;">
 59 |                     <img class="img-fluid" src="assets/img/offer-1.jpg" alt="">
 60 |                     <div class="offer-text">
 61 |                         <h6 class="text-white text-uppercase">Save 20%</h6>
 62 |                         <h3 class="text-white mb-3">Special Offer</h3>
 63 |                         <a href="" class="btn btn-primary">Shop Now</a>
 64 |                     </div>
 65 |                 </div>
 66 |                 <div class="product-offer mb-30" style="height: 200px;">
 67 |                     <img class="img-fluid" src="assets/img/offer-2.jpg" alt="">
 68 |                     <div class="offer-text">
 69 |                         <h6 class="text-white text-uppercase">Save 20%</h6>
 70 |                         <h3 class="text-white mb-3">Special Offer</h3>
 71 |                         <a href="" class="btn btn-primary">Shop Now</a>
 72 |                     </div>
 73 |                 </div>
 74 |             </div>
 75 |         </div>
 76 |     </div>
 77 |     <!-- Carousel End -->
 78 | 
 79 | 
 80 |     <!-- Featured Start -->
 81 |     <div class="container-fluid pt-5">
 82 |         <div class="row px-xl-5 pb-3">
 83 |             <div class="col-lg-3 col-md-6 col-sm-12 pb-1">
 84 |                 <div class="d-flex align-items-center bg-light mb-4" style="padding: 30px;">
 85 |                     <h1 class="fa fa-check text-primary m-0 mr-3"></h1>
 86 |                     <h5 class="font-weight-semi-bold m-0">Quality Product</h5>
 87 |                 </div>
 88 |             </div>
 89 |             <div class="col-lg-3 col-md-6 col-sm-12 pb-1">
 90 |                 <div class="d-flex align-items-center bg-light mb-4" style="padding: 30px;">
 91 |                     <h1 class="fa fa-shipping-fast text-primary m-0 mr-2"></h1>
 92 |                     <h5 class="font-weight-semi-bold m-0">Free Shipping</h5>
 93 |                 </div>
 94 |             </div>
 95 |             <div class="col-lg-3 col-md-6 col-sm-12 pb-1">
 96 |                 <div class="d-flex align-items-center bg-light mb-4" style="padding: 30px;">
 97 |                     <h1 class="fas fa-exchange-alt text-primary m-0 mr-3"></h1>
 98 |                     <h5 class="font-weight-semi-bold m-0">14-Day Return</h5>
 99 |                 </div>
100 |             </div>
101 |             <div class="col-lg-3 col-md-6 col-sm-12 pb-1">
102 |                 <div class="d-flex align-items-center bg-light mb-4" style="padding: 30px;">
103 |                     <h1 class="fa fa-phone-volume text-primary m-0 mr-3"></h1>
104 |                     <h5 class="font-weight-semi-bold m-0">24/7 Support</h5>
105 |                 </div>
106 |             </div>
107 |         </div>
108 |     </div>
109 |     <!-- Featured End -->
110 | 
111 | 
112 |     <!-- Categories Start -->
113 |     <div class="container-fluid pt-5">
114 |         <h2 class="section-title position-relative text-uppercase mx-xl-5 mb-4"><span class="bg-secondary pr-3">Categories</span></h2>
115 |         <div class="row px-xl-5 pb-3">
116 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
117 |                 <a class="text-decoration-none" href="">
118 |                     <div class="cat-item d-flex align-items-center mb-4">
119 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
120 |                             <img class="img-fluid" src="assets/img/cat-1.jpg" alt="">
121 |                         </div>
122 |                         <div class="flex-fill pl-3">
123 |                             <h6>Category Name</h6>
124 |                             <small class="text-body">100 Products</small>
125 |                         </div>
126 |                     </div>
127 |                 </a>
128 |             </div>
129 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
130 |                 <a class="text-decoration-none" href="">
131 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
132 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
133 |                             <img class="img-fluid" src="assets/img/cat-2.jpg" alt="">
134 |                         </div>
135 |                         <div class="flex-fill pl-3">
136 |                             <h6>Category Name</h6>
137 |                             <small class="text-body">100 Products</small>
138 |                         </div>
139 |                     </div>
140 |                 </a>
141 |             </div>
142 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
143 |                 <a class="text-decoration-none" href="">
144 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
145 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
146 |                             <img class="img-fluid" src="assets/img/cat-3.jpg" alt="">
147 |                         </div>
148 |                         <div class="flex-fill pl-3">
149 |                             <h6>Category Name</h6>
150 |                             <small class="text-body">100 Products</small>
151 |                         </div>
152 |                     </div>
153 |                 </a>
154 |             </div>
155 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
156 |                 <a class="text-decoration-none" href="">
157 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
158 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
159 |                             <img class="img-fluid" src="assets/img/cat-4.jpg" alt="">
160 |                         </div>
161 |                         <div class="flex-fill pl-3">
162 |                             <h6>Category Name</h6>
163 |                             <small class="text-body">100 Products</small>
164 |                         </div>
165 |                     </div>
166 |                 </a>
167 |             </div>
168 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
169 |                 <a class="text-decoration-none" href="">
170 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
171 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
172 |                             <img class="img-fluid" src="assets/img/cat-4.jpg" alt="">
173 |                         </div>
174 |                         <div class="flex-fill pl-3">
175 |                             <h6>Category Name</h6>
176 |                             <small class="text-body">100 Products</small>
177 |                         </div>
178 |                     </div>
179 |                 </a>
180 |             </div>
181 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
182 |                 <a class="text-decoration-none" href="">
183 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
184 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
185 |                             <img class="img-fluid" src="assets/img/cat-3.jpg" alt="">
186 |                         </div>
187 |                         <div class="flex-fill pl-3">
188 |                             <h6>Category Name</h6>
189 |                             <small class="text-body">100 Products</small>
190 |                         </div>
191 |                     </div>
192 |                 </a>
193 |             </div>
194 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
195 |                 <a class="text-decoration-none" href="">
196 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
197 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
198 |                             <img class="img-fluid" src="assets/img/cat-2.jpg" alt="">
199 |                         </div>
200 |                         <div class="flex-fill pl-3">
201 |                             <h6>Category Name</h6>
202 |                             <small class="text-body">100 Products</small>
203 |                         </div>
204 |                     </div>
205 |                 </a>
206 |             </div>
207 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
208 |                 <a class="text-decoration-none" href="">
209 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
210 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
211 |                             <img class="img-fluid" src="assets/img/cat-1.jpg" alt="">
212 |                         </div>
213 |                         <div class="flex-fill pl-3">
214 |                             <h6>Category Name</h6>
215 |                             <small class="text-body">100 Products</small>
216 |                         </div>
217 |                     </div>
218 |                 </a>
219 |             </div>
220 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
221 |                 <a class="text-decoration-none" href="">
222 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
223 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
224 |                             <img class="img-fluid" src="assets/img/cat-2.jpg" alt="">
225 |                         </div>
226 |                         <div class="flex-fill pl-3">
227 |                             <h6>Category Name</h6>
228 |                             <small class="text-body">100 Products</small>
229 |                         </div>
230 |                     </div>
231 |                 </a>
232 |             </div>
233 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
234 |                 <a class="text-decoration-none" href="">
235 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
236 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
237 |                             <img class="img-fluid" src="assets/img/cat-1.jpg" alt="">
238 |                         </div>
239 |                         <div class="flex-fill pl-3">
240 |                             <h6>Category Name</h6>
241 |                             <small class="text-body">100 Products</small>
242 |                         </div>
243 |                     </div>
244 |                 </a>
245 |             </div>
246 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
247 |                 <a class="text-decoration-none" href="">
248 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
249 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
250 |                             <img class="img-fluid" src="assets/img/cat-4.jpg" alt="">
251 |                         </div>
252 |                         <div class="flex-fill pl-3">
253 |                             <h6>Category Name</h6>
254 |                             <small class="text-body">100 Products</small>
255 |                         </div>
256 |                     </div>
257 |                 </a>
258 |             </div>
259 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
260 |                 <a class="text-decoration-none" href="">
261 |                     <div class="cat-item img-zoom d-flex align-items-center mb-4">
262 |                         <div class="overflow-hidden" style="width: 100px; height: 100px;">
263 |                             <img class="img-fluid" src="assets/img/cat-3.jpg" alt="">
264 |                         </div>
265 |                         <div class="flex-fill pl-3">
266 |                             <h6>Category Name</h6>
267 |                             <small class="text-body">100 Products</small>
268 |                         </div>
269 |                     </div>
270 |                 </a>
271 |             </div>
272 |         </div>
273 |     </div>
274 |     <!-- Categories End -->
275 | 
276 | 
277 |     <!-- Products Start -->
278 |     <div class="container-fluid pt-5 pb-3">
279 |         <h2 class="section-title position-relative text-uppercase mx-xl-5 mb-4"><span class="bg-secondary pr-3">Featured Products</span></h2>
280 |         <div class="row px-xl-5">
281 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
282 |                 <div class="product-item bg-light mb-4">
283 |                     <div class="product-img position-relative overflow-hidden">
284 |                         <img class="img-fluid w-100" src="assets/img/product-1.jpg" alt="">
285 |                         <div class="product-action">
286 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
287 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
288 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
289 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
290 |                         </div>
291 |                     </div>
292 |                     <div class="text-center py-4">
293 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
294 |                         <div class="d-flex align-items-center justify-content-center mt-2">
295 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
296 |                         </div>
297 |                         <div class="d-flex align-items-center justify-content-center mb-1">
298 |                             <small class="fa fa-star text-primary mr-1"></small>
299 |                             <small class="fa fa-star text-primary mr-1"></small>
300 |                             <small class="fa fa-star text-primary mr-1"></small>
301 |                             <small class="fa fa-star text-primary mr-1"></small>
302 |                             <small class="fa fa-star text-primary mr-1"></small>
303 |                             <small>(99)</small>
304 |                         </div>
305 |                     </div>
306 |                 </div>
307 |             </div>
308 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
309 |                 <div class="product-item bg-light mb-4">
310 |                     <div class="product-img position-relative overflow-hidden">
311 |                         <img class="img-fluid w-100" src="assets/img/product-2.jpg" alt="">
312 |                         <div class="product-action">
313 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
314 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
315 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
316 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
317 |                         </div>
318 |                     </div>
319 |                     <div class="text-center py-4">
320 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
321 |                         <div class="d-flex align-items-center justify-content-center mt-2">
322 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
323 |                         </div>
324 |                         <div class="d-flex align-items-center justify-content-center mb-1">
325 |                             <small class="fa fa-star text-primary mr-1"></small>
326 |                             <small class="fa fa-star text-primary mr-1"></small>
327 |                             <small class="fa fa-star text-primary mr-1"></small>
328 |                             <small class="fa fa-star text-primary mr-1"></small>
329 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
330 |                             <small>(99)</small>
331 |                         </div>
332 |                     </div>
333 |                 </div>
334 |             </div>
335 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
336 |                 <div class="product-item bg-light mb-4">
337 |                     <div class="product-img position-relative overflow-hidden">
338 |                         <img class="img-fluid w-100" src="assets/img/product-3.jpg" alt="">
339 |                         <div class="product-action">
340 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
341 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
342 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
343 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
344 |                         </div>
345 |                     </div>
346 |                     <div class="text-center py-4">
347 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
348 |                         <div class="d-flex align-items-center justify-content-center mt-2">
349 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
350 |                         </div>
351 |                         <div class="d-flex align-items-center justify-content-center mb-1">
352 |                             <small class="fa fa-star text-primary mr-1"></small>
353 |                             <small class="fa fa-star text-primary mr-1"></small>
354 |                             <small class="fa fa-star text-primary mr-1"></small>
355 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
356 |                             <small class="far fa-star text-primary mr-1"></small>
357 |                             <small>(99)</small>
358 |                         </div>
359 |                     </div>
360 |                 </div>
361 |             </div>
362 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
363 |                 <div class="product-item bg-light mb-4">
364 |                     <div class="product-img position-relative overflow-hidden">
365 |                         <img class="img-fluid w-100" src="assets/img/product-4.jpg" alt="">
366 |                         <div class="product-action">
367 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
368 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
369 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
370 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
371 |                         </div>
372 |                     </div>
373 |                     <div class="text-center py-4">
374 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
375 |                         <div class="d-flex align-items-center justify-content-center mt-2">
376 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
377 |                         </div>
378 |                         <div class="d-flex align-items-center justify-content-center mb-1">
379 |                             <small class="fa fa-star text-primary mr-1"></small>
380 |                             <small class="fa fa-star text-primary mr-1"></small>
381 |                             <small class="fa fa-star text-primary mr-1"></small>
382 |                             <small class="far fa-star text-primary mr-1"></small>
383 |                             <small class="far fa-star text-primary mr-1"></small>
384 |                             <small>(99)</small>
385 |                         </div>
386 |                     </div>
387 |                 </div>
388 |             </div>
389 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
390 |                 <div class="product-item bg-light mb-4">
391 |                     <div class="product-img position-relative overflow-hidden">
392 |                         <img class="img-fluid w-100" src="assets/img/product-5.jpg" alt="">
393 |                         <div class="product-action">
394 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
395 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
396 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
397 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
398 |                         </div>
399 |                     </div>
400 |                     <div class="text-center py-4">
401 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
402 |                         <div class="d-flex align-items-center justify-content-center mt-2">
403 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
404 |                         </div>
405 |                         <div class="d-flex align-items-center justify-content-center mb-1">
406 |                             <small class="fa fa-star text-primary mr-1"></small>
407 |                             <small class="fa fa-star text-primary mr-1"></small>
408 |                             <small class="fa fa-star text-primary mr-1"></small>
409 |                             <small class="fa fa-star text-primary mr-1"></small>
410 |                             <small class="fa fa-star text-primary mr-1"></small>
411 |                             <small>(99)</small>
412 |                         </div>
413 |                     </div>
414 |                 </div>
415 |             </div>
416 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
417 |                 <div class="product-item bg-light mb-4">
418 |                     <div class="product-img position-relative overflow-hidden">
419 |                         <img class="img-fluid w-100" src="assets/img/product-6.jpg" alt="">
420 |                         <div class="product-action">
421 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
422 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
423 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
424 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
425 |                         </div>
426 |                     </div>
427 |                     <div class="text-center py-4">
428 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
429 |                         <div class="d-flex align-items-center justify-content-center mt-2">
430 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
431 |                         </div>
432 |                         <div class="d-flex align-items-center justify-content-center mb-1">
433 |                             <small class="fa fa-star text-primary mr-1"></small>
434 |                             <small class="fa fa-star text-primary mr-1"></small>
435 |                             <small class="fa fa-star text-primary mr-1"></small>
436 |                             <small class="fa fa-star text-primary mr-1"></small>
437 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
438 |                             <small>(99)</small>
439 |                         </div>
440 |                     </div>
441 |                 </div>
442 |             </div>
443 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
444 |                 <div class="product-item bg-light mb-4">
445 |                     <div class="product-img position-relative overflow-hidden">
446 |                         <img class="img-fluid w-100" src="assets/img/product-7.jpg" alt="">
447 |                         <div class="product-action">
448 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
449 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
450 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
451 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
452 |                         </div>
453 |                     </div>
454 |                     <div class="text-center py-4">
455 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
456 |                         <div class="d-flex align-items-center justify-content-center mt-2">
457 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
458 |                         </div>
459 |                         <div class="d-flex align-items-center justify-content-center mb-1">
460 |                             <small class="fa fa-star text-primary mr-1"></small>
461 |                             <small class="fa fa-star text-primary mr-1"></small>
462 |                             <small class="fa fa-star text-primary mr-1"></small>
463 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
464 |                             <small class="far fa-star text-primary mr-1"></small>
465 |                             <small>(99)</small>
466 |                         </div>
467 |                     </div>
468 |                 </div>
469 |             </div>
470 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
471 |                 <div class="product-item bg-light mb-4">
472 |                     <div class="product-img position-relative overflow-hidden">
473 |                         <img class="img-fluid w-100" src="assets/img/product-8.jpg" alt="">
474 |                         <div class="product-action">
475 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
476 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
477 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
478 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
479 |                         </div>
480 |                     </div>
481 |                     <div class="text-center py-4">
482 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
483 |                         <div class="d-flex align-items-center justify-content-center mt-2">
484 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
485 |                         </div>
486 |                         <div class="d-flex align-items-center justify-content-center mb-1">
487 |                             <small class="fa fa-star text-primary mr-1"></small>
488 |                             <small class="fa fa-star text-primary mr-1"></small>
489 |                             <small class="fa fa-star text-primary mr-1"></small>
490 |                             <small class="far fa-star text-primary mr-1"></small>
491 |                             <small class="far fa-star text-primary mr-1"></small>
492 |                             <small>(99)</small>
493 |                         </div>
494 |                     </div>
495 |                 </div>
496 |             </div>
497 |         </div>
498 |     </div>
499 |     <!-- Products End -->
500 | 
501 | 
502 |     <!-- Offer Start -->
503 |     <div class="container-fluid pt-5 pb-3">
504 |         <div class="row px-xl-5">
505 |             <div class="col-md-6">
506 |                 <div class="product-offer mb-30" style="height: 300px;">
507 |                     <img class="img-fluid" src="assets/img/offer-1.jpg" alt="">
508 |                     <div class="offer-text">
509 |                         <h6 class="text-white text-uppercase">Save 20%</h6>
510 |                         <h3 class="text-white mb-3">Special Offer</h3>
511 |                         <a href="" class="btn btn-primary">Shop Now</a>
512 |                     </div>
513 |                 </div>
514 |             </div>
515 |             <div class="col-md-6">
516 |                 <div class="product-offer mb-30" style="height: 300px;">
517 |                     <img class="img-fluid" src="assets/img/offer-2.jpg" alt="">
518 |                     <div class="offer-text">
519 |                         <h6 class="text-white text-uppercase">Save 20%</h6>
520 |                         <h3 class="text-white mb-3">Special Offer</h3>
521 |                         <a href="" class="btn btn-primary">Shop Now</a>
522 |                     </div>
523 |                 </div>
524 |             </div>
525 |         </div>
526 |     </div>
527 |     <!-- Offer End -->
528 | 
529 | 
530 |     <!-- Products Start -->
531 |     <div class="container-fluid pt-5 pb-3">
532 |         <h2 class="section-title position-relative text-uppercase mx-xl-5 mb-4"><span class="bg-secondary pr-3">Recent Products</span></h2>
533 |         <div class="row px-xl-5">
534 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
535 |                 <div class="product-item bg-light mb-4">
536 |                     <div class="product-img position-relative overflow-hidden">
537 |                         <img class="img-fluid w-100" src="assets/img/product-1.jpg" alt="">
538 |                         <div class="product-action">
539 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
540 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
541 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
542 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
543 |                         </div>
544 |                     </div>
545 |                     <div class="text-center py-4">
546 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
547 |                         <div class="d-flex align-items-center justify-content-center mt-2">
548 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
549 |                         </div>
550 |                         <div class="d-flex align-items-center justify-content-center mb-1">
551 |                             <small class="fa fa-star text-primary mr-1"></small>
552 |                             <small class="fa fa-star text-primary mr-1"></small>
553 |                             <small class="fa fa-star text-primary mr-1"></small>
554 |                             <small class="fa fa-star text-primary mr-1"></small>
555 |                             <small class="fa fa-star text-primary mr-1"></small>
556 |                             <small>(99)</small>
557 |                         </div>
558 |                     </div>
559 |                 </div>
560 |             </div>
561 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
562 |                 <div class="product-item bg-light mb-4">
563 |                     <div class="product-img position-relative overflow-hidden">
564 |                         <img class="img-fluid w-100" src="assets/img/product-2.jpg" alt="">
565 |                         <div class="product-action">
566 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
567 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
568 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
569 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
570 |                         </div>
571 |                     </div>
572 |                     <div class="text-center py-4">
573 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
574 |                         <div class="d-flex align-items-center justify-content-center mt-2">
575 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
576 |                         </div>
577 |                         <div class="d-flex align-items-center justify-content-center mb-1">
578 |                             <small class="fa fa-star text-primary mr-1"></small>
579 |                             <small class="fa fa-star text-primary mr-1"></small>
580 |                             <small class="fa fa-star text-primary mr-1"></small>
581 |                             <small class="fa fa-star text-primary mr-1"></small>
582 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
583 |                             <small>(99)</small>
584 |                         </div>
585 |                     </div>
586 |                 </div>
587 |             </div>
588 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
589 |                 <div class="product-item bg-light mb-4">
590 |                     <div class="product-img position-relative overflow-hidden">
591 |                         <img class="img-fluid w-100" src="assets/img/product-3.jpg" alt="">
592 |                         <div class="product-action">
593 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
594 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
595 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
596 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
597 |                         </div>
598 |                     </div>
599 |                     <div class="text-center py-4">
600 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
601 |                         <div class="d-flex align-items-center justify-content-center mt-2">
602 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
603 |                         </div>
604 |                         <div class="d-flex align-items-center justify-content-center mb-1">
605 |                             <small class="fa fa-star text-primary mr-1"></small>
606 |                             <small class="fa fa-star text-primary mr-1"></small>
607 |                             <small class="fa fa-star text-primary mr-1"></small>
608 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
609 |                             <small class="far fa-star text-primary mr-1"></small>
610 |                             <small>(99)</small>
611 |                         </div>
612 |                     </div>
613 |                 </div>
614 |             </div>
615 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
616 |                 <div class="product-item bg-light mb-4">
617 |                     <div class="product-img position-relative overflow-hidden">
618 |                         <img class="img-fluid w-100" src="assets/img/product-4.jpg" alt="">
619 |                         <div class="product-action">
620 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
621 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
622 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
623 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
624 |                         </div>
625 |                     </div>
626 |                     <div class="text-center py-4">
627 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
628 |                         <div class="d-flex align-items-center justify-content-center mt-2">
629 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
630 |                         </div>
631 |                         <div class="d-flex align-items-center justify-content-center mb-1">
632 |                             <small class="fa fa-star text-primary mr-1"></small>
633 |                             <small class="fa fa-star text-primary mr-1"></small>
634 |                             <small class="fa fa-star text-primary mr-1"></small>
635 |                             <small class="far fa-star text-primary mr-1"></small>
636 |                             <small class="far fa-star text-primary mr-1"></small>
637 |                             <small>(99)</small>
638 |                         </div>
639 |                     </div>
640 |                 </div>
641 |             </div>
642 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
643 |                 <div class="product-item bg-light mb-4">
644 |                     <div class="product-img position-relative overflow-hidden">
645 |                         <img class="img-fluid w-100" src="assets/img/product-5.jpg" alt="">
646 |                         <div class="product-action">
647 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
648 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
649 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
650 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
651 |                         </div>
652 |                     </div>
653 |                     <div class="text-center py-4">
654 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
655 |                         <div class="d-flex align-items-center justify-content-center mt-2">
656 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
657 |                         </div>
658 |                         <div class="d-flex align-items-center justify-content-center mb-1">
659 |                             <small class="fa fa-star text-primary mr-1"></small>
660 |                             <small class="fa fa-star text-primary mr-1"></small>
661 |                             <small class="fa fa-star text-primary mr-1"></small>
662 |                             <small class="fa fa-star text-primary mr-1"></small>
663 |                             <small class="fa fa-star text-primary mr-1"></small>
664 |                             <small>(99)</small>
665 |                         </div>
666 |                     </div>
667 |                 </div>
668 |             </div>
669 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
670 |                 <div class="product-item bg-light mb-4">
671 |                     <div class="product-img position-relative overflow-hidden">
672 |                         <img class="img-fluid w-100" src="assets/img/product-6.jpg" alt="">
673 |                         <div class="product-action">
674 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
675 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
676 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
677 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
678 |                         </div>
679 |                     </div>
680 |                     <div class="text-center py-4">
681 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
682 |                         <div class="d-flex align-items-center justify-content-center mt-2">
683 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
684 |                         </div>
685 |                         <div class="d-flex align-items-center justify-content-center mb-1">
686 |                             <small class="fa fa-star text-primary mr-1"></small>
687 |                             <small class="fa fa-star text-primary mr-1"></small>
688 |                             <small class="fa fa-star text-primary mr-1"></small>
689 |                             <small class="fa fa-star text-primary mr-1"></small>
690 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
691 |                             <small>(99)</small>
692 |                         </div>
693 |                     </div>
694 |                 </div>
695 |             </div>
696 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
697 |                 <div class="product-item bg-light mb-4">
698 |                     <div class="product-img position-relative overflow-hidden">
699 |                         <img class="img-fluid w-100" src="assets/img/product-7.jpg" alt="">
700 |                         <div class="product-action">
701 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
702 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
703 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
704 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
705 |                         </div>
706 |                     </div>
707 |                     <div class="text-center py-4">
708 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
709 |                         <div class="d-flex align-items-center justify-content-center mt-2">
710 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
711 |                         </div>
712 |                         <div class="d-flex align-items-center justify-content-center mb-1">
713 |                             <small class="fa fa-star text-primary mr-1"></small>
714 |                             <small class="fa fa-star text-primary mr-1"></small>
715 |                             <small class="fa fa-star text-primary mr-1"></small>
716 |                             <small class="fa fa-star-half-alt text-primary mr-1"></small>
717 |                             <small class="far fa-star text-primary mr-1"></small>
718 |                             <small>(99)</small>
719 |                         </div>
720 |                     </div>
721 |                 </div>
722 |             </div>
723 |             <div class="col-lg-3 col-md-4 col-sm-6 pb-1">
724 |                 <div class="product-item bg-light mb-4">
725 |                     <div class="product-img position-relative overflow-hidden">
726 |                         <img class="img-fluid w-100" src="assets/img/product-8.jpg" alt="">
727 |                         <div class="product-action">
728 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-shopping-cart"></i></a>
729 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="far fa-heart"></i></a>
730 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-sync-alt"></i></a>
731 |                             <a class="btn btn-outline-dark btn-square" href=""><i class="fa fa-search"></i></a>
732 |                         </div>
733 |                     </div>
734 |                     <div class="text-center py-4">
735 |                         <a class="h6 text-decoration-none text-truncate" href="">Product Name Goes Here</a>
736 |                         <div class="d-flex align-items-center justify-content-center mt-2">
737 |                             <h5>$123.00</h5><h6 class="text-muted ml-2"><del>$123.00</del></h6>
738 |                         </div>
739 |                         <div class="d-flex align-items-center justify-content-center mb-1">
740 |                             <small class="fa fa-star text-primary mr-1"></small>
741 |                             <small class="fa fa-star text-primary mr-1"></small>
742 |                             <small class="fa fa-star text-primary mr-1"></small>
743 |                             <small class="far fa-star text-primary mr-1"></small>
744 |                             <small class="far fa-star text-primary mr-1"></small>
745 |                             <small>(99)</small>
746 |                         </div>
747 |                     </div>
748 |                 </div>
749 |             </div>
750 |         </div>
751 |     </div>
752 |     <!-- Products End -->
753 | 
754 | 
755 |     <!-- Vendor Start -->
756 |     <div class="container-fluid py-5">
757 |         <div class="row px-xl-5">
758 |             <div class="col">
759 |                 <div class="owl-carousel vendor-carousel">
760 |                     <div class="bg-light p-4">
761 |                         <img src="assets/img/vendor-1.jpg" alt="">
762 |                     </div>
763 |                     <div class="bg-light p-4">
764 |                         <img src="assets/img/vendor-2.jpg" alt="">
765 |                     </div>
766 |                     <div class="bg-light p-4">
767 |                         <img src="assets/img/vendor-3.jpg" alt="">
768 |                     </div>
769 |                     <div class="bg-light p-4">
770 |                         <img src="assets/img/vendor-4.jpg" alt="">
771 |                     </div>
772 |                     <div class="bg-light p-4">
773 |                         <img src="assets/img/vendor-5.jpg" alt="">
774 |                     </div>
775 |                     <div class="bg-light p-4">
776 |                         <img src="assets/img/vendor-6.jpg" alt="">
777 |                     </div>
778 |                     <div class="bg-light p-4">
779 |                         <img src="assets/img/vendor-7.jpg" alt="">
780 |                     </div>
781 |                     <div class="bg-light p-4">
782 |                         <img src="assets/img/vendor-8.jpg" alt="">
783 |                     </div>
784 |                 </div>
785 |             </div>
786 |         </div>
787 |     </div>
788 |     <!-- Vendor End -->
789 | 
790 | 
791 |     <!-- Footer Start -->
792 |     {% include "components/footer.html" %}
793 |     <!-- Footer End -->
794 | 
795 | 
796 | {% endblock %}
797 | 


--------------------------------------------------------------------------------