Files
front.admin/src/ecommerce-order-details.html
2022-04-12 07:26:41 +02:00

673 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="@@languageDirection.lang">
<head>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Order Details | Front - Admin &amp; Dashboard Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="@@autopath/favicon.ico">
<!-- Font -->
<link href="@@vars.themeFont" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<!-- bundlecss:vendor [@@autopath] -->
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
@@if(layoutBuilder.header.layoutMode !== 'default') {
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
}
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
@@if(layoutBuilder.extend.switcherSupport === false) {
<link rel="stylesheet" href="@@autopath/assets/css/theme@@if(themeAppearance.layoutSkin === 'dark'){-dark}.css">
}
@@if(layoutBuilder.extend.switcherSupport === true) {
<link rel="preload" href="@@autopath/assets/css/theme.css" data-hs-appearance="default" as="style">
<link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
<style data-hs-appearance-onload-styles>
* {
transition: unset !important;
}
body {
opacity: 0;
}
</style>
}
</head>
<body class="@@if(layoutBuilder.header.layoutMode === 'default'){has-navbar-vertical-aside navbar-vertical-aside-show-xl} @@if(layoutBuilder.sidebarLayout === 'compact'){navbar-vertical-aside-compact-mode navbar-vertical-aside-compact-mini-mode} @@if(layoutBuilder.sidebarLayout === 'mini'){navbar-vertical-aside-mini-mode} footer-offset">
@@if(layoutBuilder.extend.switcherSupport === true) {
<script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
}
@@if(layoutBuilder.sidebarLayout !== 'compact' && layoutBuilder.sidebarLayout !== 'mini') {
<script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside-mini-cache.js"></script>
}
<!-- ========== HEADER ========== -->
@@if(layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/navbar/main.html")
}
@@if(layoutBuilder.header.layoutMode === 'single') {
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/navbar/main-container.html")
}
}
@@if(layoutBuilder.header.layoutMode === 'double') {
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/navbar/double-line-container.html")
}
}
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<!-- Navbar Vertical -->
@@if(layoutBuilder.sidebarLayout !== 'compact' && layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/sidebar/main.html", {
"category": "ecommerce",
"subcategory": "orders",
"link": "ecommerce-order-details.html"
})
}
@@if(layoutBuilder.sidebarLayout === 'compact' && layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/sidebar/compact.html", {
"category": "ecommerce",
"subcategory": "orders",
"link": "ecommerce-order-details.html"
})
}
<main id="content" role="main" class="main">
<!-- Content -->
<div class="content @@layoutBuilder.header.containerMode">
<!-- Page Header -->
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col-sm mb-2 mb-sm-0">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-no-gutter">
<li class="breadcrumb-item"><a class="breadcrumb-link" href="@@autopath/ecommerce-orders.html">Orders</a></li>
<li class="breadcrumb-item active" aria-current="page">Order details</li>
</ol>
</nav>
<div class="d-sm-flex align-items-sm-center">
<h1 class="page-header-title">Order #32543</h1>
<span class="badge bg-soft-success text-success ms-sm-3">
<span class="legend-indicator bg-success"></span>Paid
</span>
<span class="badge bg-soft-info text-info ms-2 ms-sm-3">
<span class="legend-indicator bg-info"></span>Fulfilled
</span>
<span class="ms-2 ms-sm-3">
<i class="bi-calendar-week"></i> Aug 17, 2020, 5:48 (ET)
</span>
</div>
<div class="mt-2">
<div class="d-flex gap-2">
<a class="text-body me-3" href="javascript:;" onclick="window.print(); return false;">
<i class="bi-printer me-1"></i> Print order
</a>
<!-- Dropdown -->
<div class="dropdown">
<a class="text-body" href="javascript:;" id="moreOptionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
More options <i class="bi-chevron-down"></i>
</a>
<div class="dropdown-menu mt-1" aria-labelledby="moreOptionsDropdown">
<a class="dropdown-item" href="#">
<i class="bi-clipboard dropdown-item-icon"></i> Duplicate
</a>
<a class="dropdown-item" href="#">
<i class="bi-x dropdown-item-icon"></i> Cancel order
</a>
<a class="dropdown-item" href="#">
<i class="bi-archive dropdown-item-icon"></i> Archive
</a>
<a class="dropdown-item" href="#">
<i class="bi-eye dropdown-item-icon"></i> View order status page
</a>
<a class="dropdown-item" href="#">
<i class="bi-pencil dropdown-item-icon"></i> Edit order
</a>
</div>
</div>
<!-- End Dropdown -->
</div>
</div>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-2">
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" data-bs-toggle="tooltip" data-bs-placement="right" title="Previous order">
<i class="bi-arrow-left"></i>
</button>
<button type="button" class="btn btn-ghost-secondary btn-icon btn-sm rounded-circle" data-bs-toggle="tooltip" data-bs-placement="right" title="Next order">
<i class="bi-arrow-right"></i>
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Page Header -->
<div class="row">
<div class="col-lg-8 mb-3 mb-lg-0">
<!-- Card -->
<div class="card mb-3 mb-lg-5">
<!-- Header -->
<div class="card-header card-header-content-between">
<h4 class="card-header-title">Order details <span class="badge bg-soft-dark text-dark rounded-circle ms-1">4</span></h4>
<a class="link" href="javascript:;">Edit</a>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<div class="avatar avatar-xl">
<img class="img-fluid" src="@@autopath/assets/img/400x400/img26.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<a class="h5 d-block" href="@@autopath/ecommerce-product-details.html">Topman shoe in green</a>
<div class="fs-6 text-body">
<span>Gender:</span>
<span class="fw-semi-bold">Women</span>
</div>
<div class="fs-6 text-body">
<span>Color:</span>
<span class="fw-semi-bold">Green</span>
</div>
<div class="fs-6 text-body">
<span>Size:</span>
<span class="fw-semi-bold">UK 7</span>
</div>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center">
<h5>$21.00</h5>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center">
<h5>2</h5>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center text-end">
<h5>$42.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
<hr>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<div class="avatar avatar-xl">
<img class="img-fluid" src="@@autopath/assets/img/400x400/img22.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<a class="h5 d-block" href="@@autopath/ecommerce-product-details.html">Office Notebook</a>
<div class="fs-6 text-body">
<span>Color:</span>
<span class="fw-semi-bold">Gray</span>
</div>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center">
<h5>$9</h5>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center">
<h5>1</h5>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center text-end">
<h5>$9.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
<hr>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<div class="avatar avatar-xl">
<img class="img-fluid" src="@@autopath/assets/img/400x400/img15.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<a class="h5 d-block" href="@@autopath/ecommerce-product-details.html">RayBan sunglasses</a>
<div class="fs-6 text-body">
<span>Gender:</span>
<span class="fw-semi-bold">Unisex</span>
</div>
<div class="fs-6 text-body">
<span>Color:</span>
<span class="fw-semi-bold">Black</span>
</div>
<div class="fs-6 text-body">
<span>Size:</span>
<span class="fw-semi-bold">One size</span>
</div>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center">
<h5>$14.00</h5>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center">
<h5>1</h5>
</div>
<!-- End Col -->
<div class="col col-md-2 align-self-center text-end">
<h5>$14.00</h5>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
<hr>
<div class="row justify-content-md-end mb-3">
<div class="col-md-8 col-lg-7">
<dl class="row text-sm-end">
<dt class="col-sm-6">Subtotal:</dt>
<dd class="col-sm-6">$65.00</dd>
<dt class="col-sm-6">Shipping fee:</dt>
<dd class="col-sm-6">$0.00</dd>
<dt class="col-sm-6">Tax:</dt>
<dd class="col-sm-6">$7.00</dd>
<dt class="col-sm-6">Total:</dt>
<dd class="col-sm-6">$65.00</dd>
<dt class="col-sm-6">Amount paid:</dt>
<dd class="col-sm-6">$65.00</dd>
</dl>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h4 class="card-header-title">
Shipping activity
<span class="badge bg-soft-dark text-dark ms-1">
<span class="legend-indicator bg-dark"></span>Marked as fulfilled
</span>
</h4>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<!-- Step -->
<ul class="step step-icon-xs">
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-divider">Wednesday, 19 August</span>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Delivered</a>
</h5>
<p class="fs-6 mb-0">4:17 AM</p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Out for delivery</a>
</h5>
<p class="fs-6 mb-0">2:38 AM</p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Package arrived at the final delivery station</a>
</h5>
<p class="fs-6 mb-0">2:00 AM</p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-divider">Tuesday, 18 August</span>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Tracking number</a>
</h5>
<a href="#">3981241023109293</a>
<p class="fs-6 mb-0">6:29 AM</p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Package has dispatched</a>
</h5>
<p class="fs-6 mb-0">6:29 AM</p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Order was placed</a>
</h5>
<p class="fs-6 mb-0">Order #32543</p>
</div>
</div>
</li>
<!-- End Step Item -->
</ul>
<!-- End Step -->
<span class="small">Times are shown in the local time zone.</span>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
</div>
<div class="col-lg-4">
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h4 class="card-header-title">Customer</h4>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<!-- List Group -->
<ul class="list-group list-group-flush list-group-no-gutters">
<li class="list-group-item">
<a class="d-flex align-items-center" href="@@autopath/ecommerce-customer-details.html">
<div class="avatar avatar-circle">
<img class="avatar-img" src="@@autopath/assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<span class="text-body text-inherit">Amanda Harvey</span>
</div>
<div class="flex-grow-1 text-end">
<i class="bi-chevron-right text-body"></i>
</div>
</a>
</li>
<li class="list-group-item">
<a class="d-flex align-items-center" href="@@autopath/ecommerce-customer-details.html">
<div class="icon icon-soft-info icon-circle">
<i class="bi-basket"></i>
</div>
<div class="flex-grow-1 ms-3">
<span class="text-body text-inherit">7 orders</span>
</div>
<div class="flex-grow-1 text-end">
<i class="bi-chevron-right text-body"></i>
</div>
</a>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<h5>Contact info</h5>
<a class="link" href="javascript:;">Edit</a>
</div>
<ul class="list-unstyled list-py-2 text-body">
<li><i class="bi-at me-2"></i>ella@site.com</li>
<li><i class="bi-phone me-2"></i>+1 (609) 972-22-22</li>
</ul>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<h5>Shipping address</h5>
<a class="link" href="javascript:;">Edit</a>
</div>
<span class="d-block text-body">
45 Roker Terrace<br>
Latheronwheel<br>
KW5 8NW, London<br>
UK <img class="avatar avatar-xss avatar-circle ms-1" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</span>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<h5>Billing address</h5>
<a class="link" href="javascript:;">Edit</a>
</div>
<span class="d-block text-body">
45 Roker Terrace<br>
Latheronwheel<br>
KW5 8NW, London<br>
UK <img class="avatar avatar-xss avatar-circle ms-1" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</span>
<div class="mt-3">
<h5 class="mb-0">Mastercard</h5>
<span class="d-block text-body">Card Number: ************4291</span>
</div>
</li>
</ul>
<!-- End List Group -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Row -->
</div>
<!-- End Content -->
<!-- Footer -->
@@if(layoutBuilder.header.containerMode === 'container-fluid') {
@@include("@@autopath/partials/footer/main.html")
}
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/footer/container.html")
}
<!-- End Footer -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Keyboard Shortcuts -->
@@include("@@autopath/partials/layouts-components/offcanvas-shortcuts.html")
<!-- End Keyboard Shortcuts -->
<!-- Activity -->
@@include("@@autopath/partials/layouts-components/offcanvas-activity.html")
<!-- End Activity -->
<!-- Welcome Message Modal -->
@@include("@@autopath/partials/modals/welcome-message.html")
<!-- End Welcome Message Modal -->
<!-- Export Orders Modal -->
@@include("@@autopath/partials/modals/export-orders.html")
<!-- End Export Orders Modal -->
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory @@deleteLine:build -->
<script src="@@autopath/node_modules/jquery/dist/jquery.min.js"></script>
<script src="@@autopath/node_modules/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [@@autopath] -->
<script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside.min.js"></script>
<script src="@@autopath/assets/vendor/hs-form-search/dist/hs-form-search.min.js"></script>
@@if(layoutBuilder.header.layoutMode !== 'default') {
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
}
<!-- JS Front -->
<!-- bundlejs:theme [@@autopath] -->
<script src="@@autopath/assets/js/hs.core.js"></script>
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
window.onload = function () {
@@if(layoutBuilder.header.layoutMode !== 'default') {
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
}
// INITIALIZATION OF NAVBAR VERTICAL ASIDE
// =======================================================
new HSSideNav('.js-navbar-vertical-aside').init()
// INITIALIZATION OF FORM SEARCH
// =======================================================
new HSFormSearch('.js-form-search')
// INITIALIZATION OF BOOTSTRAP DROPDOWN
// =======================================================
HSBsDropdown.init()
}
})()
</script>
<!-- Style Switcher JS -->
@@if(layoutBuilder.extend.switcherSupport === true) {
@@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
}
<!-- End Style Switcher JS -->
</body>
</html>